@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Public+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,600&display=swap');

/* ===========================================================
   THROUGHLINE — OBSERVATION DECK
   A console for watching autonomous agents read literature.

   Direction: deep-field dark, luminous data, glass instrument
   surfaces. The one light surface in the product is the
   manuscript sheet — the artifact you actually publish.

   Contrast measured against every surface:
     text  17.8 / 10.2 / 5.9   accents  5.1-10.1
     paper 16.0 /  8.6 / 5.3   buttons  6.2-7.1 with white
   =========================================================== */

:root{
  /* surfaces, deepest to highest */
  --void:#06080F;
  --hull:#0D111A;
  --bulk:#151B27;

  /* hairlines and edges */
  --line:#1F2839;
  --line2:#18202E;
  --edge:rgba(255,255,255,.06);
  --edge-lit:rgba(124,156,255,.22);

  /* text tiers */
  --t1:#EEF2FB;
  --t2:#AEB9D0;
  --t3:#8593AE;

  /* accents */
  --acc:#4D7CFE;
  --acc-ink:#7C9CFF;
  --acc-fill:#2F55D4;
  --acc-soft:rgba(77,124,254,.13);
  --acc-line:rgba(124,156,255,.34);
  --acc-glow:rgba(77,124,254,.30);

  --plasma:#A66BFF;
  --plasma-ink:#BC93FF;
  --plasma-fill:#6D28D9;

  --ok:#2DD4BF;   --ok-soft:rgba(45,212,191,.11);   --ok-line:rgba(45,212,191,.32);
  --warn:#F0B429; --warn-soft:rgba(240,180,41,.11); --warn-line:rgba(240,180,41,.32);
  --bad:#FF5C7A;  --bad-soft:rgba(255,92,122,.11);  --bad-line:rgba(255,92,122,.32);

  /* pipeline stages */
  --s-framer:#6E8BFF; --s-retriever:#38BDF8; --s-screener:#2DD4BF;
  --s-analyst:#F0B429; --s-synth:#A66BFF;    --s-verifier:#FF5C7A;

  /* manuscript sheet */
  --paper:#F7F5F1; --ink:#141A24; --ink2:#3E4757; --ink3:#5C6779; --ink-cite:#2A46B8;

  /* consumed by charts.js when it builds SVG fills */
  --card:#111725;

  --rad:10px; --rad-sm:7px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  font-size:13.5px;line-height:1.55;color:var(--t1);
  background:var(--void);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* ambient deep field, fixed, purely atmospheric */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(77,124,254,.16), transparent 60%),
    radial-gradient(760px 540px at 92% 4%, rgba(166,107,255,.11), transparent 62%),
    radial-gradient(1100px 700px at 60% 108%, rgba(45,212,191,.06), transparent 60%);
}
#root{position:relative;z-index:1}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dim{color:var(--t3)}
.small{font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}
a{color:var(--acc-ink);text-decoration-color:var(--acc-line);text-underline-offset:2px}
a:hover{color:var(--t1)}
::selection{background:rgba(77,124,254,.32);color:#fff}
:focus-visible{outline:2px solid var(--acc-ink);outline-offset:2px;border-radius:var(--rad-sm)}
[hidden]{display:none!important}

*{scrollbar-width:thin;scrollbar-color:#263044 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#263044;border-radius:6px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#33405C;background-clip:content-box}

/* ---------- shared type roles ---------- */
.eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.label{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin:16px 0 7px}
.hint{font-size:12.5px;color:var(--t3);line-height:1.6}
.note{font-size:13px;color:var(--t2);margin:0 0 15px;max-width:80ch;line-height:1.68}
.empty{font-size:13px;color:var(--t3);margin:8px 0;max-width:70ch;line-height:1.7}

/* ===========================================================
   BOOT + TOAST
   =========================================================== */
#boot{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--void);color:var(--t2);font-family:'JetBrains Mono',monospace;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase}
#boot i{width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--acc-ink),transparent);
  animation:scan 1.4s infinite var(--ease)}
@keyframes scan{0%{opacity:.2;transform:scaleX(.4)}50%{opacity:1;transform:scaleX(1)}100%{opacity:.2;transform:scaleX(.4)}}

#toast{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:9px}
.toast{background:rgba(21,27,39,.92);backdrop-filter:blur(18px);color:var(--t1);
  border:1px solid var(--line);border-left:2px solid var(--acc);border-radius:var(--rad-sm);
  padding:12px 16px;font-size:13px;max-width:360px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);animation:rise .22s var(--ease)}
.toast.err{border-left-color:var(--bad)}
.toast.ok{border-left-color:var(--ok)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ===========================================================
   CONTROLS
   =========================================================== */
.input,.textarea,.select{
  width:100%;border:1px solid var(--line);background:rgba(6,8,15,.55);border-radius:var(--rad-sm);
  padding:10px 12px;font:inherit;font-size:13.5px;color:var(--t1);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)}
.input::placeholder,.textarea::placeholder{color:#63708A;opacity:1}
.input:hover,.textarea:hover,.select:hover{border-color:#2A3448}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--acc);
  background:rgba(6,8,15,.8);box-shadow:0 0 0 3px var(--acc-soft),0 0 22px -6px var(--acc-glow)}
.select{appearance:none;padding-right:32px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--t3) 50%),linear-gradient(135deg,var(--t3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;
  background-size:5px 5px;background-repeat:no-repeat}
.select option{background:var(--bulk);color:var(--t1)}
.input.sm{padding:7px 10px;font-size:13px}
.textarea{resize:vertical;line-height:1.6}

.btn{border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:var(--rad-sm);
  padding:8px 15px;font:inherit;font-size:13px;font-weight:600;color:var(--t1);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap;
  transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)}
.btn:hover{background:rgba(255,255,255,.075);border-color:#2E3A52;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.36;cursor:not-allowed;transform:none}
.btn.primary{background:linear-gradient(135deg,var(--acc-fill),var(--plasma-fill));
  border-color:transparent;color:#fff;box-shadow:0 3px 18px -4px var(--acc-glow)}
.btn.primary:hover{box-shadow:0 8px 28px -6px var(--acc-glow);filter:brightness(1.12)}
.btn.danger{border-color:var(--bad-line);color:var(--bad);background:var(--bad-soft)}
.btn.danger:hover{background:var(--bad);border-color:var(--bad);color:var(--void)}
.btn.good{border-color:var(--ok-line);color:var(--ok);background:var(--ok-soft)}
.btn.good:hover{background:var(--ok);border-color:var(--ok);color:var(--void)}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.block{width:100%;justify-content:center;padding:12px}
.btn.dark{background:rgba(255,255,255,.035)}
.iconbtn{border:0;background:none;color:var(--t3);cursor:pointer;font-size:13px;
  padding:5px 8px;border-radius:var(--rad-sm);line-height:1;transition:color .14s var(--ease),background .14s var(--ease)}
.iconbtn:hover{color:var(--bad);background:var(--bad-soft)}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--acc-ink);cursor:pointer;text-align:left}
.linkish:hover{color:var(--t1)}
.linkbtn{display:block;width:100%;margin-top:14px;background:none;border:0;font:inherit;
  font-size:12.5px;color:var(--acc-ink);cursor:pointer;padding:5px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--acc-line)}
.linkbtn:hover{color:var(--t1)}

.row{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.row.gap-lg{gap:18px}
.actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.field{margin-bottom:2px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px}

/* ===========================================================
   AUTH
   =========================================================== */
.auth{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:100vh}
.auth-side{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;
  border-right:1px solid var(--line);position:relative;overflow:hidden}
.auth-side::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:52px 52px;opacity:.5;
  -webkit-mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent);
  mask-image:radial-gradient(70% 60% at 30% 40%,#000,transparent)}
.auth-side>*{position:relative;z-index:1}
.brandline{display:flex;align-items:center;gap:15px}
.logo{width:40px;height:40px;flex:0 0 40px;border-radius:11px;
  background:linear-gradient(140deg,var(--acc),var(--plasma));color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 6px 26px -6px var(--acc-glow),inset 0 1px 0 rgba(255,255,255,.3)}
.wordmark{font-family:'Instrument Sans',sans-serif;font-weight:600;font-size:15px;letter-spacing:.24em}
.wordmark.sm{font-size:12.5px;letter-spacing:.2em}
.wordmark-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t3);
  margin-top:3px;letter-spacing:.06em}
.auth-lede{max-width:50ch;font-size:15.5px;line-height:1.72;color:var(--t2);margin:36px 0 0}
.auth-spec{margin:34px 0 0;border-top:1px solid var(--line)}
.auth-spec div{display:grid;grid-template-columns:190px 1fr;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line2);align-items:baseline}
.auth-spec b{font-family:'Instrument Sans',sans-serif;font-size:13px;font-weight:500;color:var(--t1)}
.auth-spec span{font-size:12.5px;color:var(--t3)}
.auth-main{display:flex;align-items:center;justify-content:center;padding:48px 44px}
.auth-form{width:100%;max-width:378px}
.auth-form h1{font-family:'Instrument Sans',sans-serif;font-size:25px;font-weight:600;
  letter-spacing:-.02em;margin:0 0 22px;line-height:1.2}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:8px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:10px 0;margin-right:26px;
  font:inherit;font-weight:600;color:var(--t3);cursor:pointer;transition:color .16s var(--ease)}
.tab:hover{color:var(--t1)}
.tab.on{color:var(--t1);border-bottom-color:var(--acc)}
.formerr{margin-top:16px;font-size:12.5px;color:var(--bad);background:var(--bad-soft);
  border:1px solid var(--bad-line);border-radius:var(--rad-sm);padding:10px 13px}
.callout{margin-top:26px;font-size:12.5px;line-height:1.68;color:var(--t2);
  background:var(--warn-soft);border:1px solid var(--warn-line);
  border-radius:var(--rad-sm);padding:13px 15px}
.callout b{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--warn);margin-bottom:5px}
.callout.inline{margin:0 0 16px}
.callout.info{background:var(--acc-soft);border-color:var(--acc-line)}
.callout.info b{color:var(--acc-ink)}

/* ===========================================================
   APP SHELL
   =========================================================== */
.app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}
.frame{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.scroll{flex:1;overflow:auto}
.page{padding:24px 26px 64px;max-width:1460px;animation:enter .34s var(--ease)}
@keyframes enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- nav rail ---------- */
.nav{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
  background:linear-gradient(180deg,rgba(13,17,26,.94),rgba(6,8,15,.96));
  backdrop-filter:blur(22px);border-right:1px solid var(--line)}
.nav-brand{display:flex;align-items:center;gap:12px;padding:17px 16px 16px;border-bottom:1px solid var(--line2)}
.nav-brand .logo{width:32px;height:32px;flex:0 0 32px;border-radius:9px;font-size:12px}
.nav-proj{padding:13px}
.nav-proj{border-bottom:1px solid var(--line2)}
.nav-proj .lbl{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:7px}
.nav-proj select{width:100%;background:rgba(6,8,15,.6);border:1px solid var(--line);color:var(--t1);
  border-radius:var(--rad-sm);padding:8px 10px;font:inherit;font-size:12.5px;cursor:pointer}
.nav-proj select:hover{border-color:#2A3448}
.nav-scroll{flex:1;overflow-y:auto;padding:14px 10px}
.nav-group{margin-bottom:20px}
.nav-head{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#5E6A82;padding:0 9px 8px}
.navitem{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:7px 9px;border-radius:var(--rad-sm);font:inherit;font-size:12.8px;
  color:var(--t2);cursor:pointer;text-align:left;position:relative;
  transition:background .15s var(--ease),color .15s var(--ease)}
.navitem:hover{background:rgba(255,255,255,.045);color:var(--t1)}
.navitem.on{background:linear-gradient(90deg,var(--acc-soft),transparent);color:#fff;font-weight:600}
.navitem.on::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:2px;
  border-radius:2px;background:var(--acc);box-shadow:0 0 12px var(--acc-glow)}
.navitem .ic{flex:0 0 15px;font-size:11px;color:var(--t3);text-align:center;transition:color .15s var(--ease)}
.navitem.on .ic{color:var(--acc-ink)}
.navitem .txt{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navitem .badge{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#5E6A82}
.navitem.on .badge{color:var(--acc-ink)}
.nav-user{display:flex;align-items:center;gap:10px;padding:12px 13px;border-top:1px solid var(--line2)}
.avatar{width:30px;height:30px;flex:0 0 30px;border-radius:9px;
  background:linear-gradient(140deg,rgba(77,124,254,.3),rgba(166,107,255,.3));
  border:1px solid var(--acc-line);color:var(--t1);display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600}
.nav-user .b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nav-user .b .nm{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roletag{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--t3)}
.roletag.admin{color:var(--warn)}
.nav-user .iconbtn{color:var(--t3)}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;gap:16px;padding:0 22px;height:58px;flex:0 0 58px;
  background:rgba(6,8,15,.82);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.navtoggle{display:none;color:var(--t2);font-size:17px}
.top-title{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.crumb{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.top-sub{font-family:'Instrument Sans',sans-serif;font-size:14px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.top-right{display:flex;align-items:center;gap:11px}
.meter{display:flex;align-items:baseline;gap:6px;padding:5px 11px;
  border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.03)}
.meter b{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--acc-ink)}
.meter span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--t3)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t3);
  max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.status i{width:7px;height:7px;border-radius:50%;background:#39445E;flex:0 0 7px}
.status.run{color:var(--t1)}
.status.run i{background:var(--ok);animation:ping 1.6s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}70%{box-shadow:0 0 0 7px rgba(45,212,191,0)}100%{box-shadow:0 0 0 0 rgba(45,212,191,0)}}

/* ===========================================================
   PANELS
   =========================================================== */
.panel{background:linear-gradient(180deg,rgba(17,23,37,.90),rgba(13,17,26,.86));
  border:1px solid var(--line);border-radius:var(--rad);
  margin-bottom:18px;box-shadow:inset 0 1px 0 var(--edge),0 14px 40px -28px rgba(0,0,0,.9)}
.panel.review{border-color:var(--acc-line);box-shadow:inset 0 1px 0 var(--edge-lit),0 0 34px -20px var(--acc-glow)}
.panel.locked{border-color:var(--ok-line)}
.panel-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:15px 19px;border-bottom:1px solid var(--line2)}
.panel-h h2{font-family:'Instrument Sans',sans-serif;font-size:15px;font-weight:600;margin:0;letter-spacing:-.015em}
.panel-a{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.panel-b{padding:19px}
.panel-b.flush{padding:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.grid2>.panel,.grid3>.panel{margin-bottom:0}

/* ---------- stat readouts ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:18px}
.stat{position:relative;background:linear-gradient(180deg,rgba(17,23,37,.90),rgba(13,17,26,.85));
  border:1px solid var(--line);border-radius:var(--rad);
  padding:16px 17px 17px;display:flex;flex-direction:column;gap:6px;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--edge)}
.stat::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--acc),transparent 72%);opacity:.55}
.stat .l{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.stat .v{font-family:'Instrument Sans',sans-serif;font-size:29px;font-weight:600;letter-spacing:-.035em;
  line-height:1.05;color:var(--t1)}
.stat .n{font-size:11.5px;color:var(--t3)}
.stat .n.up{color:var(--ok)}
.stat .n.down{color:var(--bad)}

/* ---------- next-step banner ---------- */
.nextcard{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  position:relative;overflow:hidden;border-radius:var(--rad);padding:19px 22px;margin-bottom:18px;
  background:linear-gradient(120deg,rgba(47,85,212,.30),rgba(109,40,217,.24) 55%,rgba(17,23,37,.86));
  border:1px solid var(--acc-line);box-shadow:inset 0 1px 0 var(--edge-lit),0 0 44px -26px var(--acc-glow)}
.nextcard::after{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(180,200,255,.09),transparent);
  animation:sweep 5.5s infinite var(--ease)}
@keyframes sweep{0%{left:-40%}55%{left:110%}100%{left:110%}}
.nextcard-b{min-width:0;flex:1;position:relative;z-index:1}
.nextcard-e{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:7px}
.nextcard h2{font-family:'Instrument Sans',sans-serif;font-size:18px;font-weight:600;margin:0 0 6px;
  letter-spacing:-.02em;color:#fff}
.nextcard p{margin:0;font-size:13px;line-height:1.68;color:var(--t2);max-width:76ch}
.nextcard-a{display:flex;gap:9px;flex-wrap:wrap;flex-shrink:0;position:relative;z-index:1}

/* ===========================================================
   AUTOPILOT — the signature surface.
   Eleven stages hang off a luminous spine; a light travels down
   it while agents work, so the pipeline reads as in flight.
   =========================================================== */
.autopanel{position:relative;border-color:var(--acc-line);
  background:linear-gradient(155deg,rgba(47,85,212,.22),rgba(17,23,37,.90) 46%)}
.autopanel::before,.autopanel::after{content:'';position:absolute;width:16px;height:16px;pointer-events:none}
.autopanel::before{top:-1px;left:-1px;border-top:1.5px solid var(--acc);border-left:1.5px solid var(--acc);
  border-top-left-radius:var(--rad)}
.autopanel::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--plasma);border-right:1.5px solid var(--plasma);
  border-bottom-right-radius:var(--rad)}
.autoh1{font-family:'Instrument Sans',sans-serif;font-size:27px;font-weight:600;letter-spacing:-.035em;
  margin:4px 0 12px;line-height:1.15}
.autolede{font-size:14.5px;line-height:1.72;color:var(--t2);max-width:84ch;margin:0 0 8px}
.autoq{font-size:15.5px;line-height:1.6}
.autogo{padding:12px 24px;font-size:14px}

#autolist{position:relative;padding-left:2px}
#autolist::before{content:'';position:absolute;left:13px;top:14px;bottom:14px;width:1.5px;
  background:linear-gradient(180deg,var(--line),#2A3448 12%,#2A3448 88%,var(--line));border-radius:2px}
#autolist:has(.is-run)::after{content:'';position:absolute;left:13px;width:1.5px;height:70px;
  border-radius:2px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--acc-ink),var(--plasma-ink),transparent);
  animation:spine 2.6s infinite linear}
@keyframes spine{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

.autorow{position:relative;display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;
  padding:11px 12px 11px 0;border-bottom:1px solid var(--line2);border-radius:var(--rad-sm);
  transition:background .2s var(--ease)}
.autorow:last-child{border-bottom:0}
.autodot{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--hull);
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t3);
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)}
.autorow.is-ok .autodot{background:var(--ok);border-color:var(--ok);color:var(--void);font-weight:600;
  box-shadow:0 0 18px -3px rgba(45,212,191,.6)}
.autorow.is-skip .autodot{border-color:#2A3448;color:var(--t3)}
.autorow.is-err .autodot{background:var(--bad);border-color:var(--bad);color:var(--void);font-weight:700;
  box-shadow:0 0 18px -3px rgba(255,92,122,.6)}
.autorow.is-run .autodot{border-color:var(--acc);background:rgba(77,124,254,.14);
  box-shadow:0 0 0 4px rgba(77,124,254,.10),0 0 22px -4px var(--acc-glow)}
.autorow.is-run .autodot::after{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--acc-ink);animation:corepulse 1.3s infinite var(--ease)}
@keyframes corepulse{0%,100%{transform:scale(.62);opacity:.55}50%{transform:scale(1);opacity:1}}
.autorow.is-run{background:linear-gradient(90deg,rgba(77,124,254,.09),transparent 62%)}
.autorow.is-run::after{content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:var(--rad-sm);
  background:linear-gradient(90deg,transparent,rgba(124,156,255,.10),transparent);
  background-size:38% 100%;background-repeat:no-repeat;animation:rowsweep 2.1s infinite var(--ease)}
@keyframes rowsweep{0%{background-position:-40% 0}100%{background-position:140% 0}}
.autob{min-width:0;display:flex;flex-direction:column;gap:3px}
.autol{font-family:'Instrument Sans',sans-serif;font-size:13.5px;font-weight:500;color:var(--t3);
  transition:color .2s var(--ease)}
.autorow.is-ok .autol,.autorow.is-run .autol,.autorow.is-err .autol{color:var(--t1)}
.autod{font-size:12px;color:var(--t3);line-height:1.5}
.autorow.is-run .autod{color:var(--acc-ink)}
.autorow.is-err .autod{color:var(--bad)}
.autos{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t3)}
.autorow.is-ok .autos{color:var(--ok)}
.autorow.is-run .autos{color:var(--acc-ink)}
.autorow.is-err .autos{color:var(--bad)}

/* ===========================================================
   TAGS, CHIPS, PILLS
   =========================================================== */
.tag{display:inline-flex;align-items:center;font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:500;letter-spacing:.05em;border:1px solid var(--line);border-radius:99px;
  padding:2px 9px;color:var(--t2);white-space:nowrap;background:rgba(255,255,255,.03)}
.tag.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-soft)}
.tag.err{color:var(--bad);border-color:var(--bad-line);background:var(--bad-soft)}
.tag.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
.tag.acc{color:var(--acc-ink);border-color:var(--acc-line);background:var(--acc-soft)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);border-radius:99px;padding:6px 12px;font:inherit;font-size:12.5px;
  color:var(--t2);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.chip .mono{font-size:10.5px;color:var(--t3)}
.chip:hover{border-color:#2E3A52;color:var(--t1)}
.chip.on{background:var(--acc-soft);border-color:var(--acc-line);color:var(--t1)}
.chip.on .mono{color:var(--acc-ink)}
.pill-nav{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap}
.pill-nav button{background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px;
  font:inherit;font-size:12.8px;color:var(--t3);cursor:pointer;transition:color .15s var(--ease)}
.pill-nav button:hover{color:var(--t1)}
.pill-nav button.on{color:var(--t1);border-bottom-color:var(--acc);font-weight:600}
.cite{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;
  border:1px solid var(--acc-line);color:var(--acc-ink);background:var(--acc-soft);
  border-radius:5px;padding:1px 6px;cursor:pointer;margin:0 1px;
  transition:background .14s var(--ease),color .14s var(--ease),box-shadow .14s var(--ease)}
.cite:hover{background:var(--acc);border-color:var(--acc);color:#fff;box-shadow:0 0 14px -3px var(--acc-glow)}

/* ===========================================================
   TABLES + SOURCE ROWS
   =========================================================== */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t3);text-align:left;padding:10px 13px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--line2);vertical-align:top;font-size:13px;color:var(--t2)}
.tbl tbody tr{transition:background .14s var(--ease)}
.tbl tbody tr:hover{background:rgba(255,255,255,.028)}
.tbl .right,.tbl th.right{text-align:right}
.tbl .t-main{font-weight:600;color:var(--t1)}
.tbl .t-sub{display:block;font-size:11.5px;color:var(--t3);margin-top:3px}
.tbl-wrap{overflow-x:auto}

.srcrow{border-bottom:1px solid var(--line2);transition:background .14s var(--ease)}
.srcrow:hover{background:rgba(255,255,255,.028)}
.srcrow .head{display:grid;grid-template-columns:56px minmax(0,1fr) 92px 122px 122px;gap:13px;
  align-items:center;padding:12px 17px}
.srcrow .t{display:block;font-size:13px;font-weight:600;line-height:1.45;color:var(--t1)}
.srcrow .linkish:hover .t{color:var(--acc-ink)}
.srcrow .m{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--t3);margin-top:4px;
  overflow:hidden;white-space:nowrap}
.srcrow.excluded .t{color:var(--t3);text-decoration:line-through;text-decoration-color:#39445E}
.srcrow.excluded .m{color:#5E6A82}
.srcrow .exp{padding:0 17px 18px 73px}
.abs{font-size:13px;line-height:1.72;color:var(--t2);margin:0 0 14px;max-width:92ch}
.check{width:19px;height:19px;border:1.5px solid #39445E;background:rgba(6,8,15,.5);
  border-radius:5px;cursor:pointer;font-size:11px;line-height:1;color:#fff;padding:0;
  transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}
.check:hover{border-color:var(--acc)}
.check.on{background:var(--acc);border-color:var(--acc);box-shadow:0 0 14px -3px var(--acc-glow)}

.kv{margin-bottom:12px}
.kv .k{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.kv p,.kv ul{margin:0;font-size:13px;line-height:1.68;color:var(--t2)}
.kv ul{padding-left:16px}
.kv li{margin-bottom:4px}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}

.crit{display:flex;align-items:flex-start;gap:11px;padding:10px 0;border-bottom:1px solid var(--line2)}
.crit:last-child{border-bottom:0}
.crit .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t3);flex:0 0 26px;padding-top:3px}
.crit .txt{flex:1;font-size:13px;color:var(--t2);line-height:1.65}
.crit .txt[contenteditable]:focus{outline:none;color:var(--t1);box-shadow:0 1px 0 var(--acc);padding-bottom:2px}
.editlist{display:grid;gap:6px}
.editrow{display:flex;align-items:center;gap:8px}
.editrow .n{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t3);width:17px;flex:0 0 17px}

/* ---------- progress ---------- */
.progbar{height:6px;background:rgba(255,255,255,.05);border-radius:99px;overflow:hidden;
  border:1px solid var(--line2)}
.progbar i{display:block;height:100%;border-radius:99px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--acc),var(--plasma));
  box-shadow:0 0 16px -2px var(--acc-glow);transition:width .5s var(--ease)}
.progbar i::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
  background-size:44% 100%;background-repeat:no-repeat;animation:rowsweep 1.9s infinite linear}
.proglab{display:flex;justify-content:space-between;font-size:12.5px;color:var(--t3);margin-top:9px}

/* ---------- timeline ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:66px 16px minmax(0,1fr);gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line2);align-items:baseline}
.timeline li:last-child{border-bottom:0}
.timeline .ts{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t3)}
.timeline .pip{width:8px;height:8px;border-radius:50%;background:var(--t3);margin-top:5px;
  box-shadow:0 0 0 3px rgba(255,255,255,.03)}
.timeline .pip.agent{background:var(--plasma);box-shadow:0 0 10px -1px rgba(166,107,255,.7)}
.timeline .pip.human{background:var(--acc);box-shadow:0 0 10px -1px var(--acc-glow)}
.timeline .pip.system{background:#4A566E}
.timeline .body{min-width:0}
.timeline .sum{font-size:13px;color:var(--t1)}
.timeline .meta{font-size:11.5px;color:var(--t3);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- facets ---------- */
.facets{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}
.facet{border-left:2px solid var(--line);padding-left:14px}
.facet.sup{border-left-color:var(--ok)}
.facet.con{border-left-color:var(--bad)}
.facet.gap{border-left-color:var(--warn)}
.facet .ft{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px}
.facet.sup .ft{color:var(--ok)}
.facet.con .ft{color:var(--bad)}
.facet.gap .ft{color:var(--warn)}
.facet ul{margin:0;padding-left:16px;font-size:12.5px;line-height:1.68;color:var(--t2)}
.facet li{margin-bottom:6px}

/* ===========================================================
   MANUSCRIPT — the one light surface in the product.
   Everything else is instrumentation; this is the artifact.
   =========================================================== */
.doc{max-width:74ch;margin:0 auto;padding:44px 48px;background:var(--paper);color:var(--ink);
  border-radius:var(--rad);box-shadow:0 26px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05)}
.doc h1{font-family:'Newsreader',Georgia,serif;font-size:30px;font-weight:600;line-height:1.24;
  margin:0 0 28px;color:var(--ink);letter-spacing:-.015em}
.doc h2{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink3);margin:0 0 14px;
  border-bottom:1px solid rgba(20,26,36,.14);padding-bottom:8px}
.doc p{font-family:'Newsreader',Georgia,serif;font-size:17px;line-height:1.76;margin:0 0 15px;color:var(--ink)}
.doc section{margin-bottom:30px}
.doc .cite{background:rgba(42,70,184,.09);border-color:rgba(42,70,184,.28);color:var(--ink-cite)}
.doc .cite:hover{background:var(--ink-cite);border-color:var(--ink-cite);color:var(--paper);box-shadow:none}
.doc .refs{border-top:1px solid rgba(20,26,36,.14);padding-top:20px}
.doc .refs li{color:var(--ink2);font-size:15px}
.doc .refs .sid{color:var(--ink-cite)}
.doc .refs a{color:var(--ink-cite)}
.refs ol{list-style:none;margin:0;padding:0}
.refs li{font-family:'Newsreader',Georgia,serif;font-size:14.5px;line-height:1.65;margin-bottom:10px;
  padding-left:54px;text-indent:-54px;color:var(--t2)}
.refs .sid{font-family:'JetBrains Mono',monospace;display:inline-block;width:46px;font-size:11px;
  font-weight:500;color:var(--acc-ink)}

/* ===========================================================
   CHARTS
   =========================================================== */
.tlc{width:100%;height:auto;display:block;overflow:visible}
.tlc-ax{font-family:'JetBrains Mono',monospace;font-size:9.5px;fill:var(--t3)}
.tlc-val{font-family:'JetBrains Mono',monospace;font-size:9.5px;fill:var(--t2)}
.tlc-lbl{font-family:'Public Sans',sans-serif;font-size:11px;fill:var(--t1)}
.tlc-big{font-family:'Instrument Sans',sans-serif;font-size:20px;font-weight:600;fill:var(--t1)}
.tlc-pt{font-family:'Instrument Sans',sans-serif;font-size:11.5px;font-weight:600;fill:var(--t1)}
.tlc-pl{font-family:'JetBrains Mono',monospace;font-size:10.5px;fill:var(--t2)}
.tlc-empty{font-size:12.5px;color:var(--t3);margin:16px 0;text-align:center}
.tlc-bars{list-style:none;margin:0;padding:0}
.tlc-bars li{display:grid;grid-template-columns:minmax(90px,172px) minmax(0,1fr) 54px;
  align-items:center;gap:12px;padding:6px 0}
.tlc-bars-l{font-size:12.5px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlc-bars-t{height:9px;background:rgba(255,255,255,.05);border-radius:99px;display:block;overflow:hidden}
.tlc-bars-f{display:block;height:100%;border-radius:99px;transition:width .5s var(--ease)}
.tlc-bars-n{font-family:'JetBrains Mono',monospace;font-size:11.5px;text-align:right;color:var(--t2)}
.tlc-donut{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.tlc-keys{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.tlc-key{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t2)}
.tlc-key i{width:9px;height:9px;border-radius:3px;display:inline-block}
.tlc-key b{font-family:'JetBrains Mono',monospace;color:var(--t3);font-weight:500}
.tlc-ring{display:flex;flex-direction:column;align-items:center;gap:9px}
.tlc-ring-l{font-size:11.5px;color:var(--t3);text-align:center}
.tlc-stack{display:flex;height:12px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.05)}
.tlc-stack span{display:block;height:100%}
.tlc-hm-wrap{overflow-x:auto}
.tlc-hm{border-collapse:collapse;font-size:12px}
.tlc-hm th{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t3);padding:6px 8px;text-align:center}
.tlc-hm th span{display:inline-block;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tlc-hm-row{text-align:left!important;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--t2)!important;text-transform:none!important;font-family:'Public Sans',sans-serif!important;
  font-size:12px!important;letter-spacing:0!important}
.tlc-hm td{padding:0;text-align:center;border:1px solid var(--hull);min-width:38px;height:31px;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--t2)}
.tlc-hm td span.is-hi{color:#fff}
.tlc-rb{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;color:var(--void);font-weight:700;font-size:12px}
.tlc-forest{min-width:640px}
.tlc-prisma{min-width:660px}


/* ===========================================================
   TYPOGRAPHY + ICONS
   Four faces, four jobs:
     Instrument Sans  headings, readouts, controls
     Public Sans      paragraphs, tables, abstracts
     JetBrains Mono   ids, counts, timestamps
     Newsreader       the manuscript sheet only

   Every step is larger than the first pass. The uppercase
   micro-labels moved most: they were 9.5-10px at .20em
   tracking, small and stretched at once, which is the worst
   combination for legibility.
   =========================================================== */
body{font-family:'Public Sans',ui-sans-serif,system-ui,sans-serif;font-size:14.5px;line-height:1.6}

.wordmark,.panel-h h2,.stat .v,.autoh1,.auth-form h1,.nextcard h2,.top-sub,
.autol,.auth-spec b,.tlc-big,.tlc-pt,.navitem,.btn,.chip,.tab,.pill-nav button{
  font-family:'Instrument Sans',ui-sans-serif,system-ui,sans-serif}

/* display scale */
.panel-h h2{font-size:17px;font-weight:600;letter-spacing:-.018em}
.stat .v{font-size:34px;font-weight:600;letter-spacing:-.03em}
.autoh1{font-size:31px;letter-spacing:-.03em;line-height:1.14}
.auth-form h1{font-size:27px;letter-spacing:-.022em}
.nextcard h2{font-size:19.5px;letter-spacing:-.018em}
.top-sub{font-size:15px;font-weight:600}
.doc h1{font-size:32px}

/* uppercase micro-labels: bigger, and no longer stretched */
.eyebrow{font-size:11px;letter-spacing:.15em}
.label{font-size:11px;letter-spacing:.13em;margin:18px 0 8px}
.crumb{font-size:10.5px;letter-spacing:.16em}
.nav-head{font-size:10.5px;letter-spacing:.16em;padding:0 10px 9px}
.tbl th{font-size:11px;letter-spacing:.13em;padding:12px 14px}
.kv .k{font-size:10.5px;letter-spacing:.14em}
.facet .ft{font-size:10.5px;letter-spacing:.14em}
.autos{font-size:10px;letter-spacing:.16em}
.nav-proj .lbl{font-size:10px;letter-spacing:.16em}
.roletag{font-size:10px;letter-spacing:.13em}
.meter span{font-size:10px;letter-spacing:.13em}
.doc h2{font-size:11px;letter-spacing:.16em}
.stat .l{font-size:11px;letter-spacing:.14em}

/* body and data */
.tbl td{font-size:14px;padding:12px 14px}
.note{font-size:14px;line-height:1.7}
.hint{font-size:13.5px}
.empty{font-size:14px}
.stat .n{font-size:12.5px}
.autolede{font-size:15.5px;line-height:1.7}
.auth-lede{font-size:16.5px;line-height:1.68}
.auth-spec b{font-size:14px}
.auth-spec span{font-size:13.5px}
.nextcard p{font-size:14px;line-height:1.65}
.srcrow .t{font-size:14px;line-height:1.5}
.srcrow .m{font-size:12.5px}
.abs{font-size:14px;line-height:1.75}
.kv p,.kv ul{font-size:14px}
.facet ul{font-size:13.5px;line-height:1.7}
.tag{font-size:11px;padding:2px 10px}
.chip{font-size:13px}
.chip .mono{font-size:11.5px}
.btn{font-size:13.5px;padding:9px 16px}
.btn.sm{font-size:13px;padding:6px 12px}
.timeline .sum{font-size:14px}
.timeline .ts,.timeline .meta{font-size:12px}
.cite{font-size:11.5px;padding:1px 7px}
.autol{font-size:14.5px;font-weight:600}
.autod{font-size:12.5px}
.meter b{font-size:14px}
.status{font-size:13px}
.input,.textarea,.select{font-size:14.5px;padding:11px 13px}
.doc p{font-size:17.5px;line-height:1.78}

/* ---------- drawn icons ---------- */
.ic-svg{stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.navitem{gap:11px;padding:8px 10px;font-size:13.5px;font-weight:500}
.navitem .ic{flex:0 0 20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center}
.navitem .ic .ic-svg{width:17px;height:17px;color:var(--c-t3,var(--t3));
  transition:color .15s var(--ease)}
.navitem:hover .ic .ic-svg{color:var(--c-t2,var(--t2))}
.navitem.on .ic .ic-svg{color:var(--c-accent,var(--acc-ink))}
.navitem .badge{font-size:11px}
.iconbtn .ic-svg{width:16px;height:16px}
.navtoggle .ic-svg{width:19px;height:19px}

/* ---------- theme switcher, top bar ---------- */
.themeswitch{display:flex;align-items:center;gap:2px;padding:3px;
  border:1px solid var(--c-line,var(--line));border-radius:99px;
  background:var(--c-hover,rgba(255,255,255,.04))}
.themeswitch button{display:flex;align-items:center;justify-content:center;
  width:28px;height:24px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:none;color:var(--c-t3,var(--t3));
  transition:color .15s var(--ease),background .15s var(--ease)}
.themeswitch button:hover{color:var(--c-t1,var(--t1))}
.themeswitch button.on{background:var(--acc);color:#fff;
  box-shadow:0 0 14px -4px var(--acc-glow)}
.themeswitch .ic-svg{width:14px;height:14px}
@media (max-width:640px){.themeswitch{display:none}}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1080px){
  .auth{grid-template-columns:1fr}
  .auth-side{padding:42px 26px;border-right:0;border-bottom:1px solid var(--line)}
  .auth-main{padding:36px 26px 54px}
  .auth-spec div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .nav{position:fixed;left:0;top:0;width:252px;z-index:120;transform:translateX(-100%);
    transition:transform .24s var(--ease)}
  .app.navopen .nav{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(3,5,10,.66)}
  .navtoggle{display:inline-flex}
  .page{padding:18px 15px 48px}
  .top-right .btn.dark{display:none}
  .status{max-width:112px}
  .doc{padding:30px 24px}
}
@media (max-width:760px){
  .srcrow .head{grid-template-columns:44px minmax(0,1fr)}
  .srcrow .head>:nth-child(n+3){display:none}
  .srcrow .exp{padding-left:17px}
  .doc h1{font-size:25px}
  .doc p{font-size:16.5px}
  .tlc-bars li{grid-template-columns:96px minmax(0,1fr) 42px}
  .autoh1{font-size:24px}
  .nextcard-a{width:100%}
  .nextcard-a .btn{flex:1;justify-content:center}
  .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .btn:hover{transform:none}
}

@media print{
  body::before,.nav,.top,.panel-a,#toast,.nextcard,.autopanel{display:none!important}
  body{background:#fff;color:#000}
  .app{grid-template-columns:1fr}
  .page{padding:0}
  .panel{border:0;background:none;box-shadow:none;backdrop-filter:none}
  .doc{box-shadow:none;padding:0;max-width:none}
}


/* ===========================================================
   MOTION LAYER
   Paired with assets/motion.js.

   Split into three tiers:
     AMBIENT     always running, GPU-composited, no layout work
     ARRIVAL     fires when a page changes, never on re-render
     TRANSITION  fires when real state changes

   The whole layer is switched off by the prefers-reduced-motion
   block at the end of this file.
   =========================================================== */

/* -----------------------------------------------------------
   AMBIENT — the app is never completely still
   ----------------------------------------------------------- */

/* the neural field canvas, drawn by motion.js */
.neural-field{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:0;
  animation:field-in 2.6s var(--ease) .2s forwards}
.neural-field.is-fixed{position:fixed;z-index:0}
@keyframes field-in{to{opacity:1}}

/* the app frame floats above the field */
#root{position:relative;z-index:1}
.auth-side::after{z-index:1}
.auth-side>*:not(.neural-field){position:relative;z-index:2}

/* deep-field gradients drift continuously — transform only, so the
   compositor handles it and the main thread never sees it */
body::before{animation:aurora 46s var(--ease) infinite alternate;will-change:transform}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-2.5%,1.8%,0) scale(1.07)}
  100%{transform:translate3d(2%,-2.2%,0) scale(1.04)}}

/* a faint lattice drifting behind everything, one cell every 34s */
body::after{content:'';position:fixed;inset:-60px;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(124,156,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(124,156,255,.045) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 30%,#000 20%,transparent 78%);
  animation:lattice 34s linear infinite;will-change:transform}
@keyframes lattice{to{transform:translate3d(58px,58px,0)}}

/* stat readouts: the accent bar under each tile drifts, offset per tile */
.stat::after{background:linear-gradient(90deg,var(--acc),var(--plasma),var(--acc));
  background-size:220% 100%;animation:bar-drift 11s linear infinite}
.stat:nth-child(2)::after{animation-delay:-2.2s}
.stat:nth-child(3)::after{animation-delay:-4.4s}
.stat:nth-child(4)::after{animation-delay:-6.6s}
.stat:nth-child(5)::after{animation-delay:-8.8s}
@keyframes bar-drift{to{background-position:220% 0}}

/* the active nav item breathes */
.navitem.on::before{animation:rail 4.2s var(--ease) infinite}
@keyframes rail{
  0%,100%{box-shadow:0 0 8px var(--acc-glow);opacity:.8}
  50%{box-shadow:0 0 18px var(--acc-glow);opacity:1}}

/* a slow sensor pass along the top bar's edge */
.top{position:sticky;overflow:visible}
.top::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:22%;
  background:linear-gradient(90deg,transparent,var(--acc-ink),transparent);
  opacity:.55;animation:sensor 14s var(--ease) infinite}
@keyframes sensor{
  0%{transform:translateX(-30%)}
  55%{transform:translateX(460%)}
  100%{transform:translateX(460%)}}

/* the autopilot corner brackets hold a slow pulse while idle */
.autopanel::before{animation:corner-a 7s var(--ease) infinite}
.autopanel::after{animation:corner-a 7s var(--ease) 3.5s infinite}
@keyframes corner-a{0%,100%{opacity:.55}50%{opacity:1}}

/* the mark draws its own light */
.brandline .logo,.nav-brand .logo{position:relative;overflow:hidden}
.brandline .logo::after,.nav-brand .logo::after{content:'';position:absolute;top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  animation:mark-sheen 9s var(--ease) 1.2s infinite}
@keyframes mark-sheen{0%{left:-120%}14%{left:180%}100%{left:180%}}

/* ---- while agents are actually working, the room wakes up ---- */
body.is-working::before{animation-duration:24s}
body.is-working::after{animation-duration:18s;opacity:1}
body.is-working .meter{border-color:var(--acc-line)}
body.is-working .meter b{animation:count-live 1.9s var(--ease) infinite}
@keyframes count-live{0%,100%{opacity:.72}50%{opacity:1;text-shadow:0 0 14px var(--acc-glow)}}
body.is-working .top::after{animation-duration:5s;opacity:.9}

/* -----------------------------------------------------------
   ARRIVAL — page changes only
   ----------------------------------------------------------- */
.page{animation:none}
.page.stagger>*{animation:rise-in .52s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 55ms)}
@keyframes rise-in{
  from{opacity:0;transform:translateY(14px) scale(.994)}
  to{opacity:1;transform:none}}

.auth-side>*:not(.neural-field){animation:rise-in .7s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 110ms + 120ms)}
.auth-spec div{animation:slide-in .5s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 70ms + 520ms)}
@keyframes slide-in{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:none}}
.auth-form.enter-seq>*{animation:rise-in .55s var(--ease) backwards;
  animation-delay:calc(var(--i,0) * 65ms + 200ms)}

/* -----------------------------------------------------------
   TRANSITION — real state changes
   ----------------------------------------------------------- */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:'';position:absolute;top:0;left:-140%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .6s var(--ease)}
.btn.primary:hover::after{left:180%}

.autorow.just-done{animation:commit .9s var(--ease)}
@keyframes commit{0%{background:rgba(45,212,191,.20)}100%{background:transparent}}
.autorow.just-done .autodot{animation:commit-ring .9s var(--ease)}
@keyframes commit-ring{
  0%{box-shadow:0 0 0 0 rgba(45,212,191,.7),0 0 18px -3px rgba(45,212,191,.6);transform:scale(1)}
  32%{transform:scale(1.16)}
  100%{box-shadow:0 0 0 15px rgba(45,212,191,0),0 0 18px -3px rgba(45,212,191,.6);transform:scale(1)}}
.autorow.just-failed{animation:reject .9s var(--ease)}
@keyframes reject{0%{background:rgba(255,92,122,.20)}100%{background:transparent}}
.autorow.just-failed .autodot{animation:shake .42s var(--ease)}
@keyframes shake{
  0%,100%{transform:translateX(0)}22%{transform:translateX(-4px)}
  58%{transform:translateX(4px)}80%{transform:translateX(-2px)}}

.autopanel.run-complete{animation:complete 2.4s var(--ease)}
@keyframes complete{
  0%{border-color:var(--acc-line);box-shadow:inset 0 1px 0 var(--edge-lit),0 0 0 0 rgba(45,212,191,.36)}
  18%{border-color:var(--ok);box-shadow:inset 0 1px 0 var(--edge-lit),0 0 60px -12px rgba(45,212,191,.55)}
  100%{border-color:var(--acc-line);box-shadow:inset 0 1px 0 var(--edge-lit),0 0 0 0 rgba(45,212,191,0)}}

/* -----------------------------------------------------------
   POINTER FEEDBACK
   ----------------------------------------------------------- */
.panel{transition:border-color .22s var(--ease),box-shadow .32s var(--ease)}
.panel:hover{border-color:#2A3448}
.stat{transition:transform .24s var(--ease),border-color .24s var(--ease)}
.stat:hover{transform:translateY(-2px);border-color:#2A3448}
.navitem{transition:background .15s var(--ease),color .15s var(--ease),padding-left .18s var(--ease)}
.navitem:hover{padding-left:12px}
.cite{transition:background .14s var(--ease),color .14s var(--ease),
  box-shadow .14s var(--ease),transform .14s var(--ease)}
.cite:hover{transform:translateY(-1px)}
.tlc-bars li{transition:opacity .2s var(--ease)}
.tlc-bars:hover li{opacity:.5}
.tlc-bars:hover li:hover{opacity:1}
.toast{transition:opacity .25s var(--ease),transform .25s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .neural-field{display:none}
  body::after{display:none}
  .page.stagger>*,.auth-side>*,.auth-spec div,.auth-form.enter-seq>*{animation:none!important}
}