/* How it works: the research flow as a track of steps, a player and a detail card. Brand tokens come from brand.css. */
@font-face{font-family:Orbitron;font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/orbitron-latin.woff2?v=team-1) format('woff2');}
:root{color-scheme:dark;--display:Orbitron,"Eurostile","Arial Black",sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--muted:#aeb8c3;--subtle:#74808d;--model:var(--brand-cyan);--rule:#8a99a8;--human:#f7b84b;--audit:#ff8a66;}
*{box-sizing:border-box;}
body{margin:0;background:var(--brand-ink);color:var(--brand-pale);font:15px/1.55 Inter,ui-sans-serif,system-ui,sans-serif;}
a{color:var(--brand-link);}
button{font:inherit;}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--brand-cyan);color:var(--brand-ink);padding:8px 12px;border-radius:6px;}
.skip-link:focus{left:8px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
main{max-width:1240px;margin:0 auto;padding:36px 24px 64px;}

.flow-heading{max-width:820px;}
.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--brand-cyan);font-weight:700;margin:0;}
h1{margin:10px 0 12px;font:800 clamp(22px,3.4vw,36px)/1.15 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#fff;text-wrap:balance;}
.intro{margin:0;color:var(--muted);max-width:70ch;font-size:16px;}

.flow-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}
.flow-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:48px;padding:9px 16px;border:1px solid var(--brand-border);border-radius:8px;background:transparent;color:var(--brand-pale);font-weight:600;cursor:pointer;text-align:left;}
.flow-tabs button span{font-size:12px;font-weight:400;color:var(--muted);}
.flow-tabs button[aria-selected="true"]{background:var(--brand-cyan);border-color:var(--brand-cyan);color:var(--brand-ink);}
.flow-tabs button[aria-selected="true"] span{color:var(--brand-ink);opacity:.8;}

.player{margin-top:18px;padding:18px 20px;background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:10px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 24px;align-items:center;}
.player-controls{display:flex;flex-wrap:wrap;gap:8px;}
.player-controls button{min-height:40px;padding:8px 14px;border:1px solid var(--brand-border);border-radius:6px;background:transparent;color:var(--brand-pale);font-weight:600;cursor:pointer;}
.player-controls button:hover:not(:disabled){border-color:var(--brand-cyan);color:#fff;}
.player-controls button:disabled{opacity:.4;cursor:default;}
.player-controls .primary{background:var(--brand-cyan);border-color:var(--brand-cyan);color:var(--brand-ink);min-width:130px;}
.player-controls .primary[aria-pressed="true"]{background:#fff;border-color:#fff;}
.player-now{min-width:0;}
.now-step{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-cyan);}
.now-agent{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--muted);font-size:14px;}
.now-agent strong{color:#fff;font:600 15px/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;}
.now-doing{margin:8px 0 0;color:#fff;font-size:16px;}
.now-example{margin:6px 0 0;color:var(--muted);font-size:14px;max-width:90ch;}
.now-example:empty{display:none;}
.player-progress{grid-column:1/-1;height:3px;background:var(--brand-surface-raised);border-radius:3px;overflow:hidden;}
.player-progress span{display:block;height:100%;width:0;background:var(--brand-cyan);transition:width .4s ease;}

.flow-track{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px;}
.flow-node{position:relative;min-width:0;}
.flow-node:not(:last-child)::after{content:"";position:absolute;top:50%;right:-12px;width:10px;height:2px;background:var(--brand-border);}
.flow-node[data-state="done"]:not(:last-child)::after{background:var(--brand-cyan);}
.flow-node button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;height:100%;min-height:150px;padding:14px 12px 12px;border:1px solid var(--brand-border);border-top:3px solid var(--rule);border-radius:8px;background:var(--brand-surface);color:var(--brand-pale);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s;}
.flow-node[data-kind="model"] button{border-top-color:var(--model);}
.flow-node[data-kind="human"] button{border-top-color:var(--human);}
.flow-node button:hover{border-color:var(--brand-cyan);}
.flow-node[data-state="active"] button{background:var(--brand-surface-raised);border-color:var(--brand-cyan);box-shadow:0 0 0 1px var(--brand-cyan),0 0 24px rgba(0,176,240,.25);transform:translateY(-3px);}
.flow-node[data-state="done"] button{opacity:.75;}
.flow-node button:focus-visible{outline:2px solid var(--brand-link);outline-offset:3px;}
.node-num{font:500 11px/1 var(--mono);color:var(--subtle);}
.node-step{font:600 14px/1.2 var(--display);letter-spacing:.07em;text-transform:uppercase;color:#fff;}
.node-agent{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--brand-pale);}
.node-engine{font-size:12px;color:var(--muted);line-height:1.35;}
.flow-node .audit-flag{position:absolute;top:10px;right:10px;}

.kind-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rule);flex:0 0 9px;}
.kind-dot[data-kind="model"]{background:var(--model);box-shadow:0 0 8px var(--model);}
.kind-dot[data-kind="human"]{background:var(--human);}
.flow-node[data-state="active"] .kind-dot[data-kind="model"]{animation:flow-pulse 1.2s ease-in-out infinite;}
@keyframes flow-pulse{50%{box-shadow:0 0 0 5px rgba(0,176,240,.25);}}
.audit-flag{display:inline-block;padding:3px 7px;border-radius:4px;background:rgba(255,138,102,.14);border:1px solid var(--audit);color:var(--audit);font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;}

.flow-detail{margin-top:22px;padding:22px 24px;background:var(--brand-surface);border:1px solid var(--brand-border);border-radius:10px;}
.detail-step{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-cyan);}
.flow-detail h2{margin:8px 0 4px;font:600 clamp(17px,2vw,21px)/1.25 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#fff;}
.detail-engine{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--muted);font-size:14px;}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px;}
.detail-grid h3{margin:0 0 6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--subtle);}
.detail-grid p{margin:0;font-size:14px;color:var(--brand-pale);}
.detail-audit{padding:12px 14px;border:1px solid var(--audit);border-radius:8px;background:rgba(255,138,102,.08);}
.detail-audit h3{color:var(--audit);}
.detail-audit[hidden]{display:none;}

.legend{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:18px;font-size:13px;color:var(--muted);}
.legend>span{display:inline-flex;align-items:center;gap:8px;}

/* All steps on one row on wide screens; four per row, then one per row, below that. */
@media(max-width:1180px){.flow-track{grid-template-columns:repeat(4,minmax(0,1fr));}.flow-node:nth-child(4n)::after{display:none;}}
@media(max-width:900px){.player{grid-template-columns:1fr;}.detail-grid{grid-template-columns:1fr;}}
@media(max-width:640px){main{padding:26px 16px 48px;}.flow-track{grid-template-columns:1fr;}.flow-node:nth-child(4n)::after{display:block;}.flow-node:not(:last-child)::after{top:auto;bottom:-12px;left:24px;right:auto;width:2px;height:10px;}.flow-node button{min-height:0;}}
@media(prefers-reduced-motion:reduce){.flow-node button,.player-progress span{transition:none;}.flow-node[data-state="active"] button{transform:none;}.flow-node[data-state="active"] .kind-dot[data-kind="model"]{animation:none;}}