/*
 * Shell layout only. Frame, nav, seam. No view styling — the three views are W4·D and bring
 * their own, and R6's V4 front-end patterns land with them rather than being guessed at here.
 */

:root {
  --ink: #16191d;
  --ink-muted: #5b6470;
  --rule: #d9dde3;
  --surface: #ffffff;
  --surface-sunken: #f5f7f9;
  --accent: #1f4f82;
  --gutter: 1.5rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface-sunken);
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.shell-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.shell-brand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.shell-title {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.shell-subtitle {
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.shell-badge {
  margin-left: auto;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shell-nav {
  display: flex;
  gap: 0.25rem;
  padding: 0 var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.shell-nav-link {
  padding: 0.6rem 0.9rem;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.shell-nav-link:hover {
  color: var(--ink);
}

.shell-nav-link.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

#view-root {
  padding: var(--gutter);
}

#view-root:focus {
  outline: none;
}

.shell-footer {
  padding: 0.85rem var(--gutter);
  background: var(--surface);
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

/* ---- Coverage view (M6-22, card m6.w4.c) ----------------------------------------------
   The disclosure block is styled to be at least as prominent as the table above it. That is
   deliberate and it is the point of the surface: the reader who stops at the first table has
   seen four pairs at 100% and would leave believing the corpus is examined. */

.coverage-view h1 { margin: 0 0 0.5rem; }

.coverage-reading-note {
  margin: 0 0 1.25rem;
  padding: 0.75rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

.coverage-block { margin: 0 0 2rem; }
.coverage-block h2 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.coverage-block--secondary { opacity: 0.92; }

.coverage-measure {
  margin: 0 0 0.75rem;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

.coverage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.coverage-table th,
.coverage-table td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}

.coverage-table th { font-weight: 600; color: var(--ink-muted); }
.coverage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.coverage-table .is-incomplete td { font-weight: 600; }

.coverage-disclosure {
  margin: 1rem 0 0;
  padding: 0.85rem;
  border: 1px solid var(--rule);
  border-left-width: 4px;
}

.coverage-disclosure p { margin: 0.5rem 0 0; font-size: 0.9375rem; }

.coverage-unexamined {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  columns: 2;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.coverage-iaais { margin-top: 1.25rem; }
.coverage-iaais h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.coverage-iaais p { margin: 0 0 0.5rem; font-size: 0.9375rem; }

.coverage-provenance { display: block; margin-top: 0.25rem; color: var(--ink-muted); font-size: 0.8125rem; }
.coverage-status { color: var(--ink-muted); }
.is-incomplete { color: var(--ink); }

/* ---- Staleness indicator (R7, card m6.w2.f) — shell chrome, footer-mounted ---- */

#staleness-indicator {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--rule);
}

.staleness-reading { margin: 0 0 0.35rem; }
.staleness-reading--unknown { color: var(--ink-muted); font-style: italic; }

.staleness-label { font-weight: 600; }
.staleness-value { font-variant-numeric: tabular-nums; }
.staleness-means,
.staleness-does-not-mean { color: var(--ink-muted); font-size: 0.75rem; }

.staleness-toggle {
  margin-top: 0.25rem;
  padding: 0.15rem 0.5rem;
  background: var(--surface-sunken);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.75rem;
  cursor: pointer;
}

/* ---- Ask view (M6-24, card m6.w4.d) --------------------------------------------------
   THE BANNER IS STYLED TO BE READ BEFORE THE UNITS, and that ordering is the point of the
   surface (debt #237). A relate-and-redirect response returns real, topically adjacent units
   for a question the corpus does not hold — the measured witness asked about a framework that
   does not exist and got 38 governance units back. A reader who sees the list first has already
   drawn the wrong conclusion, so the banner sits above it, carries its own ground, and states
   the outcome in the manifest's words rather than the view's.

   The out-of-filter citation marker is deliberately NOT a de-emphasis: a citation outside the
   active tier filter is evidence the answer actually rested on, and greying it out would be the
   presentation layer editing the evidence record. It is marked, not muted. */

.ask-view { max-width: 62rem; }

.ask-form { margin: 0 0 1.5rem; }
.ask-label { display: block; margin-bottom: 0.35rem; font-weight: 600; }
.ask-row { display: flex; gap: 0.5rem; }

.ask-input {
  flex: 1 1 auto;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.ask-submit {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule);
  background: var(--accent);
  color: var(--surface);
  font: inherit;
  cursor: pointer;
}

.ask-tiers {
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--surface-sunken);
}

.ask-tier-legend { font-weight: 600; }
.ask-tier { display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.9rem; }
.ask-tier-label { font-size: 0.875rem; }

/* A tier the manifest declares but the corpus cannot populate today (LIM-TIER-*-EMPTY). The
   caveat rides onto the site from the manifest, so this needs no key list of its own. */
.ask-tier-label[data-caveats*="EMPTY"]::after {
  content: " (empty today)";
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.ask-status { color: var(--ink-muted); }
.ask-status.is-error { color: var(--ink); font-weight: 600; }

.ask-banner {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-left-width: 4px;
  background: var(--surface-sunken);
}

.ask-banner-label { margin: 0; font-size: 1.05rem; }
.ask-banner-disclaimer { margin: 0.4rem 0 0; font-weight: 600; }
.ask-banner-note { margin: 0.4rem 0 0; }

/* The four outcomes are four visually distinct states. If two ever render alike, the surface has
   re-committed the defect the model exists to prevent (see ask_model.js's header). */
.ask-banner.is-answered { border-left-color: var(--accent); }
.ask-banner.is-related-and-redirected { border-left-color: var(--ink); }
.ask-banner.is-redirect-only { border-left-color: var(--ink); border-style: dashed; }
.ask-banner.is-abstained { border-left-color: var(--ink-muted); }

.ask-redirect { margin-top: 0.5rem; }
.ask-redirect-unlinked { color: var(--ink-muted); }
.ask-relate-edges { margin: 0.5rem 0 0; padding-left: 1.1rem; }

.ask-fault {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--ink);
  background: var(--surface);
  font-weight: 600;
}

.ask-citations { margin-bottom: 1.5rem; }
.ask-citation-assertion,
.ask-citation-scope-note { margin: 0.25rem 0; color: var(--ink-muted); font-size: 0.8125rem; }
.ask-citation-list { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.ask-citation { font-variant-numeric: tabular-nums; }

/* A TYPOGRAPHIC MARK, NOT A SENTENCE. An earlier draft put "outside the active filter, and still
   cited" in this `content:` string. That is a statement about how far an answer's evidence can be
   relied on — trust-gating by the manifest's own test — and authoring it here would put a
   trust-gating label in a stylesheet, where no reviewer of the data layer would ever see it. The
   explanatory sentence is the manifest's and renders above the list; this is only the mark that
   points at it. */
.ask-citation.is-outside-filter { font-weight: 600; }
.ask-citation.is-outside-filter::after { content: " \2021"; }

.ask-unit-list { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.ask-unit { margin-bottom: 1rem; }
.ask-unit-head { display: flex; gap: 0.6rem; align-items: baseline; }
.ask-unit-ref { font-weight: 600; }
.ask-unit-tier { color: var(--ink-muted); font-size: 0.8125rem; }
.ask-unit-text { margin: 0.3rem 0 0; }

.residual-keys { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.8125rem; }

.ask-provenance { color: var(--ink-muted); font-size: 0.8125rem; }

/* ==========================================================================================
   PROBE — card m6.w4.d.probe. One ForHumanity criterion, in depth.
   ========================================================================================== */

.probe-view { max-width: 60rem; }

/* THE THREE TRANSPORT SURFACES ARE VISUALLY DISTINCT, and that is a requirement rather than a
   nicety (SC-14). A loading surface that looks like a resolved one with empty sections tells the
   reader the corpus holds nothing, before the corpus has been asked. The DOM carries the
   distinction as `data-probe-phase`; these rules make it visible. */
.probe-body[data-probe-phase="loading"] { opacity: 0.7; }
.probe-status { margin: 0; padding: 0.75rem 1rem; border-left: 3px solid var(--rule); }
.probe-status.is-loading { color: var(--ink-muted); font-style: italic; }
.probe-status.is-error {
  border-left-color: #a3341f;
  background: var(--surface);
  font-weight: 600;
}

.probe-refusal,
.probe-no-anchor {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.probe-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.probe-scope-legend { color: var(--ink-muted); font-size: 0.8125rem; }
.probe-scope-option {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.probe-scope-option.is-active { border-color: var(--accent); font-weight: 600; }
.probe-scope-outside {
  flex-basis: 100%;
  margin: 0.25rem 0 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.probe-section {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.probe-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.probe-criterion-ref { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.probe-criterion-title { margin: 0.2rem 0 0.5rem; font-size: 1.15rem; }
.probe-criterion-text { margin: 0 0 0.75rem; }
.probe-facts { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; margin: 0; }
.probe-facts dt { color: var(--ink-muted); font-size: 0.8125rem; }
.probe-facts dd { margin: 0; font-size: 0.8125rem; }

.probe-depth { margin: 0 0 0.5rem; }
.probe-variants,
.probe-neighbours,
.probe-pointers { margin: 0; padding-left: 1.1rem; }
.probe-variant { margin-bottom: 0.2rem; }
.probe-variant-role { font-weight: 600; }
.probe-variant-ref,
.probe-variant-stored { margin-left: 0.5rem; color: var(--ink-muted); font-size: 0.8125rem; }

.probe-neighbour { margin-bottom: 0.85rem; }
.probe-neighbour-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.probe-neighbour-type { font-weight: 600; }
.probe-neighbour-direction,
.probe-neighbour-scheme { color: var(--ink-muted); font-size: 0.8125rem; }
.probe-neighbour-title { margin: 0.15rem 0 0; }
.probe-neighbour-quote { margin: 0.15rem 0 0; color: var(--ink-muted); font-size: 0.8125rem; }
.probe-scope-narrowing {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.75rem;
  background: var(--surface-sunken);
  font-size: 0.8125rem;
}

.probe-pointer-ref { font-weight: 600; }
.probe-pointer-link,
.probe-pointer-unlinked { margin-left: 0.5rem; font-size: 0.8125rem; }

/* THE LEDGER IS THE VIEW, NOT A FOOTNOTE TO IT (DoD 2). 90.5% of fh-core criteria have no
   ForHumanity counterpart and 100% have no external pointer, so a design that only looks right on
   the connected anchors has failed. It is styled as a first-class section for that reason. */
.probe-ledger { border-color: var(--accent); }
.probe-ledger-rows { margin: 0; padding: 0; list-style: none; }
.probe-ledger-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--rule);
}
.probe-ledger-row:first-child { border-top: 0; }
.probe-ledger-for { min-width: 12rem; color: var(--ink-muted); font-size: 0.8125rem; }
.probe-ledger-row[data-ledger-polarity="terminal"] .probe-ledger-state { font-weight: 600; }
.probe-ledger-unnamed { color: #a3341f; font-weight: 600; }

/* ==========================================================================================
   BROWSE — card m6.w4.d.browse. Every FH criterion that is an anchor, row by row (DEC-0549 J3).
   ========================================================================================== */

.browse-view { max-width: 62rem; }
.browse-body-container { min-height: 4rem; }
.browse-body-container[data-browse-phase="loading"] { opacity: 0.7; }

.browse-status { margin: 0; padding: 0.75rem 1rem; border-left: 3px solid var(--rule); }
.browse-status.is-loading { color: var(--ink-muted); font-style: italic; }
.browse-status.is-error {
  border-left-color: #a3341f;
  background: var(--surface);
  font-weight: 600;
}

/* The population block is a DISCLOSURE, not a headline stat (DEC-0557): 115 internal edges and
   299 external pointers over a corpus of hundreds of anchors is a thin population, and the note
   is styled like a caption, not a dashboard metric. */
.browse-population {
  margin: 0 0 1.25rem;
  padding: 0.65rem 0.85rem;
  border-left: 3px solid var(--rule);
  color: var(--ink-muted);
  font-size: 0.875rem;
}
.browse-population-summary { margin: 0; }
.browse-population-breakdown {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.8125rem;
}
.browse-population-breakdown-row { margin: 0.1rem 0; }

/* Tier and sort controls are query-binding (R2 / SC-7) — same option-button pattern as
   `.probe-scope-option`. */
.browse-tier-control {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.25rem;
}
.browse-tier-legend,
.browse-sort-legend { color: var(--ink-muted); font-size: 0.8125rem; }
.browse-sort-legend { margin-left: 0.75rem; }
.browse-tier-option,
.browse-sort-option {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: 0.25rem 0.6rem;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.browse-tier-option.is-active,
.browse-sort-option.is-active { border-color: var(--accent); font-weight: 600; }

/* THE SURFACE IS ROW-ANCHORED (DEC-0549). Each anchor is the primary unit; its mappings are
   nested beneath it, never a flat edge list — the reader sees "this criterion, and what it maps
   to", not 529 undifferentiated edges. With ~384 anchors possible, each row gets a clear rule
   between it and the next so a long list stays scannable. */
.browse-anchors { margin: 0; padding: 0; list-style: none; }
.browse-anchor {
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.browse-anchor:first-child { border-top: 0; }

.browse-anchor-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.browse-anchor-id { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Scheme labels are always-legible pills (DoD 4 / SC-5) — a reader must never have to infer
   which framework a row belongs to. Anchor and mapping scheme share this look. */
.browse-anchor-scheme,
.browse-mapping-scheme {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* The tier is query-binding but must stay quiet — it is a label, not the row's headline
   ornament. */
.browse-anchor-tier { color: var(--ink-muted); font-size: 0.8125rem; }

.browse-anchor-title { margin: 0.3rem 0 0; max-width: 48rem; }

.browse-mappings {
  margin: 0.6rem 0 0;
  padding-left: 1.25rem;
  list-style: none;
}
.browse-mapping {
  margin-bottom: 0.65rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--rule);
}
.browse-mapping:last-child { margin-bottom: 0; }

.browse-mapping-path {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.browse-mapping-endpoint { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.browse-mapping-label { font-size: 0.9375rem; }

/* The relation sits between the two endpoints and must read as neither of them — the direction
   of the path (MAPS_TO / BUILDS-ON) is the thing this mark exists to carry. */
.browse-mapping-relation {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Provenance is often ABSENT by design; nothing above this reserves space for it, so a mapping
   with no provenance block looks complete, not empty. The quote follows the tree's existing
   blockquote convention (see `.probe-neighbour-quote`'s sibling markup). */
.browse-mapping-provenance { margin: 0.3rem 0 0; color: var(--ink-muted); font-size: 0.8125rem; }
.browse-mapping-source-reference { display: block; }
.browse-mapping-quote {
  margin: 0.2rem 0 0;
  padding-left: 0.65rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
}