/* =============================================================================
   Keystone — visual target: keystone_final_design.html
   Two themes via :root[data-theme]. Dark is the default (set server-side from
   the "theme" cookie, so there is no flash of the wrong theme on first paint).
   Presentation layer only — no behaviour, data or security control depends on
   anything in here.
   ========================================================================== */

:root[data-theme="dark"]{
  --bg:#0D2623; --grad:radial-gradient(ellipse at 82% -12%,rgba(43,163,143,.12),transparent 52%);
  --surface:#143734; --surface-2:#102E2B; --line:#234D47;
  --ink:#EAF3F0; --body:#9FB6B1; --faint:#6F8A85;
  --teal:#2BA38F; --teal-d:#26917F; --teal-soft:rgba(43,163,143,.14);
  --orange:#E86A47; --orange-d:#D2562F; --orange-on:#fff; --orange-soft:rgba(232,106,71,.15);
  --hero-a:#0F4C42; --hero-b:#15665A; --hero-card:#143734; --hero-card-line:#234D47;
  --buy:#46C79E; --invest:#E3C04A; --negotiate:#EC9358; --reject:#EA6B73;
  /* muted disc fills — light-only; transparent in dark so the ring stays plain */
  --buy-m:transparent; --invest-m:transparent; --negotiate-m:transparent; --reject-m:transparent;
  --ring-track:#1E423D;
  --shadow:0 22px 46px -28px rgba(0,0,0,.6); --mark-on:#06201C;
  --field-bg:#102E2B; --field-line:#234D47;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F3EFE7; --grad:none;
  --surface:#FFFFFF; --surface-2:#FAF7F1; --line:#E8E2D6;
  --ink:#15302C; --body:#5B6B67; --faint:#909B97;
  --teal:#115E54; --teal-d:#0E4B43; --teal-soft:#E5EFEC;
  --orange:#E2613C; --orange-d:#C84E2C; --orange-on:#fff; --orange-soft:#FBEAE2;
  --hero-a:#0C463E; --hero-b:#115E54; --hero-card:#FFFFFF; --hero-card-line:#FFFFFF;
  --buy:#1F8F6E; --invest:#9A6F10; --negotiate:#A9531F; --reject:#A33F3C;
  --buy-m:#CDE9DF; --invest-m:#EEDFB4; --negotiate-m:#F6D9C2; --reject-m:#F3CECB;
  --ring-track:transparent;                       /* hidden in light — tinted disc shows instead */
  --shadow:0 18px 40px -28px rgba(17,94,84,.35); --mark-on:#fff;
  --field-bg:#FFFFFF; --field-line:#E8E2D6;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; background-image:var(--grad);
  min-height:100vh; display:flex; flex-direction:column;
  transition:background-color .4s ease,color .4s ease;
}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
svg{display:block}

/* The mockup is a single typeface — neutralise the legacy .mono class so every
   page matches the target exactly (no monospace). */
.mono{font-family:inherit}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:28px}

/* --- Accessibility helpers --------------------------------------------- */
.visually-hidden,.skip-link{position:absolute}
.visually-hidden{
  width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  left:12px;top:-48px;z-index:100;background:var(--surface);border:1px solid var(--line);
  color:var(--ink);padding:10px 16px;border-radius:11px;transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* Visible focus on every interactive element (quality floor). */
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--orange);outline-offset:2px;
}

/* =============================================================================
   Top bar
   ========================================================================== */
header{
  background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:6;border-bottom:1px solid var(--line);
  transition:background-color .4s,border-color .4s;
}
.bar{display:flex;align-items:center;gap:30px;height:74px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.mark{width:34px;height:34px;border-radius:11px;background:var(--teal);display:grid;place-items:center;color:var(--mark-on);flex:none}
nav{display:flex;gap:28px;margin-left:6px}
nav a{font-size:14.5px;color:var(--body);font-weight:500;transition:color .15s}
nav a.is-active{color:var(--ink);font-weight:700}
nav a:hover{color:var(--ink)}
.sp{flex:1}

.icon-btn{
  width:42px;height:42px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  color:var(--body);display:grid;place-items:center;cursor:pointer;flex:none;
  transition:color .15s,border-color .15s,background-color .4s;
}
.icon-btn:hover{color:var(--ink);border-color:var(--teal)}

.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--teal-soft);color:var(--teal);
  display:grid;place-items:center;font-weight:700;font-size:13px;border:1px solid var(--line);flex:none;
}
.logout{display:inline-flex}
.logout__btn{margin:0}

/* Mobile nav toggle (hidden on desktop). */
.nav-toggle{display:none}

/* =============================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;
  border-radius:11px;border:1px solid transparent;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;
  background:var(--orange);color:var(--orange-on);
  transition:background .15s,transform .12s,box-shadow .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--orange-d);transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--orange)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--orange);color:var(--orange-on)}
.btn--primary:hover{background:var(--orange-d)}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--body)}
.btn--ghost:hover{background:transparent;color:var(--ink);border-color:var(--teal);box-shadow:none;transform:translateY(-1px)}
.btn--block{width:100%}
.btn--sm{height:38px;padding:0 16px;font-size:13px}

/* =============================================================================
   Hero
   ========================================================================== */
.hero{
  margin:34px 0 0;background:linear-gradient(135deg,var(--hero-a),var(--hero-b));border-radius:24px;
  padding:48px 46px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow);
}
.hero--compact{padding:64px 46px}
.orb{position:absolute;border-radius:50%;pointer-events:none}
.orb.a{right:-60px;top:-60px;width:300px;height:300px;background:rgba(255,255,255,.05);animation:float 9s ease-in-out infinite}
.orb.b{right:90px;bottom:-100px;width:220px;height:220px;background:rgba(232,106,71,.2);animation:float 11s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

.hero .eyebrow{font-size:13px;font-weight:600;color:#9FD3C8;letter-spacing:.04em;position:relative;z-index:1;display:flex;align-items:center;gap:10px}
.hero .eyebrow .ln{width:26px;height:1px;background:#9FD3C8;opacity:.6}
.hero h1,.hero__title{font-size:40px;line-height:1.08;font-weight:800;letter-spacing:-.03em;margin:10px 0 16px;max-width:600px;position:relative;z-index:1;color:#fff}
.grad-word{color:#fff}
.hero__lede{position:relative;z-index:1;color:#C7E4DC;font-size:15.5px;max-width:540px;margin-bottom:24px}

/* Analyser bar */
.analyser{
  position:relative;z-index:1;background:var(--hero-card);border:1px solid var(--hero-card-line);
  border-radius:14px;padding:8px;display:flex;gap:8px;max-width:700px;flex-wrap:wrap;
  box-shadow:0 12px 30px -18px rgba(0,0,0,.4);
}
.analyser__field,.url{flex:1;min-width:230px;display:flex;align-items:center;gap:10px;padding:0 14px;height:50px}
.analyser__pin,.url svg{color:var(--teal);flex:none}
.analyser__input,.url input{flex:1;min-width:0;border:none;outline:none;background:none;font-family:inherit;font-size:14.5px;color:var(--ink)}
.analyser__input::placeholder,.url input::placeholder{color:var(--faint)}
.analyser .btn{height:50px}
.analyser__hint,.hint{position:relative;z-index:1;margin-top:14px;font-size:13.5px;color:#A8D2C8}
.analyser__hint a,.hint a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4)}
.hero__actions{position:relative;z-index:1;margin-top:4px}

/* =============================================================================
   Stat cards
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;
  display:flex;align-items:center;gap:16px;
  transition:transform .15s,box-shadow .15s,background-color .4s,border-color .4s;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.si{width:50px;height:50px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--teal-soft);color:var(--teal)}
.si.o{background:var(--orange-soft);color:var(--orange)}
.stat .v,.stat__value{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1}
.stat .k,.stat__label{font-size:13px;color:var(--body);margin-top:4px;letter-spacing:0;text-transform:none}

/* =============================================================================
   Section header + recent-analysis cards
   ========================================================================== */
.sec,.recent__head{display:flex;align-items:center;justify-content:space-between;margin:44px 0 18px}
.sec h2,.section-title{font-size:21px;font-weight:800;letter-spacing:-.01em}
.section-title--lg{font-size:30px;letter-spacing:-.02em}
/* Standalone page titles (forms/settings) need a little breathing room below;
   the list/dashboard ones sit in a flex header (.recent__head) and are untouched. */
.form-page > .section-title--lg{margin-bottom:8px}
.sec a,.link-quiet{font-size:14px;color:var(--orange);font-weight:700;display:inline-flex;align-items:center;gap:5px}
.sec a:hover,.link-quiet:hover{filter:brightness(1.06)}

.grid,.analyses{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;list-style:none}
.analysis{list-style:none}
.card,.analysis__link{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;
  display:flex;gap:20px;align-items:center;color:inherit;
  transition:transform .15s,box-shadow .15s,border-color .15s,background-color .4s;
}
.analysis__link:hover,.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--teal)}

/* --- Score ring --------------------------------------------------------- */
/* Verdict colour mapping (single source = App\Core\Verdict keys). */
.verdict--buy      { --vc:var(--buy);       --vc-m:var(--buy-m); }
.verdict--invest   { --vc:var(--invest);    --vc-m:var(--invest-m); }
.verdict--negotiate{ --vc:var(--negotiate); --vc-m:var(--negotiate-m); }
.verdict--reject   { --vc:var(--reject);    --vc-m:var(--reject-m); }

.ring,.analysis__ring,.result__ring{position:relative;display:grid;place-items:center;flex:none}
.ring{width:76px;height:76px}
.ring svg,.analysis__ring svg,.result__ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring .disc,.result__ring .disc{fill:var(--vc-m)}        /* dark: transparent; light: tinted disc */
.ring .center,.result__ring .center{fill:transparent}     /* dark: shows card; light: white centre */
:root[data-theme="light"] .ring .center,
:root[data-theme="light"] .result__ring .center{fill:var(--surface)}
.ring .track,.result__ring .track{stroke:var(--ring-track)}
.ring .prog,.result__ring .prog{stroke:var(--vc);transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
.ring .s,.analysis__score{font-weight:800;font-size:23px;position:relative;z-index:1;color:var(--vc)}

/* --- Card body ---------------------------------------------------------- */
.ci,.analysis__body{flex:1;min-width:0}
.ci h3,.analysis__address{font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.ci .loc,.analysis__loc{font-size:13px;color:var(--faint);margin-top:2px}
.ci .row,.analysis__metrics{display:flex;gap:24px;margin-top:12px}
.ci .row span{font-size:12px;color:var(--body)}
.ci .row b{display:block;font-size:16px;color:var(--ink);font-weight:700;margin-top:1px}
.metric dt{font-size:12px;color:var(--body)}
.metric dd{font-size:16px;color:var(--ink);font-weight:700;margin-top:1px}

/* --- Verdict pill (colour + text label always together) ----------------- */
.pill{
  display:inline-block;font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;margin-top:13px;
  border:1px solid color-mix(in srgb,var(--vc) 32%,transparent);
  background:color-mix(in srgb,var(--vc) 12%,transparent);color:var(--vc);white-space:nowrap;
}
.pill--lg{font-size:13.5px;padding:7px 16px}

/* --- Spotlight card (dashboard "Recent analyses" preview) --------------- */
.spotlight{align-items:center;gap:20px}
.spotlight__ring{position:relative;flex:none;display:grid;place-items:center}
/* Soft verdict-coloured glow behind the ring (static; no motion to gate). */
.spotlight__glow{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle, color-mix(in srgb,var(--vc) 22%,transparent), transparent 60%);
  filter:blur(9px);opacity:.55;
}
.spotlight__ring .ring{position:relative;z-index:1}
.spotlight__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.spotlight__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.spotlight__addr{font-size:16.5px;font-weight:700;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotlight__top .pill{margin-top:0;flex:none}
.spotlight__metrics{display:flex;gap:28px;margin-top:4px}
.metric-cell{display:flex;flex-direction:column}
.metric-cell__k{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:700}
.metric-cell__v{font-size:18px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:2px}

/* --- Properties list: toolbar, compact bars, pagination ---------------- */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:26px 0 18px}
.toolbar__search{flex:1;min-width:220px;display:flex;align-items:center;position:relative}
.toolbar__search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
/* Higher-specificity selector so the icon-clearing left pad always wins over the
   .field__input `padding` shorthand regardless of stylesheet order. */
.toolbar__search .toolbar__input{width:100%;padding-left:44px}
.toolbar__sort{flex:none;min-width:200px}

.list-meta{color:var(--faint);font-size:12.5px;margin:0 0 12px}

/* Compact properties-list rows. Class family is scoped with the "plist" prefix
   so it never collides with the header's global .bar (<div class="wrap bar">). */
.plist{list-style:none;display:flex;flex-direction:column;gap:8px}
.plist-row{
  display:flex;align-items:center;gap:14px;padding:12px 16px;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  transition:transform .12s,border-color .15s,box-shadow .15s,background-color .4s;
}
.plist-row:hover{transform:translateY(-1px);border-color:var(--teal);box-shadow:var(--shadow)}
.plist-row__badge{
  flex:none;width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  font-weight:800;font-size:16px;color:var(--vc);
  background:color-mix(in srgb,var(--vc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--vc) 28%,transparent);
}
:root[data-theme="light"] .plist-row__badge{background:var(--vc-m)}
.plist-row__main{flex:1;min-width:0;display:flex;flex-direction:column}
.plist-row__addr{font-size:15px;font-weight:700;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist-row__loc{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plist-row__metrics{display:flex;align-items:center;gap:20px;flex:none}
.plist-row__metric{display:flex;flex-direction:column;text-align:right}
.plist-row__k{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:700}
.plist-row__v{font-size:14.5px;font-weight:800;color:var(--ink);margin-top:1px}
.plist-row .pill{margin-top:0}
.plist-row__chev{flex:none;color:var(--faint)}

/* Compare-picker selectable variant: the row is a <label> with a checkbox. */
.plist-row--select{cursor:pointer}
.plist-row__cb{flex:none;width:20px;height:20px;accent-color:var(--teal);cursor:pointer}
/* Highlight a selected row (progressive — degrades to the checkbox itself). */
.plist-row--select:has(.plist-row__cb:checked){border-color:var(--teal);background:var(--teal-soft)}

.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:18px 0 0}
.pager__link{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;
  border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--body);
  font-size:14px;font-weight:700;transition:color .15s,border-color .15s,background-color .4s;
}
.pager__link:hover{color:var(--ink);border-color:var(--teal)}
.pager__link.is-current{background:var(--teal-soft);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 35%,transparent)}
.pager__link.is-disabled{opacity:.45;pointer-events:none}
.pager__gap{color:var(--faint);padding:0 4px}

@media(max-width:620px){
  .plist-row__metric{display:none}   /* keep rows to one line on small screens (badge + address + pill) */
}

/* =============================================================================
   Notices (error / empty / status)
   ========================================================================== */
.notice{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px 24px;color:var(--body);margin-bottom:16px}
.notice--error{border-color:color-mix(in srgb,var(--reject) 45%,var(--line))}
.notice__title{color:var(--ink);font-size:16px;font-weight:700;margin-bottom:8px}
.notice code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--teal);
  background:var(--teal-soft);padding:2px 6px;border-radius:5px;
}

/* =============================================================================
   Forms
   ========================================================================== */
.form-page{margin-top:34px;margin-bottom:64px}
.list-page{margin-top:34px;margin-bottom:64px}
/* Dashboard wrapper: matches the other content pages' bottom margin so the
   footer divider clears the recent-analyses grid (it has no bottom margin). */
.home{margin-bottom:64px}
.form-note{color:var(--faint);font-size:13px;line-height:1.6;max-width:72ch;margin:12px 0 26px}
.form{margin-top:8px}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.04em;color:var(--teal);font-weight:600;margin-bottom:10px}
.eyebrow .ln{width:26px;height:1px;background:var(--teal);opacity:.6}

.field{margin-bottom:18px}
.field__label{display:block;font-size:13px;color:var(--body);font-weight:600;margin-bottom:7px}
.field__input{
  width:100%;background:var(--field-bg);border:1px solid var(--field-line);border-radius:11px;
  color:var(--ink);font:inherit;font-size:15px;padding:11px 13px;outline:none;
  transition:border-color .15s,box-shadow .15s,background-color .4s;
}
.field__input:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.field__hint{color:var(--faint);font-size:12px;margin-top:6px}
.field__error{color:var(--reject);font-size:12.5px;margin-top:6px}
.field--error .field__input{border-color:var(--reject)}

.field__group{display:flex;align-items:stretch}
.field__prefix{
  display:inline-grid;place-items:center;padding:0 13px;background:var(--surface-2);
  border:1px solid var(--field-line);border-right:0;border-radius:11px 0 0 11px;color:var(--faint);font-weight:600;
}
.field__group .field__input{border-radius:0 11px 11px 0}
.field__suffix{border-right:1px solid var(--field-line);border-left:0;border-radius:0 11px 11px 0}

.form__group{border:0;margin:0 0 22px;padding:0}
.form__legend{
  font-size:12px;letter-spacing:.04em;color:var(--faint);font-weight:700;text-transform:uppercase;
  margin-bottom:14px;padding-top:18px;border-top:1px solid var(--line);width:100%;
}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__row--3{grid-template-columns:1fr 1fr 1fr}
.form__actions{display:flex;gap:12px;align-items:center;margin-top:8px}
.form__assist{margin:0 0 16px;color:var(--faint);font-size:13px}

/* select reuses .field__input */
select.field__input{appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 18px) center,calc(100% - 13px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}

/* =============================================================================
   Auth (login)
   ========================================================================== */
.auth{display:grid;place-items:center;padding:64px 28px;min-height:70vh;flex:1}
.auth__card{width:100%;max-width:410px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:34px 30px;box-shadow:var(--shadow)}
.auth__brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:22px;font-weight:800;font-size:19px}
.auth__title{font-size:26px;margin-bottom:4px}
.auth__lede{color:var(--faint);font-size:12px;letter-spacing:.06em;margin:2px 0 22px;font-weight:600}

/* =============================================================================
   Result page
   ========================================================================== */
.result{margin:34px auto 72px}
.result__head{display:flex;gap:30px;align-items:center;margin:18px 0 30px}
.result__ring{width:128px;height:128px}
.result__score{position:relative;z-index:1;text-align:center;line-height:1}
.result__num{font-size:38px;font-weight:800;color:var(--vc)}
.result__den{display:block;font-size:11px;color:var(--faint);margin-top:3px}
.result__title{font-size:28px;margin:8px 0 4px}
.result__pcline{color:var(--faint);font-size:13px;letter-spacing:.02em;margin-bottom:12px}

/* Standalone content-section headings (result + portfolio pages) carry their
   own vertical rhythm — they're direct children of .result, so this does NOT
   touch the headings nested inside .cashflow__head panels. */
.result > .section-title{margin:34px 0 14px}

.result__headline{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 16px}
.headline{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.headline__k{font-size:12px;color:var(--faint);font-weight:600}
.headline__v{font-size:24px;font-weight:800;margin-top:6px;letter-spacing:-.02em}
.result__beforecosts{color:var(--faint);font-size:13px;line-height:1.6;margin:0 0 28px;max-width:78ch}

.factors{display:flex;flex-direction:column;gap:16px;margin:18px 0 28px}
.factor__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.factor__label{font-size:14px;color:var(--body)}
.factor__pts{font-size:13px;color:var(--ink);font-weight:700}
.factor__bar{height:8px;background:color-mix(in srgb,var(--ink) 8%,transparent);border-radius:999px;overflow:hidden}
.factor__fill{display:block;height:100%;width:0;border-radius:999px;background:var(--teal);transition:width 1s cubic-bezier(.22,1,.36,1)}

.result__engine{color:var(--faint);font-size:12px;letter-spacing:.02em;margin:6px 0 28px}
.result__placeholder{background:var(--surface);border:1px dashed var(--line);border-radius:16px;padding:22px 24px;color:var(--body)}

/* Comparable-sales table */
.comps{overflow-x:auto;margin:4px 0 24px}
.comps__table{width:100%;border-collapse:collapse;font-size:14px}
.comps__table th,.comps__table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line)}
.comps__table thead th{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);font-weight:700}
.comps__num{font-weight:700;white-space:nowrap}
.comps__date{color:var(--body);white-space:nowrap}
.comps__pc{color:var(--faint);font-size:12px}

/* =============================================================================
   Cashflow section — visually distinct (display only, never affects score)
   ========================================================================== */
.cashflow{
  margin-top:40px;padding:26px 24px 28px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:18px;
}
.cashflow__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cashflow__tag{
  font-size:11px;letter-spacing:.04em;font-weight:700;color:var(--orange);
  border:1px solid color-mix(in srgb,var(--orange) 40%,transparent);background:var(--orange-soft);
  padding:4px 9px;border-radius:8px;
}
.cashflow__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 26px}
.cashflow__card{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.cashflow__h{font-size:11px;letter-spacing:.04em;color:var(--faint);font-weight:700;text-transform:uppercase;margin-bottom:8px}
.cashflow__h--wide{margin-top:24px}
.cashflow__calc{font-size:18px}
.cashflow__calc strong{font-size:20px}
.cashflow__sub{color:var(--faint);font-size:12px;margin-top:6px;line-height:1.5}
.cashflow__table{max-width:520px}
.cashflow__total td{border-top:2px solid var(--line);border-bottom:0;padding-top:12px}
.cashflow__whatif{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.cashflow__sdlt{width:120px}

/* =============================================================================
   Compare page (side-by-side columns) + picker
   ========================================================================== */
.compare-page{margin-top:34px;margin-bottom:64px}
.recent__actions{display:inline-flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Columns. Identical row order per column keeps each metric aligned across the
   set on desktop; collapses to stacked, self-labelled cards on mobile. */
.compare{display:grid;gap:18px;align-items:start;margin-top:8px}
.compare--2{grid-template-columns:repeat(2,1fr)}
.compare--3{grid-template-columns:repeat(3,1fr)}
.compare__col{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;
  display:flex;flex-direction:column;transition:background-color .4s,border-color .4s;
}
.compare__head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:188px}
.compare__addr{font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.compare__tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.compare__rows{display:flex;flex-direction:column;margin-top:6px;border-top:1px solid var(--line)}
.compare__row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--line);min-height:42px}
.compare__row dt{font-size:13px;color:var(--body)}
.compare__row dd{font-size:14px;font-weight:700;color:var(--ink);text-align:right;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.compare__row--head dt{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:700}

/* "Best of set" marker — subtle, always paired with its text label. */
.compare__best{
  display:inline-block;font-size:11px;font-weight:700;color:var(--teal);
  background:var(--teal-soft);border:1px solid color-mix(in srgb,var(--teal) 30%,transparent);
  padding:2px 8px;border-radius:999px;white-space:nowrap;
}

@media(max-width:880px){
  .compare--2,.compare--3{grid-template-columns:1fr}
  .compare__head{min-height:0}
}

/* =============================================================================
   Settings sub-nav
   ========================================================================== */
.subnav{display:flex;gap:8px;margin:0 0 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.subnav__link{padding:10px 14px;color:var(--body);font-size:14px;font-weight:600;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav__link:hover{color:var(--ink)}
.subnav__link.is-active{color:var(--ink);border-bottom-color:var(--orange)}

/* --- Bookmarklet install page --- */
.bm{margin:8px 0 22px}
.bm__step{color:var(--body);font-size:13px;margin:6px 0}
.bm__list{margin:18px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.bm__btn{
  display:inline-block;background:var(--teal);color:var(--mark-on);font-weight:700;font-size:15px;
  padding:11px 20px;border-radius:11px;cursor:grab;user-select:none;
}
:root[data-theme="light"] .bm__btn{color:#fff}
.bm__btn:active{cursor:grabbing}

/* =============================================================================
   Footer
   ========================================================================== */
footer,.footer{margin-top:auto;text-align:center;color:var(--faint);font-size:13px;padding:46px 0 60px;border-top:1px solid var(--line)}
.footer__inner{display:flex;flex-direction:column;gap:4px;align-items:center}
.footer__note{color:var(--faint);font-size:12.5px}

/* =============================================================================
   Load animation
   ========================================================================== */
.rise{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.22,1,.36,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s}

/* =============================================================================
   Responsive
   ========================================================================== */
@media(max-width:880px){
  .hero{padding:36px 26px}
  .hero h1,.hero__title{font-size:30px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .grid,.analyses{grid-template-columns:1fr}
  .result__headline{grid-template-columns:repeat(2,1fr)}
  .cashflow__grid{grid-template-columns:1fr}
  .form__row,.form__row--3{grid-template-columns:1fr}
  .result__head{flex-direction:column;align-items:flex-start}

  nav{
    position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:2px;margin-left:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:12px 28px 18px;display:none;z-index:6;
  }
  nav.is-open{display:flex}
  nav a{padding:10px 4px}
  .nav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;margin-left:auto;
    width:42px;height:42px;background:var(--surface);border:1px solid var(--line);border-radius:11px;cursor:pointer;
  }
  .nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);margin-inline:auto}
  .sp{display:none}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .avatar,.logout{display:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
}