/* ===========================================================================
   Preflight
   ---------------------------------------------------------------------------
   The idea: an instrument panel wrapped around a sheet of paper.

   The chrome is dark, dense, and monospaced — it is machinery, and it should
   read as machinery. The report itself is warm paper with serif type, because
   it *is* a document and it will end up in Word. Keeping those two registers
   visually separate is the whole design: you always know whether you are
   looking at what the tool thinks, or at what you are about to hand a customer.

   No web fonts, no CDN, no third-party CSS. The strict CSP this ships with is
   only credible because there is nothing external to allow.
   ======================================================================== */

:root {
  /* Carahsoft blue (#3560ab, sampled from the logo) is the brand constant.
     Everything else is a light, corporate neutral built around it. */
  --brand:      #3560ab;
  --brand-dark: #2a4d8a;
  --brand-lift: #4a76c0;
  --brand-ink:  #ffffff;

  --ink:        #eef1f6;   /* app background */
  --panel:      #ffffff;   /* raised surfaces */
  --panel-2:    #f4f7fb;   /* hover / alternate surface */
  --raise:      #e8edf5;
  --line:       #d7dfea;
  --line-soft:  #e8edf4;

  --text:       #16202e;
  /* Both darker than they look like they need to be: the app uses 10.5px mono
     for labels and footer text, which needs 4.5:1 — the values that read as
     "muted" on a dark theme fail outright on a light one. */
  --dim:        #46536a;
  --faint:      #5f6d85;

  --accent:     #2f66c9;   /* a step brighter than the logo blue, for chrome */
  --accent-dim: #cbdcf7;   /* selection background */
  --accent-ink: #27528f;   /* on white, darker so it can carry text */

  /* Status colours are darkened for a light background — the old set was
     tuned for near-black and washes out completely on white. */
  --ok:         #0a8f52;
  --warn:       #b26a00;
  /* Amber text sitting on an amber tint loses ~1 point of contrast against the
     same colour on plain white. Use this wherever both are amber. */
  --warn-ink:   #8a5200;
  --miss:       #c62828;   /* vivid, but still 4.5:1 on the tinted surfaces */

  --paper:      #ffffff;
  --paper-2:    #f7f9fc;
  --paper-ink:  #16202e;
  --paper-dim:  #5b6675;
  --paper-line: #dde4ee;

  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Menlo,
          Consolas, monospace;

  --r-sm: 5px;
  --r:    9px;
  --r-lg: 14px;

  /* Light-theme shadows: tinted with the brand hue rather than pure black,
     which reads grubby on a blue-grey background. */
  --shadow: 0 1px 2px rgba(22,42,80,.06), 0 6px 20px rgba(22,42,80,.08);
  --shadow-paper: 0 1px 2px rgba(22,42,80,.07), 0 14px 40px rgba(22,42,80,.11);

  --deck-h: 58px;
}

* { box-sizing: border-box; }

/* The UA rule for [hidden] is `display: none`, which any author rule setting
   `display` silently beats — and `.btn` sets `inline-flex`. That made the
   `hidden` property a no-op on every button in the app: "Stop & build report"
   showed while idle and the controls never swapped on start. Author-level and
   !important so it wins wherever it is applied. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Faint instrument grid. Sits behind everything, never competes. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

::selection { background: var(--accent-dim); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ═══ Deck (top bar) ══════════════════════════════════════════════════════ */

.deck {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--deck-h);
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  /* Solid Carahsoft blue — this bar is the brand, so it does not tint or
     blur. Everything inside it is white-on-blue and sets its own colours
     rather than inheriting the light-surface ones. */
  background: var(--brand);
  border-bottom: 1px solid var(--brand-dark);
  color: var(--brand-ink);
}

.deck__brand { display: flex; align-items: center; gap: 11px; }

.mark { width: 27px; height: 27px; fill: none; stroke-linecap: round; }
.mark__ring   { stroke: rgba(255,255,255,.45); stroke-width: 1.6; }
.mark__needle { stroke: var(--brand-ink); stroke-width: 2.2; }
.mark__base   { stroke: rgba(255,255,255,.55); stroke-width: 1.6; }
.mark__pin    { fill: var(--brand-ink); stroke: none; }

.deck__title { display: flex; flex-direction: column; line-height: 1.15; }
.deck__title strong {
  font-size: 15px;
  letter-spacing: .01em;
}
.deck__title span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

.deck__nav { display: flex; gap: 4px; justify-self: center; }

.tab {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 6px 13px;
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  transition: color .15s, background .15s, border-color .15s;
}
.tab:hover { color: var(--brand-ink); background: rgba(255,255,255,.12); }
.tab.is-on {
  color: var(--brand-ink);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

.deck__meta { display: flex; align-items: center; gap: 16px; }

.chips { display: flex; gap: 6px; }
.chip {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 20px;
  padding: 3px 9px;
  white-space: nowrap;
}
.chip--live {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.22);
}

.who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-size: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.linkish:hover { color: var(--brand-dark); }

/* Sign-out sits inside the blue header, where the brand-blue link colour
   would be invisible. */
.who .linkish { color: rgba(255,255,255,.9); text-decoration-color: rgba(255,255,255,.5); }
.who .linkish:hover { color: var(--brand-ink); }

/* ═══ Views ═══════════════════════════════════════════════════════════════ */

/* `flex: 1 0 auto` — grow to fill a short page, but never shrink below the
   content. With `1 1 auto` (and the `min-height: 0` that used to be here) a
   tall view was compressed into a shorter box and its overflow painted
   straight over the footer. */
#main { position: relative; z-index: 1; flex: 1 0 auto; }

.view { display: none; }
body[data-view="auth"]    .view[data-view="auth"],
body[data-view="new"]     .view[data-view="new"],
body[data-view="job"]     .view[data-view="job"],
body[data-view="report"]  .view[data-view="report"],
body[data-view="library"] .view[data-view="library"] { display: block; }

/* Centred views use auto margins rather than `place-items: center`.
   Centring via alignment clips the *start* edge once content is taller than
   the container — the top of the panel becomes unreachable, scrolled off
   above the viewport. Auto margins centre without ever clipping. */
.view--center {
  min-height: calc(100vh - var(--deck-h) - 42px);
  display: none;
  padding: 40px 20px;
}
body[data-view="auth"] .view[data-view="auth"],
body[data-view="job"]  .view[data-view="job"] { display: flex; }
.view--center > * { margin: auto; }

/* ═══ Buttons & fields ════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-size: 14px;
  transition: background .15s, border-color .15s, transform .08s;
}
.btn:hover:not(:disabled) { background: var(--raise); border-color: #33405269; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.btn--primary:hover:not(:disabled) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn--lg { padding: 13px 30px; font-size: 15.5px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }

.field { display: block; margin-bottom: 15px; }
.field--half { display: inline-block; width: calc(50% - 7px); vertical-align: top; }
.field--half + .field--half { margin-left: 12px; }

.field__label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}
.field__label em { font-style: normal; opacity: .6; text-transform: none; letter-spacing: 0; }

.field__input, .field__area {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.field__input:focus, .field__area:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel-2);
}
.field__input::placeholder, .field__area::placeholder { color: var(--faint); }
.field__area { resize: vertical; font-family: var(--mono); font-size: 13px; line-height: 1.6; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--dim); }
.check input { margin-top: 3px; accent-color: var(--accent); }
.check--sm { font-size: 12.5px; padding: 4px 2px; }
.check code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--panel);
  padding: 1px 4px;
  border-radius: 3px;
}

.hint { font-size: 12.5px; color: var(--faint); margin: 6px 0 0; }

/* ═══ Sign in ═════════════════════════════════════════════════════════════ */

.gate {
  width: min(400px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
  box-shadow: var(--shadow);
}
.gate__h { margin: 0 0 6px; font-size: 21px; letter-spacing: -.01em; }
.gate__p { margin: 0 0 22px; color: var(--dim); font-size: 14px; }
.gate__error {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--miss) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--miss) 40%, transparent);
  color: var(--miss);
  font-size: 13.5px;
}
.gate__form .btn { width: 100%; }
#entraButton { width: 100%; }

/* ═══ Intake ══════════════════════════════════════════════════════════════ */

.intake { max-width: 880px; margin: 0 auto; padding: 52px 24px 80px; }

.intake__head h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -.022em;
  font-weight: 600;
}
.intake__head p {
  margin: 0 0 36px;
  color: var(--dim);
  font-size: 16px;
  max-width: 62ch;
}

/* Configuration problems — shown before anyone wastes a transcript. */
.setup {
  background: color-mix(in srgb, var(--miss) 9%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--miss) 38%, transparent);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 22px;
}
.setup h3 { margin: 0 0 8px; font-size: 14px; color: var(--miss); }

/* Something is missing, but the core path still works — amber, not red. */
.setup--partial {
  background: color-mix(in srgb, var(--warn) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}
.setup--partial h3 { color: var(--warn); }
.setup ul { margin: 0 0 10px; padding-left: 18px; }
.setup li { font-size: 13.5px; color: var(--dim); margin-bottom: 4px; line-height: 1.5; }
.setup__how { margin: 0; font-size: 12.5px; color: var(--faint); line-height: 1.5; }
.setup code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--ink);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Source-quality note on the paste box and the report. */
.srcnote {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.5;
}
.srcnote--ok   { color: var(--ok); }
.srcnote--warn { color: var(--warn); }

.untimed {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--warn);
  line-height: 1.5;
}

/* Report kind — the first decision, so it reads heavier than the input mode. */
.kinds {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 26px;
}
.kind {
  position: relative;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.kind:hover { background: var(--panel-2); }
.kind.is-on {
  background: var(--panel-2);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.kind__n {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}
.kind.is-on .kind__n { color: var(--accent); }
.kind__d { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.45; }

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }

.mode {
  position: relative;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 15px 15px 15px 17px;
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.mode::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
  transition: background .15s;
}
.mode:hover { background: var(--panel-2); }
.mode.is-on { background: var(--panel-2); border-color: var(--line); }
.mode.is-on::before { background: var(--accent); }

.mode__k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--faint);
  margin-bottom: 7px;
}
.mode__n { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.mode__d { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.4; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  margin-bottom: 22px;
}

/* Drop zone */
.drop {
  display: grid;
  place-items: center;
  gap: 6px;
  padding: 46px 20px;
  border: 1.5px dashed var(--line);
  border-radius: var(--r);
  background: var(--ink);
  text-align: center;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.is-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--ink));
}
.drop__icon {
  width: 40px; height: 40px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: 4px;
}
.drop.is-over .drop__icon { stroke: var(--accent); }
.drop__lead { margin: 0; font-size: 16px; font-weight: 600; }
.drop__sub { margin: 0; font-size: 13px; color: var(--dim); }
.drop__formats {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--faint);
  max-width: 46ch;
  line-height: 1.45;
}

.picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.picked__info { display: flex; flex-direction: column; min-width: 0; }
.picked__info strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picked__info span { font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* Live */
/* Brand blue, not amber. This is an instruction to read, not a warning that
   something is wrong — colouring it like an error made the whole first screen
   feel like a problem. Red and amber stay reserved for things that actually
   went wrong. */
.consent {
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 18px;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.consent h3 { margin: 0 0 7px; font-size: 14px; color: var(--accent-ink); }
.consent p { margin: 0 0 12px; font-size: 13.5px; color: var(--dim); }

/* Set when someone hits record without ticking the box. */
.consent.is-asking {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* The gate. Big enough to notice, because missing it stops the whole tab. */
.check--consent { font-size: 14px; color: var(--text); align-items: center; }
.check--consent input {
  width: 18px;
  height: 18px;
  margin-top: 0;
  cursor: pointer;
  accent-color: var(--accent);
}
.check--consent span { cursor: pointer; }

.live__status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--dim);
  margin-bottom: 14px;
}
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--faint);
  flex: 0 0 auto;
}
.dot.is-live { background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.live__clock { margin-left: auto; font-variant-numeric: tabular-nums; }
/* ── The recording instrument ────────────────────────────────────────────
   Centred column: sphere, state, level, controls. The sphere is the point —
   everything else is sized to stay out of its way. */

.rec { display: grid; justify-items: center; text-align: center; }

.rec__orb {
  position: relative;
  display: grid;
  place-items: center;
  /* Sized here rather than on the canvas so the halo pseudo-element and the
     canvas always agree, and so the level meter below can match the same
     width literally. */
  width: min(300px, 70vw);
  margin-bottom: 6px;
}
.rec__orb canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}
/* Halo behind the canvas, same hue as BRAND_HUE in sphere.js. */
.rec__orb::before {
  content: "";
  position: absolute;
  width: min(330px, 76vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    hsla(218, 78%, 55%, .16) 0%,
    hsla(218, 78%, 48%, .06) 48%,
    transparent 72%);
  pointer-events: none;
}

/* Input level. Deliberately literal: a flat bar while people are talking is
   the fastest way to notice the share carried no audio. */
.meter {
  width: min(300px, 70vw);
  height: 3px;
  border-radius: 999px;
  background: var(--raise);
  overflow: hidden;
  margin-bottom: 16px;
}
.meter__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(218, 72%, 45%), hsl(218, 85%, 60%));
  transition: width .09s linear;
}

/* The one button this tab is about. */
.btn--rec {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 26px;
}
.btn--rec:hover:not(:disabled) {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.btn__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
}
.btn--rec:not(:disabled) .btn__dot { animation: recPulse 1.7s ease-in-out infinite; }
@keyframes recPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.8); }
}
.btn--stop { border-color: var(--miss); color: var(--miss); }
.btn--stop:hover:not(:disabled) {
  background: color-mix(in srgb, var(--miss) 10%, transparent);
}

.live__h {
  margin: 22px 0 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .btn--rec .btn__dot { animation: none; }
  .meter__fill { transition: none; }
}

.live__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: center;
}
.live__note {
  margin: 0 0 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--faint);
  max-width: 62ch;
}
.live__note strong { color: var(--dim); font-weight: 600; }

.live__feed {
  max-height: 280px;
  overflow-y: auto;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.65;
}
.live__empty { margin: 0; color: var(--faint); font-style: italic; }
.live__line { margin: 0 0 8px; }
.live__line b { color: var(--accent); font-weight: 600; font-size: 12.5px; }

/* Shared details + go */
.details { margin-bottom: 26px; }

.go { display: flex; align-items: center; gap: 16px; }
.go__note { margin: 0; font-size: 13px; color: var(--faint); }

/* ═══ Run (processing) ════════════════════════════════════════════════════ */

.run { width: min(520px, 100%); text-align: center; }
.run__h { margin: 0 0 6px; font-size: 24px; letter-spacing: -.015em; }
.run__msg { margin: 0 0 26px; color: var(--dim); min-height: 24px; }

/* ── The working orb ─────────────────────────────────────────────────────
   Carahsoft blue, matching BRAND_HUE in sphere.js — keep the two in step or
   the halo and the sphere drift apart. Drawn in sphere.js; the percentage
   lives in the bar below rather than inside the sphere. */

.orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0 auto 22px;
  min-height: 200px;
}
.orb canvas {
  display: block;
  width: min(320px, 78vw);
  height: auto;
  aspect-ratio: 1;
}
/* Soft halo behind the canvas so it sits in the page rather than on it. */
.orb::before {
  content: "";
  position: absolute;
  width: min(360px, 84vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    hsla(218, 78%, 55%, .20) 0%,
    hsla(218, 78%, 48%, .09) 45%,
    transparent 72%);
  pointer-events: none;
}
body[data-orb="failed"] .orb::before {
  background: radial-gradient(
    circle,
    hsla(6, 85%, 55%, .12) 0%,
    transparent 70%);
}

/* ── Progress bar ────────────────────────────────────────────────────────
   Carries the number the sphere used to print in its middle. The sphere shows
   that work is happening; the bar says how far along and at what. */

.bar {
  width: min(360px, 82vw);
  height: 7px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--raise);
  border: 1px solid var(--line);
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    hsl(218, 72%, 40%),
    hsl(218, 80%, 55%));
  /* Width is set from JS. Easing it here means a jump from 6% to 66% sweeps,
     matching the arc on the sphere rather than racing it. The creep between
     server events uses small steps, so the easing has to be short enough not
     to lag behind them. */
  transition: width .35s cubic-bezier(.22, .61, .36, 1), background .3s;
}
.bar.is-failed .bar__fill {
  background: linear-gradient(90deg, hsl(6, 70%, 45%), hsl(6, 85%, 58%));
  box-shadow: none;
}

.bar__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: min(320px, 78vw);
  margin: 0 auto 24px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--dim);
}
.bar__pct { color: var(--faint); font-variant-numeric: tabular-nums; }

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

.steps {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  display: grid;
  gap: 10px;
  text-align: left;
  max-width: 260px;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: var(--faint);
  transition: color .25s;
}
.steps li span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  flex: 0 0 auto;
  transition: background .25s, box-shadow .25s;
}
.steps li.is-now { color: var(--brand-dark); }
.steps li.is-now span {
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(53,96,171,.20);
  animation: stepPulse 1.6s ease-in-out infinite;
}
@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(53,96,171,.24); }
  50%      { box-shadow: 0 0 0 7px rgba(53,96,171,.06); }
}
.steps li.is-done { color: var(--dim); }
.steps li.is-done span { background: var(--ok); box-shadow: none; animation: none; }

.run__hint { font-size: 12.5px; color: var(--faint); margin: 0; }

.run__fail {
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--r);
  background: color-mix(in srgb, var(--miss) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--miss) 36%, transparent);
  text-align: left;
}
.run__fail p { margin: 0 0 14px; color: var(--miss); font-size: 14px; }
.run__failActions { display: flex; gap: 10px; }

/* ═══ Report workspace ════════════════════════════════════════════════════ */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 0;
  height: calc(100vh - var(--deck-h) - 42px);
}

/* --- Paper ------------------------------------------------------------- */

.paper {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 22px 26px 26px;
}

.paper__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex: 0 0 auto;
}
.paper__state { display: flex; align-items: center; gap: 12px; }

.badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn-ink);
}
.badge.is-ok {
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  color: var(--ok);
}
.saved { font-size: 12px; color: var(--faint); font-family: var(--mono); }

.paper__tools { display: flex; align-items: center; gap: 8px; }

.menu { position: relative; }
.menu__pop {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 30;
  width: 258px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 10px;
}
.menu__pop .check { margin-bottom: 6px; }
.menu__item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--text);
}
.menu__item:hover { background: var(--raise); }
.menu__item--warn { color: var(--miss); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); }

/* The sheet itself */
.sheet {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  box-shadow: var(--shadow-paper);
  padding: 54px clamp(34px, 6%, 68px) 72px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.62;
  /* Barely-there paper tooth. */
  background-image: repeating-linear-gradient(
    0deg, rgba(0,0,0,.014) 0 1px, transparent 1px 3px);
}

.sheet__title {
  margin: 0 0 14px;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.01em;
  color: #0f4761;              /* matches Heading1 in the Word template */
}
.sheet__by { margin: 0 0 4px; font-size: 15px; }
.sheet__rule {
  border: 0;
  border-top: 2px solid #156082;   /* accent1, as in the template */
  margin: 14px 0 26px;
}
.sheet__h {
  margin: 30px 0 10px;
  font-size: 17px;
  font-weight: 400;
  color: #595959;                  /* Subtitle colour from the template */
  font-family: var(--sans);
  letter-spacing: .004em;
}
.sheet__h:first-of-type { margin-top: 0; }

.sheet p { margin: 0 0 10px; }

/* Editable regions */
.edit {
  display: block;
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px 8px;
  transition: background .12s, box-shadow .12s;
  min-height: 1.6em;
}
.edit:hover { background: rgba(0,0,0,.035); }
.edit:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-ink) 45%, transparent);
}
.edit--inline { display: inline; min-height: 0; }
.edit:empty::before {
  content: attr(data-empty);
  color: var(--paper-dim);
  font-style: italic;
}
.edit--head { font-size: 15px; }

/* Bullet rows in the sheet */
.row {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 8px;
  margin-bottom: 11px;
  align-items: start;
}
.row__dot { color: var(--paper-dim); line-height: 1.62; user-select: none; }
.row__body { min-width: 0; }
.row__tools {
  position: absolute;
  right: -6px;
  top: 0;
  opacity: 0;
  transition: opacity .12s;
}
.row:hover .row__tools, .row:focus-within .row__tools { opacity: 1; }
.row__kill {
  background: none;
  border: 0;
  color: var(--paper-dim);
  font-size: 16px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
}
.row__kill:hover { color: var(--accent-ink); background: rgba(0,0,0,.05); }

.uc__title { font-weight: 600; }
.uc__driver {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--paper-dim);
  margin-top: 2px;
}

/* "Ana Reyes:" lead-in before a question. */
.edit--lead {
  display: inline-block;
  font-weight: 600;
  margin-right: 5px;
  min-height: 0;
}
.edit--lead:not(:empty)::after { content: ":"; }

/* An unanswered question is the actionable item in a recap — mark it. */
.qa__open {
  color: #9a6b12;
  font-weight: 600;
}

.act__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px; }
.act__inline { display: inline-block; min-height: 0; min-width: 60px; }
.act__side {
  background: rgba(21,96,130,.1);
  border: 1px solid rgba(21,96,130,.3);
  color: #10556f;
  border-radius: 20px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  padding: 0 8px;
  line-height: 1.6;
}
/* "Theirs" — an action item the customer owns. Amber rather than the brand
   colour, so it stays legible as *not ours* now that the brand is blue. */
.act__side[data-value="0"] {
  background: rgba(138,90,0,.10);
  border-color: rgba(138,90,0,.30);
  color: #8a5a00;
}
.act__side:hover { filter: brightness(.94); }

.addrow {
  background: none;
  border: 1px dashed var(--paper-line);
  border-radius: var(--r-sm);
  color: var(--paper-dim);
  font-family: var(--sans);
  font-size: 12.5px;
  padding: 5px 12px;
  margin-top: 4px;
}
.addrow:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

/* Citation chips — the load-bearing interaction of the whole product */
.cites { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 7px; vertical-align: baseline; }
.cite {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  padding: 1px 7px 1px 6px;
  border-radius: 20px;
  background: rgba(21,96,130,.09);
  border: 1px solid rgba(21,96,130,.28);
  color: #10556f;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.cite:hover { background: #156082; color: #fff; border-color: #156082; }
.cite.is-active { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.flag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9a6b12;
  background: rgba(233,180,76,.2);
  border: 1px solid rgba(233,180,76,.5);
  border-radius: 20px;
  padding: 1px 7px;
  margin-left: 7px;
  white-space: nowrap;
}

.sheet__empty { color: var(--paper-dim); font-style: italic; }

/* --- Rail -------------------------------------------------------------- */

.rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--panel);
  border-left: 1px solid var(--line);
  overflow: hidden;
}

.rail__tabs {
  display: flex;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
}
.rtab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 14px 13px 12px;
  font-size: 13px;
  color: var(--faint);
  transition: color .15s, border-color .15s;
}
.rtab:hover { color: var(--dim); }
.rtab.is-on { color: var(--text); border-bottom-color: var(--accent); }

.rpane { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.rpane[hidden] { display: none; }

.rail__note { font-size: 12.5px; color: var(--faint); line-height: 1.5; margin: 0 0 16px; }
.rail__h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 24px 0 9px;
}
.rail__h:first-child { margin-top: 0; }

/* Coverage */
.score { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.score__num {
  font-family: var(--mono);
  font-size: 42px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.score__lbl {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1.5;
}
.score__sub { display: block; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }

/* ── CarahSell ───────────────────────────────────────────────────────────
   A paste surface, not a document. Monospaced values, one row per CRM field,
   in the CRM's own order — the rep reads this with the form open next to it. */

/* Live coaching. Sits above the transcript on purpose: the transcript is a
   record, this is the thing the rep should act on in the next thirty seconds,
   and it loses its value entirely if they have to scroll to find it. */

.coach {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
  padding: 16px 18px;
  margin: 16px 0;
}
.coach__headline {
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
}
.coach__h {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.coach__asks { list-style: none; margin: 0 0 16px; padding: 0; }
.coach__ask {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}
.coach__ask:first-child { border-top: 0; }
.coach__ask > span:first-child { flex: 1 1 auto; }
.coach__ask .cs__copy { opacity: 0; }
.coach__ask:hover .cs__copy,
.coach__ask .cs__copy:focus-visible { opacity: 1; }

.coach__watch {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.55;
  color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}

.coach__cov {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 3px 14px;
}
.coach__area {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--faint);
}
.coach__mark {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  flex: 0 0 auto;
}
.coach__area[data-state="covered"] { color: var(--dim); }
.coach__area[data-state="covered"] .coach__mark {
  background: var(--ok);
  border-color: var(--ok);
}

.hint[data-state="ok"]   { color: var(--ok); }
.hint[data-state="warn"] { color: var(--warn); }

.cs__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rail__h--flush { margin-top: 0; }
.rail__note--tight { margin-bottom: 0; max-width: 34ch; }

.cs__warn {
  font-size: 12px;
  line-height: 1.5;
  color: var(--warn-ink);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin: 0 0 14px;
}

.cs { margin: 0; padding: 0; }
.cs__row {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line-soft);
  padding: 7px 0;
}
.cs__row--wide { grid-template-columns: 1fr; gap: 5px; }
.cs__row:hover { background: var(--panel-2); }

.cs__k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 4px;
}
.cs__v {
  margin: 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.cs__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  padding-top: 2px;
  /* Comments run to a paragraph; everything else is a single value. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The copy control is an icon, not the value itself — a whole paragraph of
   Comments being one giant button read as a mistake. */
.cs__copy {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--faint);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: background .12s, border-color .12s, color .12s;
}
.cs__copy svg { width: 14px; height: 14px; grid-area: 1 / 1; }
.cs__copy .i-tick { opacity: 0; }

.cs__row:hover .cs__copy { color: var(--dim); border-color: var(--line); }
.cs__copy:hover { background: var(--panel-2); color: var(--accent); border-color: var(--accent); }

.cs__copy.is-copied { color: var(--ok); border-color: var(--ok); background: none; }
.cs__copy.is-copied .i-copy { opacity: 0; }
.cs__copy.is-copied .i-tick { opacity: 1; }
.cs__copy.is-copyfail { color: var(--warn); border-color: var(--warn); }

.cs__empty {
  font-family: var(--mono);
  font-size: 12.5px;
  font-style: italic;
  color: var(--faint);
  padding: 3px 0;
  display: inline-block;
}

.cs__why { margin-top: 22px; }
.cs__why-line {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dim);
  margin: 0 0 8px;
}
.cs__why-label { color: var(--text); font-weight: 600; }

.cov { list-style: none; margin: 0; padding: 0; }
.covitem {
  border-top: 1px solid var(--line-soft);
  padding: 11px 0;
}
.covitem__head { display: flex; align-items: center; gap: 9px; }
.covitem__bar { width: 4px; height: 26px; border-radius: 2px; background: var(--line); flex: 0 0 auto; }
.covitem[data-status="covered"] .covitem__bar { background: var(--ok); }
.covitem[data-status="partial"] .covitem__bar { background: var(--warn); }
.covitem[data-status="missed"]  .covitem__bar { background: var(--miss); }
.covitem__name { font-size: 13.5px; flex: 1 1 auto; }
.covitem__tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.covitem__find { font-size: 12.5px; color: var(--dim); margin: 6px 0 0 13px; line-height: 1.5; }
.covitem__cites { margin: 7px 0 0 13px; display: flex; flex-wrap: wrap; gap: 5px; }

.pill {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--dim);
}
.pill:hover { border-color: var(--accent); color: var(--accent); }
.pill.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Transcript */
.player { margin-bottom: 14px; }
.player audio { width: 100%; height: 34px; }
.finder { margin-bottom: 12px; }

.tx { font-size: 13.5px; line-height: 1.6; }
.txline {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  scroll-margin: 90px;
  transition: background .18s;
}
.txline:hover { background: var(--panel-2); }
.txline.is-hit { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.txline__t {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
  padding-top: 2px;
  background: none;
  border: 0;
  text-align: left;
}
.txline__t:hover { color: var(--accent); }
.txline__s { color: var(--accent); font-weight: 600; margin-right: 5px; }
.txline__x { color: var(--dim); }
.txline.is-hit .txline__x { color: var(--text); }
.txline mark { background: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--text); border-radius: 2px; }

/* Prep notes */
.prov { margin: 0; font-size: 12.5px; }
.prov dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 10px;
}
.prov dd { margin: 2px 0 0; color: var(--dim); word-break: break-word; }

/* Notes list rows reuse .row but on dark */
.rpane .row__dot { color: var(--faint); }
.rpane .edit { color: var(--text); }
.rpane .edit:hover { background: var(--panel-2); }
.rpane .edit:focus { background: var(--panel-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.rpane .edit:empty::before { color: var(--faint); }
.rpane .addrow { border-color: var(--line); color: var(--faint); }
.rpane .addrow:hover { border-color: var(--accent); color: var(--accent); }
.rpane .row__kill { color: var(--faint); }
.rpane .row__kill:hover { color: var(--miss); background: var(--panel-2); }

/* ═══ Library ═════════════════════════════════════════════════════════════ */

.lib { max-width: 940px; margin: 0 auto; padding: 46px 24px 80px; }
.lib__head { margin-bottom: 26px; }
.lib__head h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: -.02em; }
.lib__head p { margin: 0; color: var(--dim); font-size: 14px; }

.lib__list { display: grid; gap: 9px; }

.card {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 0;
  overflow: hidden;
  text-align: left;
  transition: background .15s, border-color .15s, transform .1s;
}
.card:hover { background: var(--panel-2); border-color: var(--line); transform: translateY(-1px); }

.card__edge { align-self: stretch; background: var(--line); }
.card[data-status="complete"] .card__edge { background: var(--ok); }
.card[data-status="failed"]   .card__edge { background: var(--miss); }
.card[data-status="queued"]   .card__edge,
.card[data-status="transcribing"] .card__edge,
.card[data-status="analyzing"] .card__edge { background: var(--warn); }

.card__body { padding: 15px 0; min-width: 0; }
.card__t { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.card__m {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--faint);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ktag {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0 7px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 9.5px;
}
.ktag--pre  { color: var(--brand); border-color: rgba(53,96,171,.35); }
.ktag--post { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }

.card__side { padding: 15px 18px 15px 0; text-align: right; }
.card__score { font-family: var(--mono); font-size: 21px; font-variant-numeric: tabular-nums; }
.card__scoreL {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--faint);
  border: 1px dashed var(--line);
  border-radius: var(--r);
}

/* ═══ Toast + footer ══════════════════════════════════════════════════════ */

.toast {
  position: fixed;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  z-index: 60;
  /* Deep brand navy with white text — a pop-up should read as the product
     speaking, not as another grey panel floating over the page. */
  background: #172c4d;
  color: #fff;
  border: 1px solid #2a4a7d;
  border-radius: var(--r-sm);
  padding: 11px 18px;
  font-size: 13.5px;
  box-shadow: 0 4px 12px rgba(15,32,60,.22), 0 14px 40px rgba(15,32,60,.24);
  max-width: min(560px, 90vw);
}
/* Errors keep red, but as an accent on the same surface rather than a second
   competing panel style. */
.toast.is-bad { background: #5c1a16; border-color: #8f2b23; color: #ffd9d5; }

.foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--faint);
  background: var(--ink);
}
.foot__sep { opacity: .45; }

/* ═══ Responsive ══════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .workspace { grid-template-columns: 1fr; height: auto; }
  .rail { border-left: 0; border-top: 1px solid var(--line); }
  .sheet { max-height: none; }
  .paper { padding: 18px; }
  .rpane { max-height: 70vh; }
}

@media (max-width: 720px) {
  .deck { grid-template-columns: 1fr auto; gap: 12px; }
  .deck__nav { grid-column: 1 / -1; justify-self: start; order: 3; }
  .deck { height: auto; padding: 10px 14px; }
  .chips { display: none; }
  .modes { grid-template-columns: 1fr; }
  .field--half { width: 100%; margin-left: 0 !important; }
  .intake { padding: 32px 16px 60px; }
  .sheet { padding: 32px 22px 48px; font-size: 15px; }
  .go { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Print: the sheet only, as close to the Word output as the browser allows. */
@media print {
  .deck, .rail, .paper__bar, .foot, .toast, .row__tools, .addrow { display: none !important; }
  body, .sheet { background: #fff; color: #000; box-shadow: none; }
  .workspace { display: block; height: auto; }
  .paper { padding: 0; }
  .sheet { overflow: visible; padding: 0; }
}