/* ───────────────────────────────────────────────────────────────────────
   Sensor-chatbot lab — "daylight studio" theme.
   White surfaces, ink typography, indigo accents; calm, modern, airy.
   ─────────────────────────────────────────────────────────────────────── */
:root {
  --bg:         #FFFFFF;
  --ink:        #FFFFFF;   /* card surface */
  --ink-raise:  #F4F5F8;   /* raised / inset surface */
  --ink-deep:   #FAFAFC;   /* wells (inputs, pre) */
  --line:       #E6E8EF;
  --line-strong:#D4D7E1;
  --text:       #14161F;
  --text-dim:   #6B7280;

  --accent:      #0E7490;  /* deep teal — primary actions & links */
  --accent-deep: #155E75;
  --accent-soft: #E3F4F8;
  --leaf:        #0A9469;  /* emerald — synced / live / success */
  --leaf-deep:   #0A7D5A;
  --leaf-soft:   #E6F6F0;
  --blush:       #DC2653;  /* errors */
  --amber:       #A16207;  /* credits & costs */
  --sky:         #0369A1;

  /* device illustration palette (used inside the SVGs) */
  --dev-body:   #262833;
  --dev-screen: #12131A;
  --dev-strap:  #26283330;

  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(20, 22, 31, .05);
  --shadow-md: 0 6px 24px -6px rgba(20, 22, 31, .12);
  --font-display: "Sora", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-data: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── motion ────────────────────────────────────────────────────────
     One vocabulary for every moving thing in the lab: three speeds and
     three curves. A hover, a page arriving and a progress bar filling
     should all feel like the same hand drew them — so nothing below this
     line invents its own duration.

     The whole set is neutralised under `prefers-reduced-motion` at the
     foot of this file. */
  --dur-quick: 120ms;   /* presses and ticks — has to feel instant */
  --dur-base:  220ms;   /* hovers, colour, borders */
  --dur-calm:  420ms;   /* entrances and bars: things the eye follows */

  --ease-out:  cubic-bezier(.22, 1, .36, 1);    /* decelerating — arrivals */
  --ease-soft: cubic-bezier(.4, 0, .2, 1);      /* even — state changes */
  --ease-lift: cubic-bezier(.34, 1.4, .64, 1);  /* a little overshoot — ticks */
}

* { box-sizing: border-box; }
/* `.btn { display: inline-block }` outranks the UA rule for [hidden], so any
   button we hide from a template stays stubbornly visible without this. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
h1 { font-size: 1.9rem; margin: 0 0 .4rem; }
h2 { font-size: 1.3rem; margin: 1.6rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
p.lede { color: var(--text-dim); max-width: 58ch; margin-top: 0; }

/* ── top bar ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 1.6rem;
  padding: .65rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.brand { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; color: var(--text); letter-spacing: -.02em; white-space: nowrap; display: inline-flex; align-items: center; gap: .45rem; }
.brand em { color: var(--text); font-style: normal; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.brand-mark-big { width: 42px; height: 42px; border-radius: 10px; vertical-align: -9px; margin-right: .15rem; }
.topnav { display: flex; gap: .25rem; flex-wrap: wrap; }
.topnav a {
  color: var(--text-dim); font-weight: 500; font-size: .9rem;
  padding: .32rem .8rem; border-radius: 999px;
}
.topnav a:hover { color: var(--text); background: var(--ink-raise); text-decoration: none; }
.topnav a.active { color: var(--accent-deep); background: var(--accent-soft); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: .4rem .9rem; }
  .topnav { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .2rem; }
  .topnav a { white-space: nowrap; }
}
.credits-chip {
  font-family: var(--font-data); font-size: .78rem;
  background: #FFF9EB; border: 1px solid #F2E3BC;
  color: var(--amber); padding: .25rem .65rem; border-radius: 999px;
}
.inline-form { display: inline; }

/* ── layout ──────────────────────────────────────────────────────────── */
.page { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 1.8rem 1.4rem 3rem; }
.footer { text-align: center; color: var(--text-dim); font-size: .8rem; padding: 1.2rem; border-top: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.card h2:first-child, .card h3:first-child { margin-top: 0; }

/* ── forms & buttons ─────────────────────────────────────────────────── */
label { display: block; font-weight: 600; font-size: .85rem; margin: .8rem 0 .25rem; }
input[type=text], input[type=password], input[type=email], input[type=number],
select, textarea {
  width: 100%; background: var(--ink-deep); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: .55rem .7rem; font-family: var(--font-body); font-size: .95rem;
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
textarea { font-family: var(--font-data); font-size: .88rem; line-height: 1.5; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.helptext, .form-hint { color: var(--text-dim); font-size: .78rem; display: block; margin-top: .2rem; }
.errorlist { color: var(--blush); list-style: none; padding: 0; margin: .2rem 0; font-size: .85rem; }

.btn {
  display: inline-block; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--ink); color: var(--text);
  font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  padding: .5rem 1.1rem; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-quick) var(--ease-lift),
              background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.btn:hover { background: var(--ink-raise); text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; box-shadow: none; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--ink-raise); }
.btn-sm { font-size: .78rem; padding: .3rem .8rem; }
.btn-danger { border-color: #F3C4CF; color: var(--blush); background: transparent; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── flashes ─────────────────────────────────────────────────────────── */
.flashes { max-width: 1180px; margin: .8rem auto 0; padding: 0 1.4rem; }
.flash { border-radius: 10px; padding: .55rem .9rem; margin-bottom: .5rem; font-size: .9rem; border: 1px solid var(--line); background: var(--ink-raise); }
.flash-success { border-color: var(--leaf); background: var(--leaf-soft); color: var(--leaf-deep); }
.flash-error { border-color: var(--blush); background: #FDF0F3; color: var(--blush); }

/* ── tables ──────────────────────────────────────────────────────────── */
table.data { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.data th { text-align: left; color: var(--text-dim); font-weight: 600; padding: .4rem .5rem; border-bottom: 1px solid var(--line-strong); }
table.data td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
.mono { font-family: var(--font-data); }
.tag { display: inline-block; font-size: .7rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; background: var(--ink-raise); border: 1px solid var(--line); color: var(--text-dim); }
.tag-live { color: var(--leaf-deep); border-color: #BCE5D4; background: var(--leaf-soft); }
.tag-dead { color: var(--blush); border-color: #F3C4CF; background: #FDF0F3; }

/* ── auth pages ──────────────────────────────────────────────────────── */
.auth-wrap { max-width: 430px; margin: 3rem auto; }
/* The join page carries a full information sheet, which is a document rather
   than a form field — 430px turns it into a column of six-word lines nobody
   reads. Widened only where the sheet is actually present. */
.auth-wrap:has(.consent-sheet) { max-width: 640px; }
.auth-wrap .brand-big { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; text-align: center; display: block; margin-bottom: 1.2rem; letter-spacing: -.02em; }
.auth-wrap .brand-big em { font-style: normal; }

/* ════════════════════════ AGENT BUILDER ═══════════════════════════════ */
.builder { display: grid; grid-template-columns: 290px 1fr; gap: 1.3rem; align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: 1fr; } }
.block-rail { position: sticky; top: 4.4rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.block-cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); margin: 1rem 0 .35rem; font-weight: 600; }
.block-cat:first-child { margin-top: 0; }
.block-chip {
  width: 100%; text-align: left; background: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem .7rem; margin-bottom: .45rem;
  color: var(--text); cursor: pointer; font-family: var(--font-body);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-quick) var(--ease-lift);
}
.block-chip:hover { border-color: var(--accent); }
.block-chip:active { transform: scale(.985); }
.block-chip strong { display: block; font-size: .85rem; }
.block-chip span { font-size: .73rem; color: var(--text-dim); }
.builder-meta { display: grid; grid-template-columns: 2fr 70px 1fr 1fr 90px; gap: .7rem; }
@media (max-width: 900px) { .builder-meta { grid-template-columns: 1fr 1fr; } }
.emoji-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; }
.emoji-chip {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--ink-deep); font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-quick) var(--ease-lift);
}
.emoji-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.emoji-chip.active { border-color: var(--accent); background: var(--accent-soft); }

/* ════════════════════════ PHONE SIMULATOR ═════════════════════════════ */
/* Free exploration, left to right in the order the work happens: invent the
   person and their sensors, write the agent, then talk to them. The day sits
   with the sensors that recorded it, because that is what it is made of. */
.steps-layout {
  display: grid; gap: 1.5rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) 380px 384px;
}
.steps-layout #prompt-area { font-family: var(--font-data); font-size: .82rem; line-height: 1.5; }
@media (max-width: 1120px) {
  .steps-layout {
    grid-template-columns: 1fr; justify-items: stretch;
  }
}

/* step sections: 1 unlocks 2 unlocks 3 */
.step-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; }
.step-head h2 { margin: 0; font-size: 1.05rem; }
.step-head small { color: var(--text-dim); display: block; font-size: .76rem; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .9rem;
  background: var(--ink-raise); border: 1px solid var(--line-strong); color: var(--text-dim);
  transition: background var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}
.step-num::before { content: attr(data-num); }
.step.active .step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.done .step-num { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.step.done .step-num::before { content: "✓"; }
.step.locked .step-num::before { content: "🔒"; font-size: .7rem; }
.step.locked .step-body {
  opacity: .4; pointer-events: none; user-select: none;
  filter: grayscale(.5);
  transition: opacity var(--dur-calm) var(--ease-soft), filter var(--dur-calm) var(--ease-soft);
}
.step-body { transition: opacity var(--dur-calm) var(--ease-soft); }

.persona-input { margin-top: .4rem; }

/* step finished: badge pops */
@keyframes step-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.5) rotate(10deg); box-shadow: 0 0 0 8px rgba(63, 152, 118, .25); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(63, 152, 118, 0); }
}
.step-num.pop { animation: step-pop .6s var(--ease-lift); }

/* syncing overlay over the sensor library */
#step-2 .step-body { position: relative; }
.sync-overlay {
  position: absolute; inset: -6px; z-index: 10; border-radius: 16px;
  display: grid; place-items: center; text-align: center;
  background: rgba(250, 251, 253, .82); backdrop-filter: blur(4px);
}
.sync-overlay[hidden] { display: none; }
.sync-pulse {
  position: relative; width: 78px; height: 78px;
  margin: 0 auto .6rem; display: grid; place-items: center;
}
.sync-pulse::before, .sync-pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent); opacity: 0;
  animation: sync-ring 1.8s ease-out infinite;
}
.sync-pulse::after { animation-delay: .9s; }
@keyframes sync-ring {
  0% { transform: scale(.4); opacity: .85; }
  100% { transform: scale(1.15); opacity: 0; }
}
.sync-dish { font-size: 2.3rem; display: inline-block; animation: sync-bob 1.6s ease-in-out infinite; }
@keyframes sync-bob {
  0%, 100% { transform: translateY(0) rotate(-7deg); }
  50% { transform: translateY(-6px) rotate(7deg); }
}
.sync-msg { font-size: .87rem; font-weight: 600; color: var(--text); min-height: 1.3em; }
.sync-msg.swap { animation: sync-msg-in var(--dur-calm) var(--ease-out); }
@keyframes sync-msg-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.sync-sub { font-size: .74rem; color: var(--text-dim); margin-top: .2rem; }

/* sync bar under the library */
.sync-bar { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.sync-bar small { color: var(--text-dim); }

/* CTA above the phone */
.phone-cta { width: 100%; margin-bottom: .35rem; }
.phone-cta-note { display: block; color: var(--text-dim); font-size: .76rem; text-align: center; margin-bottom: .7rem; }
.phone-cta-row { display: flex; gap: .5rem; margin-bottom: .9rem; }
.phone-cta-row .btn { flex: 1; text-align: center; }

/* the phone itself: dark hardware around a light screen */
.phone {
  width: 384px; height: 730px;
  background: #101116;
  border-radius: 42px;
  border: 1px solid #101116;
  box-shadow: var(--shadow-md), inset 0 0 0 6px #1D1E26;
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.phone::before { /* notch */
  content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 22px; border-radius: 12px; background: #1D1E26; z-index: 5;
}
.phone-status {
  display: flex; justify-content: space-between; font-family: var(--font-data);
  font-size: .68rem; color: #8B8FA3; padding: .55rem 1.6rem .2rem;
  background: #F6F6F9;
}
.chat-header {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem;
  background: #F6F6F9; border-bottom: 1px solid var(--line);
}
.chat-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; font-size: 1.1rem; }
.chat-title { font-weight: 600; font-size: .92rem; line-height: 1.1; color: var(--text); }
.chat-sub { font-size: .7rem; color: var(--leaf); }
.chat-scroll { flex: 1; overflow-y: auto; padding: .9rem .8rem; display: flex; flex-direction: column; gap: .45rem; background: #FDFDFE; }
.bubble {
  max-width: 78%; padding: .5rem .75rem; border-radius: 16px;
  font-size: .88rem; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word;
  animation: bubble-in var(--dur-base) var(--ease-out);
}
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.bubble-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.bubble-bot { align-self: flex-start; background: #F1F2F6; color: var(--text); border-bottom-left-radius: 4px; }
.bubble-system { align-self: center; background: transparent; color: var(--text-dim); font-size: .72rem; text-align: center; }
.typing { display: inline-flex; gap: 4px; padding: .6rem .8rem; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.chat-input { display: flex; gap: .5rem; padding: .6rem .7rem .9rem; background: #F6F6F9; border-top: 1px solid var(--line); }
.chat-input input { flex: 1; border-radius: 999px; background: #fff; }
.chat-input button { border-radius: 50%; width: 42px; height: 42px; padding: 0; font-size: 1rem; }

/* ── the nightstand: device dock (signature element) ─────────────────── */
.dock-title { display: flex; align-items: baseline; gap: .6rem; }
.dock-title small { color: var(--text-dim); }
.dock-quick { margin-left: auto; font-size: .74rem; color: var(--text-dim); white-space: nowrap; }
.dock-quick button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-weight: 600;
}
.dock-quick button:hover { text-decoration: underline; }
.dock-tabs, .seg-tabs {
  display: inline-flex; gap: .2rem; margin-top: .8rem;
  background: var(--ink-raise); border: 1px solid var(--line); border-radius: 12px; padding: .22rem;
}
.dock-tab, .seg-tab {
  background: transparent; border: none; color: var(--text-dim);
  border-radius: 9px; padding: .32rem .95rem; font-size: .8rem; font-weight: 600;
  font-family: var(--font-body); cursor: pointer;
  transition: color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.dock-tab:hover, .seg-tab:hover { color: var(--text); }
.dock-tab.active, .seg-tab.active { color: var(--text); background: #fff; box-shadow: var(--shadow-sm); }
.seg-tabs { margin: .2rem 0 1.2rem; }
.pane > .card:only-child, .pane .grid-2 { margin-top: 0; }
.dock-tab-count { color: var(--accent); }
.rec-when { color: var(--text-dim); font-weight: 400; font-size: .68rem; margin-left: .3rem; }
.dock { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: .8rem; margin-top: .8rem; }
.device {
  position: relative; background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .7rem .6rem .6rem; text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-out);
  user-select: none; box-shadow: var(--shadow-sm);
}
.device:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.device svg { width: 64px; height: 64px; display: block; margin: 0 auto .3rem; }
.device .dev-name { font-size: .78rem; font-weight: 600; line-height: 1.15; }
.device .dev-brand { font-size: .66rem; color: var(--text-dim); }
.device .dev-check {
  position: absolute; top: .45rem; right: .5rem; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center;
  font-size: .62rem; color: transparent; background: #fff;
  padding: 0; cursor: pointer;
}
/* it is a real switch now, so it has to look reachable and take focus */
button.dev-check:hover { border-color: var(--accent); }
button.dev-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.device.selected { border-color: var(--accent); background: var(--accent-soft); }
.device.selected .dev-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.device.synced { border-color: var(--leaf); background: #fff; box-shadow: 0 0 0 3px var(--leaf-soft); }
.device.synced .dev-check { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.device.synced::after {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius);
  border: 1px solid var(--leaf); animation: pulse 2.4s infinite; pointer-events: none;
}
@keyframes pulse { 0% { opacity: .9; } 70% { opacity: 0; transform: scale(1.05); } 100% { opacity: 0; } }
.device .dev-headline {
  font-family: var(--font-data); font-size: .64rem; color: var(--leaf-deep);
  margin-top: .3rem; min-height: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Reduced motion is handled once, comprehensively, at the foot of this file. */

/* persona summary strip */
.persona-strip {
  margin-top: .9rem; border-left: 3px solid var(--accent); padding: .5rem .8rem;
  background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: .85rem; color: var(--text);
}
.persona-strip strong { color: var(--accent-deep); }
.flags { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .35rem; }

/* today's story card (experimenter-only ground truth) */
.story-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .3rem; }
.story-caption { color: var(--text-dim); font-size: .72rem; font-style: italic; }
.story-bio { font-size: .82rem; color: var(--text); margin-bottom: .35rem; }
.story-timeline { margin-top: .55rem; }
.story-timeline summary {
  cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--accent-deep);
}
.timeline { list-style: none; margin: .5rem 0 0; padding: 0; }
.timeline li {
  display: flex; gap: .7rem; padding: .35rem 0;
  border-top: 1px dashed var(--line); font-size: .8rem;
}
.tl-time { flex: 0 0 5.6rem; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-body { display: block; }
.tl-body b { font-weight: 600; }
.tl-dur { color: var(--text-dim); font-weight: 400; }
.tl-detail { display: block; color: var(--text-dim); }

/* device readings modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 22, 31, .45); backdrop-filter: blur(3px);
  display: none; place-items: center; z-index: 50;
}
.modal-backdrop.open { display: grid; }
.modal {
  width: min(480px, 92vw); max-height: 80vh; overflow-y: auto;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow-md);
}
.modal h3 { display: flex; align-items: center; gap: .6rem; margin-top: 0; }
.modal h3 svg { width: 40px; height: 40px; }
.modal pre { background: var(--ink-deep); border: 1px solid var(--line); border-radius: 10px; padding: .8rem; font-size: .76rem; overflow-x: auto; }
.reading-row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dashed var(--line-strong); font-size: .86rem; }
.reading-row b { color: var(--text-dim); font-weight: 500; text-transform: capitalize; }
.reading-row span { font-family: var(--font-data); color: var(--leaf-deep); text-align: right; }

/* dashboard cards */
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.stat {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .8rem 1.2rem; min-width: 150px; box-shadow: var(--shadow-sm);
}
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; color: var(--accent); }
.stat .lbl { font-size: .75rem; color: var(--text-dim); }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li { padding: .45rem 0; border-bottom: 1px dashed var(--line-strong); display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════
   Study additions: anonymous identity, surveys, activity workspace.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── page widths ─────────────────────────────────────────────────────── */
.page-narrow { max-width: 760px; }
.page-wide { max-width: 1320px; }
/* the four-column free-exploration layout needs more than the standard page */
.page-wide:has(.steps-layout) { max-width: 1460px; }
.flash-info { border-color: var(--line-strong); background: var(--ink-raise); color: var(--text); }
.muted { color: var(--text-dim); }

/* ── the participant id ──────────────────────────────────────────────── */
.id-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; padding: .22rem .6rem;
  border: 1px dashed var(--line-strong); border-radius: 999px;
  color: var(--text); background: var(--ink-deep);
}
.id-chip:hover { border-color: var(--accent); text-decoration: none; }
.id-chip-label {
  font-size: .6rem; letter-spacing: .1em; font-weight: 700;
  color: var(--text-dim); text-transform: uppercase;
}
.id-card {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 1.2rem 0; padding: 1.1rem 1.2rem;
  border: 2px solid var(--accent); border-radius: var(--radius);
  background: var(--accent-soft);
}
.id-big {
  font-family: var(--font-data); font-size: 1.55rem; font-weight: 700;
  letter-spacing: .06em; color: var(--accent-deep); user-select: all;
}
.id-input {
  font-family: var(--font-data); font-size: 1.15rem; letter-spacing: .08em;
  text-align: center; text-transform: uppercase;
}
.id-tips { color: var(--text-dim); font-size: .82rem; padding-left: 1.1rem; margin: 0 0 1.2rem; }
.id-tips li { margin-bottom: .25rem; }
.privacy-note {
  font-size: .78rem; color: var(--text-dim); margin-top: 1rem;
  padding-top: .8rem; border-top: 1px solid var(--line);
}

/* ── surveys ─────────────────────────────────────────────────────────── */
.survey-section { margin-bottom: 1.2rem; }
.survey-section-title { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; }
.survey-section-key {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 8px; background: var(--accent); color: #fff;
  font-size: .82rem; font-weight: 700;
}
.survey-section-desc { margin-top: -.2rem; }
.q { padding: .9rem 0; border-top: 1px solid var(--line); }
.q:first-of-type { border-top: 0; }
.q-error { background: #FDF0F3; border-radius: 10px; padding: .9rem .8rem; border-top-color: transparent; }
.q-text { font-weight: 600; font-size: .94rem; margin-bottom: .15rem; }
.q-optional { font-weight: 400; font-size: .74rem; color: var(--text-dim); }
.q-help, .q-err { font-size: .78rem; margin-bottom: .4rem; }
.q-help { color: var(--text-dim); }
.q-err { color: var(--blush); font-weight: 600; margin-top: .35rem; }
.q-counter-full { color: var(--amber); font-weight: 600; }
.q textarea, .q input[type="text"] { width: 100%; margin-top: .4rem; }
.q-other { margin-top: .5rem; }
.q-other[hidden] { display: none; }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .25rem; margin-top: .45rem; }
.opt, .scale-point {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .35rem .55rem; border-radius: 9px; border: 1px solid transparent;
  font-size: .88rem; font-weight: 500; margin: 0;   /* beats the global label rule */
}
.opt input, .scale-point input { flex: none; margin: 0; accent-color: var(--accent); }
.opt:hover, .scale-point:hover { background: var(--ink-raise); }
.opt:has(input:checked), .scale-point:has(input:checked) {
  border-color: var(--accent); background: var(--accent-soft);
}
.opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.scale { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; flex-wrap: wrap; }
.scale-end { font-size: .76rem; color: var(--text-dim); max-width: 11ch; line-height: 1.25; }
.scale-points { display: flex; gap: .3rem; flex: 1; }
.scale-point { flex-direction: column; gap: .15rem; flex: 1; text-align: center; min-width: 2.6rem; }
.scale-point span { font-size: .8rem; font-weight: 600; }
.survey-submit { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 2rem; }

/* ── dashboard activities ────────────────────────────────────────────── */
.activity-list { display: grid; gap: .9rem; }
.activity-card { display: flex; align-items: center; gap: 1.4rem; margin: 0; }
.activity-card.is-done { opacity: .72; }
.activity-main { flex: 1; min-width: 0; }
.activity-main h3 { margin: .35rem 0 .1rem; }
.activity-kind { display: flex; gap: .35rem; }
.activity-objective { font-size: .85rem; color: var(--text-dim); margin: .5rem 0 0; }
.activity-cta { flex: none; }
.post-survey-card { border-style: dashed; }

/* ── activity workspace ──────────────────────────────────────────────── */
.ws-head { display: flex; align-items: flex-start; gap: 1.6rem; margin-bottom: 1.2rem; }
.ws-head h1 { margin-bottom: .1rem; }
.ws-eyebrow { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.ws-steps { display: flex; gap: .25rem; }
.ws-step {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: 8px; border: 1px solid var(--line-strong);
  font-size: .74rem; font-weight: 700; color: var(--text-dim);
}
.ws-step:hover { text-decoration: none; border-color: var(--accent); }
.ws-step.current { background: var(--accent); border-color: var(--accent); color: #fff; }
.ws-step.done { background: var(--leaf-soft); border-color: #BCE5D4; color: var(--leaf-deep); }
.ws-meters { display: flex; gap: 1.4rem; margin-left: auto; flex: none; }
.meter { text-align: center; }
.meter-num { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; }
.meter-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }

.objective-card { border-left: 4px solid var(--accent); }
.objective-title { font-size: 1rem; margin: 0 0 .4rem; }
.objective-text { margin: 0; font-size: .95rem; }
.objective-more { margin-top: .7rem; font-size: .87rem; }
.objective-more summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: .82rem; }
.objective-more > div { padding-top: .4rem; color: var(--text-dim); }

.seed-card { border-left: 4px solid var(--leaf); }
.seed-title { display: flex; align-items: center; gap: .55rem; font-size: 1rem; margin: 0 0 .4rem; }
.seed-code {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 8px; background: var(--leaf); color: #fff; font-size: .82rem; font-weight: 700;
}
.seed-text { margin: 0 0 .5rem; font-size: .92rem; white-space: pre-line; }

.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 1.4rem; align-items: start; }
.ws-prompt { margin: 0; }
.ws-prompt-head { display: flex; align-items: center; justify-content: space-between; }
.ws-prompt-head h2 { margin: 0; font-size: 1.05rem; }
.ws-prompt textarea { width: 100%; font-family: var(--font-data); font-size: .84rem; }
.ws-prompt-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .7rem 0 .3rem; }
.save-state { font-size: .76rem; color: var(--text-dim); }
.save-state.dirty { color: var(--amber); font-weight: 600; }
.save-state.saved { color: var(--leaf-deep); font-weight: 600; }
.ws-blocks { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.ws-blocks summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--accent); }
.ws-block-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .45rem; margin-top: .7rem;
}
.ws-phone { position: sticky; top: 4.4rem; }
.phone-under { display: flex; align-items: center; gap: .7rem; margin-top: .8rem; justify-content: center; }
.phone-under small { color: var(--text-dim); font-size: .76rem; }

.ws-sensors { margin-top: 1.4rem; position: relative; }
.ws-eval, .ws-submit { margin-top: 1.4rem; }
.ws-submit textarea { width: 100%; margin: .4rem 0 .8rem; }
.eval-result { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.eval-overall { font-size: 1.05rem; margin-bottom: .5rem; }
.eval-feedback { font-size: .84rem; color: var(--text-dim); margin-top: .6rem; }

/* ── instructor switches & exports ───────────────────────────────────── */
.switch { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; cursor: pointer; }
.switch input { margin-top: .25rem; flex: none; }
.switch b { display: block; font-size: .9rem; }
.switch small { display: block; color: var(--text-dim); font-size: .78rem; }
.export-list li { align-items: flex-start; gap: 1rem; }
.export-list small { display: block; color: var(--text-dim); font-size: .76rem; }

@media (max-width: 1080px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-phone { position: static; max-width: 384px; }
  .ws-head { flex-direction: column; gap: .8rem; }
  .ws-meters { margin-left: 0; }
}

/* ── informed consent on the join page ───────────────────────────────── */
/* The task, as a paragraph. It is an assignment, not a checklist — bullets
   read as criteria to satisfy one by one, which is how the old wording came
   to be treated as the marking scheme. */
.sheet-task { margin: .3rem 0 .9rem; font-size: .86rem; line-height: 1.55; }

/* A run's per-instrument cell: the number, then a bar under it. Horizontal
   here rather than the old vertical sparkline column — with one bar per
   instrument in its own cell there is width to use. */
/* A run's transcript, opened in place under its row. Capped and scrollable
   so opening one does not push the next run off the screen. */
.run-transcript-row td { background: var(--ink-deep); }
.run-transcript { max-height: 22rem; overflow-y: auto; padding: .6rem .2rem; }
.run-transcript-head {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); margin-bottom: .5rem;
}
.run-transcript .bubble { max-width: 32rem; }

.run-panel { white-space: nowrap; }
.run-panel-score { font-variant-numeric: tabular-nums; font-weight: 600; }
.run-panel-score small { color: var(--text-dim); font-weight: 400; }
.run-bar-wide {
  display: block; width: 100%; min-width: 60px; height: 5px; margin-top: .25rem;
  border-radius: 3px; background: var(--line); overflow: hidden;
}
.run-bar-wide i {
  display: block; height: 100%; border-radius: 3px; background: var(--accent);
}

/* Per-instrument scores in the version chooser: label above number, stacked,
   so two panels fit where one composite used to. */
/* Per-instrument scores in the version chooser live with the rest of that
   component, further down — see `.version-score`. */
.version-panel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.version-panel small { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.version-panel b { font-size: 1rem; }

/* Per-auditor feedback: what to keep, what to change, and the line to look
   at while reading it. Three cards, one per auditor. */
.audit-feedback {
  display: grid; gap: .7rem; margin: 0 0 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.audit-fb {
  padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--ink-deep); font-size: .82rem; line-height: 1.5;
}
.audit-fb-head { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.audit-fb-head b { flex: 1; font-size: .78rem; }
.audit-fb-head .mono { font-size: 1.05rem; }
.audit-fb-head small { color: var(--text-dim); font-weight: 400; }
.audit-fb-line { margin: 0 0 .35rem; }
.audit-fb-line em { font-style: normal; color: var(--text-dim); }
.audit-fb-tag {
  display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .08rem .35rem; border-radius: 5px; margin-right: .3rem;
}
.audit-fb-keep .audit-fb-tag { background: var(--leaf-soft, #EAF5EF); color: var(--leaf-deep); }
.audit-fb-change .audit-fb-tag { background: var(--accent-soft); color: var(--accent-deep); }
.audit-fb-quote {
  display: block; margin-top: .45rem; padding-left: .6rem;
  border-left: 2px solid var(--line-strong); color: var(--text-dim);
  font-style: italic; font-size: .78rem;
}

/* The hidden final run, revealed after submission. */
.ws-holdout { border-color: var(--leaf); }
.holdout-scores { display: flex; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap; margin: .9rem 0; }
.holdout-headline b { font-size: 2.4rem; line-height: 1; color: var(--accent-deep); }
.holdout-headline small { display: block; font-size: .72rem; color: var(--text-dim); }
.holdout-panel { display: flex; flex-direction: column; }
.holdout-panel small { font-size: .66rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.holdout-panel b { font-size: 1.2rem; }
.holdout-delta { margin: 0; font-size: .88rem; }
.holdout-flags { margin-top: .7rem; font-size: .82rem; }

/* ── grounding and safety flags ───────────────────────────────────────── */
/* Above the scores, in the colour of a problem. §7.2 requires these to stay
   visible whatever the composite says, and three green numbers above them
   would be exactly the burial the rule is written against. */
.audit-flags {
  margin: 0 0 1.2rem; padding: .9rem 1rem;
  border: 1px solid var(--blush); border-radius: 14px; background: #FDF0F3;
}
.audit-flags h3 { margin: 0 0 .2rem; font-size: .95rem; color: var(--blush-deep, #A8324A); }
.audit-flags .form-hint { margin: 0 0 .6rem; }
.audit-flag { display: block; margin-bottom: .6rem; font-size: .85rem; line-height: 1.5; }
.audit-flag:last-child { margin-bottom: 0; }
.audit-flag b { display: block; }
.audit-flag-quote {
  display: block; margin-top: .3rem; padding-left: .7rem;
  border-left: 2px solid var(--blush); color: var(--text-dim); font-style: italic;
}

/* MITI's two summary globals, beside the four they come from. */
.miti-summaries { display: flex; gap: .8rem; flex-wrap: wrap; margin: .7rem 0; }
.miti-summary {
  flex: 1 1 180px; padding: .5rem .7rem; border-radius: 10px;
  background: var(--ink-deep); border: 1px solid var(--line);
}
.miti-summary b { display: block; font-size: .8rem; }
.miti-summary .mono { font-size: 1.1rem; }
.miti-summary small { display: block; color: var(--text-dim); font-size: .68rem; }

/* ── the auditors' panels ─────────────────────────────────────────────── */
/* One gauge per instrument, side by side and never averaged. Container query
   rather than a breakpoint: the report is rendered both full-width and inside
   the results card, and it should not look like a different component. */
.audit-panels {
  display: grid; gap: 1rem; margin-bottom: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.audit-panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .3rem; padding: .9rem .8rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--ink-deep);
}
.audit-panel h3 {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  justify-content: center; margin: .3rem 0 0; font-size: .95rem;
}
.audit-panel-full { color: var(--text-dim); font-size: .74rem; }
.audit-panel-asks { margin: .3rem 0 0; font-size: .78rem; line-height: 1.45; }
.audit-panels-note { margin: 0 0 1.2rem; }

/* The floor, shown read-only above the scaffolds. Monospaced and collapsed:
   it is reference material, not something to read every time. */
.platform-rules { margin: 0 0 .9rem; }
.platform-rules > summary { font-weight: 600; cursor: pointer; font-size: .85rem; }
.platform-rules > summary .tag { margin-left: .4rem; font-weight: 500; }
.platform-rules-body {
  margin: .5rem 0 0; padding: .7rem .8rem; border-radius: 10px;
  background: var(--ink-deep); border: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55; white-space: pre-wrap;
}

.dash-framing { margin-top: .5rem; font-size: .86rem; }

/* ── the structured prompt editor (controlled mode) ───────────────────── */
/* Six accordions rather than six stacked textareas: all six open at once is
   a wall, and the section a participant is in is the thing they should be
   looking at. The state chip is the only progress signal — deliberately
   "empty" rather than a red warning, because an empty section is an answer. */
.sections { display: grid; gap: .45rem; }
.section {
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink-deep);
  transition: border-color var(--dur-base) var(--ease-soft);
}
.section.is-written { border-color: var(--leaf); }
.section > summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  padding: .6rem .8rem; font-size: .87rem; font-weight: 600; list-style: none;
}
.section > summary::-webkit-details-marker { display: none; }
.section-num {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .7rem;
  background: var(--line); color: var(--text-dim);
}
.section.is-written .section-num { background: var(--leaf); color: #fff; }
.section-heading { flex: 1; }
.section-state {
  font-size: .64rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.section.is-written .section-state { color: var(--leaf-deep); }
.section-body { padding: 0 .8rem .8rem; }
.section-helper { margin: 0 0 .4rem; font-size: .82rem; color: var(--text-dim); }
.section-body textarea { width: 100%; }
.section-rationale { display: block; margin-top: .35rem; font-size: .72rem; }
.sections-disclaimer { margin: .7rem 0 0; font-style: italic; }

/* The compiled prompt, read-only. A second editable copy of the same text is
   two sources of truth and one of them is always stale. */
.compiled { margin-top: .9rem; }
.compiled > summary { font-weight: 600; font-size: .85rem; cursor: pointer; }
.compiled > summary .tag { margin-left: .4rem; font-weight: 500; }
.compiled-body {
  margin: .5rem 0 .3rem; padding: .7rem .8rem; border-radius: 10px;
  max-height: 22rem; overflow-y: auto;
  background: var(--ink-deep); border: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55; white-space: pre-wrap;
}
.runs-left b { color: var(--accent-deep); font-size: 1rem; }

/* ── design scaffolds ─────────────────────────────────────────────────── */
/* Category cards first, two blocks under each. A flat list of twelve invited
   scanning for the shortest one; making the category the first decision means
   the choice is about what the conversation needs, which is the point. */
.scaffolds > summary { font-weight: 600; }
.scaffold-optional { font-weight: 400; color: var(--text-dim); }
.scaffold-note { margin: .5rem 0 .8rem; }
.scaffold-cats { display: grid; gap: .5rem; }
.scaffold-cat {
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink-deep);
}
.scaffold-cat > summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  padding: .55rem .8rem; font-size: .85rem; font-weight: 600;
  list-style: none;
}
.scaffold-cat > summary::-webkit-details-marker { display: none; }
.scaffold-cat > summary::before {
  content: "▸"; color: var(--text-dim); font-size: .7rem;
  transition: transform var(--dur-base) var(--ease-soft);
}
.scaffold-cat[open] > summary::before { transform: rotate(90deg); }
.scaffold-cat-count {
  margin-left: auto; font-size: .7rem; font-weight: 500; color: var(--text-dim);
}
.scaffold-list { display: grid; gap: .5rem; padding: 0 .8rem .8rem; }

.scaffold {
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper, #fff);
  transition: border-color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
}
.scaffold.is-added { border-color: var(--leaf); background: var(--leaf-soft, #F1F8F4); }
.scaffold-head { display: flex; align-items: baseline; gap: .5rem; }
.scaffold-head strong { font-size: .86rem; }
.scaffold-state {
  margin-left: auto; font-size: .66rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--leaf-deep);
}
.scaffold-hint { display: block; font-size: .78rem; color: var(--text-dim); margin-top: .15rem; }
.scaffold-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }
.scaffold-tag {
  font-size: .63rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: .1rem .35rem; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent-deep);
}
/* The exact text, before it is committed to — the whole reason Preview
   exists is that a participant should never be surprised by what landed. */
.scaffold-preview {
  margin-top: .5rem; padding: .5rem .6rem; border-radius: 8px;
  background: var(--ink-deep); border: 1px dashed var(--line-strong);
  font-size: .8rem; line-height: 1.5;
}
.scaffold-preview p { margin: 0; }
.scaffold-preview small { display: block; margin-top: .4rem; color: var(--text-dim); font-size: .72rem; }
.scaffold-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }

/* ── the information sheet, above the tick box ───────────────────────── */
/* Scrolls inside itself rather than pushing the code field and the button
   off the page: the sheet is long, and a join page you have to scroll past
   to find the button is a join page people bounce off. The border and the
   inner scroll make it read as a document you are being shown, which is
   what it is. */
.consent-sheet { margin-top: 1.4rem; }
.consent-sheet h2 {
  font-size: 1rem; margin: 0 0 .5rem;
}
.consent-sheet-body {
  max-height: 20rem; overflow-y: auto;
  padding: .9rem 1rem; border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--ink-deep);
  font-size: .84rem; line-height: 1.55;
}
.consent-sheet-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent-sheet-body h3 {
  font-size: .8rem; margin: 1rem 0 .3rem; color: var(--accent-deep);
  text-transform: none; letter-spacing: 0;
}
.consent-sheet-body h3:first-child { margin-top: 0; }
.consent-sheet-body p { margin: 0 0 .6rem; }
.consent-sheet-body ul { margin: 0 0 .6rem; padding-left: 1.2rem; }
.consent-sheet-body li { margin-bottom: .25rem; }
.consent-sheet-body p:last-child { margin-bottom: 0; }

@media print {
  /* a participant who wants a copy should get the whole thing, not a window */
  .consent-sheet-body { max-height: none; overflow: visible; }
}

.consent-box {
  margin-top: 1rem; padding: .8rem .9rem;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--ink-deep);
}
.consent-box.consent-error { border-color: var(--blush); background: #FDF0F3; }
.consent-check {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0;
  font-weight: 500; font-size: .88rem; line-height: 1.4; cursor: pointer;
}
.consent-check input { flex: none; margin-top: .18rem; accent-color: var(--accent); }
.consent-link { display: inline-block; margin: .45rem 0 0 1.75rem; font-size: .82rem; font-weight: 600; }
.consent-box .form-hint { margin-left: 1.75rem; }
.consent-box .q-err { margin-left: 1.75rem; }

/* ── dashboard header ────────────────────────────────────────────────── */
.dash-head { display: flex; align-items: flex-start; gap: 1.4rem; }
.dash-head h1 { margin-bottom: .15rem; }
.dash-credits {
  margin-left: auto; flex: none; text-align: center;
  padding: .5rem .9rem; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid #BFE3EC;
}
.dash-credits-num { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--accent-deep); }
.dash-credits-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--accent-deep); }
.dash-more { margin-top: 2rem; }
.dash-more summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--accent); }

/* ── the journey stepper ─────────────────────────────────────────────── */
.journey-head { display: flex; align-items: baseline; gap: .8rem; margin: 1.8rem 0 .5rem; }
.journey-head h2 { margin: 0; }
.journey-count { margin-left: auto; font-size: .8rem; color: var(--text-dim); font-weight: 600; }
.journey-bar {
  height: 6px; border-radius: 99px; background: var(--ink-raise);
  overflow: hidden; margin-bottom: 1.2rem;
}
.journey-bar > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--leaf));
  transition: width var(--dur-calm) var(--ease-out);
}
.journey { list-style: none; margin: 0; padding: 0; }
.jstep {
  display: flex; gap: .9rem; padding: .9rem 0;
  border-top: 1px solid var(--line);
}
.jstep:first-child { border-top: 0; }
.jmark {
  flex: none; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--ink);
  font-size: .8rem; font-weight: 700; color: var(--text-dim);
}
.jstep-done .jmark { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.jstep-current .jmark { background: var(--accent); border-color: var(--accent); color: #fff; }
.jstep-upcoming { opacity: .55; }
.jstep-upcoming .jmark { background: var(--ink-raise); font-size: .7rem; }
.jbody { min-width: 0; flex: 1; }
.jtitle { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 600; font-size: .97rem; }
.jstep-done .jtitle { color: var(--text-dim); }
.jmeta { font-size: .75rem; font-weight: 500; color: var(--text-dim); }
.jdetail { margin: .25rem 0 0; font-size: .85rem; color: var(--text-dim); }
.jcta { margin-top: .6rem; }
.jsub { display: flex; gap: .3rem; margin-top: .55rem; }
.jsub-dot {
  display: grid; place-items: center; width: 1.55rem; height: 1.55rem;
  border-radius: 8px; border: 1px solid var(--line-strong);
  font-size: .72rem; font-weight: 700; color: var(--text-dim);
}
.jsub-dot:hover { border-color: var(--accent); text-decoration: none; }
.jsub-dot.done { background: var(--leaf-soft); border-color: #BCE5D4; color: var(--leaf-deep); }
.jsub-dot.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── survey progress ─────────────────────────────────────────────────── */
.survey-progress {
  position: sticky; top: 3.4rem; z-index: 5;
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 0 .7rem; margin-bottom: .4rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
}
.survey-progress-bar { flex: 1; height: 6px; border-radius: 99px; background: var(--ink-raise); overflow: hidden; }
.survey-progress-bar > span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--accent); transition: width var(--dur-calm) var(--ease-out);
}
.survey-progress.full .survey-progress-bar > span { background: var(--leaf); }
.survey-progress-label { font-size: .76rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.survey-progress.full .survey-progress-label { color: var(--leaf-deep); }
.q[tabindex]:focus { outline: 2px solid var(--blush); outline-offset: 4px; }

@media (max-width: 640px) {
  .dash-head { flex-direction: column; }
  .dash-credits { margin-left: 0; }
}

/* ── submitted survey answers ────────────────────────────────────────── */
.answers-card { margin-top: 1.4rem; }
.answers-card summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--accent); }
.answers { margin: 1rem 0 .4rem; }
.answers dt { font-size: .85rem; font-weight: 600; margin-top: .8rem; }
.answers dd { margin: .15rem 0 0; font-size: .88rem; color: var(--text-dim); }

/* ── model policy in the agent builder ───────────────────────────────── */
.builder-meta-narrow { grid-template-columns: 2fr 70px 1.6fr 90px; }
.builder-model select { width: 100%; }
.fixed-model {
  font-family: var(--font-data); font-size: .85rem;
  padding: .55rem .7rem; border-radius: 10px;
  background: var(--ink-raise); border: 1px dashed var(--line-strong);
  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── export scoping ──────────────────────────────────────────────────── */
.export-scope {
  display: flex; gap: .9rem; align-items: flex-end; flex-wrap: wrap;
  padding: .8rem .9rem; margin: .6rem 0 .3rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink-deep);
}
.export-scope > div { flex: 1; min-width: 190px; }
.export-scope label { margin-top: 0; }
.export-scope .id-input { font-size: .95rem; letter-spacing: .04em; text-align: left; }

/* ── participant console page ────────────────────────────────────────── */
.crumb { font-size: .82rem; margin: 0 0 .6rem; }
.pd-flags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.pd-exports {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}
.pv, .convo { margin-bottom: .6rem; padding: .75rem 1rem; }
.pv summary, .convo summary {
  cursor: pointer; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: .88rem;
}
.pv-num {
  font-family: var(--font-data); font-weight: 700; font-size: .78rem;
  background: var(--accent); color: #fff; border-radius: 6px; padding: .1rem .45rem;
}
.pv-agent { font-weight: 600; }
.pv-meta { margin-left: auto; font-size: .76rem; color: var(--text-dim); }
.pv-delta { font-family: var(--font-data); }
.pv-delta.up { color: var(--leaf-deep); }
.pv-delta.down { color: var(--blush); }
.pv-text {
  margin: .8rem 0 0; padding: .8rem; border-radius: 10px;
  background: var(--ink-deep); border: 1px solid var(--line);
  font-family: var(--font-data); font-size: .8rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; max-height: 420px; overflow: auto;
}
.transcript { margin-top: .9rem; display: flex; flex-direction: column; gap: .4rem; max-width: 62ch; }
.transcript .bubble { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════════
   Fixed-task workspace: numbered flow, prominent schedule, sensor toggles.
   ═══════════════════════════════════════════════════════════════════════ */
.ws-flow { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 1.4rem; }
.ws-flow .step-head { margin-bottom: .7rem; }
.ws-flow .step-body.card { margin: 0; }
.ws-pair { display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 1.6rem; align-items: start; }
.ws-pair #step-4 { position: sticky; top: 4.4rem; }
.objective-extras { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* the person and their schedule */
.seed-line { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.seed-text { margin: 0 0 .7rem; font-size: .92rem; white-space: pre-line; }
.person-chip {
  display: inline-block; font-size: .85rem; padding: .35rem .7rem; border-radius: 10px;
  background: var(--ink-raise); border: 1px solid var(--line); margin-bottom: .9rem;
}
.schedule { border-top: 1px solid var(--line); padding-top: .9rem; }
.schedule-head { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .6rem; }
.schedule-head h3 { margin: 0; font-size: 1rem; }
.schedule-head small { color: var(--text-dim); font-size: .76rem; }
.schedule-list {
  column-count: 2; column-gap: 2rem;
  max-height: none; margin: 0; padding: 0; list-style: none;
}
.schedule-list li { break-inside: avoid; }
.schedule-summary { margin-top: .9rem; }

/* sensor cards: toggle + signal disclosure */
.dock-count { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.dock-note { margin-top: .9rem; max-width: 74ch; }
.device.sensor { position: relative; overflow: visible; cursor: pointer; }
.device.sensor.on { border-color: var(--leaf); }
.device.sensor:not(.on) { opacity: .58; filter: grayscale(.55); }
.device.sensor:not(.on):hover { opacity: .85; filter: grayscale(.2); }
.device.sensor.busy { pointer-events: none; opacity: .5; }
.device.sensor .dev-check { opacity: 0; transition: opacity var(--dur-base) var(--ease-soft); }
.device.sensor.on .dev-check { opacity: 1; }
.dev-info {
  position: absolute; top: .35rem; left: .35rem; z-index: 2;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--ink);
  color: var(--text-dim); font-family: var(--font-display); font-size: .68rem;
  font-weight: 700; line-height: 1; cursor: help; padding: 0;
}
.dev-info:hover { border-color: var(--accent); color: var(--accent); }
.dev-cost {
  position: absolute; bottom: .3rem; right: .4rem;
  font-family: var(--font-data); font-size: .62rem; color: var(--amber);
}
.dev-signals {
  position: absolute; z-index: 30; left: 50%; bottom: calc(100% + .4rem);
  transform: translateX(calc(-50% + var(--nudge, 0px)));
  width: min(232px, calc(100vw - 2rem)); padding: .6rem .7rem; text-align: left;
  background: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-md);
  display: none; pointer-events: none;
}
.device.sensor:hover .dev-signals,
.device.sensor:focus-visible .dev-signals { display: block; }
.dev-signals b { display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-dim); margin-bottom: .35rem; }
.dev-signals ul { list-style: none; margin: 0; padding: 0; }
.dev-signals li { display: flex; justify-content: space-between; gap: .6rem; font-size: .76rem; padding: .1rem 0; }
.dev-signals li em { font-style: normal; color: var(--text-dim); font-family: var(--font-data); font-size: .7rem; }
.dev-signals-blurb { margin: .4rem 0 0; font-size: .72rem; color: var(--text-dim); }
.dev-signals.in-modal {
  display: block; position: static; transform: none;
  width: auto; box-shadow: none; pointer-events: auto; margin-bottom: 1rem;
}
#modal-signals .dev-signals li { font-size: .82rem; padding: .18rem 0; border-bottom: 1px solid var(--line); }

@media (max-width: 1080px) {
  .ws-pair { grid-template-columns: 1fr; }
  .ws-pair #step-4 { position: static; max-width: 384px; }
  .schedule-list { column-count: 1; }
}
/* the free page's cards get the same disclosure on hover */
.dock .device { position: relative; overflow: visible; }
.dock .device:hover .dev-signals, .dock .device:focus-visible .dev-signals { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   The simulated evaluation run: an Evaluate card, a locked stage, results.
   ═══════════════════════════════════════════════════════════════════════ */
.evaluate-card { margin: 0; text-align: center; }
.evaluate-lede { font-size: .92rem; margin: 0 0 .8rem; }
.evaluate-goals {
  text-align: left; margin: 0 0 1rem; padding: .7rem .9rem;
  background: var(--ink-deep); border: 1px solid var(--line); border-radius: 12px;
}
.evaluate-goals b {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-dim); margin-bottom: .3rem;
}
.evaluate-goals ul { margin: 0; padding-left: 1.1rem; font-size: .84rem; }
.evaluate-goals li { margin-bottom: .18rem; }

/* The ten messages the simulated person will send, verbatim. Long enough to
   be worth reading properly, so they get quotation marks and room; capped in
   height so the Evaluate button stays above the fold. */
.evaluate-script {
  margin: 0; padding-left: 1.4rem; font-size: .84rem; line-height: 1.45;
  max-height: 15rem; overflow-y: auto;
}
.evaluate-script li { margin-bottom: .45rem; color: inherit; }
.evaluate-script li::marker { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.evaluate-script-note { display: block; margin-top: .5rem; color: var(--text-dim); font-size: .76rem; }

/* The story, which in free exploration is the first thing written. */
.persona-next {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: .8rem;
}
.persona-next small { color: var(--text-dim); font-size: .78rem; }
.btn-evaluate { font-size: 1rem; padding: .7rem 2rem; }

/* ── the locked stage ────────────────────────────────────────────────── */
body.stage-open { overflow: hidden; }
.sim-stage {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 1.4rem;
  background: rgba(20, 22, 31, .82); backdrop-filter: blur(6px);
  animation: stage-in var(--dur-calm) var(--ease-out);
}
.sim-stage[hidden] { display: none; }
@keyframes stage-in { from { opacity: 0 } to { opacity: 1 } }
.sim-stage-head { width: min(384px, 100%); color: #fff; text-align: center; }
.sim-stage-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.sim-stage-sub { font-size: .82rem; opacity: .78; min-height: 1.2em; }
.sim-progress {
  height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .22);
  overflow: hidden; margin-top: .6rem;
}
.sim-progress > span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #7FD4E8, var(--leaf));
  transition: width var(--dur-calm) var(--ease-out);
}
.sim-phone { box-shadow: 0 24px 70px -20px rgba(0, 0, 0, .7); }
.sim-phone .chat-scroll { min-height: 46vh; max-height: 56vh; }
.sim-foot {
  padding: .6rem .9rem; font-size: .74rem; color: var(--text-dim);
  border-top: 1px solid var(--line); text-align: center;
}
.sim-stage-actions { display: flex; gap: .6rem; align-items: center; }
.sim-stage-actions .btn-ghost { color: rgba(255, 255, 255, .82); }
.sim-stage-actions .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .12); }

/* ── results and the run-by-run comparison ───────────────────────────── */
.ws-results { margin-top: 1.4rem; }
.results-head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.results-head h2 { margin: 0; }
.runs-table td { vertical-align: middle; }
.run-best { background: var(--leaf-soft); }
.run-overall { font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.run-bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.run-bar {
  display: block; width: 9px; height: 100%;
  background: var(--ink-raise); border-radius: 2px;
  display: flex; align-items: flex-end;
}
.run-bar i { display: block; width: 100%; background: var(--accent); border-radius: 2px; }
.run-best .run-bar i { background: var(--leaf); }
.runs-note { margin: .8rem 0 0; }

@media (max-width: 640px) {
  .sim-phone .chat-scroll { min-height: 40vh; max-height: 50vh; }
}

/* ── survey sliders (NASA-TLX and friends) ───────────────────────────── */
.slider-wrap { margin-top: .7rem; }
.slider-track { position: relative; padding: .1rem 0; }
.slider-input {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
  padding: 0; border: 0; margin: 0;
}
.slider-input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent) var(--fill, 50%), var(--ink-raise) var(--fill, 50%));
}
.slider-input::-moz-range-track { height: 6px; border-radius: 99px; background: var(--ink-raise); }
.slider-input::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-soft), transform var(--dur-quick) var(--ease-lift);
}
.slider-input::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid var(--line-strong); box-shadow: var(--shadow-sm);
}
.slider-wrap.touched .slider-input::-webkit-slider-thumb { border-color: var(--accent); }
.slider-wrap.touched .slider-input::-moz-range-thumb { border-color: var(--accent); }
.slider-input:active::-webkit-slider-thumb { transform: scale(1.12); }
.slider-input:focus-visible { outline: none; }
.slider-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }

.slider-ticks {
  display: flex; justify-content: space-between;
  padding: 0 10px; margin-top: -6px; pointer-events: none;
}
.slider-ticks span { width: 1px; height: 5px; background: var(--line-strong); opacity: .7; }
.slider-ends {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-top: .3rem; font-size: .76rem; color: var(--text-dim);
}
.slider-ends > span { max-width: 14ch; line-height: 1.25; }
.slider-ends > span:last-child { text-align: right; }
.slider-value {
  font-family: var(--font-data); font-size: .95rem; font-weight: 700;
  color: var(--accent-deep); min-width: 3ch; text-align: center;
  padding: .05rem .5rem; border-radius: 8px; background: var(--accent-soft);
}
.slider-value[data-untouched] { color: var(--text-dim); background: var(--ink-raise); font-weight: 500; }
.q-slider.q-error .slider-value { background: #FDF0F3; color: var(--blush); }

/* ── the day as a timetable ──────────────────────────────────────────── */
.timetable { margin: .2rem 0 1rem; }
.tt-hours { position: relative; height: 1rem; margin-bottom: .2rem; }
.tt-hours span {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-data); font-size: .64rem; color: var(--text-dim);
}
.tt-track {
  position: relative; height: 46px; border-radius: 10px;
  background: var(--ink-deep); border: 1px solid var(--line); overflow: visible;
}
.tt-gridline {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--line); opacity: .8;
}
.tt-block {
  position: absolute; top: 4px; bottom: 4px;
  display: flex; align-items: center; gap: .25rem;
  padding: 0 .3rem; border-radius: 7px; overflow: hidden;
  font-size: .68rem; white-space: nowrap; cursor: default;
  border: 1px solid rgba(20, 22, 31, .08);
}
.tt-block b { font-size: .72rem; line-height: 1; }
.tt-block-label { overflow: hidden; text-overflow: ellipsis; }
.tt-block:hover, .tt-block:focus-visible { outline: 2px solid var(--accent); z-index: 4; }

.tt-sleep, .tt-block.tt-sleep   { background: #DCE4F5; color: #2C3E6B; }
.tt-work,  .tt-block.tt-work    { background: #E1EFF3; color: #14556B; }
.tt-meal,  .tt-block.tt-meal    { background: #FBEBD2; color: #7A5410; }
.tt-move,  .tt-block.tt-move    { background: #D9F0E4; color: var(--leaf-deep); }
.tt-screen,.tt-block.tt-screen  { background: #F3DDE6; color: #8A2050; }
.tt-home,  .tt-block.tt-home    { background: var(--ink-raise); color: var(--text-dim); }
.tt-other, .tt-block.tt-other   { background: var(--ink-raise); color: var(--text-dim); }

.tt-tip {
  position: absolute; left: 0; bottom: calc(100% + .4rem); z-index: 20;
  display: none; width: 240px; padding: .5rem .65rem; white-space: normal;
  background: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-md);
  font-size: .74rem; color: var(--text); text-align: left; line-height: 1.4;
}
.tt-tip em { display: block; font-style: normal; color: var(--text-dim); margin-top: .2rem; }
.tt-block:hover .tt-tip, .tt-block:focus-visible .tt-tip { display: block; }

.tt-key { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin-top: .5rem; }
.tt-key-item { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: var(--text-dim); }
.tt-key-item i { width: 12px; height: 9px; border-radius: 3px; display: inline-block; }
.schedule-week {
  margin: .9rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line);
  font-size: .82rem; color: var(--text-dim);
}
.schedule-week b { color: var(--text); }
/* the tail of a block that ran past midnight on the axis */
.tt-block.tt-wrapped { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }

/* ── a fixed sensing package: readable, not adjustable ───────────────── */
.device.fixed-sensor { cursor: pointer; opacity: 1; filter: none; }
.device.fixed-sensor .dev-check { opacity: 1; }
.device.fixed-sensor:hover { border-color: var(--accent); }
/* ── the guided persona builder ───────────────────────────────────────── */
/* Three short facts on one row, then the writing space beneath at full
   width. The facts are what the generator is held to; the space is the part
   that does the work, so it gets the room. */
.persona-box { margin: 0 0 1rem; }
.persona-box textarea,
.persona-box input[type="text"],
.persona-box input[type="number"],
.persona-box select { width: 100%; }
.persona-facts {
  display: grid; gap: .8rem 1rem;
  grid-template-columns: minmax(180px, 1.4fr) minmax(170px, 1fr) minmax(180px, 1.2fr);
}
@media (max-width: 720px) {
  .persona-facts { grid-template-columns: 1fr; }
}
.persona-field { min-width: 0; }
.persona-field label { display: block; font-weight: 600; font-size: .84rem; margin-bottom: .25rem; }
.persona-field .form-hint { margin-top: .25rem; }
.persona-req { color: var(--blush); margin-left: .1rem; }
/* two boxes reading as one control */
.persona-range { display: flex; align-items: center; gap: .4rem; }
.persona-range input { text-align: center; }
.persona-dash { color: var(--text-dim); flex: none; }
.persona-story { margin-top: .9rem; }
/* the prefilled headings are the shape of the answer, so it needs to look
   like a document rather than a comment box */
.persona-story textarea {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .84rem; line-height: 1.55; resize: vertical; min-height: 24rem;
}

/* ── the simulated person typing into the phone ──────────────────────── */
.sim-composer { align-items: center; }
.sim-field {
  position: relative; flex: 1; min-height: 2.1rem;
  display: flex; align-items: center; flex-wrap: wrap;
  padding: .4rem .7rem; border-radius: 18px;
  background: var(--ink-deep); border: 1px solid var(--line-strong);
  font-size: .88rem; line-height: 1.35; text-align: left;
  word-break: break-word;
}
.sim-placeholder { color: var(--text-dim); }
.sim-placeholder[hidden] { display: none; }
.sim-caret {
  display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px;
  background: var(--accent); vertical-align: -2px;
  animation: sim-caret-blink 1.05s step-end infinite;
}
.sim-caret[hidden] { display: none; }
@keyframes sim-caret-blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.sim-send {
  flex: none; opacity: .35; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-quick) var(--ease-lift);
}
.sim-send.ready { opacity: 1; transform: scale(1.04); }

/* ── markdown inside an agent's reply ────────────────────────────────── */
.bubble-bot p { margin: 0 0 .5rem; }
.bubble-bot p:last-child { margin-bottom: 0; }
.bubble-bot p.md-h { margin-bottom: .25rem; }
.bubble-bot ul, .bubble-bot ol { margin: .1rem 0 .5rem; padding-left: 1.15rem; }
.bubble-bot ul:last-child, .bubble-bot ol:last-child { margin-bottom: 0; }
.bubble-bot li { margin-bottom: .15rem; }
.bubble-bot code {
  font-family: var(--font-data); font-size: .86em;
  background: rgba(20, 22, 31, .07); padding: .05em .3em; border-radius: 4px;
}
.bubble-bot a { text-decoration: underline; }

/* ── instructor authoring: activities & scenarios ─────────────────────── */
.page-head { display: flex; align-items: flex-start; gap: 1.4rem; margin-bottom: 1.2rem; }
.page-head > div { flex: 1; min-width: 0; }
.page-head .lede { margin-bottom: 0; }
.page-head > .btn, .page-head > .tag, .page-head > .seed-code { flex: none; margin-top: .3rem; }

/* the list of activities */
.act-list { display: grid; gap: .9rem; }
.act-row { display: flex; align-items: flex-start; gap: 1.4rem; margin: 0; }
.act-row.is-closed { background: var(--ink-raise); }
.act-row-main { flex: 1; min-width: 0; }
.act-row-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.act-row-head h2 { margin: 0; font-size: 1.12rem; }
.act-row-sub { margin: .3rem 0 0; font-size: .88rem; color: var(--text-dim); }
.act-row-meta { margin: .45rem 0 0; font-size: .78rem; color: var(--text-dim); }
.act-row-meta code { font-size: .74rem; }
.act-row-stories { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.act-row-actions { flex: none; display: flex; align-items: center; gap: .4rem; }

.story-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .2rem .7rem .2rem .35rem; font-size: .78rem; color: var(--text);
  background: var(--ink); max-width: 20rem;
}
.story-chip:hover { border-color: var(--accent); text-decoration: none; }
.story-chip b {
  font-size: .7rem; background: var(--leaf-soft); color: var(--leaf-deep);
  border-radius: 999px; padding: .05rem .45rem; flex: none;
}
.story-chip.is-off { opacity: .5; }
.story-chip-frozen { color: var(--sky); flex: none; }

/* the two-column editor shared by both forms */
.act-edit { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; align-items: start; }
.act-edit-main { display: grid; gap: 1.2rem; }
.act-edit-main > .card { margin: 0; }
.act-edit-rail { display: grid; gap: 1rem; position: sticky; top: 4.4rem; }
.act-edit-rail > .card { margin: 0; }
.act-edit-rail h2 { font-size: 1rem; margin-top: 0; }
.act-save .btn { width: 100%; text-align: center; margin-bottom: .4rem; }
.act-danger { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.act-stats { display: flex; gap: 1.2rem; }
.act-stat b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); }
.act-stat span { font-size: .72rem; color: var(--text-dim); }

.act-stories-head { display: flex; align-items: center; gap: .6rem; }
.act-stories-head h2 { flex: 1; margin: 0; }
.story-list { margin-top: .7rem; display: grid; gap: .3rem; }
.story-line {
  display: flex; align-items: center; gap: .55rem; color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: .45rem .55rem;
}
.story-line:hover { border-color: var(--accent); text-decoration: none; }
.story-line-body { flex: 1; min-width: 0; }
.story-line-body b { display: block; font-size: .84rem; line-height: 1.2; }
.story-line-body small { color: var(--text-dim); font-size: .72rem; }
.story-line-flags { flex: none; color: var(--sky); font-size: .8rem; }
.seed-code-big { font-size: 1rem; padding: .3rem .8rem; }

/* form sections */
.ff-section-note { margin: 0 0 .9rem; max-width: 66ch; }
.ff-grid { display: grid; column-gap: 1.1rem; }
.ff-grid-top { grid-template-columns: 2fr 1fr; }
.ff-grid > .switch { grid-column: 1 / -1; }
.ff-grid-top > .ff[data-field="subtitle"] { grid-column: 1 / -1; }
.ff { min-width: 0; }
.ff-wide { grid-column: 1 / -1; }
.ff-err input, .ff-err select, .ff-err textarea { border-color: var(--blush); }
.ff[data-field="order"] input,
.ff[data-field="code"] input,
.ff[data-field="sim_max_turns"] input,
.ff[data-field="stories_per_participant"] input { max-width: 9rem; }

/* the rubric table */
.rubric { display: grid; gap: .35rem; overflow-x: auto; }
.rubric-head, .rubric-row {
  display: grid; align-items: center; gap: .4rem; min-width: 640px;
  grid-template-columns: 7rem 1fr 1.4fr 4.6rem 4.6rem 2.4rem 2.6rem;
}
.rubric-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); font-weight: 600; }
.rubric-row input[type=text], .rubric-row input[type=number] { padding: .35rem .5rem; font-size: .85rem; }
.rubric-tick { display: flex; align-items: center; justify-content: center; gap: .2rem; margin: 0; }
.rubric-tick input { accent-color: var(--accent); }
.rubric-del span { font-size: .62rem; color: var(--text-dim); }
.rubric-err { grid-column: 1 / -1; }

/* the sensor picker */
.pick-group { margin: 1rem 0 0; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); }
.pick-dock { overflow: visible; }
.device.pick { overflow: visible; }
.device.pick .pick-input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.device.pick .pick-hit {
  position: absolute; inset: 0; z-index: 2; margin: 0; cursor: pointer;
  font-size: 0; color: transparent; border-radius: var(--radius);
}
.device.pick:hover .dev-signals { display: block; }
.device.pick:has(.pick-input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.device.pick:has(.pick-input:checked) .dev-check {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.device.pick:has(.pick-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the frozen day */
.snap-state { font-size: .84rem; margin: 0 0 .6rem; }
.snap-on { color: var(--leaf-deep); font-weight: 600; }
.snap-off { color: var(--text-dim); }
.snap-facts { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; margin: 0 0 .3rem; font-size: .8rem; }
.snap-facts dt { color: var(--text-dim); }
.snap-facts dd { margin: 0; }

@media (max-width: 960px) {
  .act-edit { grid-template-columns: 1fr; }
  .act-edit-rail { position: static; }
  .ff-grid-top { grid-template-columns: 1fr; }
  .act-row { flex-direction: column; }
}
.story-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ motion ═══════════════════════════════════════════════════════════════
   Everything below is presentation only: remove this block and the lab still
   works, it just arrives all at once. The aim is for the interface to settle
   rather than snap — enough movement that a page feels handed to you, never
   enough that you wait for it. Durations and curves all come from the tokens
   at the top of the file.
   ═════════════════════════════════════════════════════════════════════════ */

@keyframes rise-in { from { opacity: 0; transform: translateY(9px); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes grow-in { from { transform: scaleX(0); } }
@keyframes tick-in { from { opacity: 0; transform: scale(.5); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes chip-bump {
  40% { transform: scale(1.12); }
}

html { scroll-behavior: smooth; }

/* ── arrival ──────────────────────────────────────────────────────────────
   Each page settles in from just below, top block first. Two steps of delay
   is enough to read as a sequence; more and it starts to feel like waiting. */
.page > * { animation: rise-in var(--dur-calm) var(--ease-out) both; }
.page > *:nth-child(2)   { animation-delay: 55ms; }
.page > *:nth-child(n+3) { animation-delay: 100ms; }

/* Full-screen overlays are `position: fixed` children of the page, and a
   transformed ancestor would re-anchor them. They also have nothing to
   arrive from — they appear on demand, with their own motion below. */
.page > .modal-backdrop,
.page > .attr-backdrop,
.page > .sim-stage,
.page > .sync-overlay,
.page > [hidden] { animation: none; }

/* A container that staggers its own children shouldn't also fade as a block —
   one or the other, or the two opacities compound into a muddy start. */
.page > [data-stagger] { animation: none; }

/* ── stagger ──────────────────────────────────────────────────────────────
   Opt in per list with `data-stagger`. Delays are capped at ten items: past
   that the tail is off-screen anyway and the wait stops being free. */
[data-stagger] > * { animation: rise-in var(--dur-calm) var(--ease-out) both; }
[data-stagger] > *:nth-child(1)    { animation-delay:  30ms; }
[data-stagger] > *:nth-child(2)    { animation-delay:  75ms; }
[data-stagger] > *:nth-child(3)    { animation-delay: 120ms; }
[data-stagger] > *:nth-child(4)    { animation-delay: 165ms; }
[data-stagger] > *:nth-child(5)    { animation-delay: 210ms; }
[data-stagger] > *:nth-child(6)    { animation-delay: 255ms; }
[data-stagger] > *:nth-child(7)    { animation-delay: 300ms; }
[data-stagger] > *:nth-child(8)    { animation-delay: 345ms; }
[data-stagger] > *:nth-child(9)    { animation-delay: 390ms; }
[data-stagger] > *:nth-child(n+10) { animation-delay: 420ms; }

/* ── surfaces ─────────────────────────────────────────────────────────── */
.card { transition: border-color var(--dur-base) var(--ease-soft),
                    box-shadow var(--dur-base) var(--ease-soft); }
/* only cards you can actually click lift — a lift on a static panel is a lie */
a.card:hover, .card:has(> a:only-child):hover, .act-row:hover, .activity-card:hover {
  box-shadow: var(--shadow-md); border-color: var(--line-strong);
}

a { transition: color var(--dur-base) var(--ease-soft); }
.topnav a { transition: color var(--dur-base) var(--ease-soft),
                        background var(--dur-base) var(--ease-soft); }
.id-chip, .credits-chip { transition: transform var(--dur-base) var(--ease-lift),
                                      border-color var(--dur-base) var(--ease-soft); }
.id-chip:hover { transform: translateY(-1px); }
/* the balance ticking down mid-task is worth one small nudge of attention */
.credits-chip.bumped { animation: chip-bump var(--dur-calm) var(--ease-lift); }

:where(a, button, input, select, textarea, summary):focus-visible {
  transition: outline-offset var(--dur-quick) var(--ease-out);
}

/* ── controls ─────────────────────────────────────────────────────────── */
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); }
.btn-ghost:hover { transform: none; box-shadow: none; }
.btn[disabled]:hover { transform: none; box-shadow: var(--shadow-sm); }

.block-chip:hover { transform: translateY(-1px); }
.jsub-dot, .ws-step, .story-chip, .story-line, .seg-tab, .dock-tab {
  transition: color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-quick) var(--ease-lift);
}
.jsub-dot:hover, .ws-step:hover, .story-chip:hover, .story-line:hover {
  transform: translateY(-1px);
}

/* a sensor coming on: the tile settles and the tick lands a beat later */
.device .dev-check { transition: background var(--dur-base) var(--ease-soft),
                                 border-color var(--dur-base) var(--ease-soft),
                                 color var(--dur-base) var(--ease-soft); }
.device.selected .dev-check,
.device.synced .dev-check,
.device.pick:has(.pick-input:checked) .dev-check { animation: tick-in var(--dur-base) var(--ease-lift); }
.device.pick { transition: border-color var(--dur-base) var(--ease-soft),
                           background var(--dur-base) var(--ease-soft),
                           box-shadow var(--dur-base) var(--ease-soft),
                           transform var(--dur-base) var(--ease-out); }
.device.pick:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dev-signals { transition: opacity var(--dur-base) var(--ease-soft); }

/* survey answers — the tint arriving is the whole acknowledgement */
.opt, .scale-point, .switch, .consent-check {
  transition: background var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}

/* ── state ────────────────────────────────────────────────────────────── */
/* A dismissed message collapses rather than vanishing, so the page below it
   slides up instead of jumping. `max-height` is the animatable stand-in for
   the height we cannot know; 12rem clears any message this app produces. */
.flash {
  animation: flash-in var(--dur-calm) var(--ease-out) both;
  max-height: 12rem; overflow: hidden; cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-soft),
              max-height var(--dur-calm) var(--ease-soft),
              margin var(--dur-calm) var(--ease-soft),
              padding var(--dur-calm) var(--ease-soft),
              border-width var(--dur-calm) var(--ease-soft);
}
.flash:nth-child(2) { animation-delay: 70ms; }
.flash.dismissed {
  opacity: 0; transform: translateY(-6px);
  max-height: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0; border-width: 0;
}

/* bars fill rather than appear; scaling leaves the inline width untouched */
.journey-bar > span, .survey-progress-bar > span, .sim-progress > span {
  transform-origin: left center;
  animation: grow-in var(--dur-calm) var(--ease-out) both;
  animation-delay: 160ms;
}

/* tabs and dock categories re-run their entrance each time they are shown,
   because a hidden element restarts its animations when it comes back */
.pane:not([hidden]) { animation: fade-in var(--dur-base) var(--ease-soft); }

.modal-backdrop.open { animation: fade-in var(--dur-base) var(--ease-soft); }
.modal-backdrop.open .modal { animation: modal-in var(--dur-calm) var(--ease-out); }
.sim-stage:not([hidden]) .sim-phone { animation: modal-in var(--dur-calm) var(--ease-out); }
.sync-overlay:not([hidden]) { animation: fade-in var(--dur-base) var(--ease-soft); }

details > summary { transition: color var(--dur-base) var(--ease-soft); }
details > summary::marker { font-size: .8em; }
details[open] > summary ~ * { animation: rise-in var(--dur-base) var(--ease-out); }

/* ── reduced motion ───────────────────────────────────────────────────────
   One switch for the whole file, including the animations declared further
   up. Durations go to near-zero rather than `none` so that anything relying
   on an animation's end state (the `both` fills above) still lands there. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .btn:hover, .block-chip:hover, .id-chip:hover, .device.pick:hover,
  .jsub-dot:hover, .ws-step:hover, .story-chip:hover, .story-line:hover,
  .device:hover { transform: none; }
}

/* Paper has no timeline. Several entrances start at `opacity: 0` and rely on
   an animation to bring them in, so print gets the finished state directly —
   an instructor printing a participant's page must not get blank paper. */
@media print {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ══ the auditors' report ═════════════════════════════════════════════════
   Three instruments, shown side by side. Every chart is inline SVG or plain
   boxes — no chart library, so this works offline and prints.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── waiting ──────────────────────────────────────────────────────────── */
.audit-waiting { text-align: center; padding: 1.6rem 1rem; }
.audit-waiting h3 { margin: 0 0 .3rem; }
.audit-instruments {
  display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin: 1.1rem 0 .9rem;
}
.audit-chip {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .32rem .95rem; font-size: .78rem; font-weight: 600; color: var(--text-dim);
  background: var(--ink);
}
/* a slow sweep across each pill in turn: three instruments, read left to right */
.audit-chip::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  transform: translateX(-100%);
  animation: audit-sweep 2.4s var(--ease-soft) infinite;
}
.audit-chip:nth-child(2)::after { animation-delay: .35s; }
.audit-chip:nth-child(3)::after { animation-delay: .7s; }
@keyframes audit-sweep { 0% { transform: translateX(-100%) } 60%, 100% { transform: translateX(100%) } }

.audit-progress {
  height: 5px; border-radius: 99px; background: var(--ink-raise);
  overflow: hidden; max-width: 320px; margin: 0 auto;
}
.audit-progress > i {
  display: block; height: 100%; width: 38%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--leaf));
  animation: audit-slide 1.9s var(--ease-soft) infinite;
}
@keyframes audit-slide {
  0% { transform: translateX(-100%) } 100% { transform: translateX(360%) }
}
.audit-waiting-note { margin-top: .9rem; font-size: .82rem; color: var(--text-dim); }
.audit-waiting-note b { color: var(--text); }

/* ── headline ─────────────────────────────────────────────────────────── */
.audit-head { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.audit-gauge { position: relative; width: 132px; height: 132px; flex: none; }
.audit-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge-track { fill: none; stroke: var(--ink-raise); stroke-width: 11; }
.gauge-fill {
  fill: none; stroke-width: 11; stroke-linecap: round; stroke: var(--accent);
  animation: gauge-sweep var(--dur-calm) var(--ease-out) both;
  animation-delay: 120ms;
}
@keyframes gauge-sweep { from { stroke-dasharray: 0 999; } }
.audit-gauge-num {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
.audit-gauge-num b { display: block; font-family: var(--font-display); font-size: 2.1rem; line-height: 1; }
.audit-gauge-num span { font-size: .72rem; color: var(--text-dim); }
.audit-head-body { flex: 1; min-width: 260px; }
.audit-head-body h3 { margin: 0 0 .2rem; display: flex; align-items: center; gap: .5rem; }

.band-tag { text-transform: capitalize; }
.band-strong      { stroke: var(--leaf);   color: var(--leaf-deep);   border-color: #BCE5D4; background: var(--leaf-soft); }
.band-solid       { stroke: var(--accent); color: var(--accent-deep); border-color: #B9DDE8; background: var(--accent-soft); }
.band-mixed       { stroke: var(--amber);  color: var(--amber);       border-color: #EBD9A8; background: #FDF6E3; }
.band-needs-work  { stroke: var(--blush);  color: var(--blush);       border-color: #F3C4CF; background: #FDF0F3; }

.audit-subs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .9rem; margin-top: 1rem; }
.audit-sub-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .84rem; }
.audit-sub small { display: block; color: var(--text-dim); font-size: .7rem; margin-top: .2rem; }

.audit-bar { height: 7px; border-radius: 99px; background: var(--ink-raise); overflow: hidden; margin: .25rem 0; }
.audit-bar > i {
  display: block; height: 100%; border-radius: 99px; background: var(--accent);
  transform-origin: left center;
  animation: grow-in var(--dur-calm) var(--ease-out) both; animation-delay: 200ms;
}
.audit-bar.bar-good > i { background: var(--leaf); }
.audit-bar.bar-bad  > i { background: var(--blush); }

/* ── hints ────────────────────────────────────────────────────────────── */
.audit-hints { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.audit-hints h3 { margin: 0 0 .2rem; }
.hint-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .7rem; }
.hint {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: .75rem .9rem; background: var(--ink);
}
.hint-src {
  flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent-deep);
  background: var(--accent-soft); border-radius: 999px; padding: .2rem .55rem; margin-top: .1rem;
}
.hint-body { min-width: 0; }
.hint-body b { display: block; font-size: .92rem; }
.hint-body p { margin: .25rem 0 .35rem; font-size: .87rem; color: var(--text); }
.hint-body small { color: var(--text-dim); font-size: .72rem; }

/* ── per-instrument panels ────────────────────────────────────────────── */
.audit-panel { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.audit-panel-head { display: flex; align-items: baseline; gap: .7rem; }
.audit-panel-head h3 { margin: 0; font-size: 1.02rem; }
.audit-panel-score { margin-left: auto; color: var(--text-dim); font-size: .86rem; }
.audit-asks { margin: .2rem 0 .9rem; max-width: 74ch; }
.audit-foot { font-size: .85rem; margin: .8rem 0 0; }
.audit-meta { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: .8rem; max-width: 78ch; }

/* TENS: support and frustration are separate scales, shown as such */
.tens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.tens-need-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.tens-row { display: flex; align-items: center; gap: .5rem; }
.tens-lbl { flex: 0 0 5.2rem; font-size: .72rem; color: var(--text-dim); }
.tens-row .audit-bar { flex: 1; margin: .18rem 0; }
.tens-raw { font-size: .72rem; color: var(--text-dim); flex: 0 0 2rem; text-align: right; }

/* CEISS: nine skills as pip rows */
.ceiss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .55rem; }
.ceiss-item {
  display: flex; gap: .6rem; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: .5rem .65rem;
}
.ceiss-item.is-weak { border-color: #F3C4CF; background: #FDF0F3; }
.ceiss-dots { display: flex; gap: 3px; flex: none; }
.ceiss-dots span { width: 8px; height: 20px; border-radius: 3px; background: var(--ink-raise); }
.ceiss-dots span.on { background: var(--accent); }
.ceiss-item.is-weak .ceiss-dots span.on { background: var(--blush); }
.ceiss-body b { display: block; font-size: .82rem; line-height: 1.2; }
.ceiss-body small { color: var(--text-dim); font-size: .7rem; }

/* MITI: globals carry the grade, ratios carry the diagnosis */
.miti-globals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .8rem; }
.miti-global b { font-size: .82rem; }
.miti-global span { float: right; font-size: .78rem; color: var(--text-dim); }
.miti-ratios { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; margin-top: 1.1rem; }
.miti-ratio { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; }
.miti-ratio-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; }
.miti-ratio small { font-size: .7rem; text-transform: capitalize; color: var(--text-dim); }
.miti-ratio.verdict-good   { border-color: #BCE5D4; }
.miti-ratio.verdict-good   small { color: var(--leaf-deep); font-weight: 600; }
.miti-ratio.verdict-fair   small { color: var(--amber); font-weight: 600; }
.miti-ratio.verdict-below  { border-color: #F3C4CF; background: #FDF0F3; }
.miti-ratio.verdict-below  small { color: var(--blush); font-weight: 600; }
.miti-scale {
  position: relative; height: 8px; border-radius: 99px;
  background: var(--ink-raise); margin: .45rem 0 .3rem; overflow: hidden;
}
.miti-scale-fill {
  height: 100%; border-radius: 99px; background: var(--accent);
  transform-origin: left center;
  animation: grow-in var(--dur-calm) var(--ease-out) both; animation-delay: 200ms;
}
.miti-ratio.verdict-below .miti-scale-fill { background: var(--blush); }
.miti-ratio.verdict-good  .miti-scale-fill { background: var(--leaf); }
/* the manual's two bars, drawn on the scale itself so "below" is legible */
.miti-tick {
  position: absolute; top: -2px; width: 2px; height: 12px;
  background: var(--text-dim); opacity: .5; border-radius: 2px;
}
.miti-tick.tick-good { background: var(--text); opacity: .65; }

.miti-counts { margin-top: 1.1rem; }
.miti-counts summary { cursor: pointer; font-size: .84rem; font-weight: 600; color: var(--accent); }
.count-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; margin: .8rem 0 .6rem; }
.count {
  border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem;
  display: flex; align-items: baseline; gap: .5rem; opacity: .5;
}
.count.has { opacity: 1; border-color: var(--line-strong); }
.count b { font-size: 1.05rem; }
.count span { font-size: .72rem; color: var(--text-dim); line-height: 1.15; }

@media (max-width: 720px) {
  .audit-head { justify-content: center; text-align: center; }
  .audit-head-body { min-width: 0; }
}

/* a run whose audit is still being judged */
.run-pending { opacity: .75; }
.run-working { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: .3rem; }
.run-working i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: blink 1.2s infinite;
}
.run-working i:nth-child(2) { animation-delay: .2s; }
.run-working i:nth-child(3) { animation-delay: .4s; }

/* The report sits under the run history in the same card, so it needs a seam
   — otherwise the composite gauge reads as part of the table's caption. */
.ws-results .audit { border-top: 1px solid var(--line); padding-top: 1.3rem; margin-top: 1.2rem; }
.ws-results .audit-waiting { border-top: 1px solid var(--line); margin-top: 1rem; }

/* the elapsed clock under the scoring animation — reassurance, not a countdown */
.audit-elapsed {
  margin: .7rem 0 0; font-size: .8rem; color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.audit-elapsed span { font-family: var(--font-data); color: var(--text); font-weight: 600; }
/* a disabled Evaluate button mid-scoring should read as "busy", not "broken" */
.btn-evaluate[disabled] { opacity: .6; }

/* the "already scored" note under a disabled Evaluate button */
#evaluate-spent { color: var(--amber); font-weight: 600; margin-bottom: .3rem; }

/* ── choosing which prompt to submit ──────────────────────────────────────
   The last version someone wrote is often not their best, so the choice is
   laid out as a comparison: number, what it said, what it scored. */
.pick-version { border: 0; padding: 0; margin: 0 0 1.2rem; }
.pick-version legend { font-weight: 600; font-size: .95rem; padding: 0; }
.version-list { display: grid; gap: .4rem; margin-top: .7rem; }
/* `.list-plain li` is a flex row with a dashed rule — neither of which suits a
   stack of selectable cards, so both are undone here. */
.version-list li { display: block; padding: 0; border-bottom: 0; }
.version-option {
  display: flex; align-items: center; gap: .7rem; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem;
  font-weight: 400;
  transition: border-color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
}
.version-option:hover { border-color: var(--line-strong); background: var(--ink-raise); }
.version-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.version-option input { flex: none; accent-color: var(--accent); margin: 0; }
.version-num {
  flex: none; font-size: .78rem; font-weight: 700; color: var(--accent-deep);
  background: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: .1rem .5rem;
}
.version-body { flex: 1; min-width: 0; }
.version-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.version-badges:empty { display: none; }
.version-excerpt {
  display: block; color: var(--text-dim); font-size: .76rem; line-height: 1.3;
  margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Four numbers now — the composite and three instruments — where there used
   to be one. `flex: none` on that row plus a `fieldset`'s refusal to shrink
   below its content pushed the whole page sideways at laptop widths, so both
   are undone and the chips wrap instead. */
.pick-version { min-width: 0; }
.version-option { min-width: 0; flex-wrap: wrap; }
.version-score {
  display: flex; gap: .7rem; align-items: flex-start; justify-content: flex-end;
  flex: 0 1 auto; min-width: 0; flex-wrap: wrap;
  font-size: 1.05rem; font-weight: 600;
}
.version-score small { font-size: .68rem; color: var(--text-dim); font-weight: 400; }
.version-composite b { color: var(--accent-deep); }
.version-option.is-best .version-score { color: var(--leaf-deep); }

/* ── the participant-facing task sheet ────────────────────────────────────
   Persona and objective on the left, the numbers on the right, and what a
   good conversation ends with underneath. Reads as a briefing rather than a
   data dump: the value column is the only monospace in it, so the eye lands
   on the numbers without the labels shouting. */
.sheet { margin-top: .3rem; }
.sheet-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem; }
.sheet-h {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-deep); margin: 0 0 .5rem;
}
.sheet-h span { font-size: .95rem; }
.sheet-person .sheet-h:not(:first-child) { margin-top: 1.1rem; }

.sheet-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; }
.sheet-facts dt {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); padding-top: .12rem; white-space: nowrap;
}
.sheet-facts dd { margin: 0; font-size: .88rem; line-height: 1.45; }

.sheet-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
.sheet-list li { margin-bottom: .25rem; }

.sheet-metrics { width: 100%; border-collapse: collapse; }
.sheet-metrics tr { border-bottom: 1px solid var(--line); }
.sheet-metrics tr:last-child { border-bottom: 0; }
.sheet-metrics td, .sheet-metrics th { padding: .38rem .4rem; vertical-align: baseline; }
.sheet-icon { width: 1.6rem; font-size: .95rem; text-align: center; }
.sheet-metrics th {
  text-align: left; font-weight: 500; font-size: .85rem; color: var(--text);
}
.sheet-value { white-space: nowrap; font-size: .85rem; font-weight: 600; text-align: right; }
.sheet-baseline {
  font-size: .76rem; color: var(--text-dim); padding-left: .7rem; line-height: 1.35;
}
.sheet-note { margin: .7rem 0 0; max-width: 62ch; }

.sheet-outcome {
  margin-top: 1.3rem; border-top: 1px solid var(--line); padding-top: 1rem;
}
.sheet-outcome-list { columns: 2; column-gap: 1.6rem; }
.sheet-outcome-list li { break-inside: avoid; }

@media (max-width: 900px) {
  .sheet-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .sheet-outcome-list { columns: 1; }
}

/* ── sensors inside the task sheet ────────────────────────────────────────
   Grouped by category, then by the sensor that produced each reading, two
   sensors abreast. A wrist and a room are different kinds of sensing and the
   heading says so; the pairing of number to device is what an agent has to
   respect, so it is never more than a line away. */
.sheet-cat + .sheet-cat { margin-top: 1rem; }
.sheet-cat-head {
  display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--line-strong); padding-bottom: .28rem;
}
.sheet-cat-name {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim);
}
.sheet-cat-icons { display: flex; gap: .25rem; margin-left: auto; }
.sheet-chip { display: grid; place-items: center; width: 18px; height: 18px; opacity: .7; }
.sheet-chip svg { width: 100%; height: 100%; }

/* Column count follows the space the sheet actually has, not the window —
   `auto-fit` against the viewport gave two columns on a laptop and three on a
   wide screen, which read as two different designs. A container query keeps
   it to one, two or three and never four, wherever the sheet is rendered. */
.sheet-data { container-type: inline-size; }
.sheet-cat-body {
  display: grid; grid-template-columns: 1fr;
  gap: .2rem 1.4rem; margin-top: .5rem;
}
@container (min-width: 440px) {
  .sheet-cat-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 660px) {
  .sheet-cat-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sheet-block { break-inside: avoid; padding-bottom: .45rem; }

/* the sensor line: `.device` for the inspector's sake, none of its box */
.device.sheet-dev {
  display: inline-flex; align-items: center; gap: .32rem;
  position: relative; overflow: visible;
  border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none;
  text-align: left;
}
.device.sheet-dev:hover { transform: none; box-shadow: none; }
.device.sheet-dev:hover .dev-name { color: var(--accent-deep); }
.device.sheet-dev svg { width: 16px; height: 16px; margin: 0; }
.device.sheet-dev .dev-name {
  font-size: .68rem; line-height: 1; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim);
}
.device.sheet-dev .dev-info {
  position: static; width: 13px; height: 13px; font-size: .54rem; flex: none;
}
.device.sheet-dev:hover .dev-signals,
.device.sheet-dev:focus-visible .dev-signals { display: block; }

/* one reading per row: icon, label, then the number hard against the label —
   the old table put them at opposite ends of a very wide column */
.sheet-readings { list-style: none; margin: .25rem 0 0; padding: 0; }
.sheet-readings li {
  display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: baseline; column-gap: .45rem;
  padding: .22rem 0; border-bottom: 1px dashed var(--line);
}
.sheet-readings li:last-child { border-bottom: 0; }
.sheet-icon { font-size: .85rem; line-height: 1; }
.sheet-label { font-size: .84rem; line-height: 1.25; }
.sheet-value { font-size: .84rem; font-weight: 600; white-space: nowrap; }
.sheet-baseline {
  grid-column: 2 / -1; font-size: .72rem; color: var(--text-dim); line-height: 1.3;
}
.sheet-note { margin: .9rem 0 0; max-width: 62ch; }

/* ── choosing which prompt to submit ──────────────────────────────────────
   The last version someone wrote is often not their best, so the choice is
   laid out as a comparison: number, what it said, what it scored. */
.pick-version { border: 0; padding: 0; margin: 0 0 1.2rem; }
.pick-version legend { font-weight: 600; font-size: .95rem; padding: 0; }
.version-list { display: grid; gap: .4rem; margin-top: .7rem; }
/* `.list-plain li` is a flex row with a dashed rule — neither of which suits a
   stack of selectable cards, so both are undone here. */
.version-list li { display: block; padding: 0; border-bottom: 0; }
.version-option {
  display: flex; align-items: center; gap: .7rem; margin: 0; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem;
  font-weight: 400;
  transition: border-color var(--dur-base) var(--ease-soft),
              background var(--dur-base) var(--ease-soft);
}
.version-option:hover { border-color: var(--line-strong); background: var(--ink-raise); }
.version-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.version-option input { flex: none; accent-color: var(--accent); margin: 0; }
.version-num {
  flex: none; font-size: .78rem; font-weight: 700; color: var(--accent-deep);
  background: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  padding: .1rem .5rem;
}
.version-body { flex: 1; min-width: 0; }
.version-badges { display: flex; gap: .3rem; flex-wrap: wrap; }
.version-badges:empty { display: none; }
.version-excerpt {
  display: block; color: var(--text-dim); font-size: .76rem; line-height: 1.3;
  margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.version-score { flex: none; font-size: 1.05rem; font-weight: 600; }
.version-score small { font-size: .68rem; color: var(--text-dim); font-weight: 400; }
.version-option.is-best .version-score { color: var(--leaf-deep); }

/* ── the participant-facing task sheet ────────────────────────────────────
   Persona and objective on the left, the numbers on the right, and what a
   good conversation ends with underneath. Reads as a briefing rather than a
   data dump: the value column is the only monospace in it, so the eye lands
   on the numbers without the labels shouting. */
.sheet { margin-top: .3rem; }
.sheet-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem; }
.sheet-h {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-deep); margin: 0 0 .5rem;
}
.sheet-h span { font-size: .95rem; }
.sheet-person .sheet-h:not(:first-child) { margin-top: 1.1rem; }

.sheet-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; }
.sheet-facts dt {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); padding-top: .12rem; white-space: nowrap;
}
.sheet-facts dd { margin: 0; font-size: .88rem; line-height: 1.45; }

.sheet-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; line-height: 1.5; }
.sheet-list li { margin-bottom: .25rem; }

.sheet-metrics { width: 100%; border-collapse: collapse; }
.sheet-metrics tr { border-bottom: 1px solid var(--line); }
.sheet-metrics tr:last-child { border-bottom: 0; }
.sheet-metrics td, .sheet-metrics th { padding: .38rem .4rem; vertical-align: baseline; }
.sheet-icon { width: 1.6rem; font-size: .95rem; text-align: center; }
.sheet-metrics th {
  text-align: left; font-weight: 500; font-size: .85rem; color: var(--text);
}
.sheet-value { white-space: nowrap; font-size: .85rem; font-weight: 600; text-align: right; }
.sheet-baseline {
  font-size: .76rem; color: var(--text-dim); padding-left: .7rem; line-height: 1.35;
}
.sheet-note { margin: .7rem 0 0; max-width: 62ch; }

.sheet-outcome {
  margin-top: 1.3rem; border-top: 1px solid var(--line); padding-top: 1rem;
}
.sheet-outcome-list { columns: 2; column-gap: 1.6rem; }
.sheet-outcome-list li { break-inside: avoid; }

@media (max-width: 900px) {
  .sheet-cols { grid-template-columns: 1fr; gap: 1.2rem; }
  .sheet-outcome-list { columns: 1; }
}

/* ── sensors inside the task sheet ────────────────────────────────────────
   Grouped by category, then by the sensor that produced each reading. The
   sensor is a row of its own rather than a card in a gutter, so the readings
   keep the full width — a wrist and a room are different kinds of sensing,
   and the heading says so before any number does. */
.sheet-cat + .sheet-cat { margin-top: 1.1rem; }
.sheet-cat-head {
  display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid var(--line-strong); padding-bottom: .3rem;
}
.sheet-cat-name {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim);
}
.sheet-cat-icons { display: flex; gap: .25rem; margin-left: auto; }
.sheet-chip { display: grid; place-items: center; width: 20px; height: 20px; opacity: .75; }
.sheet-chip svg { width: 100%; height: 100%; }

/* the sensor line: `.device` for the inspector's sake, none of its box */
.sheet-dev-cell { padding: .55rem .4rem .15rem !important; }
.device.sheet-dev {
  display: inline-flex; align-items: center; gap: .35rem;
  position: relative; overflow: visible;
  border: 0; border-radius: 0; padding: 0; background: none; box-shadow: none;
  text-align: left; font-weight: 600;
}
.device.sheet-dev:hover { transform: none; box-shadow: none; }
.device.sheet-dev:hover .dev-name { color: var(--accent-deep); }
.device.sheet-dev svg { width: 18px; height: 18px; margin: 0; }
.device.sheet-dev .dev-name { font-size: .74rem; line-height: 1; }
.device.sheet-dev .dev-info {
  position: static; width: 14px; height: 14px; font-size: .56rem; flex: none;
}
.device.sheet-dev:hover .dev-signals,
.device.sheet-dev:focus-visible .dev-signals { display: block; }

/* every category is one table, so the columns line up down the whole sheet */
.sheet-metrics { table-layout: fixed; width: 100%; }
.sheet-metrics .col-icon { width: 1.9rem; }
.sheet-metrics .col-value { width: 7.2rem; }
.sheet-metrics .col-baseline { width: 34%; }
.sheet-metrics tbody + tbody tr:first-child th { padding-top: .5rem; }
.sheet-metrics tr { border-bottom: 1px dashed var(--line); }
.sheet-metrics tbody:last-child tr:last-child { border-bottom: 0; }
.sheet-dev-cell, .sheet-metrics tr:has(.sheet-dev-cell) { border-bottom: 0; }

@media (max-width: 900px) {
  .sheet-metrics .col-value { width: 6.4rem; }
  .sheet-metrics .col-baseline { width: 30%; }
}

/* ── free exploration: locks, versions, earlier runs ──────────────────── */
.dock-head { display: flex; align-items: baseline; gap: .5rem; margin: 1.1rem 0 .2rem; }
.dock-title { font-weight: 600; font-size: .9rem; }
.dock-head small { color: var(--text-dim); font-size: .76rem; }
.dock-head .dock-quick { margin-left: auto; }

.lock-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: .7rem 0 0; }
.lock-row .form-hint { margin: 0; flex: 1; min-width: 12rem; }

.version-chip {
  margin-left: auto; font-size: .72rem; font-weight: 700;
  color: var(--accent-deep); background: var(--accent-soft);
  border-radius: 999px; padding: .12rem .55rem; white-space: nowrap;
}
.prompt-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .7rem; }
.prompt-actions .save-state { margin-right: auto; }
#prompt-note { margin-top: .45rem; }
#prompt-area:disabled { opacity: .8; cursor: default; }

/* earlier conversations over the same day — the comparison this page is for */
.run-strip { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .7rem; }
.run-strip-label { font-size: .72rem; color: var(--text-dim); }
.run-dot {
  font-family: var(--font-data); font-size: .7rem; font-weight: 600;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: .1rem .5rem; color: var(--text-dim); background: var(--ink);
  transition: border-color var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft);
}
.run-dot:hover { border-color: var(--accent); color: var(--accent-deep); text-decoration: none; }
.run-dot.current { background: var(--accent); border-color: var(--accent); color: #fff; }

#results-card { margin-top: 1rem; }

/* A choice list that is really a scale (1..N with a word on each point) runs
   in one row: the default two-column grid puts "Somewhat high" underneath
   "Low", and the order stops being readable. */
.opts-ordered {
  /* one row whatever the number of points — `auto-fit` cannot resolve a track
     count against a zero minimum, so the flow is set explicitly */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: .35rem;
}
.opts-ordered .opt {
  flex-direction: column; align-items: flex-start; gap: .3rem;
  text-align: left; font-size: .82rem; line-height: 1.2;
}
@media (max-width: 640px) {
  .opts-ordered { grid-template-columns: 1fr; }
  .opts-ordered .opt { flex-direction: row; align-items: center; }
}


/* ── the attribution modal ───────────────────────────────────────────── */
/* Its own class names on purpose. `.modal-backdrop` already belongs to the
   raw-JSON dialog, which hides itself with `display: none` and shows itself
   with `.open` — reusing it here force-showed that dialog on every page. */
.attr-backdrop {
  position: fixed; inset: 0; z-index: 60;
  /* no backdrop-filter: it renders unpredictably over a long scrolling page
     and buys nothing here — a plain scrim reads the same */
  background: rgba(20, 22, 31, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem; overflow-y: auto;
}
.attr-backdrop[hidden] { display: none; }
.attr-card {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
  width: min(38rem, 92vw); max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.attr-card h3 { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.35; }
.attr-sub { margin: 0 0 1rem; color: var(--text-dim); font-size: .85rem; }
.attribution-options { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.attribution-options > li + li { margin-top: .1rem; }
.attribution-options label {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .5rem .6rem; border-radius: 8px; cursor: pointer;
  font-size: .9rem; line-height: 1.4;
}
.attribution-options label:hover { background: var(--ink-deep); }
.attribution-options input[type="checkbox"] { margin-top: .18rem; flex: none; }
#attribution-other-text {
  width: calc(100% - 1.9rem); margin: .1rem 0 .3rem 1.9rem;
}
.attr-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.attr-actions .form-hint { margin: 0; }
/* before run 1 there is no list to show, and saying so beats an empty box */
.evaluate-goals-hidden p { margin: .35rem 0 0; font-size: .85rem; color: var(--text-dim); }

/* ── the room monitor ────────────────────────────────────────────────── */
/* Built to be readable from a metre away on a second screen, so: bigger
   numbers than the rest of the app, colour carrying stage rather than
   decorating it, and nothing that moves except the numbers themselves. */
.room-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.room-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.room-controls input[type="search"] { min-width: 14rem; }
.room-auto { display: flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--text-dim); }

.room-totals {
  display: grid; gap: .6rem; margin: 1.1rem 0 .8rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.room-total {
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem;
  background: var(--ink); display: flex; flex-direction: column; gap: .1rem;
}
.room-total b { font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; }
.room-total span { font-size: .74rem; color: var(--text-dim); }
/* an empty stage is still worth its slot — the shape of the room is the
   information, and a column that vanishes makes the row jump on refresh */
.room-total.is-empty { opacity: .45; }
.room-total.tone-bad   { border-color: var(--blush); }
.room-total.tone-bad b { color: var(--blush); }
.room-total.tone-warn  { border-color: var(--amber); }
.room-total.tone-live  { border-color: var(--accent); }
.room-total.tone-done b { color: var(--accent); }

.room-balance { font-size: .84rem; color: var(--text-dim); margin: 0 0 1rem; }
.room-balance.is-off { color: var(--amber); }

.room-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.room-table th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-dim); padding: .4rem .5rem;
  border-bottom: 1px solid var(--line);
}
.room-table th.num, .room-table td.num { text-align: right; }
.room-table td { padding: .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.room-row.tone-bad  { background: color-mix(in srgb, var(--blush) 7%, transparent); }
.room-row.tone-warn { background: color-mix(in srgb, var(--amber) 6%, transparent); }
.room-row.tone-done { opacity: .62; }
.room-id { font-size: .82rem; }
.room-cohort, .room-idle, .room-free { display: block; font-size: .7rem; color: var(--text-dim); }
.room-stage { font-weight: 600; }
.room-scenario {
  display: inline-block; min-width: 1.4rem; text-align: center;
  border-radius: 5px; padding: .05rem .3rem; font-weight: 700;
  background: var(--ink-deep); border: 1px solid var(--line);
}
.room-dim { color: var(--text-dim); }
.room-runs { display: inline-flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.room-bar { display: block; width: 3.4rem; height: 3px; border-radius: 2px; background: var(--line); }
.room-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.room-surveys { white-space: nowrap; }
.room-surveys span {
  display: inline-block; font-size: .68rem; padding: .1rem .3rem;
  border-radius: 4px; margin-right: .15rem; border: 1px solid var(--line);
}
.room-surveys .yes { background: var(--accent); color: #fff; border-color: var(--accent); }
.room-surveys .no { color: var(--text-dim); }
.room-notes { max-width: 16rem; }
.room-note {
  display: inline-block; font-size: .72rem; padding: .1rem .35rem;
  border-radius: 5px; background: var(--ink-deep); border: 1px solid var(--line);
  margin: 0 .2rem .2rem 0;
}
.room-note.is-urgent { border-color: var(--blush); color: var(--blush); }
.room-empty { text-align: center; color: var(--text-dim); padding: 2rem; }
.room-stamp { font-size: .74rem; color: var(--text-dim); margin-top: .8rem; }
@media (max-width: 860px) {
  .room-table { display: block; overflow-x: auto; }
}

/* ── the Scenario C demo briefing ────────────────────────────────────── */
.demo-facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .9rem; margin: 0 0 .9rem; }
.demo-facts dt { font-weight: 600; font-size: .82rem; color: var(--text-dim); }
.demo-facts dd { margin: 0; font-size: .9rem; }
.demo-probes { margin-top: .8rem; }
.demo-probes > summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.demo-probes ol { margin: .6rem 0 .4rem; padding-left: 1.2rem; font-size: .86rem; line-height: 1.5; }
.demo-probes li { margin-bottom: .45rem; }
.demo-version { border-top: 1px solid var(--line); padding: .9rem 0 .2rem; }
.demo-version h3 { margin: 0 0 .3rem; font-size: .95rem; }
.demo-version p { margin: .25rem 0; font-size: .88rem; }
.demo-changes .tag { margin-right: .25rem; font-family: var(--font-mono, monospace); font-size: .72rem; }
/* the staged-prompt strip, instructor demo only */
.demo-strip {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .55rem .7rem; margin-bottom: .8rem;
  border: 1px dashed var(--line-strong, var(--line)); border-radius: 10px;
  background: var(--ink-deep);
}
.demo-strip b { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); }
.demo-strip small { font-size: .74rem; color: var(--text-dim); margin-left: auto; }
/* the fields this step rewrote — the ones the room should be looking at */
.section.demo-changed > summary { box-shadow: inset 3px 0 0 var(--accent); }