/* The Friday file: participant shell. Two panes, a decision drawer, and a
   prepare flow. Uses the platform tokens in ../brand/tokens.css (B2). */

body.gd {
  background: var(--bg-page);
  /* The AI assistant's own slate identity, kept apart from the platform's
     navy and blue so its advice does not borrow the platform's authority. */
  --tool: #334155;
  --tool-soft: #f1f5f9;
  --tool-line: #cbd5e1;
  --tool-bar: #64748b;
}

/* Compact product header */
body.gd .simulation-header {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0;
  padding: 10px 24px;
  border: 0;
  border-bottom: 1px solid var(--card-line);
  border-radius: 0;
  box-shadow: none;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: saturate(1.4) blur(8px);
}
body.gd .simulation-brand img { width: 84px; }
body.gd .simulation-brand span { padding-left: 12px; color: var(--muted); font-size: 13px; font-weight: 550; letter-spacing: 0; text-transform: none; }
body.gd .simulation-meta { gap: 0; font-size: 12px; }

body.gd #app { width: 100%; margin: 0; padding: 0; }
body.gd #app[data-stage="landing"],
body.gd #app[data-stage="prep"] { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: clamp(32px, 7vh, 72px) 0 64px; }
body.gd #app[data-stage="landing"] { width: min(1080px, calc(100% - 32px)); padding-top: clamp(24px, 5vh, 56px); }

/* ---------- Buttons ---------- */
body.gd .gd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  color: var(--ink);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-shadow: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
body.gd .gd-btn:hover { border-color: var(--muted-2); background: var(--card-soft); box-shadow: none; }
body.gd .gd-btn::after { content: none; }
body.gd .gd-primary { border-color: var(--accent); color: #fff; background: var(--accent); }
body.gd .gd-primary:hover { border-color: var(--accent-hover); color: #fff; background: var(--accent-hover); }
body.gd .gd-secondary[aria-pressed="true"] { border-color: var(--brand-press); color: var(--brand-press); background: var(--brand-soft); box-shadow: none; }
body.gd .gd-ghost { border-color: transparent; background: transparent; box-shadow: none; color: var(--ink-2); }
body.gd .gd-ghost:hover { background: var(--control-well); box-shadow: none; }
body.gd .gd-danger { border-color: var(--danger); color: #fff; background: var(--danger); }
body.gd .gd-danger:hover { color: #fff; background: #a50e1d; border-color: #a50e1d; }
body.gd .gd-warn-btn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }
body.gd .gd-lg { min-height: 48px; padding: 12px 22px; font-size: 15px; }
body.gd .gd-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
body.gd .gd-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* A disabled secondary button keeps readable muted text instead of fading. */
body.gd .gd-secondary:disabled { opacity: 1; color: var(--muted); background: transparent; }
body.gd .gd-primary:disabled:hover { border-color: var(--accent); background: var(--accent); }

body.gd .gd-link,
body.gd .gd-back {
  display: inline;
  width: auto;
  min-height: 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  color: var(--brand-press);
  background: none;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brand-line);
}
body.gd .gd-link:hover, body.gd .gd-back:hover { background: none; box-shadow: none; text-decoration-color: currentColor; }
body.gd .gd-link::after { content: none; }
body.gd .gd-back { display: inline-flex; text-decoration: none; margin-bottom: 12px; }
body.gd .gd-back::before { content: "\2190"; margin-right: 8px; }

/* ---------- Chips ---------- */
.gd-chip {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 2px 8px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--card);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.gd-chip-ai { border-color: var(--tool-line); color: var(--tool); background: var(--tool-soft); }
.gd-chip-done { border-color: var(--ok-line); color: var(--ok); background: var(--ok-bg); }
.gd-chip-done::before { content: "\2713"; margin-right: 4px; }
.gd-chip-warn { border-color: var(--warn-line); color: var(--warn); background: var(--warn-bg); }
.gd-chip-muted { color: var(--muted); background: transparent; }
.gd-chip-new { border-color: var(--info-line); color: var(--info); background: var(--info-bg); }

.gd-eyebrow { color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gd-reason { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gd-sub { color: var(--muted); }
.gd-fine { color: var(--muted); font-size: 13px; }
.gd-notice { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--warn-line); border-radius: var(--r-md); color: var(--warn); background: var(--warn-bg); font-size: 14px; }

/* ---------- Landing ---------- */
.gd-landing h1 { margin-top: 12px; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.12; letter-spacing: -.03em; }
.gd-landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }

/* ---------- Prepare ---------- */
.gd-prep { max-width: 560px; margin: 0 auto; padding: clamp(24px, 4vw, 36px); border: 1px solid var(--card-line); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card-lg); }
.gd-prep-top { display: flex; align-items: center; justify-content: space-between; }
.gd-dots { display: flex; gap: 6px; margin: 14px 0 22px; }
.gd-dot { width: 24px; height: 4px; border-radius: 2px; background: var(--card-line); transition: width .35s cubic-bezier(.2, .8, .2, 1), background-color .35s ease; }
.gd-dot.on { width: 44px; }
.gd-dot.on { background: var(--brand-press); }
.gd-dot.done { background: var(--brand-line); }
.gd-prep h1 { margin-bottom: 14px; font-size: 26px; letter-spacing: -.02em; }
.gd-prep p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.gd-demo { display: grid; gap: 6px; margin: 18px 0 0; padding: 10px; list-style: none; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-demo li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: var(--card); font-size: 14px; }
.gd-prep-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--card-line); }

/* ---------- Desk bar ---------- */
.gd-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 8px 24px; border-bottom: 1px solid var(--card-line); background: var(--card); }
.gd-step { display: flex; align-items: baseline; gap: 10px; }
.gd-step-l { color: var(--ink); font-size: 15px; font-weight: 650; }
.gd-hours-note { color: var(--ink-2); font-size: 13px; }

/* Status tile: hours ring, files opened, call status */
.gd-status-tile { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 14px; border-radius: var(--r-lg); background: var(--pastel-mist); }
.gd-status-tile p { color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.gd-status-tile strong { color: var(--ink); font-weight: 650; }
.gd-ring { --p: 0; display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: conic-gradient(var(--brand-press) calc(var(--p) * 360deg), var(--card) 0); }
.gd-ring > span { display: grid; place-items: center; align-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--pastel-mist); color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1; }
.gd-status-tile.is-over .gd-ring { background: var(--warn); }
.gd-status-tile.is-over p, .gd-status-tile.is-over strong { color: var(--warn); }
.gd-status-tile.is-compact { gap: 10px; margin: 0; padding: 0; background: none; }
.gd-status-tile.is-compact .gd-ring { width: 34px; height: 34px; }
.gd-status-tile.is-compact .gd-ring > span { width: 25px; height: 25px; font-size: 12px; background: var(--pastel-mist); }

/* ---------- Desk shell ---------- */
.gd-desk { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.gd-panes { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.gd-ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid var(--card-line); border-radius: 9px; background: var(--bg-page); }
.gd-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* People and JunoAI (STEP Campus headshot pattern). JunoAI keeps the slate
   tool border so its face never reads as a colleague's. */
.gd-av { display: block; flex: none; width: 40px; height: 40px; border-radius: var(--r-lg); }
.gd-av-row { width: 34px; height: 34px; border-radius: var(--r-md); }
.gd-av-sm { width: 22px; height: 22px; border-radius: 6px; }
.gd-av-ai { box-shadow: 0 0 0 1px var(--tool-line); }
.gd-sender { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.gd-read .gd-sender p { margin: 0; }
.gd-read .gd-sender-n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); font-size: 15px; font-weight: 650; line-height: 1.35; }
.gd-read .gd-sender-r { color: var(--muted); font-size: 13px; line-height: 1.4; }
.gd-read .gd-tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 6px; color: var(--ink-2); background: var(--control-well); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.gd-read .gd-tag-ai { color: var(--tool); background: var(--tool-soft); }
.gd-h3 { margin-top: 24px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gd-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.gd-person { padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.gd-person-ai { margin-top: 10px; border-color: var(--tool-line); }
.gd-person .gd-sender { margin-top: 0; }
.gd-read .gd-person > p, .gd-read .gd-person-ai > p { margin-top: 10px; color: var(--ink); font-size: 14px; line-height: 1.5; }

.gd-read { overflow: auto; padding: 32px clamp(24px, 4vw, 56px) 48px; background: var(--card); }
.gd-read-body { max-width: 820px; margin: 0 auto; }
.gd-kicker { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.gd-read .gd-kicker { margin-top: 0; font-size: 12px; }
.gd-read h2, .gd-read .gd-later-h { font-size: 24px; letter-spacing: -.02em; margin-bottom: 10px; }
.gd-read p { margin-top: 12px; font-size: 16px; line-height: 1.65; }
.gd-read .gd-sub { margin-top: 0; }
.gd-callout { margin-top: 24px; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-callout h3 { font-size: 15px; }
.gd-callout p { margin-top: 6px; color: var(--ink); }
.gd-callout .gd-btn { margin-top: 14px; }
.gd-doc { margin-top: 20px; padding: 20px 22px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-doc p:first-child { margin-top: 0; }
.gd-empty { margin-top: 20px; padding: 16px 18px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.gd-empty p { margin: 0; color: var(--muted); }
.gd-cost { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-read .gd-cost p { flex: 1 1 260px; margin: 0; font-size: 15px; }
.gd-confirm { margin-top: 24px; padding: 20px; border: 1px solid var(--warn-line); border-radius: var(--r-lg); background: var(--warn-bg); }
.gd-confirm h3 { color: var(--warn); font-size: 16px; }
.gd-confirm p { margin: 6px 0 14px; color: var(--ink); }
.gd-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.gd-reply { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-reply.is-ai { border-color: var(--tool-line); background: var(--tool-soft); }
.gd-reply .gd-sender { margin-top: 0; }
.gd-reply > p { margin-top: 14px; color: var(--ink); }

/* Rollout tool advice */
/* Rollout tool panel. One neutral style for every piece of advice and every
   confidence level: no platform navy or blue, no red or green. */
.gd-tool { overflow: hidden; border: 1px solid var(--tool-line); border-radius: var(--r-lg); background: var(--card); }
.gd-tool-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 18px; border-bottom: 1px solid var(--tool-line); background: var(--tool-soft); }
.gd-read .gd-tool-h h2 { margin: 0; color: var(--tool); font-size: 17px; letter-spacing: -.01em; }
.gd-read .gd-tool-sub { margin: 0; color: var(--muted); font-size: 13px; }
.gd-read .gd-tool-warn { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--tool-line); color: var(--tool); background: var(--card); font-size: 15px; font-weight: 650; }
.gd-read .gd-tool-intro { margin: 0; padding: 14px 18px 0; color: var(--ink-2); font-size: 15px; }
.gd-recs { display: grid; margin-top: 6px; }
.gd-rec { padding: 16px 18px; border-top: 1px solid var(--card-line-soft); }
.gd-rec:first-child { border-top: 0; }
.gd-read .gd-rec-tag { margin: 0; color: var(--tool-bar); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gd-read .gd-rec-text { margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 550; }
.gd-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--tool); font-size: 13px; font-weight: 600; }
.gd-conf-bar { flex: 0 0 140px; height: 6px; overflow: hidden; border-radius: var(--r-pill); background: var(--tool-soft); box-shadow: inset 0 0 0 1px var(--tool-line); }
.gd-conf-bar i { display: block; height: 100%; background: var(--tool-bar); }
.gd-status { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gd-rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 14px; }
.gd-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); }
body.gd .gd-seg-b { width: auto; min-height: 38px; margin: 0; padding: 8px 14px; border: 0; border-radius: 0; color: var(--ink); background: var(--card); box-shadow: none; font-size: 14px; font-weight: 600; }
body.gd .gd-seg-b + .gd-seg-b { border-left: 1px solid var(--line-strong); }
body.gd .gd-seg-b:hover { background: var(--tool-soft); box-shadow: none; }
body.gd .gd-seg-b::after { content: none; }
body.gd .gd-seg-b[aria-pressed="true"] { color: #fff; background: var(--ink); }
body.gd .gd-seg-solo { border: 1px solid var(--line-strong); border-radius: var(--r-md); }

/* Dashboard file (all tiles green; the odd one shows in its label and line) */
.gd-dash { margin-top: 20px; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-card); }
.gd-dash-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--card-line-soft); }
.gd-read .gd-dash-h p { margin: 0; font-size: 14px; }
.gd-dash-h p span { margin-left: 6px; color: var(--muted); font-size: 13px; }
.gd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--ok-line); border-radius: var(--r-pill); color: var(--ok); background: var(--ok-bg); font-size: 12px; font-weight: 650; }
.gd-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.gd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-tile { padding: 18px; border-right: 1px solid var(--card-line-soft); border-bottom: 1px solid var(--card-line-soft); }
.gd-tile:nth-child(2n) { border-right: 0; }
.gd-tile:nth-last-child(-n + 2) { border-bottom: 0; }
.gd-read .gd-tile p { margin: 0; }
.gd-read .gd-tile-k { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.gd-tile-k i { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--ok); }
.gd-read .gd-tile-v { margin-top: 4px; color: var(--ink); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.gd-read .gd-tile-d { color: var(--muted); font-size: 12px; }
.gd-tile svg { display: block; width: 100%; height: 46px; margin-top: 10px; }
.gd-later .gd-tile { border-bottom: 0; }
.gd-tile polyline { fill: none; stroke: var(--muted-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gd-rec .gd-reason { margin-top: 4px; }

/* Checkbox and radio rows */
.gd-check, .gd-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}
.gd-check { margin-top: 12px; border-color: transparent; padding: 6px 0; background: transparent; }
.gd-conds .gd-check { margin-top: 6px; padding: 10px 12px; border-color: var(--card-line); background: var(--card); }
.gd-check input, .gd-choice input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand-press); cursor: inherit; }
.gd-check.is-off { color: var(--muted); cursor: not-allowed; }
.gd-rec > .gd-btn { margin-top: 12px; }
.gd-rec-check { margin-top: 12px; }
.gd-read .gd-rec-check p { margin-top: 4px; }
body.gd .gd-spent:disabled { padding-inline: 0; border-color: transparent; color: var(--ink); background: transparent; cursor: default; }
body.gd .gd-spent::before { content: "\2713"; margin-right: 2px; }
.gd-read .gd-tool-rules { margin: 6px 0 0; padding: 0 18px; color: var(--muted); font-size: 13px; }
.gd-choice:hover, .gd-conds .gd-check:hover { border-color: var(--brand-line); }
.gd-choice.is-on, .gd-conds .gd-check.is-on { border-color: var(--brand-press); background: var(--brand-soft); }
.gd-choice:has(input:disabled) { cursor: default; }
.gd-choices { display: grid; gap: 6px; }
.gd-choices.gd-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd-conds { margin: 2px 0 6px 28px; }

/* ---------- Decision drawer ---------- */
.gd-drawer { position: relative; z-index: 5; border-top: 1px solid var(--card-line); background: var(--card); box-shadow: 0 -8px 24px rgb(15 31 61 / 8%); }
.gd-drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 24px; }
.gd-drawer-bar p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.gd-drawer-t { color: var(--ink); font-size: 15px; font-weight: 700; }
.gd-drawer-s { color: var(--muted); font-size: 14px; }
.gd-drawer.is-open .gd-drawer-bar { border-bottom: 1px solid var(--card-line); background: var(--card-soft); }
.gd-drawer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: start;
  gap: 16px 32px;
  max-height: 62vh;
  max-height: 62dvh;
  overflow: auto;
  padding: 20px 24px 28px;
}
.gd-drawer-body > .gd-notice { grid-column: 1 / -1; margin: 0; }
.gd-dstep { grid-column: 1; }
.gd-dstep h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.gd-n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.gd-opt { color: var(--muted); font-size: 12px; font-weight: 500; }
.gd-send { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 0; padding: 18px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-send .gd-btn { width: 100%; margin-top: 14px; }
.gd-summary p { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--card-line); font-size: 14px; }
.gd-summary p:last-child { border-bottom: 0; }
.gd-summary span { color: var(--muted); font-size: 12px; font-weight: 600; }
.gd-summary strong { color: var(--ink); font-weight: 600; }
.gd-sent { grid-column: 1; padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-sent-l { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.gd-sent-c { margin-top: 4px; color: var(--ink); font-weight: 650; }
.gd-sent ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; }

/* ---------- Debrief ---------- */
.gd-debrief { width: min(920px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 64px; }
.gd-debrief-head h1 { font-size: clamp(28px, 3.6vw, 36px); letter-spacing: -.03em; }
.gd-debrief-head p { margin-top: 8px; font-size: 16px; }
.gd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-top: 24px; }
.gd-advice { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; }
.gd-advice li { padding-top: 8px; border-top: 1px solid var(--card-line-soft); }
.gd-advice li:first-child { padding-top: 0; border-top: 0; }
.gd-card { padding: 22px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); box-shadow: none; }
.gd-card h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 17px; }
.gd-card p { margin-top: 8px; font-size: 15px; line-height: 1.6; }
.gd-card strong { color: var(--ink); }
.gd-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 28px; }
.gd-end-actions .gd-reason { flex-basis: 100%; margin: 0; }
.gd-record { margin-top: 32px; padding: 14px 18px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.gd-record summary { color: var(--ink-2); font-size: 14px; font-weight: 600; cursor: pointer; }
.gd-record .debrief, .gd-record .profile { margin-top: 16px; }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .gd-drawer-body { grid-template-columns: minmax(0, 1fr); }
  .gd-send { grid-column: 1; grid-row: auto; position: static; }
}

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  body.gd .simulation-header { padding: 10px 16px; flex-direction: row; align-items: center; }
  body.gd .simulation-brand span { display: none; }
  body.gd .simulation-meta span { display: none; }
  .gd-landing-actions .gd-btn { width: 100%; }
  .gd-bar { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
  .gd-bar-status { position: sticky; top: 45px; z-index: 15; display: flex; min-height: 0; padding: 8px 16px; background: var(--pastel-mist); }
  .gd-tile { padding: 14px; }
  .gd-read .gd-tile-v { font-size: 24px; }
  .gd-conf-bar { flex-basis: 90px; }
  .gd-read { min-height: calc(100dvh - 190px); }
  .gd-desk { display: block; height: auto; padding-bottom: 88px; }
  .gd-panes { display: block; }
  .gd-read { overflow: visible; padding: 16px 16px 32px; }
  .gd-read h2, .gd-read .gd-later-h { font-size: 21px; }
  .gd-drawer { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; }
  .gd-drawer-bar .gd-btn { white-space: nowrap; }
  .gd-drawer-bar { min-height: 72px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .gd-drawer.is-open { top: 0; display: flex; flex-direction: column; }
  .gd-drawer.is-open .gd-drawer-bar { padding-bottom: 10px; }
  .gd-drawer-body { flex: 1; max-height: none; padding: 16px 16px 32px; }
  .gd-choices.gd-inline { grid-template-columns: minmax(0, 1fr); }
  .gd-cards { grid-template-columns: minmax(0, 1fr); }
  .gd-end-actions .gd-btn { width: 100%; }
  .gd-prep-nav .gd-btn { min-width: 120px; }
}
@media (max-width: 390px) {
  .gd-drawer-bar .gd-btn { padding-inline: 12px; }
}

/* Desk phases fill the window exactly, so nothing is clipped below the fold. */
@media (min-width: 761px) {
  body.gd:has(#app[data-phase="deciding"]),
  body.gd:has(#app[data-phase="after_jump"]) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
  body.gd #app[data-phase="deciding"],
  body.gd #app[data-phase="after_jump"] { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  #app[data-phase="deciding"] .gd-desk,
  #app[data-phase="after_jump"] .gd-desk { flex: 1; height: auto; min-height: 0; }
}

/* Small labels keep their size inside reading and prepare panes. */
.gd-prep .gd-eyebrow { margin: 0; font-size: 12px; color: var(--brand-press); }
.gd-read .gd-reason, .gd-drawer .gd-reason { font-size: 13px; line-height: 1.5; margin-top: 6px; color: var(--muted); }

/* ---------- Help, timeline and progress (cold-start support) ---------- */
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 10px 24px; border-bottom: 1px solid var(--card-line); background: var(--card); }
.gd-help { display: flex; flex-wrap: wrap; gap: 6px; }
body.gd .gd-help-b { width: auto; min-height: 32px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-md); color: var(--ink-2); background: transparent; box-shadow: none; font-size: 13px; font-weight: 550; white-space: nowrap; }
body.gd .gd-help-b:hover { border-color: var(--card-line); background: var(--card-soft); color: var(--ink); box-shadow: none; }
body.gd .gd-help-b::after { content: none; }
.gd-prep + .gd-help { justify-content: center; margin-top: 16px; }
.gd-lead { margin-top: 14px; color: var(--ink-2); font-size: 17px; line-height: 1.6; }

/* Timeline */
.gd-tl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 560px; max-width: 820px; margin: 0; padding: 0; list-style: none; }
.gd-tl li { position: relative; display: grid; align-content: start; gap: 2px; padding: 18px 10px 0 0; }
.gd-tl li::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--card-line); }
.gd-tl li:last-child::before { right: auto; width: 12px; }
.gd-tl li.is-done::before { background: var(--brand-line); }
.gd-tl-fill { position: absolute; top: 6px; left: 0; z-index: 1; width: calc(var(--f) * 100%); height: 3px; border-radius: 2px; background: var(--brand-press); }
.gd-tl.is-late .gd-tl-fill { background: var(--warn); }
.gd-tl-dot { position: absolute; top: 1px; left: 0; z-index: 2; width: 13px; height: 13px; border: 2px solid var(--card-line); border-radius: 50%; background: var(--card); }
.gd-tl li.is-done .gd-tl-dot { border-color: var(--brand-press); background: var(--brand-press); }
.gd-tl li.is-now .gd-tl-dot { border-color: var(--brand-press); box-shadow: 0 0 0 4px var(--brand-soft); }
.gd-tl-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1.3; }
.gd-tl-d { color: var(--muted); font-size: 12px; line-height: 1.35; }
.gd-tl li:not(.is-now):not(.is-done) .gd-tl-k { color: var(--muted); }
.gd-tl-here { padding: 0 6px; border-radius: var(--r-pill); color: #fff; background: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .03em; line-height: 1.7; text-transform: uppercase; }

/* Progress rail */

/* Help dialog */
.gd-modal { width: min(720px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-card-lg); color: var(--ink); }
.gd-modal::backdrop { background: rgb(15 31 61 / 40%); }
.gd-modal-card { position: relative; display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.gd-modal-card > .gd-eyebrow { padding: 28px 32px 0; }
.gd-modal-card h2 { padding: 4px 64px 12px 32px; font-size: 30px; letter-spacing: -.02em; }
.gd-modal-body { overflow: auto; padding: 0 32px 20px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.gd-modal-body section + section { margin-top: 18px; }
.gd-modal-body h3 { margin-bottom: 4px; color: var(--ink); font-size: 16px; }
.gd-modal-body p + p { margin-top: 8px; }
.gd-modal-body ul { margin: 8px 0 0; padding-left: 20px; }
.gd-modal-body li + li { margin-top: 6px; }
.gd-modal-actions { display: flex; justify-content: flex-end; padding: 16px 32px 20px; border-top: 1px solid var(--card-line); }
body.gd .gd-modal-x { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; min-height: 40px; padding: 0; border: 1px solid var(--card-line); border-radius: var(--r-md); color: var(--ink); background: var(--card); box-shadow: none; font-size: 22px; line-height: 1; }
body.gd .gd-modal-x::after { content: none; }
.gd-help-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--card-line); }
.gd-help-more p { margin: 0; color: var(--muted); font-size: 14px; }
.gd-qa dt { margin-top: 12px; color: var(--ink); font-weight: 650; }
.gd-qa dd { margin: 2px 0 0; }
.gd-words { display: grid; gap: 0; margin: 10px 0 0; }
.gd-words div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--card-line); }
.gd-words dt { color: var(--ink); font-weight: 650; }
.gd-words dd { margin: 0; }
.gd-ex { display: block; margin-top: 2px; color: var(--muted); font-size: 14px; font-style: italic; }
.gd-modal .gd-people { grid-template-columns: minmax(0, 1fr); padding: 0; }
.gd-modal .gd-sender, .gd-prep .gd-sender { margin-top: 0; }
.gd-modal .gd-sender p { margin: 0; }
.gd-modal .gd-sender-n { color: var(--ink); font-size: 15px; font-weight: 650; }
.gd-modal .gd-sender-r { color: var(--muted); font-size: 13px; }
.gd-modal .gd-person > p { margin-top: 8px; color: var(--ink); font-size: 15px; line-height: 1.5; }
.gd-av-you { display: grid; place-items: center; color: #fff; background: var(--navy); font-size: 12px; font-weight: 700; }
.gd-cast-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.gd-cast-mini li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--card-line); border-radius: var(--r-md); font-size: 13px; line-height: 1.35; color: var(--muted); }
.gd-cast-mini strong { display: block; color: var(--ink); font-size: 14px; }

@media (max-width: 1080px) {
  .gd-top { flex-wrap: wrap; }
  .gd-tl { flex-basis: 100%; max-width: none; }
}
@media (max-width: 760px) {
  .gd-top { padding: 10px 16px; }
  .gd-tl-d, .gd-tl-here { display: none; }
  .gd-tl-k { font-size: 12px; }
  .gd-tl li.is-now .gd-tl-k { color: var(--brand-press); }
  /* On a phone the rail shows only the current step; the timeline above shows the whole run. */
  .gd-cast-mini { grid-template-columns: minmax(0, 1fr); }
  .gd-words div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .gd-modal-card > .gd-eyebrow { padding: 20px 20px 0; }
  .gd-modal-card h2 { padding: 4px 60px 10px 20px; font-size: 24px; }
  .gd-modal-body { padding: 0 20px 16px; }
  .gd-modal-actions { padding: 12px 20px 16px; }
}

/* ---------- Landing hero, journey and faces (first-run appeal) ---------- */
.gd-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); }
.gd-hero .gd-lead { font-size: 19px; color: var(--ink-2); }
.gd-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.gd-tags li { padding: 4px 12px; border-radius: var(--r-pill); color: var(--accent-press); background: var(--accent-soft); font-size: 13px; font-weight: 600; }

.gd-scene { position: relative; display: grid; gap: 10px; margin: 0; padding: 22px; overflow: hidden; border-radius: var(--r-2xl); color: var(--on-dark); background: var(--gradient-hero); box-shadow: var(--shadow-scene); }
.gd-scene > * { position: relative; }
.gd-scene-you { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgb(255 255 255 / 80%); }
.gd-scene-you strong { display: block; color: #fff; font-size: 15px; }
.gd-scene-you .gd-av-you { width: 34px; height: 34px; border-radius: var(--r-md); background: rgb(255 255 255 / 14%); }
.gd-scene-dash { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); color: var(--ink); background: #fff; }
.gd-scene-k { font-size: 13px; font-weight: 650; }
.gd-scene-tiles { display: flex; gap: 4px; margin-left: auto; }
.gd-scene-tiles i { width: 18px; height: 18px; border-radius: 3px; background: #22c55e; }
.gd-scene-tiles i:nth-child(2) { background: #16a34a; }
.gd-scene-tiles i:nth-child(3) { background: #4ade80; }
.gd-bubble { display: flex; align-items: flex-end; gap: 8px; }
/* Bubbles (3.9): 16/16/16/4 for a person, 16/16/4/16 for the requester on
   the right; the typing dots and the line share one grid cell. */
.gd-bubble-body { position: relative; max-width: 86%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; color: var(--ink); background: #fff; font-size: 15px; line-height: 1.4; }
.gd-bubble-ai .gd-bubble-body { background: var(--ai-soft); }
.gd-bubble-right { justify-content: flex-end; }
.gd-bubble-right .gd-bubble-body { border-radius: 16px 16px 4px 16px; }
.gd-bubble-n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; color: var(--muted); font-size: 12px; font-weight: 650; }
.gd-msg { display: grid; color: var(--ink); }
.gd-msg > * { grid-area: 1 / 1; }
.gd-said { display: block; font-weight: 600; }
.gd-typing { display: inline-flex; align-items: center; gap: 4px; visibility: hidden; }
.gd-scene-files { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 2px 0; padding: 0; list-style: none; }
.gd-scene-files li { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border: 1px solid rgb(255 255 255 / 22%); border-radius: var(--r-md); background: rgb(255 255 255 / 6%); font-size: 12px; line-height: 1.25; text-align: center; }
.gd-file-ico { width: 20px; height: 24px; border-radius: 3px 8px 3px 3px; background: rgb(255 255 255 / 85%); }
.gd-scene-clock { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 12px; border-radius: var(--r-pill); color: var(--ink); background: #fde68a; font-size: 13px; font-weight: 700; }
.gd-pulse { width: 8px; height: 8px; border-radius: 50%; background: #b45309; }

.gd-journey { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: stop; }
.gd-journey::before { content: ""; position: absolute; top: 28px; right: 12.5%; left: 12.5%; height: 3px; border-radius: 2px; background: var(--gradient-rail); transform-origin: left; }
.gd-journey li { position: relative; display: grid; align-content: start; justify-items: center; gap: 4px; text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.gd-journey strong { margin-top: 6px; color: var(--ink); font-size: 17px; }
.gd-stop { display: grid; place-items: center; width: 56px; height: 56px; border: 3px solid var(--bg-page); border-radius: 50%; color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-line); }
.gd-stop svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gd-av-face { width: 64px; height: 64px; border-radius: 50%; }

/* Guided start pictures */
.gd-prep-art { margin: 0 0 18px; padding: 18px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card-soft); }
.gd-art { margin: 0; padding: 0; list-style: none; }
.gd-art-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gd-art-facts li { display: grid; justify-items: center; gap: 8px; color: var(--ink); font-size: 14px; font-weight: 600; text-align: center; }
.gd-art-story { display: grid; gap: 10px; }
.gd-art-story .gd-scene-dash { border: 1px solid var(--card-line); }
.gd-art-story .gd-bubble-body { border: 1px solid var(--card-line); }
.gd-prep-art .gd-cast-mini { margin: 0; }
.gd-prep-art .gd-cast-mini li { background: var(--card); }
.gd-prep-art .gd-demo { margin: 10px 0 0; border: 0; padding: 0; background: none; }
.gd-hours-row { display: flex; align-items: center; gap: 10px; margin: 0 !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 650; }
.gd-hours { display: flex; gap: 4px; }
.gd-hours i { width: 16px; height: 16px; border-radius: 3px; background: var(--accent); }
.gd-journey-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.gd-journey-sm::before { right: 16.7%; left: 16.7%; }
.gd-journey-sm .gd-stop { border-color: var(--pastel-mist); }
.gd-journey-sm strong { font-size: 14px; }

/* Landing: time note, starting point, second start button */

/* Micro-motion. Small, slow and never on the desk. The card drifts, the
   start button catches the light once when the story finishes, and things
   answer the pointer. No loop sits on the dashboard or on JunoAI. */
body.gd .gd-cta { position: relative; overflow: hidden; gap: 10px; }
.gd-arrow { display: inline-block; transition: transform .2s ease; }
body.gd .gd-cta:hover .gd-arrow { transform: translateX(4px); }
body.gd .gd-btn:active:not(:disabled) { transform: scale(.98); }
.gd-scene-files li { transition: transform .2s ease, background-color .2s ease; }
.gd-scene-files li:hover { background: rgb(255 255 255 / 12%); }
.gd-stop { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.gd-journey li:hover .gd-stop { transform: translateY(-3px); }

/* Motion (docs/VISUAL_LANGUAGE.md section 4). Entry motion plays only while
   #app carries data-enter: surfaces/app.mjs sets it when the screen key
   changes and deletes it on any other redraw, and the first pointerdown or
   keydown deletes it, which lands every element in its final state at once.
   Opacity and transform only; brand/shell.css mirrors these keyframes. */
@keyframes gd-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes gd-pop { from { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } }
@keyframes gd-fade { from { opacity: 0; } }
@keyframes gd-flip { from { opacity: 0; transform: perspective(400px) rotateY(80deg); } }
@keyframes gd-draw { from { transform: scaleX(0); } }
@keyframes gd-drawy { from { transform: scaleY(0); } }
@keyframes gd-draw-ring { from { stroke-dashoffset: var(--ring-len, 151); } }
@keyframes gd-draw-tick { from { stroke-dashoffset: var(--tick-len, 24); } }
@keyframes gd-dots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes gd-gone { to { opacity: 0; height: 0; padding: 0; } }
@keyframes gd-show { from { opacity: 0; } }
@keyframes gd-hide { to { opacity: 0; } }
@keyframes gd-beat { 0%, 100% { box-shadow: 0 0 0 0 rgb(180 83 9 / 45%); } 60% { box-shadow: 0 0 0 7px rgb(180 83 9 / 0%); } }
@keyframes gd-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

#app[data-enter] .gd-anim.gd-rise { animation: gd-rise var(--t-enter) var(--ease-out) var(--d, 0s) both; }
#app[data-enter] .gd-anim.gd-pop { animation: gd-pop .45s var(--ease-out) var(--d, 0s) both; }
#app[data-enter] .gd-anim.gd-fade { animation: gd-fade .35s var(--ease-std) var(--d, 0s) both; }
#app[data-enter] .gd-anim.gd-flip { animation: gd-flip .45s var(--ease-out) var(--d, 0s) both; }
#app[data-enter] .gd-landing .gd-journey::before { animation: gd-draw .9s var(--ease-out) .15s both; }
#app[data-enter] .gd-bubble .gd-typing { display: inline-flex; gap: 3px; padding: 4px 0; overflow: hidden; animation: gd-gone 0s calc(var(--d, 0s) + .7s) forwards; }
#app[data-enter] .gd-bubble .gd-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: gd-dots .8s infinite; }
#app[data-enter] .gd-bubble .gd-typing i:nth-child(2) { animation-delay: .15s; }
#app[data-enter] .gd-bubble .gd-typing i:nth-child(3) { animation-delay: .3s; }
#app[data-enter] .gd-scene .gd-said { animation: gd-show .3s calc(var(--d, 0s) + .7s) both; }
#app[data-enter] .gd-hero .gd-cta::before { animation: gd-shine 1.1s ease-in-out 3.3s both; }
#app[data-enter] .gd-pulse { animation: gd-beat 2s ease-out 3.4s 3; }
/* Shell screens: the notice (3.17), the resume card (3.20) and the done
   card rise once on entry. */
#app[data-enter] :is(.fx-notice, .fx-resume, .fx-done) { animation: gd-rise 400ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #app[data-enter] .gd-bubble .gd-typing { display: none; }
  body.gd .gd-btn:active { transform: none; }
}

@media (max-width: 900px) {
  .gd-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .gd-hero .gd-lead { font-size: 17px; }
  .gd-scene { gap: 8px; padding: 14px; }
  .gd-scene-files { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .gd-scene-files li { grid-auto-flow: column; justify-content: start; align-items: center; justify-items: start; gap: 8px; padding: 7px 10px; text-align: left; }
  .gd-file-ico { width: 12px; height: 15px; }
  .gd-bubble-body { padding: 8px 12px; font-size: 14px; }
  .gd-scene-dash { padding: 10px 12px; }
  .gd-scene-tiles i { width: 14px; height: 14px; }
  #app[data-enter] .gd-landing .gd-anim, #app[data-enter] .gd-scene .gd-said { animation: none; }
  #app[data-enter] .gd-bubble .gd-typing { display: none; }
  .gd-journey { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gd-journey::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 3px; height: auto; transform-origin: top; }
  .gd-journey li { grid-template-columns: 56px minmax(0, 1fr); justify-items: start; column-gap: 14px; text-align: left; }
  .gd-journey li .gd-stop { grid-row: span 2; }
  .gd-journey strong { margin-top: 6px; }
  .gd-journey-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gd-journey-sm::before { top: 28px; bottom: auto; left: 16.7%; right: 16.7%; width: auto; height: 3px; transform-origin: left; }
  .gd-journey-sm li { grid-template-columns: none; justify-items: center; text-align: center; }
  .gd-journey-sm li .gd-stop { grid-row: auto; }
  .gd-art-facts li { font-size: 13px; }
}

/* The desk as cards: the opening scene and "Still on your desk" use the
   same fixed order and the same weight for every card. */
.gd-brief { margin-top: 16px; }
.gd-brief p + p { margin-top: 10px; }
.gd-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
body.gd .gd-pick { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px 12px; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 14px; border: 1px solid var(--card-line); border-radius: var(--r-lg); color: var(--ink); background: var(--card); box-shadow: none; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: left; transition: border-color .15s ease, background-color .15s ease; }
body.gd .gd-pick::after { content: none; }
body.gd .gd-pick:hover { border-color: var(--muted-2); background: var(--card); box-shadow: none; }
.gd-pick > .gd-ico, .gd-pick > .gd-av { grid-row: span 2; }
.gd-pick-t small { display: block; margin-top: 3px; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.4; }
.gd-pick > .gd-chip { grid-column: 2; justify-self: start; }

/* Opened files read as the real thing: a message with a sender, a subject,
   a time and a voice. */
.gd-mail { margin-top: 18px; overflow: hidden; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.gd-mail header { padding: 16px 20px 12px; border-bottom: 1px solid var(--card-line); background: var(--card-soft); }
.gd-mail header .gd-sender { margin-top: 0; }
.gd-mail-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.gd-mail-meta span:first-child { color: var(--ink); font-size: 15px; font-weight: 650; }
.gd-mail-body { padding: 16px 20px 20px; }
.gd-mail-body p { margin: 0 0 10px; color: var(--ink); font-size: 15.5px; line-height: 1.6; }
.gd-mail-email .gd-mail-body p { font-family: Georgia, "Times New Roman", serif; font-size: 16px; }
.gd-mail-body .gd-mail-sign { margin: 14px 0 0; color: var(--ink-2); font-weight: 600; }
.gd-mail-email .gd-mail-body .gd-mail-sign { font-style: italic; }

/* The drawer leads with the call; the rest waits underneath. */
.gd-drawer-sub { grid-column: 1; margin: 8px 0 -4px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* A quieter top bar: the timeline keeps its stops and drops the notes. */
.gd-top .gd-tl-d { display: none; }
.gd-debrief-head .gd-eyebrow { margin: 0 0 6px; }


/* The record for a facilitator: the same plain pathway the pathway page shows. */
.gd-record .debrief { display: grid; margin-top: 12px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.gd-record .debrief h2 { padding: 14px 16px 0; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.gd-record .debrief p { padding: 2px 16px 14px; border-bottom: 1px solid var(--card-line-soft); color: var(--ink); font-size: 14px; }
.gd-record .debrief p:last-child { border-bottom: 0; }
.gd-record .pv-signature { margin-top: 16px; }
.gd-record .pv-signature h2 { font-size: 15px; }
.pv-note { margin-top: 6px; color: var(--muted); font-size: 13px; }
.pv-cite { display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid var(--card-line); border-radius: 4px; color: var(--muted); background: var(--card-soft); font: 500 11px/1.7 var(--mono); white-space: nowrap; }
.pv-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.pv-table th, .pv-table td { padding: 8px 0; border-bottom: 1px solid var(--card-line-soft); text-align: left; vertical-align: top; }
.pv-table th { width: 30%; padding-right: 16px; font-weight: 600; }

/* ---------- Panel round 2 (docs/reviews/2026-09-30-panel-r2-rulings.md) ---------- */

/* One product, one header: the platform lockup and link, the case's own
   tagline, and two quiet links (R2-10). */
body.gd .simulation-header { display: flex; align-items: center; gap: 8px 20px; }
body.gd .simulation-meta { margin-left: auto; }
.simulation-header .ps-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.simulation-header .ps-brand img { display: block; width: 84px; height: auto; }
.simulation-header .ps-brand span { padding-left: 12px; border-left: 1px solid var(--card-line); color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap; }
.simulation-links { display: flex; align-items: center; gap: 2px; }
.simulation-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: var(--r-md); color: var(--ink-2); font-size: 13px; font-weight: 550; text-decoration: none; white-space: nowrap; }
.simulation-links a:hover { color: var(--ink); background: var(--bg-sunken); }

/* On a phone the four help entries fold into one Help button (R2-14). */
body.gd .gd-help-one { display: none; }

/* The debrief's desk at the moment of the call: counts, no colour (R2-4). */
.gd-glance { margin-top: 20px; }
.gd-glance-l { color: var(--muted); font-size: 13px; font-weight: 600; }
.gd-glance-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 8px 0 0; }
.gd-glance-tiles div { padding: 14px 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); background: var(--card); }
.gd-glance-tiles dt { color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.gd-glance-tiles dd { margin: 4px 0 0; color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }

/* The one provenance note on a surface (R2-1). */
.pv-provenance { margin-top: 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gd-record .pv-provenance { margin-top: 14px; }

@media (max-width: 760px) {
  .simulation-header .ps-brand span { display: none; }
  .gd-glance-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .gd-glance-tiles div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; }
  .gd-glance-tiles dd { margin: 0; font-size: 18px; white-space: nowrap; }
}
@media (max-width: 640px) {
  body.gd .simulation-header { gap: 8px; padding-block: 4px; }
  .simulation-links a { min-height: 44px; padding-inline: 8px; }
  .gd-bar-status { top: 53px; }
  body.gd .gd-help-b:not(.gd-help-one) { display: none; }
  body.gd .gd-help-one { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-color: var(--card-line); }
  /* The open call panel is a full-height sheet over the desk; index.html
     makes what is behind it inert (R2-14). */
  body.gd:has(.gd-drawer.is-open) { height: 100vh; height: 100dvh; overflow: hidden; }
  body.gd:has(.gd-drawer.is-open) :is(.gd-top, .gd-bar-status, .gd-panes) { display: none; }
  .gd-drawer.is-open { inset: 0; overflow: auto; }
  .gd-drawer.is-open .gd-drawer-body { overflow: visible; }
  .gd-drawer:not(.is-open) .gd-drawer-bar { border-top: 1px solid var(--card-line); background: var(--card); }
}
@media (max-width: 390px) {
  .simulation-header .ps-brand img { width: 72px; }
}

/* "Not sure how this works?" (positioning ruling C; orient.mjs): one fold on every
   mission's first screen, after the Start, closed by default. Its parts fold too, so
   a lost reader scans six headings and opens one. No counter, nothing that fills
   (second pass R3). The summary matches the Friday fold in brand/hero.css. */
.fx-orient { margin-top: 28px; }
.fx-orient > .gd-setup { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 20px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); color: var(--ink); background: var(--accent-soft); text-align: left; cursor: pointer; list-style: none; }
.fx-orient > .gd-setup::-webkit-details-marker { display: none; }
.fx-orient > .gd-setup strong { display: block; color: var(--accent-press); font-size: 17px; }
.fx-orient > .gd-setup span { color: var(--ink-2); font-size: 15px; }
.fx-orient > .gd-setup::after { content: "\203A"; margin-left: auto; color: var(--accent); font-size: 26px; line-height: 1; }
.fx-orient[open] > .gd-setup { border-radius: var(--r-lg) var(--r-lg) 0 0; transform: none; box-shadow: none; }
.fx-orient[open] > .gd-setup::after { transform: rotate(90deg); }
.fx-orient-in { padding: 6px 20px 20px; border: 1px solid var(--accent-line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--card); }
.fx-orient-h { margin: 14px 0 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fx-orient-in > .fx-prep { padding: 0 0 12px; border: 0; border-radius: 0; background: none; animation: none; }
.fx-orient-part { border-top: 1px solid var(--card-line); }
.fx-orient-part > summary { display: flex; align-items: center; min-height: 44px; padding: 10px 0; color: var(--ink); font-size: 16px; font-weight: 650; cursor: pointer; list-style: none; }
.fx-orient-part > summary::-webkit-details-marker { display: none; }
.fx-orient-part > summary::after { content: "+"; margin-left: auto; padding-left: 12px; color: var(--accent); font-size: 20px; line-height: 1; }
.fx-orient-part[open] > summary::after { content: "\2212"; }
.fx-orient-body { padding: 0 0 14px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.fx-orient-body p + p { margin-top: 8px; }
.fx-orient-steps { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.fx-orient-qa, .fx-glossary { display: grid; gap: 10px; margin: 0; }
.fx-orient-qa dt, .fx-glossary dt { color: var(--ink); font-weight: 650; }
.fx-orient-qa dd, .fx-glossary dd { margin: 2px 0 0; color: var(--ink-2); }
.fx-orient-cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin: 0; padding: 0; list-style: none; }
.fx-orient-cast li { display: flex; align-items: center; gap: 10px; }
.fx-orient-cast p { display: grid; margin: 0; line-height: 1.35; }
.fx-orient-cast strong { color: var(--ink); font-size: 15px; }
.fx-orient-cast span { color: var(--muted); font-size: 14px; }

/* The desk's "Words" panel (ruling D4): a quiet button at the header's right side and
   a side panel under the header. The shell does not draw it while the call drawer is
   open, so it never covers the drawer. It costs no hours and records nothing. */
body.fx:has(.fx-words) .fx-header { padding-right: 112px; }
.fx-words-btn { position: fixed; top: 10px; right: 24px; z-index: 26; display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--accent-line); border-radius: var(--r-pill); color: var(--accent-press); background: var(--card); font-size: 14px; font-weight: 650; cursor: pointer; list-style: none; }
.fx-words-btn::-webkit-details-marker { display: none; }
.fx-words[open] > .fx-words-btn { color: var(--card); background: var(--accent-press); }
.fx-words-panel { position: fixed; top: 52px; right: 0; bottom: 0; z-index: 25; width: min(380px, 100%); overflow: auto; padding: 20px 24px 32px; border-left: 1px solid var(--card-line); background: var(--card); box-shadow: -12px 0 32px rgb(15 31 61 / 10%); }
.fx-words-panel h2 { margin: 0 0 14px; font-size: 18px; }
.fx-words-panel .fx-glossary { font-size: 15px; line-height: 1.5; }
/* The closed call bar stays above the open panel. */
body.fx:has(.fx-words[open]) .gd-drawer { z-index: 27; }
/* A phone's header has no room: the button sits at the top of the desk, under the stage
   line, and the panel opens in place below it, scrolling on its own. */
@media (max-width: 760px) {
  body.fx:has(.fx-words) .fx-header { padding-right: 16px; }
  .fx-words-btn { position: static; display: block; width: max-content; min-height: 36px; margin: 8px 16px 0 auto; padding: 6px 14px; }
  .fx-words-panel { position: static; width: auto; max-height: 60vh; margin: 8px 16px; padding: 16px; border: 1px solid var(--card-line); border-radius: var(--r-lg); box-shadow: none; }
  .fx-orient-in { padding: 4px 16px 16px; }
}