/* Obrussa / Bruce design system: THE ONE SOURCE (founder 11/04: "the design of the ui should have
   the same elements on all pages internal external and videos").
   Every surface links or embeds THIS file: the internal app (served at /design/bruce.css by
   tools/hub_server.py), the website (copied byte-for-byte into site_live/design/ by
   scripts/site_live_from_v6.py, pinned by tests/test_design_system.py), the design mockups
   (publication/design/brucehome, chat_v1) and the demo films (publication/demo_polish/player3).
   Do not copy a token or a component into a page. Add it here, then use it there.
   Lineage: chat v1 (8c77551e3, founder edits 11/03) + Bruce Home v1 (4bee32803) for components,
   colour round 11 (36c3907b4, founder 11/03 "you can make the color pop more") for the kind colours.
   Read README.md in this folder before changing anything. */

@font-face{font-family:"Onest";src:url("onest-latin-v20260922.woff2") format("woff2");font-weight:100 900;font-display:swap}

/* ===================================================================== 1. TOKENS */
:root{
 --font:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
 --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
 /* surfaces: true black, floating panels one step up, hairlines (never thick borders) */
 --bg:#000000;
 --float:#0B0E13; --float-2:#12161D; --float-3:#0F1319; --lift:#1A212B;
 --hair:rgba(255,255,255,.07); --hair-2:rgba(255,255,255,.12); --hair-hi:rgba(255,255,255,.16);
 /* text: near-white, AA on black and on --float-2 */
 --ink:#F5F7FA; --muted:#B4BFCC; --dim:#8E9AAB;
 /* kinds (round 11). Each kind ALSO keeps its shape and word: colour is never the only signal.
    work = Bruce working (spinner), done = finished (check), held = Bruce held it (octagon),
    need = needs you (triangle), you = what the owner presses (gold, reserved). */
 --k-work:#5CE1F5; --k-done:#5EE0A0; --k-held:#FF8A80; --k-need:#FFB35C; --k-you:#F5C451;
 --t-work:#0F2229; --t-done:#0F2A1F; --t-held:#341A1C; --t-need:#33240F; --t-you:#1D180A;
 /* names the components use (aliases of the kinds; keep them pointing at the kinds) */
 --gold:var(--k-you); --gold-ink:#14110A; --gold-hover:#FFD36B;
 --gold-soft:rgba(245,196,81,.12); --gold-line:rgba(245,196,81,.38);
 --cyan:var(--k-work); --cyan-soft:rgba(92,225,245,.12);
 --ok:var(--k-done); --look:var(--k-need); --stop:var(--k-held);
 --blue:#8CC8FF; --violet:#B9A2FF;
 /* elevation: layered soft shadows + a top highlight, no coloured glows, no radial gradients */
 --e1:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,255,255,.035),0 18px 40px -24px rgba(0,0,0,.9);
 --e2:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.05),0 30px 60px -30px rgba(0,0,0,.95),0 8px 18px -10px rgba(0,0,0,.7);
 /* layout */
 --side:276px; --col:740px; --wide:1080px; --r-s:10px; --r-m:12px; --r-l:18px; --r-xl:24px;
 color-scheme:dark;
}
/* per-area accent: set on any element, its children read --acc / --acc-soft */
.acc-gold{--acc:var(--gold);--acc-soft:rgba(245,196,81,.13)}
.acc-cyan{--acc:var(--cyan);--acc-soft:rgba(92,225,245,.12)}
.acc-green{--acc:var(--ok);--acc-soft:rgba(94,224,160,.13)}
.acc-blue{--acc:var(--blue);--acc-soft:rgba(140,200,255,.13)}
.acc-amber{--acc:var(--look);--acc-soft:rgba(255,179,92,.13)}
.acc-violet{--acc:var(--violet);--acc-soft:rgba(185,162,255,.14)}

/* ===================================================================== 2. BASE (scoped to .bx so a host page's own rules are untouched) */
.bx,.bx *{box-sizing:border-box}
.bx{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.bx button,.bx select{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.bx svg{width:20px;height:20px;flex:0 0 auto}
.bx :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:8px}
.bx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bx h1,.bx h2,.bx h3,.bx p,.bx ul,.bx ol{margin:0;padding:0}
@keyframes bx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes bx-blink{50%{opacity:0}}

/* ===================================================================== 3. SHELL: sidebar + header */
.bx .app{display:grid;grid-template-columns:var(--side) 1fr;height:100vh;height:100dvh}
.bx .side{margin:12px 0 12px 12px;background:var(--float);border-radius:20px;box-shadow:var(--e1);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.bx .side>*{min-width:0}
.bx .brand{display:flex;align-items:center;gap:10px;padding:18px 18px 10px;text-decoration:none;color:var(--ink)}
.bx .brand .mark{width:30px;height:30px;color:var(--gold)}
.bx .brand b{font-size:19px;font-weight:650;letter-spacing:-.01em}
.bx .brand .close{margin-left:auto;display:none;width:40px;height:40px;border-radius:10px;place-items:center;color:var(--muted)}
.bx .scroll{overflow-y:auto;padding:6px 8px 12px;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#222a35 transparent}
.bx .sec{color:var(--dim);font-size:14px;font-weight:500;padding:16px 10px 6px}
.bx .item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:9px 10px;border-radius:10px;font-size:15.5px;color:var(--muted);line-height:1.35;text-decoration:none}
.bx .item:hover{background:var(--float-2);color:var(--ink)}
.bx .item.on{background:rgba(255,255,255,.08);color:#fff}
.bx .item .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx .item svg{width:19px;height:19px;color:var(--acc,var(--muted))}
.bx .item.sub{padding:6px 10px 6px 40px;font-size:14px;color:var(--dim)}
.bx .item.sub:hover,.bx .item.sub.on{color:var(--ink)}
.bx .badge{min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:12.5px;font-weight:650;display:inline-grid;place-items:center;background:rgba(255,179,92,.16);color:var(--look);font-variant-numeric:tabular-nums}
.bx .pulse{width:8px;height:8px;border-radius:50%;background:var(--cyan);animation:bx-pulse 1.2s ease-in-out infinite;flex:0 0 auto}
.bx .sidefoot{min-width:0;overflow:hidden;padding:12px 16px 16px;border-top:1px solid var(--hair);font-size:13px;line-height:1.5;color:var(--dim)}
.bx .sidefoot .me{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;margin-bottom:8px}
.bx .avatar{width:30px;height:30px;border-radius:50%;background:#2B2410;color:var(--gold);display:grid;place-items:center;font-weight:650;font-size:14px;flex:0 0 auto}
.bx .main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.bx .topbar{display:flex;align-items:center;gap:10px;padding:14px 24px 6px;min-height:58px}
.bx .topbar .menu{display:none;width:42px;height:42px;border-radius:12px;place-items:center;color:var(--ink)}
.bx .topbar .pmark{display:none;width:26px;height:26px;color:var(--gold)}
.bx .crumb{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--muted);min-width:0}
.bx .crumb button,.bx .crumb a{color:var(--muted);display:inline-flex;align-items:center;gap:7px;min-height:32px;text-decoration:none}
.bx .crumb button:hover,.bx .crumb a:hover{color:var(--ink)}
.bx .crumb svg{width:17px;height:17px;color:var(--acc,var(--muted))}
.bx .crumb .t{color:var(--ink);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx .topnote{margin-left:auto;font-size:13px;color:var(--dim);white-space:nowrap}
.bx .thread{flex:1;overflow-y:auto;min-height:0}
.bx .col{max-width:var(--col);margin:0 auto;padding:18px 24px 40px}
.bx .col.wide{max-width:var(--wide)}

/* ===================================================================== 4. GREETING + HOME TILES */
.bx .hello{display:flex;flex-direction:column;align-items:center;text-align:center;padding:5vh 0 22px}
.bx .hello .mark{width:46px;height:46px;color:var(--gold);margin-bottom:18px}
.bx .hello h1{font-size:36px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.bx .hello p{color:var(--muted);margin-top:8px}
.bx .tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.bx .tile{position:relative;text-align:left;padding:18px 18px 16px;border-radius:var(--r-l);background:var(--float);box-shadow:var(--e1);display:flex;flex-direction:column;gap:8px;min-height:150px;transition:background .15s,box-shadow .15s;color:var(--ink);text-decoration:none}
.bx .tile:hover{background:#0F131A;box-shadow:var(--e1),inset 0 0 0 1px var(--acc-soft)}
.bx .tile .ti{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--acc-soft);color:var(--acc)}
.bx .tile .ti svg{width:21px;height:21px}
.bx .tile h3{font-size:18px;font-weight:620;letter-spacing:-.01em;margin-top:4px}
.bx .tile p{font-size:14.5px;line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bx .tile .stats{margin-top:auto;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px;color:var(--dim)}
.bx .stats .w{color:var(--look)} .bx .stats .r{color:var(--cyan)}
.bx .cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:40px}
.bx h2.h{font-size:17px;font-weight:620;display:flex;align-items:center;gap:9px;margin:0 0 6px}
.bx h2.h .n{color:var(--dim);font-weight:450}
.bx .empty{color:var(--dim);font-size:15px;padding:12px 0}

/* ===================================================================== 5. ROWS (hairline lists, no boxes) + ACTIONS */
.bx .rows{list-style:none}
.bx .row{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:13px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.bx .row:last-child{border-bottom:0}
.bx .row .ri{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--acc-soft,rgba(255,255,255,.05));color:var(--acc,var(--muted));margin-top:1px}
.bx .row .ri svg{width:16px;height:16px}
.bx .row .rt{font-size:15.5px;font-weight:560;line-height:1.4}
.bx .row .rs{font-size:14px;line-height:1.45;color:var(--muted);margin-top:2px}
.bx .row .ra{font-size:13px;color:var(--dim);margin-top:4px;display:flex;flex-wrap:wrap;gap:4px 12px}
.bx .live{color:var(--cyan);display:inline-flex;align-items:center;gap:6px}
.bx .act{white-space:nowrap;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:620;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-line);min-height:34px;text-decoration:none;display:inline-flex;align-items:center}
.bx .act:hover{background:var(--gold-soft)}
.bx .act.solid{background:var(--gold);color:var(--gold-ink);box-shadow:none}
.bx .act.solid:hover{background:var(--gold-hover)}
.bx .go{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:12px;background:var(--gold);color:var(--gold-ink);font-weight:650;font-size:15px;text-decoration:none}
.bx .go:hover{background:var(--gold-hover)}
.bx .back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:560;min-height:32px;text-decoration:none}
.bx .back:hover{color:var(--ink)}

/* ===================================================================== 6. STATUS WORDS + STEPS (Bruce's live work, inline, no box) */
.bx .s-work{color:var(--k-work);font-weight:600} .bx .s-done{color:var(--k-done);font-weight:600}
.bx .s-held{color:var(--k-held);font-weight:600} .bx .s-need{color:var(--k-need);font-weight:600}
.bx .steps{list-style:none;position:relative}
.bx .steps li{position:relative;display:grid;grid-template-columns:26px 1fr;gap:12px;padding:5px 0 11px}
.bx .steps li:not(:last-child)::before{content:"";position:absolute;left:12px;top:30px;bottom:-4px;width:1.5px;background:rgba(255,255,255,.10)}
.bx .steps li.done:not(:last-child)::before{background:rgba(94,224,160,.35)}
.bx .sd{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.bx .sd svg{width:14px;height:14px}
.bx .done .sd{background:rgba(94,224,160,.16);color:var(--ok)}
.bx .now .sd{background:var(--cyan-soft);color:var(--cyan)}
.bx .now .sd svg{animation:bx-pulse 1.2s ease-in-out infinite}
.bx .next .sd{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);color:var(--dim)}
.bx .halt .sd{background:rgba(255,138,128,.16);color:var(--stop)}
.bx .sw{font-size:15.5px;line-height:1.45;font-weight:560}
.bx .next .sw{color:var(--dim);font-weight:450}
.bx .sr2{font-size:14px;line-height:1.45;color:var(--muted);margin-top:2px}

/* ===================================================================== 7. TRANSCRIPT: owner turn = soft gold pill; Bruce = plain text, NEVER a bubble */
.bx .u{display:flex;justify-content:flex-end;margin:22px 0 18px}
.bx .u .pill{max-width:80%;background:var(--gold-soft);box-shadow:inset 0 0 0 1px rgba(245,196,81,.16);color:var(--ink);padding:10px 16px;border-radius:20px;font-size:16.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bx .b{margin:6px 0 10px;font-size:17px;line-height:1.68;color:var(--ink);overflow-wrap:anywhere}
.bx .b p{margin:0 0 12px}
.bx .b ul,.bx .b ol{margin:0 0 12px 1.3em}
.bx .b code{font-family:var(--mono);font-size:.9em;background:var(--float-2);padding:1px 5px;border-radius:6px}
.bx .b pre{font-family:var(--mono);font-size:14px;background:var(--float);box-shadow:var(--e1);padding:12px 14px;border-radius:12px;overflow-x:auto;margin:0 0 12px}
.bx .b table{border-collapse:collapse;margin:0 0 12px;font-size:15px}
.bx .b th,.bx .b td{border-bottom:1px solid var(--hair);padding:6px 12px 6px 0;text-align:left}
.bx .b .err{color:var(--stop)}
.bx .caret{display:inline-block;width:8px;height:18px;vertical-align:-3px;background:var(--cyan);border-radius:2px;margin-left:2px;animation:bx-blink 1s steps(2) infinite}
.bx .hand{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:4px 0 6px;font-size:14.5px;color:var(--muted)}

/* ===================================================================== 8. ARTIFACTS: file chips + the side panel a finished file opens in */
.bx .chip{display:inline-flex;align-items:center;gap:10px;padding:8px 12px 8px 10px;border-radius:12px;background:var(--float);box-shadow:var(--e1);font-size:14.5px;line-height:1.3;color:var(--ink);text-decoration:none;max-width:100%}
.bx .chip .fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;background:rgba(140,200,255,.14);color:var(--blue)}
.bx .chip .fi.out{background:rgba(94,224,160,.14);color:var(--ok)}
.bx .chip .fi svg{width:17px;height:17px}
.bx .chip .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx .chip small{display:block;color:var(--dim);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx .outs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bx .panel{position:fixed;top:12px;right:12px;bottom:12px;width:min(520px,calc(100vw - 24px));background:var(--float);border-radius:20px;box-shadow:var(--e2);display:none;flex-direction:column;z-index:45;overflow:hidden}
.bx .panel.open{display:flex}
.bx .panel header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--hair);font-weight:600}
.bx .panel header .x{margin-left:auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted)}
.bx .panel .pb{flex:1;overflow:auto;padding:16px}
.bx .panel iframe{width:100%;height:100%;border:0;background:#fff;border-radius:10px}

/* ===================================================================== 9. CARDS: the one tinted card (needs you), the brief line */
.bx .ask{padding:18px 20px;border-radius:var(--r-l);background:var(--float);box-shadow:var(--e1),inset 0 0 0 1px rgba(255,179,92,.28);margin:0 0 28px}
.bx .ask .aw{display:flex;align-items:center;gap:8px;color:var(--look);font-weight:620;font-size:14.5px;margin-bottom:6px}
.bx .ask p{font-size:16.5px;line-height:1.55}
.bx .ask .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.bx .card{padding:18px 20px;border-radius:var(--r-l);background:var(--float);box-shadow:var(--e1)}
.bx .brief{border-left:2px solid var(--gold-line);padding:2px 0 2px 16px;margin:0 0 26px;color:var(--muted);font-size:15.5px}

/* ===================================================================== 10. COMPOSER: one lit box, mode picker, send / stop */
.bx .dock{padding:0 24px 18px}
.bx .box{max-width:var(--col);margin:0 auto;background:var(--float);border-radius:var(--r-xl);box-shadow:var(--e2),inset 0 0 0 1px rgba(255,255,255,.06);padding:10px 10px 10px 12px;transition:box-shadow .25s}
.bx .box:focus-within{box-shadow:var(--e2),inset 0 0 0 1px rgba(245,196,81,.45)}
.bx .box.busy{box-shadow:var(--e2),inset 0 0 0 1px rgba(92,225,245,.45)}
.bx .box textarea{display:block;width:100%;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;line-height:1.5;padding:8px 6px 6px;max-height:180px;min-height:30px}
.bx .box textarea::placeholder{color:var(--dim)}
.bx .brow{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}
.bx .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--muted)}
.bx .ic:hover{background:var(--float-2);color:var(--ink)}
.bx .modebtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 10px;border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.bx .modebtn:hover{background:var(--float-2)}
.bx .modebtn .mi{display:grid;place-items:center;color:var(--acc,var(--ink))}
.bx .modebtn .mi svg{width:18px;height:18px}
.bx .modebtn .chev{width:14px;height:14px;color:var(--dim)}
.bx .attached{display:flex;flex-wrap:wrap;gap:6px;padding:0 6px}
.bx .send{margin-left:auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--gold-ink)}
.bx .send:disabled{background:#1A1F27;color:var(--dim);cursor:default}
.bx .send.stop{background:#fff;color:#000;width:auto;border-radius:999px;padding:0 16px 0 14px;gap:8px;display:inline-flex;align-items:center;font-weight:650;font-size:15px}
.bx .send.stop svg{width:12px;height:12px}
.bx .modes{position:absolute;z-index:40;width:360px;background:var(--float-3);border-radius:var(--r-l);box-shadow:var(--e2),0 0 0 1px rgba(255,255,255,.07);padding:8px;display:none}
.bx .modes.open{display:block}
.bx .modes .grp{font-size:13px;color:var(--dim);padding:8px 10px 4px}
.bx .opt{display:grid;grid-template-columns:34px minmax(0,1fr) 20px;gap:10px;align-items:start;width:100%;text-align:left;padding:9px 10px;border-radius:12px}
.bx .opt:hover{background:rgba(255,255,255,.06)}
.bx .opt .oi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--acc-soft,rgba(255,255,255,.05));color:var(--acc,var(--ink))}
.bx .opt .oi svg{width:18px;height:18px}
.bx .opt b{display:block;font-size:15.5px;font-weight:600;line-height:1.35}
.bx .opt .od{display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:1px;overflow-wrap:anywhere;white-space:normal}
.bx .opt>span{min-width:0}
.bx .opt .ck{color:var(--gold);margin-top:7px;visibility:hidden}
.bx .opt[aria-checked="true"] .ck{visibility:visible}
.bx .scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:30;display:none}
.bx .scrim.open{display:block}

/* ===================================================================== 11. PHONE */
@media (max-width:860px){
 .bx{font-size:16px}
 .bx .app{grid-template-columns:1fr}
 .bx .side{position:fixed;z-index:50;top:0;left:0;bottom:0;width:min(86vw,320px);margin:0;border-radius:0 20px 20px 0;transform:translateX(-102%);transition:transform .22s ease}
 .bx .side.open{transform:none}
 .bx .brand .close{display:grid}
 .bx .topbar{padding:8px 10px 4px;min-height:54px;gap:4px}
 .bx .topbar .menu{display:grid}
 .bx .topbar .pmark{display:block;margin-left:2px}
 .bx .crumb{flex:1;justify-content:center}
 .bx .topnote{display:none}
 .bx .col{padding:8px 16px 40px}
 .bx .hello{padding:2vh 0 18px}
 .bx .hello h1{font-size:28px}
 .bx .tiles{grid-template-columns:1fr;gap:8px}
 .bx .tile{min-height:0;display:grid;grid-template-columns:40px 1fr;column-gap:14px;row-gap:2px;padding:14px 16px}
 .bx .tile .ti{grid-row:span 2}
 .bx .tile p{display:none}
 .bx .tile h3{margin-top:0;font-size:17px}
 .bx .cols{grid-template-columns:1fr;gap:30px;margin-top:30px}
 .bx .row{grid-template-columns:28px 1fr}
 .bx .row .ract{grid-column:2}
 .bx .dock{padding:0 10px calc(10px + env(safe-area-inset-bottom))}
 .bx .u .pill{max-width:88%}
 .bx .modebtn .ml{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .bx .modes{position:fixed;left:8px!important;right:8px;bottom:8px!important;top:auto!important;width:auto;border-radius:22px;padding:10px 8px calc(10px + env(safe-area-inset-bottom))}
 .bx .panel{top:0;right:0;bottom:0;width:100vw;border-radius:0}
}
@media (prefers-reduced-motion:reduce){.bx *{animation:none!important;transition:none!important}}