/* page-trust.css: Plant Toolbox trust (wrapper #p-trust).
   Generated by .plans/site-overhaul/tools/port.py from ptb-site-overhaul-src/css/p-trust.css.
   Production state: P1 light ("Light steel") only, review flags and mockup chrome removed. Loaded after site.css. */

/* ==== p-trust.css ==== */
/* ==========================================================================
   p-trust.css · the Trust inner page (#p-trust). Every selector starts with #p-trust.
   Ported from the Ryca trust page (trust grid, record lines, ledgers, CTA row) and extended for PTB with
   a hero isolation figure (#pt-iso, motion in trust.js §1), six two-column facts (2026-10-27,
   the old Audit section folded into fact 6), the data path as one track per path (trust.js §3), the access level page (.app--settings, D66) and the "Your systems" ledger with the integration cards (§8). The connectivity ladder moved to /connect (page-connect.css, 2026-10-13); §7 AI governance (the harness console)
   moved to /ai with its rules (page-ai.css, 2026-10-31, R2·10).

   Grounds: header and facts on --bg · data path surface · access surface ·
   your systems surface · closing band (navy, site.css §24a). Panels take the opposite tone of their section.

   State (no script; every alternative shares one grid cell or keeps its box, so heights never jump):
     name pt-path  #pt-path-sig (default) | #pt-path-plc | #pt-path-man | #pt-path-out
       shows that path's track only (one .pt-track per path), its stations fading in; from 1100 its detail line
       shows the hovered or focused station, else the first (trust.js §3 advances it and moves a dot).
     name pt-al    #pt-al-op | #pt-al-lead (default) | #pt-al-maint | #pt-al-admin (the demo control above the frame)
       swaps the level name (.pt-lv--<level>) in the strip and the H1, sets --app-on on
       each .app-check and the Require 2FA .app-toggle whose data-on lists the level, and swaps their hidden words.
     name pt-mod   #pt-mod-ap | #pt-mod-am (default) | #pt-mod-le | #pt-mod-pe: radios inside the frame's
       label.app-tab (site.css 49i draws the selected tab from :has(input:checked)); shows that module's matrix.
   Phone: the hero drawing scales down while its labels keep their size, and the facts go one a row; below 1100 the data-path track runs top to bottom
   with each step's text beside its station; the two four-choice pickers (.pt-seg--4) become a
   2 × 2 block; the access frame's tabs scroll inside it and each matrix row wraps its five "box + word" pairs;
   the claims ledger
   (no Status column since D69, two columns since R2·C10) puts the topic on its own line above where we stand.
   Height (QA2-05, QA3-03; plan §9: /trust under 8,000 px at 1440 and 15,000 at 390): from 1100 the 64px section step,
   32px under each section head, the pickers' legends inline, the claims
   ledger in two columns and the fact text at 14px; the phone ledgers drop the
   captions their layout already makes plain.
   ========================================================================== */

/* 1 · Page header (owner round 2026-10-27, round 2): the copy on the left (the two CTAs and the as-of line went with
   R2·12–13, 2026-10-31); on the right
   the isolation figure (#pt-iso), not the data path (#pt-path draws that). One light isometric SVG (viewBox 0 -90 520 430):
   a faint tile grid and quiet outline blocks (other customers) fading out from the centre; your plant's block raised,
   lit blue with a lock; four line-art sources (Plant 1, Plant 2, Planning, Distribution) each send a thin dotted line
   that merges into one trunk (one TLS tag) down to the lock. No dark fills, no nested boxes. HTML labels sit over the
   SVG at viewBox percentages (x / 520, (y + 90) / 430), so they keep a readable size at every width; the caption row
   names the three claims. Motion (trust.js §1 adds .is-live while the figure is on screen): one packet per source,
   staggered by 1.1 s on a 4.4 s lap, all landing on the block; each landing pulses the tile's footprint (.is-on), lights the next key (.is-hit) and ticks the log
   claim (.is-tick). Reduced motion: still. Below 1024 the figure follows the copy. */
#p-trust .pt-ico { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#p-trust .pt-iso { container: pt-iso / inline-size; max-width: 560px; margin-inline: 0; margin-bottom: 0; }
#p-trust .pt-iso-art { position: relative; }
#p-trust .pt-iso-svg { display: block; width: 100%; height: auto; overflow: visible; }
#p-trust .pt-iso-grid { fill: none; stroke: var(--tint-border); stroke-width: 1; }
#p-trust .pt-iso-q polygon, #p-trust .pt-iso-you polygon { stroke-linejoin: round; }
#p-trust .pt-iso-q polygon { stroke: var(--meter-track); stroke-width: 1; }
#p-trust .pt-iso-q .pt-iso-t { fill: var(--surface); }
#p-trust .pt-iso-q .pt-iso-l { fill: var(--bg-subtle); }
#p-trust .pt-iso-q .pt-iso-r { fill: var(--neutral-fill); }
#p-trust .pt-iso-you polygon { stroke: var(--teal); stroke-width: 1.25; }
#p-trust .pt-iso-you .pt-iso-t { fill: url(#pt-iso-top); }
#p-trust .pt-iso-you .pt-iso-l { fill: var(--tint-border); }
#p-trust .pt-iso-you .pt-iso-r { fill: var(--tint); }
#p-trust .pt-iso-top-a { stop-color: var(--surface); }
#p-trust .pt-iso-top-b { stop-color: var(--bg-tint); }
#p-trust .pt-iso-glow-a { stop-color: var(--teal); stop-opacity: .26; }
#p-trust .pt-iso-glow-b { stop-color: var(--teal); stop-opacity: 0; }
#p-trust .pt-iso-lock { fill: var(--surface); stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#p-trust .pt-iso-lead { fill: none; stroke: var(--teal); stroke-width: 1; stroke-dasharray: 2 3; opacity: .6; }
#p-trust .pt-iso-dot { fill: var(--teal); }
#p-trust .pt-iso-wire { fill: none; stroke: var(--teal); stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: .5 4.5; opacity: .75; }
#p-trust .pt-iso-pk { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 200; stroke-dashoffset: 9; opacity: 0; }
#p-trust .pt-iso-trunk { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; opacity: .8; }
/* The sources: line-art buildings in the quiet blocks' palette, a touch more ink on their edges. */
#p-trust .pt-iso-b polygon { stroke: color-mix(in srgb, var(--ink-3) 55%, transparent); stroke-width: 1; stroke-linejoin: round; }
#p-trust .pt-iso-b .pt-iso-t { fill: var(--surface); }
#p-trust .pt-iso-b .pt-iso-l { fill: var(--bg-subtle); }
#p-trust .pt-iso-b .pt-iso-r { fill: var(--neutral-fill); }
#p-trust .pt-iso-win { fill: none; stroke: color-mix(in srgb, var(--teal) 50%, transparent); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 3 2.5; }
#p-trust .pt-iso-pulse { fill: none; stroke: var(--teal); stroke-width: 1.25; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* Labels over the drawing. */
#p-trust .pt-iso-k { position: absolute; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
#p-trust .pt-iso-k--src { transform: translateX(-50%); color: var(--ink-2); }
#p-trust .pt-iso-k--p1 { top: 37.7%; left: 7.7%; }
#p-trust .pt-iso-k--p2 { top: 24.7%; left: 22.9%; }
#p-trust .pt-iso-k--plan { top: 7%; left: 38.5%; transform: translateX(-100%); }
#p-trust .pt-iso-k--dist { top: 24.7%; left: 69.2%; }
#p-trust .pt-iso-k--tls { top: 55.8%; right: 57.3%; transform: translateY(-50%); }
#p-trust .pt-iso-k--tls .pt-mono { padding: 1px 6px; font-size: var(--fs-mono-sm); color: var(--teal-ink); background: var(--surface); border: 1px solid var(--tint-border); border-radius: var(--r-control); }
#p-trust .pt-iso-k--other { top: 80%; left: 18.8%; transform: translateX(-50%); font-weight: 500; }
#p-trust .pt-iso-keys {
  position: absolute;
  top: 69.8%;
  left: 61.9%;
  display: grid;
  gap: 3px;
  padding: 4px 0 4px 10px;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border-left: 1px solid var(--teal);
  transform: translateY(-50%);
}
#p-trust .pt-iso-you-k { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--teal-ink); }
#p-trust .pt-iso-keys ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
#p-trust .pt-iso-keys li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; transition: color 400ms ease-out; }
#p-trust .pt-iso-keys li::before { content: ""; flex: none; width: 5px; height: 5px; border: 1px solid var(--teal); border-radius: 1px; transform: rotate(45deg); transition: background-color 400ms ease-out; }
#p-trust .pt-iso-keys li.is-hit { color: var(--ink); }
#p-trust .pt-iso-keys li.is-hit::before { background: var(--teal); }
/* The three claims under the drawing: plain words with icons, no pills. */
#p-trust .pt-iso-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
#p-trust .pt-iso-cap > span:not(.visually-hidden) { display: inline-flex; align-items: center; gap: 6px; }
#p-trust .pt-iso-cap .icon { color: var(--teal-ink); transition: color 300ms ease-out; }
#p-trust .pt-iso-cap-log.is-tick .icon { color: var(--ok-ink); }
@keyframes pt-iso-pk {
  0% { opacity: 0; stroke-dashoffset: 9; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -100; }
}
@keyframes pt-iso-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: no-preference) {
  #p-trust .pt-iso.is-live .pt-iso-pk { animation: pt-iso-pk 4.4s cubic-bezier(.45, 0, .4, 1) infinite; }
  #p-trust .pt-iso.is-live .pt-iso-pk--1 { animation-delay: -3.3s; }
  #p-trust .pt-iso.is-live .pt-iso-pk--2 { animation-delay: -1.1s; }
  #p-trust .pt-iso.is-live .pt-iso-pk--3 { animation-delay: -2.2s; }
  #p-trust .pt-iso.is-live .pt-iso-pulse.is-on { animation: pt-iso-pulse 1.1s ease-out; }
}
/* A narrow figure (phone, 1024): the labels step down a size so the key list keeps one line per key. */
@container pt-iso (max-width: 419px) {
  #p-trust .pt-iso-k { font-size: 11px; }
  #p-trust .pt-iso-you-k { font-size: 12px; }
  #p-trust .pt-iso-keys { gap: 2px; padding-left: 8px; }
  #p-trust .pt-iso-keys li { gap: 6px; font-size: 11.5px; }
  #p-trust .pt-iso-cap { gap: var(--s-2) var(--s-4); font-size: 12px; }
}
/* From 1024 the short hero copy (eyebrow, h1, lead) centres on the figure (R2·12–14), Trust only. */
@media (min-width: 1024px) {
  #p-trust .pt-head .page-header-copy { align-self: center; }
}

/* Shared bits ------------------------------------------------------------------------------------ */
#p-trust .pt-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
#p-trust .pt-card-title { margin-right: auto; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ink); }
/* Second line of a card head: the source screen and a short count. */
#p-trust .pt-card-meta { display: flex; flex-wrap: wrap; flex-basis: 100%; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
#p-trust .pt-topic { font-weight: 600; }
#p-trust .pt-topic .cell-sub { font-weight: 400; }
/* D70 sweep: mono marks instrument values only, and only through this inline span (it keeps its line's colour and
   weight): the codes us-east-1 and TLS 1.2+, clock times (06:41:52), ids (WO-5527, #4187), plus the step badges
   below. Labels, names, table words and sentences are sans. Nothing inside an .app frame takes it. */
#p-trust .pt-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
#p-trust .pt-nw { white-space: nowrap; }

/* Segmented pickers: the labels sit in a flex row that wraps, so whitespace never opens gaps.
   Below 720px each segment grows to fill its line. */
#p-trust .pt-seg { display: flex; flex-wrap: wrap; row-gap: var(--s-2); }
#p-trust .pt-seg label { margin-bottom: 0; }
@media (max-width: 719px) {
  #p-trust .pt-seg label { flex: 1 1 auto; min-width: 0; }
  #p-trust .pt-seg span { width: 100%; justify-content: center; padding: 0 12px; white-space: nowrap; }
  /* Four choices: a joined 2 × 2 block instead of three plus one orphan. */
  #p-trust .pt-seg--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
  #p-trust .pt-seg--4 label span { margin-left: 0; border-radius: 0; }
  #p-trust .pt-seg--4 label:nth-child(even) span { width: calc(100% + 1px); margin-left: -1px; }
  #p-trust .pt-seg--4 label:nth-child(n+3) span { margin-top: -1px; }
  #p-trust .pt-seg--4 label:nth-child(1) span { border-top-left-radius: var(--r-control); }
  #p-trust .pt-seg--4 label:nth-child(2) span { border-top-right-radius: var(--r-control); }
  #p-trust .pt-seg--4 label:nth-child(3) span { border-bottom-left-radius: var(--r-control); }
  #p-trust .pt-seg--4 label:nth-child(4) span { border-bottom-right-radius: var(--r-control); }
  #p-trust .pt-seg--4 input:checked + span { position: relative; z-index: 1; }
}

/* Page rhythm (QA2-05, QA3-03): this long fact page takes the 64px step of the section rhythm (64/96/120) from 1100,
   where the site default is 120, and each section head sits 32px above its content. (QA3-03 asked for 72-80px; that is
   off the 64/96/120 rhythm of plan §10, and 64 is the step that brings the page under 8,000px.) Only the inner .sec
   sections read --section-pad; the header keeps its 96/64.
   The pickers (data path, access level) put their legend on the segments' line from 1100. */
@media (min-width: 1100px) {
  #p-trust { --section-pad: var(--s-8); }
  #p-trust .section-head { margin-bottom: var(--s-6); }
  #p-trust .pt-pick legend { float: left; margin: 0 var(--s-4) 0 0; line-height: 44px; }
}

/* 2 · The facts (owner round 2026-10-27): six facts, two a row from 900 (one below). Since R2·15e (2026-10-31) each is
   its own white card on the page's gray, 16px apart below 900 and 24px from 900 (the site's card rhythm), with the same
   hairline border and card radius the shared sheet had. Each fact: a tinted icon tile and the heading, one sentence and
   a spec list (label: value rows, label beside value once the fact is 300px wide); no link down (R2·15d). Fact 6 (System logs, #pt-f-logs) took over the Audit
   section's facts (what a row records, archive not delete, what it does not record). */
#p-trust .pt-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { #p-trust .pt-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
#p-trust .pt-fact { container: pt-fact / inline-size; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
@media (min-width: 1100px) { #p-trust .pt-fact { padding: var(--s-6); } }
@media (max-width: 559px) { #p-trust .pt-fact { padding: var(--s-4); } }
#p-trust .pt-fact-h { display: flex; align-items: center; gap: var(--s-3); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#p-trust .pt-fact-ico { display: grid; flex: none; place-items: center; width: 36px; height: 36px; color: var(--teal-ink); background: var(--tint); border: 1px solid var(--tint-border); border-radius: var(--r-decision); }
#p-trust .pt-fact-ico .icon { width: 18px; height: 18px; }
#p-trust .pt-fact-p { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#p-trust .pt-spec { display: grid; margin: 0; border-top: 1px solid var(--hairline); }
#p-trust .pt-spec > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px var(--s-4); padding-block: 9px; border-bottom: 1px solid var(--hairline); }
#p-trust .pt-spec dt { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ink-3); }
#p-trust .pt-spec dd { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
@container pt-fact (min-width: 300px) { #p-trust .pt-spec > div { grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; } }
@container pt-fact (min-width: 400px) { #p-trust .pt-spec > div { grid-template-columns: 112px minmax(0, 1fr); } }

/* 3 · Data path (owner round 2026-10-27, second pass: "way too complicated"). Only the chosen path is drawn: one
   track of its 5 to 9 stations in step order, over quiet zone bands (On the line · At the edge · AWS · private network ·
   Where it shows; a zone the path skips is not drawn). A station is its icon tile, its step number and its name; a
   per-customer station carries a faint bar, keyed once in the AWS band ("Kept apart for each customer"). The step
   text lives in the station (03-path.php), so there is no separate step list:
     from 1100 the track runs left to right and one detail line under it shows a single step: the hovered or focused
     station, else the first; with trust.js §3 it advances on its own (paused on hover or focus, off under reduced
     motion) and a dot travels the line to it.
     below 1100 the track runs top to bottom and every station shows its step text beside it.
   The four tracks share one grid cell (heights never jump); :has() on the picker shows the chosen one, and its
   stations fade in one after another (none under reduced motion). */
#p-trust .pt-pick { margin-bottom: var(--s-5); }
#p-trust .pt-flow {
  min-width: 0;
  margin: 0;
  padding: var(--s-4) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
@media (min-width: 720px) { #p-trust .pt-flow { padding: var(--s-5); } }
#p-trust .pt-tracks { display: grid; min-width: 0; }
#p-trust .pt-track { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
#p-trust .pt-track--sig { visibility: visible; }
#p-trust .pt-path:has(#pt-path-sig:not(:checked)) .pt-track--sig { visibility: hidden; }
#p-trust .pt-path:has(#pt-path-plc:checked) .pt-track--plc,
#p-trust .pt-path:has(#pt-path-man:checked) .pt-track--man,
#p-trust .pt-path:has(#pt-path-out:checked) .pt-track--out { visibility: visible; }
#p-trust .pt-track-name { margin-bottom: var(--s-3); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
#p-trust .pt-track-count { font-weight: 400; color: var(--ink-3); }

/* Zone bands: quiet fills, the AWS band a dashed accent edge (the private-network boundary). Every band keeps a
   1.5px edge, so the stations sit at the same height in each. */
#p-trust .pt-zones { position: relative; display: grid; gap: 6px; min-width: 0; }
#p-trust .pt-zone {
  min-width: 0;
  padding: 10px 12px 14px;
  background: color-mix(in srgb, var(--bg-subtle) 55%, var(--surface));
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
}
#p-trust .pt-zone--aws {
  background: color-mix(in srgb, var(--tint) 60%, var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--teal) 55%, transparent);
}
/* D70: zone labels are sans, 12px 600, sentence case. */
#p-trust .pt-zone-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-height: 20px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-3);
}
#p-trust .pt-zone--aws .pt-zone-label { color: var(--teal-ink); }
#p-trust .pt-zone-label .pt-ico { width: 13px; height: 13px; margin-right: -8px; }
#p-trust .pt-own-key, #p-trust .pt-st-own { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ink-3); }
#p-trust .pt-own-key::before, #p-trust .pt-st--own .pt-st-btn::after {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--teal) 40%, transparent);
}
#p-trust .pt-sts { display: grid; gap: var(--s-4); min-width: 0; }

/* A station: the tile (its icon, or two for a shared step, and the step number on its corner), then the name. */
#p-trust .pt-st { min-width: 0; }
#p-trust .pt-st-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
#p-trust .pt-st-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
#p-trust .pt-st-tile {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--teal-ink);
  background: var(--surface);
  border: 1.5px solid var(--teal);
  border-radius: 10px;
  transition: background-color var(--t-fast) ease-out, color var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out;
}
#p-trust .pt-st-tile .pt-ico { width: 18px; height: 18px; }
/* Mono (D70): the step number is a value. */
#p-trust .pt-st-n {
  position: absolute;
  top: -9px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  color: var(--teal-ink);
  background: var(--surface);
  border: 1px solid var(--teal);
  border-radius: 9px;
}
#p-trust .pt-st-name { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#p-trust .pt-st--own .pt-st-btn::after { flex: none; display: none; }

/* The step text. Below 1100 it sits beside the station, under its name; the name and number it repeats are there
   for the detail line only. */
#p-trust .pt-st-detail { min-width: 0; margin: -6px 0 0 52px; }
#p-trust .pt-st-detail p { margin: 0; }
#p-trust .pt-st-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
#p-trust .pt-st-dn, #p-trust .pt-st-t { display: none; }
#p-trust .pt-st-sub, #p-trust .pt-st-own { font-size: 13px; line-height: 1.45; color: var(--ink-3); }
#p-trust .pt-st-own::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--teal) 40%, transparent); }
#p-trust .pt-st-d { margin-top: 2px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
#p-trust .pt-st-x { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; }

/* The line: one 2px accent rule through the tiles' centres, under the tiles. Stacked: down the tile column. */
#p-trust .pt-zones::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 58px;
  bottom: 40px;
  left: 33px;
  width: 2px;
  background: color-mix(in srgb, var(--teal) 55%, transparent);
  pointer-events: none;
}
#p-trust .pt-dot { display: none; }
#p-trust .pt-zone > .pt-zone-label { padding-left: 52px; }

/* Stations arrive one after another when their path is picked (the button moves, not the li, so the detail line
   keeps the track as its containing block). */
@keyframes pt-st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  #p-trust .pt-path:has(#pt-path-sig:checked) .pt-track--sig .pt-st-btn,
  #p-trust .pt-path:has(#pt-path-plc:checked) .pt-track--plc .pt-st-btn,
  #p-trust .pt-path:has(#pt-path-man:checked) .pt-track--man .pt-st-btn,
  #p-trust .pt-path:has(#pt-path-out:checked) .pt-track--out .pt-st-btn { animation: pt-st-in 320ms ease-out calc(var(--i) * 40ms) both; }
}

/* 1100px: one row. The bands share the width by their station count (--k of --n), each station a column; the line
   runs from the first tile's centre to the last; one detail line under the track. */
@media (min-width: 1100px) {
  #p-trust .pt-track { padding-bottom: 118px; }
  #p-trust .pt-zones { display: flex; gap: 4px; }
  #p-trust .pt-zone { flex: var(--k) 1 0; padding: 10px 0 14px; }
  #p-trust .pt-zone > .pt-zone-label { flex-wrap: nowrap; padding: 0 12px; overflow: hidden; white-space: nowrap; }
  #p-trust .pt-sts { grid-template-columns: repeat(var(--k), minmax(0, 1fr)); gap: 0; }
  #p-trust .pt-st-btn { flex-direction: column; gap: 8px; padding: 0 6px; text-align: center; }
  #p-trust .pt-st--own .pt-st-btn::after { display: block; }
  #p-trust .pt-st-name { font-size: 13px; }
  #p-trust .pt-zones::before {
    top: 58px;
    bottom: auto;
    left: calc(50% / var(--n));
    right: calc(50% / var(--n));
    width: auto;
    height: 2px;
  }
  /* The step on show: its tile fills, and its text takes the detail line, a caret under its station. */
  #p-trust .pt-st-detail {
    position: absolute;
    top: calc(100% + 18px);
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #p-trust .pt-flow:not(.is-live) .pt-track:not(:has(.pt-st:is(:hover, :focus-within))) .pt-st--first .pt-st-detail,
  #p-trust .pt-flow:not(.is-live) .pt-st:is(:hover, :focus-within) .pt-st-detail,
  #p-trust .pt-flow.is-live .pt-st.is-cur .pt-st-detail {
    right: 0;
    width: auto;
    height: 100px;
    padding: 14px 20px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    background: var(--surface);
    border: 1px solid var(--tint-border);
    border-radius: var(--r-control);
  }
  #p-trust .pt-st-detail::before {
    content: "";
    position: absolute;
    top: -7px;
    left: calc((var(--i) + 0.5) / var(--n) * 100%);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--surface);
    border-top: 1px solid var(--tint-border);
    border-left: 1px solid var(--tint-border);
    transform: rotate(45deg);
  }
  #p-trust .pt-flow:not(.is-live) .pt-track:not(:has(.pt-st:is(:hover, :focus-within))) .pt-st--first .pt-st-tile,
  #p-trust .pt-flow:not(.is-live) .pt-st:is(:hover, :focus-within) .pt-st-tile,
  #p-trust .pt-flow.is-live .pt-st.is-cur .pt-st-tile {
    color: var(--white);
    background: var(--teal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent);
  }
  #p-trust .pt-st-dn, #p-trust .pt-st-t { display: inline; }
  #p-trust .pt-st-dn {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--white);
    background: var(--teal);
    border-radius: 9px;
  }
  #p-trust .pt-st-t { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
  #p-trust .pt-st-detail p { max-width: none; }
  #p-trust .pt-st-d { margin-top: 4px; }
  /* trust.js §3: the dot travels the line to the step on show; it passes under the tiles. */
  #p-trust .pt-flow.is-live .pt-dot {
    position: absolute;
    z-index: 1;
    top: 54px;
    left: calc((var(--at, 0) + 0.5) / var(--n) * 100%);
    display: block;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent);
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  #p-trust .pt-flow.is-live .pt-dot { transition: left 900ms cubic-bezier(0.4, 0, 0.2, 1); }
}
#p-trust .pt-path .caption { margin-top: var(--s-4); }
/* R2·16b (2026-10-31): the timings caption went (each station and step carries its own "about"); only the levels link is left. */
@media (min-width: 1100px) { #p-trust .pt-path .pt-pick { margin-bottom: var(--s-4); } }

/* 5 · Identity and access (D66): the level picker, the User Access Levels page in .app--settings, the sign-in list.
   The frame uses the shared parts (site.css 49b-49i, 49u, 49w): strip, PageHeader title over "Back" with a blue Save,
   the Require 2FA toggle above the matrix, module tabs with the --app-primary underline,
   and one .app-matrix per module, stacked in one cell so a tab switch never changes the height. Below a 520px matrix
   (site.css 49u) each row wraps its five "box + word" pairs; below 720 the tabs scroll inside the frame. */
#p-trust .pt-access-grid { display: grid; gap: var(--s-7); }
#p-trust .pt-al { display: grid; gap: var(--s-4); min-width: 0; }
#p-trust .pt-al .pt-pick { margin: 0; }
#p-trust .pt-al-fig { display: grid; min-width: 0; margin: 0; }
/* Words for assistive tech only (allowed / not allowed / not used here, on / off). */
#p-trust :is(.pt-y, .pt-n, .pt-w) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The level name: one span per level, the picked one shows. Line lead by default. */
#p-trust .pt-lv { display: none; }
#p-trust .pt-lv--lead { display: inline; }
#p-trust .pt-access:has(#pt-al-lead:not(:checked)) .pt-lv--lead { display: none; }
#p-trust .pt-access:has(#pt-al-op:checked) .pt-lv--op,
#p-trust .pt-access:has(#pt-al-lead:checked) .pt-lv--lead,
#p-trust .pt-access:has(#pt-al-maint:checked) .pt-lv--maint,
#p-trust .pt-access:has(#pt-al-admin:checked) .pt-lv--admin { display: inline; }
/* The checkboxes and the Require 2FA toggle read --app-on (site.css 49u); the level sets it on the part. */
#p-trust .pt-access:has(#pt-al-op:checked) [data-on~="op"] > .app-check,
#p-trust .pt-access:has(#pt-al-lead:checked) [data-on~="lead"] > .app-check,
#p-trust .pt-access:has(#pt-al-maint:checked) [data-on~="maint"] > .app-check,
#p-trust .pt-access:has(#pt-al-admin:checked) [data-on~="admin"] > .app-check,
#p-trust .pt-access:has(#pt-al-op:checked) .pt-al-toggle[data-on~="op"],
#p-trust .pt-access:has(#pt-al-lead:checked) .pt-al-toggle[data-on~="lead"],
#p-trust .pt-access:has(#pt-al-maint:checked) .pt-al-toggle[data-on~="maint"],
#p-trust .pt-access:has(#pt-al-admin:checked) .pt-al-toggle[data-on~="admin"] { --app-on: 1; }
#p-trust .pt-y, #p-trust .pt-2fa-y { display: none; }
#p-trust .pt-access:has(#pt-al-op:checked) [data-on~="op"] > .pt-y,
#p-trust .pt-access:has(#pt-al-lead:checked) [data-on~="lead"] > .pt-y,
#p-trust .pt-access:has(#pt-al-maint:checked) [data-on~="maint"] > .pt-y,
#p-trust .pt-access:has(#pt-al-admin:checked) [data-on~="admin"] > .pt-y { display: block; }
#p-trust .pt-access:has(#pt-al-op:checked) [data-on~="op"] > .pt-n,
#p-trust .pt-access:has(#pt-al-lead:checked) [data-on~="lead"] > .pt-n,
#p-trust .pt-access:has(#pt-al-maint:checked) [data-on~="maint"] > .pt-n,
#p-trust .pt-access:has(#pt-al-admin:checked) [data-on~="admin"] > .pt-n { display: none; }
#p-trust .pt-access:has(#pt-al-op:checked) .pt-al-toggle[data-on~="op"] + .pt-w .pt-2fa-y,
#p-trust .pt-access:has(#pt-al-lead:checked) .pt-al-toggle[data-on~="lead"] + .pt-w .pt-2fa-y,
#p-trust .pt-access:has(#pt-al-maint:checked) .pt-al-toggle[data-on~="maint"] + .pt-w .pt-2fa-y,
#p-trust .pt-access:has(#pt-al-admin:checked) .pt-al-toggle[data-on~="admin"] + .pt-w .pt-2fa-y { display: inline; }
#p-trust .pt-access:has(#pt-al-op:checked) .pt-al-toggle[data-on~="op"] + .pt-w .pt-2fa-n,
#p-trust .pt-access:has(#pt-al-lead:checked) .pt-al-toggle[data-on~="lead"] + .pt-w .pt-2fa-n,
#p-trust .pt-access:has(#pt-al-maint:checked) .pt-al-toggle[data-on~="maint"] + .pt-w .pt-2fa-n,
#p-trust .pt-access:has(#pt-al-admin:checked) .pt-al-toggle[data-on~="admin"] + .pt-w .pt-2fa-n { display: none; }
/* The product's disabled bits (opacity .4): below the first permission a sub-module uses (.pt-fix, still filled by
   the cascade) or above the last (.pt-na, always empty). */
#p-trust :is(.pt-fix, .pt-na) > .app-check { opacity: 0.4; }
#p-trust .pt-na > .app-matrix-k { color: var(--app-mute); }
#p-trust .pt-al-2fa { font-weight: 700; }
/* Under a 600px strip (site.css 49b container app-bar) the crumb drops its path, so the level name stays in view. */
@container app-bar (max-width: 599px) { #p-trust .pt-crumb-pre { display: none; } }
#p-trust .pt-al-tabs { margin-bottom: -8px; }
#p-trust .pt-al-tabs .app-tab { padding-inline: 10px; }
#p-trust .pt-al-panes { min-width: 0; }
#p-trust .pt-al-pane { visibility: hidden; }
#p-trust .pt-al-pane--am { visibility: visible; }
#p-trust .pt-access:has(#pt-mod-am:not(:checked)) .pt-al-pane--am { visibility: hidden; }
#p-trust .pt-access:has(#pt-mod-ap:checked) .pt-al-pane--ap,
#p-trust .pt-access:has(#pt-mod-am:checked) .pt-al-pane--am,
#p-trust .pt-access:has(#pt-mod-le:checked) .pt-al-pane--le,
#p-trust .pt-access:has(#pt-mod-pe:checked) .pt-al-pane--pe { visibility: visible; }
#p-trust .pt-signin { display: grid; gap: var(--s-4); min-width: 0; }
#p-trust .pt-signin h3 { font-size: 18px; line-height: 1.3; }
#p-trust .pt-signin .dl-value { font-size: 15px; }
@media (min-width: 1024px) {
  #p-trust .pt-access-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
/* QA3-03: the sign-in list already sits beside the frame (7/5 from 1024); from 1100 its values are 14px and its rows
   10px (as the AI rules were), so it ends close to the frame's caption instead of about 115px below it. */
@media (min-width: 1100px) {
  #p-trust .pt-signin .dl-value { font-size: 14px; }
  #p-trust .pt-signin .dl-row { padding-block: 10px; }
}

/* §8's ledger rows top-align (kept from the old shared rule). Phone: the stacked access blocks step 32px apart. */
#p-trust .pt-claims-ledger .ledger-row { align-items: start; }
@media (max-width: 719px) {
  #p-trust .pt-access-grid { gap: var(--s-6); }
}

/* 8 · Your systems (owner round 2026-10-27; renamed from "Fit and limits" by R2·18, 2026-10-31): the ledger, then the
   two integration cards (#pt-erp, the old §9), in one section on the surface ground. */
/* D69, R2·C10: two columns (Topic, Where we stand); the "Outside scope today" column went to the parking lot
   (content/views/trust/.parking-lot/README.md). A row's status word ("On request.", "Offered.", "AWS only.",
   "Fine-grained control.", "Scoped projects.") opens its "Where we stand" cell in bold; no coloured tag. */
#p-trust .pt-claims-ledger { --cols: minmax(0, 0.9fr) minmax(0, 3.7fr); }
#p-trust .pt-claims-ledger .ledger-cell b { font-weight: 600; color: var(--ink); }
/* Phone: the topic takes the top line and where we stand follows it with no caption (its status word leads, D69). */
/* QA3-03, from 1100: two columns of rows, Security documentation to Backups on the left and AI data use to Integrations on the
   right, at 14px. Each row is the topic beside where we stand; the column heads stay in the accessibility tree,
   visually hidden. Keep the nine rows in order: the 5 + 4 split and nth-child(7) rest on it. */
@media (min-width: 1100px) {
  #p-trust .pt-claims-ledger { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: var(--s-7); }
  #p-trust .pt-claims-ledger .ledger-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #p-trust .pt-claims-ledger .ledger-row { grid-column: auto; grid-template-columns: 128px minmax(0, 1fr); gap: 4px var(--s-4); align-content: start; }
  #p-trust .pt-claims-ledger .ledger-row:nth-child(7) { border-top: 0; }
  #p-trust .pt-claims-ledger .ledger-cell { font-size: 14px; }
  #p-trust .pt-claims-ledger .ledger-cell:nth-child(1) { font-size: 15px; }
}
@media (max-width: 767px) {
  #p-trust .pt-claims-ledger .ledger-cell:nth-child(1) { font-size: 16px; }
  #p-trust .pt-claims-ledger .ledger-cell:is(:nth-child(1), :nth-child(2))::before { content: none; }
}

/* The integration cards: a short lead line, then the two cards, 48px under the ledger. */
#p-trust .pt-erp { margin-top: var(--s-7); }
#p-trust .pt-erp-lead { margin-bottom: var(--s-4); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
#p-trust .pt-erp-grid { display: grid; gap: var(--s-4); }
#p-trust .pt-erp-card { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; background: var(--bg); }
#p-trust .pt-erp-card h3 { font-size: 18px; line-height: 1.3; }
/* D69: the tier label is a sans h4 after the card title (h2 > h3 > h4 in order), shown above it. */
#p-trust .pt-tier { order: -1; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-3); }
#p-trust .pt-list li {
  padding-block: var(--s-2);
  border-top: 1px solid var(--hairline);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}
#p-trust .pt-list b { color: var(--ink); }
@media (min-width: 768px) { #p-trust .pt-erp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 10 · Closing band (#pt-cta) ----------------------------------------------------------------------------
   The page's last section is the site's closing band (Main::closingBand(), site.css §24a; 2026-10-28). No page rules. */

/* Forced colors: boxes keep a solid edge, lit nodes use system colors. The frames' parts are covered by site.css 49x;
   the greyed checkboxes keep their glyph and edge there. -------------------------------------------------------- */
@media (forced-colors: active) {
  #p-trust .pt-flow, #p-trust .pt-zone, #p-trust .pt-st-tile, #p-trust .pt-st-detail { border: 1px solid; }
  #p-trust .pt-zone--aws { border-style: dashed; }
  #p-trust .pt-zones::before, #p-trust .pt-own-key::before, #p-trust .pt-st-own::before, #p-trust .pt-st--own .pt-st-btn::after { forced-color-adjust: none; background: CanvasText; }
  #p-trust .pt-st-n, #p-trust .pt-st-dn, #p-trust .pt-flow.is-live .pt-dot { forced-color-adjust: none; color: HighlightText; background: Highlight; border-color: Highlight; }
  #p-trust .pt-flow.is-live .pt-st.is-cur .pt-st-tile,
  #p-trust .pt-flow:not(.is-live) .pt-st:is(:hover, :focus-within) .pt-st-tile { outline: 2px solid Highlight; outline-offset: 2px; }
  #p-trust .pt-iso-you polygon, #p-trust .pt-iso-lock, #p-trust .pt-iso-wire { stroke: Highlight; }
  #p-trust .pt-iso-keys li.is-hit::before { forced-color-adjust: none; background: Highlight; }
}