/* 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); }
}

/* A WIDE BANNER BESIDE A PHONE, PAIRED ONLY WHEN THERE IS ROOM FOR BOTH.
   how-it-works' Replay row sets org-replay-callout.webp (1390x384, a 3.6:1
   banner) beside a 250px phone. They are opposite shapes, and in an even split
   the banner is squeezed to a 445px sheet - 32% of its own width, too small to
   read a word of - while the phone's column carries 195px of empty mat. The
   banner exists to be READ, so the split is weighted towards it, and only above
   the wrap's own 1240px maximum, where the arithmetic stops moving: content is
   pinned at 1176, the gap is 64, so the banner column is 728 and .screenshot's
   --pad clamps to 64 a side, painting the sheet at 600 CSS px. Below 1240 it
   stacks and takes the full measure, which is wider still. The phone is capped
   at 250px in either arrangement, so it gives up nothing. */
.sc-split--banner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }

@media (min-width: 1240px) {
  .sc-split--banner {
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: var(--sp-9);
  }
}

/* Stacking the pair hands the phone a full-measure plate, and .phone is capped
   at 250px: at 1024 that is 250px of device on 960px of mat, which reads as a
   mistake rather than as a mat. This restores a plate sized to its subject in
   the ONE range this modifier changed - the site collapses every other split at
   900, and below 900 the phone already sat on a plate this size, so that end is
   left exactly as it ships. 400 minus the 10% --pad leaves 320, so the 250px
   phone keeps a mat either side rather than bleeding to the edges. */
@media (min-width: 901px) and (max-width: 1239px) {
  .sc-split--banner .sc-fig--tight .screenshot { max-width: 400px; }
}

.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;
}

/* THERE IS NO CSS CROP HERE ANY MORE, AND THE PIXELS THE OLD ONE HID ARE GONE.

   This block used to carry `.sc-shot--archive img { aspect-ratio: 1440 / 879;
   object-fit: cover; object-position: 50% 0 }`. It clipped the last 16 rows of
   a 1440x895 org-archive-pane.webp, where the client portal printed its 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), so the
   copy deck refused to publish the sentence.

   That capture no longer exists. org-archive-pane.webp was re-cropped in place
   on 2026-08-29 to 872x272 - the "Filing & delivery health" card ALONE, which
   is the only thing this section argues about. The sentence the rule existed to
   hide is outside the published bytes entirely now, so there is nothing left
   for it to do. Worse, it had turned DESTRUCTIVE: `cover` scales a 3.21:1 file
   into a 1.64:1 box by its HEIGHT and then trims the width, so the page showed
   the middle half of the card, row labels cut off the left and values cut off
   the right. Deleted.

   org-trust-pane.webp has never had a CSS crop and must not get one. 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. A CSS crop would hide 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, so the ASSET is cropped
   instead (ruling CR-31) and it is now 872x270.

   THE STANDING RULE, because a rule in this file has now been outlived by its
   own capture: presentation may SIZE a capture, it may never edit one. If a
   sentence inside a screenshot cannot be published, re-crop the file. Anything
   done with aspect-ratio, object-fit or a negative margin is pinned to pixels
   that can be replaced underneath it without a single test going red. */

/* THE TWO PORTAL BANNERS ARE SIZED TO THEIR OWN FILES. Both crops are about
   3.2:1 and 872px wide, and both now sit in a full-measure figure, which paints
   1176 - 128 = 1048 CSS px at the 1240 wrap. That upscales an 872px file 1.20x
   and lands SOFTER than the capture it replaced, which would defeat the point
   of cropping it. .screenshot's --pad is min(10%, 64px), so a 1000px mat paints
   the sheet at exactly 872: the file's own width, 1:1, the largest it can be
   without being enlarged. Nothing is hidden - the MAT is narrower, not the
   picture.

   ⚠ 1000px IS PAIRED WITH THE FILES' OWN WIDTH, the same way .sc-fig--drawer's
   560 is paired with org-replay-drawer.webp. Re-crop either capture and this
   number moves with it: mat = capture width + 128. Left-aligned on purpose -
   the prose above these figures is capped at --measure and starts at the same
   edge, so a centred mat would read as 88px of accidental indent. */
.sc-shot--archive .screenshot,
.sc-shot--trust .screenshot {
  max-width: 1000px;
}

/* ---------------------------------------------------------------------------
   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);
}