/* exhibit.css — the innovation layer for the BA email-journey 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); } }

.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.06;
  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 gets the loyalty accent on its active pill (Executive Club) */
.ex-segs.is-loyalty .ex-seg[aria-checked="true"] {
  background: var(--color-loyalty);
  border-color: var(--color-loyalty);
  color: var(--color-navy, #011e41);
}

/* ------------------------------------------------------------ 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: #061426; /* documented literal: a deep navy code ground (darker than --color-navy) for legible syntax */
  color: #dbe4f0; /* documented literal: pale ink for code on the #061426 ground, AA 12.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 BA 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-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg);
}
.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;
}
/* documented literal: #1c5b2e is an AA-safe success green (6.0:1 on white) for small text,
   deliberately darker than --color-success (#2e7d32) which is a fill, 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: #1c5b2e; border-color: #1c5b2e; }
.ex-conf.warn { color: var(--color-warning-text); border-color: var(--color-warning-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: #1c5b2e; border-color: #1c5b2e; background: rgba(28, 91, 46, 0.06); }
.ex-support.amp   { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-inverse-wash); }
.ex-support.static{ color: var(--color-warning-text); border-color: var(--color-warning-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: #1c5b2e; }
.ex-legend i.amp { background: var(--color-accent); }
.ex-legend i.static { background: var(--color-warning-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;
  border-left: 2px solid var(--color-accent);
  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 — navy 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; }
}