/* ════════════════════════════════════════════════════════════════════
   DATUM POINT (overline pronunciation DAY-tum) - the shared visual system
   for the app and the report. A Modern Era Brands product. Internal SKU stays "measure".

   Design law ("the instrument"): dark, still, precise, editorial;
   LEFT-ALIGNED and asymmetric; character from STRUCTURE (hairlines,
   numbered sections, ruled lists, figures, mono labels), not decoration.
   Ember (gold) appears ONLY where money or trust moves: a trusted
   confidence figure (>=85), the corrected stamp, the scroll-progress
   hairline, the wordmark accent + datum tick, the active pricing rail,
   the single funnel CTA. Tokens only (assets/tokens.css); raw hex is a
   defect. Radii capped 8/6/4. The Glass Roof reveal is the one scripted
   moment on the app and the report.

   This file is shared by app/index.html and report/index.html. The funnel
   (index.html) carries its own head <style> but mirrors these structural
   class names so the system reads as one instrument.
   ════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--platinum);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); }

/* ── Tabular numbers everywhere (Blueprint 0.3) ──
   The single cheapest instrument signal in the codebase. Every figure
   surface gets tabular-nums so columns lock into an auditable grid. */
.fig-headline,
.fig-cells .v,
.spec-strip .v,
.headline-sq .big,
.cells .v,
.row .val,
.facet-detail .v,
.compare td,
.cov-label,
.op-badge,
.history-row,
.addr-confirm .resolved,
.doc-masthead .val,
.prov-frame .val,
.tier .price,
.endpoint-list,
.storm-ledger .v,
.proof-ledger .v { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════
   Header + the wordmark (the masthead instrument)
   ════════════════════════════════════════════════════════════════════ */
header.site {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }

/* the wordmark · "DATUM PRO/POINT" set in the display face with one ember
   structural mark (the surveyor's datum tick). Live text, not paths, so it
   inherits tokens and stays crisp. The only SVG mark allowed; no icon set. */
.wordmark {
  font-family: var(--disp); font-size: 15px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--platinum);
  display: inline-flex; align-items: center; gap: .5em; line-height: 1;
}
.wordmark .pro { color: var(--ember); }               /* accent lands on the value word */
.datum-tick { display: block; width: 17px; height: 17px; flex: 0 0 auto; overflow: visible; color: var(--tool-datum); }
.datum-tick path { fill: currentColor; }
/* the demoted umbrella sub-label sits beside/beneath the wordmark */
.brand { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand .sub { font-family: var(--mono); font-size: var(--fs-cap-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }

/* legacy brand lockup kept as an alias so any un-migrated markup still reads */
.brand-lockup { font-family: var(--disp); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.brand-lockup .room { color: var(--ember); }

.bar a.ghost { font-family: var(--mono); font-size: 12px; color: var(--plat-dim); letter-spacing: .06em; }
.bar a.ghost:hover { color: var(--platinum); }

/* quiet live-system signal in the header (telemetry from the fleet, not chrome) */
.sys-signal { font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .04em; color: var(--plat-dim); white-space: nowrap; }
.sys-signal .v { color: var(--plat-dim); }

/* ── The ember scroll-progress hairline (structural indicator, not motion) ──
   Pinned to the bottom edge of the sticky header. A continuous position
   readout; no fade, no glow. Shared by funnel + app + report headers. */
.scroll-rail { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: transparent; pointer-events: none; }
.scroll-rail > span { display: block; height: 100%; width: 0; background: var(--ember); transform-origin: left; }

/* operator badge · the identity surface the app lacks today (app only) */
.op-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .04em;
  color: var(--plat-dim); white-space: nowrap;
}
.op-badge .who { color: var(--plat-dim); }
.op-badge .plan { color: var(--plat-faint); letter-spacing: .1em; text-transform: uppercase; }
.op-badge .plan.pro { color: var(--ember); }          /* ember only at Pro+ */

/* ════════════════════════════════════════════════════════════════════
   Controls · the one gold CTA, and the bordered secondary buttons
   ════════════════════════════════════════════════════════════════════ */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--body); font-weight: 600; font-size: 15px;
  color: var(--ember-ink); background: var(--grad-ember);   /* the design system: the one gold gradient */
  border: none; border-radius: var(--r-control);
  padding: 12px 20px; cursor: pointer;
  transition: background var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease), transform var(--m-press, 90ms) var(--ease-press, var(--ease));
}
.cta:hover { background: var(--ember-hi); }
.cta:active { transform: translateY(1px); }
.cta:disabled { opacity: .55; cursor: default; }

/* the confidence signal meter sits under the primary cells, not full bleed */
.conf-meter-block { margin-top: 18px; max-width: 340px; }

/* secondary controls · bordered, mono, never gold */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  color: var(--platinum); background: transparent;
  border: 1px solid var(--line-hi); border-radius: var(--r-control);
  padding: 10px 16px; cursor: pointer;
  transition: border-color var(--m-base) var(--ease), color var(--m-base) var(--ease);
}
.btn:hover { border-color: var(--ember); }
.btn:disabled { opacity: .5; cursor: default; }
.btn .arr { color: var(--ember); }
/* a locked export reads as a quiet upgrade tag, not a dead control */
.btn.locked { border-style: dashed; color: var(--plat-faint); cursor: default; }
.btn.locked:hover { border-color: var(--line-hi); }
.lock-tag { font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }

/* ── Overline ── */
.overline {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between;
  font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .14em; text-transform: uppercase;
  color: var(--plat-faint); border-bottom: 1px solid var(--line); padding-bottom: 16px; margin: 28px 0 30px;
}
.overline .ember { color: var(--ember); }

/* ════════════════════════════════════════════════════════════════════
   The run bar + address confirm · the anchor action
   ════════════════════════════════════════════════════════════════════ */
.runbar { padding: 26px 0 8px; }
.run-form { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; }
@media (min-width: 720px) { .run-form { grid-template-columns: 1fr auto; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.field input, .field select {
  font-family: var(--body); font-size: 15px; color: var(--platinum);
  background: var(--graphite-2); border: 1px solid var(--line); border-radius: var(--r-control);
  padding: 12px 14px; width: 100%;
  transition: border-color var(--m-base) var(--ease);
}
.field input::placeholder { color: var(--plat-faint); }
.field input:focus, .field select:focus { outline: none; border-color: var(--ember); }
.run-form .cta { height: 46px; white-space: nowrap; }

/* address confirm · reject typos so a fake roof can never silently generate.
   On resolve, show the normalized address and a mono Confirm / Edit pair;
   only Confirm runs the measure. This confirm step is the prerequisite for
   data-derived confidence (resolveQuality + parcelMatch + captureCoverage). */
.addr-confirm {
  display: none; margin-top: 14px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--graphite-2); padding: 14px 16px;
}
.addr-confirm.on { display: block; }
.addr-confirm .lbl { font-family: var(--mono); font-size: var(--fs-cap-sm); letter-spacing: .14em; text-transform: uppercase; color: var(--plat-faint); }
.addr-confirm .resolved { font-family: var(--mono); font-size: 13px; color: var(--platinum); margin-top: 7px; letter-spacing: .01em; }
.addr-confirm .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }

/* ── Status line ── */
.status { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; color: var(--plat-faint); min-height: 18px; margin: 14px 0 0; }
/* whole-line state · callers set the state as a compound class on .status
   itself (className = "status red"), so the color must match .status.red,
   not the descendant .status .red. Both are kept: the compound rule colors
   the whole line, the descendant rule colors inline <span>s inside it. */
.status.ember { color: var(--ember); }
.status.green { color: var(--green); }
.status.red { color: var(--red); }
.status .ember { color: var(--ember); }
.status .green { color: var(--green); }
.status .red { color: var(--red); }

/* ════════════════════════════════════════════════════════════════════
   Result layout · asymmetric, figure-left, with an optional history rail
   ════════════════════════════════════════════════════════════════════ */
.result { display: none; padding: 22px 0 60px; }
.result.on { display: block; }
.result-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 940px) { .result-grid { grid-template-columns: 1.05fr .95fr; gap: 48px; } }

/* the history rail sits left of the result on wide screens, collapses above
   it on mobile. Wrap .result in a .work-area to host both. */
.work-area { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 1080px) { .work-area.has-rail { grid-template-columns: 248px 1fr; gap: 40px; } }

/* ── Your takeoffs · the return surface (history rail, ruled, NOT cards) ── */
.history-rail { min-width: 0; }
.history-rail .rail-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plat-faint); padding-bottom: 10px; border-bottom: 1px solid var(--line); margin: 0 0 2px;
}
.history-list { border-top: 1px solid var(--line); }
.history-row {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; align-items: baseline;
  padding: 11px 0 11px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); cursor: pointer; transition: color var(--m-fast) var(--ease);
}
.history-row:hover { color: var(--platinum); }
.history-row .h-addr { font-size: 12px; color: var(--plat-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row .h-sq { font-size: 12px; color: var(--platinum); font-weight: 500; }
.history-row .h-meta { font-size: var(--fs-cap-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--plat-faint); }
.history-row.active { padding-left: 12px; border-left: 1px solid var(--ember); }   /* active run, ember rail */
.history-empty { font-family: var(--mono); font-size: var(--fs-cap); color: var(--plat-faint); padding: 14px 0; }
.history-cap { font-family: var(--mono); font-size: var(--fs-cap); color: var(--plat-faint); padding: 12px 0 0; }
.history-cap a { color: var(--plat-dim); }
.history-cap a:hover { color: var(--ember); }
.history-cap .arr { color: var(--ember); }

/* ════════════════════════════════════════════════════════════════════
   The Glass Roof figure (Fig. 01) · the one scripted moment
   ════════════════════════════════════════════════════════════════════ */
.fig-frame { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--graphite-2); }
.fig-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint);
}
.fig-head .addr { color: var(--plat-dim); text-transform: none; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fig-head .live { color: var(--plat-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fig-head .src { color: var(--plat-faint); white-space: nowrap; text-transform: none; letter-spacing: .02em; }
.fig-head .src.grounded { color: var(--green); }
.fig-stage { padding: 18px 16px; }
.glass-roof { position: relative; }
.glass-roof-svg { width: 100%; height: auto; display: block; }
.facet-sq { font-family: var(--mono); font-size: 9px; fill: var(--platinum); font-weight: 500; }
.facet-or { font-family: var(--mono); font-size: 6px; fill: var(--plat-faint); letter-spacing: .02em; }

/* the reveal · the single scripted moment.
   Facets REST visible (opacity 1). The staggered assembly is a transient
   .revealing class (added then removed by render.js), so if the animation
   never advances (a backgrounded tab, reduced motion) the facets are still
   shown. Visibility never depends on a frame firing (MEMORY: glass-roof law). */
@keyframes facet-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.glass-roof-svg .facet { opacity: 1; transform-box: fill-box; transform-origin: center; cursor: pointer; }
.glass-roof.revealing .facet { animation: facet-in var(--m-enter) var(--ease-exit) both; animation-delay: var(--d); }
.glass-roof-svg .facet rect, .glass-roof-svg .facet polygon { transition: fill-opacity var(--m-base) var(--ease), stroke-width var(--m-base) var(--ease); }
.glass-roof-svg .facet:hover rect, .glass-roof-svg .facet:hover polygon,
.glass-roof-svg .facet:focus rect, .glass-roof-svg .facet:focus polygon,
.glass-roof-svg .facet.active rect, .glass-roof-svg .facet.active polygon { fill-opacity: .85; stroke-width: 1.6; }
.glass-roof-svg .facet:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  .glass-roof.revealing .facet { animation: none; }
}

/* facet detail readout under the sketch */
.facet-detail {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.facet-detail > div { padding: 12px 14px; border-right: 1px solid var(--line); }
.facet-detail > div:last-child { border-right: none; }
.facet-detail .v { font-family: var(--mono); font-size: var(--fs-fig-3); font-weight: 500; color: var(--platinum); }
.facet-detail .k { font-family: var(--mono); font-size: var(--fs-cap-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint); margin-top: 5px; }
.fig-cap { display: flex; gap: 14px; align-items: baseline; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint); }
.fig-cap .no { color: var(--ember); }

/* ════════════════════════════════════════════════════════════════════
   The summary column · the figures, bound to the type scale
   ════════════════════════════════════════════════════════════════════ */
.headline-sq { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.headline-sq .big { font-family: var(--mono); font-size: var(--fs-fig-1); font-weight: 500; line-height: 1; letter-spacing: -.02em; color: var(--platinum); }
.headline-sq .big .unit { color: var(--ember); font-size: .42em; }
.headline-sq .order { font-family: var(--mono); font-size: 12px; color: var(--plat-dim); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.headline-sq .order b { color: var(--platinum); font-weight: 500; }

/* primary cells */
.cells { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: 20px; }
.cells > div { padding: 14px 14px 14px 0; border-right: 1px solid var(--line); }
.cells > div:last-child { border-right: none; padding-right: 0; }
.cells .v { font-family: var(--mono); font-size: var(--fs-fig-2); font-weight: 500; color: var(--platinum); display: flex; align-items: center; gap: 7px; }
.cells .v.green { color: var(--green); }
.cells .v.trusted { color: var(--ember); }              /* confidence >=85, ember-when-trusted (B.7) */
.cells .k { font-family: var(--mono); font-size: var(--fs-cap-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint); margin-top: 5px; }

/* corrected marker · an ember stamp, only where an operator changed a number */
.corr { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--ember); display: inline-block; }
.corr-tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); border: 1px solid var(--ember-deep); border-radius: var(--r-chip); padding: 1px 5px; }

/* ════════════════════════════════════════════════════════════════════
   Spec ledgers · numbered, ruled lists, NOT cards
   ════════════════════════════════════════════════════════════════════ */
.spec { margin-top: 30px; }
.spec h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 400; }
.rows { }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.row .term { font-size: 13.5px; color: var(--plat-dim); }
.row .val { font-family: var(--mono); font-size: var(--fs-fig-3); color: var(--platinum); font-weight: 500; white-space: nowrap; text-align: right; }
.row .val .sub { color: var(--plat-faint); font-weight: 400; }

/* linear feet · compact two-up grid of ruled rows */
.lf-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 560px) { .lf-grid { grid-template-columns: 1fr 1fr; column-gap: 28px; } }

/* ════════════════════════════════════════════════════════════════════
   Provenance · promoted from a thin footer to a framed ledger block
   (shared by app B.7 and report C.2 so the preview and the artifact agree)
   ════════════════════════════════════════════════════════════════════ */
.prov-frame {
  margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--graphite-2); overflow: hidden;
}
.prov-frame .pf-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint);
}
.prov-frame .pf-rows { padding: 4px 16px 8px; }
.prov-frame .pf-row {
  display: grid; grid-template-columns: 11rem 1fr; gap: 10px 16px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.prov-frame .pf-row:last-child { border-bottom: none; }
.prov-frame .term { font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--plat-faint); }
.prov-frame .val { font-family: var(--mono); font-size: 12.5px; color: var(--platinum); font-weight: 500; }
.prov-frame .val.trusted { color: var(--ember); }       /* confidence >=85 */
.prov-frame .val.green { color: var(--green); }          /* rep corrected / photo grounded */
.prov-frame .val.dim { color: var(--plat-dim); font-weight: 400; }

/* the legacy inline provenance line, kept for any surface still using it.
   render.js now paints .prov-frame; this stays as a graceful fallback. */
.prov { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--plat-faint); margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.prov b { color: var(--plat-dim); font-weight: 500; }
.prov b.trusted { color: var(--ember); }
.prov b.green { color: var(--green); }
.prov .green { color: var(--green); }

/* ════════════════════════════════════════════════════════════════════
   Walk-the-roof correction panel
   ════════════════════════════════════════════════════════════════════ */
.correct {
  margin-top: 30px; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 20px 18px; background: var(--graphite-2);
}
.correct h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); margin: 0 0 4px; font-weight: 400; }
.correct p.hint { font-size: 13px; color: var(--plat-dim); margin: 0 0 16px; max-width: 52ch; }
.correct-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .correct-grid { grid-template-columns: repeat(3, 1fr); } }
.correct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.correct-note { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); }
.correct-note .green { color: var(--green); }

/* ════════════════════════════════════════════════════════════════════
   Share / next-action strip · the record must leave in every persona format
   ════════════════════════════════════════════════════════════════════ */
.share {
  display: none; margin-top: 22px; border-left: 1px solid var(--line-hi); padding: 4px 0 4px 20px;
}
.share.on { display: block; }
.share .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.share .link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.share input.link {
  flex: 1 1 280px; font-family: var(--mono); font-size: 12.5px; color: var(--plat-dim);
  background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--r-control); padding: 11px 13px;
}
.share .quote-hint { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); margin-top: 12px; }
.share .quote-hint .ember { color: var(--ember); }

/* export row · ruled mono buttons, gated by entitlement (mirrors .link-row) */
.export-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.export-row .btn { padding: 9px 14px; }

/* ════════════════════════════════════════════════════════════════════
   The 3D massing panel (Fig. 02)
   ════════════════════════════════════════════════════════════════════ */
.massing-frame { margin-top: 22px; }
.massing { padding: 4px 0; }
.massing-svg { width: 100%; height: auto; display: block; }
.massing-svg .penmark { fill: var(--plat-faint); }      /* penetration marks on the massing */
.massing-svg .penmark.skylight { fill: var(--ember); }

/* ════════════════════════════════════════════════════════════════════
   Guided photo capture · numbered ruled rows, NOT a card grid
   ════════════════════════════════════════════════════════════════════ */
.capture-photo { margin-top: 38px; border-top: 1px solid var(--line); padding-top: 28px; }
.cap-head h3 { font-family: var(--disp); font-weight: 400; font-size: clamp(19px, 4.6vw, 24px); line-height: 1.15; margin: 0 0 12px; letter-spacing: -.01em; }
.cap-head p.hint { font-size: 14px; color: var(--plat-dim); margin: 0 0 22px; max-width: 64ch; }

/* coverage meter · a ruled bar, ember fill */
.coverage { margin-bottom: 8px; }
.cov-bar { height: 4px; background: var(--graphite); border-radius: var(--r-pill); overflow: hidden; }
.cov-bar > span { display: block; height: 100%; width: 0; background: var(--ember); transition: width var(--m-enter) var(--ease-exit); }
.cov-label { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--plat-faint); margin-top: 10px; }
.cov-label .lift { color: var(--plat-dim); }
.cov-label .lift b { color: var(--green); font-weight: 500; }

/* the eight capture rows */
.cap-rows { border-top: 1px solid var(--line); margin-top: 14px; }
.cap-row {
  display: grid; grid-template-columns: 26px 1fr auto auto; gap: 8px 12px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.cap-no { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); letter-spacing: .06em; }
.cap-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cap-term { font-size: 14px; color: var(--platinum); line-height: 1.2; }
.cap-state { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--plat-faint); }
.cap-row.done .cap-state { color: var(--green); }
.cap-row.busy .cap-state { color: var(--amber); }
.cap-thumb {
  width: 38px; height: 30px; border-radius: var(--r-chip); border: 1px solid var(--line-hi);
  background: var(--graphite-2); overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
}
.cap-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-thumb.empty::after { content: ""; }
.cap-btn { position: relative; padding: 8px 14px; }
.cap-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cap-row.done .cap-btn { color: var(--plat-dim); }

/* damage group */
.cap-damage { margin-top: 22px; }
.cap-damage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cap-damage-head .h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); }
.cap-damage-note { font-family: var(--mono); font-size: 10.5px; color: var(--plat-faint); }
.damage-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.damage-thumbs:empty { margin: 0; }
.damage-thumbs .cap-thumb { width: 56px; height: 44px; }
.cap-add { position: relative; }
.cap-add input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cap-foot { color: var(--plat-faint); margin: 18px 0 0; font-size: 11px; letter-spacing: .03em; }

/* shared captured-photo gallery (report page) */
.photo-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.photo-gallery a { display: block; width: 88px; }
.photo-gallery figure { margin: 0; }
.photo-gallery img { width: 88px; height: 66px; object-fit: cover; border-radius: var(--r-chip); border: 1px solid var(--line-hi); display: block; }
.photo-gallery figcaption { font-family: var(--mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--plat-faint); margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════
   Report-only · document masthead + receiver next-action band
   ════════════════════════════════════════════════════════════════════ */
.doc-masthead {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--graphite-2); overflow: hidden; margin: 6px 0 30px;
}
.doc-masthead .dm-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.doc-masthead .dm-title { font-family: var(--disp); font-weight: 400; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--platinum); }
.doc-masthead .dm-kicker { font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .12em; text-transform: uppercase; color: var(--plat-faint); }
.doc-masthead .dm-rows { padding: 4px 18px 10px; }
.doc-masthead .dm-row {
  display: grid; grid-template-columns: 11rem 1fr; gap: 10px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.doc-masthead .dm-row:last-child { border-bottom: none; }
.doc-masthead .term { font-family: var(--mono); font-size: var(--fs-cap); letter-spacing: .06em; text-transform: uppercase; color: var(--plat-faint); }
.doc-masthead .val { font-family: var(--mono); font-size: 12.5px; color: var(--platinum); font-weight: 500; }
.doc-masthead .val.trusted { color: var(--ember); }
.doc-masthead .val.green { color: var(--green); }
.doc-masthead .val.dim { color: var(--plat-dim); font-weight: 400; }

/* receiver next-action · download / print / contact (reuses .link-row layout) */
.receiver-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 6px; }
.receiver-actions .btn { padding: 10px 16px; }

/* ════════════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════════════ */
footer.site { border-top: 1px solid var(--line); padding: 28px 0 44px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.foot-row .mark { font-family: var(--disp); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--plat-dim); }
.foot-row .mark .room { color: var(--ember); }
.foot-row .wordmark { font-size: var(--fs-cap); color: var(--plat-dim); }
.foot-row .wordmark .pro { color: var(--ember); }
.foot-row .note { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); letter-spacing: .04em; }

/* ════════════════════════════════════════════════════════════════════
   Report page trims · read-only hides the interactive affordances
   ════════════════════════════════════════════════════════════════════ */
body.report .correct,
body.report .runbar,
body.report .addr-confirm,
body.report .history-rail,
body.report .op-badge,
body.report .export-row { display: none; }
/* the report keeps a static work-area (no rail), so collapse its grid */
body.report .work-area { display: block; }

/* ════════════════════════════════════════════════════════════════════
   Print stylesheet · the printed report IS the date-of-loss / board-deck
   artifact. White ground via the light-mode tokens path, hide chrome, keep
   the masthead, figures, ledgers, and provenance. (Report-only; the report
   head may also carry @media print trims for its own close band.)
   ════════════════════════════════════════════════════════════════════ */
@media print {
  /* Token-only: the report head also forces the light-mode token palette
     for print (see report/index.html C.6) so the paper ground and ink type
     come from tokens, not hex. Here we drop chrome and lock the layout. */
  header.site, .scroll-rail, .receiver-actions, .close-band, footer.site { display: none !important; }
  body { background: var(--graphite-2); color: var(--platinum); }
  .fig-frame, .doc-masthead, .prov-frame, .correct, .massing-frame { border-color: var(--line-hi); }
  .row .val, .cells .v, .headline-sq .big, .doc-masthead .val, .prov-frame .val { font-variant-numeric: tabular-nums; }
  .spec, .prov-frame, .doc-masthead, .fig-frame { break-inside: avoid; page-break-inside: avoid; }
  .glass-roof.revealing .facet { animation: none; }    /* no motion on paper */
  /* paper carries no elevation; the ledgers read flat under the print head */
  .fig-frame, .prov-frame, .correct, .addr-confirm, .doc-masthead { box-shadow: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   LEGACY EVOLVED · the elevation ladder (the "tangible")
   Tokens already warmed the ground and rounded the corners. This block
   lifts the surfaces off the page so each card / panel / ledger reads as
   liftable hardware, not a flat hairline. Usage law (tokens.css): ONE
   elevation tier per surface, never stacked. Ruled list rows that are
   full-bleed dividers (.row, .cap-row, .history-row, .cells, .facet-detail)
   stay flat by design, the structure is the rule, not a shadow.
   ════════════════════════════════════════════════════════════════════ */

/* CARD / PANEL / framed ledger that reads as an object: e2 + the top-edge
   light-catch. These are bordered frames with their own ground (graphite-2),
   not ruled dividers, so they earn the lift. */
.fig-frame,
.prov-frame,
.correct,
.addr-confirm,
.doc-masthead {
  box-shadow: var(--e-inset), var(--e2);
}

/* small captured-photo media tiles read as inset chips: the quiet e1 rest */
.cap-thumb,
.photo-gallery img {
  box-shadow: var(--e1);
}

/* INPUTS / fields · rest flat, focus catches the ember ring (replaces the
   bare border-color tell with the system focus signal). The border-color
   shift from the base rule stays; the ring is the new tactile layer. */
.field input:focus,
.field select:focus,
.share input.link:focus {
  box-shadow: var(--ring-ember);
}

/* BUTTONS · the bordered secondary control carries the quiet e1 at rest and
   presses down on click; the SINGLE gold CTA is the one surface that earns e2. */
.btn {
  box-shadow: var(--e1);
  transition: border-color var(--m-base) var(--ease), color var(--m-base) var(--ease),
              box-shadow var(--m-fast) var(--ease);
}
.btn:active { box-shadow: var(--e-press); }
.btn.locked { box-shadow: none; }                 /* a dead/locked control does not lift */
.cta { box-shadow: var(--e2); }
.cta:active { box-shadow: var(--e-press); }
.cta:focus-visible { outline: none; box-shadow: var(--e2), var(--ring-ember); }

/* ════════════════════════════════════════════════════════════════════
   DE-CROWD (D-0012) · the /app surface reorganized to one job at a time.
   The figure stage is the hero; the post-takeoff reads segment into
   Takeoff / Measurements / Report; Refine folds into one disclosure; the
   share strip collapses to one primary action plus a quiet overflow.
   Only the app shell uses these; the report page keeps its own grid.
   ════════════════════════════════════════════════════════════════════ */

/* ── run bar head · a calm humanist title, the mode read stated once ── */
.runbar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 22px; flex-wrap: wrap; margin-bottom: 16px; }
.run-title { font-family: var(--disp); font-weight: 400; font-size: clamp(20px, 4.4vw, 26px); line-height: 1.1; letter-spacing: -.01em; margin: 0; color: var(--platinum); }
.run-mode { font-size: var(--fs-cap); letter-spacing: .1em; text-transform: uppercase; color: var(--plat-faint); white-space: nowrap; }

/* ── the app result is a single flowing column under the hero stage ──
   (the report page still owns .result-grid / .fig-col / .sum-col). */
.result.on { display: block; }

/* ── segmented control (one thing at a time) · matches the Storm exemplar ── */
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--r-control); }
.result-seg { margin: 26px 0 22px; max-width: 460px; }
.seg {
  flex: 1 1 0; text-align: center; font-family: var(--body); font-weight: 600; font-size: 13px;
  color: var(--plat-dim); background: transparent; border: 0; border-radius: var(--r-inner);
  padding: 9px 10px; cursor: pointer;
  transition: color var(--m-base) var(--ease), background var(--m-base) var(--ease), box-shadow var(--m-base) var(--ease);
}
.seg:hover { color: var(--platinum); }
.seg.on { color: var(--platinum); background: var(--graphite-3); box-shadow: var(--e1); }  /* the one earned lift + the active accent */
.seg:focus-visible { outline: none; box-shadow: var(--ring-ember); }

/* ── the figure stage · the one hero, elevated; secondary reads are flat ── */
.stage { margin-top: 8px; }
.stage-frame { }
/* the Roof / 3D toggle lives in the figure head, quiet until active */
.stage-tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--obsidian); border: 1px solid var(--line); border-radius: var(--r-chip); }
.stage-tab {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--plat-dim); background: transparent; border: 0; border-radius: 6px;
  padding: 4px 10px; cursor: pointer; transition: color var(--m-base) var(--ease), background var(--m-base) var(--ease);
}
.stage-tab:hover { color: var(--platinum); }
.stage-tab.on { color: var(--platinum); background: var(--graphite-3); }  /* active view, neutral (not ember) */
.stage-tab:focus-visible { outline: none; box-shadow: var(--ring-ember); }
.stage-view { }
.stage-cap { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--plat-faint); margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); }
.stage-cap #massing-src { color: var(--plat-faint); }
.stage-cap #massing-src.grounded { color: var(--green); }

/* ── the segmented reads flow full width (the figure column is gone) ── */
.result-views { }
.rview[hidden] { display: none; }
/* the takeoff view leads with the headline; the ledgers/report follow only
   when their tab is chosen, so the surface opens on one read, not seven. */
#view-takeoff .headline-sq { margin-top: 4px; }
#view-measurements .spec:first-child { margin-top: 4px; }
#view-report .prov-frame { margin-top: 4px; }

/* ── Refine · one disclosure, closed by default (walk the roof + photos) ── */
.refine {
  margin-top: 30px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--graphite-2); overflow: hidden;
}
.refine > .refine-summary {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 16px 18px; cursor: pointer; list-style: none;
}
.refine > .refine-summary::-webkit-details-marker { display: none; }
.refine-summary .rs-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--platinum); }
.refine-summary .rs-hint { font-size: 12.5px; color: var(--plat-dim); flex: 1 1 auto; min-width: 0; }
.refine-summary .rs-caret { font-family: var(--mono); font-size: 16px; color: var(--plat-faint); transition: transform var(--m-base) var(--ease); }
.refine[open] > .refine-summary .rs-caret { transform: rotate(90deg); }
.refine[open] > .refine-summary { border-bottom: 1px solid var(--line); }
.refine-summary:focus-visible { outline: none; box-shadow: var(--ring-ember); }
.refine-body { padding: 6px 18px 20px; }
/* inside the disclosure the panels are already framed; flatten them to
   plain sections so we never nest a frame in a frame. */
.refine-body .correct,
.refine-body .capture-photo { border: 0; background: transparent; padding: 0; margin: 0; box-shadow: none; }
.refine-body .correct { padding-top: 18px; }
.refine-body .capture-photo { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }

/* ── share · one primary Copy-link action plus a quiet More popover ── */
.share-more { position: relative; }
.share-more-btn[aria-expanded="true"] { border-color: var(--line-hi); color: var(--platinum); }
.share-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 230px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--graphite); border: 1px solid var(--line-hi); border-radius: var(--r-card);
  box-shadow: var(--e-inset), var(--e2);
}
.share-pop[hidden] { display: none; }
.share-pop .export-row { flex-direction: column; align-items: stretch; gap: 8px; margin: 0; }
.share-pop .btn { justify-content: flex-start; width: 100%; }
@media (max-width: 560px) {
  .share-pop { position: static; right: auto; min-width: 0; margin-top: 10px; box-shadow: var(--e1); }
}