/* Product Mission Control — hand-written BEM-ish, no build step, no Tailwind
 * (see CLAUDE.md).
 *
 * The design system is ported from the V1 mockup
 * (product-blueprint-mission-control-v22-v1_2.html): a light slate ground, navy
 * ink, and the five accent hues from the architecture drawing. It is a
 * reporting surface first — dense tables, numbers set large, colour used only
 * where it carries meaning.
 *
 * Two deliberate deviations from the mockup:
 *   1. Fonts. The mockup asks for Manrope from Google Fonts; the CSP is
 *      self-only and the other apps already vendor Inter + Raleway, so we reuse
 *      those. Same weights, same rhythm, one less external dependency.
 *   2. Dark mode. The mockup is light-only. The tokens below carry a dark set
 *      derived from its own navy surfaces, so the shared theme.js toggle works
 *      here as it does in the Hub and trust.
 *
 * Theming (docs/adr/0017 pattern): every colour is a token on :root, and
 * [data-theme="dark"] re-points the tokens. Components never name a raw colour.
 */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/static/fonts/inter.woff2") format("woff2");
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/static/fonts/raleway.woff2") format("woff2");
}

:root{
  /* navy scale — the brand header and the rollup surfaces */
  --navy-0:#0A1424; --navy-1:#0D1B2E; --navy-2:#16263F;

  /* surfaces & text */
  --bg:#F3F5FA; --card:#FFFFFF; --border:#E3E8F2; --border-2:#D3DAE8;
  --ink:#16263F; --ink-2:#3D4C66; --mut:#7C8BA3; --mut-2:#A4B0C4;

  /* bright accents (bars, dots) */
  --peri:#7B93E8; --mint:#3DD6A8; --violet:#9B8CE8; --peach:#F0A878; --teal:#4FC9DE;
  /* ink accents (text on white) */
  --peri-i:#4A5FD0; --mint-i:#0FA179; --violet-i:#7263D6; --peach-i:#D07E3C; --teal-i:#1793AE;

  /* semantic aliases — components use these, never a hue name */
  --good:var(--mint-i); --warn:var(--peach-i); --link:var(--peri-i);
  --track:#E7ECF4;
  --shadow-card:0 6px 22px rgba(22,38,63,0.07);
  --shadow-pop:0 18px 44px rgba(13,27,46,0.18);

  --radius:11px; --radius-sm:8px; --radius-lg:14px;
  --content-max:1280px;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head:"Raleway", var(--font);
}

[data-theme="dark"]{
  --bg:#0B1420; --card:#111D2C; --border:#1E2E42; --border-2:#2A3D54;
  --ink:#E6ECF5; --ink-2:#B6C4D8; --mut:#8496AE; --mut-2:#5F7189;

  /* the ink accents are lifted; on a dark card the light-mode inks go muddy */
  --peri-i:#8AA0EE; --mint-i:#45D3A6; --violet-i:#A99AEE; --peach-i:#EFA875; --teal-i:#55C9DE;

  --track:#1C2B3D;
  --shadow-card:0 6px 22px rgba(0,0,0,0.35);
  --shadow-pop:0 18px 44px rgba(0,0,0,0.5);
}

*{box-sizing:border-box; margin:0; padding:0;}

body{
  font-family:var(--font);
  background:var(--bg); color:var(--ink-2); font-size:14px;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-head); letter-spacing:-0.01em;}
a{color:inherit;}
button{font-family:inherit;}

/* ═══ brand header ═══ */
.topbar{
  display:flex; align-items:center; gap:16px; padding:16px 36px;
  background:radial-gradient(120% 160% at 80% 0%, var(--navy-2) 0%, var(--navy-1) 60%, var(--navy-0) 100%);
}
.topbar__brand{display:flex; align-items:center; gap:11px; text-decoration:none;}
.topbar h1{font-size:17px; font-weight:800; letter-spacing:0.4px; color:#fff; line-height:1.1;}
.topbar__eyebrow{font-size:9px; font-weight:700; letter-spacing:2px; color:#B0A4F0; margin-top:2px; display:block;}
.topbar__spacer{flex:1;}
.topbar__who{text-align:right; line-height:1.25; min-width:0;}
.topbar__name{font-size:11.5px; font-weight:700; color:#fff; display:flex; align-items:center; gap:6px; justify-content:flex-end;}
.topbar__mail{font-size:9.5px; font-weight:600; color:#8E9BC0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hbtn{
  font-size:11px; font-weight:800; letter-spacing:0.3px; color:#fff;
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28);
  border-radius:9px; padding:7px 14px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px; transition:background .13s ease;
}
.hbtn:hover{background:rgba(255,255,255,0.22);}
.hbtn--icon{padding:7px 10px;}
.badge--owner{font-size:8px; font-weight:800; letter-spacing:0.6px; padding:2px 6px; border-radius:5px;
  background:var(--teal); color:var(--navy-0);}
.src-pill{
  font-size:8.5px; font-weight:700; letter-spacing:1.2px; color:var(--teal);
  border:1px solid rgba(79,201,222,0.45); background:rgba(79,201,222,0.1);
  border-radius:9px; padding:4px 10px; text-transform:uppercase;
}

/* ═══ rhythm rail (breadcrumb + period) ═══ */
.rail{display:flex; align-items:center; padding:12px 36px; flex-wrap:wrap; row-gap:8px;
  background:var(--card); border-bottom:1px solid var(--border);}
.rail__slot{display:flex; align-items:center; gap:8px; padding:6px 13px; border-radius:9px;
  border:1px solid transparent; max-width:230px; text-decoration:none;}
.rail__tier{font-size:7.5px; font-weight:700; letter-spacing:1.4px; color:var(--mut-2); display:block;}
.rail__nm{font-size:11.5px; font-weight:700; color:var(--mut); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:block;}
.rail__slot--filled{border-color:var(--border);}
a.rail__slot--filled:hover{border-color:var(--border-2); background:var(--bg);}
.rail__slot--filled .rail__nm{color:var(--ink);}
.rail__slot--current{border-color:var(--border-2); background:var(--bg);}
.rail__slot--empty .rail__nm{color:var(--mut-2); font-weight:600;}
.rail__link{width:18px; height:1px; background:var(--border); flex:0 0 auto;}
.rail__link--on{background:var(--border-2);}
.rail__spacer{flex:1; min-width:12px;}
.rail__slot--period{border-color:rgba(123,147,232,0.5);}
.rail__tier--period{color:var(--peri-i) !important;}
.rail__period-sel{border:none; background:transparent; font-family:inherit; font-size:11.5px;
  font-weight:700; color:var(--ink); outline:none; cursor:pointer; padding:0; margin-top:1px; max-width:160px;}

/* ═══ layout ═══ */
.wrap{padding:22px 36px 40px;}
.wrap__inner{max-width:var(--content-max); margin-inline:auto;}

/* ═══ summary strip ═══ */
.strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px;}
@media (max-width:800px){ .strip{grid-template-columns:repeat(2,1fr);} }
.stat{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:13px 15px;}
.stat__lb{font-size:8px; font-weight:700; letter-spacing:1.4px; color:var(--mut);}
.stat__vl{font-size:20px; font-weight:800; color:var(--ink); margin-top:4px;}
.stat__vl small{font-size:11px; font-weight:600; color:var(--mut);}
.stat__dl{font-size:9.5px; font-weight:700; margin-top:2px; color:var(--mut);}
.stat--link{display:block; text-decoration:none; transition:border-color .13s ease, box-shadow .13s ease;}
.stat--link:hover{border-color:var(--ink); box-shadow:0 4px 14px rgba(22,38,63,0.10);}

/* ═══ section headers ═══ */
.sec-h{display:flex; align-items:baseline; gap:12px; margin:2px 2px 12px;}
.sec-h h2{font-size:14px; font-weight:800; color:var(--ink); letter-spacing:0.2px;}
.sec-h__sub{font-size:8.5px; font-weight:700; letter-spacing:1.6px; color:var(--mut);}
.sec-h__n{margin-left:auto; font-size:10px; font-weight:700; color:var(--mut);}

/* ═══ solution chips ═══ */
.solbar{display:flex; gap:8px; flex-wrap:wrap; margin:2px 2px 16px;}
.solchip{font-size:10.5px; font-weight:700; padding:6px 13px; border-radius:9px;
  border:1px solid var(--border-2); color:var(--ink-2); background:var(--card); cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; text-decoration:none; transition:all .12s ease;}
.solchip:hover{border-color:var(--mut);}
.solchip--on{color:#fff; border-color:transparent;}
.sol{font-size:8px; font-weight:800; letter-spacing:0.4px; padding:2px 8px 2px 6px; border-radius:8px;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;}
.sol__dot{display:inline-block; width:6px; height:6px; border-radius:2px; flex:0 0 auto;}

/* One class per solution: the palette lives here, not in a style attribute. */
.sol--ubutler{color:var(--mint-i); background:rgba(61,214,168,0.12);}
.sol--ubutler .sol__dot,.solchip--on.sol--ubutler{background:var(--mint);}
.sol--onit{color:var(--peach-i); background:rgba(240,168,120,0.14);}
.sol--onit .sol__dot,.solchip--on.sol--onit{background:var(--peach);}
.sol--aveny{color:var(--peri-i); background:rgba(123,147,232,0.12);}
.sol--aveny .sol__dot,.solchip--on.sol--aveny{background:var(--peri);}
.sol--ays{color:var(--violet-i); background:rgba(155,140,232,0.14);}
.sol--ays .sol__dot,.solchip--on.sol--ays{background:var(--violet);}

/* ═══ data tables (roster, scorecard, drill children) ═══ */
.dt-wrap{background:var(--card); border:1px solid var(--border-2); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-card);}
.dt-scroll{overflow-x:auto;}
.dt{width:100%; border-collapse:collapse; font-size:14px;}
.dt thead th{text-align:left; padding:13px 18px; background:var(--ink); color:#fff;
  font-size:9.5px; font-weight:800; letter-spacing:1.3px; white-space:nowrap;}
.dt thead th.num{text-align:right;}
.dt thead a{color:#fff; text-decoration:none; display:flex; align-items:center; gap:7px;}
.dt thead th.num a{justify-content:flex-end;}
.dt thead a:hover{opacity:.85;}
.dt__arr{font-size:15px; line-height:1; opacity:.95;}
.dt__arr--idle{opacity:.4; font-size:13px;}
.dt tbody td{padding:14px 18px; border-bottom:1px solid var(--border); vertical-align:middle;}
.dt tbody tr:last-child td{border-bottom:none;}
.dt td.num{text-align:right;}
.dt tbody tr.is-link:hover{background:var(--bg);}
.dt__name{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:-0.2px;}
.dt__name a{text-decoration:none;}
.dt__name a:hover{text-decoration:underline; text-underline-offset:3px;}
.dt__sub{font-size:10px; font-weight:600; color:var(--mut); margin-top:3px;}
.dt__big{font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-0.5px;}
.dt__nps{font-size:19px; font-weight:800; letter-spacing:-0.5px;}
.dt__none{font-size:11px; font-weight:700; color:var(--mut-2); font-style:italic;}
.dt__unit{font-size:9px; font-weight:700; color:var(--mut); letter-spacing:0.3px;}
.dt__flag{font-size:13px; font-weight:800; color:var(--peach-i); cursor:help;}
.caption{font-size:11px; color:var(--mut); line-height:1.55; margin-top:14px; max-width:820px;}

/* NPS banding — the one place colour is load-bearing */
.nps--good{color:var(--good);}
.nps--mid{color:var(--ink);}
.nps--bad{color:var(--warn);}
.nps--none{color:var(--mut-2);}

/* NPS bar with a goal tick (scorecard) */
.npsbar{position:relative; flex:1 1 auto; min-width:60px; max-width:150px; height:7px;
  border-radius:4px; background:var(--track);}
.npsbar__zero{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--mut-2); opacity:.45;}
.npsbar__fill{position:absolute; top:0; bottom:0; border-radius:4px; min-width:3px;}
.npsbar__fill--good{background:var(--mint);} .npsbar__fill--mid{background:var(--peri);}
.npsbar__fill--bad{background:var(--peach);}
.npsbar__goal{position:absolute; top:-2.5px; bottom:-2.5px; width:2.5px; background:var(--good); border-radius:2px;}
.npscell{display:flex; flex-direction:row; align-items:center; justify-content:flex-end; gap:12px; min-width:0;}
.npscell .dt__nps{min-width:44px; text-align:right;}
.gap{font-size:14px; font-weight:800; letter-spacing:-0.3px;}
.gap--met{color:var(--good);} .gap--miss{color:var(--warn);}
.goal-pill{display:inline-block; font-size:10px; font-weight:800; letter-spacing:1px; color:var(--good);
  background:rgba(61,214,168,0.14); border:1px solid rgba(61,214,168,0.4); border-radius:7px;
  padding:2px 9px; margin-left:4px; vertical-align:middle;}

/* ═══ overview bar (the node you are inside) ═══ */
.ob{position:relative; background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:20px; overflow:hidden; display:flex;}
.ob__accent{width:4px; flex:0 0 auto;}
.ob__accent--product{background:var(--peri);} .ob__accent--variant{background:var(--mint);}
.ob__accent--part{background:var(--peri);} .ob__accent--fundamental{background:var(--mint);}
.ob__main{padding:16px 20px; flex:1; min-width:0;}
.ob__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ob__tier{font-size:8px; font-weight:800; letter-spacing:1.6px;}
.ob__tier--product,.ob__tier--part{color:var(--peri-i);}
.ob__tier--variant,.ob__tier--fundamental{color:var(--mint-i);}
.ob__role{font-size:7.5px; font-weight:800; letter-spacing:1.2px; color:var(--mut-2);}
.ob__name{font-size:20px; font-weight:800; color:var(--ink); letter-spacing:0.2px; margin-top:7px;}
.ob__tag{font-size:11px; font-weight:700; color:var(--mut); margin-top:2px;}
.ob__desc{font-size:11px; color:var(--ink-2); opacity:.85; line-height:1.5; margin-top:7px; max-width:640px;}
.ob__stats{display:flex; gap:26px; margin-top:15px; flex-wrap:wrap;}
.ob__stat{min-width:70px;}
.ob__lb{font-size:7.5px; font-weight:800; letter-spacing:1.3px; color:var(--mut);}
.ob__vl{font-size:17px; font-weight:800; color:var(--ink); margin-top:3px;}
.ob__vl--good{color:var(--good);} .ob__vl--warn{color:var(--warn);}
.ob__sub{font-size:8.5px; font-weight:600; color:var(--mut-2); margin-top:1px;}

/* ═══ fundamental detail ═══ */
.fchips{display:flex; gap:7px; flex-wrap:wrap; margin-top:12px;}
.fchip{font-size:8.5px; padding:4px 11px; border-radius:8px; background:rgba(61,214,168,0.14);
  color:var(--mint-i); font-weight:700;}
.fchip--handoff{background:rgba(240,168,120,0.14); color:var(--peach-i);}

/* ═══ metric context overlay ═══ */
.mov-t{display:inline-block; cursor:pointer; border-bottom:1px dotted transparent; transition:border-color .12s ease;}
.mov-t:hover{border-bottom-color:var(--border-2);}
.mov{position:fixed; width:340px; max-height:70vh; background:var(--card); border:1px solid var(--border-2);
  border-radius:12px; box-shadow:var(--shadow-pop); padding:15px 17px; z-index:120; text-align:left; overflow-y:auto;}
.mov__title{font-size:12.5px; font-weight:800; color:var(--ink); letter-spacing:0.2px; display:flex; align-items:center; gap:8px;}
.mov__pin{margin-left:auto; font-size:10px; color:var(--link);}
.mov__def{font-size:11px; font-weight:500; color:var(--ink-2); line-height:1.55; margin-top:7px;}
.mov__facts{display:flex; flex-wrap:wrap; gap:5px 14px; margin-top:11px; padding-top:11px; border-top:1px solid var(--border);}
.mov__fact{display:flex; gap:6px; font-size:10px;}
.mov__fact span{font-weight:600; color:var(--mut);}
.mov__fact b{font-weight:800; color:var(--ink);}
.mov__note{margin-top:11px; padding:9px 11px; background:rgba(240,168,120,0.09);
  border:1px solid rgba(240,168,120,0.4); border-radius:9px;}
.mov__note-h{font-size:7.5px; font-weight:800; letter-spacing:1.3px; color:var(--peach-i);}
.mov__note p{font-size:10.5px; font-weight:500; color:var(--ink-2); line-height:1.5; margin-top:4px;}

/* ═══ buttons, banners, empty ═══ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--border-2);
  border-radius:var(--radius-sm); font-size:11px; font-weight:800; padding:9px 18px; cursor:pointer;
  letter-spacing:0.3px; background:var(--card); color:var(--ink-2); text-decoration:none;}
.btn:hover{border-color:var(--mut);}
.btn--pri{background:var(--teal-i); border-color:var(--teal-i); color:#fff;}
.btn--pri:hover{background:#127E96; border-color:#127E96;}
.btn--sm{font-size:10px; padding:6px 12px; border-radius:7px;}
.banner{border:1px solid var(--border); background:rgba(123,147,232,0.08); border-radius:10px;
  padding:11px 14px; font-size:11px; color:var(--ink-2); margin-bottom:16px; line-height:1.5;}
.empty{font-size:11.5px; font-weight:600; color:var(--mut); font-style:italic;
  background:var(--card); border:1px dashed var(--border-2); border-radius:var(--radius); padding:22px;}
.muted{color:var(--mut);}
.alert{background:rgba(240,168,120,0.12); color:var(--peach-i); padding:9px 12px;
  border-radius:var(--radius-sm); font-size:11.5px; font-weight:700;}

/* ═══ footer ═══ */
.footer{padding:12px 36px 26px; display:flex; gap:20px; align-items:center; font-size:9.5px;
  color:var(--mut); flex-wrap:wrap;}
.footer b{color:var(--ink-2);}

/* ═══ forms (login) + access matrix ═══ */
.form{display:grid; gap:12px;}
.field{display:grid; gap:4px;}
.field__label{font-size:8.5px; font-weight:800; letter-spacing:1.4px; color:var(--mut);}
.field__input{width:100%; background:var(--card); border:1px solid var(--border-2); border-radius:var(--radius-sm);
  color:var(--ink); font-family:inherit; font-size:12px; padding:9px 11px; outline:none;}
.field__input:focus{border-color:var(--teal-i); box-shadow:0 0 0 3px rgba(79,201,222,0.15);}
.check{font-size:11px; font-weight:600; display:flex; gap:7px; align-items:center;}

.perm{width:100%; border-collapse:collapse;}
.perm th,.perm td{padding:12px 16px;}
.perm thead th{text-align:left; background:var(--ink); color:#fff; font-size:9.5px; font-weight:800;
  letter-spacing:1.3px; white-space:nowrap;}
.perm thead th.perm__caphead{text-align:center;}
.perm tbody tr{border-top:1px solid var(--border);}
.perm__cell{text-align:center;}
.perm__cell--access{border-left:1px solid var(--border);}
.perm__name{font-weight:800; font-size:13px; color:var(--ink); display:block;}
.perm__email{font-size:10px; color:var(--mut); font-weight:600;}
.permcell{width:28px; height:28px; border-radius:7px; border:1px solid var(--border-2); cursor:pointer;
  font-size:.85rem; background:transparent; color:var(--mut);}
.permcell--on{background:var(--mint-i); border-color:var(--mint-i); color:#fff;}
.permcell:focus-visible{outline:2px solid var(--teal-i); outline-offset:2px;}
.perm__err{color:var(--warn); font-size:9px; font-weight:700; margin-top:3px;}

/* ═══ sign-in / no access (no chrome) ═══ */
.gate{min-height:100vh; display:grid; place-items:center; padding:24px;}
.gate__panel{width:100%; max-width:420px; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px 26px; display:grid; gap:12px; box-shadow:var(--shadow-card);}
.gate__panel--wide{max-width:480px; text-align:center; justify-items:center;}
.gate__brand{display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:4px;}
.gate__brand h1{font-size:16px; font-weight:800; color:var(--ink); letter-spacing:0.3px;}
.gate__eyebrow{font-size:8.5px; font-weight:800; letter-spacing:2px; color:var(--violet-i);}
.gate__title{font-size:19px; font-weight:800; color:var(--ink);}
.gate__hint{font-size:11.5px; color:var(--mut); font-weight:600;}
.gate__body{font-size:12.5px; color:var(--ink-2); line-height:1.55;}