/* ============================================================================
   COAI B.O.S DESIGN SYSTEM — self-contained token + component sheet
   Extracted 2026-07-27 from the LIVE SPA:
     06_Cyber-Command-Hub/dist-spa/mc/command/index.html  (514 KB, built 26-Jul 19:51)
     06_Cyber-Command-Hub/dist-spa/mc/command/office-scene.css
   Every value below is a literal from those two files — nothing invented.
   The live SPA has NO :root custom properties; it is 100% inline styles.
   This sheet is the first time those literals are named. Source line cited
   on each block so you can diff it against the SPA later.

   FONTS: the SPA loads them from Google Fonts (index.html:367). If the PA app
   must work offline, self-host the same three families — do not substitute.
   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
   ========================================================================= */

:root{
  /* ---- brand / accent -------------------------------- index.html:561,576 */
  --bos-accent:        #37E96A;   /* COAI green. Logo, JUNO, active underline */
  --bos-accent-deep:   #008A3F;   /* gradient tail on primary buttons        */
  --bos-accent-ink:    #04140c;   /* text ON accent (near-black green)       */
  --bos-accent-ink-2:  #053b1f;   /* text on the mode-pill slider  (:539)    */
  --bos-accent-glow:   rgba(55,233,106,.28);
  --bos-accent-tint:   rgba(55,233,106,.08);

  /* ---- commander / "you" gold ------------------------ index.html:651,798 */
  --bos-gold:          #f5c451;
  --bos-gold-soft:     #f5d27e;
  --bos-gold-ink:      #3a2606;   /* text on the gold avatar                 */
  --bos-gold-ring:     rgba(245,196,81,.5);
  --bos-gold-tint:     rgba(245,196,81,.08);
  --bos-avatar-fill:   radial-gradient(circle at 38% 32%,#ffe8ad,#f5c451 55%,#b07d1e);

  /* ---- agent colours ---------------------- index.html:3514 / office:3-6  */
  --bos-juno:          #38e8ff;   /* JUNO chat accent (chief of staff)       */
  --bos-juno-deep:     #1f9fc0;
  --bos-sentinel:      #6ea8ff;   /* Admin & Documents                       */
  --bos-sentinel-deep: #3f6fb0;
  --bos-atlas:         #ff8a3d;   /* Marketing                               */
  --bos-atlas-deep:    #c25e1e;
  --bos-grow:          #43e3a0;   /* People & Payroll                        */
  --bos-grow-deep:     #1f9f6f;
  /* NOTE the deliberate inconsistency in the live product: the OFFICE scene
     paints JUNO green (--coai-juno:#37E96A, office-scene.css:4) while the CHAT
     room paints JUNO cyan (#38e8ff). Both are live. Pick one per surface and
     stay consistent inside that surface. */

  /* ---- page + surfaces ------------------------------- index.html:543,674 */
  --bos-bg: radial-gradient(1300px 900px at 50% 8%, #0a1210 0%, #070b0c 55%, #050607 100%);
  --bos-bg-flat:       #070b0c;
  --bos-bg-drawer:     #0a1310;   /* mobile rail solid fallback     (:432)   */
  --bos-bg-popover:    #0c1622;   /* tooltip / ROI card             (:419)   */
  --bos-surface-1:     rgba(255,255,255,.02);
  --bos-surface-2:     rgba(255,255,255,.04);
  --bos-surface-3:     rgba(255,255,255,.06);
  --bos-card:          linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  --bos-line:          rgba(255,255,255,.07);   /* the default hairline       */
  --bos-line-soft:     rgba(255,255,255,.06);
  --bos-line-strong:   rgba(255,255,255,.12);
  --bos-line-input:    rgba(120,200,225,.16);   /* login inputs      (:569)   */

  /* ---- text ------------------------------------------ index.html:543,677 */
  --bos-text:          #cfe1ea;   /* body default                            */
  --bos-text-hi:       #eef6f9;   /* headings                                */
  --bos-text-max:      #eafaff;   /* logo / hover state                      */
  --bos-text-bubble:   #dfeaf0;   /* agent chat bubble                       */
  --bos-muted:         #9db6c2;   /* nav labels, secondary                   */
  --bos-muted-2:       #7f99a6;
  --bos-dim:           #6f93a6;   /* mono micro-labels                       */
  --bos-faint:         #577484;   /* topbar subtitle                         */
  --bos-placeholder:   #5d7886;   /* ::placeholder                  (:373)   */
  --bos-juno-quote:    #A6E6C4;   /* the italic JUNO line under the greeting */

  /* ---- type ------------------------------------------ index.html:367     */
  --bos-font-display: 'Space Grotesk', sans-serif;  /* headings, nav, numbers */
  --bos-font-body:    'Inter', sans-serif;          /* everything readable    */
  --bos-font-mono:    'JetBrains Mono', monospace;  /* micro-labels, codes    */

  /* ---- radius (the live scale, by frequency) --------- index.html         */
  /* the one intentionally-light surface: a rendered document page */
  --bos-paper: #ffffff;
  --bos-r-xs: 5px;  --bos-r-sm: 8px;  --bos-r-md: 11px;
  --bos-r-lg: 13px; --bos-r-xl: 16px; --bos-r-pill: 20px;

  /* ---- motion ---------------------------------------- index.html:530,4042 */
  --bos-ease:        cubic-bezier(.2,.6,.2,1);   /* UI state changes         */
  --bos-ease-reveal: cubic-bezier(.2,.7,.2,1);   /* entrances                */
  --bos-shadow:      0 12px 32px rgba(0,0,0,.55);
  --bos-shadow-card: 0 14px 32px rgba(0,0,0,.5);
}

/* ---- reset, exactly as the SPA ships it -------------- index.html:369-374 */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
::-webkit-scrollbar{ width:7px; height:7px; }
::-webkit-scrollbar-thumb{ background:rgba(120,170,190,.18); border-radius:4px; }
::-webkit-scrollbar-track{ background:transparent; }
::placeholder{ color:var(--bos-placeholder); }

body{
  background:var(--bos-bg);
  background-color:var(--bos-bg-flat);
  color:var(--bos-text);
  font-family:var(--bos-font-body);
  min-height:100vh;
}

/* ---- ambient view wash (the "mood" layer) ------------ index.html:498-503 */
.bos-vbg{ position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  transition:opacity .6s var(--bos-ease); }
.bos-vbg.is-on{ opacity:1; }
.bos-vbg--command{ background:
  linear-gradient(180deg, rgba(55,233,106,.13), transparent 110px),
  radial-gradient(1200px 820px at 50% 10%, rgba(55,233,106,.07), transparent 60%),
  radial-gradient(820px 600px at 88% 8%, rgba(55,233,106,.04), transparent 55%); }
.bos-vbg--calm{ background:
  linear-gradient(180deg, rgba(55,233,106,.07), transparent 110px),
  radial-gradient(1200px 860px at 50% 6%, rgba(55,233,106,.045), transparent 64%),
  radial-gradient(700px 620px at 20% 24%, rgba(40,120,90,.04), transparent 62%); }

/* ---- top bar ----------------------------------------- index.html:606     */
.bos-topbar{ position:relative; z-index:30; flex:none; height:60px; padding:0 26px;
  display:flex; align-items:center; justify-content:space-between; background:transparent;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); }
.bos-wordmark{ font-family:var(--bos-font-display); font-weight:600; letter-spacing:3px;
  font-size:15px; color:var(--bos-text-max); }
.bos-wordmark b{ color:var(--bos-accent); font-weight:600; }
.bos-subline{ font-family:var(--bos-font-mono); font-size:8px; letter-spacing:2px;
  color:var(--bos-faint); margin-top:3px; }

/* ---- cards ------------------------------------------- index.html:686-691 */
.bos-card{ position:relative; border:1px solid var(--bos-line); border-radius:var(--bos-r-lg);
  background:var(--bos-card); padding:13px 14px; overflow:hidden; }
/* the signature 2px accent hairline across the top of a stat card */
.bos-card__rail{ position:absolute; top:0; left:0; right:0; height:2px; opacity:.6;
  background:linear-gradient(90deg, transparent, var(--rail,var(--bos-accent)), transparent); }
.bos-stat{ font-family:var(--bos-font-display); font-weight:600; font-size:25px; line-height:1;
  color:var(--rail,var(--bos-accent)); }
.bos-stat__label{ margin-top:7px; font-family:var(--bos-font-mono); font-size:7.5px;
  letter-spacing:1px; color:var(--bos-dim); text-transform:uppercase; }

/* ---- greeting / hero --------------------------------- index.html:677-680 */
.bos-greet{ font-family:var(--bos-font-display); font-weight:300; font-size:27px;
  line-height:1.12; letter-spacing:-.4px; color:var(--bos-text-hi); }
.bos-greet strong{ color:#fff; font-weight:500; }
.bos-tag{ display:inline-block; font-family:var(--bos-font-mono); font-size:7.5px;
  letter-spacing:1px; color:var(--bos-accent-ink); background:var(--bos-accent);
  padding:3px 6px; border-radius:4px; }
.bos-quote{ font-size:12.5px; font-style:italic; color:var(--bos-juno-quote); line-height:1.45; }

/* ---- buttons ----------------------------------------- index.html:576,114 */
.bos-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; padding:13px 18px; border:none; border-radius:12px; cursor:pointer;
  font-family:var(--bos-font-body); font-weight:600; font-size:14px; line-height:1;
  transition:filter .15s var(--bos-ease), transform .12s var(--bos-ease); }
.bos-btn:active{ transform:scale(.97); }
.bos-btn--primary{ background:linear-gradient(135deg,var(--bos-accent),var(--bos-accent-deep));
  color:var(--bos-accent-ink); box-shadow:0 6px 22px var(--bos-accent-glow); }
.bos-btn--primary:hover{ filter:brightness(1.06); }
.bos-btn--ghost{ background:rgba(255,255,255,.06); color:var(--bos-text-hi);
  border:1px solid rgba(255,255,255,.2); font-weight:500; }
.bos-btn--agent{ background:transparent; border:1px solid var(--agring,var(--bos-line-strong));
  color:var(--ag,var(--bos-accent)); font-weight:500; font-size:12px; padding:6px 12px;
  border-radius:var(--bos-r-sm); min-height:0; }

/* ---- inputs ------------------------------------------ index.html:569,1465 */
.bos-input{ width:100%; background:var(--bos-surface-2); border:1px solid var(--bos-line-input);
  border-radius:12px; padding:14px 16px; color:var(--bos-text-max);
  font-family:var(--bos-font-body); font-size:14px; outline:none; }
.bos-input--code{ font-family:var(--bos-font-mono); letter-spacing:4px; font-size:16px;
  text-align:center; }
/* Alias so a <textarea class="bos-textarea"> is styled identically to an input.
   panel-kit.js emitted this class while NO rule for it existed anywhere, which
   left every panel textarea as a white browser default inside a dark card. */
.bos-textarea{ width:100%; background:var(--bos-surface-2); border:1px solid var(--bos-line-input);
  border-radius:12px; padding:14px 16px; color:var(--bos-text-max);
  font-family:var(--bos-font-body); font-size:14px; outline:none; }
.bos-composer{ flex:1; min-width:0; max-height:160px; resize:none; overflow-y:auto;
  background:rgba(255,255,255,.05); border:1px solid var(--bos-line-strong);
  border-radius:var(--bos-r-lg); outline:none; color:#fff;
  font-family:var(--bos-font-body); font-size:14px; line-height:1.45; padding:13px 16px; }

/* ---- nav tabs (sliding underline) -------------------- index.html:506-510 */
.bos-tab{ position:relative; display:flex; align-items:center; gap:6px; padding:6px 11px;
  min-height:44px; border:1px solid transparent; border-radius:var(--bos-r-pill);
  background:transparent; cursor:pointer; font-family:var(--bos-font-display); font-size:12px;
  font-weight:500; letter-spacing:.4px; color:var(--bos-muted); white-space:nowrap;
  transition:background-color .16s var(--bos-ease), color .16s var(--bos-ease); }
.bos-tab:hover,.bos-tab:focus-visible{ background:rgba(255,255,255,.05);
  color:var(--bos-text-max); outline:none; }
.bos-tab__dot{ width:6px; height:6px; border-radius:50%; flex:none;
  background:var(--dot,var(--bos-accent)); box-shadow:0 0 6px var(--dot,var(--bos-accent)); }
.bos-tab__u{ position:absolute; left:12px; right:12px; bottom:5px; height:2px; border-radius:2px;
  background:var(--bos-accent); transform:scaleX(0); transform-origin:center;
  transition:transform .19s var(--bos-ease); pointer-events:none; }
.bos-tab:hover .bos-tab__u,.bos-tab:focus-visible .bos-tab__u{ transform:scaleX(1); }

/* ---- segmented mode pill ----------------------------- index.html:533-540 */
.bos-pill{ position:relative; display:flex; align-items:stretch; padding:4px;
  border:1px solid rgba(255,255,255,.05); border-radius:12px; background:rgba(255,255,255,.03);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.bos-pill__slider{ position:absolute; top:4px; bottom:4px; left:0; width:0; border-radius:9px;
  background:linear-gradient(180deg,#5cebab,#38cf8d); z-index:0; pointer-events:none;
  box-shadow:0 6px 22px rgba(55,233,106,.32), 0 1px 0 rgba(255,255,255,.35) inset,
             0 0 0 1px rgba(55,233,106,.25);
  transition:transform .3s var(--bos-ease), width .3s var(--bos-ease); }
.bos-pill__btn{ position:relative; z-index:1; display:inline-flex; align-items:center;
  justify-content:center; gap:7px; line-height:1; padding:0 16px; height:40px; border:none;
  border-radius:9px; background:transparent; color:var(--bos-muted);
  font-family:var(--bos-font-display); font-weight:500; font-size:13px; letter-spacing:.3px;
  cursor:pointer; outline:none; transition:color .16s var(--bos-ease); }
.bos-pill__btn.is-on{ color:var(--bos-accent-ink-2); font-weight:600; }

/* ---- JUNO avatar treatment --------------------------- index.html:651,782 */
/* (a) the COMMANDER (the human) is GOLD — never green. */
.bos-avatar-me{ width:34px; height:34px; flex:none; border-radius:50%;
  background:var(--bos-avatar-fill); border:1px solid var(--bos-gold-ring);
  display:flex; align-items:center; justify-content:center; font-family:var(--bos-font-display);
  font-weight:600; font-size:12px; color:var(--bos-gold-ink); cursor:pointer; }
/* (b) an AGENT in a chat row is a 30px SQUIRCLE tinted with its own colour. */
.bos-avatar-agent{ flex:none; width:30px; height:30px; border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:var(--ag,var(--bos-accent));
  border:1px solid var(--agring,rgba(55,233,106,.35));
  background:var(--agbg,rgba(55,233,106,.08)); }
/* (c) the JUNO CORE ORB — the emblem. Concentric rings + breathing glow. */
.bos-orb{ position:relative; width:94px; height:94px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 38% 30%, #12211a 0%, #0a140e 55%, #05100a 100%);
  animation:bos-orbglow 6s ease-in-out infinite; }
.bos-orb__halo{ position:absolute; top:-40px; left:50%; transform:translateX(-50%);
  width:210px; height:210px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(55,233,106,.16), transparent 64%); }
.bos-orb__dash{ position:absolute; top:-24px; left:50%; width:176px; height:176px;
  border-radius:50%; border:1px dashed rgba(55,233,106,.16);
  animation:bos-spin 30s linear infinite; }
.bos-orb__mark{ width:78px; height:78px; animation:bos-spin-r 16s linear infinite; }
@keyframes bos-orbglow{
  0%,100%{ box-shadow:0 0 46px rgba(55,233,106,.34), inset 0 0 26px rgba(255,255,255,.22); }
  50%    { box-shadow:0 0 70px rgba(55,233,106,.52), inset 0 0 30px rgba(255,255,255,.3); } }
@keyframes bos-spin{   from{ transform:rotate(0);}      to{ transform:rotate(360deg);} }
@keyframes bos-spin-r{ from{ transform:rotate(0);}      to{ transform:rotate(-360deg);} }
/* the mark itself, inline so it needs no network:
   <svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="27" fill="none" stroke="#37E96A" stroke-width="2.4"/>
   <circle cx="32" cy="32" r="8.5" fill="#37E96A"/><circle cx="32" cy="5" r="3.2" fill="#37E96A"/>
   <circle cx="8.5" cy="47" r="3.2" fill="#37E96A"/><circle cx="55.5" cy="47" r="3.2" fill="#37E96A"/></svg>  (index.html:783) */

/* ---- chat bubbles ------------------------------------ index.html:4156    */
.bos-bubble{ max-width:560px; padding:13px 16px; border-radius:var(--bos-r-xl);
  white-space:normal; word-break:break-word; font-size:14px; line-height:1.5;
  font-family:var(--bos-font-body); }
.bos-bubble--them{ background:var(--bos-surface-2); color:var(--bos-text-bubble);
  border:1px solid var(--bos-line); border-bottom-left-radius:var(--bos-r-xs); }
.bos-bubble--me{ background:var(--ag,var(--bos-accent)); color:var(--bos-accent-ink);
  font-weight:500; border-bottom-right-radius:var(--bos-r-xs); }
.bos-daysep{ display:inline-block; padding:6px 14px; border-radius:var(--bos-r-pill);
  background:rgba(255,255,255,.03); border:1px solid var(--bos-line-soft);
  font-family:var(--bos-font-mono); font-size:9px; letter-spacing:1.5px; color:#7d97a6; }

/* ---- toast ------------------------------------------- index.html:95      */
.bos-toast{ position:fixed; left:50%; bottom:40px; transform:translateX(-50%); z-index:2147483647;
  background:rgba(8,16,22,.96); color:#eaf2f6; border:1px solid rgba(245,196,81,.4);
  padding:11px 18px; border-radius:12px; font-family:var(--bos-font-body); font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.5); }

/* ---- entrance ---------------------------------------- index.html:404,4042 */
@keyframes bos-reveal{ from{ opacity:0; transform:translateY(22px); }
                       to  { opacity:1; transform:translateY(0); } }
.bos-reveal{ animation:bos-reveal .55s var(--bos-ease-reveal) both; }

/* ============================================================================
   MOBILE LAYER — copied from the SPA's real breakpoints (index.html:426-490).
   IMPORTANT: the live SPA has NO 390px media query. 390px is the TEST DEVICE
   width, not a breakpoint. The real tiers are 1024 / 900 / 768 / 520.
   The single most load-bearing rule is killing backdrop-filter — on the demo
   phones it is what made the dashboard usable.
   ========================================================================= */
@media (max-width:1024px){
  html,body{ overflow-x:hidden; max-width:100vw; }
  *{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
  .bos-topbar{ height:auto!important; padding:9px 12px!important; flex-wrap:wrap!important;
    gap:8px!important; position:relative!important; }
  .bos-avatar-me{ position:absolute!important; top:10px!important; right:12px!important; }
  .bos-pill{ position:relative!important; transform:none!important; order:2; width:100%;
    justify-content:center; margin-top:2px; }
  .bos-cols{ flex-direction:column!important; gap:12px!important; height:auto!important; }
  .bos-col{ flex:1 1 auto!important; min-width:0!important; max-width:100%!important;
    width:100%!important; }
  .bos-scroll{ overscroll-behavior:contain!important; }
}
@media (max-width:768px){
  .bos-composer{ font-size:16px!important; }  /* stops iOS Safari zoom-on-focus (:443) */
  .bos-rail{ position:fixed; top:0; left:0; bottom:0; width:82vw; max-width:300px; z-index:210;
    background:var(--bos-bg-drawer); transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.22,.61,.36,1);
    box-shadow:16px 0 44px rgba(0,0,0,.55); }
  .bos-rail.is-open{ transform:translateX(0); }
  .bos-rail-backdrop{ position:fixed; inset:0; z-index:205; background:rgba(4,8,10,.62);
    opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease; }
  .bos-rail-backdrop.is-open{ opacity:1; visibility:visible; }
}
@media (max-height:600px){ .bos-logingate{ align-items:flex-start!important; } }
@media (prefers-reduced-motion:reduce){
  .bos-vbg{ transition:none; }
  .bos-orb,.bos-orb__dash,.bos-orb__mark{ animation:none; }
  .bos-reveal{ animation:none; }
}