/* ComplyChat - the showcase stages (T4).
   ------------------------------------------------------------------------------
   Loaded by index.html and by how-it-works.html, in both cases after site.css (and
   on index.html before chat-widget.css). It was index.html only until the 2026-08-22
   rebalance moved four of the seven showcases onto how-it-works.html: the homepage
   is the paid-traffic landing page and the depth belongs on the page an evaluator
   opens on purpose. Four stages are on index.html now and three on how-it-works.html,
   and the file is identical for both. Everything here is namespaced .sc-* per the
   Component Contract §4.10, so this file and site.css can never collide on a name.
   T1 owns the shell (.showcase, -head, -title, -lead, -nav, -tab, -stage, -panel,
   -cap, -foot); this file owns the seven stages that sit inside it, plus the one
   rule at the foot that gives how-it-works.html's contents list its band.

   THE NO-JS CONTRACT, which is the reason this file is shaped the way it is.
   Every panel, every fold and every diagram state that a reader could otherwise
   lose is VISIBLE BY DEFAULT. Nothing here declares `display: none` or
   `opacity: 0` on content except inside a selector that begins
   `.showcase[data-showcase="ready"]`, and that attribute is set by showcase.js.
   So the only state in which content is hidden is the one state guaranteed to be
   able to show it again - the same gating idea site.css §10 uses for .reveal, for
   the same reason: a content-loss bug that nothing turns red for is the expensive
   kind. With JavaScript off the page renders every tree, every ledger row, every
   beat of the calls strip, both erasure states and the full transparency notice,
   in document order.

   MOTION. This file animates nothing. There is not one @keyframes and not one
   transition on a layout property; the only transitions are colour and border
   colour on hover, which rest at their authored visible state. Nothing is
   stranded at opacity 0. The reduced-motion block at the foot is therefore belt
   and braces rather than a repair, and it is written anyway because two defences
   is the right number for a content-loss bug.

   COLOUR. site.css keeps zero raw hex outside :root and this file keeps the same
   discipline: every literal below is declared once, in the .sc scope block, and
   used through a token after that. Nine of them mirror the member app's own chat
   skin so the F6 replica is a replica and not an impression - they are the same
   values chat-widget.css already uses for the hero demo (its .ccw-* family), and
   if the app's skin moves, both files move together.
   --------------------------------------------------------------------------- */

.sc {
  /* The member app's chat skin, mirrored from chat-widget.css .ccw-* so the two
     replicas on this page cannot drift apart. */
  --sc-wall: #efeae1;          /* wallpaper ground behind /wallpaper-chat.jpg   */
  --sc-bub-in: #ffffff;        /* an inbound bubble                             */
  --sc-bub-out: #fde7e5;       /* an outbound bubble                            */
  --sc-msg-ink: #1c1b1f;       /* message text                                  */
  --sc-msg-meta: #5b5960;      /* timestamps                                    */
  --sc-tick: #8b9aa6;          /* delivered                                     */
  --sc-tick-read: #1f7fb8;     /* read - the blue tick, and it is load-bearing  */
  --sc-sender: #b3261e;        /* a sender's name inside a bubble               */
  /* The transparency pill: rust type on the app's own notice ground. */
  --sc-pill-bg: rgba(255, 240, 239, 0.95);
  /* The app's go-green, used once, for the beat where recording is live. It is
     never used as small type on cream - only as a solid chip with cream on it. */
  --sc-go: #0d8043;
}

/* ---------------------------------------------------------------------------
   1. LAYOUT - prose beside a stage
   ---------------------------------------------------------------------------
   .sc-split is the showcase equivalent of site.css's .split: the argument on the
   left at a readable measure, the thing it is arguing about on the right. It
   collapses at the same 900px the rest of the site collapses at.
   --------------------------------------------------------------------------- */

.sc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--sp-9);
  align-items: start;
  margin-top: var(--sp-8);
}

.sc-split--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.sc-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  .sc-split,
  .sc-split--wide,
  .sc-split--even { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
}

.sc-prose { max-width: var(--measure); }

/* The gap under the display heading. .sc-split sets its own margin-top for the
   showcases whose heading is followed by the split (01, 02); the five whose
   heading is followed by prose (03-07) had nothing, and a 64px display line sat
   flush against 19px body text at every width. Same value as .sc-split, so the
   two openings measure the same. Adjacent-sibling only: .sc-prose INSIDE a
   .sc-split must not collect the gap twice. */
.band-heading + .sc-prose { margin-top: var(--sp-8); }

.sc-prose p {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.sc-prose p + p { margin-top: var(--sp-5); }

.band--deep .sc-prose p,
.band--deep-rich .sc-prose p { color: rgba(244, 239, 227, 0.8); }

.sc-prose strong { color: var(--ink); }
.band--deep .sc-prose strong,
.band--deep-rich .sc-prose strong { color: var(--cream); }

/* A sentence that is a limit or an aside rather than part of the argument. */
.sc-aside {
  font-size: var(--fs-body-sm) !important;
  color: var(--ink-faded) !important;
  border-left: 2px solid var(--hairline-strong);
  padding-left: var(--sp-4);
}

.band--deep .sc-aside,
.band--deep-rich .sc-aside {
  color: rgba(244, 239, 227, 0.66) !important;
  border-left-color: var(--cream-hairline-strong);
}

.sc-actions { margin-top: var(--sp-6); }

/* The credit line under a showcase title: the verbatim inventory names of the
   rows the section rests on, separated by the site's own middle dot. Mono and
   quiet, because the names are evidence rather than argument. */
.showcase-lead.sc-names {
  font-family: var(--mono);
  font-size: var(--fs-fine);
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-faded);
  max-width: 62ch;
}

.band--deep .showcase-lead.sc-names,
.band--deep-rich .showcase-lead.sc-names { color: rgba(244, 239, 227, 0.62); }

/* Space between two showcases stacked in one band. */
.showcase + .showcase { margin-top: var(--sp-10); }

/* ---------------------------------------------------------------------------
   2. THE JAVASCRIPT GATE
   ---------------------------------------------------------------------------
   Two classes, and between them they are the whole no-JS contract.

   .sc-jsonly  a control that only means something once the script is running -
               the ledger's "alter this row", the erasure diagram's button. It is
               hidden until the script says so, so a reader with JavaScript off is
               never offered a button that does nothing.
   .sc-fold    a panel that the script may collapse. Visible by default; hidden
               ONLY under [data-showcase="ready"] and only when it is not open.

   Both rules fail open. If showcase.js never runs, never loads, or throws before
   init, `ready` is never set, every fold stays open and no dead control appears.
   --------------------------------------------------------------------------- */

.sc-jsonly { display: none; }
.showcase[data-showcase="ready"] .sc-jsonly { display: inline-flex; }

/* The mirror image: a line that explains an interaction the reader is not being
   offered, shown only while the script is absent. */
.showcase[data-showcase="ready"] .sc-nojs { display: none; }

.showcase[data-showcase="ready"] .sc-fold:not(.is-on) { display: none; }
.sc-fold + .sc-fold { margin-top: var(--sp-5); }
.sc-foldcol > .sc-fold:first-child { margin-top: 0; }

/* Screen-reader-only text. There is no such utility in site.css and this file
   needs one for the read-tick label, which is a glyph pair to the eye. */
.sc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   3. THE MONO PANEL - one surface for every artefact this page draws
   ---------------------------------------------------------------------------
   The folder tree, the item record, the ledger, the erasure diagram and the
   transcript are all the same kind of object: a filed artefact, shown as a page.
   One surface, so the page does not acquire five card designs.
   --------------------------------------------------------------------------- */

.sc-panel {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.band--deep .sc-panel,
.band--deep-rich .sc-panel { border-color: transparent; box-shadow: var(--shadow-3); }

.sc-panel-slug {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faded);
}

.sc-panel-slug strong { color: var(--ink); font-weight: 500; }

/* A slug that names a real file or a real folder keeps its own case. The house
   device is an upper-cased mono slug, and it is right for an organisation or a
   library name - but "Conversation 2026-07.txt" and a keyed contact folder are
   NAMES, and shouting them prints something the reader will not find. */
.sc-panel-slug--raw { text-transform: none; letter-spacing: 0.04em; }

.sc-panel-body { padding: var(--sp-4); }

/* Anything set in a fixed-width block scrolls inside its own box rather than
   pushing the page sideways. */
.sc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* A caption or a required qualification under an artefact. Sentence case, not
   the uppercase mono of .showcase-cap and .band-foot: two of the captions this
   page carries are whole sentences that ruling CR-3 and the copy deck require
   word for word, and one of them is a proposed pinned claim. Shouting them would
   be a presentation choice made at the expense of the sentence. */
.sc-cap {
  font-size: var(--fs-fine);
  line-height: var(--lh-body);
  color: var(--ink-faded);
  margin-top: var(--sp-4);
  max-width: 68ch;
}

.band--deep .sc-cap,
.band--deep-rich .sc-cap { color: rgba(244, 239, 227, 0.68); }

.sc-cap strong { color: var(--ink); font-weight: 500; }
.band--deep .sc-cap strong,
.band--deep-rich .sc-cap strong { color: var(--cream); }

.sc-pre {
  font-family: var(--mono);
  font-size: var(--fs-fine);
  line-height: 1.75;
  color: var(--ink-soft);
  white-space: pre;
  margin: 0;
  padding: var(--sp-4);
  min-width: 0;
}

@media (max-width: 560px) {
  .sc-pre { font-size: var(--fs-micro); line-height: 1.8; }
}

/* ---------------------------------------------------------------------------
   4. F1 - THE ARCHIVE TREE
   ---------------------------------------------------------------------------
   Drawn exactly as ruling CR-3 draws it, and no further. Channel folders carry
   the readable name the organisation chose, by design; everything below them is a
   keyed pseudonym. There is no year level anywhere in it, and the only date
   folder is the YYYY-MM month partition under attachments/, calls/ and records/.
   --------------------------------------------------------------------------- */

.sc-tree {
  font-family: var(--mono);
  font-size: var(--fs-fine);
  line-height: 1.85;
  color: var(--ink-soft);
  padding: var(--sp-4);
  white-space: pre;
  min-width: 0;
}

@media (max-width: 560px) {
  .sc-tree { font-size: var(--fs-micro); }
}

/* A folder name that carries a readable display name is the one conscious
   exception in the whole tree, so it is the one thing marked in the drawing. */
.sc-tree-named { color: var(--rust-deep); }
.sc-tree-hash { color: var(--ink-faded); }

/* The two file rows that open a panel. With JavaScript off they render as plain
   filenames, because that is what they are. */
.sc-treefile {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--r-xs);
  padding: 0;
  text-align: left;
  cursor: default;
}

.showcase[data-showcase="ready"] .sc-treefile {
  cursor: pointer;
  color: var(--rust-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) ease;
}

.showcase[data-showcase="ready"] .sc-treefile:hover { color: var(--rust); }
.showcase[data-showcase="ready"] .sc-treefile[aria-expanded="true"] { color: var(--ink); }

/* The per-message item record, as a labelled field list. */
.sc-record {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: 2px var(--sp-4);
  font-family: var(--mono);
  font-size: var(--fs-fine);
  line-height: 1.7;
  padding: var(--sp-4);
  margin: 0;
}

.sc-record dt { color: var(--ink-faded); }
.sc-record dd { color: var(--ink-soft); margin: 0; overflow-wrap: anywhere; }
.sc-record dd span { display: block; }

@media (max-width: 560px) {
  .sc-record { grid-template-columns: minmax(0, 1fr); gap: 0; font-size: var(--fs-micro); }
  .sc-record dt { margin-top: var(--sp-2); }
}

/* ---------------------------------------------------------------------------
   5. F2 - THE ACCESS LEDGER
   ---------------------------------------------------------------------------
   Content-free is load-bearing here: every row is a sequence number, a time, an
   action, an organisation and a fingerprint. There is no message body anywhere in
   this component and there is no place in it to put one.
   --------------------------------------------------------------------------- */

.sc-chain {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--fs-fine);
  letter-spacing: 0.04em;
}

/* The two banner states. Both are in the markup; the verified one is the
   authored default, so a reader with no script sees a verified chain and never a
   broken one. The colour never carries the meaning on its own - the sentence
   does - because the sage green measures 3.61:1 against the panel and this type
   is thirteen pixels. Sage is the dot; the words are ink. */
.sc-chain-ok { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.sc-chain-bad { display: none; color: var(--rust-deep); }
.sc-led.is-on .sc-chain-ok { display: none; }
.sc-led.is-on .sc-chain-bad { display: flex; align-items: center; gap: var(--sp-3); }

.sc-chain-mark {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--r-round);
  background: currentColor;
}

.sc-chain-ok .sc-chain-mark { background: var(--sage); }
.sc-chain-bad .sc-chain-mark { background: var(--rust); }

.sc-led-list { list-style: none; margin: 0; padding: 0; }

.sc-led-list li {
  display: grid;
  grid-template-columns: 3ch 18ch minmax(0, 1fr) 16ch 10ch;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--fs-fine);
  color: var(--ink-soft);
}

.sc-led-list li:first-child { border-top: 0; }
.sc-led-seq { color: var(--ink-faded); }
.sc-led-when { color: var(--ink-faded); white-space: nowrap; }
.sc-led-what { font-family: var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.sc-led-org { color: var(--ink-faded); overflow-wrap: anywhere; }
.sc-led-hash { color: var(--ink-faded); text-align: right; white-space: nowrap; }

@media (max-width: 860px) {
  .sc-led-list li { grid-template-columns: 3ch minmax(0, 1fr) 10ch; }
  .sc-led-when { grid-column: 2; }
  .sc-led-what { grid-column: 2; }
  .sc-led-org { grid-column: 2; }
  .sc-led-hash { grid-column: 3; grid-row: 1; }
}

/* The altered row and everything chained after it. Marked with a rule and a
   colour, never by removing the row - the point of the demonstration is that a
   tampered row is still there and still visible. */
.sc-led.is-on .sc-led-list li[data-sc-broken] .sc-led-hash,
.sc-led.is-on .sc-led-list li[data-sc-altered] .sc-led-hash { color: var(--rust-deep); }

.sc-led.is-on .sc-led-list li[data-sc-altered] {
  background: rgba(var(--rust-rgb), 0.07);
  box-shadow: inset 3px 0 0 var(--rust);
}

.sc-led-alter { margin-left: var(--sp-3); vertical-align: baseline; }
.sc-t-on { display: none; }
[aria-pressed="true"] .sc-t-off { display: none; }
[aria-pressed="true"] .sc-t-on { display: inline; }

/* ---------------------------------------------------------------------------
   6. F3 - THE THREE BEATS OF A RECORDED CALL
   ---------------------------------------------------------------------------
   With JavaScript off the three beats sit side by side and every caption is read
   in document order; with it on, the tab strip shows one at a time. The grid is
   auto-fit, so one panel fills the stage and three share it - no override, and no
   state in which a beat is lost.
   --------------------------------------------------------------------------- */

.sc-beats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: var(--sp-6);
  align-items: start;
}

.sc-beats .showcase-panel + .showcase-panel { margin-top: 0; }
.sc-beats .phone { max-width: 280px; }

.sc-beat-cap {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-top: var(--sp-3);
}

.band--deep .sc-beat-cap,
.band--deep-rich .sc-beat-cap { color: rgba(244, 239, 227, 0.66); }

/* THE APP'S GO-GREEN, AND WHY IT IS ONLY EVER A DOT. The brief asks for
   #0d8043 against the rust, and it is right that it belongs here - it is the
   colour of the affirmative Call button on the consent capture two beats
   earlier. But measured against cream it is 4.37:1, and against this file's own
   ten-pixel mono marks that is a fail: small text needs 4.5:1. Cream on a solid
   green chip is the same 4.37:1, and pure white is reserved by site.css for the
   ground product captures are photographed against. So the colour is carried by
   a decorative, aria-hidden dot beside a caption that is already legible on its
   own, where no contrast ratio is owed and none is quietly missed. */
.sc-go-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--r-round);
  background: var(--sc-go);
  margin-right: 6px;
  vertical-align: 1px;
}

/* Beat three has no capture - the deck's third beat is the recording window
   itself, and the only clean call assets are the two screens before it and the
   card after it. So it is drawn: the app's rust bar, the live dot, and the
   standing Recorded tag, at the same width as the two phones beside it. */
.sc-rec-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sc-wall);
  box-shadow: var(--shadow-2);
  max-width: 340px;
  margin: 0 auto;
}

.sc-rec-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--rust);
  color: var(--cream);
  font-family: var(--mono);
  font-size: var(--fs-fine);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sc-rec-body {
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-h4);
  color: var(--ink-soft);
}

/* AND WHY IT IS WRAPPED IN A .phone. Drawn at its own height the frame measured
   232px against the 614px phones in beats one and two, so choosing Step 03 took
   382px out of the page and every section below it jumped up under the reader's
   cursor, then back down again on Step 01. The sibling strip #sc-docs holds a
   constant height because all three of its panels are phones; this makes beat
   three one too. The ratio is the captures' own 786x1704, so the box matches at
   every width rather than at one measured breakpoint. */
.sc-beats .phone .sc-rec-frame {
  max-width: none;
  aspect-ratio: 786 / 1704;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  box-shadow: none;
}

/* 26px mono needs 328px for this line and the framed panel gives it 230px, which
   is what widowed the "7" onto its own line. 17px fits it whole, at every width. */
.sc-beats .phone .sc-rec-body {
  flex: 1 1 auto;
  font-size: var(--fs-lead);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   7. F4 - THE ERASURE DIAGRAM
   ---------------------------------------------------------------------------
   Read the state logic carefully, because it is inverted on purpose. The AFTER
   state - working copy gone, filed record untouched, amendment written - is the
   AUTHORED default, so a reader with JavaScript off gets the finished argument
   rather than a before-picture with no way to advance it. The script's job is to
   wind it BACK: under [data-showcase="ready"], a diagram that is not .is-on
   renders the before state, and pressing the button returns it to the default.
   --------------------------------------------------------------------------- */

.sc-erase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--sp-4);
}

.sc-erase-col { min-width: 0; }

.sc-erase-head {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: var(--sp-2);
}

.band--deep .sc-erase-head,
.band--deep-rich .sc-erase-head { color: rgba(244, 239, 227, 0.66); }

.sc-erase-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: var(--fs-fine);
  line-height: 1.6;
}

.sc-erase-list li {
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--hairline);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.sc-erase-list li:first-child { border-top: 0; }

/* AFTER (the authored default): the working-copy rows are struck through and the
   amendment column is present. The filed record is identical in both states,
   which is the whole argument, so nothing at all is declared for it. */
.sc-erase-gone { text-decoration: line-through; color: var(--ink-faded); }

.sc-erase-col--amend .sc-erase-list li {
  border-top: 2px solid var(--rust);
  color: var(--rust-deep);
}

/* BEFORE: only reachable once the script is running. The amendment column goes
   whole rather than emptying out, because an amendment that does not exist yet
   should not leave a labelled box with nothing in it. */
.showcase[data-showcase="ready"] .sc-erase:not(.is-on) .sc-erase-gone {
  text-decoration: none;
  color: var(--ink-soft);
}

.showcase[data-showcase="ready"] .sc-erase:not(.is-on) .sc-erase-col--amend { display: none; }

/* ---------------------------------------------------------------------------
   8. F6 - THE LIVE REPLICA
   ---------------------------------------------------------------------------
   Not a screenshot. The wallpaper, the bubble geometry, the tail triangles and
   the read-tick blue are the member app's own, mirrored from chat-widget.css so
   the two replicas on this page stay in step. The transparency pill is the point
   of the whole section, so it is a real control with a real expanded notice
   underneath it - and that notice is open unless the script has taken over.
   --------------------------------------------------------------------------- */

.sc-app {
  max-width: 420px;
  margin: 0 auto;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-4);
  background: var(--sc-wall);
}

.sc-app-top {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--rust);
  color: var(--cream);
}

.sc-app-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: var(--r-round);
  border: 1px solid rgba(244, 239, 227, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
}

.sc-app-title {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.25;
}

.sc-app-sub {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-fine);
  /* Not an alpha. Cream on rust is 4.66:1 and this is 13px, so it needs 4.5:1 and
     has 0.16 to spare: 0.82 composites to rgb(233, 208, 195) = 3.75:1 and fails.
     The hierarchy against .sc-app-title is carried by size and weight instead. */
  color: var(--cream);
}

.sc-rec { display: inline-flex; align-items: center; gap: 5px; }

.sc-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-round);
  border: 1.5px solid rgba(244, 239, 227, 0.9);
}

.sc-wall {
  position: relative;
  background-color: var(--sc-wall);
}

.sc-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wallpaper-chat.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.sc-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-3) 10px var(--sp-4);
}

/* The standing transparency line. Rust type on the app's own notice ground. */
.sc-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 94%;
  margin-bottom: var(--sp-3);
  padding: 6px 13px;
  border: 0;
  border-radius: 14px;
  background: var(--sc-pill-bg);
  box-shadow: 0 1px 2px rgba(var(--deep-rgb), 0.12);
  font-family: var(--sans);
  font-size: var(--fs-fine);
  line-height: 1.35;
  text-align: left;
  color: var(--rust-deep);
  cursor: default;
}

.showcase[data-showcase="ready"] .sc-pill { cursor: pointer; }

.sc-pill-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--r-round);
  background: var(--rust);
}

.sc-notice {
  align-self: stretch;
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  border-radius: 12px;
  background: var(--sc-pill-bg);
  box-shadow: 0 1px 2px rgba(var(--deep-rgb), 0.12);
}

.sc-notice-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: var(--rust-deep);
  margin-bottom: var(--sp-2);
}

.sc-notice-b {
  font-family: var(--sans);
  font-size: var(--fs-fine);
  line-height: 1.5;
  color: var(--sc-msg-ink);
}

/* Bubbles. Geometry copied from the app: 13px radius, a 2px corner on the tail
   side and a 7px border triangle hanging outside it. */
.sc-msg {
  position: relative;
  max-width: 82%;
  margin-top: var(--sp-3);
  padding: 7px 9px 6px;
  border-radius: 13px;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  line-height: 1.3;
  color: var(--sc-msg-ink);
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.1);
}

.sc-msg--in { align-self: flex-start; background: var(--sc-bub-in); border-top-left-radius: 2px; }
.sc-msg--out { align-self: flex-end; background: var(--sc-bub-out); border-top-right-radius: 2px; }

.sc-msg--in::before,
.sc-msg--out::before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.sc-msg--in::before { left: -7px; border-top-color: var(--sc-bub-in); border-right-color: var(--sc-bub-in); }
.sc-msg--out::before { right: -7px; border-top-color: var(--sc-bub-out); border-left-color: var(--sc-bub-out); }

.sc-msg-from {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--sc-sender);
  margin-bottom: 1px;
}

.sc-msg-t { display: block; }

.sc-msg-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 2px;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--sc-msg-meta);
}

.sc-ticks { display: inline-flex; line-height: 1; color: var(--sc-tick); }
.sc-ticks--read { color: var(--sc-tick-read); }

/* ---------------------------------------------------------------------------
   9. FIGURES
   ---------------------------------------------------------------------------
   The Component Contract's worked example puts <figcaption class="shot-cap">
   INSIDE <figure class="screenshot">. That works as a diagram but not on the
   page: .screenshot is `overflow: hidden` with asymmetric padding and paints its
   children with a hairline ring, so a caption placed inside sits on the coloured
   mat in --ink-faded, at 3:1 or worse against a deep or rust ground. So the mat
   is a <div> inside the <figure> and the caption is a sibling of it, on the band
   ground where .shot-cap's own dark-band rules already work. Same classes, same
   look, one nesting level different, and it is reported to the conductor.
   --------------------------------------------------------------------------- */

.sc-fig { margin: 0; }
.sc-fig + .sc-fig { margin-top: var(--sp-7); }

.sc-fig .shot-cap { max-width: 46ch; }
.sc-fig--tight .phone { max-width: 250px; }
.sc-fig--wide { margin-top: var(--sp-8); }

/* A PORTAL DRAWER IS A TALL, NARROW SURFACE, AND .sheet img FILLS ITS COLUMN.
   The Replay drawer is 470 CSS px wide in the product, so org-replay-drawer.webp
   is 864px: dropped into a full-measure figure it would be upscaled to 1440 and
   read as blurred furniture rather than as a product. This variant sizes the mat
   to the capture and centres it, which is the same reasoning .sc-fig--tight
   applies to the phone one row above. It is presentation only: nothing is
   cropped and no part of the file is hidden.

   ⚠ 560px IS PAIRED WITH THE FILE'S OWN WIDTH. .screenshot's --pad is
   min(10%, 64px), so a 560px mat paints the image at 432 CSS px, which is 864
   device px at DPR 2 - the file's exact pixel width, and above the 831 a DPR 3
   phone asks for at this figure's mobile size. Widen the mat and the capture
   starts being upscaled; re-crop the capture and this number has to move with
   it. */
.sc-fig--drawer .screenshot {
  max-width: 560px;
  margin-inline: auto;
}

/* The mat is centred, so a caption left-aligned at the full measure reads as
   belonging to something else. */
.sc-fig--drawer .shot-cap {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
}

/* ONE DELIBERATE CROP HERE, and it exists because a screenshot is copy the
   claims gate cannot read.

   org-archive-pane.webp is 1440x895 and its last visible line is the client
   portal's own navigation instruction, "Drill into Contacts, person, year,
   month". Three of those four segments do not exist in the tree that ships
   (ruling CR-3), the copy deck refuses to publish the sentence, and the
   conductor holds it as a product defect owed to the other repository. It is
   clipped here rather than published half-legibly: the crop keeps 879 of the
   895 rows, which leaves the "Open your archive in SharePoint" button whole and
   removes the line under it. It is done with aspect-ratio + object-fit rather
   than a negative margin, so the box the browser reserves before the image
   arrives is the box it ends up with and the CLS budget is untouched. That crop
   is cosmetic, not a claim, so presentation is the right place for it.

   THERE IS NO LONGER A CSS CROP FOR org-trust-pane.webp, and there must not be
   one again. That file's third proof card read "A second copy we cannot
   rewrite" - CMP-049, the WORM mirror, which ruling CR-4 forbids publishing
   because the immutability policy on that container is real but UNLOCKED, so we
   could shorten or remove it, so the sentence is not true today. A CSS crop hid
   the card on the page while the whole file stayed readable at its own URL on
   our own CDN, which is the same false claim one click away. Ruling CR-31: the
   ASSET is now cropped, re-derived from the 2880x1800 capture at its bottom 634
   source rows and published at 1440x317 - the feed itself, the auditor export
   and the fingerprints, which is what the section is about anyway. The img
   carries its true intrinsic size, .sheet img already sizes it, and nothing is
   needed here. If the whole 1440x900 file ever comes back, the card comes back
   with it. */

.sc-shot--archive img {
  aspect-ratio: 1440 / 879;
  object-fit: cover;
  object-position: 50% 0;
}

/* ---------------------------------------------------------------------------
   10. THE RECORD, IN DETAIL - the secondary cards
   ---------------------------------------------------------------------------
   Eight groups holding six, three, four, three, two, one, two and one cards. A
   grid of equal cells cannot carry that: cells in a row stretch to the tallest,
   so a one-card group becomes a box with a hole in the bottom of it and the hole
   is what reads as a mistake. So each group is a full-measure ROW - heading in a
   rail on the left, cards flowing to the right - and the rows stack under
   hairlines. The variance moves off the horizontal axis, where it reads as
   ragged, and onto the vertical, where a short row is simply a short row. Same
   reasoning CR-13 applies to the capabilities grid, and the same conclusion.
   --------------------------------------------------------------------------- */

.sc-secs {
  --sc-rail: 260px;
  margin-top: var(--sp-8);
  border-top: 2px solid var(--ink);
}

.band--deep .sc-secs,
.band--deep-rich .sc-secs { border-top-color: var(--cream-hairline-strong); }

.sc-sec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6) var(--sp-8);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--hairline);
}

.band--deep .sc-sec,
.band--deep-rich .sc-sec { border-bottom-color: var(--cream-hairline); }

.sc-sec-head {
  flex: 0 0 var(--sc-rail);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--fs-h5);
  line-height: var(--lh-title);
  letter-spacing: -0.01em;
  color: var(--ink);
}

.band--deep .sc-sec-head,
.band--deep-rich .sc-sec-head { color: var(--cream); }

.sc-sec-head em { font-style: italic; color: var(--rust); }
.band--deep .sc-sec-head em,
.band--deep-rich .sc-sec-head em { color: var(--rust-bright); }

/* Two columns plus their gutter is the flex basis, so the heading only takes a
   rail where there is room for a proper index beside it; below that the line
   wraps on its own and the cards spread across the full measure. The rail width
   and the wrap therefore cannot disagree. */
.sc-sec-list {
  flex: 1 1 calc(var(--sc-rail) * 2);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: var(--sp-6) var(--sp-7);
  min-width: 0;
}

.sc-item { min-width: 0; }

.sc-item-title {
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline-strong);
  margin-bottom: var(--sp-2);
}

.band--deep .sc-item-title,
.band--deep-rich .sc-item-title { color: var(--cream); border-top-color: var(--cream-hairline-strong); }

.sc-item-body {
  font-size: var(--fs-fine);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.band--deep .sc-item-body,
.band--deep-rich .sc-item-body { color: rgba(244, 239, 227, 0.74); }

@media (max-width: 900px) {
  .sc-secs { --sc-rail: 100%; }
  .sc-sec { gap: var(--sp-5); padding: var(--sp-6) 0; }
}

/* ---------------------------------------------------------------------------
   11. REDUCED MOTION - belt and braces
   ---------------------------------------------------------------------------
   Nothing in this file animates, and every element's authored resting state is
   the visible one, so there is nothing here that a reduced-motion reader could
   lose. The block is written anyway, and it is written as a blanket rather than a
   hand-maintained list, because the failure mode of a hand-maintained list is
   that the fourteenth entry is the one somebody forgets. If a later hand adds a
   transition to this file, this rule has already caught it.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sc *,
  .sc *::before,
  .sc *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   12. THE CONTENTS LIST (how-it-works.html)
   ---------------------------------------------------------------------------
   Not a showcase, and the only rule in this file that is not. It is here because
   this stylesheet is now the one thing both pages that need it load, and site.css
   belongs to another lane.

   It adds no design. The list itself is site.css's .toc - the device privacy.html
   and terms.html have used since the legal pages shipped - reused verbatim, and
   the band around it is site.css's own .band/.band--cream. The single declaration
   below exists because .toc was authored for a document article, where it is
   followed immediately by flowing prose and therefore carries its own 64px of
   trailing air. Here it is the only thing inside a band that already owns its
   bottom padding, so that margin would print twice.
   --------------------------------------------------------------------------- */

.sc-contents .toc { margin-bottom: 0; }

/* AND ONE MORE, added when the relocation lengthened the page it maps. The panel takes
   the full narrow wrap - 856px from 1024px up - while its longest row ends around 370px,
   so above 900px it printed as a box more than half empty, which reads as an unfinished
   element rather than a deliberate one. Two columns rather than a narrower box: the box
   is the band's own measure, and shrinking it would strand it against one margin or need
   a centring rule of its own. Ten rows split five and five fill the width with the thing
   the reader came for. At 390px the single file is already beautifully proportioned, so
   the rule is gated rather than universal - 900px is the width site.css itself uses for
   the band-padding step, so this borrows the breakpoint rather than inventing one.
   break-inside on the row because .toc li is a flex line: a numeral orphaned at the foot
   of column one with its label at the head of column two is the failure mode here. */
@media (min-width: 901px) {
  .sc-contents .toc ol { columns: 2; column-gap: var(--gutter); }
  .sc-contents .toc li { break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   13. WHERE A DARK SHOWCASE BAND MEETS THE HANDBACK
   ---------------------------------------------------------------------------
   index.html alternated its grounds so that no two adjacent sections shared one,
   and the 2026-08-22 rebalance broke that in exactly one place: #replay was a
   cream band sitting between #access-ledger and .handback, and moving it left
   .band--deep against .handback, which are both --deep. Rendered, the two merged
   into a single 3.4-screen navy run with no boundary at all - the handback line,
   which is one of the strongest on the site and is about something else entirely,
   read as the tail of the access-ledger section.

   A hairline rather than a re-tone. --deep-rich is the only other dark ground the
   site has, and site.css warns in its own token comments that small --rust-bright
   type measures 4.38-4.42:1 on it and fails AA - so re-toning a section authored
   against --deep would have traded a visible seam for an invisible contrast
   regression. --cream-hairline-strong is the shade site.css already uses for
   .band-rule on a dark ground, so this borrows a device rather than inventing one.
   Keyed off .sc on the left because that is what this file owns: it fires only
   where a showcase band is the section above.
   --------------------------------------------------------------------------- */

.sc.band--deep + .handback,
.sc.band--deep-rich + .handback { border-top: 1px solid var(--cream-hairline-strong); }

/* ---------------------------------------------------------------------------
   14. BACK TO CONTENTS (how-it-works.html)
   ---------------------------------------------------------------------------
   The page runs to about forty-three phone screens, and past PART 05 it carried no
   in-page wayfinding at all: the sticky nav holds cross-page links and the CTA, and by
   the time a reader reaches the foot of the inventory the contents list is some 30,000px
   behind them. One quiet line at the foot of the last section before the CTA, set in the
   same mono register as .shot-cap and the corner marks.

   Deliberately NOT sticky and NOT floating. A pill hovering over a long editorial page is
   app chrome, and this is a broadsheet; the whole page is built on marks that sit in the
   paper rather than on top of it. It is also a plain in-page anchor with no script behind
   it, so it works in the no-JS pass like every other link on the page.

   The dark-ground pair is written even though the section it is used in today is light:
   the grounds on this page were re-toned once already this week, and a component whose
   only dark variant is the one somebody remembers to add later is how a cream-on-cream
   link gets shipped.
   --------------------------------------------------------------------------- */

.sc-backtop {
  margin: var(--sp-8) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-family: var(--mono);
  font-size: var(--fs-mark);
  letter-spacing: var(--tracking-mark);
  text-transform: uppercase;
}

.sc-backtop a {
  color: var(--ink-faded);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-strong);
  padding-bottom: 3px;
}

.sc-backtop a:hover {
  color: var(--rust-deep);
  border-bottom-color: var(--rust);
}

.band--deep .sc-backtop,
.band--deep-rich .sc-backtop { border-top-color: var(--cream-hairline-strong); }

.band--deep .sc-backtop a,
.band--deep-rich .sc-backtop a {
  color: rgba(244, 239, 227, 0.78);
  border-bottom-color: var(--cream-hairline-strong);
}

.band--deep .sc-backtop a:hover,
.band--deep-rich .sc-backtop a:hover {
  color: var(--cream);
  border-bottom-color: var(--cream);
}