/* ============================================================
   Floowed Command Center — shared stylesheet
   Ribbon design system · Stripe-hard white · ink #121212 ·
   electric purple #7D5BEA · hairlines · light Sora display
   ============================================================ */

/* Self-hosted fonts (latin subset) — CSP blocks fonts.googleapis.com,
   and avoiding the third-party round trip removes a DNS + TLS handshake. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/inter-300.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-500.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300; font-display: swap; src: url(assets/fonts/sora-300.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/sora-400.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/sora-500.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/sora-600.woff2) format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/sora-700.woff2) format('woff2'); }

:root{
  --ink:          #121212;
  --ink-2:        #2b2e38;
  --ink-3:        #454a58;
  --muted:        #5a5f6e;
  --muted-2:      #9aa0af;
  --line:         rgba(18,18,18,.08);
  --line-2:       rgba(18,18,18,.14);
  --paper:        #f8f8fb;     /* app canvas — Ribbon cool gray */
  --paper-2:      #eef0f6;     /* one step deeper tint (tags, insets) */
  --paper-3:      #e4e7f0;
  --white:        #ffffff;
  --dark:         #0f0f13;     /* Ribbon dark chapter */

  --accent:       #7d5bea;     /* Ribbon electric purple */
  --accent-deep:  #6a48d6;
  --accent-soft:  #f1ecfd;
  --accent-wash:  #f7f4fe;

  /* Ribbon accent family */
  --chartreuse:   #f1f1a3;
  --lavender:     #ac9de1;
  --sky:          #9dbfda;
  --pink:         #e3c0da;
  --sand:         #e9d2a7;
  --grad-accent:  linear-gradient(90deg, var(--lavender), var(--accent));

  --ok:           #1f8d5a;
  --ok-soft:      #e3f3eb;
  --warn:         #b9751f;
  --warn-soft:    #fbefde;
  --err:          #b33838;
  --err-soft:     #fbe4e4;

  /* team colours — deep ends of the Ribbon accent pairs */
  --team-front:   #7d5bea;
  --team-mkt:     #c98ab4;
  --team-cs:      #6f9cc2;
  --team-ops:     #c2a060;

  --mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;
  --sans:         'Inter', -apple-system, system-ui, sans-serif;
  --display:      'Sora', 'Inter', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{display:block}
::selection{background:rgba(125,91,234,.18)}

/* ============ APP SHELL ============ */
.app{
  display:grid;
  grid-template-columns:224px 1fr;
  min-height:100vh;
}

/* Sidebar — raised white panel against the cool-gray canvas */
.side{
  background:var(--white);
  border-right:1px solid var(--line);
  padding:22px 0 22px;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.side-brand{
  display:flex; align-items:center; gap:10px;
  padding:0 20px 22px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.side-brand img{height:20px}
.side-brand .tag{
  font-family:var(--mono); font-size:10px;
  padding:2px 7px; border:1px solid var(--line-2); border-radius:4px;
  letter-spacing:.08em; color:var(--ink-3); text-transform:uppercase;
  margin-left:auto;
}
.side-section{
  padding:16px 20px 6px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.side-link{
  display:flex; align-items:center; gap:10px;
  padding:8px 20px;
  font-size:13.5px; color:var(--ink-2);
  position:relative;
  transition:background .12s ease, color .12s ease;
}
.side-link:hover{background:rgba(18,18,18,.03)}
.side-link .dot{
  width:7px; height:7px; border-radius:2px;
  background:var(--accent); flex-shrink:0;
}
.side-link[data-team="front"] .dot{background:var(--team-front)}
.side-link[data-team="mkt"] .dot{background:var(--team-mkt)}
.side-link[data-team="cs"] .dot{background:var(--team-cs)}
.side-link[data-team="ops"] .dot{background:var(--team-ops)}
.side-link.active{
  background:var(--accent-wash);
  color:var(--ink);
  font-weight:500;
}
.side-link.active::before{
  content:""; position:absolute; left:0; top:5px; bottom:5px; width:2.5px;
  border-radius:0 2px 2px 0;
  background:linear-gradient(180deg, var(--lavender), var(--accent));
}
.side-link .sub{
  margin-left:auto;
  font-family:var(--mono); font-size:10px; color:var(--muted);
}
.side-link .sub.built{color:var(--warn)}
.side-link .sub.live{color:var(--ok)}

/* Agent name takes the middle slot now */
.side-link .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-link .sub{margin-left:0}

/* Caret toggle */
.side-link .caret{
  width:18px; height:18px; border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--muted);
  transition:transform .18s ease, background .15s, color .15s;
  margin-left:4px; margin-right:-4px;
  padding:0;
}
.side-link .caret:hover{background:rgba(18,18,18,.06);color:var(--ink-2)}
.side-agent.open > .side-link .caret{transform:rotate(180deg);color:var(--accent)}

/* Sub-dashboards drawer */
.side-agent{position:relative}
.side-subs{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  background:rgba(18,18,18,.015);
}
.side-agent.open > .side-subs{max-height:260px}
.side-sublink{
  display:flex; align-items:center; gap:10px;
  padding:7px 20px 7px 40px;
  font-size:12.5px; color:var(--ink-3);
  transition:background .12s, color .12s;
  position:relative;
}
.side-sublink::before{
  content:""; position:absolute; left:28px; top:0; bottom:0;
  width:1px; background:var(--line);
}
.side-sublink:hover{background:rgba(18,18,18,.03); color:var(--ink)}
.side-sublink.active{background:var(--accent-wash); color:var(--ink); font-weight:500}
.side-sublink.active .sub-bullet{background:var(--accent)}
.side-sublink .sub-bullet{
  width:5px; height:5px; border-radius:50%;
  background:var(--muted-2); flex-shrink:0;
  position:relative; z-index:1;
  box-shadow:0 0 0 3px var(--white);
}
.side-sublink:hover .sub-bullet{background:var(--accent)}
.side-sublink .sub-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot{
  margin-top:auto;
  padding:16px 20px;
  border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--muted);
  line-height:1.7;
}
.side-foot b{color:var(--ink); font-weight:500}

/* Main column */
.main{
  min-width:0;
  display:flex; flex-direction:column;
}

/* Top bar — Ribbon nav: translucent white, blur, hairline */
.topbar{
  display:flex; align-items:center; gap:16px;
  padding:16px 32px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:20;
}
.breadcrumb{
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  letter-spacing:.05em;
  display:flex; gap:8px; align-items:center;
}
.breadcrumb b{color:var(--ink); font-weight:500}
.breadcrumb .sep{color:var(--muted-2)}
.topbar-spacer{flex:1}
.clock{
  font-family:var(--mono); font-size:11.5px; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.clock .live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(31,141,90,.5);
  animation:pulse-dot 2s infinite;
}
@keyframes pulse-dot{
  0%  { box-shadow: 0 0 0 0 rgba(31,141,90,.5); }
  70% { box-shadow: 0 0 0 7px rgba(31,141,90,0); }
  100%{ box-shadow: 0 0 0 0 rgba(31,141,90,0); }
}
.topbar-btn{
  font-family:var(--mono); font-size:11.5px;
  padding:7px 12px; border:1px solid var(--line-2);
  border-radius:5px; background:var(--white);
  color:var(--ink-2);
  transition:all .15s;
}
.topbar-btn:hover{border-color:rgba(18,18,18,.4); color:var(--ink)}

/* ============ UTILITIES ============ */
.mono{font-family:var(--mono)}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted);
}
.eyebrow .live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 0 rgba(31,141,90,.5);
  animation:pulse-dot 2s infinite;
}
.eyebrow .live-dot.warn{background:var(--warn);animation:pulse-dot-w 2s infinite}
@keyframes pulse-dot-w{
  0%{box-shadow:0 0 0 0 rgba(185,117,31,.5)}
  70%{box-shadow:0 0 0 7px rgba(185,117,31,0)}
  100%{box-shadow:0 0 0 0 rgba(185,117,31,0)}
}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px; border-radius:4px;
  font-family:var(--mono); font-size:10.5px;
  border:1px solid var(--line-2); background:var(--white);
  color:var(--ink-2); letter-spacing:.04em;
}
.chip.live{color:var(--ok);border-color:rgba(31,141,90,.25);background:var(--ok-soft)}
.chip.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.chip.built{color:var(--warn);border-color:rgba(185,117,31,.25);background:var(--warn-soft)}
.chip.built::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}
.chip.err{color:var(--err);border-color:rgba(179,56,56,.25);background:var(--err-soft)}
.chip.err::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--err)}
.chip.fixture{color:var(--muted);border-color:var(--line);background:var(--paper-2);font-style:italic;opacity:.8}

/* ============ FIXTURE DIMMING ============ */
/* Any element with .fixture is visually de-emphasised — opacity + blur.
   .vital.fixture / .card.fixture / tr.fixture all get this automatically.
   loadLive() strips .fixture when real data lands. */
.vital.fixture,
.card.fixture,
tr.fixture,
.row.fixture,
.metric-block.fixture,
.kpi.fixture,
.con-node.fixture,
.cn-mini.fixture,
.team-row.fixture,
.t-met.fixture,
.stream.fixture,
.s-item.fixture,
.acct-card.fixture,
.kv-list.fixture,
.q-row.fixture,
.agent-head.fixture { opacity:.35; filter:blur(2px); }

/* Pane-level fixture: dim the whole section + show a "demo data" badge */
.pane.fixture { position:relative; }
.pane.fixture::before {
  content:"demo data";
  position:absolute; top:12px; right:16px; z-index:10;
  font-family:var(--mono); font-size:10px; color:var(--muted);
  background:var(--paper-3); border:1px solid var(--line);
  padding:2px 7px; border-radius:4px; pointer-events:none;
}
.pane.fixture .vital,
.pane.fixture .card,
.pane.fixture tr,
.pane.fixture .row { opacity:.35; filter:blur(2.5px); }

/* ============ FIXTURE BANNER ============ */
/* Slim strip that appears on dashboards where data is not yet wired.
   Add class="fixture-banner" to any section or wrapper. */
.fixture-banner{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px; border-radius:8px; margin-bottom:16px;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(18,18,18,.04);
  font-family:var(--mono); font-size:11px; color:var(--muted);
}
.fixture-banner .fb-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--muted); opacity:.5; flex-shrink:0;
}
.fixture-banner .fb-msg{ flex:1 }
.fixture-banner .fb-msg b{ color:var(--ink-2); font-style:normal }
.fixture-banner .fb-dismiss{
  font-family:var(--mono); font-size:10px; color:var(--muted);
  opacity:.6; cursor:pointer; padding:2px 6px; border-radius:4px;
  border:1px solid var(--line-2); background:var(--white);
  transition:opacity .12s;
}
.fixture-banner .fb-dismiss:hover{ opacity:1 }
.fixture-banner.dismissed{ display:none }

/* ============ HEADINGS ============ */
/* Ribbon display type: light Sora, tight tracking, no italics —
   em reads as a flat purple accent instead. */
.h-display{
  font-family:var(--display); font-weight:300;
  letter-spacing:-.02em; line-height:1.05;
}
.h-display em{font-style:normal; color:var(--accent); font-weight:300}

/* section head reused across pages */
.sec-head{
  display:flex; align-items:baseline; gap:14px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
  margin-bottom:20px;
}
.sec-head h2{
  font-family:var(--display); font-weight:400;
  font-size:20px; letter-spacing:-.015em;
}
.sec-head h2 em{font-style:normal; color:var(--accent); font-weight:400}
.sec-head .num{font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.1em}
.sec-head .spacer{flex:1}
.sec-head .meta{font-family:var(--mono); font-size:11px; color:var(--muted)}
.sec-head .meta a{color:var(--accent)}

/* gradient kicker rule — the Ribbon family signature.
   Drop <span class="kicker-rule"></span> above any heading. */
.kicker-rule{
  display:block; width:40px; height:3px; border-radius:2px;
  background:var(--grad-accent);
  margin-bottom:16px;
}

/* btn — sharp rectangles, never pills */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:5px;
  font-family:var(--sans); font-weight:500; font-size:13.5px;
  border:1px solid transparent; transition:all .15s;
}
.btn.primary{background:var(--accent); color:#fff}
.btn.primary:hover{background:var(--accent-deep)}
.btn.ghost{border-color:var(--line-2); color:var(--ink); background:var(--white)}
.btn.ghost:hover{border-color:rgba(18,18,18,.4)}