/* ==========================================================================
   PAGES / TRUST — /methodology · /data-quality · /sources · /security · /licences
   --------------------------------------------------------------------------
   Loaded only by the five pages frontend/pages_trust.js serves. Linked from
   pages_registry.py as TRUST_SHEET, AFTER static/instrument.css and
   static/pages.css, so an equal-specificity rule here wins on load order.

   CLASS NAMING. Every selector below is `ptr` + camelCase with NO HYPHEN.
   instrument.css and obsidian_orchid.css style by substring and by suffix —
   [class*="-panel"], [class*="-num"], [class$="-label"], [class$="-title"]
   and about sixty more, several with !important. A hyphen-free name cannot
   match any of them BY CONSTRUCTION rather than by today's inventory, which
   is the same reasoning behind sgk / sgt / sgIcon in the kit.

   The consequence is that these classes inherit NOTHING and this file has to
   supply all of it. Where the house style is genuinely wanted the markup uses
   a `pk-` class from pages.css instead (pk-panel, pk-badge, pk-provenance,
   pk-lede, pk-scroll-x), and tables are left unclassed so instrument.css's
   `#app-root table` rules apply.

   TWO TRAPS OBSERVED IN THIS PROJECT AND AVOIDED HERE
   1. `#app-root .mono, #app-root [class*="-mono"]` is repainted
      `color: var(--i-ink-1) !important` by instrument.css, which loads before
      this file but wins on !important at equal specificity. Nothing here is
      given the `mono` class; the mono FACE is applied through
      `font-family: var(--oo-font-data)` directly.
   2. Nothing on these pages may scroll the page sideways. Long content —
      tables, licence text, route paths — is wrapped or given its own
      overflow-x container. `body { overflow-x: hidden }` in pages.css hides
      the symptom, so a rule that relies on it would silently clip.

   NO RAW HEX. Every colour resolves through an --i-* token.
   ========================================================================== */

/* ==========================================================================
   0 — PAGE
   ========================================================================== */

/* These pages are read, not scanned. A narrower measure than the 1180px
   default keeps prose at a comfortable line length; the wide blocks (tables,
   source grid) opt back out to full width below. */
#app-root .ptrPage {
  --ptr-gap: 18px;
}

#app-root .ptrPage p {
  max-width: var(--i-measure-wide, 82ch);
}

/* ==========================================================================
   1 — PANELS AND SECTIONS
   ========================================================================== */

#app-root .ptrPanel {
  margin: 0 0 28px;
}

#app-root .ptrPanel > .pk-panel-body > * + * {
  margin-top: 14px;
}

/* ==========================================================================
   2 — FACT LISTS
   --------------------------------------------------------------------------
   A definition list rather than a table: these are label/value pairs of very
   uneven length, and a table would force the long ones into a narrow column.
   ========================================================================== */

#app-root .ptrFacts {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

#app-root .ptrFact {
  display: grid;
  grid-template-columns: minmax(120px, 168px) 1fr;
  gap: 4px 16px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--i-hair);
}
#app-root .ptrFact:last-child { border-bottom: none; padding-bottom: 0; }

#app-root .ptrFactKey {
  margin: 0;
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--i-ink-3);
}

#app-root .ptrFactVal {
  margin: 0;
  color: var(--i-ink-2);
  min-width: 0;
  /* Module paths and constant names are long single tokens. Without this they
     push the grid wider than its container and take the page with them. */
  overflow-wrap: anywhere;
}
#app-root .ptrFactVal .pk-provenance { display: block; margin-top: 3px; }

/* One column below the fold of a phone: a 168px label beside a 40-character
   value is unreadable at 360px. */
@media (max-width: 620px) {
  #app-root .ptrFact { grid-template-columns: 1fr; }
}

/* ==========================================================================
   3 — LISTS
   ========================================================================== */

#app-root .ptrList {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  color: var(--i-ink-2);
}
#app-root .ptrList li { max-width: var(--i-measure-wide, 82ch); }
#app-root .ptrList li::marker { color: var(--i-ink-4); }

/* ==========================================================================
   4 — THE "NOT MEASURED" BLOCK
   --------------------------------------------------------------------------
   Deliberately prominent. On this page set an honest gap is content, not an
   apology, and burying it in small grey text would defeat the point of
   publishing it. Amber rather than red: it is a known limit, not a fault.
   ========================================================================== */

#app-root .ptrGaps {
  display: grid;
  gap: 12px;
}

#app-root .ptrGap {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--i-amber) 30%, transparent);
  border-left-width: 3px;
  border-radius: var(--i-r-card);
  background: var(--i-amber-wash);
}

#app-root .ptrGapHead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
#app-root .ptrGapHead strong {
  color: var(--i-ink-1);
  font-size: var(--i-t-md);
  font-weight: 600;
}

#app-root .ptrGapBody {
  margin: 0;
  color: var(--i-ink-2);
}

/* ==========================================================================
   5 — NOTICES
   ========================================================================== */

#app-root .ptrNotice {
  padding: 16px 18px;
  border: 1px solid var(--i-hair-strong);
  border-radius: var(--i-r-card);
  background: var(--i-surface-2);
}
#app-root .ptrNotice p { margin: 0; color: var(--i-ink-2); }
#app-root .ptrNotice p + p { margin-top: 12px; }
#app-root .ptrNotice strong { color: var(--i-ink-1); }

/* The scope-boundary block on /security and the unreviewed banner on
   /licences. Both are things the reader must not skim past. */
#app-root .ptrNoticeLoud {
  border-color: color-mix(in srgb, var(--i-amber) 42%, transparent);
  border-left-width: 3px;
  background: var(--i-amber-wash);
}

#app-root .ptrCaveat {
  margin: 0;
  font-size: var(--i-t-sm);
  color: var(--i-ink-3);
  border-left: 2px solid var(--i-hair-strong);
  padding-left: 12px;
}

/* ==========================================================================
   6 — NUMBERED PIPELINE
   ========================================================================== */

#app-root .ptrSteps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ptrstep;
  display: grid;
  gap: 14px;
}

#app-root .ptrStep {
  counter-increment: ptrstep;
  position: relative;
  padding-left: 40px;
}
#app-root .ptrStep::before {
  content: counter(ptrstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--i-orchid) 45%, transparent);
  background: var(--i-orchid-wash);
  color: var(--i-orchid-bright);
  font-family: var(--oo-font-data);
  font-size: var(--i-t-xs);
  font-weight: 600;
}

#app-root .ptrStepName {
  display: block;
  color: var(--i-ink-1);
  font-weight: 600;
  margin-bottom: 3px;
}
#app-root .ptrStep p { margin: 0; color: var(--i-ink-2); }

/* ==========================================================================
   7 — SOURCE CARDS
   ========================================================================== */

#app-root .ptrSourceGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
}

#app-root .ptrSource {
  padding: 18px;
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  background: var(--i-surface-1);
  box-shadow: var(--i-elev-1);
  min-width: 0;
}

#app-root .ptrSourceHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

#app-root .ptrSourceName {
  margin: 0;
  font-size: var(--i-t-md);
  font-weight: 600;
}
#app-root .ptrSourceName a { color: var(--i-ink-1); text-decoration: none; }
#app-root .ptrSourceName a:hover { color: var(--i-orchid-bright); text-decoration: underline; }

#app-root .ptrSourceWhat {
  margin: 0 0 14px;
  color: var(--i-ink-2);
}

#app-root .ptrLimits {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--i-hair);
}

#app-root .ptrLimitsHead {
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--i-amber);
  margin-bottom: 8px;
}

/* ==========================================================================
   8 — TALLIES
   --------------------------------------------------------------------------
   Counts, never ratios. The figure carries the mono face directly rather than
   a class containing "mono" or "-num", both of which are repainted upstream.
   ========================================================================== */

#app-root .ptrTally {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
}

#app-root .ptrTallyCell {
  flex: 1 1 130px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-control);
  background: var(--i-surface-2);
}

#app-root .ptrTallyNum {
  font-family: var(--oo-font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--i-track-tight);
  font-size: var(--i-t-xl);
  line-height: 1.15;
  color: var(--i-ink-1);
}

#app-root .ptrTallyLabel {
  margin-top: 3px;
  font-size: var(--i-t-xs);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
}

/* ==========================================================================
   9 — MONO RUNS
   --------------------------------------------------------------------------
   Route paths, env var names, file paths, versions and millisecond figures.
   `font-family` is set directly: any class containing "mono" would be
   repainted var(--i-ink-1) !important by instrument.css, which is wrong for
   the muted treatment these want.
   ========================================================================== */

#app-root .ptrCode,
#app-root .ptrEnv,
#app-root .ptrMs {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-sm);
  letter-spacing: var(--i-track-tight);
  white-space: nowrap;
}

#app-root .ptrCode {
  color: var(--i-ink-2);
  background: var(--i-surface-3);
  border-radius: var(--i-r-chip);
  padding: 2px 7px;
}

#app-root .ptrEnv {
  color: var(--i-ink-1);
  /* File paths are long and must be allowed to break inside a table cell
     rather than widening the table past its scroll container. */
  white-space: normal;
  overflow-wrap: anywhere;
}

#app-root .ptrMs {
  color: var(--i-ink-2);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10 — THE PROBE BUTTON
   --------------------------------------------------------------------------
   A real <button>. `#app-root [role="button"]` is styled upstream, so a div
   pretending to be a button would inherit half of this and none of the
   keyboard behaviour.
   ========================================================================== */

#app-root button.ptrRun {
  font-family: inherit;
  font-size: var(--i-t-sm);
  font-weight: 600;
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-orchid-bright);
  background: var(--i-orchid-wash);
  border: 1px solid color-mix(in srgb, var(--i-orchid) 45%, transparent);
  border-radius: var(--i-r-control);
  padding: 7px 15px;
  cursor: pointer;
  transition: background var(--i-dur-fast, 120ms) var(--i-ease-out, ease);
}
#app-root button.ptrRun:hover:not([disabled]) {
  background: color-mix(in srgb, var(--i-orchid) 22%, transparent);
}
#app-root button.ptrRun[disabled] {
  cursor: progress;
  opacity: 0.6;
  color: var(--i-ink-3);
  border-color: var(--i-hair-strong);
  background: var(--i-control-bg);
}

/* ==========================================================================
   11 — LEGAL TEXT
   --------------------------------------------------------------------------
   A licence notice must be reproducible verbatim, so the newlines are real
   and `pre-wrap` keeps them while still wrapping long lines. `pre` without
   wrapping would push a 400-character warranty disclaimer off the side of the
   page, and pages.css hides horizontal overflow on <body>, so it would be
   silently unreadable rather than obviously broken.
   ========================================================================== */

#app-root .ptrLegalHead {
  margin: 22px 0 8px;
  font-size: var(--i-t-sm);
  letter-spacing: var(--i-track-label);
  text-transform: uppercase;
  color: var(--i-ink-3);
  font-weight: 600;
}

#app-root .ptrLegal {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-card);
  background: var(--i-surface-2);
  color: var(--i-ink-2);
  font-family: var(--oo-font-data);
  font-size: var(--i-t-xs);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
}

/* The 36 Feather-derived icon names and the seven font filenames. Chips
   rather than a list: the set matters more than the order. */
#app-root .ptrIcons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

#app-root .ptrIconName {
  font-family: var(--oo-font-data);
  font-size: var(--i-t-xs);
  color: var(--i-ink-3);
  background: var(--i-surface-3);
  border: 1px solid var(--i-hair);
  border-radius: var(--i-r-chip);
  padding: 2px 8px;
}

/* ==========================================================================
   12 — TABLE FIT
   --------------------------------------------------------------------------
   The tables here carry no class so instrument.css styles them. What it does
   not know is that several columns hold long prose (a limitation, a licence
   sentence) beside short ones (a badge, a latency). Left to itself the prose
   column collapses. These minimums apply only inside a pk-scroll-x wrapper on
   a trust page, so no other table is affected.
   ========================================================================== */

#app-root .ptrPage .pk-scroll-x table {
  min-width: 640px;
}

#app-root .ptrPage .pk-scroll-x td {
  vertical-align: top;
}

/* The last column of every table on these pages is the explanation column. */
#app-root .ptrPage .pk-scroll-x td:last-child {
  min-width: 260px;
  color: var(--i-ink-2);
}

@media (max-width: 700px) {
  #app-root .ptrPage .pk-scroll-x table { min-width: 560px; }
}