:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202124;background:#fff;font-size:16px;color-scheme:light;line-height:1.5}
*{box-sizing:border-box}body{margin:0}main{max-width:850px;margin:auto;padding:24px}h1{font-size:25px;line-height:1.2;letter-spacing:-.025em;margin:0 0 12px}h2{font-size:20px}h3{font-size:17px}p{white-space:pre-wrap}button,input,textarea,select{font:inherit}input,textarea,select{display:block;width:100%;padding:10px 12px;border:1px solid #c8cbd0;border-radius:8px;background:#fff;color:inherit}input[type=checkbox],input[type=radio]{display:inline;width:auto;margin-right:8px}textarea{min-height:110px;resize:vertical}button{padding:9px 14px;border:1px solid #c8cbd0;border-radius:8px;background:#fff;color:inherit;cursor:pointer}button.primary{background:#242729;color:#fff;border-color:#242729}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #377bdd;outline-offset:2px}fieldset{border:0;padding:0;margin:24px 0;min-width:0}legend{font-weight:600;margin-bottom:6px;padding:0}label.choice{display:block;padding:6px 0}small,.muted{color:#61666d}.error{color:#a21e23;margin:6px 0;font-size:14px}[aria-invalid=true]{border-color:#a21e23}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}.notice{padding:12px 16px;background:#f4f5f6;border:1px solid #e1e3e5;border-radius:8px}.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #e7e8eb}.row button{text-align:left;border:0;padding:0;background:none;font-weight:600}.row small{display:block}.badge{font-size:13px;border-radius:20px;padding:3px 10px;background:#f0f1f3;white-space:nowrap}dl{margin:0}dt{font-weight:600;margin-top:18px}dd{margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}.honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.row{align-items:flex-start}h1{font-size:23px}}

/* ── Visitor form ──────────────────────────────────────────────────────────
   Embedded in the client's own page through an iframe, in the page's vertical
   flow with no inner card. It keeps the system type stack (it renders on the
   client's website, whose fonts it cannot load under this origin's CSP) and a
   neutral ink so it sits under any brand; the one accent is a deep green used
   for the chosen answer and the primary action. Colours are plain hex on
   purpose: no CSS variables leak in from the host, and none are needed. */
.visitor{--ink:#1d201d;--ink-2:#5f645f;--ink-3:#8a8f89;--line:#e4e6e1;--line-2:#cfd3cc;--field:#fff;--field-tint:#f7f8f5;--accent:#293125;--accent-2:#3d4a37;--accent-tint:#eef2ea;--accent-ring:rgba(41,49,37,.16);--danger:#b42318;--danger-tint:#fdf2f1;--danger-ring:rgba(180,35,24,.18);--focus:#377bdd;--radius:12px;--radius-s:9px;-webkit-font-smoothing:antialiased}
.visitor main{max-width:880px;padding:28px 24px 48px;color:var(--ink);letter-spacing:-.011em}
.visitor h1{font-size:clamp(24px,3vw,31px);font-weight:650;line-height:1.2;letter-spacing:-.022em;margin:0 0 18px;max-width:30ch;text-wrap:balance}
.visitor .intro{color:var(--ink-2);line-height:1.65;max-width:65ch;margin:0 0 8px}
.visitor .preview-label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);margin:14px 0 0;padding:5px 11px;border:1px dashed var(--line-2);border-radius:999px;white-space:normal}
.visitor .preview-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#d6a73a;flex:none}

/* Long instructions fold behind one line; the open state reads like a note. */
.visitor .instructions{border:1px solid var(--line);border-radius:var(--radius);margin:20px 0 4px;background:var(--field-tint);overflow:hidden}
.visitor .instructions summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;padding:14px 16px;font-size:15px;font-weight:550;line-height:1.4;user-select:none}
.visitor .instructions summary::-webkit-details-marker{display:none}
.visitor .instructions summary::before{content:"";flex:none;width:7px;height:7px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(-45deg);transition:transform .2s ease-out;margin:0 3px 0 2px}
.visitor .instructions[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.visitor .instructions[open] summary{border-bottom:1px solid var(--line)}
.visitor .instructions summary:focus-visible{outline:3px solid var(--focus);outline-offset:-3px;border-radius:var(--radius)}
.visitor .instructions p{font-size:15px;line-height:1.75;color:var(--ink-2);max-width:68ch;margin:0;padding:14px 16px 18px}

/* Progress: one segment per step, filled as they are completed. The text
   beside it is what assistive tech hears; the bar is for everyone else. */
.visitor .progress{display:flex;flex-direction:column;gap:9px;margin:28px 0 4px}
.visitor .progress-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:13px;color:var(--ink-2)}
.visitor .progress-line b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.visitor .progress-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;height:4px}
.visitor .progress-track i{display:block;border-radius:999px;background:var(--line);transition:background-color .25s ease-out}
.visitor .progress-track i.done{background:var(--accent)}
.visitor .progress-track i.now{background:linear-gradient(90deg,var(--accent) 50%,var(--line) 50%)}

.visitor section{animation:step-in .24s ease-out}
@keyframes step-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.visitor h2{font-size:20px;font-weight:650;letter-spacing:-.02em;line-height:1.3;margin:18px 0 22px;padding-bottom:16px;border-bottom:1px solid var(--line);outline:none}
.visitor h2:focus-visible{box-shadow:0 0 0 3px var(--focus);border-radius:4px}

/* Questions */
.visitor fieldset{margin:0 0 28px;padding:0}
.visitor legend{font-size:15.5px;font-weight:560;line-height:1.45;margin-bottom:10px;padding:0;color:var(--ink);text-wrap:pretty}
.visitor legend .req{color:var(--ink-3);font-weight:500;margin-left:3px}
.visitor .muted{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin:-4px 0 10px}
.visitor .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.visitor input,.visitor select,.visitor textarea{min-height:48px;border:1px solid var(--line-2);border-radius:var(--radius-s);padding:11px 14px;background:var(--field);color:var(--ink);font-size:16px;line-height:1.4;transition:border-color .15s,box-shadow .15s,background-color .15s;appearance:none;-webkit-appearance:none}
.visitor input::placeholder,.visitor textarea::placeholder{color:var(--ink-3)}
.visitor input:hover,.visitor select:hover,.visitor textarea:hover{border-color:#b8bdb5}
.visitor input:focus,.visitor textarea:focus,.visitor select:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-ring)}
.visitor input:focus-visible,.visitor textarea:focus-visible,.visitor select:focus-visible{outline:none}
.visitor input[type=date]{min-width:0}
.visitor input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.visitor textarea{min-height:120px;resize:vertical}

/* A native select, drawn with our own chevron (no data: URI — img-src is
   'self' — so the arrow is two borders on a pseudo-element). */
.visitor .select{position:relative}
.visitor .select select{padding-right:44px;cursor:pointer;text-overflow:ellipsis}
.visitor .select::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(45deg);pointer-events:none}
.visitor .select select:invalid,.visitor .select select[data-empty]{color:var(--ink-3)}

/* Choice cards: the native checkbox/radio stays for keyboard and screen
   readers; the card is the hit target. */
.visitor label.choice{display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--radius-s);margin:0 0 8px;background:var(--field);cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s;line-height:1.4}
.visitor label.choice:has(input:checked){background:var(--accent-tint);border-color:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent-2)}
.visitor label.choice:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-ring),inset 0 0 0 1px var(--accent-2)}
.visitor input[type=checkbox],.visitor input[type=radio]{appearance:auto;-webkit-appearance:auto;min-height:0;width:18px;height:18px;flex:none;accent-color:var(--accent);margin:0;padding:0;border:0;box-shadow:none;background:none}
.visitor input[type=checkbox]:focus,.visitor input[type=radio]:focus{box-shadow:none}

/* The 0–10 scale: eleven equal cells in one row, the chosen one filled. */
.visitor .rating-options{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:5px}
.visitor .field-rating label.choice{justify-content:center;gap:0;padding:0;margin:0;min-width:0;min-height:44px;font-size:15px;font-weight:550;font-variant-numeric:tabular-nums;color:var(--ink-2);position:relative;user-select:none}
.visitor .field-rating label.choice input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;appearance:none;-webkit-appearance:none}
.visitor .field-rating label.choice:has(input:checked){background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.visitor .field-rating label.choice:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-ring)}
.visitor .scale-ends{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:12.5px;color:var(--ink-2);line-height:1.4}
.visitor .scale-ends span:last-child{text-align:right}

/* Validation */
.visitor .error{display:flex;align-items:flex-start;gap:7px;color:var(--danger);margin:8px 0 0;font-size:13.5px;line-height:1.45}
.visitor .error:empty{display:none}
.visitor .error::before{content:"!";flex:none;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:16px;text-align:center}
.visitor [aria-invalid=true]{border-color:var(--danger);background:var(--danger-tint)}
.visitor [aria-invalid=true]:focus{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-ring)}
.visitor label.choice:has([aria-invalid=true]){border-color:var(--danger)}

/* Actions */
.visitor .actions{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
.visitor .actions button:not(.primary){margin-right:auto}
.visitor .actions button.primary{margin-left:auto}
.visitor button{min-height:48px;border-radius:999px;padding:11px 24px;font-size:15px;font-weight:560;border:1px solid var(--line-2);background:var(--field);color:var(--ink);transition:background-color .15s,border-color .15s,transform .1s,box-shadow .15s}
.visitor button.primary{background:var(--accent);border-color:var(--accent);color:#fff;min-width:160px;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.visitor button:active{transform:translateY(1px)}
.visitor button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-ring),0 0 0 1px var(--accent-2)}
.visitor button:disabled{opacity:.6;cursor:progress}
.visitor button.primary[aria-busy=true]::before{content:"";display:inline-block;width:12px;height:12px;margin:-2px 9px 0 -4px;vertical-align:middle;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.visitor .notice{border:1px solid #d4dfcc;border-radius:var(--radius);background:var(--accent-tint);color:#2f3b29;padding:15px 18px;font-size:15px;line-height:1.5}
.visitor .feedback .error{padding:12px 16px;border:1px solid #f0c9c5;border-radius:var(--radius);background:var(--danger-tint);margin:0 0 18px}
.visitor .feedback .notice{margin:0 0 18px}

/* Results, after submit or in preview */
.visitor .done-mark{width:44px;height:44px;border-radius:50%;background:var(--accent-tint);position:relative;margin:4px 0 14px}
.visitor .done-mark::after{content:"";position:absolute;left:15px;top:11px;width:10px;height:17px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(45deg)}
.visitor .result-summary{margin-top:28px}
.visitor .result-summary h2{margin-top:0;border-bottom:0;padding-bottom:0;margin-bottom:14px;font-size:17px}
.visitor .result-summary .result.banded{grid-column:1/-1;background:var(--accent);border-color:var(--accent);color:#fff;padding:20px 22px}
.visitor .result-summary .result.banded dt{color:rgba(255,255,255,.72)}
.visitor .result-summary .result.banded dd{font-size:36px}
.visitor .result-summary .result.banded dd.interpretation{color:#fff;font-size:16px;font-weight:550;text-transform:capitalize}
.visitor .result-summary dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:0}
.visitor .result-summary .result{display:flex;flex-direction:column;gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--field-tint)}
.visitor .result-summary dt{font-size:13px;font-weight:500;color:var(--ink-2);margin:0;line-height:1.4}
.visitor .result-summary dd{margin:0;font-size:28px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.visitor .result-summary dd.interpretation{font-size:14px;font-weight:500;color:var(--accent-2);line-height:1.45;margin-top:4px}

@media(hover:hover){
  .visitor button.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
  .visitor button:not(.primary):hover{border-color:#b8bdb5;background:var(--field-tint)}
  .visitor label.choice:hover{border-color:#b8bdb5}
  .visitor .field-rating label.choice:hover{border-color:var(--accent-2);color:var(--ink)}
  .visitor .field-rating label.choice:has(input:checked):hover{color:#fff}
  .visitor .instructions summary:hover{color:var(--accent-2)}
}
@media(max-width:600px){
  .visitor main{padding:16px 4px 32px}
  .visitor h1{font-size:24px}
  .visitor h2{font-size:18px;margin-top:18px}
  .visitor .rating-options{gap:3px}
  .visitor .field-rating label.choice{min-height:40px;font-size:13.5px;border-radius:7px}
  .visitor .actions{flex-direction:column-reverse;align-items:stretch}
  .visitor .actions button:not(.primary){margin:0}
  .visitor button{width:100%}
  .visitor .instructions p{font-size:15px}
  .visitor .result-summary dl{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .visitor input,.visitor select,.visitor textarea,.visitor button,.visitor label.choice,.visitor .progress-track i{transition:none}
  .visitor section{animation:none}
}

/* ── Activity surface ───────────────────────────────────────────────────────
   The staff view of submissions, embedded in Activity > Forms. It is the app's
   own surface seen through a cross-origin frame, so it borrows the app's type,
   tokens and elevation (values copied from src/app/globals.css) rather than
   inventing a second design system. The visitor form above is deliberately
   untouched by all of it: that one lives on the client's website and should
   look like the client's website. */

@font-face{font-family:"Suisse Intl";src:url(/fonts/SuisseIntl-Regular.latin1.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212,U+2018-201E,U+20AC}
@font-face{font-family:"Suisse Intl";src:url(/fonts/SuisseIntl-Medium.latin1.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+2190-21BB,U+2212,U+2018-201E,U+20AC}
/* Names, notes and answers carry glyphs the Latin-1 cut does not: the full
   faces sit next in the stack, so those words stay in the brand font. */
@font-face{font-family:"Suisse Intl Full";src:url(/fonts/SuisseIntl-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Suisse Intl Full";src:url(/fonts/SuisseIntl-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

.app{
  color-scheme:light;
  background:var(--background);
  color:var(--foreground);
  --background:oklch(0.988 0 0);
  --card:oklch(1 0 0);
  --muted:oklch(0.97 0 0);
  --foreground:#292929;
  --muted-foreground:#5D5D5D;
  --faint:#9E9E9E;
  --border:oklch(0.922 0 0);
  --input:oklch(0.922 0 0);
  --ring:oklch(0.708 0 0);
  --primary:#292929;
  --primary-lift:#3d3d3d;
  --primary-foreground:oklch(0.985 0 0);
  --brand-soft:oklch(0.88 0.068 45);
  --skeleton:oklch(0.94 0 0);
  --skeleton-sheen:oklch(0.98 0 0);
  --btn-shadow:0 0 0 1px rgb(0 0 0 / 0.06),0 1px 1px -0.5px rgb(0 0 0 / 0.05),0 2px 3px -1px rgb(0 0 0 / 0.04),0 4px 8px -4px rgb(0 0 0 / 0.04);
  --btn-shadow-hover:0 0 0 1px rgb(0 0 0 / 0.08),0 1px 1px -0.5px rgb(0 0 0 / 0.07),0 2px 3px -1px rgb(0 0 0 / 0.06),0 4px 8px -4px rgb(0 0 0 / 0.05);
  --btn-shadow-primary:inset 0 0 1px 1px rgb(255 255 255 / 0.08),0 1.5px 2px 0 rgb(0 0 0 / 0.15);
  /* Status tones follow the app's brand-bg/brand-ink shape: a wash to sit on
     and a darker cut of the same hue for the label, so each pill clears AA. */
  --tone-new-bg:oklch(0.96 0.022 50);
  --tone-new-ink:oklch(0.52 0.16 40);
  --tone-active-bg:oklch(0.96 0.035 85);
  --tone-active-ink:oklch(0.48 0.11 65);
  --tone-done-bg:oklch(0.95 0.032 163);
  --tone-done-ink:oklch(0.45 0.10 163);
  --danger:oklch(0.577 0.245 27.325);
}

/* The frame learns the app's theme by postMessage, which arrives a beat after
   first paint. The OS preference is the opening guess so a dark workspace
   never flashes a white panel; the explicit class then wins either way. */
@media (prefers-color-scheme:dark){.app:not(.light){color-scheme:dark}}
.app.dark{color-scheme:dark}

@media (prefers-color-scheme:dark){.app:not(.light){
  --background:oklch(0.205 0.004 75);
  --card:oklch(0.235 0.004 75);
  --muted:oklch(0.269 0.004 75);
  --foreground:oklch(0.985 0.003 75);
  --muted-foreground:oklch(0.708 0.006 75);
  --faint:oklch(0.556 0.005 75);
  --border:oklch(1 0 0 / 10%);
  --input:oklch(1 0 0 / 15%);
  --ring:oklch(0.556 0.005 75);
  --primary:oklch(0.922 0.003 75);
  --primary-lift:oklch(0.975 0.003 75);
  --primary-foreground:oklch(0.205 0.004 75);
  --brand-soft:oklch(0.5 0.1 45);
  --skeleton:oklch(0.269 0.004 75);
  --skeleton-sheen:oklch(0.31 0.004 75);
  --btn-shadow:inset 0 1px 0 0 rgb(255 255 255 / 0.02),inset 0 0 0 1px rgb(255 255 255 / 0.08),0 1px 2px -1px rgb(0 0 0 / 0.18),0 2px 4px 0 rgb(0 0 0 / 0.18);
  --btn-shadow-hover:inset 0 1px 0 0 rgb(255 255 255 / 0.04),inset 0 0 0 1px rgb(255 255 255 / 0.12),0 1px 2px -1px rgb(0 0 0 / 0.18),0 2px 4px 0 rgb(0 0 0 / 0.18);
  --btn-shadow-primary:0 1.5px 2px 0 rgb(0 0 0 / 0.4);
  --tone-new-bg:oklch(0.28 0.045 45);
  --tone-new-ink:oklch(0.72 0.19 40);
  --tone-active-bg:oklch(0.28 0.04 85);
  --tone-active-ink:oklch(0.83 0.19 84);
  --tone-done-bg:oklch(0.27 0.05 163);
  --tone-done-ink:oklch(0.77 0.18 163);
  --danger:oklch(0.704 0.191 22.216);
}}
.app.dark{
  --background:oklch(0.205 0.004 75);
  --card:oklch(0.235 0.004 75);
  --muted:oklch(0.269 0.004 75);
  --foreground:oklch(0.985 0.003 75);
  --muted-foreground:oklch(0.708 0.006 75);
  --faint:oklch(0.556 0.005 75);
  --border:oklch(1 0 0 / 10%);
  --input:oklch(1 0 0 / 15%);
  --ring:oklch(0.556 0.005 75);
  --primary:oklch(0.922 0.003 75);
  --primary-lift:oklch(0.975 0.003 75);
  --primary-foreground:oklch(0.205 0.004 75);
  --brand-soft:oklch(0.5 0.1 45);
  --skeleton:oklch(0.269 0.004 75);
  --skeleton-sheen:oklch(0.31 0.004 75);
  --btn-shadow:inset 0 1px 0 0 rgb(255 255 255 / 0.02),inset 0 0 0 1px rgb(255 255 255 / 0.08),0 1px 2px -1px rgb(0 0 0 / 0.18),0 2px 4px 0 rgb(0 0 0 / 0.18);
  --btn-shadow-hover:inset 0 1px 0 0 rgb(255 255 255 / 0.04),inset 0 0 0 1px rgb(255 255 255 / 0.12),0 1px 2px -1px rgb(0 0 0 / 0.18),0 2px 4px 0 rgb(0 0 0 / 0.18);
  --btn-shadow-primary:0 1.5px 2px 0 rgb(0 0 0 / 0.4);
  --tone-new-bg:oklch(0.28 0.045 45);
  --tone-new-ink:oklch(0.72 0.19 40);
  --tone-active-bg:oklch(0.28 0.04 85);
  --tone-active-ink:oklch(0.83 0.19 84);
  --tone-done-bg:oklch(0.27 0.05 163);
  --tone-done-ink:oklch(0.77 0.18 163);
  --danger:oklch(0.704 0.191 22.216);
}

.app,.app body{height:100%}
.app body{background:var(--background);color:var(--foreground);font-family:"Suisse Intl","Suisse Intl Full",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
.app main{display:flex;flex-direction:column;max-width:none;height:100%;margin:0;padding:0}
.app p{white-space:normal}
.app .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.app svg{flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* One bounded object, flush to the frame's edges: the same bordered container
   the sibling Activity views draw around their own master/detail. */
.shell{display:flex;flex:1;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:.625rem;background:var(--background)}

.rail{display:flex;flex-direction:column;width:100%;min-width:0;overflow-y:auto;overscroll-behavior:contain}
.detail{display:none;flex-direction:column;min-width:0;flex:1}
main[data-open] .rail{display:none}
main[data-open] .detail{display:flex}
@media(min-width:1024px){
  .rail{display:flex;width:20rem;flex:none;border-right:1px solid var(--border)}
  .detail{display:flex}
  main[data-open] .rail{display:flex}
}

.rows{list-style:none;margin:0;padding:0}
.rows li+li{border-top:1px solid var(--border)}
.row{display:flex;width:100%;height:auto;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.1875rem;padding:.6875rem 1rem;border:0;border-radius:0;background:none;box-shadow:none;font-size:inherit;font-weight:400;text-align:left;cursor:pointer;transition:background-color .15s ease-out}
.row[aria-current=true]{background:var(--muted)}
.row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--brand-soft)}
.row-line{display:flex;align-items:baseline;gap:.5rem}
/* The dot is the status; it sits on the name's baseline rather than above it,
   so a row costs two lines and reads as one sentence. */
.row-status{flex:none;align-self:center;display:flex}
.dot{width:.4375rem;height:.4375rem;border-radius:999px;background:var(--tone-new-ink)}
.dot-in_progress{background:var(--tone-active-ink)}
.dot-handled{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.row-title{flex:1;min-width:0;font-size:14px;font-weight:500;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-time{flex:none;font-size:11px;font-variant-numeric:tabular-nums;color:var(--faint)}
.row-sub{display:block;padding-left:.9375rem;font-size:12px;line-height:1.4;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-form{color:var(--faint)}
/* The value keeps the time's column so a rail of scores can be read down. */
.row-result{display:flex;gap:.75rem;justify-content:space-between}
.row-result-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.row-result-value{flex:none;font-weight:500;font-variant-numeric:tabular-nums;color:var(--foreground)}
/* Handled work has been dealt with: it stays readable and stops competing. */
.row-handled .row-title{font-weight:400;color:var(--muted-foreground)}
.row-handled .row-result-value{color:var(--muted-foreground)}

.status{display:inline-flex;align-items:center;gap:.375rem;height:1.25rem;padding:0 .5rem;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.status::before{content:"";width:.375rem;height:.375rem;border-radius:999px;background:currentColor}
.status-new{background:var(--tone-new-bg);color:var(--tone-new-ink)}
.status-in_progress{background:var(--tone-active-bg);color:var(--tone-active-ink)}
.status-handled{background:var(--tone-done-bg);color:var(--tone-done-ink)}

.rail-foot{display:flex;gap:.5rem;padding:.75rem 1rem;margin-top:auto;border-top:1px solid var(--border)}

.detail-head{display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.detail-identity{min-width:0;flex:1}
.detail-head h2{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-sub{margin:.0625rem 0 0;font-size:12px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-sub time{font-variant-numeric:tabular-nums}
.detail-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem}
@media(min-width:640px){.detail-body{padding:1.5rem}}
.detail-body{padding-bottom:2rem}
/* Answers are read, not scanned: they keep a measure instead of stretching to
   whatever width the workspace happens to have. */
.detail-body>*{max-width:48rem}
.detail-body>*+*{margin-top:1.5rem}
.detail h3{margin:0 0 .5rem;font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--muted-foreground)}

/* Status is three states and one press. */
.status-control{flex:none;display:flex;align-items:center;gap:.5rem}
.segmented{display:flex;padding:.125rem;gap:.125rem;border-radius:999px;background:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.app .segmented button.segment{height:1.625rem;padding:0 .625rem;border-radius:999px;background:none;box-shadow:none;font-size:12px;font-weight:500;color:var(--muted-foreground)}
.app .segmented button.segment.on{background:var(--card);color:var(--foreground);box-shadow:0 0 0 1px var(--border),0 1px 2px -1px rgb(0 0 0 / .12)}
.app .segmented button.segment.on.segment-new{color:var(--tone-new-ink)}
.app .segmented button.segment.on.segment-in_progress{color:var(--tone-active-ink)}
.app .segmented button.segment.on.segment-handled{color:var(--tone-done-ink)}
.app .segmented button.segment:active:not(:disabled){translate:none;scale:.97}
/* A phone has no room for a name and three decisions on one line: the
   control drops to its own row under the title rather than crushing it. */
@media(max-width:639px){
  .detail-head{flex-wrap:wrap}
  .status-control{flex:1 0 100%}
  .segmented{width:100%}
  .app .segmented button.segment{flex:1;padding:0 .25rem}
}
.feedback:empty{display:none}
.feedback .saved{margin:0;font-size:12px;color:var(--muted-foreground)}
.feedback .error{margin:0;font-size:12px}

.card{border:1px solid var(--border);border-radius:.625rem;background:var(--card);padding:.25rem 1rem}
.answers{margin:0}
.answer{display:grid;gap:.125rem;padding:.6875rem 0}
.answer+.answer{border-top:1px solid var(--border)}
.answer dt{margin:0;font-size:13px;font-weight:400;color:var(--muted-foreground)}
.answer dd{margin:0;font-size:14px;color:var(--foreground);white-space:pre-wrap;overflow-wrap:anywhere}
.answer dd strong{font-weight:500;font-variant-numeric:tabular-nums}
.answer dd .scale{color:var(--faint)}
@media(min-width:768px){.answer{grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1.5rem;align-items:baseline}}

.results{display:grid;gap:.75rem;margin:0}
@media(min-width:640px){.results{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}}
.result{border:1px solid var(--border);border-radius:.625rem;background:var(--card);padding:.875rem 1rem}
.result dt{margin:0;font-size:13px;font-weight:400;color:var(--muted-foreground)}
.result dd{margin:.125rem 0 0;font-size:24px;font-weight:500;letter-spacing:-.015em;line-height:1.15;font-variant-numeric:tabular-nums}
.result dd.interpretation{margin-top:.375rem;font-size:13px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--muted-foreground)}

/* Notes are one field: the box is the object, no card around it. */
.follow-up{display:grid;gap:.625rem}
.app select,.app textarea{width:100%;font-size:16px;line-height:1.45;border:1px solid var(--input);border-radius:.5rem;background:var(--background);color:var(--foreground);padding:.5rem .625rem}
.app textarea{min-height:6rem}
@media(min-width:768px){.app select,.app textarea{font-size:14px}}
.app select:focus-visible,.app textarea:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--brand-soft)}
.follow-up .actions{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;margin:0}
.read-only{margin:0;font-size:14px;color:var(--foreground);white-space:pre-wrap;overflow-wrap:anywhere}
.read-only.empty{color:var(--muted-foreground)}

.app button:not(.row){display:inline-flex;align-items:center;justify-content:center;gap:.375rem;height:2.25rem;padding:0 .75rem;border:1px solid transparent;border-radius:999px;background:var(--card);color:var(--foreground);font-size:14px;font-weight:500;box-shadow:var(--btn-shadow);cursor:pointer;transition:background-color .15s ease-out,box-shadow .15s ease-out,translate .15s ease-out,scale .15s ease-out}
.app button:not(.row):active:not(:disabled){translate:0 1px;scale:.96}
.app button:not(.row):focus-visible{outline:none;box-shadow:var(--btn-shadow),0 0 0 3px var(--brand-soft)}
.app button:not(.row):disabled{opacity:.5;cursor:default}
.app button.primary{background-image:linear-gradient(to bottom,var(--primary-lift),var(--primary));background-color:var(--primary);color:var(--primary-foreground);box-shadow:var(--btn-shadow-primary),0 0 0 1px var(--primary)}
.app button.primary:focus-visible{box-shadow:var(--btn-shadow-primary),0 0 0 1px var(--primary),0 0 0 4px var(--brand-soft)}
.app button.quiet{height:1.75rem;width:1.75rem;padding:0;background:none;box-shadow:none;color:var(--muted-foreground);margin-inline-start:-.25rem}
@media(min-width:1024px){.app button.back{display:none}}
@media(hover:hover){
  .row:hover{background:color-mix(in oklab,var(--muted) 60%,transparent)}
  .app button:not(.row):hover:not(:disabled){box-shadow:var(--btn-shadow-hover)}
  .app button.primary:hover:not(:disabled){background-image:linear-gradient(to bottom,var(--primary-lift),var(--primary-lift))}
  .app button.quiet:hover:not(:disabled){background:color-mix(in oklab,var(--foreground) 6%,transparent);box-shadow:none;color:var(--foreground)}
}

.placeholder{margin:auto;max-width:20rem;padding:1.5rem;text-align:center;font-size:13px;color:var(--muted-foreground)}
.placeholder svg{width:1.25rem;height:1.25rem;margin:0 auto .75rem;display:block}
.placeholder strong{display:block;font-size:14px;font-weight:500;color:var(--foreground);margin-bottom:.25rem}
.placeholder .actions{justify-content:center;margin-top:1rem}
.app .error{color:var(--danger)}

.skeleton{border-radius:.375rem;background:var(--skeleton);background-image:linear-gradient(90deg,transparent,var(--skeleton-sheen),transparent);background-size:200% 100%;background-repeat:no-repeat;animation:sheen 1.6s ease-in-out infinite}
.skeleton-rows{padding:.75rem 1rem;display:grid;gap:1.25rem}
.skeleton-row{display:grid;gap:.5rem}
@keyframes sheen{from{background-position:-100% 0}to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){
  .app *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}