/* PropertyLane. Implements DESIGN.md - dark architecture under cool glass.
   Glass carries enough tint for contrast over the photographic ground, and
   one sheet per section rather than one panel per row: a list is a single
   compositing layer, which is what keeps it smooth on a phone. */

:root {
  --bg:        oklch(0.970 0.006  75);
  --page-bg:   radial-gradient(120% 90% at 15% -10%, oklch(0.985 0.014 85) 0%, transparent 55%),
               radial-gradient(100% 80% at 100% 0%, oklch(0.955 0.020 200) 0%, transparent 60%),
               var(--bg);
  --surface:   oklch(0.995 0.004  75);
  --text:      oklch(0.250 0.012  60);
  --text-mute: oklch(0.500 0.010  60);
  --border:    oklch(0.880 0.008  70);
  --accent:    oklch(0.520 0.110 195);
  --accent-dim:oklch(0.520 0.110 195 / 0.10);

  --state-pass:       oklch(0.480 0.070 150);
  --state-fail:       oklch(0.500 0.100  30);
  --state-no-reserve: var(--accent);
  --state-review:     oklch(0.480 0.080  85);

  --glass-tint: 55%;
  --glass-blur: 32px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --metal: oklch(0.700 0.110 85);
  --shadow: 0 1px 2px oklch(0.250 0.012 60 / 0.05), 0 14px 34px oklch(0.250 0.012 60 / 0.07);
  /* Report chart identities, validated against this mode's surface
     (dataviz six checks, 2026-08-02). Gold carries the bid; teal carries
     the market. Status colors stay reserved for verdicts. */
  --chart-1: #9b7300;
  --chart-2: #0080a5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        oklch(0.115 0.010 155);
    --page-bg:   linear-gradient(oklch(0.080 0.012 155 / 0.10), oklch(0.055 0.008 155 / 0.26)),
                 var(--page-photo);
    --surface:   oklch(0.205 0.014 155);
    --text:      oklch(0.950 0.007 95);
    --text-mute: oklch(0.725 0.012 115);
    --border:    oklch(0.470 0.025 150);
    --accent:    oklch(0.750 0.120 155);
    --accent-dim:oklch(0.750 0.120 155 / 0.13);
    --state-pass:   oklch(0.790 0.090 145);
    --state-fail:   oklch(0.740 0.100  30);
    --state-review: oklch(0.800 0.090  85);
    --glass-tint: 18%;
    --glass-blur: 20px;
    --metal: oklch(0.820 0.085 90);
    --chart-1: #a88822;
    --chart-2: #0092a8;
    --shadow: 0 1px 1px oklch(0.040 0.006 155 / 0.40),
              0 18px 42px oklch(0.040 0.006 155 / 0.44);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        oklch(0.115 0.010 155);
  --page-bg:   linear-gradient(oklch(0.080 0.012 155 / 0.10), oklch(0.055 0.008 155 / 0.26)),
               var(--page-photo);
  --surface:   oklch(0.205 0.014 155);
  --text:      oklch(0.950 0.007 95);
  --text-mute: oklch(0.725 0.012 115);
  --border:    oklch(0.470 0.025 150);
  --accent:    oklch(0.750 0.120 155);
  --accent-dim:oklch(0.750 0.120 155 / 0.13);
  --state-pass:   oklch(0.790 0.090 145);
  --state-fail:   oklch(0.740 0.100  30);
  --state-review: oklch(0.800 0.090  85);
  --glass-tint: 18%;
  --glass-blur: 20px;
  --metal: oklch(0.820 0.085 90);
  --chart-1: #a88822;
  --chart-2: #0092a8;
  --shadow: 0 1px 1px oklch(0.040 0.006 155 / 0.40),
            0 18px 42px oklch(0.040 0.006 155 / 0.44);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:        oklch(0.970 0.006  75);
  --page-bg:   linear-gradient(oklch(0.970 0.006 75 / 0.82), oklch(0.945 0.010 85 / 0.88)),
               var(--page-photo);
  --surface:   oklch(0.995 0.004  75);
  --text:      oklch(0.250 0.012  60);
  --text-mute: oklch(0.500 0.010  60);
  --border:    oklch(0.880 0.008  70);
  --accent:    oklch(0.520 0.110 195);
  --accent-dim:oklch(0.520 0.110 195 / 0.10);
  --state-pass:   oklch(0.480 0.070 150);
  --state-fail:   oklch(0.500 0.100  30);
  --state-review: oklch(0.480 0.080  85);
  --glass-tint: 55%;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background-color: var(--bg);
  background-image: var(--page-bg);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text); font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Measured by app.js, because both bars are fixed and both grow with the OS
     text size. The literals are the fallback for a first paint and for no-JS. */
  padding-bottom: calc(var(--nav-h, 4.6rem) + 0.9rem);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }

/* Announced, not shown. */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- glass ------------------------------------------------------------- */
.panel {
  background: color-mix(in oklch, var(--surface) var(--glass-tint), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  border: 1px solid color-mix(in oklch, var(--border) 58%, transparent);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
@media (prefers-reduced-transparency: reduce) {
  .panel, .bar { background: var(--surface); backdrop-filter: none;
                 -webkit-backdrop-filter: none; }
}

/* ---- chrome ------------------------------------------------------------ */
.bar {
  position: fixed; left: 0; right: 0; z-index: 10;
  background: color-mix(in oklch, var(--surface) var(--glass-tint), transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
header.bar {
  top: 0.75rem; left: 0.75rem; right: 0.75rem;
  display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap;
  padding: 0.7rem clamp(0.9rem, 3vw, 1.6rem);
  border: 1px solid color-mix(in oklch, var(--border) 58%, transparent);
  border-radius: 10px; box-shadow: var(--shadow);
}
.wordmark { font-family: var(--serif); font-weight: 500; letter-spacing: 0.01em;
            font-size: 1.0625rem; flex: 0 0 auto;
            display: inline-flex; align-items: center; gap: 0.45rem; }
.wordmark .mark { width: 19px; height: 19px; display: block; color: var(--metal); }
/* The version telemetry that used to sit here moved to the assumptions page,
   where data freshness is read. The header keeps only the mark and the acts. */
#themer { margin-left: auto; }
.iconbtn {
  border: 1px solid color-mix(in oklch, var(--border) 75%, transparent);
  background: color-mix(in oklch, var(--surface) 42%, transparent); color: var(--text-mute);
  border-radius: 6px; padding: 0.32rem 0.55rem; font: inherit; font-size: 0.75rem;
  cursor: pointer; min-height: 32px;
}
.iconbtn:hover { color: var(--text); background: color-mix(in oklch, var(--surface) 72%, transparent); }
.iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* auto-fit, not repeat(4): at large OS text sizes four fixed columns are
   narrower than the word "Assumptions" and the bar overflowed the viewport by
   8px. Fewer, wider columns and a second row instead. */
nav.bar {
  /* Read by app.js, so the breakpoint below is the only place the two shapes
     are decided. Measuring the element instead would have the rail's 900px of
     height reserved as foot padding. */
  --nav-mode: bar;
  bottom: 0.6rem; left: 0.6rem; right: 0.6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
  padding: 0.35rem 0.3rem calc(0.35rem + env(safe-area-inset-bottom));
  border: 1px solid color-mix(in oklch, var(--border) 58%, transparent);
  border-radius: 10px; box-shadow: var(--shadow);
}
nav.bar a {
  font-size: 0.78125rem; color: var(--text-mute); padding: 0.6rem 0.2rem;
  min-height: 44px; border-radius: 10px; text-align: center; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  transition: color 180ms var(--ease), background 180ms var(--ease);
}
nav.bar a[aria-current="page"] { color: var(--accent); background: var(--accent-dim);
                                 font-weight: 550; }
nav.bar a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
nav.bar .n { font-family: var(--mono); font-variant-numeric: tabular-nums;
             font-size: 0.75rem; opacity: 0.8; }
.nav-short { display: none; }

main { padding: calc(var(--header-h, 4.5rem) + 1.75rem) clamp(0.75rem, 3vw, 1.6rem) 0;
       max-width: 1300px; margin: 0 auto; }

/* ---- the census strip ---------------------------------------------------
   Four counts across the top of the working surface, each a link to the list
   it describes. No rates and no deltas: one snapshot cannot carry a direction. */
.census-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1px; margin: 0.25rem 0 0.4rem;
  border-radius: 10px; overflow: hidden;
  background: color-mix(in oklch, var(--border) 40%, transparent);
  border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
}
.census-strip .stat {
  background: color-mix(in oklch, var(--surface) 42%, transparent);
  padding: 0.7rem 0.9rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  transition: background 180ms var(--ease);
}
.census-strip .stat:hover { background: var(--surface); }
.census-strip .stat:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.census-strip .n { font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
                   letter-spacing: 0; line-height: 1.05; }
.census-strip .l { font-size: 0.6875rem; text-transform: uppercase;
                   letter-spacing: 0.13em; color: var(--text-mute); font-weight: 540; }
/* Two by two on a phone. `auto-fit` gets three across a 390px screen and leaves
   the fourth alone beside an empty cell, which reads as a missing figure. */
@media (max-width: 560px) {
  body { background-position: 22% center; }
  .census-strip { grid-template-columns: repeat(2, 1fr); }
  /* One column per link: a lower count wraps the last items onto a second row,
     which reads as a broken bottom bar. Short labels keep nine usable at 390px. */
  nav.bar { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  nav.bar a { font-size: 0.71875rem; padding: 0.6rem 0.1rem; }
  nav.bar .nav-long { display: none; }
  nav.bar .nav-short { display: inline; }
}

/* ---- furniture --------------------------------------------------------- */
.eyebrow {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text-mute); font-weight: 540; margin: 2.5rem 0 0.5rem;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
/* The colophon. Census date and set versions, once, at the foot of the
   assumptions page - the header bar is the brand zone, not the telemetry's. */
.ledger { font-size: 0.6875rem; color: var(--text-mute); font-family: var(--mono);
          text-align: center; line-height: 1.5; margin: 2.5rem 0 0.25rem; }
.eyebrow .count { font-family: var(--mono); letter-spacing: 0; }
.eyebrow .switch { margin-left: auto; display: flex; gap: 0.3rem; letter-spacing: 0; }
.eyebrow .switch a { font-size: 0.6875rem; padding: 0.15rem 0.5rem; border-radius: 6px;
                     border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
                     text-transform: none; }
.eyebrow .switch a[aria-current="true"] { color: var(--accent); border-color: var(--accent);
                                          background: var(--accent-dim); }
/* A basis the data cannot support. Present, named and not clickable - removing
   it would hide that yield is the ranking rule at all. F4. */
.eyebrow .switch .off {
  font-size: 0.6875rem; padding: 0.15rem 0.5rem; border-radius: 6px;
  border: 1px dashed color-mix(in oklch, var(--border) 70%, transparent);
  color: color-mix(in oklch, var(--text-mute) 75%, transparent);
  text-transform: none; cursor: not-allowed;
}
.eyebrow .switch .chip-part { font-family: var(--mono); font-size: 0.625rem; opacity: 0.85; }
.avail { font-size: 0.75rem; color: var(--text-mute); margin: -0.15rem 0 0.5rem; }

/* ---- opportunity stage ------------------------------------------------ */
.stage-head { padding: 0.35rem 0 0.55rem; max-width: 62ch; }
.stage-head .eyebrow { margin: 0.35rem 0 0.35rem; }
.stage-head h1 { margin: 0; font-family: var(--serif); font-size: 1.55rem;
                 font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.stage-head > p:last-child { margin: 0.45rem 0 0; color: var(--text-mute);
                             font-size: 0.875rem; line-height: 1.55; }
.opportunity-filters { margin-top: 0.2rem; }
.opportunity-sheet { margin-top: 0.75rem; }
.opportunity-row .rowmain { align-items: flex-start; }
.decision-mark { display: block; color: var(--accent); font-size: 0.6875rem;
                 font-weight: 620; text-transform: uppercase; letter-spacing: 0; }
.opportunity-row .addr { margin-top: 0.08rem; line-height: 1.35; }
.decision-line { display: flex; flex-wrap: wrap; gap: 0.12rem 0.75rem;
                 align-items: baseline; margin-top: 0.42rem;
                 font-size: 0.75rem; color: var(--text-mute); }
.decision-line b { color: var(--text); font-weight: 600; }
.rent-line { display: block; margin-top: 0.18rem; font-size: 0.875rem;
             color: var(--text-mute); }
.rent-line b { color: var(--accent); font-size: 1rem; font-weight: 620; }
.property-tags { display: flex; flex-wrap: wrap; gap: 0.25rem;
                 margin-top: 0.3rem; }
.property-tag { display: inline-flex; align-items: center; min-height: 1.35rem;
                padding: 0.12rem 0.4rem; border-radius: 4px;
                border: 1px solid color-mix(in oklch, var(--border) 52%, transparent);
                background: color-mix(in oklch, var(--surface) 28%, transparent);
                color: var(--text-mute); font-size: 0.625rem; font-weight: 580;
                line-height: 1.2; }
.property-tag.auction { color: var(--metal); }
.property-tag.source { color: var(--accent); }
.property-tag.source-sheriffhq { color: var(--metal); }
.property-tag.reject { color: var(--state-fail);
                       border-color: color-mix(in oklch, var(--state-fail) 52%, transparent);
                       background: color-mix(in oklch, var(--state-fail) 10%, transparent); }

.decision-callout { display: grid; gap: 0.2rem; margin: 1rem 0 0;
                    padding: 0.85rem 0; border-top: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
                    border-bottom: 1px solid color-mix(in oklch, var(--accent) 24%, transparent); }
.decision-callout .lbl { color: var(--accent); font-size: 0.6875rem;
                         font-weight: 620; text-transform: uppercase; letter-spacing: 0; }
.decision-callout strong { font-family: var(--serif); font-size: 1.35rem;
                           font-weight: 500; letter-spacing: 0; }
.decision-callout > span:last-child { color: var(--text-mute); font-size: 0.75rem;
                                      line-height: 1.5; max-width: 62ch; }

/* ---- deal insights ----------------------------------------------------- */
.insights-page { width: min(100%, 68rem); }
.insight-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
                gap: 0.25rem; padding: 0.3rem; margin-top: 0.35rem; }
.insight-tabs a { min-width: 0; min-height: 3.25rem; padding: 0.45rem 0.35rem;
                  display: flex; flex-direction: column; align-items: center;
                  justify-content: center; gap: 0.15rem; border-radius: 6px;
                  color: var(--text-mute); font-size: 0.75rem; line-height: 1.25;
                  text-align: center; }
.insight-tabs a b { color: inherit; font-size: 0.6875rem; font-weight: 540; }
.insight-tabs a:hover { color: var(--text); background: color-mix(in oklch, var(--text) 5%, transparent); }
.insight-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.insight-tabs a[aria-current="page"] { color: var(--accent);
                                        background: var(--accent-dim); }
.insight-sheet { margin-top: 0.75rem; }
.insights-page[data-insight-page="high"] .insight-sheet {
  border-color: color-mix(in oklch, var(--state-pass) 48%, var(--border));
}
.insights-page[data-insight-page="late"] .insight-sheet {
  border-color: color-mix(in oklch, var(--state-review) 48%, var(--border));
}
.insight-tabs + .opportunity-filters { margin-top: 0.75rem; }
.factor-row .rowmain { align-items: flex-start; }
.factor-action { display: block; font-size: 0.6875rem; font-weight: 620;
                 text-transform: uppercase; letter-spacing: 0; color: var(--text-mute); }
.factor-row.candidate .factor-action { color: var(--state-pass); }
.factor-row.high .factor-action { color: var(--state-pass); }
.factor-row.late .factor-action { color: var(--state-review); }
.factor-row.township .factor-action,
.factor-row.land .factor-action { color: var(--metal); }
.factor-row.reject .factor-action { color: var(--state-fail); }
.factor-row.evidence .factor-action { color: var(--state-review); }
.factor-row .addr { margin-top: 0.08rem; }
.factor-verdict { display: block; margin-top: 0.3rem; color: var(--text-mute);
                  font-size: 0.8125rem; line-height: 1.45; }

/* ---- source register --------------------------------------------------- */
.source-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                  gap: 0.55rem; margin-top: 0.8rem; }
.source-stat { display: grid; grid-template-columns: auto 1fr; align-items: baseline;
               gap: 0.1rem 0.65rem; padding: 0.75rem 0.85rem; }
.source-stat b { grid-row: 1 / 3; color: var(--accent); font-family: var(--serif);
                 font-size: 1.65rem; font-weight: 500; }
.source-stat > span { color: var(--text); font-size: 0.8125rem; font-weight: 600; }
.source-stat small { color: var(--text-mute); font-size: 0.6875rem; }
.source-stat .failed { color: var(--state-fail); }
.source-filters { margin-top: 0.75rem; }
.source-sheet { margin-top: 0; }
.source-value { min-width: 8.75rem; }
.source-value i { display: block; color: var(--text-mute); font-size: 0.6875rem;
                  font-style: normal; }
.source-pages { display: flex; align-items: center; justify-content: center;
                gap: 0.75rem; margin: 0.9rem 0 1.5rem; }
.source-pages .btn { min-width: 7rem; }

@media (max-width: 560px) {
  .source-summary { grid-template-columns: 1fr; }
  .source-value { min-width: 0; }
}
.factor-verdict b { color: var(--text); font-weight: 600; }
.factor-metrics { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem;
                  margin-top: 0.25rem; color: var(--text-mute); font-size: 0.75rem; }
.factor-metrics b { color: var(--text); font-weight: 540; }

@media (max-width: 560px) {
  .factor-row .rowmain { gap: 0.45rem; }
  .factor-metrics { display: grid; grid-template-columns: 1fr; gap: 0.05rem; }
}

@media (min-width: 1100px) {
  .insights-page .insight-tabs { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.caveat {
  font-size: 0.8125rem; line-height: 1.55; color: var(--text-mute);
  padding: 0.85rem 1rem; margin: 0.75rem 0 0; border-radius: 10px;
  background: color-mix(in oklch, var(--surface) 60%, transparent);
  border: 1px dashed color-mix(in oklch, var(--border) 85%, transparent);
}
.caveat strong { color: var(--text); font-weight: 560; }
.caveat + .caveat { margin-top: 0.5rem; }

/* ---- the shared header ------------------------------------------------- */
/* What holds for every row is a property of the set, not of any row in it, so
   it is said once here instead of 58 times below. Measured before this existed:
   the bid, its caption and the badge set were byte-identical across all 58 rows
   and took 44% of each row's area. This is the sheet's header, not a panel of
   its own: nesting a second glass surface inside the list would be a card grid
   with one card. */
.uniform {
  padding: 0.7rem 1rem 0.75rem;
  background: color-mix(in oklch, var(--text) 3.5%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
}
/* A grid, not a wrapped sentence. Separating the clauses with punctuation or a
   divider leaves an orphaned mark at the start of every wrapped line, and this
   block wraps at almost every width. Columns align instead. */
.uniform .all {
  margin: 0; font-size: 0.8125rem; line-height: 1.4; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 0.25rem 1.1rem;
}
.uniform .all + .all { margin-top: 0.55rem; }
.uniform .lead {
  grid-column: 1 / -1;
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.13em;
  font-weight: 560; color: var(--text-mute);
}
.uniform .cl { color: var(--text-mute); text-wrap: pretty; }
/* Prose, not a clause. `.lead` is a label and sets everything uppercase. */
.uniform .note { margin: 0.55rem 0 0; font-size: 0.75rem; line-height: 1.5;
                 color: var(--text-mute); max-width: 60ch; text-wrap: pretty; }
.uniform .cl b { font-weight: 560; color: var(--text); letter-spacing: 0; }
/* The badges are their own row and size to content rather than to the columns. */
.uniform .states { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.uniform .states .lead { flex: 0 0 auto; }

/* ---- rows -------------------------------------------------------------- */
.sheet { overflow: hidden; }
.row {
  display: flex; align-items: stretch;
  border-top: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
  transition: background 160ms var(--ease);
}
.uniform + .row, .row:first-child { border-top: 0; }
.row:hover { background: color-mix(in oklch, var(--accent) 5%, transparent); }
.row[aria-selected="true"] { background: color-mix(in oklch, var(--accent) 9%, transparent); }
.row.factor-row.preference-reject,
.row.source-row.preference-reject,
.row.factor-row.preference-reject:hover,
.row.source-row.preference-reject:hover {
  background: color-mix(in oklch, var(--state-fail) 9%, transparent);
  box-shadow: inset 3px 0 color-mix(in oklch, var(--state-fail) 86%, transparent);
}
.row.factor-row.preference-reject .factor-action { color: var(--state-fail); }
.row.factor-row.preference-reject .addr,
.row.source-row.preference-reject .addr { color: var(--state-fail); }

/* Rank, then who, then the clock. Flex rather than grid so the queue can drop
   the rank column without leaving a gutter behind. */
.rowmain {
  flex: 1 1 auto; min-width: 0; cursor: pointer;
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.7rem 0.4rem 0.75rem 0.85rem;
}
.rowmain:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
                         border-radius: 10px; }

.rank { flex: 0 0 1.5rem; text-align: right; font-size: 0.8125rem; font-weight: 500;
        color: var(--text-mute); letter-spacing: 0; }
.who { flex: 1 1 auto; min-width: 0; display: block; }

.addr { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; display: block; }
.meta { font-size: 0.8125rem; color: var(--text-mute); display: block; margin-top: 0.05rem; }
.meta .ref { font-family: var(--mono); }

/* Figures appear only where they differ across the set. A figure and its label
   are one unit so a wrap never separates them. */
.figs { display: flex; flex-wrap: wrap; gap: 0.15rem 1.2rem; margin-top: 0.45rem; }
.figs .f { display: flex; align-items: baseline; gap: 0.4rem; }
.figs b { font-family: var(--mono); font-variant-numeric: tabular-nums;
          font-size: 1rem; font-weight: 560; letter-spacing: 0; }
.figs b.soft { font-weight: 500; color: var(--text-mute); font-size: 0.9375rem; }
.figs i { font-style: normal; font-size: 0.75rem; color: var(--text-mute); }
.figs i.absent { font-size: 0.8125rem; }
/* Contradicted by the property's own last sale. Marked, not withdrawn: absent
   and doubtful are different facts and 8.2 keeps them apart. */
.figs b.doubted { text-decoration: underline dotted
                  color-mix(in oklch, var(--state-review) 80%, transparent);
                  text-underline-offset: 4px; }

/* The clock. Always present, never coloured, never counting down: Principle 2. */
.edge { flex: 0 0 auto; text-align: right; align-self: center; }
.edge .d { display: block; font-family: var(--mono); font-variant-numeric: tabular-nums;
           font-size: 1.125rem; font-weight: 560; letter-spacing: 0; line-height: 1.1; }
.edge .u { display: block; font-size: 0.6875rem; color: var(--text-mute); line-height: 1.25;
           max-width: 6.5em; }
/* The auction date, above the count of days. Muted and unemphasised for the
   same reason the count is: it is the clock, not an alarm. */
.edge .when { display: block; font-size: 0.75rem; color: var(--text-mute);
              font-variant-numeric: tabular-nums; line-height: 1.3;
              white-space: nowrap; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }

/* ---- state badges: never colour alone ---------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.6875rem; font-weight: 580; letter-spacing: 0.045em;
  text-transform: uppercase; padding: 0.2rem 0.5rem 0.2rem 0.4rem;
  border-radius: 6px; border: 1px solid currentColor; white-space: nowrap;
}
.badge .mark { font-family: var(--mono); font-size: 0.8125rem; line-height: 1; opacity: 0.9; }
.badge.pass      { color: var(--state-pass); }
.badge.fail      { color: var(--state-fail); }
.badge.noreserve { color: var(--state-no-reserve); background: var(--accent-dim); }
.badge.review    { color: var(--state-review); }

.chip {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 0.6875rem; color: var(--text-mute); letter-spacing: 0.02em;
  padding: 0.2rem 0.5rem; border-radius: 6px;
  border: 1px solid color-mix(in oklch, var(--border) 70%, transparent);
}
.chip.window { color: var(--text); border-color: color-mix(in oklch, var(--text) 35%, transparent); }

/* ---- favourite: form, not colour -------------------------------------- */
.fav {
  flex: 0 0 auto; width: 52px; display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--text-mute);
  border-radius: 8px; margin: 0.35rem 0.35rem 0.35rem 0;
  transition: color 160ms var(--ease), background 160ms var(--ease);
}
.fav:hover { color: var(--text); background: color-mix(in oklch, var(--text) 7%, transparent); }
.fav:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fav svg { width: 21px; height: 21px; display: block; }
.fav[aria-pressed="true"] { color: var(--metal); }

/* ---- detail ------------------------------------------------------------ */
.detail { padding: 1.5rem 1.5rem 1.7rem; }
.detail h2 { margin: 0; font-family: var(--serif); font-size: 1.4rem; font-weight: 500;
             letter-spacing: 0; text-wrap: balance; }
.detail .sub { color: var(--text-mute); font-size: 0.875rem; margin: 0.15rem 0 0; }
.detail .badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0 0; }

.headline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem;
            margin: 1.25rem 0 0.25rem; }
.headline .big { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums;
                 font-size: 2.4rem; font-weight: 500; letter-spacing: 0; }
.headline .big.none { font-size: 1.25rem; font-weight: 400; color: var(--text-mute); }
.headline .lbl { font-size: 0.75rem; color: var(--text-mute); text-transform: uppercase;
                 letter-spacing: 0.08em; }
.headline .beside { font-family: var(--mono); font-variant-numeric: tabular-nums;
                    font-size: 0.9375rem; color: var(--text-mute); }

table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
th { text-align: left; font-weight: 500; color: var(--text-mute); font-size: 0.75rem;
     text-transform: uppercase; letter-spacing: 0.07em; padding: 0 0 0.4rem; }
th:last-child, td:last-child { text-align: right; }
td { padding: 0.5rem 0; border-top: 1px solid color-mix(in oklch, var(--border) 30%, transparent); }
td.v { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.total td { font-weight: 600;
              border-top: 1.5px solid color-mix(in oklch, var(--text) 30%, transparent); }
/* A range is two figures, not one: at large OS text sizes a nowrap range was
   289px wide in a 390px viewport and took the page 62px past the fold sideways.
   Each figure stays unbroken; the range breaks between them. */
tr.prov td.v { color: var(--text-mute); }
td.v.range, tr.prov td.v { white-space: normal; }
td.v .r { white-space: nowrap; }

/* Notice prose can be much longer than a figure. It wraps inside its evidence
   column instead of inheriting the no-wrap contract used by currency values. */
.recited { table-layout: fixed; }
.recited td:first-child { width: 40%; padding-right: 0.75rem; }
.recited td.v { white-space: normal; overflow-wrap: anywhere; }

.assumed { text-decoration: underline dotted color-mix(in oklch, var(--state-review) 75%, transparent);
           text-underline-offset: 3px; }

/* Comparables. Wide, so it scrolls in its own box rather than pushing the page
   sideways; the first column stays put because the rest is meaningless without
   knowing which sale it belongs to. */
.comps { display: block; overflow-x: auto; white-space: nowrap; font-size: 0.8125rem; }
.comps th, .comps td { padding-right: 0.7rem; }
.comps th:last-child, .comps td:last-child { padding-right: 0; text-align: right; }
.comps td.v { font-size: 0.8125rem; }
/* The rate is the column the table exists to show; the rest is corroboration. */
.comps td.strong { font-weight: 560; color: var(--text); }
/* Fenced out, kept visible. Nothing disappears for failing a test: the reader
   has to be able to see what was excluded and disagree with it. */
.comps tr.excluded td { color: var(--text-mute); text-decoration: line-through;
                        text-decoration-color: color-mix(in oklch, var(--text-mute) 50%, transparent); }
.comps tr.excluded td.strong { font-weight: 500; }
.comps .x { text-decoration: none; display: inline-block; font-size: 0.625rem;
            text-transform: uppercase; letter-spacing: 0.06em; font-weight: 580;
            color: var(--state-review); border: 1px solid currentColor;
            border-radius: 4px; padding: 0 0.25rem; vertical-align: 1px; }

/* Nearby sales as a governed decision visual. The crosshairs are derived from
   the model rate and the median distance, so the four zones keep their meaning
   from one property to the next. Exact records remain in the disclosure below. */
.comp-quadrants { margin: 1.2rem 0 0; }
.comp-chart-head { display: flex; align-items: baseline; justify-content: space-between;
                   gap: 0.25rem 1rem; margin-bottom: 0.55rem; }
.comp-chart-head strong { font-size: 0.8125rem; font-weight: 620; color: var(--state-pass); }
.comp-chart-head span { color: var(--text-mute); font-size: 0.75rem; text-align: right; }
.comp-plot {
  position: relative; height: clamp(20rem, 52vw, 27rem); overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--border) 65%, transparent);
  border-radius: 8px;
  background: color-mix(in oklch, var(--surface) 26%, transparent);
}
.comp-plot::before, .comp-plot::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  background: color-mix(in oklch, var(--text) 34%, transparent);
}
.comp-plot::before { top: 0; bottom: 0; left: var(--x-split); width: 1px; }
.comp-plot::after { left: 0; right: 0; bottom: var(--y-split); height: 1px; }
.comp-quadrant-grid {
  position: absolute; inset: 0; z-index: 1; display: grid;
  grid-template-columns: var(--x-split) 1fr;
  grid-template-rows: calc(100% - var(--y-split)) var(--y-split);
}
.comp-quadrant { min-width: 0; padding: 0.6rem; display: flex; flex-direction: column;
                 justify-content: flex-start; pointer-events: none; }
.comp-quadrant:nth-child(2), .comp-quadrant:nth-child(4) { align-items: flex-end; text-align: right; }
.comp-quadrant:nth-child(3), .comp-quadrant:nth-child(4) { justify-content: flex-end; }
.comp-quadrant b { font-size: 0.6875rem; line-height: 1.2; font-weight: 620; }
.comp-quadrant small { margin-top: 0.1rem; color: var(--text-mute); font-size: 0.625rem;
                       line-height: 1.25; }
.comp-quadrant.near-low { background: color-mix(in oklch, var(--state-pass) 10%, transparent); }
.comp-quadrant.near-high { background: color-mix(in oklch, var(--accent) 7%, transparent); }
.comp-quadrant.far-low { background: color-mix(in oklch, var(--state-review) 7%, transparent); }
.comp-quadrant.far-high { background: color-mix(in oklch, var(--state-fail) 5%, transparent); }

.comp-point {
  appearance: none; position: absolute; z-index: 4; left: var(--x); bottom: var(--y);
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; transform: translate(-50%, 50%); cursor: pointer;
}
.comp-point::before {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: var(--accent); border: 1px solid color-mix(in oklch, var(--text) 68%, transparent);
  box-shadow: 0 1px 3px color-mix(in oklch, var(--bg) 70%, transparent);
}
.comp-point:hover::before, .comp-point.selected::before { inset: 5px; }
.comp-point.selected::before { outline: 2px solid var(--text); outline-offset: 2px; }
.comp-point.excluded::before { border-radius: 2px; background: var(--state-fail); }
.comp-point.context::before { background: transparent; border: 2px solid var(--state-review); }
.comp-point.excluded::after {
  content: "\00d7"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--bg); font-size: 0.6875rem; font-weight: 760; line-height: 1;
}
.comp-point:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.comp-axis { position: absolute; z-index: 3; pointer-events: none; color: var(--text-mute);
             font-family: var(--mono); font-size: 0.5625rem; text-transform: uppercase; }
.comp-axis.rate { top: 50%; left: 0.25rem; transform: rotate(-90deg) translateX(-50%);
                  transform-origin: left top; }
.comp-chart-meta { margin-top: 0.45rem; color: var(--text-mute); font-size: 0.6875rem;
                   line-height: 1.45; }
.comp-selection { display: grid; gap: 0.15rem; margin: 0.65rem 0 0; padding: 0.65rem 0.75rem;
                  border: 1px solid color-mix(in oklch, var(--border) 52%, transparent);
                  border-radius: 8px; background: color-mix(in oklch, var(--surface) 22%, transparent); }
.comp-selection > span { color: var(--text-mute); font-size: 0.625rem; font-weight: 580;
                         text-transform: uppercase; letter-spacing: 0.08em; }
.comp-selection strong { font-size: 0.75rem; line-height: 1.5; font-weight: 540; }
.comp-key { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin: 0.45rem 0 0;
            color: var(--text-mute); font-size: 0.6875rem; }
.comp-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.comp-key i { display: inline-block; width: 0.55rem; height: 0.55rem;
              background: var(--accent); border: 1px solid currentColor; border-radius: 50%; }
.comp-key i.context { background: transparent; border: 2px solid var(--state-review); }
.comp-key i.out { background: var(--state-fail); border-radius: 2px; }
.comp-table-disclosure { margin-top: 0.75rem; border-top: 1px solid color-mix(in oklch, var(--border) 42%, transparent); }
.comp-table-disclosure > summary { min-height: 44px; display: flex; align-items: center; gap: 0.45rem;
                                   cursor: pointer; color: var(--text); font-size: 0.8125rem;
                                   font-weight: 560; list-style: none; }
.comp-table-disclosure > summary::-webkit-details-marker { display: none; }
.comp-table-disclosure > summary::after { content: "+"; margin-left: auto; color: var(--text-mute);
                                          font-family: var(--mono); font-size: 1rem; }
.comp-table-disclosure[open] > summary::after { content: "\2212"; }
.comp-table-disclosure > summary span { color: var(--text-mute); font-size: 0.6875rem; font-weight: 450; }
.comp-table-disclosure > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.comp-table-disclosure .comps { padding-bottom: 0.4rem; }

@media (max-width: 560px) {
  .comp-chart-head { display: grid; }
  .comp-chart-head span { text-align: left; }
  .comp-plot { height: 23rem; }
  .comp-quadrant { padding: 0.45rem; }
  .comp-quadrant small { display: none; }
}
tr.flagged td:first-child { font-weight: 550; }
/* Provenance was in a title attribute, which never fires on touch, and half the
   stated workload is a phone. It is rendered instead, next to the figure it
   qualifies: Principle 4, the caveat lives where the number is read. */
.why { display: block; font-size: 0.6875rem; line-height: 1.4; color: var(--state-review);
       margin-top: 0.05rem; max-width: 34ch; }

/* Normalised public GIS evidence stays in the same audit-table language as the
   sourced auction evidence. It is context, not another verdict panel. */
.open-evidence { margin-top: 1.15rem; }
.open-evidence-scope { margin: -0.25rem 0 0.55rem; max-width: 66ch;
                       color: var(--text-mute); font-size: 0.75rem; line-height: 1.5; }
.open-data-table { table-layout: fixed; }
.open-data-table td:first-child { width: 38%; padding-right: 0.8rem; }
.open-data-table td.v { white-space: normal; overflow-wrap: anywhere; }
.open-data-table .open-risk-hit td { color: var(--state-fail); }
.open-data-table .open-risk-hit .why { color: var(--state-fail); opacity: 0.82; }
.open-data-table .open-not-assessed td { color: var(--text-mute); }
.open-map-credit { margin: 0.45rem 0 0; color: var(--text-mute); font-size: 0.6875rem; }
.open-map-credit a { text-decoration: underline; text-underline-offset: 2px; }
.open-data-sources { margin-top: 0.5rem;
                     border-top: 1px solid color-mix(in oklch, var(--border) 42%, transparent); }
.open-data-sources > summary { min-height: 44px; display: flex; align-items: center;
                               cursor: pointer; list-style: none; font-size: 0.8125rem;
                               font-weight: 560; }
.open-data-sources > summary::-webkit-details-marker { display: none; }
.open-data-sources > summary::after { content: "+"; margin-left: auto;
                                      color: var(--text-mute); font-family: var(--mono); }
.open-data-sources[open] > summary::after { content: "\2212"; }
.open-data-sources td:first-child { width: 38%; }
.open-data-sources td.v { white-space: normal; }
.open-data-sources .open-state { text-transform: capitalize; }
.open-data-sources .open-state.parsed,
.open-data-sources .open-state.held,
.open-data-sources .open-state.empty-at-source { color: var(--state-pass); }
.open-data-sources .open-state.failed { color: var(--state-fail); }
.open-data-sources .open-state.not-run { color: var(--text-mute); }
.open-data-sources a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 560px) {
  .open-data-table td:first-child, .open-data-sources td:first-child { width: 42%; }
}

.warn { display: flex; gap: 0.5rem; font-size: 0.8125rem; color: var(--text-mute);
        padding: 0.3rem 0; align-items: baseline; }
.warn .m { font-family: var(--mono); color: var(--state-review); flex: 0 0 auto; }

/* The corroboration line. Shown whether it passes or fails, because a check the
   reader only meets on failure is one they cannot calibrate. */
.check { display: flex; gap: 0.55rem; align-items: baseline; margin: 0.55rem 0 0;
         font-size: 0.8125rem; line-height: 1.5; color: var(--text-mute);
         max-width: 62ch; }
.check .m { font-family: var(--mono); flex: 0 0 auto; color: var(--state-pass); }
.check b { font-weight: 560; color: var(--text); }
.check.disputed { color: var(--text); }
.check.disputed .m { color: var(--state-review); }

.actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; }
.btn {
  flex: 1 1 auto; min-height: 44px; border-radius: 8px; font: inherit; font-size: 0.875rem;
  font-weight: 520; cursor: pointer; padding: 0.6rem 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:hover { background: color-mix(in oklch, var(--text) 6%, transparent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn svg { width: 18px; height: 18px; }

/* ---- assumptions ------------------------------------------------------- */
.field { display: grid; gap: 0.15rem; padding: 0.8rem 1rem;
         border-top: 1px solid color-mix(in oklch, var(--border) 30%, transparent); }
.field:first-child { border-top: 0; }
.field .top { display: flex; align-items: center; gap: 0.6rem; }
.field .name { font-size: 0.875rem; font-weight: 500; }
.field .val { margin-left: auto; font-family: var(--mono);
              font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.field .src { font-size: 0.75rem; color: var(--text-mute); }
.field .src .flag { color: var(--state-review); font-weight: 550; }
/* The official page a statutory figure was read from. Underlined rather than
   accented: it is provenance, not an action being offered. */
.field .src .src-link { text-decoration: underline; text-underline-offset: 2px;
                        text-decoration-color: color-mix(in oklch, var(--text-mute) 55%, transparent);
                        white-space: nowrap; }
.field .src .src-link:hover { color: var(--text); }
.caveat .flag { color: var(--state-review); font-weight: 550; }

/* ---- empty state ------------------------------------------------------- */
.empty { padding: 2.6rem 1.5rem; text-align: center; }
.empty svg { width: 26px; height: 26px; color: var(--text-mute); opacity: 0.7; }
.empty p { margin: 0.85rem auto 0; max-width: 40ch; font-size: 0.875rem;
           color: var(--text-mute); line-height: 1.6; }
/* An empty state that names the likely cause should also undo it. */
.empty .out { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
              margin-top: 1.15rem; }
.empty .out .btn { flex: 0 1 auto; }

/* ---- sign in ----------------------------------------------------------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; }
.gate form { width: min(24rem, 100%); padding: 2rem 1.8rem 1.6rem; display: grid;
             gap: 0.85rem; text-align: center; }
.gate .mark { width: 34px; height: 34px; margin: 0 auto 0.2rem; display: block;
              color: var(--metal); }
.gate h1 { margin: 0; font-family: var(--serif); font-size: 1.5625rem;
           font-weight: 500; letter-spacing: 0.01em; }
.gate .strap { margin: 0; font-size: 0.6875rem; text-transform: uppercase;
               letter-spacing: 0.13em; color: var(--text-mute); font-weight: 540; }
.gate p { margin: 0; font-size: 0.8125rem; color: var(--text-mute); }
.gate .census { margin-top: 0.5rem; font-family: var(--mono); font-size: 0.6875rem; }
.gate input {
  min-height: 44px; padding: 0.55rem 0.7rem; border-radius: 8px; font: inherit;
  text-align: center;
  color: var(--text); border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 55%, transparent);
}
.gate input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.gate .bad { color: var(--state-fail); }
.gate .pw { position: relative; display: grid; }
.gate .pw input { padding-right: 2.6rem; }
.gate .pw-eye {
  position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 7px; cursor: pointer;
  color: var(--text-mute); transition: color 160ms var(--ease);
}
.gate .pw-eye:hover { color: var(--text); }
.gate .pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gate .pw-eye svg { width: 19px; height: 19px; display: block; }
.gate .pw-eye .strike { display: none; }
.gate .pw-eye[aria-pressed="true"] .strike { display: block; }
.gate .pw-match { min-height: 1.1em; font-size: 0.8125rem; margin: -0.3rem 0 0; }
.gate .pw-match.ok { color: var(--state-pass); }
.gate .pw-match.no { color: var(--state-fail); }

/* ---- desk layout ------------------------------------------------------- */
.rent-stage > .col-detail { display: none; }
@media (min-width: 900px) {
  body { padding-bottom: 1.5rem; }
  .split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
           gap: 1.1rem; align-items: start; }
  /* The panel is taller than the viewport, so pinning its top alone put the only
     action on it 327px below the fold, first reachable after 12 000px of list
     scroll. It scrolls itself instead. */
  .split .col-detail {
    display: block;
    position: sticky; top: calc(var(--header-h, 4.5rem) + 0.4rem);
    /* The nav sits in the flow above this panel, so before the page is scrolled
       the panel starts below it. Sizing against the header alone left the last
       17px of the panel under the fold at rest. */
    max-height: calc(100dvh - var(--header-h, 4.5rem) - var(--nav-flow-h, 2.5rem) - 1.6rem);
    overflow-y: auto; overscroll-behavior: contain;
  }
  nav.bar { position: static; width: max-content;
            background: color-mix(in oklch, var(--surface) 20%, transparent);
            backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
            -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
            border: 1px solid color-mix(in oklch, var(--border) 52%, transparent);
            grid-template-columns: repeat(6, max-content); gap: 0.3rem;
            padding: 0.3rem; margin-bottom: 0.55rem; }
  nav.bar a { padding: 0.5rem 0.85rem; }
  .desk-hide { display: none; }
}

/* ---- the rail -----------------------------------------------------------
   The reference's left navigation, taken at the width where it pays for
   itself rather than at the width where the two-column split starts: a 13.5rem
   rail out of 900px would leave the detail pane about 330px, which is narrower
   than the figures it carries.

   It must re-assert what the block above clears - that rule turns the nav into
   a static row of tabs, and being later in the file it wins on source order
   whatever this one asks for otherwise. Below 900px the bar stays across the
   foot, where a thumb reaches it. */
@media (min-width: 1100px) {
  nav.bar {
    --nav-mode: rail;
    position: fixed; top: calc(var(--header-h, 4.5rem) + 1.5rem);
    bottom: 0.75rem; left: 0.75rem; right: auto;
    width: 13.25rem; display: flex; flex-direction: column; gap: 0.15rem;
    padding: 1.1rem 0.75rem;
    background: color-mix(in oklch, var(--surface) 22%, transparent);
    backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
    border: 1px solid color-mix(in oklch, var(--border) 58%, transparent);
    border-radius: 10px; box-shadow: var(--shadow);
  }
  nav.bar a { justify-content: flex-start; text-align: left;
              padding: 0.55rem 0.7rem; min-height: 40px; font-size: 0.8125rem; }
  /* The counts sit at the rail's far edge, where a column of them lines up and
     can be read down rather than hunted for. */
  nav.bar .n { margin-left: auto; }
  main { padding-left: calc(14rem + clamp(0.75rem, 3vw, 1.6rem));
         max-width: calc(1300px + 14rem); }
}
@media (min-width: 1100px) and (prefers-reduced-transparency: reduce) {
  nav.bar { background: var(--surface); backdrop-filter: none;
            -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- filters ------------------------------------------------------------ */
.filters { margin-top: 0.4rem; }
.filters > summary {
  list-style: none; cursor: pointer; padding: 0.75rem 1rem;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.875rem; font-weight: 550; min-height: 44px;
}
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::after {
  content: "▾"; color: var(--text-mute); font-size: 0.8125rem;
  transition: transform 180ms var(--ease);
}
.filters[open] > summary::after { transform: rotate(180deg); }
.filters > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px;
                                   border-radius: 10px; }
.filters .on { font-size: 0.6875rem; font-weight: 580; letter-spacing: 0.04em;
               text-transform: uppercase; color: var(--accent);
               background: var(--accent-dim); padding: 0.15rem 0.45rem; border-radius: 6px; }
.filters .off { font-size: 0.75rem; font-weight: 400; color: var(--text-mute); }
.filters .hits { margin-left: auto; font-family: var(--mono);
                 font-variant-numeric: tabular-nums; font-size: 0.8125rem;
                 font-weight: 400; color: var(--text-mute); }

.filters form {
  display: grid; gap: 0.7rem 0.9rem; padding: 0.2rem 1rem 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid color-mix(in oklch, var(--border) 30%, transparent);
  padding-top: 0.9rem;
}
.filters label, .filters fieldset { display: grid; gap: 0.25rem; margin: 0; padding: 0; border: 0; }
.filters .wide { grid-column: 1 / -1; }
.filters label > span, .filters legend {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); font-weight: 560; padding: 0;
}
.filters fieldset { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.25rem 0.4rem; }
.filters fieldset legend { grid-column: 1 / -1; }
.filters .to { font-size: 0.75rem; color: var(--text-mute); }

.filters input, .filters select {
  min-height: 42px; padding: 0.4rem 0.6rem; border-radius: 8px; font: inherit;
  font-size: 0.875rem; color: var(--text); width: 100%;
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 60%, transparent);
}
.filters input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.filters input:focus-visible, .filters select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}
.filters .buttons { grid-column: 1 / -1; display: flex; gap: 0.5rem; flex-wrap: wrap;
                    margin-top: 0.2rem; }
.filters .buttons .btn { flex: 1 1 8rem; text-decoration: none; }

/* The walk-away price. The one number that answers "what is the most I should
   bid", so it is set apart from the tables rather than filed inside one. */
.walkaway { margin: 1.1rem 0 0; padding: 1rem 1.15rem; border-radius: 10px;
            background: color-mix(in oklch, var(--accent) 8%, transparent);
            border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); }
.walkaway .lbl { display: block; font-size: 0.6875rem; text-transform: uppercase;
                 letter-spacing: 0.13em; font-weight: 540; color: var(--text-mute); }
.walkaway b { display: block; font-family: var(--serif);
              font-variant-numeric: lining-nums tabular-nums;
              font-size: 2.4rem; font-weight: 500; letter-spacing: 0;
              margin-top: 0.15rem; }
.walkaway .why { display: block; margin-top: 0.35rem; font-size: 0.75rem;
                 line-height: 1.5; color: var(--text-mute); max-width: 56ch; }

/* Nearby auctions. Deliberately quieter than a ranked row and never laid out
   like one: these carry no modelled figure, so a reader must not be able to
   mistake one for a listing that does. */
.filters .check { grid-template-columns: auto 1fr; align-items: center; gap: 0.5rem; }
.filters .check input { width: auto; min-height: 0; }
.filters .check > span { text-transform: none; letter-spacing: 0; font-size: 0.8125rem; }

.nearby { margin-top: 1rem; }
.nearby .group {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-mute); font-weight: 560;
  padding: 0.7rem 0.9rem 0.2rem;
}
.near-row { padding: 0.35rem 0.9rem 0.55rem; border-top: 1px solid color-mix(in oklch, var(--border) 40%, transparent); }
.near-row a { font-size: 0.875rem; }
.near-row .d { display: block; font-size: 0.8125rem; color: var(--text-mute); }
.near-row .num { font-family: var(--mono); font-size: 0.75rem; color: var(--text-mute); }

/* The second look, on the shortlist only. Quieter than a ranked row: it is
   corroboration for a figure already on the page, not a figure of its own. */
.deep .deep-row { padding: 0.6rem 0.9rem 0.7rem; border-top: 1px solid color-mix(in oklch, var(--border) 40%, transparent); }
.deep .deep-ref { font-size: 0.875rem; font-weight: 560; margin-bottom: 0.2rem; }
.deep .d { font-size: 0.8125rem; color: var(--text-mute); line-height: 1.5; }
.deep .d b { color: var(--text); font-weight: 560; }
.deep .d i { font-style: italic; }

/* ---- E5 hygiene ---------------------------------------------------------- */
/* One property, more than one notice. Stated on the row rather than resolved
   silently, because the other notice still exists and is still reachable. */
.meta .chip-dup { font-family: var(--mono); font-size: 0.6875rem;
                  padding: 0.05rem 0.35rem; border-radius: 4px;
                  border: 1px solid color-mix(in oklch, var(--border) 80%, transparent); }
/* Quarantine and Band C share this one bucket. Review-coloured, never alarm:
   a figure we cannot stand behind is an ordinary outcome, not an error. */
.needs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem;
         margin-top: 0.45rem; font-size: 0.75rem; }
.needs b { color: var(--state-review); font-weight: 560; }
.needs i { font-style: normal; color: var(--text-mute); }

/* E4. A control that cannot answer yet says so rather than pretending. */
.check.off { opacity: 0.55; }
.check.off input { cursor: not-allowed; }

/* E3. Keep / dismiss on an insight card, and how a verdict reads afterwards.
   The controls sit beside the star and stay quiet: the judgment is the
   operator's, the page only records it. A dismissed row dims rather than
   disappears - hiding it would un-measure the very precision the verdict
   exists to feed. */
.review { display: flex; flex-direction: column; align-items: flex-end;
          justify-content: center; gap: 0.3rem; padding: 0.55rem 0.5rem 0.55rem 0; }
.review .review-btn { font-size: 0.6875rem; padding: 0.18rem 0.55rem;
                      line-height: 1.2; cursor: pointer; }
.chip-review { font-family: var(--mono); font-size: 0.6875rem;
               padding: 0.05rem 0.35rem; border-radius: 4px;
               border: 1px solid color-mix(in oklch, var(--border) 80%, transparent);
               white-space: nowrap; }
.chip-review.keep { color: var(--state-pass);
                    border-color: color-mix(in oklch, var(--state-pass) 45%, transparent); }
.chip-review.dismiss { color: var(--text-mute); }
.review-dismiss { position: relative; }
.review-dismiss summary { list-style: none; display: inline-block; }
.review-dismiss summary::-webkit-details-marker { display: none; }
.review-dismiss[open] form { display: flex; gap: 0.3rem; margin-top: 0.3rem;
                             align-items: center; }
.review-dismiss input[type="text"] { font-size: 0.75rem; padding: 0.2rem 0.4rem;
                                     width: 13rem; max-width: 40vw; }
.row.reviewed-dismissed { opacity: 0.55; }
.row.reviewed-dismissed:hover { opacity: 0.9; }

/* A listing created long before the census around it, by the source's own id
   sequence. Metal-toned, not alarm-toned: staleness is a fact to weigh, not a
   defect - fatigue and adverse selection wear the same chip. */
.meta .chip-longlist, .meta .chip-fact {
  font-family: var(--mono); font-size: 0.6875rem;
  padding: 0.05rem 0.35rem; border-radius: 4px;
  color: var(--metal);
  border: 1px solid color-mix(in oklch, var(--metal) 55%, transparent); }

/* ---- 2026 workspace redesign ------------------------------------------
   The supplied dashboard reference contributes its compact rail, strong data
   hierarchy and precise dark surfaces. PropertyLane keeps its own evidence
   semantics: no decorative trends, no invented deltas and no urgency colour. */
:root {
  --chrome: color-mix(in oklch, var(--surface) 86%, var(--bg));
  --chrome-soft: color-mix(in oklch, var(--surface) 68%, transparent);
  --surface-strong: color-mix(in oklch, var(--surface) 82%, transparent);
  --hairline: color-mix(in oklch, var(--border) 62%, transparent);
  --rail-w: 13.75rem;
  --radius-sm: 7px;
  --radius-md: 11px;
}

:root[data-theme="dark"] {
  --bg: oklch(0.105 0.012 155);
  --surface: oklch(0.185 0.014 155);
  --text: oklch(0.955 0.006 95);
  --text-mute: oklch(0.710 0.012 115);
  --border: oklch(0.390 0.025 150);
  --page-bg:
    linear-gradient(105deg, oklch(0.055 0.010 155 / 0.90), oklch(0.075 0.012 155 / 0.77) 48%, oklch(0.055 0.008 155 / 0.89)),
    var(--page-photo);
  --shadow: 0 1px 1px oklch(0.035 0.006 155 / 0.55),
            0 18px 46px oklch(0.035 0.006 155 / 0.28);
}

:root[data-theme="light"] {
  --page-bg:
    linear-gradient(105deg, oklch(0.965 0.006 75 / 0.94), oklch(0.955 0.008 85 / 0.90)),
    var(--page-photo);
  --shadow: 0 1px 2px oklch(0.250 0.012 60 / 0.06),
            0 16px 38px oklch(0.250 0.012 60 / 0.08);
}

body {
  background-position: center;
  line-height: 1.45;
}

.panel {
  background: var(--surface-strong);
  border-color: var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}

/* Compact command bar. The context is useful on desk widths, while the
   mobile bar keeps only brand and actions. */
header.app-header {
  top: 0.625rem;
  left: 0.625rem;
  right: 0.625rem;
  min-height: 3.625rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem;
  gap: 0.75rem;
  flex-wrap: nowrap;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--chrome) 94%, transparent);
  border-color: var(--hairline);
}

.header-context {
  display: none;
  min-width: 0;
  line-height: 1.15;
}

.header-context > span { display: block; }
.context-kicker {
  color: var(--text-mute);
  font-size: 0.625rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.context-title { margin-top: 0.2rem; font-size: 0.8125rem; font-weight: 580; }

.header-status {
  display: none;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.status-dot {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--state-pass);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--state-pass) 14%, transparent);
}

#themer { margin-left: auto; }
.iconbtn {
  min-height: 36px;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--surface) 72%, transparent);
  border-color: var(--hairline);
  color: var(--text-mute);
  font-size: 0.6875rem;
  font-weight: 560;
}
.iconbtn:hover {
  background: color-mix(in oklch, var(--surface) 94%, transparent);
  color: var(--text);
}

.rail-brand, .nav-section, .rail-meta { display: none; }
.nav-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1;
}
.icon-ranked::before { content: "≡"; }
.icon-insights::before { content: "⌁"; }
.icon-rent::before { content: "⌂"; }
.icon-favourites::before { content: "☆"; }
.icon-queue::before { content: "□"; }
.icon-report::before { content: "▤"; }
.icon-sources::before { content: "⌕"; }
.icon-archive::before { content: "▣"; }
.icon-assumptions::before { content: "⌘"; }

nav.bar {
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--chrome) 94%, transparent);
  border-color: var(--hairline);
}

nav.bar a { position: relative; }
nav.bar a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}

main {
  max-width: 1470px;
  padding-top: calc(var(--header-h, 4.5rem) + 1.25rem);
}

/* Four separate instruments, in place of a fused banner. Each number remains
   a link into the exact set it counts. */
.census-strip {
  gap: 0.625rem;
  margin: 0.15rem 0 0.85rem;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.census-strip .stat {
  position: relative;
  min-height: 5.8rem;
  justify-content: flex-end;
  padding: 0.9rem 1rem 0.85rem;
  overflow: hidden;
  background: var(--surface-strong);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  transition: transform 180ms var(--ease), border-color 180ms var(--ease),
              background 180ms var(--ease);
}

.census-strip .stat:hover {
  transform: translateY(-1px);
  background: color-mix(in oklch, var(--surface) 94%, transparent);
  border-color: color-mix(in oklch, var(--accent) 34%, var(--border));
}

.census-strip .stat-mark {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--surface) 72%, transparent);
  color: var(--text-mute);
  font-family: var(--mono);
  font-size: 0.7rem;
}
.census-strip .stat[data-stat="1"] .stat-mark::before { content: "Σ"; }
.census-strip .stat[data-stat="2"] .stat-mark::before { content: "R"; }
.census-strip .stat[data-stat="3"] .stat-mark::before { content: "○"; color: var(--accent); }
.census-strip .stat[data-stat="4"] .stat-mark::before { content: "⌖"; }

.census-strip .n {
  font-size: 1.75rem;
  line-height: 1;
}
.census-strip .l { margin-top: 0.2rem; letter-spacing: 0.1em; }

.workspace-intro {
  padding: 0.55rem 0 0.75rem;
  max-width: 60ch;
}
.workspace-intro .workspace-kicker {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 650;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.workspace-intro h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.72rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.15;
}
.workspace-intro > p:last-child {
  margin: 0.4rem 0 0;
  color: var(--text-mute);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.filters { margin-top: 0.15rem; box-shadow: none; }
.filters > summary { padding: 0.7rem 0.9rem; }
.sheet { background: var(--surface-strong); }
.uniform { background: color-mix(in oklch, var(--text) 3%, transparent); }
.row { border-color: color-mix(in oklch, var(--border) 40%, transparent); }
.row:hover { background: color-mix(in oklch, var(--accent) 5%, transparent); }
.row[aria-selected="true"] {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 28%, transparent);
}
.row.factor-row.preference-reject,
.row.source-row.preference-reject,
.row.factor-row.preference-reject:hover,
.row.source-row.preference-reject:hover {
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--state-fail) 34%, transparent);
}
.rowmain { padding-top: 0.78rem; padding-bottom: 0.82rem; }
.addr { font-weight: 590; }
.rank { font-size: 0.75rem; }
.detail { background: transparent; }
.detail h2 { font-size: 1.48rem; }
.col-detail > .detail { border-color: color-mix(in oklch, var(--border) 70%, transparent); }
.caveat { background: color-mix(in oklch, var(--surface) 76%, transparent); }

.btn {
  border-radius: var(--radius-sm);
  font-weight: 570;
}

.badge, .chip { border-radius: 5px; }
.insight-tabs { background: var(--surface-strong); border-radius: var(--radius-md); }

/* On a phone the listing opens its own detail route. Leaving the desk inspector
   after hundreds of rows duplicates the entire decision surface off-screen. */
@media (max-width: 899px) {
  .split > .col-detail { display: none; }
}

@media (min-width: 700px) {
  .header-context { display: block; }
  .header-status { display: inline-flex; }
  #themer { margin-left: 0; }
}

@media (min-width: 900px) and (max-width: 1099px) {
  nav.bar {
    width: 100%;
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  nav.bar a { justify-content: center; }
  .split { gap: 0.8rem; }
}

@media (min-width: 1100px) {
  header.app-header {
    left: calc(var(--rail-w) + 1.25rem);
    padding-left: 1.1rem;
  }
  .header-wordmark { display: none; }
  .header-context { display: block; }

  nav.bar {
    top: 0.625rem;
    bottom: 0.625rem;
    left: 0.625rem;
    width: var(--rail-w);
    padding: 0.7rem;
    gap: 0.15rem;
    background: color-mix(in oklch, var(--chrome) 96%, transparent);
  }

  .rail-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.55rem 1.15rem;
    color: var(--metal);
  }
  .rail-brand .mark { width: 1.45rem; height: 1.45rem; flex: 0 0 auto; }
  .rail-brand > span { min-width: 0; }
  .rail-brand b {
    display: block;
    color: var(--text);
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.15;
  }
  .rail-brand small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-mute);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .nav-section {
    display: block;
    padding: 0.65rem 0.65rem 0.28rem;
    color: color-mix(in oklch, var(--text-mute) 78%, transparent);
    font-size: 0.59rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }
  .nav-section-model { margin-top: 0.5rem; }

  nav.bar a {
    justify-content: flex-start;
    min-height: 40px;
    padding: 0.58rem 0.65rem;
    gap: 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.78125rem;
    font-weight: 520;
  }
  nav.bar a[aria-current="page"] { font-weight: 620; }
  nav.bar .n {
    margin-left: auto;
    min-width: 1.3rem;
    padding: 0.05rem 0.28rem;
    text-align: center;
    border-radius: 999px;
    background: color-mix(in oklch, var(--text) 7%, transparent);
  }

  .rail-meta {
    display: grid;
    gap: 0.25rem;
    margin-top: auto;
    padding: 0.75rem 0.65rem 0.35rem;
    border-top: 1px solid var(--hairline);
    color: var(--text-mute);
    font-size: 0.65rem;
    line-height: 1.35;
  }
  .rail-meta > span { display: flex; align-items: center; gap: 0.45rem; }
  .rail-meta .status-dot { width: 0.34rem; height: 0.34rem; }
  .rail-meta small { font-family: var(--mono); font-size: 0.625rem; }

  main {
    width: auto;
    max-width: none;
    margin: 0;
    padding-left: calc(var(--rail-w) + 1.25rem);
    padding-right: 0.8rem;
  }
  .split { grid-template-columns: minmax(28rem, 0.92fr) minmax(29rem, 1.08fr); gap: 0.8rem; }
  .split .col-detail { top: calc(var(--header-h, 4.5rem) + 0.65rem); }
  .insights-page { width: min(100%, 82rem); }
}

@media (max-width: 699px) {
  body { background-attachment: scroll; }
  header.app-header { min-height: 3.55rem; }
  .header-wordmark { font-size: 1rem; }
  .header-wordmark .mark { width: 18px; height: 18px; }
  main { padding-top: calc(var(--header-h, 4.5rem) + 1rem); }
  .census-strip { gap: 0.5rem; margin-bottom: 0.7rem; }
  .census-strip .stat { min-height: 5.15rem; padding: 0.75rem 0.8rem; }
  .census-strip .stat-mark { top: 0.58rem; right: 0.58rem; width: 1.5rem; height: 1.5rem; }
  .census-strip .n { font-size: 1.55rem; }
  .workspace-intro { padding-top: 0.45rem; }
  .workspace-intro h1 { font-size: 1.5rem; }

  nav.bar {
    padding-top: 0.3rem;
    padding-bottom: calc(0.3rem + env(safe-area-inset-bottom));
  }
  nav.bar a {
    min-height: 50px;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0.05rem;
    line-height: 1;
  }
  nav.bar .nav-icon { width: 1rem; height: 1rem; }
  nav.bar .n {
    position: absolute;
    top: 0.12rem;
    right: 0.18rem;
    min-width: 1rem;
    padding: 0.08rem 0.2rem;
    border-radius: 999px;
    background: var(--accent-dim);
    font-size: 0.58rem;
  }
}

@media (max-width: 390px) {
  nav.bar a { font-size: 0.64rem; }
  .census-strip .l { letter-spacing: 0.07em; font-size: 0.625rem; }
}

/* ---- one-property report (D45) ------------------------------------------ */
/* Infographic-first: marks carry the data, tables carry the numbers, text
   tokens carry every label. Chart identities come from --chart-1 (gold, the
   bid) and --chart-2 (teal, the market), validated per mode; status colors
   stay reserved for verdicts. */
.report { display: grid; gap: 1rem; max-width: 62rem; margin: 0 auto; }
.report .stage-head { margin-bottom: 0; }
.report-sub { margin: 0.1rem 0 0; color: var(--text-mute); }
.report-logistics { margin: 0.6rem 0 0; font-family: var(--mono);
                    font-size: 0.8125rem; color: var(--text-mute); }
.report-block { padding: 1.1rem 1.25rem 1.2rem; }
.report-grid { display: grid; gap: 1rem; }
@media (min-width: 800px) { .report-grid { grid-template-columns: 1fr 1fr; } }

.kpis { display: grid; gap: 0.7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { padding: 0.85rem 1rem 0.9rem; display: grid; gap: 0.15rem; }
.kpi-label { font-size: 0.6875rem; text-transform: uppercase;
             letter-spacing: 0.1em; color: var(--text-mute); }
.kpi-value { font-family: var(--mono); font-size: 1.375rem; }
.kpi-foot { font-size: 0.75rem; color: var(--text-mute); }

.ladder { margin: 0.9rem 0 0.4rem; }
.ladder-track { position: relative; height: 26px; border-radius: 7px;
                background: color-mix(in oklch, var(--text) 6%, transparent); }
.ladder-band { position: absolute; top: 4px; bottom: 4px; min-width: 4px;
               background: var(--chart-1); border-radius: 0 4px 4px 0; }
.ladder-tick { position: absolute; top: -4px; bottom: -4px; width: 2px;
               background: var(--text); }
.ladder-tick.walk { background: var(--text); }
.ladder-tick.allin { background: var(--text-mute); opacity: 0.7; }
.ladder-dot { position: absolute; top: 50%; width: 12px; height: 12px;
              transform: translate(-50%, -50%); border-radius: 50%;
              background: var(--chart-2); box-shadow: 0 0 0 2px var(--surface); }

.report-table { width: 100%; border-collapse: collapse; margin-top: 0.55rem;
                font-size: 0.8125rem; }
.report-table td { padding: 0.28rem 0; border-top: 1px solid
                   color-mix(in oklch, var(--border) 45%, transparent); }
.report-table td.num { text-align: right; font-family: var(--mono); }
.report-table tr.total td { border-top-width: 2px; }
.swatch { display: inline-block; width: 10px; height: 10px; margin-right: 0.5rem;
          border-radius: 3px; background: var(--text-mute); vertical-align: -1px; }
.swatch.c1 { background: var(--chart-1); }
.swatch.c2 { background: var(--chart-2); }
.swatch.round { border-radius: 50%; }
.swatch.tick { width: 3px; height: 12px; border-radius: 1px; background: var(--text); }
.swatch.tick.walkline { background: var(--text); }

.stackbar { display: flex; gap: 2px; height: 18px; margin-top: 0.8rem;
            border-radius: 5px; overflow: hidden; background: var(--surface); }
.stackbar .seg { min-width: 4px; }
.stackbar .seg.c1 { background: var(--chart-1); }
.stackbar .seg.c2 { background: var(--chart-2); }

.minibars { display: grid; gap: 0.4rem; margin-top: 0.8rem; }
.minibar-row { display: grid; grid-template-columns: 9.5rem 1fr auto;
               gap: 0.6rem; align-items: center; font-size: 0.78125rem; }
.minibar-name { color: var(--text-mute); }
.minibar-track { position: relative; height: 12px; border-radius: 4px;
                 background: color-mix(in oklch, var(--text) 6%, transparent); }
.minibar { position: absolute; inset: 2px auto 2px 0; min-width: 3px;
           border-radius: 0 3px 3px 0; }
.minibar.c2 { background: var(--chart-2); }
.minibar-val { font-family: var(--mono); color: var(--text-mute); }

.dumbbell-row { display: grid; grid-template-columns: 9.5rem 1fr auto;
                gap: 0.6rem; align-items: center; font-size: 0.78125rem;
                margin-top: 0.5rem; }
.dumbbell-name { color: var(--text-mute); }
.dumbbell-track { position: relative; height: 12px; border-radius: 4px;
                  background: color-mix(in oklch, var(--text) 6%, transparent); }
.dumbbell { position: absolute; top: 2px; bottom: 2px; min-width: 4px;
            border-radius: 0 3px 3px 0; }
.dumbbell.c2 { background: var(--chart-2); }
.dumbbell-base { position: absolute; top: -3px; bottom: -3px; width: 2px;
                 background: var(--chart-1); }
.dumbbell-val { font-family: var(--mono); color: var(--text-mute); }

.verdicts { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.5rem; }

.report-plot { width: 100%; height: auto; margin-top: 0.6rem; }
.plot-axis { stroke: color-mix(in oklch, var(--text) 22%, transparent);
             stroke-width: 1; }
.plot-valueline { stroke: var(--chart-1); stroke-width: 2;
                  stroke-linecap: round; }
.plot-line { stroke: var(--chart-2); stroke-width: 2; fill: none;
             stroke-linecap: round; stroke-linejoin: round; }
.plot-dot { fill: var(--chart-2); stroke: var(--surface); stroke-width: 2; }
.plot-label { fill: var(--text-mute); font-family: var(--mono);
              font-size: 11.5px; }

.area-tiles { display: grid; gap: 0.7rem; grid-template-columns: repeat(3, 1fr);
              margin-top: 0.6rem; }
.area-tile { display: grid; gap: 0.1rem; }
.area-tile b { font-family: var(--mono); font-size: 1.125rem; font-weight: 500; }
.area-tile span { font-size: 0.71875rem; color: var(--text-mute); }

.report-note { margin: 0.7rem 0 0; font-size: 0.75rem; color: var(--text-mute); }
.report-warnings { margin: 0.4rem 0 0; padding-left: 1.1rem;
                   font-size: 0.75rem; color: var(--text-mute); }
.report-warnings li { margin-top: 0.25rem; }
.report-actions { margin: 0.9rem 0 0; display: flex; gap: 0.6rem; }

@media print {
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --page-bg: #fff; --surface: #fff;
    --text: oklch(0.250 0.012 60); --text-mute: oklch(0.500 0.010 60);
    --border: oklch(0.880 0.008 70);
    --chart-1: #9b7300; --chart-2: #0080a5;
    --state-pass: oklch(0.480 0.070 150); --state-fail: oklch(0.500 0.100 30);
    --state-review: oklch(0.480 0.080 85);
    --glass-tint: 100%; --glass-blur: 0px; --shadow: none;
  }
  body { background: #fff; }
  header.bar, nav.bar, .report-actions, #themer { display: none !important; }
  .panel { border: 1px solid var(--border); box-shadow: none;
           backdrop-filter: none; break-inside: avoid; }
  .report { max-width: none; }
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.detail-nav { display: flex; justify-content: space-between; gap: 1rem; }
.report-pack { display: grid; gap: 1.4rem; max-width: 62rem; margin: 0 auto; }
.report-pack-item { border-top: 1px solid var(--border); padding-top: 1.4rem; }
@media print {
  .report-pack-item { border-top: 0; padding-top: 0; break-before: page; }
  .report-pack .stage-head { break-after: avoid; }
}
.auction-block { border-left: 3px solid var(--metal); }
.auction-tiles { display: grid; gap: 0.9rem; margin-top: 0.5rem; }
@media (min-width: 700px) { .auction-tiles { grid-template-columns: 1fr 1.1fr 1.4fr; } }
.auction-tile { display: grid; gap: 0.15rem; align-content: start; }
.auction-office { font-size: 1.0625rem; font-family: var(--sans); }
.mail-ok { color: var(--state-pass); }
.mail-bad { color: var(--state-fail); }
.mail-signup { display: inline-flex; gap: 0.5rem; }
.mail-signup input[type="email"] { min-height: 40px; padding: 0.4rem 0.65rem;
  border-radius: 7px; font: inherit; color: var(--text);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--surface) 55%, transparent); }
@media print { .mail-signup { display: none; } }
.opps-scroll { overflow-x: auto; }
.opps-table { font-size: 0.78125rem; min-width: 46rem; }
.opps-table .opps-head td { color: var(--text-mute); text-transform: uppercase;
  font-size: 0.65625rem; letter-spacing: 0.09em; border-top: 0; }
.opps-table td { vertical-align: top; padding-right: 0.6rem; }
.opps-table .src { display: block; font-size: 0.71875rem; }