/* ============================================================ HomeScout NL — design system "Jellybean rows over the North Atlantic" Base: fog-white paper, harbour-navy ink. Accents: row-house jellybeans, one semantic role each — teal → primary action / tool activity ochre → sample badge, data-change flash cobalt → links + focus rings red → brand mark, danger plum → reserved (brand mark only) ============================================================ */ :root { /* Base — North Atlantic */ --paper: #f4f1ea; --paper-2: #ece7db; --paper-3: #e4ddcd; --ink: #1b2430; --slate: #3e4c59; --muted: #6b7682; --hairline: #d9d3c7; --hairline-soft: #e5e0d4; /* Accents — jellybean houses */ --jelly-red: #c8443b; --jelly-ochre: #d98a2b; --jelly-teal: #2f7e78; --jelly-cobalt: #2e5a8c; --jelly-plum: #7a4e7a; /* Roles */ --accent: var(--jelly-teal); --accent-ink: #f6f3ec; /* text on accent */ --link: var(--jelly-cobalt); --danger: var(--jelly-red); --flash: var(--jelly-ochre); --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 0 rgba(27, 36, 48, .04), 0 10px 30px -18px rgba(27, 36, 48, .35); --shadow-lift: 0 2px 4px -2px rgba(27, 36, 48, .12), 0 14px 34px -18px rgba(27, 36, 48, .4); --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Spline Sans Mono", ui-monospace, "Cascadia Mono", monospace; --grain-opacity: .05; --ease-out: cubic-bezier(.22, 1, .36, 1); } /* Real dark mode — re-derived for an ink-navy night harbour, jellybeans brightened a step so they read against the dark. */ [data-theme="dark"] { --paper: #141b24; --paper-2: #1b2531; --paper-3: #232f3d; --ink: #eef1f4; --slate: #c2cbd4; --muted: #8b97a3; --hairline: #2b3744; --hairline-soft: #243040; --jelly-red: #d8645b; --jelly-ochre: #e09b45; --jelly-teal: #46998f; --jelly-cobalt: #6f97c4; --jelly-plum: #a47aa4; --accent-ink: #0e1418; --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 12px 34px -20px rgba(0, 0, 0, .7); --shadow-lift: 0 2px 4px -2px rgba(0, 0, 0, .4), 0 16px 38px -20px rgba(0, 0, 0, .8); --grain-opacity: .07; } /* ---------- Ground ---------- */ * { box-sizing: border-box; } html, body { height: 100%; } /* App shell: #app is sized to exactly the viewport and never shrinks, and the body clips anything beyond it — so elements that browser extensions (Grammarly etc.) inject into can't stretch the page or open dead space under the app. report.html has neither class nor #app and keeps normal document flow. */ body.app-shell { overflow: hidden; } #app { display: flex; flex-direction: column; height: 100%; flex-shrink: 0; min-height: 0; } body { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.55; color: var(--ink); background: radial-gradient(1200px 620px at 82% -12%, color-mix(in srgb, var(--jelly-cobalt) 9%, transparent), transparent 70%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--jelly-teal) 6%, transparent), transparent 70%), var(--paper); display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; transition: background .35s ease, color .35s ease; } /* Fog grain — one quiet layer of texture over everything */ body::before { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } ::selection { background: color-mix(in srgb, var(--jelly-cobalt) 26%, transparent); } :focus-visible { outline: 2px solid var(--jelly-cobalt); outline-offset: 2px; border-radius: 4px; } /* Quiet scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; } *::-webkit-scrollbar { width: 9px; height: 9px; } *::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-track { background: transparent; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(7px); } .brand { display: flex; align-items: flex-end; gap: 11px; text-decoration: none; color: var(--ink); } .brand__mark { display: block; flex: none; } .brand:hover .brand__mark { filter: saturate(1.18); } .brand__name { font-family: var(--serif); font-weight: 800; font-size: 21px; letter-spacing: -.015em; line-height: 1.1; } .brand__nl { color: var(--jelly-red); } .topbar__actions { display: flex; align-items: center; gap: 10px; } .topbar__tag { font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; padding-right: 4px; } /* ---------- Buttons ---------- */ .btn { font: inherit; font-weight: 500; cursor: pointer; border-radius: 999px; border: 1px solid var(--hairline); background: transparent; color: var(--ink); padding: 7px 14px; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease; } .btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .btn:active { transform: translateY(1px); } .btn--ghost { font-size: 13px; color: var(--slate); } .btn--icon { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; } /* Theme toggle shows the mode you'd switch to */ .theme-icon { display: block; } [data-theme="light"] .theme-icon--sun { display: none; } [data-theme="dark"] .theme-icon--moon { display: none; } .btn--send { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--accent-ink); border-color: transparent; padding: 11px 20px; font-weight: 600; letter-spacing: .01em; box-shadow: 0 1px 0 rgba(27, 36, 48, .08); } .btn--send:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); box-shadow: var(--shadow-lift); } .btn--send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } /* Stop mode: same size as Send but danger-tinted */ .btn--stop { background: var(--danger); border-color: transparent; color: var(--accent-ink); } .btn--stop:hover { background: color-mix(in srgb, var(--danger) 88%, var(--ink)); box-shadow: var(--shadow-lift); } /* Stopped note — muted inline annotation */ .msg__stopped { margin-top: .6em; font-size: .82em; color: var(--muted); font-style: italic; } /* ---------- Conversation switcher ---------- */ .convo { position: relative; } .convo__caret { display: inline-block; margin-left: 5px; vertical-align: 1px; transition: transform .2s var(--ease-out); } .convo [aria-expanded="true"] .convo__caret { transform: rotate(180deg); } .convo__panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 120; width: min(330px, calc(100vw - 32px)); padding: 8px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lift); animation: msg-in .22s var(--ease-out) both; } .convo__panel[hidden] { display: none; } .convo__new { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--hairline)); border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 6px; transition: background .15s ease, border-color .15s ease; } .convo__new:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: var(--accent); } .convo__list { max-height: min(46vh, 380px); overflow-y: auto; } .convo__empty { font-size: 13px; padding: 10px 10px 8px; } .convo__item { display: flex; align-items: center; gap: 4px; border-radius: var(--radius-sm); transition: background .12s ease; } .convo__item:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .convo__item--current { background: color-mix(in srgb, var(--accent) 9%, transparent); } .convo__item--current .convo__title { color: var(--accent); } .convo__open { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: inherit; text-align: left; color: inherit; cursor: pointer; background: none; border: none; padding: 9px 4px 9px 10px; border-radius: var(--radius-sm); } .convo__title { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .convo__date { flex: none; font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; } .convo__del { flex: none; font: inherit; font-size: 14px; line-height: 1; color: var(--muted); cursor: pointer; background: none; border: none; border-radius: 999px; padding: 5px 9px; margin-right: 3px; transition: color .15s ease, background .15s ease; } .convo__del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); } /* Armed state: one more click really deletes */ .convo__del--confirm { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } /* ---------- Layout ---------- */ .layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 368px; } .chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hairline); } .messages { flex: 1; overflow-y: auto; padding: 30px clamp(20px, 6vw, 84px) 18px; display: flex; flex-direction: column; gap: 24px; scroll-behavior: smooth; } /* ---------- Messages ---------- */ .msg { max-width: 760px; animation: msg-in .32s var(--ease-out) both; } @keyframes msg-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } } .msg--user { align-self: flex-end; background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 16px 16px 4px 16px; box-shadow: var(--shadow); max-width: min(560px, 86%); white-space: pre-wrap; overflow-wrap: break-word; } [data-theme="dark"] .msg--user { background: var(--paper-3); color: var(--ink); border: 1px solid var(--hairline); } .msg--assistant { align-self: flex-start; width: 100%; } .msg__role { display: flex; align-items: center; gap: 9px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: 7px; } .msg__role::after { content: ""; flex: none; width: 34px; height: 1px; background: var(--hairline); } /* ---------- Prose (rendered markdown) ---------- */ .prose { line-height: 1.62; color: var(--ink); } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose p { margin: .55em 0; } .prose h1, .prose h2, .prose h3 { margin: 1em 0 .35em; line-height: 1.25; } .prose h1 { font-size: 22px; } .prose h2 { font-size: 18px; } .prose h3 { font-size: 16px; } .prose ul, .prose ol { margin: .5em 0; padding-left: 1.45em; } .prose li { margin: .22em 0; } .prose li::marker { color: var(--muted); } .prose a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent); text-underline-offset: 2px; } .prose a:hover { text-decoration-color: var(--link); } .prose strong { font-weight: 600; } .prose code { font-family: var(--mono); font-size: .92em; background: var(--paper-2); border: 1px solid var(--hairline-soft); padding: 1px 5px; border-radius: 5px; } .prose pre { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 14px; overflow-x: auto; } .prose pre code { background: none; border: none; padding: 0; } .prose blockquote { margin: .7em 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--hairline); color: var(--slate); } .prose hr { border: none; border-top: 1px solid var(--hairline); margin: 1.1em 0; } /* Money tables — the editorial centrepiece */ .prose table { border-collapse: collapse; margin: .85em 0; font-size: 14px; width: 100%; max-width: 640px; } .prose th, .prose td { border: 1px solid var(--hairline); padding: 8px 12px; text-align: left; vertical-align: top; } .prose th { background: var(--paper-2); font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); } .prose td:last-child, .prose th:last-child { font-variant-numeric: tabular-nums; } .prose td:last-child { font-family: var(--mono); font-size: 13.5px; } .prose tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-2) 45%, transparent); } /* ---------- Tool chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; } .chips:empty { display: none; } .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--slate); padding: 5px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--hairline); animation: chip-in .25s var(--ease-out) both; transition: border-color .3s ease, color .3s ease; } @keyframes chip-in { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } } .chip__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transition: background .3s ease; } /* Working: teal pulse. Settled: the dot dims, the chip goes quiet. */ .chip--active { border-color: color-mix(in srgb, var(--accent) 50%, var(--hairline)); color: var(--ink); } .chip--active .chip__dot { animation: chip-pulse 1.1s ease-in-out infinite; } @keyframes chip-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } } .chip:not(.chip--active) .chip__dot { background: color-mix(in srgb, var(--accent) 55%, var(--hairline)); } /* ---------- Composer ---------- */ .composer { display: flex; align-items: flex-end; gap: 10px; padding: 14px clamp(20px, 6vw, 84px) 16px; border-top: 1px solid var(--hairline); background: linear-gradient( color-mix(in srgb, var(--paper-2) 35%, var(--paper)), var(--paper)); } .composer__field { flex: 1; min-width: 0; } .composer__input { width: 100%; resize: none; font: inherit; line-height: 1.5; color: var(--ink); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 15px; max-height: 160px; transition: border-color .15s ease, box-shadow .15s ease; } .composer__input::placeholder { color: var(--muted); } .composer__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .composer__hint { margin: 5px 2px 0; font-size: 11px; color: var(--muted); letter-spacing: .015em; user-select: none; } .composer .btn--send { margin-bottom: 23px; } /* ---------- Sidebar ---------- */ .sidebar { /* min-height: 0 overrides the grid item's implicit min-height: auto — without it a long Scout feed stretches the row past the viewport and pushes the composer below the fold. */ min-height: 0; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 16px; } .card { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; flex: none; } .card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px 11px; border-bottom: 1px solid var(--hairline-soft); } .card__head h2 { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--slate); margin: 0; } .card__count { font-family: var(--mono); font-size: 12px; color: var(--muted); } .card__body { padding: 14px 16px 15px; font-size: 13.5px; } /* Ochre flash when the agent changes this card's data */ .card--flash { animation: card-flash 1.2s var(--ease-out); } @keyframes card-flash { 0% { background: color-mix(in srgb, var(--flash) 22%, var(--paper-2)); border-color: color-mix(in srgb, var(--flash) 55%, var(--hairline)); } 100% { background: var(--paper-2); border-color: var(--hairline); } } .sidebar__foot { margin: 2px 4px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); } /* ---------- Profile (key/value + tags) ---------- */ .kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; } .tag { font-size: 11.5px; font-weight: 500; color: var(--slate); padding: 2px 9px; border-radius: 999px; background: var(--paper); border: 1px solid var(--hairline); } /* Sentence-length entries: a stadium pill wrapping three lines reads clumsy — long tags become full-width, soft-cornered note rows. */ .tag--long { flex-basis: 100%; border-radius: 9px; padding: 6px 11px; line-height: 1.5; } /* Scout feed: save-to-tracker action */ .find__actions { margin-top: 6px; } .find__save { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--accent); background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--hairline)); border-radius: 999px; padding: 2px 12px; cursor: pointer; transition: background .12s ease; } .find__save:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } .find__save:disabled { opacity: .55; cursor: default; } .find__saved { font-size: 11.5px; font-weight: 600; color: var(--accent); } .tags .tag:first-child { background: transparent; border-color: transparent; padding-left: 0; color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .09em; align-self: center; } /* ---------- Listings ---------- */ .listing { padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); } .listing:first-child { padding-top: 2px; } .listing:last-child { border-bottom: none; padding-bottom: 2px; } .listing__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .listing__addr { font-weight: 600; min-width: 0; } .listing__price { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); } .listing__meta { color: var(--muted); font-size: 12px; margin-top: 3px; } .badge { display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--hairline); color: var(--muted); vertical-align: 1px; } .badge--sample { color: var(--jelly-ochre); border-color: color-mix(in srgb, var(--jelly-ochre) 45%, var(--hairline)); background: color-mix(in srgb, var(--jelly-ochre) 8%, transparent); } /* ---------- Scout (listing watcher) ---------- */ .card__head--scout { gap: 8px; } .card__head--scout h2 { flex: none; } /* Unseen-count badge: a jellybean-red berry next to the card title */ .scout__badge { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--jelly-red); padding: 1px 8px 1px 7px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--jelly-red) 45%, var(--hairline)); background: color-mix(in srgb, var(--jelly-red) 10%, transparent); } .scout__badge[hidden] { display: none; } .scout__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jelly-red); animation: chip-pulse 1.4s ease-in-out infinite; } .scout__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .scout__seen { font: inherit; font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; background: none; border: none; padding: 2px 4px; border-radius: 6px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); text-underline-offset: 2px; transition: color .15s ease; } .scout__seen:hover { color: var(--ink); } .scout__run { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 12px; } .scout__run-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* Scanning: the dot pulses teal, the label dims */ .scout__run--busy { color: var(--muted); cursor: progress; } .scout__run--busy .scout__run-dot { animation: chip-pulse 1.1s ease-in-out infinite; } .scout__run:disabled { opacity: .75; } /* Feed rows — compact listing rows with a fresh-find tint */ .find { padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); } .find:first-of-type { padding-top: 2px; } .find:last-child { border-bottom: none; padding-bottom: 2px; } .find__addr { font-weight: 600; min-width: 0; color: var(--ink); text-decoration: none; } a.find__addr { color: var(--link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: 2px; } a.find__addr:hover { text-decoration-color: var(--link); } .find__meta { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; margin-top: 4px; } .find__score { font-size: 11px; font-weight: 500; color: var(--jelly-teal); border: 1px solid color-mix(in srgb, var(--jelly-teal) 40%, var(--hairline)); border-radius: 6px; padding: 0 6px; } .find__tags { margin-top: 7px; } .find__tags .tag:first-child { /* feed tags are all real reasons — no label slot like the profile tags */ background: var(--paper); border-color: var(--hairline); padding: 2px 9px; color: var(--slate); text-transform: none; font-size: 11.5px; letter-spacing: normal; } /* Fresh (unseen) find: a quiet red thread down the left edge */ .find--fresh { border-left: 2px solid color-mix(in srgb, var(--jelly-red) 55%, transparent); padding-left: 10px; margin-left: -2px; } /* "All boxes" find: teal-washed row + badge */ .find--allboxes { background: color-mix(in srgb, var(--jelly-teal) 6%, transparent); border-radius: var(--radius-sm); padding-left: 10px; padding-right: 8px; margin-left: -2px; border-bottom-color: transparent; } .find--allboxes.find--fresh { border-left-color: var(--jelly-teal); } .badge--allboxes { color: var(--jelly-teal); border-color: color-mix(in srgb, var(--jelly-teal) 45%, var(--hairline)); background: color-mix(in srgb, var(--jelly-teal) 10%, transparent); white-space: nowrap; } .scout__note { font-size: 12.5px; margin-bottom: 8px; } /* ---------- Market pulse strip ---------- */ .pulse { border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); } .pulse[hidden] { display: none; } .pulse__head { display: flex; align-items: baseline; gap: 12px; width: 100%; font: inherit; text-align: left; color: inherit; cursor: pointer; background: none; border: none; padding: 8px 22px; } .pulse__head:hover .pulse__headline { color: var(--ink); } .pulse__label { flex: none; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--jelly-cobalt); } .pulse__headline { flex: 1; min-width: 0; font-family: var(--serif); font-size: 14px; font-style: italic; color: var(--slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s ease; } .pulse__date { flex: none; font-size: 10.5px; color: var(--muted); } .pulse__caret { flex: none; align-self: center; color: var(--muted); transition: transform .2s var(--ease-out); } .pulse__head[aria-expanded="true"] .pulse__caret { transform: rotate(180deg); } .pulse__body { max-width: 760px; padding: 4px 22px 16px; font-size: 14px; animation: msg-in .25s var(--ease-out) both; } .pulse__body[hidden] { display: none; } @media (max-width: 880px) { .pulse__head { padding: 7px 16px; } .pulse__body { padding: 2px 16px 14px; } .pulse__headline { white-space: normal; } } /* ---------- Journey (checklist stages) ---------- */ .stage { margin-bottom: 13px; } .stage:last-child { margin-bottom: 2px; } .stage__name { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; color: var(--slate); } .dots { display: flex; flex-wrap: wrap; gap: 5px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: transparent; border: 1.5px solid var(--hairline); transition: background .3s ease, border-color .3s ease, transform .3s var(--ease-out); } .dot--done { background: var(--jelly-teal); border-color: var(--jelly-teal); } .dot:hover { transform: scale(1.3); } /* ---------- Empty & intro states ---------- */ .empty { color: var(--muted); font-style: italic; line-height: 1.55; margin: 0; } .intro { max-width: 640px; margin-top: clamp(8px, 6vh, 56px); animation: msg-in .5s var(--ease-out) both; } .intro h1 { font-size: clamp(27px, 4.2vw, 36px); font-weight: 600; line-height: 1.16; letter-spacing: -.02em; margin: 0 0 10px; } .intro p { color: var(--slate); font-size: 15.5px; line-height: 1.6; margin: 0; max-width: 56ch; } .starters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .starter { text-align: left; cursor: pointer; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--ink); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 12px; padding: 11px 14px; max-width: 290px; box-shadow: var(--shadow); transition: border-color .15s ease, transform .15s var(--ease-out), box-shadow .15s ease; } .starter:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lift); } .starter:active { transform: none; } /* ---------- Responsive ---------- */ @media (max-width: 880px) { .layout { grid-template-columns: 1fr; } .chat { border-right: none; } .sidebar { order: 2; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--hairline); padding: 14px 16px; gap: 12px; } .card { min-width: 250px; max-width: 300px; } .sidebar__foot { display: none; } .topbar { padding: 11px 16px; } .topbar__tag { display: none; } .composer .btn--send { margin-bottom: 0; align-self: stretch; } .composer { align-items: stretch; } .composer__hint { display: none; } .messages { padding: 20px 16px 12px; } .composer { padding: 12px 16px 14px; } } /* ---------- Login ---------- */ /* Full-viewport gate on the same fog ground as the app — the grain layer (z-index 999, pointer-events none) still sits on top, so the overlay inherits the paper texture for free. */ body.login-open { overflow: hidden; } .login { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: radial-gradient(1200px 620px at 82% -12%, color-mix(in srgb, var(--jelly-cobalt) 11%, transparent), transparent 70%), radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--jelly-teal) 8%, transparent), transparent 70%), var(--paper); } .login[hidden] { display: none; } .login__card { width: min(404px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 42px 38px 30px; animation: msg-in .5s var(--ease-out) both; } .login__mark { display: block; margin-bottom: 20px; } .login__title { font-size: 29px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 9px; } .login__sub { color: var(--slate); font-size: 14.5px; line-height: 1.55; max-width: 34ch; margin: 0 0 26px; } /* Off-screen username field — exists only so password managers can pair the saved passphrase with an account; never shown or focusable. */ .login__username { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .login__input { width: 100%; font: inherit; line-height: 1.5; text-align: center; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 12px 15px; transition: border-color .15s ease, box-shadow .15s ease; } .login__input::placeholder { color: var(--muted); letter-spacing: .02em; } .login__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .login__submit { width: 100%; justify-content: center; margin-top: 12px; } /* Error keeps its line reserved (visibility, not display) so the card never reflows or jumps when the message appears. */ .login__error { display: block; margin: 16px 0 0; min-height: 1.45em; font-size: 13px; line-height: 1.45; font-weight: 500; color: var(--danger); } .login__error[hidden] { visibility: hidden; } .login__error--in { animation: login-error-in .4s var(--ease-out) both; } @keyframes login-error-in { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: 1; transform: translateX(-5px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { opacity: 1; transform: translateX(0); } } /* ============================================================ Affordability Report — report.html Print-optimised one-pager; shares the design-system tokens. ============================================================ */ /* Gate (rate-entry screen) */ .report-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .report-gate__card { width: min(460px, 100%); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 38px 36px 32px; display: flex; flex-direction: column; gap: 18px; animation: msg-in .45s var(--ease-out) both; } .report-gate__brand { margin-bottom: 4px; } .report-gate__title { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin: 0; } .report-gate__sub { color: var(--slate); font-size: 14px; line-height: 1.55; margin: 0; } .report-gate__form { display: flex; flex-direction: column; gap: 12px; } .report-gate__label { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); margin-bottom: 5px; } .report-gate__input { width: 100%; font: inherit; font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 11px 14px; text-align: center; transition: border-color .15s ease, box-shadow .15s ease; } .report-gate__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .report-gate__input::placeholder { color: var(--muted); } .report-gate__row { display: flex; flex-direction: column; } .report-gate__select { font: inherit; font-family: var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; transition: border-color .15s ease; } .report-gate__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .report-gate__submit { justify-content: center; margin-top: 4px; } .report-gate__error { font-size: 13px; color: var(--danger); line-height: 1.45; margin: 0; } /* Report page layout */ .report-page { max-width: 960px; margin: 0 auto; padding: 0 0 60px; } /* Screen-only topbar */ .report-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 28px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(7px); position: sticky; top: 0; z-index: 10; } .report-topbar__actions { display: flex; align-items: center; gap: 10px; } /* Print-only header */ .report-print-header { display: none; align-items: center; gap: 14px; padding: 0 0 12px; border-bottom: 2px solid #1b2430; margin-bottom: 20px; } .report-print-header__name { font-family: var(--serif); font-size: 15px; font-weight: 600; flex: 1; } .report-print-header__date { font-family: var(--mono); font-size: 11px; color: var(--muted); } /* Hero */ .report-body { padding: 32px 28px 0; } .report-hero { padding-bottom: 24px; border-bottom: 1px solid var(--hairline); margin-bottom: 24px; } .report-hero__addr { font-size: clamp(22px, 3.2vw, 30px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.2; } .report-hero__meta { color: var(--muted); font-size: 13px; margin-bottom: 10px; } .report-hero__price { font-family: var(--mono); font-size: clamp(28px, 4vw, 40px); font-weight: 500; color: var(--jelly-teal); letter-spacing: -.02em; } /* Two-column grid */ .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .report-col { display: flex; flex-direction: column; gap: 20px; } /* Cards */ .report-card { background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px 16px; break-inside: avoid; } .report-card__title { font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--slate); margin: 0 0 14px; } /* Definition list */ .report-dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 16px; margin: 0; font-size: 13.5px; } .report-dl dt { color: var(--muted); } .report-dl dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; } /* Tables */ .report-table { width: 100%; border-collapse: collapse; font-size: 13px; } .report-table th, .report-table td { border: 1px solid var(--hairline-soft); padding: 6px 10px; text-align: left; vertical-align: top; } .report-table th { background: var(--paper-3); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--slate); } .report-table td:last-child { font-family: var(--mono); font-size: 12.5px; text-align: right; white-space: nowrap; } .report-table__total td { font-weight: 600; background: color-mix(in srgb, var(--jelly-teal) 7%, var(--paper-2)); border-top: 1px solid var(--hairline); } .report-table__total td:last-child { color: var(--jelly-teal); } .report-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--paper-3) 45%, transparent); } .report-table__total td { /* override even-row tinting */ background: color-mix(in srgb, var(--jelly-teal) 7%, var(--paper-2)) !important; } /* Notes */ .report-note { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; } .report-note--warn { color: var(--danger); font-style: italic; } /* Disclaimer footer */ .report-disclaimer { margin-top: 28px; padding: 16px 20px; background: color-mix(in srgb, var(--jelly-ochre) 6%, var(--paper-2)); border: 1px solid color-mix(in srgb, var(--jelly-ochre) 35%, var(--hairline)); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.6; color: var(--slate); break-inside: avoid; } .report-disclaimer strong { color: var(--ink); } /* Report link in sidebar listing rows */ .listing__report { font-size: 11px; font-weight: 500; color: var(--jelly-cobalt); text-decoration: none; white-space: nowrap; padding: 1px 0; border-bottom: 1px solid color-mix(in srgb, var(--jelly-cobalt) 35%, transparent); transition: border-color .12s ease, color .12s ease; } .listing__report:hover { color: var(--ink); border-bottom-color: var(--ink); } /* Responsive: single column on narrow screens */ @media (max-width: 700px) { .report-grid { grid-template-columns: 1fr; } .report-topbar { padding: 11px 16px; } .report-body { padding: 20px 16px 0; } .report-gate__card { padding: 28px 20px 24px; } } /* ---- @media print ---- */ @media print { /* Utility classes */ .noprint { display: none !important; } .printonly { display: flex !important; } body { background: white !important; color: #1b2430 !important; font-size: 11pt; } body::before { display: none; } /* no grain on paper */ .report-gate { display: none !important; } .report-page { max-width: 100%; padding: 0; } .report-topbar { display: none !important; } .report-print-header { display: flex; padding-top: 0; } .report-body { padding: 0; } .report-hero { padding-bottom: 14pt; margin-bottom: 14pt; } .report-hero__addr { font-size: 18pt; } .report-hero__price { font-size: 22pt; } .report-grid { gap: 12pt; } .report-card { background: white !important; border: 0.5pt solid #d9d3c7 !important; padding: 10pt 12pt; break-inside: avoid; page-break-inside: avoid; } .report-table th { background: #f4f1ea !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .report-table__total td { background: #e8f5f4 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .report-disclaimer { background: #fdf6ec !important; border-color: #d98a2b !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; margin-top: 14pt; } a[href]::after { content: none; } /* suppress browser link URL appending */ } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .messages { scroll-behavior: auto; } }