/* exhibit.css — the innovation layer for the Skipton email exhibits.
 *
 * One manifest-driven engine (system/exhibit.js) renders every journey route:
 *   - a navigator (timeline / state tabs / persona radios) chosen by journey type
 *   - the "glass": an email-client frame showing the compiled email live, with a
 *     View render | View source toggle and a light | dark toggle
 *   - a decision-card rail beside the glass, and the per-step design note
 *   - a cross-client RENDER matrix (from stages[].litmus, real captures or honest
 *     pending cells) and a separate INTERACTIVITY matrix (from stages[].interactions)
 *
 * Render-truth and interaction-truth are two separate claims, so they are two separate
 * matrices (DESIGN.md H2). Contract tokens only (S1); no primitives, no literals except
 * the two documented spots. Loaded only on the exhibit routes, after portfolio.css.
 */

/* ------------------------------------------------------------ exhibit shell */

.ex-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 14px var(--spacing-xl);
  background: var(--color-bg-inverse);
  color: var(--color-fg-on-inverse-strong);
  position: sticky;
  top: 0;
  z-index: 40;
}
.ex-topbar a { color: inherit; text-decoration: none; }
.ex-topbar .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-on-dark-border);
  color: var(--color-fg-on-inverse-strong);
  transition: background 160ms ease;
}
.ex-topbar .back:hover { background: var(--color-inverse-wash); }
.ex-topbar .back svg { width: 22px; height: 22px; display: block; }
.ex-topbar .title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-on-inverse);
  text-align: center;
}
.ex-topbar .all {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  white-space: nowrap;
  transition: background 160ms ease;
}
.ex-topbar .all:hover { background: var(--color-inverse-wash); }
@media (max-width: 640px) {
  .ex-topbar { padding: 10px var(--spacing-md); }
  .ex-topbar .title { display: none; }
}

/* built-because strip (C1) — quoted JD line, byte-for-byte */
.ex-because {
  margin: 0;
  padding: 12px var(--spacing-xl);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  font-size: var(--type-caption);
  line-height: 1.55;
  color: var(--color-fg-muted);
}
.ex-because b { color: var(--color-fg); font-weight: 400; }
@media (max-width: 640px) { .ex-because { padding: 12px var(--spacing-md); } }

/* exhibit intro: what the system is and where it ran. Sits inside .ex-wrap, same 62ch
   measure as .ex-head, so it lines up with the eyebrow and title below it. */
.ex-intro {
  max-width: 62ch;
  margin-bottom: var(--spacing-2xl);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-fg);
}

.ex-legal {
  margin: 0;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-2xl);
  border-top: 1px solid var(--color-border);
  font-size: var(--type-eyebrow);
  line-height: 1.7;
  color: var(--color-fg-muted);
  text-align: center;
}
.ex-legal span { display: block; }

.ex-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-3xl);
}
@media (max-width: 640px) { .ex-wrap { padding: var(--spacing-xl) var(--spacing-md) var(--spacing-2xl); } }

/* ------------------------------------------------------------ journey head */

.ex-head { margin-bottom: var(--spacing-2xl); max-width: 62ch; }
.ex-eyebrow {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: 0 0 var(--spacing-md);
}
.ex-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h1);
  line-height: 1.15;   /* 2026-09-20: matched with .page-hero h1 */
  color: var(--color-fg);
  margin: 0 0 var(--spacing-md);
}
.ex-scar {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-fg-muted);
  border-left: 3px solid var(--color-urgent);
  padding: 4px 0 4px var(--spacing-md);
  margin: var(--spacing-md) 0 0;
}
.ex-scar b {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}

/* ------------------------------------------------------------ navigator */

.ex-nav { margin-bottom: var(--spacing-xl); }
.ex-nav-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: 0 0 var(--spacing-md);
}

/* timeline (lifecycle-series) — a scrubbable row of stops */
.ex-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.ex-timeline li { flex: 1 1 0; min-width: 128px; position: relative; }
.ex-stop {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 30px 8px 10px;
  cursor: pointer;
  font-family: inherit;
  color: var(--color-fg-muted);
  position: relative;
}
/* the connector line sits behind the dots */
.ex-stop::before {
  content: "";
  position: absolute;
  top: 15px; left: 0; right: 0;
  height: 2px;
  background: var(--color-border);
  z-index: 0;
}
.ex-timeline li:first-child .ex-stop::before { left: 50%; }
.ex-timeline li:last-child .ex-stop::before { right: 50%; }
.ex-stop::after {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  width: 14px; height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  z-index: 1;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.ex-stop .stop-day {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-fg-muted);
  margin-bottom: 2px;
}
.ex-stop .stop-label {
  display: block;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--color-fg-muted);
}
.ex-stop:hover::after { border-color: var(--color-accent); }
.ex-stop:hover .stop-label { color: var(--color-fg); }
.ex-stop[aria-selected="true"] { color: var(--color-fg); }
.ex-stop[aria-selected="true"]::after {
  background: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateX(-50%) scale(1.15);
}
.ex-stop[aria-selected="true"] .stop-label { color: var(--color-fg); font-weight: 400; }
.ex-stop[aria-selected="true"] .stop-day { color: var(--color-accent); }

/* state tabs (single-stateful) + persona radios (personalised) — shared pill row */
.ex-segs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ex-seg {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  min-height: 44px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.ex-seg:hover { border-color: var(--color-border-strong); }
.ex-seg[aria-selected="true"],
.ex-seg[aria-checked="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-fg);
}
/* personalised switcher: active pill wears the peacock band with white copy
   (2026-09-20, per Linards: selected copy must be white; white on the powder fill was 1.6:1) */
.ex-segs.is-loyalty .ex-seg[aria-checked="true"] {
  background: var(--color-accent-secondary);
  border-color: var(--color-accent-secondary);
  color: var(--color-fg-on-inverse-strong);   /* white on #104A65 — 9.59:1 */
}

/* ------------------------------------------------------------ stage grid */

.ex-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--spacing-2xl);
  align-items: start;
}
@media (max-width: 940px) { .ex-stage-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } }

/* the glass — an email-client frame */
.ex-glass {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
}
.ex-client-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}
.ex-avatar {
  width: 40px; height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.ex-client-meta { min-width: 0; flex: 1; }
.ex-client-meta .from {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-fg);
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
}
.ex-client-meta .from .time { color: var(--color-fg-muted); font-size: 12px; font-family: var(--font-body); white-space: nowrap; }
.ex-client-meta .subject {
  font-size: 14px;
  color: var(--color-fg);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-client-meta .preheader {
  font-size: 12.5px;
  color: var(--color-fg-muted);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* toolbar above the email body: view toggle + mode toggle */
.ex-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
.ex-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.ex-toggle button {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  min-height: 40px;
  border: 0;
  background: var(--color-bg);
  color: var(--color-fg-muted);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ex-toggle button + button { border-left: 1px solid var(--color-border); }
.ex-toggle button:hover { color: var(--color-fg); }
.ex-toggle button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-fg); }
.ex-toggle button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* the live email iframe */
.ex-frame-wrap { position: relative; background: var(--color-bg-surface); }
.ex-frame {
  display: block;
  width: 100%;
  height: 620px;
  border: 0;
  background: var(--color-bg-surface);
}
@media (max-width: 640px) { .ex-frame { height: 540px; } }

/* view-source panel */
.ex-source {
  margin: 0;
  max-height: 620px;
  overflow: auto;
  background: #0A1F29; /* documented literal: a near-black teal code ground, darker than
                          --color-cyan-900 (#052A38), so syntax stays legible */
  color: #CBD5E1; /* documented literal: slate-300, the exhibit's on-dark body colour,
                     on the #0A1F29 ground — 11.4:1 */
  padding: var(--spacing-md);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}
.ex-source code { color: inherit; font: inherit; white-space: pre; }
.ex-frame-empty {
  padding: var(--spacing-2xl) var(--spacing-md);
  text-align: center;
  color: var(--color-fg-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ------------------------------------------------------------ rail: decision + note */

.ex-rail { display: flex; flex-direction: column; gap: var(--spacing-md); position: sticky; top: 80px; }
@media (max-width: 940px) { .ex-rail { position: static; } }

/* decision card — reuse the chassis organism, restore the Skipton hairline border */
.ex-rail .decision-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-surface);
}
.ex-rail .decision-card-title { color: var(--color-fg); }

.ex-note {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-surface);
}
.ex-note h3 {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: 0 0 var(--spacing-sm);
}
.ex-note p { font-size: 14.5px; line-height: 1.6; color: var(--color-fg); margin: 0; }

/* ------------------------------------------------------------ render matrix */

.ex-section { margin-top: var(--spacing-3xl); }
.ex-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.ex-section-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h2);
  color: var(--color-fg);
  margin: 0;
}
.ex-section-head p {
  font-size: 14px;
  color: var(--color-fg-muted);
  max-width: 46ch;
  margin: 4px 0 0;
  line-height: 1.55;
}

.ex-matrix-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.ex-matrix-toggle button {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 16px;
  min-height: 40px;
  border: 0;
  background: var(--color-bg);
  color: var(--color-fg-muted);
  cursor: pointer;
}
.ex-matrix-toggle button + button { border-left: 1px solid var(--color-border); }
.ex-matrix-toggle button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-accent-fg); }
.ex-matrix-toggle button[disabled] { opacity: 0.4; cursor: not-allowed; }

.ex-matrix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-md);
}
.ex-shot {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
}
.ex-shot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.ex-shot-head .client { font-family: var(--font-display); font-size: 13.5px; color: var(--color-fg); }
.ex-conf {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  white-space: nowrap;
}
/* --color-confirm-text: the contract's confirmed-state text role, bound in the pack to the AA-safe success green (4.52:1 on white) for small
   text, deliberately darker than --color-success (#10b981), which is 2.54:1 and a mark,
   not a text colour. Mirrors the email layer's AA hex split. Reused on .ex-support.works
   and .ex-legend below. */
.ex-conf.pass { color: var(--color-confirm-text); border-color: var(--color-confirm-text); }
.ex-conf.warn { color: var(--color-caution-text); border-color: var(--color-caution-text); }
.ex-conf.block { color: var(--color-urgent); border-color: var(--color-urgent); }
.ex-shot-body { background: var(--color-bg-surface); }
.ex-shot-body img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--color-border);
}
.ex-shot-pending {
  padding: var(--spacing-lg) var(--spacing-md);
  min-height: 132px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  background:
    repeating-linear-gradient(45deg, var(--color-bg-surface), var(--color-bg-surface) 10px, var(--color-bg) 10px, var(--color-bg) 20px);
}
.ex-shot-pending .tag {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.ex-shot .note {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-fg-muted);
  padding: 10px var(--spacing-md) var(--spacing-md);
}
.ex-matrix-empty,
.ex-imx-empty {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  color: var(--color-fg-muted);
  font-size: 14px;
  line-height: 1.6;
  background: var(--color-bg-surface);
}

/* ------------------------------------------------------------ interactivity matrix */

.ex-imx-wrap { overflow-x: auto; }
.ex-imx {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.ex-imx th, .ex-imx td {
  text-align: left;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.ex-imx thead th {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  border-bottom: 2px solid var(--color-border-strong);
  white-space: nowrap;
}
.ex-imx tbody th {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-fg);
}
.ex-support {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-fg-muted);
  white-space: nowrap;
}
.ex-support.works { color: var(--color-confirm-text); border-color: var(--color-confirm-text); background: color-mix(in srgb, var(--color-confirm-text) 6%, transparent); }
.ex-support.amp   { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-inverse-wash); }
.ex-support.static{ color: var(--color-caution-text); border-color: var(--color-caution-text); }
.ex-support.link  { color: var(--color-fg-muted); border-color: var(--color-border); }
.ex-support.degraded { color: var(--color-urgent); border-color: var(--color-urgent); }

.ex-legend { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-md); font-size: 12.5px; color: var(--color-fg-muted); }
.ex-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ex-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.ex-legend i.works { background: var(--color-confirm-text); }
.ex-legend i.amp { background: var(--color-accent); }
.ex-legend i.static { background: var(--color-caution-text); }
.ex-legend i.link { background: var(--color-fg-muted); }
.ex-legend i.degraded { background: var(--color-urgent); }

/* honest source-of-truth footnote under each matrix */
.ex-footnote { margin-top: var(--spacing-md); font-size: 12.5px; color: var(--color-fg-muted); line-height: 1.55; }

/* per-client dark-mode note, shown when the render matrix is in Dark */
.ex-matrix-note {
  margin-top: var(--spacing-lg);
  padding: 14px 16px;
  background: var(--color-bg-surface);
  font-size: 13.5px;
  color: var(--color-fg-muted);
  line-height: 1.6;
  max-width: 78ch;
}
.ex-matrix-note[hidden] { display: none; }

/* Dark render view: the honest set (Apple Mail, iOS, Thunderbird) fills the grid;
   the per-client note and the source-technique snippets sit below it. */
.ex-matrix--dark .ex-matrix-body { display: block; }
.ex-matrix--dark .ex-matrix-note { margin-top: var(--spacing-lg); }

/* dark-mode workaround techniques: a bolded code snippet + one line each */
.ex-matrix-snips { margin-top: var(--spacing-lg); }
.ex-matrix-snips[hidden] { display: none; }
.ex-snips-h { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); margin: 0 0 12px; }
.ex-snips { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex-snips li { font-size: 13.5px; line-height: 1.55; color: var(--color-fg-muted); }
.ex-snips code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; font-weight: 600; color: var(--color-fg); background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 7px; }
.ex-snips .d { color: var(--color-fg-muted); }

/* live region for stage changes (screen readers) */
.ex-live {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* keyboard focus — teal ring, overriding any inherited grey */
.ex-topbar :focus-visible,
.ex-wrap :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.ex-topbar :focus-visible { outline-color: var(--color-fg-on-inverse-strong); }

@media (prefers-reduced-motion: reduce) {
  .ex-stop::after, .ex-seg, .ex-toggle button { transition: none; }
}

/* ============================================================ the Skipton addendum
 * Everything below serves the manifest fields the Skipton build added: status and
 * fixture chips, the illustrative tag, the compare-with-previous panel, the change
 * list, the pre-send checklist rail, the exact readout and the "n of N" counter.
 * Contract tokens only (S1). Every state carries a word, never colour alone (A2).
 */

/* screen-reader-only word beside a glyph, so pass/fail is never colour or shape alone */
.ex-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* navigator: label on the left, "n of N" on the right */
.ex-nav-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--spacing-md); margin-bottom: var(--spacing-md);
}
.ex-nav-head .ex-nav-label { margin: 0; }
.ex-nav-count {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-fg-muted); white-space: nowrap;
}

/* client-bar chips: where in the workflow this stage sits, and the fixture flag */
.ex-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ex-chip {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--color-border-strong); color: var(--color-fg);
  background: var(--color-bg);
}
.ex-chip.is-fixture {
  border-style: dashed;
  border-color: var(--color-sponsor-text);
  color: var(--color-sponsor-text);
  letter-spacing: 0.08em;
}

/* the illustrative tag on the glass */
.ex-tag {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px dashed var(--color-border-strong); color: var(--color-fg-muted);
}

/* compare toggle: a real button, same height as the toggles beside it */
.ex-compare-btn {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-bg); color: var(--color-fg-muted); cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ex-compare-btn:hover { color: var(--color-fg); border-color: var(--color-border-strong); }
.ex-compare-btn[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-fg);
}

/* the compare panel: previous left, current right, the change list beneath */
.ex-cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); }
@media (max-width: 860px) { .ex-cmp-cols { grid-template-columns: 1fr; } }
.ex-cmp-col { background: var(--color-bg); min-width: 0; }
.ex-cmp-cap {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: 0; padding: 10px var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}
.ex-cmp-col .ex-frame-wrap { border: 0; }
.ex-changes-host:empty { display: none; }

/* the numbered change list, in the rail or inside the compare panel */
.ex-changes:empty { display: none; }
.ex-changes {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-sponsor);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg);
}
.ex-changes-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; color: var(--color-fg); margin: 0 0 var(--spacing-sm);
}
.ex-changes-list { margin: 0; padding-left: 1.2em; }
.ex-changes-list li { font-size: 13.5px; line-height: 1.55; color: var(--color-fg-muted); margin-bottom: 6px; }

/* the exact readout, built from stats + campaign; nothing typed by hand */
.ex-readout {
  margin: 0; padding: 10px var(--spacing-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.6; color: var(--color-fg-muted);
  overflow-wrap: anywhere;
}

/* the pre-send checklist rail */
.ex-cl-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-surface);
  padding: var(--spacing-md) var(--spacing-lg);
}
.ex-cl-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 13px; letter-spacing: 0.02em; color: var(--color-fg);
  margin: 0 0 var(--spacing-sm);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm);
}
.ex-cl-count {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-fg-muted); white-space: nowrap;
}
.ex-checklist { list-style: none; margin: 0; padding: 0; }
.ex-checklist li {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--color-border);
  font-size: 13px; line-height: 1.45;
}
.ex-checklist li:first-child { border-top: 0; }
.ex-cl-glyph { font-size: 13px; line-height: 1.45; color: var(--color-fg-muted); }
.ex-checklist li.is-pass .ex-cl-glyph { color: var(--color-accent); }
.ex-checklist li.is-fail .ex-cl-glyph { color: var(--color-urgent); }
.ex-checklist li.is-fail .ex-cl-item { font-weight: 600; }
.ex-cl-item { color: var(--color-fg); min-width: 0; }
.ex-cl-ev { display: block; font-size: 11.5px; color: var(--color-fg-muted); margin-top: 2px; }

.ex-wrap .ex-compare-btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ex-compare-btn { transition: none; }
}

/* Reserve the engine's height before it renders, so nothing below it moves when the
   manifest lands (CLS). The exhibit is always taller than one viewport, so the
   reservation never leaves a gap; if the manifest is missing, the honest empty-state
   message simply sits in a full-height box. */
#exhibit { min-height: 100vh; }

/* Viewport toggle: Mobile narrows every live frame to 375px (an iPhone-class width),
   centred on the surface band, so the email's own @media (max-width: 600px) rules fire
   inside the iframe: single column, stacked stats, full-width buttons. The frame keeps
   its height; the reader scrolls the email as a phone would. Contract tokens only (S1). */
.ex-glass.is-mobile .ex-frame-wrap { display: flex; justify-content: center; padding: var(--spacing-md) 0; }
.ex-glass.is-mobile .ex-frame {
  width: 375px;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}
.ex-glass.is-mobile .ex-cmp-col .ex-frame-wrap { padding: var(--spacing-md) var(--spacing-sm); }

/* ---------- rail density (2026-09-20, per Linards) ----------
   In the 360px rail the decision card's label | value grid left the value ~150px wide, so
   each answer wrapped to four lines and the rail ran far below the glass. Stack label
   above value in the rail, bring the body to the note's 14.5px, and tighten the changes
   list, so the rail sits beside the glass instead of under it. */
.ex-rail .decision-card { padding: var(--spacing-md) var(--spacing-lg); }
.ex-rail .decision-card-title { font-size: 17px; margin-bottom: var(--spacing-sm); }
.ex-rail .decision-card-fields { gap: 10px; }
.ex-rail .dc-field { grid-template-columns: 1fr; gap: 2px; align-items: start; }
.ex-rail .dc-field dt { font-size: 10.5px; }
.ex-rail .dc-field dd { font-size: 14.5px; line-height: 1.5; }
.ex-rail ol, .ex-rail ul { font-size: 13.5px; line-height: 1.45; }
.ex-rail ol li, .ex-rail ul li { padding: 5px 0; }

/* collapsible rail cards: checklist and change list fold to their headline */
.ex-fold > .ex-fold-sum { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.ex-fold > .ex-fold-sum::-webkit-details-marker { display: none; }
.ex-fold > .ex-fold-sum h2 { margin: 0; flex: 1; }
/* the affordance: a bordered "Show / Hide" pill with a chevron, so the header reads as a
   control and not a caption; the whole summary row is the hit area */
.ex-fold > .ex-fold-sum { margin: calc(-1 * var(--spacing-xs)) calc(-1 * var(--spacing-sm)); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); transition: background 160ms ease; }
.ex-fold > .ex-fold-sum:hover { background: var(--color-bg); }
.ex-fold > .ex-fold-sum::after {
  content: "Show \25BE";
  flex: none;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 9999px;
  padding: 5px 10px;
  line-height: 1;
}
.ex-fold[open] > .ex-fold-sum::after { content: "Hide \25B4"; }
.ex-fold[open] > .ex-fold-sum { margin-bottom: var(--spacing-xs); }
.ex-fold > .ex-fold-sum:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }