/* ════════════════════════════════════════════════════════════════════════════
   devices.css — shared visual devices, loaded on EVERY page by BaseLayout
   (after chrome.css, before any page stylesheet, so page styles still win).

   Four families, all namespaced:
     .f-icon    icon sprite consumers          (see components/IconSprite.astro)
     .conf-*    confidence tier scale, pills, inline meters
     .frail-*   sequential rail (stops on a track)
     .parcel-*  annotated parcel schematic + its numbered pin list

   ⚠️ NAMESPACING IS LOAD-BEARING. `.tier-*` was the obvious name for the
   confidence scale and is already taken TWICE, meaning something else:
   `.tier-name`/`.tier-price` are SUBSCRIPTION tiers on /pricing/ and
   `.tier-card`/`.tier-grid` are depth tiers on /coverage/. Reusing the prefix
   would have silently restyled both pages. Confidence tiers are `.conf-*`.

   ⚠️ SELF-CONTAINED TOKENS. This file cannot use --grey-200 or --mut, because
   the homepage and the inner pages define DIFFERENT token vocabularies
   (homepage.css: --cream/--mut/--line/--sans; base.css: --ground/--grey-500/
   --grey-200/--font-h) and only --ink/--red/--amber appear in both. A global
   stylesheet that referenced either set would render unstyled on half the site.
   chrome.css solved the same problem with --chrome-*; this is --fx-*.
   Values are copied from base.css and must stay in step with it.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --fx-ink: #0F1115;
  --fx-white: #FFFFFF;
  --fx-red: #C8292E;
  --fx-g100: #F3F4F6;
  --fx-g200: #E5E7EB;
  --fx-g300: #D1D5DB;
  --fx-g500: #334155;
  --fx-g700: #3D4048;

  /* Semantic depth tiers — same four values as base.css --tier-*. These encode
     the honesty story (verified schedule → machine extract → state API → gap)
     and are never used decoratively. */
  --fx-verified: #0a7d33;
  --fx-extract: #E8A33D;
  --fx-extract-ink: #B45309;
  --fx-api: #9AA3AF;
  --fx-amber-bg: #FEF3C7;
  --fx-amber-border: #FDE68A;
  --fx-verified-bg: #F0F9F2;
  --fx-verified-border: #B4DCC0;
  --fx-gap-bg: #FDF2F2;
  --fx-gap-border: #F0C3C4;

  --fx-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fx-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Icons ───────────────────────────────────────────────────────────────── */

/* The sprite host. Zero box, absolutely positioned — NOT display:none, which
   makes <use> resolution unreliable in some engines. */
.f-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Sized in em so an icon tracks its text instead of drifting at large sizes. */
.f-icon {
  width: 1.15em; height: 1.15em; flex: none;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.16em;
}

/* ── Confidence tier scale ───────────────────────────────────────────────── */

.conf-scale {
  display: flex; flex-wrap: wrap; gap: 1px; margin: 2.5rem 0 0;
  background: var(--fx-g200); border: 1px solid var(--fx-g200);
}
.conf-step { background: var(--fx-white); padding: 1rem 1.125rem; flex: 1 1 190px; min-width: 0; }

/* Ordinal by LENGTH as well as colour — three filled segments beats two beats
   one — so the ranking survives greyscale printing and colour-blindness. Never
   let colour alone carry the ordering. */
.conf-bar { display: flex; gap: 3px; margin-bottom: 0.7rem; }
.conf-bar i { height: 6px; flex: 1; background: var(--fx-g200); display: block; }

.conf-lbl {
  display: flex; align-items: center; gap: 0.44rem; margin: 0;
  font-family: var(--fx-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 500;
}
.conf-lbl .f-icon { width: 14px; height: 14px; stroke-width: 2; }
.conf-desc {
  margin: 0.44rem 0 0; font-family: var(--fx-sans); font-size: 0.78rem;
  color: var(--fx-g700); line-height: 1.45;
}

.conf-verified .conf-lbl { color: var(--fx-verified); }
.conf-verified .conf-bar i:nth-child(-n + 3) { background: var(--fx-verified); }
.conf-extract .conf-lbl { color: var(--fx-extract-ink); }
.conf-extract .conf-bar i:nth-child(-n + 2) { background: var(--fx-extract); }
.conf-api .conf-lbl { color: var(--fx-g500); }
.conf-api .conf-bar i:nth-child(-n + 1) { background: var(--fx-api); }
/* A gap is not "zero confidence" — it is a different KIND of answer, so it gets
   a dashed track rather than an empty one. */
.conf-gap .conf-lbl { color: var(--fx-red); }
.conf-gap .conf-bar i {
  background: repeating-linear-gradient(90deg, var(--fx-g300) 0 3px, transparent 3px 6px);
}

/* ── Confidence pills (inline, on a data row) ────────────────────────────── */

.conf-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--fx-mono); font-size: 0.625rem; letter-spacing: 0.11em;
  text-transform: uppercase; font-weight: 500;
  padding: 0.25rem 0.5rem; border: 1px solid; white-space: nowrap;
}
.conf-pill .f-icon { width: 11px; height: 11px; stroke-width: 2.2; }
.conf-pill-verified { color: var(--fx-verified); border-color: var(--fx-verified-border); background: var(--fx-verified-bg); }
.conf-pill-extract  { color: var(--fx-extract-ink); border-color: var(--fx-amber-border); background: var(--fx-amber-bg); }
.conf-pill-api      { color: var(--fx-g500); border-color: var(--fx-g300); background: var(--fx-g100); }
.conf-pill-gap      { color: var(--fx-red); border-color: var(--fx-gap-border); background: var(--fx-gap-bg); }

/* ── Inline meter (compact, for use mid-sentence or in a rail stop) ──────── */

.conf-meter { display: inline-flex; gap: 2px; align-items: center; vertical-align: middle; }
.conf-meter i { width: 13px; height: 5px; background: var(--fx-g200); display: block; }
.conf-m3 i:nth-child(-n + 3) { background: var(--fx-verified); }
.conf-m2 i:nth-child(-n + 2) { background: var(--fx-extract); }
.conf-m1 i:nth-child(-n + 1) { background: var(--fx-api); }

/* ── Sequential rail ─────────────────────────────────────────────────────── */

.frail { position: relative; padding-left: 4px; margin: 2rem 0 0; list-style: none; }
/* The track is a pseudo-element, not an element. As an empty <li> it was both
   invalid filler inside an <ol> and an extra item announced by screen readers —
   a decorative line counted as a step in the sequence. */
.frail::before {
  content: ''; position: absolute; left: 14px; top: 18px; bottom: 18px; width: 2px;
  background: var(--fx-g200);
}
.frail-stop {
  position: relative; display: grid; grid-template-columns: 30px 1fr;
  gap: 0.875rem; padding: 0.6rem 0; align-items: start;
}
.frail-dot {
  width: 29px; height: 29px; border-radius: 50%; background: var(--fx-white);
  border: 2px solid var(--fx-verified); display: flex; align-items: center;
  justify-content: center; font-family: var(--fx-mono); font-size: 0.66rem;
  font-weight: 500; color: var(--fx-verified); z-index: 1;
}
.frail-stop.is-warn .frail-dot { border-color: var(--fx-extract); color: var(--fx-extract-ink); }
/* These are block-level on purpose: as bare inline spans inside a grid cell they
   run together on one line — the exact defect the rail exists to fix. */
.frail-body { display: block; min-width: 0; }
.frail-h {
  display: block; font-family: var(--fx-sans); font-size: 0.9rem; font-weight: 700;
  letter-spacing: -0.01em; color: var(--fx-ink); margin: 0;
}
.frail-d {
  display: block; font-family: var(--fx-sans); font-size: 0.8125rem;
  color: var(--fx-g700); line-height: 1.45; margin: 0.14rem 0 0;
}
.frail-src {
  margin: 0.34rem 0 0; font-family: var(--fx-mono); font-size: 0.66rem;
  letter-spacing: 0.06em; color: var(--fx-g500);
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}

/* ── Parcel schematic ────────────────────────────────────────────────────── */

.parcel-fig { margin: 2rem 0 0; display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 900px) { .parcel-fig { grid-template-columns: 1fr; gap: 1.75rem; } }
.parcel-svg { width: 100%; height: auto; display: block; }

.parcel-pins { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fx-g200); }
.parcel-pin {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 0.75rem;
  align-items: baseline; padding: 0.7rem 0; border-bottom: 1px solid var(--fx-g200);
}
.parcel-n { font-family: var(--fx-mono); font-size: 0.6875rem; font-weight: 500; color: var(--fx-red); }
.parcel-l {
  display: block; font-family: var(--fx-sans); font-size: 0.875rem;
  font-weight: 600; color: var(--fx-ink); line-height: 1.35;
}
.parcel-src {
  display: block; font-family: var(--fx-mono); font-size: 0.655rem;
  color: var(--fx-g500); margin-top: 0.19rem; font-weight: 400;
}
.parcel-v {
  font-family: var(--fx-mono); font-size: 0.8125rem; color: var(--fx-ink);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.parcel-cap {
  margin: 1rem 0 0; font-family: var(--fx-sans); font-size: 0.8125rem;
  color: var(--fx-g500); line-height: 1.55; border-left: 2px solid var(--fx-g300);
  padding-left: 0.875rem; max-width: 78ch;
}

@media (prefers-reduced-motion: reduce) {
  .frail-stop, .conf-step { transition: none; }
}

/* ── Per-persona pin emphasis ────────────────────────────────────────────────
   Same drawing on every /for/ page, different reading: a conveyancer opens on the
   overlay, a surveyor on the frontage, a designer on the envelope.

   Emphasis is ADDITIVE (an accent rule + heavier value), never a dim on the rest.
   Dimming the non-key pins would have dropped their label contrast below AA on a
   page whose whole argument is that the numbers are checkable — and the contrast
   gate only inspects filled buttons, so nothing would have caught it. */
.parcel-fig[class*="is-"] .parcel-pin { transition: none; }
.parcel-fig[class*="is-"] .parcel-pin.pin-key,
.parcel-fig.is-conveyancers        .parcel-pin:nth-child(3),
.parcel-fig.is-conveyancers        .parcel-pin:nth-child(8),
.parcel-fig.is-planning-consultants .parcel-pin:nth-child(3),
.parcel-fig.is-planning-consultants .parcel-pin:nth-child(8),
.parcel-fig.is-buyers-agents       .parcel-pin:nth-child(3),
.parcel-fig.is-buyers-agents       .parcel-pin:nth-child(8),
.parcel-fig.is-surveyors           .parcel-pin:nth-child(1),
.parcel-fig.is-surveyors           .parcel-pin:nth-child(2),
.parcel-fig.is-surveyors           .parcel-pin:nth-child(7),
.parcel-fig.is-developers          .parcel-pin:nth-child(3),
.parcel-fig.is-developers          .parcel-pin:nth-child(7),
.parcel-fig.is-developers          .parcel-pin:nth-child(8),
.parcel-fig.is-building-designers  .parcel-pin:nth-child(4),
.parcel-fig.is-building-designers  .parcel-pin:nth-child(5),
.parcel-fig.is-building-designers  .parcel-pin:nth-child(6),
.parcel-fig.is-architects          .parcel-pin:nth-child(4),
.parcel-fig.is-architects          .parcel-pin:nth-child(5),
.parcel-fig.is-architects          .parcel-pin:nth-child(6) {
  box-shadow: inset 3px 0 0 var(--fx-red);
  padding-left: 0.75rem;
}