/* ==========================================================================
   Breadbit design system v1 (Phase 2, slice 1) — loads LAST on every page.
   Scope: only the default "Aurora Glass" skin (and content pages). The four other
   admin skins (bench, lab, class, draft) set their own tokens with higher
   specificity and are intentionally left alone.
   Palette: midnight navy surfaces · cyan = action/focus · violet = secondary
   accent · warm amber = attention only. Contrast measured (WCAG 2.x):
   body text 17:1, muted text 7.7:1, cyan on panel 10:1, navy-on-cyan button 10.9:1.
   No new fonts, no new requests: system stack only (CSP font-src is 'self' data:).
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  --ds-font:Inter,"SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ds-mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  /* spacing (4px base), radius, motion */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);--d1:120ms;--d2:200ms;--d3:320ms;
  --tap:44px;
}
html:is(:not([data-skin]),[data-skin="glass"]){
  --bg:#050a16;--panel:#0a1226;--panel2:#0f1a33;--panel3:#15223f;--line:#1b2a4a;
  --text:#e8eefb;--sub:#97a8c6;
  --accent:#8e90ff;--accent2:#2fd0e6;--warm:#f0b35c;--good:#35d08a;--warn:#ff7a6b;
  --brand:linear-gradient(135deg,#34d6ee 0%,#7c86ff 100%);--onbrand:#04101f;
  --glass:rgba(10,18,38,.78);--glass-b:rgba(255,255,255,.08);
  --shadow:0 14px 40px -16px rgba(0,0,0,.75);
  --ds-ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent2);
  --ds-edge:inset 0 1px 0 rgba(255,255,255,.06);
  color-scheme:dark;
}
html:is(:not([data-skin]),[data-skin="glass"])[data-theme="light"]{
  --bg:#f1f4fb;--panel:#ffffff;--panel2:#f4f7fd;--panel3:#e7edf8;--line:#d5deee;
  --text:#0e1830;--sub:#4a5d7c;
  --accent:#5457e6;--accent2:#0a7f9b;--warm:#a8650a;--good:#0b7a4b;--warn:#c4352a;
  --brand:linear-gradient(135deg,#34d6ee 0%,#7c86ff 100%);--onbrand:#04101f;
  --glass:rgba(255,255,255,.84);--glass-b:rgba(14,24,48,.10);
  --shadow:0 14px 36px -18px rgba(24,44,96,.38);
  --ds-edge:inset 0 1px 0 rgba(255,255,255,.9);
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  html:is(:not([data-skin]),[data-skin="glass"]):not([data-theme]){
    --bg:#f1f4fb;--panel:#ffffff;--panel2:#f4f7fd;--panel3:#e7edf8;--line:#d5deee;
    --text:#0e1830;--sub:#4a5d7c;--accent:#5457e6;--accent2:#0a7f9b;--warm:#a8650a;--good:#0b7a4b;--warn:#c4352a;
    --glass:rgba(255,255,255,.84);--glass-b:rgba(14,24,48,.10);--shadow:0 14px 36px -18px rgba(24,44,96,.38);
    --ds-edge:inset 0 1px 0 rgba(255,255,255,.9);color-scheme:light;
  }
}

/* ---------- 2. base ---------- */
html:is(:not([data-skin]),[data-skin="glass"]) body{font-family:var(--ds-font);font-feature-settings:"cv11","ss01";}
html:is(:not([data-skin]),[data-skin="glass"]) :is(button,[role=button],a,input,select,textarea,summary):focus-visible{
  outline:none;box-shadow:var(--ds-ring);border-radius:var(--r-sm);
}
html:is(:not([data-skin]),[data-skin="glass"]) :is(#simTime,.hudRow b,#results b,td,th){font-variant-numeric:tabular-nums}

/* ---------- 3. simulator shell: header, logo, dock ---------- */
/* the owner-supplied logo gets a hairline ring so it stays readable on midnight AND on white */
html:is(:not([data-skin]),[data-skin="glass"]) :is(#brand .logo,header.site .brand img){
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 38%,transparent),0 6px 18px -8px color-mix(in srgb,var(--accent2) 70%,transparent);
  background:#0a1226;
}
html:is(:not([data-skin]),[data-skin="glass"]) #app header{
  background:var(--glass);border-bottom:1px solid var(--glass-b);box-shadow:var(--ds-edge);
}
html:is(:not([data-skin]),[data-skin="glass"]) #app #hbtns button{transition:background var(--d2) var(--ease),border-color var(--d2) var(--ease),transform var(--d1) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) #app #hbtns button:hover{background:var(--panel2);border-color:var(--line)}
html:is(:not([data-skin]),[data-skin="glass"]) :is(#app #hbtns .hPill,#toolbar #dockBar>#runBtn,#speedRow button.on,#speedRow button.active,.btn,header.site nav a:first-child){
  color:var(--onbrand);
}
html:is(:not([data-skin]),[data-skin="glass"]) #toolbar #dockBar>#runBtn .ic{color:var(--onbrand);fill:var(--onbrand);--ic2:var(--onbrand)}
html:is(:not([data-skin]),[data-skin="glass"]) #app #hbtns .hPill .ic{color:var(--onbrand);--ic2:var(--onbrand)}
html:is(:not([data-skin]),[data-skin="glass"]) #toolbar #dockBar>#runBtn{
  box-shadow:0 12px 26px -10px color-mix(in srgb,var(--accent2) 75%,transparent),0 0 0 6px color-mix(in srgb,var(--bg) 80%,transparent);
}
/* running state: green, labelled, with a slow ring so "it is running" is never ambiguous */
html:is(:not([data-skin]),[data-skin="glass"]) #toolbar #dockBar>#runBtn.active{
  background:linear-gradient(135deg,#35d08a,#14b8a6);color:#03150d;
  box-shadow:0 12px 26px -10px rgba(20,184,166,.8),0 0 0 6px color-mix(in srgb,var(--bg) 80%,transparent);
}
html:is(:not([data-skin]),[data-skin="glass"]) #toolbar #dockBar>#runBtn.active .ic{color:#03150d;fill:#03150d;--ic2:#03150d}
html:is(:not([data-skin]),[data-skin="glass"]) #dockBar{background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--shadow),var(--ds-edge)}
html:is(:not([data-skin]),[data-skin="glass"]) .tool{transition:transform var(--d2) var(--ease),border-color var(--d2) var(--ease),background var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) .tool.active{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2) inset}
html:is(:not([data-skin]),[data-skin="glass"]) #hint{color:var(--sub);background:var(--glass);border-color:var(--glass-b)}
html:is(:not([data-skin]),[data-skin="glass"]) #speedRow button.on,html:is(:not([data-skin]),[data-skin="glass"]) #speedRow button.active{background:var(--brand)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiFab{color:var(--onbrand);background:var(--brand);box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent2) 80%,transparent)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiFab .ic{color:var(--onbrand);--ic2:var(--onbrand)}
html:is(:not([data-skin]),[data-skin="glass"]) #zoomCtl{background:var(--glass);border:1px solid var(--glass-b);box-shadow:var(--shadow),var(--ds-edge)}

/* touch: 44px tap targets WITHOUT changing layout. The visible buttons stay 38px; an invisible ::after
   extends the hit area by 3px on every side (gap raised 4->6px so neighbouring areas never overlap).
   Resizing the buttons themselves moved the board's top edge and broke tests/zoom-ui (pinch on the board). */
@media (pointer:coarse){
  html:is(:not([data-skin]),[data-skin="glass"]) #app #hbtns{gap:6px}
  html:is(:not([data-skin]),[data-skin="glass"]) #app #hbtns button{position:relative}
  html:is(:not([data-skin]),[data-skin="glass"]) #app #hbtns button::after{content:"";position:absolute;inset:-3px}
  html:is(:not([data-skin]),[data-skin="glass"]) #speedRow button{min-height:40px;min-width:40px}
}

/* ---------- 4. content pages (about, learn, privacy, 404) ---------- */
html:is(:not([data-skin]),[data-skin="glass"]) body:not(#app){--ds-page:1}
html:is(:not([data-skin]),[data-skin="glass"]) header.site{background:var(--glass);border-bottom:1px solid var(--glass-b);box-shadow:var(--ds-edge)}
html:is(:not([data-skin]),[data-skin="glass"]) header.site nav a{transition:color var(--d2) var(--ease),background var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) header.site nav a[aria-current]{color:var(--text);background:var(--panel3);box-shadow:inset 0 -2px 0 var(--accent2)}
/* headline: solid text + one short cyan rule (the v5.11.0 decision to drop the gradient headline stands) */
html:is(:not([data-skin]),[data-skin="glass"]) main h1{
  background:none;-webkit-text-fill-color:currentColor;color:var(--text);
}
html:is(:not([data-skin]),[data-skin="glass"]) main h1::after{
  content:"";display:block;width:56px;height:3px;border-radius:3px;margin-top:.35em;background:var(--accent2);
}
html:is(:not([data-skin]),[data-skin="glass"]) .btn{background:var(--brand);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent2) 80%,transparent)}
html:is(:not([data-skin]),[data-skin="glass"]) .card{position:relative;background:var(--panel);border-color:var(--line);box-shadow:var(--ds-edge)}
html:is(:not([data-skin]),[data-skin="glass"]) .grid a.card{overflow:hidden}
html:is(:not([data-skin]),[data-skin="glass"]) .grid a.card:hover{border-color:var(--accent2);box-shadow:0 18px 36px -22px color-mix(in srgb,var(--accent2) 60%,transparent)}
html:is(:not([data-skin]),[data-skin="glass"]) code,html:is(:not([data-skin]),[data-skin="glass"]) kbd{font-family:var(--ds-mono);background:var(--panel2);border-color:var(--line)}
/* page entry: one 240ms fade-rise on <main>; opacity/transform only, so no layout shift */
html:is(:not([data-skin]),[data-skin="glass"]) main{animation:dsRise var(--d3) var(--ease) both}
@keyframes dsRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- 5. pointer effects (desktop mouse only; fx.js sets --mx/--my/--tx/--ty) ---------- */
@media (hover:hover) and (pointer:fine){
  html:is(:not([data-skin]),[data-skin="glass"]) :is(.grid a.card,.card)::before{
    content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%);
    transition:opacity var(--d2) var(--ease);
  }
  html:is(:not([data-skin]),[data-skin="glass"]) :is(.grid a.card,.card):hover::before{opacity:1}
  html:is(:not([data-skin]),[data-skin="glass"]) [data-mag]{transform:translate3d(var(--tx,0px),var(--ty,0px),0);transition:transform var(--d1) var(--ease)}
}
/* animated border ring on the content-page CTA (conic sweep, masked to a 1.5px edge) */
@property --ds-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (hover:hover) and (pointer:fine){
  html:is(:not([data-skin]),[data-skin="glass"]) .btn{position:relative}
  html:is(:not([data-skin]),[data-skin="glass"]) .btn::after{
    content:"";position:absolute;inset:-2px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;
    background:conic-gradient(from var(--ds-a),transparent 0 60%,var(--accent2) 80%,transparent 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    transition:opacity var(--d2) var(--ease);
  }
  html:is(:not([data-skin]),[data-skin="glass"]) .btn:hover::after{opacity:1;animation:dsSpin 2.4s linear infinite}
}
@keyframes dsSpin{to{--ds-a:360deg}}

/* ---------- 6. motion safety ---------- */
@media (prefers-reduced-motion:reduce){
  html:is(:not([data-skin]),[data-skin="glass"]) *,html:is(:not([data-skin]),[data-skin="glass"]) *::before,html:is(:not([data-skin]),[data-skin="glass"]) *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html:is(:not([data-skin]),[data-skin="glass"]) [data-mag]{transform:none!important}
}
@media (hover:none){
  html:is(:not([data-skin]),[data-skin="glass"]) [data-mag]{transform:none!important}
}

/* ---------- 7. AI workspace (Phase 2 slice 2) ---------- */
html:is(:not([data-skin]),[data-skin="glass"]) .aiShell{background:var(--bg)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiBar{background:var(--glass);border-bottom:1px solid var(--glass-b);box-shadow:var(--ds-edge);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiName{font-weight:700;letter-spacing:-.01em}
html:is(:not([data-skin]),[data-skin="glass"]) .aiSeg{background:var(--panel2);border-color:var(--line)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiSeg button{transition:background var(--d2) var(--ease),color var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiSeg button.on{background:var(--brand);color:var(--onbrand)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiIcon{background:transparent;border-color:transparent;color:var(--sub);transition:background var(--d2) var(--ease),color var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiIcon:hover{background:var(--panel2);color:var(--text)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiPrev{background:var(--panel);border-bottom:1px solid var(--line)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiPrev summary{color:var(--sub);letter-spacing:.02em;text-transform:uppercase;font-size:11px;font-weight:700}
html:is(:not([data-skin]),[data-skin="glass"]) .aiPrev[open] summary{color:var(--text)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiPrevBox svg{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm)}
/* conversation */
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg{border-radius:var(--r-md);line-height:1.5}
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.me{background:var(--brand);color:var(--onbrand);border-bottom-right-radius:6px;font-weight:500}
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.bot{background:var(--panel2);border:1px solid var(--line);box-shadow:var(--ds-edge);border-bottom-left-radius:6px}
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.step{background:none;border:0;box-shadow:none;color:var(--sub);font-family:var(--ds-mono);font-size:11.5px}
/* errors: four different states, so "try again" is never shown for something only the site owner can fix */
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.warn{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--warn);color:var(--text)}
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.warn.k-owner{border-left-color:var(--warm);background:color-mix(in srgb,var(--warm) 9%,var(--panel2))}
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.warn.k-limit{border-left-color:var(--accent)}
html:is(:not([data-skin]),[data-skin="glass"]) .agMsg.warn.k-auth{border-left-color:var(--accent2)}
html:is(:not([data-skin]),[data-skin="glass"]) .agWho{display:block;margin-top:6px;color:var(--sub);font-size:12px;line-height:1.45}
html:is(:not([data-skin]),[data-skin="glass"]) .agRetry{margin-top:8px;min-height:40px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--accent2);background:transparent;color:var(--accent2);font-weight:700}
html:is(:not([data-skin]),[data-skin="glass"]) .agRetry:hover{background:color-mix(in srgb,var(--accent2) 14%,transparent)}
/* composer: system font (was a grey monospace default), brand send, clear focus */
html:is(:not([data-skin]),[data-skin="glass"]) .agForm{gap:8px;align-items:flex-end}
html:is(:not([data-skin]),[data-skin="glass"]) .agForm textarea{font-family:var(--ds-font);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;line-height:1.4;transition:border-color var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) .agForm textarea::placeholder{color:var(--sub)}
html:is(:not([data-skin]),[data-skin="glass"]) .agForm textarea:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 22%,transparent)}
html:is(:not([data-skin]),[data-skin="glass"]) .agForm button[type=submit]{border:0;border-radius:var(--r-md);background:var(--brand);color:var(--onbrand);font-weight:700;padding:0 18px;transition:transform var(--d1) var(--ease),opacity var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) .agForm button[type=submit]:disabled{background:var(--panel2);color:var(--sub);opacity:1}
html:is(:not([data-skin]),[data-skin="glass"]) .agNew,.agChips button{background:transparent;border:1px solid var(--line);color:var(--sub);border-radius:var(--r-pill);transition:border-color var(--d2) var(--ease),color var(--d2) var(--ease)}
html:is(:not([data-skin]),[data-skin="glass"]) .agNew:hover,.agChips button:hover{border-color:var(--accent2);color:var(--text)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiRate{background:var(--panel);border-top-color:var(--accent2)}
html:is(:not([data-skin]),[data-skin="glass"]) .aiRate textarea{font-family:var(--ds-font)}
@media (pointer:coarse){html:is(:not([data-skin]),[data-skin="glass"]) .agChips button{min-height:40px}}
html:is(:not([data-skin]),[data-skin="glass"]) .agRetry{display:flex;align-items:center;width:max-content}

/* ---------- 8. no layout shift: reserve the parts tray's final height (8+62+4px) so it no longer pushes the board up when its tiles render ---------- */
@media (min-height:521px){html:is(:not([data-skin]),[data-skin="glass"]) #quick{min-height:74px;box-sizing:border-box}}

/* ---------- 9. desktop: hint + speed share ONE row in the board's bottom margin, so neither covers the bottom power rail (they were stacked on top of it) ---------- */
@media (min-width:1100px) and (min-height:521px){
  html:is(:not([data-skin]),[data-skin="glass"]) #hintBar{bottom:14px;left:196px;max-width:calc(100% - 560px);min-height:32px}
  html:is(:not([data-skin]),[data-skin="glass"]) #hintBar>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
}

/* ---------- 10. AI confirmation dialog: short fade + rise (was an abrupt pop). Off under reduced motion by the global rule above. ---------- */
@keyframes dsFade{from{opacity:0}}
html:is(:not([data-skin]),[data-skin="glass"]) .bbDlgBack{animation:dsFade var(--d2,.18s) var(--ease,ease-out) both}
html:is(:not([data-skin]),[data-skin="glass"]) .bbDlg{animation:dsRise var(--d3,.26s) var(--ease,ease-out) both}