/* Hallmark · macrostructure: Stat-Led · tone: technical · anchor hue: 259 (cool indigo)
 * genre: modern-minimal · theme: Console (house DESIGN-LAW tokens) · enrichment: none (typography only)
 * nav: N6 masthead (gated dashboard, no destinations) · footer: none (single-surface app)
 * pre-emit critique: P5 H5 E5 S5 R5 V4
 * contrast: pass (40-41) · honest: pass (46) · chrome: pass (47) · tokens: pass (48)
 * responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50-57)
 * nav: N6 · footer: none · slop: pass (42-45) · accent coverage: 0.44% of first viewport (measured)
 * fonts: self-hosted trio via @font-face in this file, served from studio.producehits.com
 *   (allowlisted in the console CSP font-src; ACAO:* verified) - no Google Fonts, no new families.
 * icons: hand-built inline SVG (24-grid, stroke 1.5) built with createElementNS - the shared
 *   PH.icon set lives on a different origin and is NOT loadable under this console's CSP.
 */

/* @tokens — console-local elevation ramp (house DESIGN-LAW values, cool indigo tint) @end-tokens */
@font-face{font-family:Geist;src:url(https://studio.producehits.com/_shared/fonts/geist-v5-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(https://studio.producehits.com/_shared/fonts/geist-v5-latin-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Geist;src:url(https://studio.producehits.com/_shared/fonts/geist-v5-latin-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Geist Mono';src:url(https://studio.producehits.com/_shared/fonts/geist-mono-v6-latin-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Bricolage;src:url(https://studio.producehits.com/_shared/fonts/bricolage-grotesque-v9-latin-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Bricolage;src:url(https://studio.producehits.com/_shared/fonts/bricolage-grotesque-v9-latin-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  color-scheme:dark;
  /* surfaces — elevation is LIGHTER */
  --bg:oklch(14.5% .021 258);
  --bg-2:oklch(17.5% .022 256);
  --surface:oklch(20.5% .024 255);
  --surface-2:oklch(23.5% .025 254);
  --surface-3:oklch(28% .027 253);
  /* ink */
  --text:#e9eff8;
  --muted:rgba(233,239,248,.80);
  --faint:rgba(233,239,248,.70);
  /* hairlines */
  --line:rgba(233,239,248,.09);
  --strong:rgba(233,239,248,.17);
  /* accent — one hue (259) for the console */
  --accent:oklch(72% .14 259);
  --accent-strong:oklch(63% .14 259);
  --accent-contrast:#080d16;
  --accent-wash:color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-wash-2:color-mix(in oklab, var(--accent) 20%, transparent);
  --accent-line:color-mix(in oklab, var(--accent) 45%, transparent);
  /* status */
  --ok:#34d97c;
  --warn:#f0b13e;
  --danger:#ff6b6b;
  /* spacing (4pt) */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:32px;--s8:40px;--s9:48px;
  /* radius */
  --r-xs:6px;--r-ctl:8px;--r-card:12px;--r-pill:999px;
  /* type */
  --font:Geist,system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --display:Bricolage,Geist,system-ui,sans-serif;
  /* motion */
  --t-hit:40ms;--t-fast:120ms;--t-med:220ms;--t-slow:420ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:13px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:var(--accent-contrast)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--s3);top:-100px;z-index:10;background:var(--surface-3);color:var(--text);border:1px solid var(--strong);border-radius:var(--r-ctl);padding:var(--s2) var(--s3);text-decoration:none;font-weight:600;transition:transform var(--t-fast) var(--ease-out)}
.skip:focus{top:var(--s3)}

/* header — N6 masthead: accent top strip + hairline bottom, two ends, no nav links */
.header{height:64px;border-top:2px solid var(--accent);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:0 clamp(16px,4vw,48px);background:var(--bg)}
.brand{display:flex;align-items:center;gap:var(--s3);min-width:0}
.tick{width:11px;height:11px;border-radius:2px;background:var(--accent);flex:none}
.brand-name{font:700 18px var(--display);letter-spacing:-.02em}
.brand-sub{font:13px var(--font);color:var(--muted);border-left:1px solid var(--strong);padding-left:var(--s3)}
.mode{font:11px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:inline-flex;align-items:center;gap:var(--s2);white-space:nowrap}
.mode::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

main{max-width:1280px;margin:auto;padding:var(--s8) clamp(16px,4vw,48px) var(--s9)}
.intro{margin-bottom:var(--s6)}
.eyebrow{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:0 0 var(--s3)}
h1{font:700 clamp(26px,4.4vw,34px)/1.1 var(--display);letter-spacing:-.02em;margin:0 0 var(--s3);overflow-wrap:anywhere;min-width:0}
.description{color:var(--muted);max-width:62ch;margin:0}

/* stat strip — one-second read: triage figure + supporting counts */
.stat-strip{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,2.5fr);gap:var(--s4);margin-bottom:var(--s5)}
.stat-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s3);min-width:0}
.stat-hero[hidden]{display:none}
.stat-figure{font:700 clamp(40px,7vw,54px)/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--text);display:flex;align-items:baseline;gap:var(--s2)}
.stat-figure .figure-label{font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:400}
.stat-qualifier{margin:0;color:var(--muted);font:13px var(--font)}
.stat-qualifier strong{color:var(--text);font-weight:600}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.stat-icon{color:var(--faint);display:inline-flex}
.stat-value{font:600 22px var(--mono);font-variant-numeric:tabular-nums;line-height:1.1;overflow-wrap:anywhere}
.stat-label{font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

/* auth */
.auth{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);max-width:600px;margin-bottom:var(--s5)}
.auth label{display:block;font-weight:600;margin-bottom:var(--s2)}
.auth-row{display:flex;gap:var(--s2)}
input{min-width:0;flex:1;background:var(--bg-2);color:var(--text);border:1px solid var(--strong);border-radius:var(--r-ctl);padding:0 var(--s3);height:44px;font:inherit}
input:focus{border-color:var(--accent)}
button{border:1px solid var(--strong);background:var(--surface-2);color:var(--text);border-radius:var(--r-ctl);padding:0 var(--s4);min-height:44px;cursor:pointer;font:600 13px var(--font);display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),transform var(--t-hit) var(--ease-out)}
#connect{background:var(--accent);color:var(--accent-contrast);border-color:var(--accent)}
button:hover:not(:disabled){background:var(--surface-3)}
#connect:hover:not(:disabled){background:var(--accent-strong);border-color:var(--accent-strong)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:not-allowed}
.auth p{color:var(--faint);margin:var(--s2) 0 0}

/* toolbar */
.toolbar{border-bottom:1px solid var(--line);display:flex;align-items:center;gap:var(--s2);padding-bottom:var(--s4);color:var(--muted);font-size:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.toolbar span{margin-right:auto}

/* status filter — segmented chips (data supplied, not decorative) */
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s5) 0 0}
.filters[hidden]{display:none}
.chip{min-height:36px;padding:0 var(--s3);border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--line);color:var(--muted);font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.chip:hover{background:var(--surface-3);color:var(--text)}
.chip .chip-count{font-variant-numeric:tabular-nums;color:var(--faint)}
.chip[aria-pressed="true"]{background:var(--surface-3);border-color:var(--strong);color:var(--text)}
.chip[aria-pressed="true"] .chip-dot{opacity:1}
.chip-dot{width:7px;height:7px;border-radius:50%;background:var(--state-c,var(--faint));opacity:.65;flex:none}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.error{background:var(--surface);border:1px solid var(--danger);padding:var(--s4);border-radius:var(--r-ctl);color:var(--text)}

/* sessions — status groups */
.sessions{margin-top:var(--s5)}
.group-head{display:flex;align-items:baseline;gap:var(--s3);width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:0 0 var(--s3);margin:var(--s6) 0 var(--s4);color:var(--text);cursor:pointer;min-height:44px}
.group:first-child .group-head{margin-top:0}
.group-head:hover{color:var(--text)}
.group-head .caret{color:var(--faint);flex:none;transition:transform var(--t-fast) var(--ease-out)}
.group[data-collapsed="true"] .group-head{margin-bottom:0}
.group[data-collapsed="true"] .caret{transform:rotate(-90deg)}
.group-title{font:700 16px var(--display);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:var(--s2)}
.group-title::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.group-count{font:11px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-left:auto}
.group-body{display:grid;gap:var(--s3)}
.group[data-collapsed="true"] .group-body{display:none}
h2{font:600 16px/1.3 var(--display);margin:0;overflow-wrap:anywhere;min-width:0}
h3{font:600 16px var(--display);margin:0}

/* card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4) var(--s5);min-width:0;transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.card:hover{border-color:var(--strong);background:var(--surface-2)}
.card[data-dim="true"]{opacity:.7}
.card[data-dim="true"]:hover{opacity:1}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.card-heading{min-width:0}
.title{color:var(--muted);margin:var(--s1) 0 0;overflow-wrap:anywhere;font-size:12px}
.card-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);color:var(--faint);font:11px var(--mono);font-variant-numeric:tabular-nums;margin:var(--s3) 0;min-width:0}
.card-meta span{min-width:0;overflow-wrap:anywhere;display:inline-flex;align-items:center;gap:var(--s1)}
.card-meta .dot-sep{color:var(--strong)}

/* status pill — shape + text + colour (never colour alone) */
.status{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid currentColor;border-radius:var(--r-pill);padding:var(--s1) var(--s3);font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;flex:none}
.status .status-mark{display:inline-flex}
.status .status-mark svg{display:block}
.running{color:var(--accent)}
.awaiting_you{color:var(--warn)}
.done{color:var(--ok)}
.dead{color:var(--faint)}
.breaker_open{color:var(--danger)}

/* details — mono data vs prose */
.details{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s3)}
.roles,.usage{margin:0;background:var(--bg-2);border:1px solid var(--line);padding:var(--s3) var(--s4);border-radius:var(--r-ctl);min-width:0}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s4)}
.role-group dt{display:block}
dt{font:10px var(--mono);color:var(--faint);text-transform:uppercase;letter-spacing:.1em}
dd{margin:var(--s1) 0 0;overflow-wrap:anywhere}
.roles dd{font:12px var(--mono);color:var(--text)}
.roles dd.is-unassigned{color:var(--faint)}
.usage{display:grid;gap:var(--s3)}
.usage-group{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);min-width:0}
.usage dt{flex:none}
.usage dd{font:13px var(--mono);font-variant-numeric:tabular-nums;margin:0;text-align:right;min-width:0}
.usage dd.is-muted{color:var(--muted)}
.summary{margin:var(--s4) 0 0;overflow-wrap:anywhere;color:var(--text)}
.excerpt{color:var(--muted);overflow-wrap:anywhere;margin:var(--s2) 0 0;font-size:12px;padding-left:var(--s3);border-left:2px solid var(--line)}
.task{border-left:2px solid var(--accent);padding-left:var(--s3);margin-top:var(--s4);overflow-wrap:anywhere}
.task-label{display:block;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:var(--s1)}
.task-text{color:var(--text)}

.empty{padding:var(--s8);border:1px solid var(--line);border-radius:var(--r-card);color:var(--muted);display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.empty .empty-tile{width:40px;height:40px;border-radius:var(--r-ctl);background:var(--accent-wash-2);color:var(--accent);display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);letter-spacing:.05em}
.empty-title{font:600 16px var(--display);color:var(--text)}

/* fades for keyed updates */
.fade{animation:fadeIn var(--t-med) var(--ease-out) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* dispatch (unchanged behaviour, restyled) */
.dispatch{border-top:1px solid var(--line);margin-top:var(--s4);padding-top:var(--s4);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.dispatch-note{margin:0;color:var(--faint);font:11px var(--mono)}
.dispatch-note[hidden]{display:none}
.dispatch-form{flex-basis:100%}
.dispatch-form{display:grid;gap:var(--s3);max-width:680px;margin-top:var(--s3)}
.dispatch-form[hidden]{display:none}
.dispatch-form label{display:grid;gap:var(--s1);color:var(--muted)}
.dispatch-form label[hidden]{display:none}
.dispatch-form select,.dispatch-form textarea{width:100%;min-height:44px;padding:var(--s2);border:1px solid var(--strong);border-radius:var(--r-ctl);background:var(--bg-2);color:var(--text);font:inherit}
.dispatch-form select:focus,.dispatch-form textarea:focus{border-color:var(--accent)}
.dispatch-form textarea{resize:vertical}
.dispatch-result{overflow-wrap:anywhere;font:12px var(--mono);color:var(--muted);margin:0}

@media(max-width:760px){
  main{padding-top:var(--s6)}
  .stat-strip{grid-template-columns:minmax(0,1fr)}
  .details{grid-template-columns:minmax(0,1fr)}
  .brand-sub{display:none}
}
@media(max-width:430px){
  .mode{font-size:10px}
  .auth-row{flex-direction:column}
  .stats{grid-template-columns:minmax(0,1fr)}
  .roles{grid-template-columns:minmax(0,1fr)}
  .card-head{flex-direction:column}
  .card-head .status{align-self:flex-start}
  .toolbar{flex-wrap:wrap}
  .toolbar span{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:150ms!important;animation-iteration-count:1!important;transition-duration:150ms!important}
  .fade{animation:fadeInReduced 150ms linear both}
  @keyframes fadeInReduced{to{opacity:1;transform:none}}
}