/* handover — page CSS for /handover/, and for that page only.
 *
 * The page chrome (topbar, framing prose, decision card, legal line) is the portfolio's:
 * neutral pack, Quicksand, house components. The EXHIBIT — the replay, its briefing, the
 * take-over and the outcome — is ported from the fin concept site and keeps that build's
 * skin, scoped under .fin-exhibit the same way the phone prototypes keep their packs.
 *
 * Every rule in the exhibit half below is carried over from the fin build's components
 * layer (its .replay, briefing, take-over, error and outcome bands), values unchanged.
 * The token scope block is that build's pack compressed to the slots this organism
 * reads. Provenance and the measured pairs live in the source repo; the numbers on the
 * lines are from its audit.
 */

/* ---- The exhibit face: Inter, self-hosted, both subsets ---- */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Page framing (portfolio chrome, neutral tokens) ---- */
/* The AI-disclosure line under the legal footer. Styled in journey.css for the bank
   journeys, which this page does not load, so the rule is restated here. */
.proto-legal-ai { display: block; margin-top: var(--spacing-xs); }

.hand-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--gutter) var(--spacing-4xl);
}
.hand-title { max-width: 24ch; margin-bottom: var(--spacing-lg); }
.hand-frame {
  display: grid;
  gap: var(--spacing-md);
  max-width: 65ch;
  margin-bottom: var(--spacing-xl);
}
.hand-context { max-width: 60ch; }
.hand-bet {
  font-size: var(--type-body);
  line-height: 1.6;
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
}
.hand-note {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-sm);
  max-width: 62ch;
}
.hand-after {
  margin-top: var(--spacing-2xl);
  display: grid;
  gap: var(--spacing-lg);
  max-width: 78ch;
}
.hand-full-case {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
}
.hand-full-case a { color: var(--color-accent-secondary); }

/* ============================================================
   THE EXHIBIT SCOPE. The fin build's pack, compressed to the slots this organism reads
   and scoped to the wrapper, so the neutral site pack never reaches inside the glass.
   Custom properties inherit downward only, and everything fin sits inside this div.
   ============================================================ */
.fin-exhibit {
  /* raw values (the only place a literal may appear, same rule as any pack) */
  --fin-ink:        #000000;
  --fin-off-black:  #111111;   /* primary buttons, dark ground */
  --fin-off-white:  #faf9f6;   /* the build's page ground */
  --fin-white:      #ffffff;
  --fin-blue:       #0007cb;   /* observed primary hover */
  --fin-blue-deep:  #000f83;
  --fin-orange:     #ff5600;   /* the signal; never text on light */
  --fin-grey-mid:   #626260;   /* 5.66:1 on the off-white ground */
  --fin-grey-line:  #7b7b78;   /* 3.93:1, clears the 3:1 non-text floor */

  /* contract slots, rebound for everything inside the wrapper */
  --color-fg:            var(--fin-ink);
  --color-fg-muted:      var(--fin-grey-mid);
  --color-bg:            var(--fin-off-white);
  --color-bg-surface:    var(--fin-white);
  --color-border:        var(--fin-grey-line);
  --color-border-strong: var(--fin-off-black);
  --color-accent:            var(--fin-off-black);
  --color-accent-hover:      var(--fin-blue);
  --color-accent-active:     var(--fin-blue-deep);
  --color-accent-fg:         var(--fin-white);
  --color-accent-secondary:  var(--fin-orange);
  --color-bg-inverse:        var(--fin-off-black);
  --color-fg-on-inverse-strong: var(--fin-white);
  --color-term-bg:   color-mix(in srgb, var(--color-fg) 7%, transparent);
  --color-term-line: color-mix(in srgb, var(--color-fg) 18%, transparent);

  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-weight-ui: 400;

  /* that build squares every corner; the rebind travels with the exhibit */
  --radius-sm: 0;
  --radius-md: 0;

  /* motion, from the source build's contract */
  --motion-fast:   160ms;
  --motion-base:   200ms;
  --motion-slow:   480ms;
  --motion-bounce: 300ms;
  --motion-rise:   20px;
  --motion-ease:   ease;
  --motion-ease-spring: linear(0, 0.004, 0.016, 0.035, 0.062, 0.096, 0.138, 0.187, 0.242, 0.304, 0.371, 0.443, 0.519, 0.598, 0.68, 0.763, 0.846, 0.918, 0.973, 1.007, 1.019, 1.016, 1.007, 1.001, 1);
  --motion-ease-bounce: linear(0, 0.063, 0.223 3.9%, 0.605 8.7%, 0.882 12.7%, 1.017 15.7%, 1.092 18.7%, 1.126 21.6%, 1.13 24.6%, 1.111 28%, 1.028 36.3%, 0.99 41.6%, 0.973 46.9%, 0.972 52.5%, 0.996 68.8%, 1.003 79.4%, 1);
  --motion-ease-settle: linear(0, 0.102, 0.199, 0.29, 0.373, 0.449, 0.518, 0.581, 0.638, 0.689, 0.735, 0.775, 0.811, 0.843, 0.871, 0.895, 0.916, 0.934, 0.949, 0.962, 0.972, 0.98, 0.987, 0.992, 0.995, 0.998, 0.999, 1);

  font-family: var(--font-body);
  font-weight: var(--font-weight-ui);
  color: var(--color-fg);
}

/* ---- Buttons (the source build's voice, scoped to the exhibit) ---- */
.fin-exhibit .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-display);
  font-weight: var(--font-weight-ui);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--motion-base) var(--motion-ease), color var(--motion-base) var(--motion-ease), transform var(--motion-bounce) var(--motion-ease-bounce);
  text-decoration: none;
  line-height: 1;
}
.fin-exhibit .btn:active { transform: scale(0.96); transition-duration: var(--motion-base), var(--motion-base), var(--motion-fast); }
.fin-exhibit .btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}
.fin-exhibit .btn-primary:hover  { background: var(--color-accent-hover); color: var(--color-accent-fg); }
.fin-exhibit .btn-primary:active { background: var(--color-accent-active); color: var(--color-accent-fg); }
.fin-exhibit .btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
}
.fin-exhibit .btn-secondary:hover { background: var(--color-bg-inverse); color: var(--color-fg-on-inverse-strong); }
.fin-exhibit .btn-ghost {
  background: transparent;
  color: var(--color-fg);
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-strong);
  letter-spacing: 0.14em;
}
.fin-exhibit .btn-ghost:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ---- Conversation replay (organism), carried over verbatim ---- */
.replay {
  display: grid;
  gap: var(--spacing-lg);
  max-width: 78ch;
}
/* The hidden attribute has to win: .replay-error sets display, which would beat the UA's
   [hidden] rule on specificity. Scoped to this band's own three toggling regions. */
.replay [hidden] { display: none; }

.replay-label {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-fg);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-surface);
}

.replay-transport {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.replay-transport .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.replay-glass {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  max-height: 460px;
  overflow-y: auto;
}

.replay-transcript {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--spacing-md);
}

.replay-turn {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  max-width: 52ch;
}
.replay-turn-agent { margin-left: auto; }
.replay-turn-human { margin-left: auto; }

.replay-speaker {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-xs);
}
.replay-text {
  font-size: var(--type-body);
  line-height: 1.6;
}

/* ---- The machine literal ---- */
.term {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-term-bg);
  border: 1px solid var(--color-term-line);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.32em;
  white-space: nowrap;
}

.replay-status {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
}

/* ---- The escalation card ---- */
.replay-escalation {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}
.replay-escalation-title { margin-bottom: var(--spacing-lg); }

.replay-fields {
  margin: 0 0 var(--spacing-xl);
  display: grid;
  gap: var(--spacing-lg);
}
.replay-field {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--spacing-md);
  align-items: baseline;
}
.replay-field dt {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.replay-field dd { margin: 0; }
.replay-value { line-height: 1.55; }
.replay-field-source,
.replay-hedge-source,
.replay-citation-id {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  margin-top: var(--spacing-xs);
}

.replay-hedge {
  margin-top: var(--spacing-md);
  padding-left: var(--spacing-md);
}
.replay-hedge-label {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.replay-hedge-quote,
.replay-citation-quote {
  margin: var(--spacing-xs) 0 0;
  font-size: var(--type-body);
  line-height: 1.6;
  white-space: pre-line;
}

.replay-sources-title {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-md);
}
.replay-citations {
  margin: 0;
  padding-left: var(--spacing-lg);
  display: grid;
  gap: var(--spacing-md);
}
.replay-citation-url {
  display: inline-block;
  margin-top: var(--spacing-xs);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-accent);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* ---- The handover briefing (organism) ---- */
.briefing {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}
.briefing-title { margin-bottom: var(--spacing-sm); }
.briefing-intro {
  font-size: var(--type-caption);
  line-height: 1.6;
  color: var(--color-fg-muted);
  margin-bottom: var(--spacing-lg);
  max-width: 60ch;
}
.briefing-fields {
  margin: 0;
  display: grid;
  gap: var(--spacing-lg);
}
.briefing-field {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--spacing-md);
  align-items: baseline;
}
.briefing-field dt {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.briefing-field dd { margin: 0; }
.briefing-value { line-height: 1.55; }
.briefing-provenance {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  margin-top: var(--spacing-xs);
}
.briefing-provenance-designed { font-family: var(--font-body); }

/* ---- The take-over (organism) ---- */
.provenance-marker {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-fg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}
.provenance-marker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  flex-shrink: 0;
}
.provenance-marker[data-provenance="human"] {
  color: var(--color-fg);
  border-color: var(--color-accent-secondary);
}
.provenance-marker[data-provenance="human"]::before {
  background: var(--color-accent-secondary);
}

.takeover {
  display: grid;
  gap: var(--spacing-md);
}
.takeover > .btn { justify-self: start; }

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sm);
  max-width: 52ch;
}
.composer-label {
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.composer-input {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-fg);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  width: 100%;
  resize: vertical;
}
.composer-input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.composer-input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--color-bg);
}
.composer-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}
.takeover .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.composer-error {
  font-size: var(--type-caption);
  line-height: 1.5;
  color: var(--color-fg);
}
.composer-status {
  font-family: var(--font-body);
  font-size: var(--type-caption);
  line-height: 1.5;
  color: var(--color-fg-muted);
}

/* ---- The outcome (page organism, from the source page's own CSS) ---- */
.outcome {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}
.outcome-title { margin-bottom: var(--spacing-sm); }
.outcome-title:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.outcome-intro {
  color: var(--color-fg-muted);
  line-height: 1.55;
  margin-bottom: var(--spacing-lg);
}
.outcome-fields {
  margin: 0;
  display: grid;
  gap: var(--spacing-lg);
}
.outcome-field {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: var(--spacing-md);
  align-items: baseline;
}
.outcome-field dt {
  font-family: var(--font-display);
  font-size: var(--type-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
}
.outcome-field dd { margin: 0; }
.outcome-value {
  line-height: 1.55;
  color: var(--color-fg);
  overflow-wrap: anywhere;
}
.outcome-provenance {
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
  margin-top: var(--spacing-xs);
}
.outcome-provenance-designed { font-family: var(--font-body); }
.outcome-next {
  display: block;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
}

/* ---- The error state ---- */
.replay-error {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  display: grid;
  gap: var(--spacing-sm);
}
.replay-error-title { font-family: var(--font-display); }
.replay-error-list {
  margin: 0;
  padding-left: var(--spacing-lg);
  font-family: var(--font-mono);
  font-size: var(--type-caption);
  color: var(--color-fg-muted);
}

/* ---- Turn entry, gated on no-preference alone ---- */
@media (prefers-reduced-motion: no-preference) {
  .replay-turn {
    animation: replay-turn-in var(--motion-slow) var(--motion-ease-settle) both;
  }
}
@keyframes replay-turn-in {
  from { opacity: 0; translate: 0 calc(var(--motion-rise) / 2); }
  to   { opacity: 1; translate: 0 0; }
}

@media (max-width: 700px) {
  .replay-field { grid-template-columns: 1fr; gap: var(--spacing-xs); }
  .replay-turn { max-width: none; }
  .briefing-field { grid-template-columns: 1fr; gap: var(--spacing-xs); }
  .outcome-field { grid-template-columns: 1fr; gap: var(--spacing-xs); }
}