/* ══════════════════════════════════════════
   GOOGLE FONTS — Inter (IxDIA brand)
══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════════
   IXDIA DESIGN SYSTEM TOKENS (v2.0)
   Source: DESIGN-SYSTEM.md — do not edit inline
══════════════════════════════════════════ */
:root {
  /* ── Core palette ── */
  --color-bg:           #F0F6FB;
  --color-bg-alt:       #E8F2F9;
  --color-surface:      #F5F9FC;
  --color-white:        #FFFFFF;
  --color-ink:          #1A1A1A;
  --color-muted:        #6B7280;
  --color-border:       #D1E3EF;

  /* ── Accent ── */
  --color-accent:       #1A9BD7;
  --color-accent-dark:  #1480B8;
  --color-accent-light: #D6EEF9;

  /* ── Semantic ── */
  --color-success:      #1E7A4A;
  --color-warning:      #C08030;
  --color-error:        #C0392B;
  --color-error-light:  #FDECEA;

  /* ── Neumorphic shadows (light source: top-left) ── */
  --shadow-raised:
    6px 6px 12px rgba(163, 195, 216, 0.5),
    -6px -6px 12px rgba(255, 255, 255, 0.85);
  --shadow-pressed:
    inset 4px 4px 8px rgba(163, 195, 216, 0.5),
    inset -4px -4px 8px rgba(255, 255, 255, 0.85);
  --shadow-subtle:
    3px 3px 6px rgba(163, 195, 216, 0.4),
    -3px -3px 6px rgba(255, 255, 255, 0.8);
  --shadow-focus:
    0 0 0 3px rgba(26, 155, 215, 0.35);

  /* ── Border radius ── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;

  /* ── Type scale ── */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   1.875rem;

  /* ── Spacing (8px base) ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
}

/* ══════════════════════════════════════════
   LEGACY TOKENS (v1 — preserved for existing components)
   Will be replaced progressively as components are reskinned.
══════════════════════════════════════════ */
:root {
  --bg: #F0F6FB;
  --paper: #ffffff;
  --s2: #E8F2F9;
  --border: #D1E3EF;
  --ink: #1a1a1a;
  --muted: #6B7280;
  --dim: #9CA3AF;

  --p1: #8b4a2a;  --p1d: #fdf0e8; --p1m: #f0d4bc; --p1b: #c47a50;
  --p2: #2a6b3a;  --p2d: #edf5ee; --p2m: #c0dcc4; --p2b: #3d9152;
  --p3: #1e4a8c;  --p3d: #edf2f9; --p3m: #c0d0e8; --p3b: #3464a8;
  --p4: #5b3a8c;  --p4d: #f2effa; --p4m: #cfc7ed; --p4b: #7c59b8;

  --r-ux:  #8b4a2a;
  --r-biz: #2a6b3a;
  --r-eng: #1e4a8c;
  --r-all: #5b3a8c;
}
/* Foundation handles the CSS reset/normalize. We keep box-sizing and set our font + bg: */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-ink);
  min-height: 100vh;
  font-size: 1rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════════
   APP SHELL
══════════════════════════════════════════ */
.app { display: flex; min-height: 100vh; }

/* ── SIDEBAR ─────────────────────────────── */
.sidebar {
  width: 264px; flex-shrink: 0; background: var(--ink); color: #f5f0e8;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sb-logo { padding: 22px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sb-logo h1 { font-family: 'DM Serif Display', serif; font-size: 17px; font-weight: 400; line-height: 1.25; margin-bottom: 3px; }
.sb-logo p  { font-size: 10px; color: #c8bfaa; line-height: 1.5; }

.sb-team { padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sb-team label { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #888; display: block; margin-bottom: 4px; }
.sb-team input { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 3px;
  color: #f5f0e8; font-family: 'DM Sans', sans-serif; font-size: 12px; padding: 6px 10px; width: 100%; outline: none; }
.sb-team input::placeholder { color: #666; }
.sb-team input:focus { border-color: rgba(255,255,255,.5); }

/* Timer */
.sb-timer { padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.timer-label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #888; margin-bottom: 5px; }
.timer-display { font-family: 'DM Serif Display', serif; font-size: 24px; color: #f5f0e8; letter-spacing: .02em; line-height: 1; margin-bottom: 4px; }
.timer-target  { font-size: 9.5px; color: #888; }
.timer-btns    { display: flex; gap: 6px; margin-top: 7px; }
.timer-btn { flex: 1; font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 0; border-radius: 3px; cursor: pointer; transition: background .15s;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2)!important; color: #f5f0e8; }
.timer-btn:hover { background: rgba(255,255,255,.18); }
.timer-btn.warn { background: rgba(240,180,80,.2); border-color: rgba(240,180,80,.5)!important; color: #f0c864; }

.sb-stages { padding: 14px 0; flex: 1; }
.sb-stage { cursor: pointer; padding: 11px 20px; display: flex; align-items: center; gap: 10px;
  transition: background .15s; position: relative; }
.sb-stage:hover { background: rgba(255,255,255,.06); }
.sb-stage.active { background: rgba(255,255,255,.12); }
.sb-stage.active::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0 2px 2px 0; }
.s1.active::before { background: var(--p1b); }
.s2.active::before { background: var(--p2b); }
.s3.active::before { background: var(--p3b); }
.s4.active::before { background: var(--p4b); }
.s5.active::before { background: #888; }
.sbs-num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid; display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.s1 .sbs-num { border-color: var(--p1b); color: var(--p1b); }
.s2 .sbs-num { border-color: var(--p2b); color: var(--p2b); }
.s3 .sbs-num { border-color: var(--p3b); color: var(--p3b); }
.s4 .sbs-num { border-color: var(--p4b); color: var(--p4b); }
.s5 .sbs-num { border-color: #888; color: #888; font-size: 13px; }
.sb-stage.done .sbs-num { background: currentColor; }
.sb-stage.done .sbs-num span { color: white; }
.sbs-text { flex: 1; }
.sbs-label { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.sbs-sub   { font-size: 9.5px; color: #888; margin-top: 2px; }
.sbs-check { font-size: 12px; opacity: 0; transition: opacity .2s; }
.sb-stage.done .sbs-check { opacity: 1; }

/* time chips in sidebar */
.sb-stage-time { font-size: 8.5px; background: rgba(255,255,255,.1); border-radius: 10px;
  padding: 2px 7px; color: #aaa; white-space: nowrap; }

.progress-bar-wrap { padding: 0 20px 10px; }
.progress-label { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #666; margin-bottom: 5px; }
.progress-track { height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.progress-fill  { height: 100%; background: linear-gradient(90deg, var(--p1b), var(--p4b)); border-radius: 2px; transition: width .4s; }

.sb-save-row { padding: 10px 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 6px; align-items: center; }
.save-btn { flex: 1; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18)!important; border-radius: 3px;
  color: #f5f0e8; font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: 7px 4px; cursor: pointer; transition: background .15s; }
.save-btn:hover { background: rgba(255,255,255,.2); }
.save-ok { font-size: 10px; color: #7be88a; font-weight: 700; display: none; white-space: nowrap; }

/* ══════════════════════════════════════════
   MAIN CONTENT AREA
══════════════════════════════════════════ */
.main { flex: 1; min-width: 0; }
.stage-panel { display: none; }
.stage-panel.active { display: flex; flex-direction: column; min-height: 100vh; }

/* Stage header */
.stage-header { padding: 28px 40px 22px; border-bottom: 2px solid var(--ink); }
.sh-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; padding: 3px 12px; border-radius: 20px; margin-bottom: 10px; }
.stage-header h2 { font-family: 'DM Serif Display', serif; font-size: clamp(22px, 2.8vw, 34px); font-weight: 400; line-height: 1.1; margin-bottom: 7px; }
.stage-header h2 em { font-style: italic; }
.stage-header p  { font-size: 12.5px; color: var(--muted); line-height: 1.7; max-width: 600px; }

/* Time budget bar */
.stage-time-bar { display: flex; align-items: center; gap: 10px; padding: 8px 40px; background: var(--s2); border-bottom: 1px solid var(--border); }
.stb-icon { font-size: 13px; }
.stb-text { font-size: 11px; color: var(--muted); }
.stb-text strong { color: var(--ink); font-weight: 700; }
.stb-sep  { flex: 1; }
.stb-print { font-family: 'DM Sans', sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 3px; cursor: pointer;
  background: white; color: var(--muted); border: 1.5px solid var(--border)!important; transition: all .15s; }
.stb-print:hover { border-color: var(--ink)!important; color: var(--ink); }

/* Stage body */
.stage-body { padding: 24px 40px; display: flex; flex-direction: column; gap: 22px; flex: 1; }

/* ── CARRY FORWARD BAND ──────────────────── */
.carry-fwd { background: white; border: 1.5px solid var(--border); border-radius: 4px;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cf-header { padding: 9px 16px; background: var(--s2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; }
.cf-header-icon { font-size: 12px; }
.cf-header-label { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cf-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.cf-item { padding: 10px 16px; border-right: 1px solid var(--border); }
.cf-item:last-child { border-right: none; }
.cf-tag  { display: inline-block; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px; margin-bottom: 5px; }
.cf-ux   { background: var(--p1m); color: var(--p1); }
.cf-biz  { background: var(--p2m); color: var(--p2); }
.cf-eng  { background: var(--p3m); color: var(--p3); }
.cf-idea { background: var(--p4m); color: var(--p4); }
.cf-val  { font-size: 11.5px; color: var(--ink); line-height: 1.5; font-style: italic; }
.cf-val.filled { font-style: normal; }

/* ── DISCUSSION PROMPTS / ACCORDION (neumorphic v2) ── */
/* Raised by default; pressed + accent left-border when open.
   Accessibility: ink on surface ~17:1; hover accent-light ~14:1 ✓ */
.dp {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-2);
  box-shadow: var(--shadow-raised);
  transition: box-shadow 0.2s ease, border-left-color 0.2s ease;
  border-left: 3px solid transparent;
}
.dp.open {
  box-shadow: var(--shadow-pressed);
  border-left-color: var(--color-accent);
}

.dp-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 16px 20px;
  background: transparent;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
  /* always-visible separator between trigger and content */
  border-bottom: 1px solid var(--color-border);
}
.dp-trigger:hover {
  background: var(--color-accent-light);
}
.dp-trigger:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.dp-icon  { font-size: 15px; flex-shrink: 0; }
.dp-label { font-size: 11px; font-weight: 600; color: var(--color-ink); flex: 1; }
.dp-roles { display: flex; gap: 5px; align-items: center; }
.dp-role  {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.dp-r-ux  { background: var(--p1m); color: var(--p1); }
.dp-r-biz { background: var(--p2m); color: var(--p2); }
.dp-r-eng { background: var(--p3m); color: var(--p3); }
.dp-r-all { background: var(--p4m); color: var(--p4); }

/* Chevron — CSS-only, replaces the › text character.
   Points down (closed), rotates 180° to point up (open). */
.dp-arrow {
  order: 10; /* always rightmost flex item */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 0; /* hide the › text */
  transition: none;
}
.dp-arrow::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2.5px solid var(--color-accent);
  border-bottom: 2.5px solid var(--color-accent);
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform 0.25s ease;
}
.dp.open .dp-arrow::after {
  transform: rotate(-135deg) translate(-1px, 2px);
}

/* "Click to expand" hint — first closed accordion per stage only.
   Disappears once the accordion is opened. */
.stage-panel .dp:first-of-type:not(.open) .dp-trigger::after {
  content: 'Click to expand';
  order: 9;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-left: var(--space-3);
}

.dp-content {
  display: none;
  padding: 14px 16px;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}
.dp.open .dp-content { display: block; }
.dp-qs { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.dp-qs li { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--color-ink); line-height: 1.6; }
.dp-qs li::before { content: '›'; color: var(--color-muted); font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.dp-qs li strong { font-weight: 600; color: var(--color-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; display: block; margin-bottom: 1px; }
.dp-tip {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--color-white);
  border-left: 3px solid var(--color-border);
  border-radius: 0 3px 3px 0;
  font-size: 11.5px;
  color: var(--color-muted);
  line-height: 1.6;
  font-style: italic;
}

/* ── REUSABLE COMPONENTS ─────────────────── */
.card { border: 1.5px solid var(--border); border-radius: 3px; background: var(--paper);
  overflow: hidden; box-shadow: 2px 2px 0 var(--border); }
.card-bar { height: 4px; }
.card-head { padding: 14px 20px 12px; border-bottom: 1.5px solid var(--border); }
.card-head h3 { font-family: 'DM Serif Display', serif; font-size: 17px; font-weight: 400; margin-bottom: 2px; }
.card-head p  { font-size: 12px; color: var(--muted); line-height: 1.55; }
.card-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }

.teach { border-left: 3px solid; padding: 11px 14px; border-radius: 0 3px 3px 0;
  font-size: 12px; line-height: 1.7; }
.teach strong { font-weight: 700; }
.teach em { font-style: italic; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.field { display: flex; flex-direction: column; gap: 4px; }
.fl { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.fh { font-size: 10.5px; color: var(--muted); line-height: 1.5; font-style: italic; }
.field textarea, .field input[type=text] {
  width: 100%; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--ink);
  background: var(--bg); resize: vertical; outline: none; line-height: 1.5; min-height: 58px;
  transition: border-color .2s, background .15s;
}
.field input[type=text] { min-height: unset; height: 36px; resize: none; }
.field textarea::placeholder, .field input::placeholder { color: #c0b8aa; font-style: italic; }
.f1 textarea:focus, .f1 input:focus { border-color: var(--p1b); background: white; }
.f2 textarea:focus, .f2 input:focus { border-color: var(--p2b); background: white; }
.f3 textarea:focus, .f3 input:focus { border-color: var(--p3b); background: white; }
.f4 textarea:focus, .f4 input:focus { border-color: var(--p4b); background: white; }
/* Inputs at rest: white background for clear input/non-input distinction */
.stage-panel textarea,
.stage-panel input[type="text"] { background: #ffffff; }

/* output summary box */
.out-box { border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; }
.out-head { padding: 8px 14px; background: var(--s2); border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; }
.out-label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.out-body  { padding: 12px 14px; font-family: 'DM Serif Display', serif; font-size: 13px; line-height: 1.85; min-height: 44px; }
.ov  { font-style: italic; }
.oe  { color: var(--dim); font-style: italic; }
.btn { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 5px 13px; border-radius: 3px; cursor: pointer; transition: opacity .15s; white-space: nowrap; }
.btn:hover { opacity: .8; }
.btn-sec { background: transparent; color: var(--muted); border: 1.5px solid var(--border)!important; }
.btn-sec:hover { border-color: var(--ink)!important; color: var(--ink); }
.cok { font-size: 10px; font-weight: 700; display: none; margin-left: 5px; }

/* nav buttons */
.stage-nav { display: flex; align-items: center; justify-content: flex-start; padding: 18px 40px;
  border-top: 1.5px solid var(--border); background: var(--bg); gap: 10px; }
.nav-btn { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 10px 22px; border-radius: 3px; cursor: pointer; transition: all .15s; }
.nav-prev  { background: transparent; color: var(--muted); border: 1.5px solid var(--border)!important; }
.nav-prev:hover { border-color: var(--ink)!important; color: var(--ink); }
.nav-next  { color: white; border: none!important; }
.s1 .nav-next { background: var(--p1); }
.s2 .nav-next { background: var(--p2); }
.s3 .nav-next { background: var(--p3); }
.s4 .nav-next { background: var(--p4); }
.nav-print-ws { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 18px; border-radius: 3px; cursor: pointer;
  background: white; color: var(--muted); border: 1.5px solid var(--border)!important; transition: all .15s;
  margin-left: auto; }
.nav-print-ws:hover { border-color: var(--ink)!important; color: var(--ink); }
.nav-save { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 18px; border-radius: 3px; cursor: pointer;
  background: white; color: var(--muted); border: 1.5px solid var(--border)!important; transition: all .15s; }
.nav-save:hover { border-color: var(--color-accent)!important; color: var(--color-accent); }

/* ══════════════════════════════════════════
   STAGE 1 — GROUND CONTROL
══════════════════════════════════════════ */
.s1 .sh-badge { background: var(--p1m); color: var(--p1); }
.s1 .card-bar  { background: var(--p1b); }
.s1 .teach     { background: var(--p1d); border-color: var(--p1b); }

.perspective-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }
.persp { border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; }
.persp-head { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.persp-role { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 2px 10px 2px 7px; border-radius: 10px; margin-bottom: 6px; }
.persp-icon { font-size: 13px; }
.ph1 .persp-head { background: var(--p1d); }
.ph1 .persp-role { background: var(--p1m); color: var(--p1); }
.ph1 .persp-label { color: var(--p1); }
.ph2 .persp-head { background: var(--p2d); }
.ph2 .persp-role { background: var(--p2m); color: var(--p2); }
.ph2 .persp-label { color: var(--p2); }
.ph3 .persp-head { background: var(--p3d); }
.ph3 .persp-role { background: var(--p3m); color: var(--p3); }
.ph3 .persp-label { color: var(--p3); }
.persp-label { font-size: 12px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.persp-sub   { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.persp-body  { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.persp-body textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 3px;
  padding: 8px 10px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink);
  background: var(--bg); resize: none; outline: none; min-height: 70px; line-height: 1.5; }
.persp-body textarea::placeholder { color: #c0b8aa; font-style: italic; }
.ph1 .persp-body textarea:focus { border-color: var(--p1b); background: white; }
.ph2 .persp-body textarea:focus { border-color: var(--p2b); background: white; }
.ph3 .persp-body textarea:focus { border-color: var(--p3b); background: white; }

/* ══════════════════════════════════════════
   STAGE 2 — PRE-LAUNCH CHECKS
══════════════════════════════════════════ */
.s2 .sh-badge { background: var(--p2m); color: var(--p2); }
.s2 .card-bar  { background: var(--p2b); }
.s2 .teach     { background: var(--p2d); border-color: var(--p2b); }
.s2-progress-wrap { padding: 10px 0 2px; }
.s2-progress-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 5px; display: flex; align-items: center; gap: 8px; }
.s2-progress-wrap .progress { height: 8px; border-radius: 4px; background: var(--border); margin: 0; }
.s2-progress-wrap .progress-meter { background: var(--p2b); border-radius: 4px; transition: width .4s; }

.req-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }
.req-track { border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; }
.rt-head { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rt-role { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 2px 10px 2px 7px; border-radius: 10px; margin-bottom: 5px; }
.rt-ux .rt-head   { background: var(--p1d); }
.rt-ux .rt-role   { background: var(--p1m); color: var(--p1); }
.rt-ux .rt-label  { color: var(--p1); }
.rt-biz .rt-head  { background: var(--p2d); }
.rt-biz .rt-role  { background: var(--p2m); color: var(--p2); }
.rt-biz .rt-label { color: var(--p2); }
.rt-eng .rt-head  { background: var(--p3d); }
.rt-eng .rt-role  { background: var(--p3m); color: var(--p3); }
.rt-eng .rt-label { color: var(--p3); }
.rt-label { font-size: 12px; font-weight: 700; line-height: 1.2; margin-bottom: 2px; }
.rt-sub   { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.rt-body  { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rt-body textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 3px;
  padding: 8px 10px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink);
  background: var(--bg); resize: none; outline: none; min-height: 60px; line-height: 1.5; }
.rt-body textarea::placeholder { color: #c0b8aa; font-style: italic; }
.rt-ux  .rt-body textarea:focus { border-color: var(--p1b); background: white; }
.rt-biz .rt-body textarea:focus { border-color: var(--p2b); background: white; }
.rt-eng .rt-body textarea:focus { border-color: var(--p3b); background: white; }

/* ══════════════════════════════════════════
   STAGE 3 — MISSION BRIEFING
══════════════════════════════════════════ */
.s3 .sh-badge { background: var(--p3m); color: var(--p3); }
.s3 .card-bar  { background: var(--p3b); }
.s3 .teach     { background: var(--p3d); border-color: var(--p3b); }

.dvf-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.dvf-col  { border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; }
.dvf-head { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.dvf-role { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; padding: 2px 10px 2px 7px; border-radius: 10px; margin-bottom: 4px; }
.dvf-d .dvf-head { background: var(--p1d); }
.dvf-d .dvf-role { background: var(--p1m); color: var(--p1); }
.dvf-d .dvf-label { color: var(--p1); }
.dvf-v .dvf-head { background: var(--p2d); }
.dvf-v .dvf-role { background: var(--p2m); color: var(--p2); }
.dvf-v .dvf-label { color: var(--p2); }
.dvf-f .dvf-head { background: var(--p3d); }
.dvf-f .dvf-role { background: var(--p3m); color: var(--p3); }
.dvf-f .dvf-label { color: var(--p3); }
.dvf-label { font-size: 12px; font-weight: 700; }
.dvf-body { padding: 10px 12px; }
.dvf-body textarea { width: 100%; border: 1.5px solid var(--border); border-radius: 3px;
  padding: 7px 9px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink);
  background: var(--bg); resize: none; outline: none; min-height: 56px; line-height: 1.5; }
.dvf-body textarea::placeholder { color: #c0b8aa; font-style: italic; }
.dvf-d .dvf-body textarea:focus { border-color: var(--p1b); background: white; }
.dvf-v .dvf-body textarea:focus { border-color: var(--p2b); background: white; }
.dvf-f .dvf-body textarea:focus { border-color: var(--p3b); background: white; }

/* ══════════════════════════════════════════
   STAGE 4 — LAUNCH SEQUENCE
══════════════════════════════════════════ */
.s4 .sh-badge { background: var(--p4m); color: var(--p4); }
.s4 .card-bar  { background: var(--p4b); }
.s4 .teach     { background: var(--p4d); border-color: var(--p4b); }

/* hypothesis builder */
.hyp-builder { background: var(--s2); border: 1px dashed var(--border); border-radius: 3px; padding: 14px 16px; }
.hyp-bl { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.hyp-sent { font-family: 'DM Serif Display', serif; font-size: 15px; line-height: 2.6;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 2px; }
.hw { color: var(--muted); white-space: nowrap; }
.blank { display: inline-block; border: none; border-bottom: 2px solid var(--p4b);
  background: transparent; font-family: 'DM Serif Display', serif; font-size: 15px; font-style: italic;
  outline: none; padding: 0 4px 1px; min-width: 60px; text-align: center; color: var(--p4);
  transition: background .15s; }
.blank::placeholder { opacity: .35; }
.blank:focus { background: var(--p4d); border-radius: 3px 3px 0 0; }

/* assumptions */
.assn-zone { border: 1.5px solid var(--border); border-radius: 3px; overflow: hidden; }
.az-head { padding: 8px 14px; background: var(--s2); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; }
.az-label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.az-rows { padding: 8px 14px; display: flex; flex-direction: column; gap: 7px; }
.arow { display: grid; grid-template-columns: 1fr 120px 120px 30px; gap: 7px; align-items: start; }
.arow textarea { width: 100%; padding: 7px 9px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink);
  background: var(--bg); resize: none; outline: none; min-height: 42px; line-height: 1.4; }
.arow textarea:focus { border-color: var(--p4b); background: white; }
.arow textarea::placeholder { color: #c0b8aa; font-style: italic; }
.arow select { width: 100%; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--ink); background: var(--bg);
  outline: none; cursor: pointer; height: 42px; }
.arow select:focus { border-color: var(--p4b); }
.adel { background: none; border: none!important; color: var(--dim); font-size: 16px; cursor: pointer;
  padding: 3px; line-height: 1; align-self: center; transition: color .15s; }
.adel:hover { color: #c0392b; }
.add-a-btn { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 8px; border-radius: 3px; cursor: pointer;
  background: var(--p4d); color: var(--p4); border: 1.5px dashed var(--p4b)!important;
  width: 100%; margin-top: 3px; transition: background .15s; }
.add-a-btn:hover { background: var(--p4m); }

/* matrix */
.matrix-outer { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: 1fr 20px; gap: 3px; height: 300px; }
.m-yax { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 8.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  display: flex; align-items: center; justify-content: center; }
.m-xax { grid-column: 2; font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; justify-content: center; }
.matrix { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; background: var(--border); gap: 1px; }
.quad { padding: 10px; display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden; }
.quad.drag-over { outline: 2px dashed var(--ink); outline-offset: -2px; }
.ql { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.qs { font-size: 9.5px; color: var(--muted); line-height: 1.4; font-style: italic; }
.qc { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; overflow-y: auto; flex: 1; }
.qw { position: absolute; bottom: 4px; right: 6px; font-family: 'DM Serif Display', serif;
  font-size: 38px; opacity: .05; line-height: 1; pointer-events: none; user-select: none; }
.q-tr { background: #eaf6ee; } .q-tr .ql { color: #1c5c38; }
.q-tl { background: #edf2f9; } .q-tl .ql { color: #1e4a8c; }
.q-br { background: #fef8e2; } .q-br .ql { color: #7a4400; }
.q-bl { background: #fdf0f0; } .q-bl .ql { color: #6b2a2a; }
.achip { background: white; border: 1.5px solid var(--border); border-radius: 3px;
  padding: 3px 7px; font-size: 10px; line-height: 1.4; cursor: grab; transition: border-color .15s; }
.achip:hover { border-color: var(--ink); }
.achip.dragging { opacity: .35; }
.achip-s { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); display: block; margin-bottom: 1px; }

/* test card */
.test-card { border: 2px solid var(--ink); border-radius: 3px; overflow: hidden; box-shadow: 3px 3px 0 var(--border); }
.tc-head { background: var(--ink); color: #f5f0e8; padding: 12px 16px; }
.tc-head h4 { font-family: 'DM Serif Display', serif; font-size: 16px; font-weight: 400; margin-bottom: 2px; }
.tc-head p  { font-size: 11px; color: #c8bfaa; line-height: 1.5; }
.tc-body { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tc-f { display: flex; flex-direction: column; gap: 4px; }
.tc-fl { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.tc-f textarea { width: 100%; padding: 7px 9px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink);
  background: var(--bg); resize: none; outline: none; min-height: 50px; line-height: 1.5; }
.tc-f textarea:focus { border-color: var(--p4b); background: white; }
.tc-f textarea::placeholder { color: #c0b8aa; font-style: italic; }
.tc-sep { grid-column: 1/-1; border: none; border-top: 1px dashed var(--border); }
.tc-thresh { grid-column: 1/-1; background: var(--p4d); border: 1.5px solid var(--p4b); border-radius: 3px; padding: 12px; }
.tc-thresh-l { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--p4); margin-bottom: 7px; }
.tc-thresh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tc-f.verify textarea { background: #eaf6ee; }
.tc-f.invalid textarea { background: #fdf0f0; }

/* experiment sequence */
.method-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc { font-size: 11px; font-weight: 500; padding: 4px 12px; border-radius: 20px; border: 1.5px solid var(--border);
  background: white; color: var(--muted); cursor: pointer; transition: all .15s; user-select: none; }
.mc.on { background: var(--p4m); color: var(--p4); border-color: var(--p4b); font-weight: 700; }

.exp-row { display: grid; grid-template-columns: 1fr 190px 32px; gap: 7px; padding: 8px 14px; align-items: start; border-bottom: 1px dashed var(--border); }
.exp-row:last-child { border-bottom: none; }
.exp-row-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.exp-row textarea { width: 100%; padding: 7px 9px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink); background: var(--bg);
  resize: none; outline: none; min-height: 80px; line-height: 1.4; }
.exp-row textarea:focus { border-color: var(--p4b); background: white; }
.exp-row select { width: 100%; padding: 6px 7px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; color: var(--ink); background: var(--bg);
  outline: none; cursor: pointer; }
.exp-row select:focus { border-color: var(--p4b); }
.exp-row .adel { align-self: center !important; margin-top: 0 !important; }

/* ══════════════════════════════════════════
   STAGE 5 — ORBIT / SUMMARY
══════════════════════════════════════════ */
#stage-canvas .stage-header { background: var(--ink); color: #f5f0e8; border-bottom: none; }
#stage-canvas .stage-header h2 { color: #f5f0e8; }
#stage-canvas .stage-header p  { color: #c8bfaa; }

.orbit-hero { background: linear-gradient(160deg, #0e0e16 0%, #1a1040 60%, #0e1820 100%);
  padding: 32px 40px 20px; position: relative; overflow: hidden; }
.orbit-stars { position: absolute; inset: 0; pointer-events: none; }
.orbit-star  { position: absolute; border-radius: 50%; background: white; opacity: .6; animation: twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { 0%{opacity:.2} 100%{opacity:.7} }
.orbit-hero-content { position: relative; z-index: 2; }
.orbit-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.orbit-title { font-family: 'DM Serif Display', serif; font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 400; color: white; line-height: 1.1; margin-bottom: 7px; }
.orbit-title em { font-style: italic; color: #c8a8ff; }
.orbit-sub { font-size: 12.5px; color: rgba(255,255,255,.5); max-width: 500px; line-height: 1.6; }
.orbit-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); align-items: center; }
.orb-btn { font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 7px 14px; border-radius: 3px; cursor: pointer; transition: all .15s; }
.orb-edit  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2)!important; }
.orb-edit:hover  { background: rgba(255,255,255,.18); color: white; }
.orb-print { background: rgba(255,255,255,.12); color: white; border: 1px solid rgba(255,255,255,.3)!important; }
.orb-copy  { background: #5b3a8c; color: white; border: none!important; }
.orb-email { background: #1e4a8c; color: white; border: none!important; }
.orb-copy:hover  { background: #7c59b8; }
.orb-email:hover { background: #3464a8; }

/* Summary sections */
.sum-section { padding: 24px 40px; border-bottom: 1.5px solid var(--border); }
.sum-section:last-of-type { border-bottom: none; }
.sum-section-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ssl-num  { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: white;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ssl-text { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ssl-line { flex: 1; height: 1px; background: var(--border); }

/* 3-col grid for section 1 */
.sum-row-3 { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 14px; align-items: start; }
.sum-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sum-col { border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; background: white; box-shadow: 2px 2px 0 var(--border); }
.sum-col-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1.5px solid var(--border); }
.sum-col-head.terra { background: var(--p1d); }
.sum-col-head.green { background: var(--p2d); }
.sum-col-head.blue  { background: var(--p3d); }
.sum-col-head.purp  { background: var(--p4d); }
.sch-icon  { font-size: 18px; flex-shrink: 0; }
.sch-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.sch-sub   { font-size: 9.5px; color: var(--muted); margin-top: 1px; }
.sum-col-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.sfg-label { font-size: 7.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sfg-val   { font-size: 11.5px; color: var(--ink); line-height: 1.55; font-style: italic; min-height: 18px; }
.sfg-val.filled { font-style: normal; }

/* Big Idea summary col */
.sum-col-bigidea { background: linear-gradient(160deg, #f0eaf8, white)!important; border-color: var(--p4b)!important; }
.bigidea-head.purp { background: var(--p4d)!important; border-bottom-color: var(--p4b)!important; }
.bigidea-name-sum { font-family: 'DM Serif Display', serif; font-size: 15px; color: var(--p4); line-height: 1.2; margin-bottom: 7px; }
.bigidea-text-sum { font-size: 11.5px; color: var(--ink); line-height: 1.65; margin-bottom: 10px; }
.dvf-chips-sum    { display: flex; gap: 5px; }
.dvf-chip-sum     { font-size: 9.5px; font-weight: 700; padding: 3px 10px; border-radius: 20px;
  background: var(--s2); color: var(--muted); border: 1px solid var(--border); }
.dvf-chip-sum.filled { background: var(--p4m); color: var(--p4); border-color: var(--p4b); }

/* Hypothesis block */
.sum-hyp-block { background: linear-gradient(135deg, var(--p4d), white);
  border: 2px solid var(--p4b); border-radius: 4px; padding: 18px 22px;
  display: flex; align-items: flex-start; gap: 14px; box-shadow: 3px 3px 0 var(--p4m); }
.shb-icon  { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.shb-text  { font-family: 'DM Serif Display', serif; font-size: 14px; color: var(--ink);
  line-height: 1.8; flex: 1; font-style: italic; }
.shb-text .filled { font-style: normal; color: var(--p4); }
.shb-label { font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--p4); margin-top: 7px; }

.sum-assumption-block { border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; background: white; }
.sab-head { padding: 7px 12px; font-size: 8.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); background: var(--s2); border-bottom: 1px solid var(--border); }
.sab-body { padding: 10px 12px; font-size: 11.5px; color: var(--ink); line-height: 1.6; font-style: italic; min-height: 36px; }
.sab-body.filled { font-style: normal; }
.sum-assumption-block:first-child .sab-head { background: #fef8e2; color: #7a4400; border-bottom-color: #f0d080; }

/* Experiment track */
.sum-exp-intro { font-size: 11.5px; color: var(--muted); line-height: 1.6; font-style: italic;
  padding: 9px 13px; background: var(--s2); border-left: 3px solid var(--border); border-radius: 0 3px 3px 0; margin-bottom: 14px; }
.sum-exp-track { display: flex; flex-direction: column; gap: 0; }
.sum-exp-step  { display: grid; grid-template-columns: 42px 1fr; align-items: stretch; }
.ses-connector { display: flex; flex-direction: column; align-items: center; }
.ses-dot  { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid; display: flex; align-items: center;
  justify-content: center; font-size: 10px; font-weight: 800; flex-shrink: 0; background: white;
  margin-top: 12px; z-index: 1; }
.ses-line { width: 2px; flex: 1; background: var(--border); margin: 0 auto; }
.sum-exp-step:last-child .ses-line { display: none; }
.ses-card { margin: 6px 0 6px 4px; border: 1.5px solid var(--border); border-radius: 4px;
  overflow: hidden; background: white; box-shadow: 1px 1px 0 var(--border); flex: 1; }
.ses-head { padding: 7px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center;
  justify-content: space-between; }
.ses-title { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ses-badge { font-size: 8px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.ses-body  { padding: 9px 12px; font-size: 11.5px; color: var(--ink); line-height: 1.55; }
.ses-empty { color: var(--dim); font-style: italic; }

.sum-exp-step.step-0 .ses-dot { border-color: var(--p1b); color: var(--p1); }
.sum-exp-step.step-0 .ses-head { background: var(--p1d); }
.sum-exp-step.step-0 .ses-title { color: var(--p1); }
.sum-exp-step.step-0 .ses-badge { background: var(--p1m); color: var(--p1); }
.sum-exp-step.step-1 .ses-dot { border-color: var(--p2b); color: var(--p2); }
.sum-exp-step.step-1 .ses-head { background: var(--p2d); }
.sum-exp-step.step-1 .ses-title { color: var(--p2); }
.sum-exp-step.step-1 .ses-badge { background: var(--p2m); color: var(--p2); }
.sum-exp-step.step-2 .ses-dot { border-color: var(--p3b); color: var(--p3); }
.sum-exp-step.step-2 .ses-head { background: var(--p3d); }
.sum-exp-step.step-2 .ses-title { color: var(--p3); }
.sum-exp-step.step-2 .ses-badge { background: var(--p3m); color: var(--p3); }
.sum-exp-step.step-3 .ses-dot { border-color: var(--p4b); color: var(--p4); }
.sum-exp-step.step-3 .ses-head { background: var(--p4d); }
.sum-exp-step.step-3 .ses-title { color: var(--p4); }
.sum-exp-step.step-3 .ses-badge { background: var(--p4m); color: var(--p4); }
.sum-exp-step.step-4 .ses-dot { border-color: #165f5f; color: #165f5f; }
.sum-exp-step.step-4 .ses-head { background: #e6f4f3; }
.sum-exp-step.step-4 .ses-title { color: #165f5f; }
.sum-exp-step.step-4 .ses-badge { background: #c0dcc4; color: #165f5f; }

/* Test card detail */
.sum-testcard { border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; box-shadow: 3px 3px 0 var(--border); }
.stc-row  { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.stc-field { padding: 12px 14px; border-right: 1px solid var(--border); }
.stc-field:last-child { border-right: none; }
.stc-fl   { font-size: 7.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.stc-val  { font-size: 11.5px; color: var(--ink); line-height: 1.55; font-style: italic; min-height: 22px; }
.stc-val.filled { font-style: normal; }
.stc-thresh-row { display: grid; grid-template-columns: 1fr 1fr; }
.stc-pass { background: #eaf6ee; padding: 12px 14px; border-right: 1px solid var(--border); }
.stc-fail { background: #fdf0f0; padding: 12px 14px; }

/* Next Steps */
.next-steps-card { border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
.nsc-head { background: var(--ink); color: #f5f0e8; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.nsc-head h4 { font-family: 'DM Serif Display', serif; font-size: 16px; font-weight: 400; }
.nsc-head p  { font-size: 11px; color: #c8bfaa; line-height: 1.5; }
.nsc-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ns-item { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.ns-num  { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: white;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.ns-input { width: 100%; padding: 8px 11px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--ink);
  background: var(--bg); resize: none; outline: none; min-height: 42px; line-height: 1.5; }
.ns-input:focus { border-color: var(--p4b); background: white; }
.ns-input::placeholder { color: #c0b8aa; font-style: italic; }

/* Confidence table */
.conf-table { border: 1.5px solid var(--border); border-radius: 4px; overflow: hidden; }
.ct-head { padding: 8px 14px; background: var(--s2); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.ct-head-label { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.ct-rows { padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; }
.ct-row { display: grid; grid-template-columns: 1fr 180px; gap: 10px; align-items: center; }
.ct-name input { width: 100%; padding: 6px 9px; border: 1.5px solid var(--border); border-radius: 3px;
  font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--ink); background: var(--bg); outline: none; }
.ct-name input:focus { border-color: var(--p4b); background: white; }
.ct-name input::placeholder { color: #c0b8aa; font-style: italic; }
.ct-stars { display: flex; gap: 5px; }
.ct-star { font-size: 20px; cursor: pointer; opacity: .25; transition: opacity .15s; user-select: none; line-height: 1; }
.ct-star.on { opacity: 1; }

/* ══════════════════════════════════════════
   PRINT STYLES — purpose-designed worksheet
   (not a web screenshot — a handout)
══════════════════════════════════════════ */

/* Hide print-only elements on screen */
#print-header, #print-footer { display: none; }

/* ── Page geometry ── */
@page {
  size: letter portrait;
  margin: 16mm 16mm 20mm 16mm;
}

@media print {

  /* ── Colour fidelity ── */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* ── Remove ALL web visual noise ── */
  * {
    box-shadow:  none !important;
    text-shadow: none !important;
  }
  a { color: #000 !important; text-decoration: none !important; }

  /* ── Root typography — Georgia reads better on paper ── */
  html, body {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 10pt !important;
    line-height: 1.5 !important;
    color: #000 !important;
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── Flatten web layout ── */
  * { float: none !important; }
  .app  { display: block !important; }
  .main {
    display: block !important;
    width: 100%  !important;
    max-width: 100% !important;
    margin: 0  !important;
    padding: 0 !important;
  }

  /* ══════════════════════════════════════
     HIDE — all web chrome, zero content
  ══════════════════════════════════════ */
  .sidebar,
  .stage-nav,
  .stage-time-bar,
  .stb-print,
  .nav-print-ws,
  .progress-bar-wrap,
  .sb-feedback-btn-wrap,
  .sb-tour-btn-wrap,
  .lp-tour-highlight,
  .lp-tour-popover,
  #fb-bar,
  .orbit-actions,
  .orbit-hero,
  .carry-fwd,
  .sh-badge,
  .card-bar,
  .dp-icon,
  .dp-roles,
  .persp-icon,
  .add-a-btn,
  .adel,
  .mdel,
  .add-member-btn,
  .add-exp-btn,
  .method-chips,
  .sb-members,
  .timer-btns,
  .assumptions-header button,
  .ns-item .ns-num + button { display: none !important; }

  /* ══════════════════════════════════════
     STAGE VISIBILITY
  ══════════════════════════════════════ */
  .stage-panel { display: none !important; }
  body[data-print="stage-1"]  #stage-1      { display: block !important; }
  body[data-print="stage-2"]  #stage-2      { display: block !important; }
  body[data-print="stage-3"]  #stage-3      { display: block !important; }
  body[data-print="stage-4"]  #stage-4      { display: block !important; }
  body[data-print="summary"]  #stage-canvas { display: block !important; }

  /* ══════════════════════════════════════
     PRINT HEADER
  ══════════════════════════════════════ */
  #print-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14pt;
    padding-bottom: 8pt;
    border-bottom: 1.5pt solid #1A9BD7 !important;
  }
  .ph-left  { flex: 1; }
  .ph-right { text-align: right; flex-shrink: 0; margin-left: 16pt; }
  .ph-title {
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: #1A9BD7 !important;
  }
  #ph-stage {
    display: block;
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    color: #555 !important;
    margin-top: 2pt;
  }
  #ph-team {
    display: block;
    font-family: Georgia, serif !important;
    font-size: 9pt !important;
    font-weight: bold !important;
    color: #000 !important;
  }
  #ph-members {
    display: block;
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    color: #555 !important;
    margin-top: 2pt;
  }

  /* ══════════════════════════════════════
     PRINT FOOTER
  ══════════════════════════════════════ */
  #print-footer {
    display: block !important;
    margin-top: 24pt;
    padding-top: 5pt;
    border-top: 0.5pt solid #ccc !important;
    font-family: Georgia, serif !important;
    font-size: 7.5pt !important;
    color: #888 !important;
    text-align: center !important;
  }

  /* ══════════════════════════════════════
     STAGE HEADER
  ══════════════════════════════════════ */
  .stage-header {
    display: block !important;
    background: white !important;
    padding: 0 0 10pt !important;
    border-bottom: 0.5pt solid #ddd !important;
    margin-bottom: 12pt !important;
  }
  .stage-header h2 {
    font-family: Georgia, serif !important;
    font-size: 16pt !important;
    font-weight: bold !important;
    color: #000 !important;
    line-height: 1.2 !important;
    margin: 0 0 5pt !important;
    border: none !important;
  }
  .stage-header h2 em { font-style: italic !important; }
  .stage-header p {
    font-family: Georgia, serif !important;
    font-size: 9.5pt !important;
    color: #333 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
  }

  /* ── Stage body ── */
  .stage-body {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* ══════════════════════════════════════
     CARDS
  ══════════════════════════════════════ */
  .card {
    display: block !important;
    border: 0.75pt solid #ddd !important;
    border-radius: 0 !important;
    padding: 8pt 10pt !important;
    margin-bottom: 10pt !important;
    page-break-inside: avoid !important;
    background: white !important;
  }
  .card-head {
    display: block !important;
    background: white !important;
    border-bottom: 0.5pt solid #ddd !important;
    padding-bottom: 5pt !important;
    margin-bottom: 6pt !important;
  }
  .card-head h3 {
    font-family: Georgia, serif !important;
    font-size: 11pt !important;
    font-weight: bold !important;
    color: #000 !important;
    margin: 0 0 2pt !important;
  }
  .card-head p {
    font-family: Georgia, serif !important;
    font-size: 8.5pt !important;
    color: #555 !important;
    margin: 0 !important;
  }
  .card-body { display: block !important; padding: 0 !important; }

  /* ══════════════════════════════════════
     TEACH / CALLOUT BOXES
  ══════════════════════════════════════ */
  .teach {
    display: block !important;
    background: white !important;
    border: 0.75pt solid #ccc !important;
    border-left: 2pt solid #1A9BD7 !important;
    border-radius: 0 !important;
    padding: 5pt 8pt !important;
    margin: 8pt 0 !important;
    font-family: Georgia, serif !important;
    font-size: 9pt !important;
    color: #333 !important;
    font-style: italic !important;
  }

  /* ══════════════════════════════════════
     ACCORDIONS — content always visible,
     trigger becomes a plain subheading
  ══════════════════════════════════════ */
  ul.accordion[data-accordion] {
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 0 6pt !important;
    padding: 0 !important;
  }
  ul.accordion[data-accordion] li.accordion-item {
    display: block !important;
    border: none !important;
    border-left: none !important;
    background: transparent !important;
    margin: 0 !important;
    list-style: none !important;
  }
  /* Trigger bar → plain bold label */
  ul.accordion[data-accordion] .accordion-title {
    display: block !important;
    background: none !important;
    border: none !important;
    border-bottom: 0.5pt solid #ccc !important;
    padding: 5pt 0 3pt !important;
    margin: 6pt 0 3pt !important;
    font-family: Georgia, serif !important;
    font-size: 9pt !important;
    font-weight: bold !important;
    color: #333 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
  }
  /* Strip chevron and "click to expand" pseudo-elements */
  ul.accordion[data-accordion] .accordion-title::after,
  ul.accordion[data-accordion] .accordion-title .dp-label::after {
    display: none !important;
    content: none !important;
  }
  /* Always show content */
  ul.accordion[data-accordion] .accordion-content,
  ul.accordion[data-accordion] .accordion-content[data-tab-content] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    padding: 3pt 0 3pt 10pt !important;
    border-left: 1.5pt solid #ddd !important;
    border-bottom: none !important;
    background: transparent !important;
    margin-bottom: 4pt !important;
  }
  /* Discussion question lists */
  .dp-qs {
    list-style: disc !important;
    margin: 0 !important;
    padding: 0 0 0 10pt !important;
  }
  .dp-qs li {
    font-family: Georgia, serif !important;
    font-size: 9pt !important;
    color: #333 !important;
    margin-bottom: 3pt !important;
  }
  /* Facilitator tips */
  .dp-tip {
    font-family: Georgia, serif !important;
    font-size: 8.5pt !important;
    font-style: italic !important;
    color: #666 !important;
    margin: 4pt 0 2pt !important;
  }
  .dp-tip i { display: none !important; } /* hide fi-lightbulb icon */

  /* ══════════════════════════════════════
     FIELD LABELS & HELP TEXT
  ══════════════════════════════════════ */
  .fl {
    display: block !important;
    font-family: Georgia, serif !important;
    font-size: 7.5pt !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: #333 !important;
    margin: 10pt 0 2pt !important;
    border: none !important;
    background: transparent !important;
  }
  .fh {
    display: block !important;
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    font-style: italic !important;
    color: #666 !important;
    margin-bottom: 3pt !important;
    border: none !important;
  }

  /* ══════════════════════════════════════
     INPUT FIELDS — ruled lines, not boxes
  ══════════════════════════════════════ */
  textarea, input[type="text"], select {
    display: block !important;
    width: 100% !important;
    min-height: 42pt !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 0.75pt solid #aaa !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4pt 0 !important;
    font-family: Georgia, serif !important;
    font-size: 10pt !important;
    color: #000 !important;
    resize: none !important;
    overflow: visible !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  /* Extra writing room for perspective column fields */
  .persp-body textarea { min-height: 54pt !important; }
  /* Shorter lines for single-sentence fields */
  .grid-2 input[type="text"] { min-height: 20pt !important; }

  /* ══════════════════════════════════════
     THREE-COLUMN PERSPECTIVE GRID
     — print as a ruled table
  ══════════════════════════════════════ */
  .perspective-cols {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 8pt 0 10pt !important;
    page-break-inside: avoid !important;
  }
  .perspective-col {
    display: table-cell !important;
    width: 33.33% !important;
    vertical-align: top !important;
    padding: 8pt 7pt !important;
    border: 0.75pt solid #bbb !important;
  }
  .persp-head {
    display: block !important;
    border-bottom: 0.75pt solid #bbb !important;
    padding-bottom: 4pt !important;
    margin-bottom: 5pt !important;
    background: transparent !important;
    padding-top: 0 !important;
  }
  .persp-role {
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #333 !important;
  }
  .persp-body { display: block !important; background: transparent !important; }

  /* ══════════════════════════════════════
     OTHER GRIDS
  ══════════════════════════════════════ */
  .grid-2    { display: grid !important; grid-template-columns: 1fr 1fr !important;     gap: 10pt !important; }
  .req-grid,
  .dvf-grid  { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 8pt !important; }
  .sum-row-3 { display: grid !important; grid-template-columns: 1fr 1fr 1.5fr !important; gap: 8pt !important; }
  .sum-row-2 { display: grid !important; grid-template-columns: 1fr 1fr !important;     gap: 8pt !important; }

  /* ══════════════════════════════════════
     OUTPUT BOXES (carry-forward panels)
  ══════════════════════════════════════ */
  .out-box {
    border: 0.75pt solid #999 !important;
    border-radius: 0 !important;
    background: white !important;
    padding: 5pt 8pt !important;
    font-size: 9.5pt !important;
  }

  /* ══════════════════════════════════════
     STAGE 4 — EXPERIMENT SEQUENCE
  ══════════════════════════════════════ */
  .exp-row {
    display: grid !important;
    grid-template-columns: 1fr 120pt !important;
    gap: 8pt !important;
    border-bottom: 0.5pt solid #ddd !important;
    padding: 6pt 0 !important;
    page-break-inside: avoid !important;
  }
  /* Remove exp-row labels above fields */
  .exp-row-label {
    font-family: Georgia, serif !important;
    font-size: 7.5pt !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #555 !important;
  }
  /* Test card / exp brief */
  .tc-fl {
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 2pt !important;
  }
  .tc-thresh-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }
  .tc-thresh {
    background: white !important;
    border: 0.75pt solid #ccc !important;
    padding: 5pt 8pt !important;
  }
  #exp-briefs ul.accordion { page-break-inside: avoid !important; }

  /* ══════════════════════════════════════
     CANVAS / SUMMARY
  ══════════════════════════════════════ */
  body[data-print="summary"] .orbit-hero { display: none !important; }
  .sum-section {
    padding: 10pt 0 !important;
    border-bottom: 0.5pt solid #ddd !important;
    page-break-inside: avoid !important;
  }
  .sum-section-label { margin-bottom: 8pt !important; }
  .ssl-num {
    background: #1A9BD7 !important;
    color: white !important;
    font-size: 9pt !important;
  }
  .sum-testcard .stc-row,
  .sum-testcard .stc-thresh-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8pt !important;
  }
  .stc-val {
    font-family: Georgia, serif !important;
    font-size: 9.5pt !important;
    color: #000 !important;
    padding: 4pt 0 !important;
    border-bottom: 0.75pt solid #aaa !important;
    min-height: 28pt !important;
  }
  .stc-fl {
    font-family: Georgia, serif !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin-bottom: 3pt !important;
  }

  /* ══════════════════════════════════════
     TYPOGRAPHY HIERARCHY
  ══════════════════════════════════════ */
  h1 { font-family: Georgia, serif !important; font-size: 18pt !important; line-height: 1.2 !important; }
  h2 { font-family: Georgia, serif !important; font-size: 13pt !important; line-height: 1.3 !important;
       margin: 12pt 0 4pt !important; border-bottom: 0.5pt solid #ccc !important; padding-bottom: 3pt !important; }
  h3 { font-family: Georgia, serif !important; font-size: 10.5pt !important;
       margin: 10pt 0 3pt !important; }
  h4 { font-family: Georgia, serif !important; font-size: 10pt !important;
       margin: 8pt 0 2pt !important; }

  /* ══════════════════════════════════════
     PAGE BREAKS
  ══════════════════════════════════════ */
  h2, h3 { page-break-after: avoid !important; }
  .card            { page-break-inside: avoid !important; }
  .perspective-cols { page-break-inside: avoid !important; }
  .sum-section     { page-break-inside: avoid !important; }
  .tc-thresh       { page-break-inside: avoid !important; }

}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 960px) {
  .perspective-cols, .req-grid, .dvf-grid { grid-template-columns: 1fr; }
  .stage-body { padding: 16px 20px; }
  .stage-header { padding: 20px 20px 16px; }
  .stage-nav { padding: 14px 20px; flex-wrap: wrap; gap: 8px; }
  .sum-row-3, .sum-row-2 { grid-template-columns: 1fr; }
  .sum-section { padding: 18px 20px; }
  .orbit-hero, .orbit-actions { padding-left: 20px; padding-right: 20px; }
  .cf-items { grid-template-columns: 1fr; }
  .stc-row, .stc-thresh-row { grid-template-columns: 1fr; }
  .stc-field { border-right: none!important; border-bottom: 1px solid var(--border); }
  .stc-pass { border-right: none; border-bottom: 1px solid var(--border); }
  .tc-body, .tc-thresh-grid { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   V2.0 OVERRIDES — Foundation accordion, sidebar rebrand,
   typography, cards, buttons, feedback drawer
══════════════════════════════════════════ */

/* ── Foundation 6 accordion — clean flat style ── */
ul.accordion[data-accordion] {
  border: 1px solid var(--color-border) !important;
  border-radius: 6px;
  background: transparent !important;
  margin: 0 0 var(--space-2) 0;
  padding: 0;
  overflow: hidden;
}
ul.accordion[data-accordion] .accordion-item {
  background: #ffffff;
  border: none !important;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 0;
  box-shadow: none !important;
  border-left: 3px solid transparent !important;
  list-style: none;
}
ul.accordion[data-accordion] .accordion-item.is-active {
  box-shadow: none !important;
  border-left-color: #1A9BD7 !important;
  background: #F0F6FB;
}
ul.accordion[data-accordion] .accordion-title {
  display: flex !important;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 16px !important;
  background: #ffffff !important;
  color: var(--color-ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  border-bottom: 1px solid var(--color-border) !important;
  transition: background 0.15s ease;
  text-decoration: none !important;
  line-height: 1.4 !important;
  cursor: pointer;
}
ul.accordion[data-accordion] .accordion-item.is-active .accordion-title {
  background: #F0F6FB !important;
}
ul.accordion[data-accordion] .accordion-title:hover,
ul.accordion[data-accordion] .accordion-title:focus {
  background: #F0F6FB !important;
  outline: none;
}
/* Remove Foundation's default + symbol */
ul.accordion[data-accordion] .accordion-title::before {
  display: none !important;
}
/* "click to expand" text affordance on the label */
ul.accordion[data-accordion] .accordion-title .dp-label::after {
  content: ' \2014  click to expand';
  color: #1A9BD7;
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: 8px;
}
ul.accordion[data-accordion] .accordion-item.is-active .accordion-title .dp-label::after {
  display: none;
}
/* Chevron — Foundation icon pill, right-aligned */
ul.accordion[data-accordion] .accordion-title::after {
  font-family: "foundation-icons";
  content: "\f109";
  color: #ffffff;
  background: #1A9BD7;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 1.1rem;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1.4;
}
ul.accordion[data-accordion] .accordion-item.is-active .accordion-title::after {
  content: "\f10c";
}
ul.accordion[data-accordion] .accordion-content[data-tab-content] {
  padding: 14px 16px !important;
  background: var(--color-bg) !important;
  border-top: none !important;
  display: none;
}
ul.accordion[data-accordion] .accordion-content.is-active,
ul.accordion[data-accordion] .is-active .accordion-content {
  display: block !important;
}

/* ── Sidebar rebrand — white bg, dark text, teal active ── */
.sidebar {
  background: #FFFFFF !important;
  color: var(--color-ink) !important;
  border-right: 1px solid var(--color-border) !important;
}
.sb-logo { border-bottom: 1px solid var(--color-border) !important; }
.sb-logo h1 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
}
.sb-logo p { color: var(--color-muted) !important; }
.sb-team { border-bottom: 1px solid var(--color-border) !important; }
.sb-team label { color: var(--color-muted) !important; }
.sb-team input {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.sb-team input::placeholder { color: var(--color-muted) !important; }
.sb-timer { border-bottom: 1px solid var(--color-border) !important; }
.timer-label { color: var(--color-muted) !important; }
.timer-display {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
}
.timer-target { color: var(--color-muted) !important; }
.timer-btn {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.timer-btn:hover {
  background: var(--color-accent-light) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-ink) !important;
}
.timer-btn.warn {
  background: rgba(192, 128, 48, 0.1) !important;
  border-color: rgba(192, 128, 48, 0.5) !important;
  color: var(--color-warning) !important;
}
.sb-stage { color: var(--color-ink) !important; }
.sb-stage:hover { background: var(--color-bg) !important; }
.sb-stage.active {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
}
.sb-stage.active .sbs-label,
.sb-stage.active .sbs-sub,
.sb-stage.active .sb-stage-time { color: rgba(255,255,255,0.9) !important; }
.sb-stage.active .sbs-num {
  border-color: rgba(255,255,255,0.6) !important;
  color: #FFFFFF !important;
}
.sb-stage.active .sbs-num span { color: #FFFFFF !important; }
.sb-stage.active::before { background: rgba(255,255,255,0.25) !important; }
.sbs-label { color: var(--color-ink) !important; }
.sbs-sub { color: var(--color-muted) !important; }
.sbs-num {
  border-color: var(--color-border) !important;
  color: var(--color-muted) !important;
}
.s1 .sbs-num, .s2 .sbs-num, .s3 .sbs-num, .s4 .sbs-num, .s5 .sbs-num {
  border-color: var(--color-border) !important;
  color: var(--color-muted) !important;
}
.sb-stage-time {
  background: var(--color-bg) !important;
  color: var(--color-muted) !important;
}
.progress-label { color: var(--color-muted) !important; }
.progress-track { background: var(--color-bg-alt) !important; }
.sb-save-row { border-top: 1px solid var(--color-border) !important; }
.save-btn {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-ink) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.save-btn:hover {
  background: var(--color-accent-light) !important;
  border-color: var(--color-accent) !important;
}
.save-ok { color: var(--color-success) !important; }

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
}
.stage-header h2 em { font-style: italic; font-weight: 700 !important; }
.out-body {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
}

/* ── Cards ── */
.card {
  border: 1px solid var(--color-border) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(26,155,215,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
  overflow: hidden;
}
.card-head {
  border-bottom: 1px solid var(--color-border) !important;
  background: #FFFFFF !important;
}
.card-head h3 {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.card-head p { color: var(--color-muted) !important; }

/* ── Buttons ── */
.nav-btn.nav-next {
  background: var(--color-warning) !important; /* GOLD — primary CTA */
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px !important;
}
.nav-btn.nav-next:hover {
  background: #9e6620 !important;
  opacity: 1 !important;
}
/* Also add border-radius to nav-save */
.nav-save { border-radius: 6px !important; }
.nav-print-ws { border-radius: 6px !important; }
.nav-btn { border-radius: 6px !important; }

/* ════════════════════════════════════════
   ITEM 1 — Stage 1 visual hierarchy
════════════════════════════════════════ */
/* Normalise persp-body field labels (were inline font-size:9px) */
.persp-body .fl,
.persp-fl {
  font-size: 12px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 4px;
}

/* Stage intro paragraph — one size, one weight */
.stage-header > p {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-ink);
  line-height: 1.6;
}

/* ════════════════════════════════════════
   ITEM 2 — Sticky stage nav
════════════════════════════════════════ */
.stage-nav {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  z-index: 100;
}

/* Canvas stage nav has dark bg — override sticky white */
.canvas-stage-nav {
  background: #0e0e16 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}

/* Export session button */
.nav-export-session {
  background: var(--color-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600;
}
.nav-export-session:hover {
  background: var(--color-accent-dark) !important;
}

/* ════════════════════════════════════════
   ITEM 3 — Stage progress bar (S3 + S4)
════════════════════════════════════════ */
.stage-progress-wrap {
  margin-top: 12px;
}
.stage-progress-label {
  font-size: 12px;
  color: var(--color-muted);
  margin-bottom: 4px;
}
.stage-progress .progress-meter,
.s2-progress .progress-meter {
  background-color: var(--color-accent);
  transition: width 0.3s ease;
}
.stage-progress,
.s2-progress {
  height: 6px;
  background: var(--color-border);
  border-radius: 99px;
  margin-bottom: 0;
}

/* ════════════════════════════════════════
   ITEM 4 — Demo content labels
════════════════════════════════════════ */
.demo-badge {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  margin-right: 8px;
  vertical-align: middle;
  letter-spacing: 0.06em;
}
.clear-demo-btn {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
  vertical-align: middle;
}
.clear-demo-btn:hover { color: var(--color-error); }
@media print {
  .demo-badge, .clear-demo-btn { display: none !important; }
}

/* ════════════════════════════════════════
   ITEM 5 — Export modal
════════════════════════════════════════ */
.export-modal-inner {
  padding: 24px 28px 20px;
}
.export-modal-inner h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-ink);
}
.export-modal-inner p { margin-bottom: 10px; }
.export-modal-inner .button {
  background: var(--color-accent);
  border-radius: 6px;
  margin-top: 8px;
}

/* ════════════════════════════════════════
   ITEM 6 — Tour last step green button
════════════════════════════════════════ */
.lp-tour-finish {
  background: var(--color-success) !important;
  color: #ffffff !important;
}

/* ════════════════════════════════════════
   ITEM 7 — Tablet breakpoint (768–1023px)
════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Sidebar narrower */
  .sidebar {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
  }
  .sbs-label { font-size: 0.875rem; }
  .sbs-sub   { font-size: 0.75rem; }
  .sidebar h1 { font-size: 1.1rem; }

  /* Three-column grids: already collapse at 960px, just reinforce */
  .perspective-cols,
  .req-grid,
  .dvf-grid {
    grid-template-columns: 1fr;
  }

  /* Stage headings */
  h2 { font-size: 1.25rem; }
  .stage-header h2 { font-size: 1.4rem; }

  /* Cards: reduce padding */
  .card { }
  .card-body { padding: 14px 16px; }

  /* Bottom nav: allow wrapping */
  .stage-nav {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Accordion triggers: comfortable for touch on tablet */
  .accordion-title {
    min-height: 48px;
    font-size: 1rem;
  }

  /* Tour popover narrower */
  .lp-tour-popover {
    width: 260px !important;
    max-width: 260px !important;
  }
}
.btn { border-radius: 6px !important; }
.stb-print { border-radius: 6px !important; }

/* ── Feedback sidebar button ── */
.sb-feedback-btn-wrap { padding: 8px 20px 4px; }
.feedback-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  letter-spacing: 0.01em;
}
.feedback-btn:hover { background: var(--color-accent-dark) !important; }

/* ── Feedback drawer — overrides the IIFE-injected styles ── */
#fb-bar {
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 300px !important;
  height: 100vh !important;
  border-radius: 0 !important;
  transform: translateX(100%) !important;
  transition: transform 0.3s ease !important;
  overflow-y: auto !important;
  box-shadow: -4px 0 24px rgba(0,0,0,0.15) !important;
  z-index: 1000 !important;
}
#fb-bar.fb-open {
  transform: translateX(0) !important;
}

/* ── Team members sidebar section ── */
.sb-members { padding: 10px 20px 12px; border-bottom: 1px solid var(--color-border) !important; }
.sb-members-label {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-muted); margin-bottom: 8px;
}
.member-row { display: grid; grid-template-columns: 1fr 1fr 24px; gap: 5px; margin-bottom: 5px; align-items: center; }
.member-row input {
  padding: 5px 8px; border: 1px solid var(--color-border); border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: var(--color-ink);
  background: var(--color-bg); outline: none; width: 100%;
}
.member-row input:focus { border-color: var(--color-accent); background: #fff; }
.member-row select {
  padding: 5px 6px; border: 1px solid var(--color-border); border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif; font-size: 11px; color: var(--color-ink);
  background: var(--color-bg); outline: none; width: 100%; cursor: pointer;
}
.member-row select:focus { border-color: var(--color-accent); }
.member-row .mdel {
  background: none; border: none; color: var(--color-muted); font-size: 14px;
  cursor: pointer; padding: 0; line-height: 1; align-self: center;
}
.member-row .mdel:hover { color: #b00; }
.add-member-btn {
  width: 100%; margin-top: 4px; padding: 5px 10px;
  background: var(--color-bg); border: 1px dashed var(--color-border);
  border-radius: 4px; font-size: 11px; color: var(--color-muted);
  font-family: 'Inter', system-ui, sans-serif; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.add-member-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ── Experiment brief accordions ── */
#exp-briefs .accordion-title {
  background: var(--color-accent) !important;
  color: #ffffff !important;
}
#exp-briefs .accordion-item.is-active .accordion-title,
#exp-briefs .accordion-title:hover,
#exp-briefs .accordion-title:focus {
  background: var(--color-accent-dark) !important;
}
#exp-briefs .accordion-title::after {
  color: rgba(255,255,255,0.85) !important;
  background: rgba(255,255,255,0.2) !important;
}
#exp-briefs .accordion-title .dp-label::after {
  color: rgba(255,255,255,0.7) !important;
}
#exp-briefs .accordion-item.is-active {
  border-left-color: var(--color-accent-dark) !important;
}
.exp-brief-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 0; }
.exp-brief-body .tc-f { margin-bottom: 0; }
.exp-brief-body .tc-thresh { grid-column: 1 / -1; }

/* ── Canvas team section ── */
.cv-team-section { padding: 20px 40px; border-bottom: 1.5px solid var(--border); }
.cv-team-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cv-team-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 20px; font-size: 12px; color: var(--color-ink);
}
.cv-team-chip .ctc-role {
  font-size: 10px; color: var(--color-muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ════════════════════════════════════════
   TOUR
════════════════════════════════════════ */

/* Spotlight highlight box — box-shadow creates the overlay */
.lp-tour-highlight {
  position: fixed;
  z-index: 9999;
  border-radius: 6px;
  pointer-events: none;
  box-shadow:
    0 0 0 4px #1A9BD7,
    0 0 0 9999px rgba(0, 0, 0, 0.55);
  transition: top 0.25s ease, left 0.25s ease,
              width 0.25s ease, height 0.25s ease;
}

/* Popover card */
.lp-tour-popover {
  position: fixed;
  z-index: 10000;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  width: 300px;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: visible;
  display: none;
  transition: top 0.25s ease, left 0.25s ease;
}

/* Arrow via ::before — side controlled by class */
.lp-tour-popover::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  transform: rotate(45deg);
  z-index: -1;
}
/* arrow-top: arrow points up, sits above the popover (popover is below target) */
.lp-tour-popover.arrow-top::before {
  top: -5px;
  left: var(--lp-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.07);
}
/* arrow-bottom: arrow points down, sits below the popover (popover is above target) */
.lp-tour-popover.arrow-bottom::before {
  bottom: -5px;
  left: var(--lp-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.07);
}
/* arrow-left: arrow on left side (popover is to the right of target) */
.lp-tour-popover.arrow-left::before {
  left: -5px;
  top: var(--lp-arrow-y, 50%);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.07);
}
/* arrow-right: arrow on right side (popover is to the left of target) */
.lp-tour-popover.arrow-right::before {
  right: -5px;
  top: var(--lp-arrow-y, 50%);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 2px -2px 4px rgba(0, 0, 0, 0.07);
}

.lp-tour-popover-header {
  padding: 14px 16px 12px 14px;
  border-left: 3px solid #1A9BD7;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: 12px 12px 0 0;
}
.lp-tour-popover-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.35;
  flex: 1;
}
.lp-tour-close {
  background: none;
  border: none;
  color: #9CA3AF;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  margin-top: -1px;
}
.lp-tour-close:hover { color: #4A5568; }
.lp-tour-popover-body {
  padding: 4px 17px 16px 17px;
  font-size: 0.875rem;
  color: #4A5568;
  line-height: 1.6;
}
.lp-tour-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid #E5E7EB;
  gap: 8px;
  border-radius: 0 0 12px 12px;
}
.lp-tour-skip {
  background: none;
  border: none;
  color: #9CA3AF;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  white-space: nowrap;
}
.lp-tour-skip:hover { color: #6B7280; text-decoration: underline; }
.lp-tour-counter {
  font-size: 0.8rem;
  color: #9CA3AF;
  text-align: center;
  flex: 1;
  white-space: nowrap;
}
.lp-tour-next {
  background: #1A9BD7;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
.lp-tour-next:hover { background: #1480B8; }
.lp-tour-finish { background: #1E7A4A !important; }
.lp-tour-finish:hover { background: #175e39 !important; }

/* Sidebar tour button */
.sb-tour-btn-wrap { padding: 0 20px 8px; }
.tour-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  color: var(--color-muted);
  border: 1px dashed var(--color-border);
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.tour-trigger-btn:hover {
  border-color: #1A9BD7;
  color: #1A9BD7;
  background: #F0F6FB;
}

/* ════════════════════════════════════════
   MOBILE — Steps 2, 3 + 8 (max-width 767px)
════════════════════════════════════════ */

/* ── Mobile header (Step 2) ── */
#mobile-header {
  display: none; /* shown via media query below */
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  z-index: 1000;
  align-items: center;
  padding: 0 4px 0 0;
}
#mobile-hamburger {
  width: 52px; height: 52px; /* full header height */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-ink); padding: 0; margin-left: 4px;
  flex-shrink: 0;
}
#mobile-hamburger i { font-size: 1.4rem; }
.mobile-wordmark {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-size: 14px; font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
  pointer-events: none;
}
#mobile-timer-badge {
  margin-left: auto;
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-family: 'Courier New', monospace; font-weight: 700;
  color: var(--color-ink);
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
#mobile-timer-badge:hover { background: var(--color-bg); }
#mobile-timer-badge.running { color: var(--color-success); }

/* ── Mobile bottom nav (Step 3) ── */
#mobile-bottom-nav {
  display: none; /* shown via media query below */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 8px);
}
.mbn-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  transition: background 0.15s;
}
.mbn-tab.active {
  background: var(--color-accent);
}
.mbn-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink);
  line-height: 1;
}
.mbn-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  line-height: 1;
}
.mbn-tab.active .mbn-num,
.mbn-tab.active .mbn-label { color: #ffffff; }
.mbn-tab.completed .mbn-num {
  font-size: 11px;
  color: var(--color-success);
}
.mbn-tab.completed .mbn-num::before {
  font-family: 'foundation-icons';
  content: '\f116';
}

/* ── Mobile off-canvas drawer (Step 4) ── */
#oc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(240, 246, 251, 0.72);
  backdrop-filter: blur(4px);
  z-index: 1090;
}
#oc-backdrop.open { display: block; }

#mobile-off-canvas {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 300px;
  max-width: 85vw;
  background: var(--color-white);
  box-shadow: 6px 0 24px rgba(26, 155, 215, 0.12);
  z-index: 1100;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
}
#mobile-off-canvas.open { transform: translateX(0); }

.oc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 12px 0 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.oc-wordmark {
  font-size: 14px; font-weight: 700;
  color: var(--color-accent);
}
.oc-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; color: var(--color-muted);
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.oc-close:hover { background: var(--color-bg); color: var(--color-ink); }

.oc-team {
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--color-border);
}
.oc-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-muted);
  margin-bottom: 8px;
}
.oc-team input[type="text"] {
  width: 100%; padding: 8px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: 15px; color: var(--color-ink);
  font-family: 'Inter', system-ui, sans-serif;
}
.oc-team input[type="text"]:focus {
  border-color: var(--color-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 155, 215, 0.2);
}

.oc-members {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border);
}
.oc-add-member-btn {
  margin-top: 10px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
  font-family: 'Inter', system-ui, sans-serif;
}
.oc-add-member-btn:hover { background: var(--color-accent-light); }

.oc-timer {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--color-border);
}
.oc-timer-display {
  font-size: 2rem; font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--color-ink);
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.oc-timer-btns {
  display: flex; gap: 8px;
}
.oc-timer-btn {
  flex: 1; padding: 9px 12px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  color: var(--color-ink);
  cursor: pointer;
  transition: all 0.15s;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.oc-timer-btn:hover { background: var(--color-accent-light); border-color: var(--color-accent); color: var(--color-accent); }
#oc-timer-start.running { color: var(--color-success); border-color: var(--color-success); }

.oc-actions {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-action-btn {
  width: 100%; padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px; font-weight: 600;
  cursor: pointer; border: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  transition: all 0.15s;
}
.oc-save-btn {
  background: var(--color-accent);
  color: #ffffff;
}
.oc-save-btn:hover { background: var(--color-accent-dark); }
.oc-feedback-btn {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1.5px solid var(--color-border) !important;
}
.oc-feedback-btn:hover { background: var(--color-accent-light); }
.oc-tour-btn {
  background: transparent;
  color: var(--color-muted);
  border: 1.5px solid var(--color-border) !important;
  font-size: 13px;
}
.oc-tour-btn:hover { background: var(--color-bg); color: var(--color-accent); }

/* ── Mobile breakpoint: body padding + show/hide ── */
@media (max-width: 767px) {
  /* Offset fixed header + bottom nav */
  body {
    padding-top: 52px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Hide desktop sidebar on mobile */
  .sidebar { display: none !important; }

  /* Show mobile chrome */
  #mobile-header     { display: flex !important; }
  #mobile-bottom-nav { display: flex !important; }

  /* Tighten stage body padding */
  .stage-body   { padding: 14px 16px !important; }
  .stage-header { padding: 16px 16px 12px !important; }
  .stage-nav    { padding: 12px 16px !important; flex-wrap: wrap !important; gap: 6px !important; }
  /* Item 2: 2-row mobile button layout
     Row 1: prev + print  |  Row 2: save + continue (each full width) */
  .stage-nav .nav-btn.nav-prev,
  .stage-nav .nav-print-ws  { flex: 1 1 calc(50% - 3px); min-width: 0; }
  .stage-nav .nav-save,
  .stage-nav .nav-btn.nav-next { flex: 1 1 calc(50% - 3px); min-width: 0; }
  .stage-time-bar { padding: 8px 16px !important; }

  /* ── Fix 2: Accordion trigger layout ── */
  /* Wrap role pills to second line; chevron absolutely positioned */
  ul.accordion[data-accordion] .accordion-title {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    position: relative !important;
    padding: 12px 52px 10px 14px !important; /* right gap for chevron */
    gap: 0 6px !important;
    min-height: 44px !important;
  }
  /* Icon stays centred vertically on the first row */
  ul.accordion[data-accordion] .accordion-title .dp-icon {
    align-self: center;
    flex-shrink: 0;
  }
  /* Label fills remaining first-row width */
  ul.accordion[data-accordion] .accordion-title .dp-label {
    flex: 1;
    min-width: 0;
    font-size: 15px !important;
    line-height: 1.4;
  }
  /* "— click to expand" hint: drop to its own line, smaller */
  ul.accordion[data-accordion] .accordion-title .dp-label::after {
    display: block !important;
    font-size: 12px !important;
    margin-left: 0 !important;
    margin-top: 3px;
  }
  /* Role pills: wrap to full-width second row */
  ul.accordion[data-accordion] .accordion-title .dp-roles {
    width: 100%;
    flex-basis: 100%;
    padding-left: 22px; /* align with label text (icon ≈ 16px + gap 6px) */
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  /* Chevron pill: absolutely positioned top-right, never displaces text */
  ul.accordion[data-accordion] .accordion-title::after {
    position: absolute !important;
    right: 14px !important;
    top: 14px !important;
    margin-left: 0 !important;
  }

  /* ── Step 5: Role-column mobile color coding ── */
  /* Grids already collapse to 1-col via the 960px breakpoint rule above.
     On mobile, each stacked block gets a role-specific left border + tinted header. */

  /* perspective-cols — Stage 1 */
  .ph1 { border-left: 4px solid #1A9BD7 !important; }
  .ph1 .persp-head { background: #F0F6FB !important; }
  .ph2 { border-left: 4px solid #1E7A4A !important; }
  .ph2 .persp-head { background: #F0F8F3 !important; }
  .ph3 { border-left: 4px solid #C08030 !important; }
  .ph3 .persp-head { background: #FEF9F0 !important; }

  /* req-grid — Stage 2 */
  .rt-ux  { border-left: 4px solid #1A9BD7 !important; }
  .rt-ux  .rt-head { background: #F0F6FB !important; }
  .rt-biz { border-left: 4px solid #1E7A4A !important; }
  .rt-biz .rt-head { background: #F0F8F3 !important; }
  .rt-eng { border-left: 4px solid #C08030 !important; }
  .rt-eng .rt-head { background: #FEF9F0 !important; }

  /* dvf-grid — Stage 3 */
  .dvf-d { border-left: 4px solid #1A9BD7 !important; }
  .dvf-d .dvf-head { background: #F0F6FB !important; }
  .dvf-v { border-left: 4px solid #1E7A4A !important; }
  .dvf-v .dvf-head { background: #F0F8F3 !important; }
  .dvf-f { border-left: 4px solid #C08030 !important; }
  .dvf-f .dvf-head { background: #FEF9F0 !important; }

  /* ── Step 6: Accordion tap targets — 44px min across ALL stages ── */
  /* Fix 2 already handles the layout; this rule ensures the 44px floor
     is enforced on every accordion trigger including Stage 4 nested ones. */
  .accordion-title {
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}

/* ── Desktop: always show sidebar, always hide mobile chrome ── */
@media (min-width: 768px) {
  #mobile-header     { display: none !important; }
  #mobile-bottom-nav { display: none !important; }
  .sidebar           { display: flex !important; }
}