/* HQ's one stylesheet for the shell, shared by every page of the app. A room keeps only its own
   room's rules, in its own <style>, with every class carrying that room's prefix.

   What lives here: the tokens (Blaster on Graphite, the settled house look from Marketing HQ's
   folded page), the ecosystem bar, the Test band, sign-in and the locked view, the rail with its
   three rhythms, the plates a room's content sits on, the Overview's doors, an empty room, and the
   one flash. The names of the shell's own pieces (.sysbar, .shell, .rail, .nav, .main, .mark, .sw,
   .seg, .railfoot, .acct, .auth, .locked, .flash) are the ones Marketing HQ's source already used,
   so a room body lifted from that source drops in unchanged. Anything new here carries the hq-
   prefix, and HQ already owns .in, .fn, .rep and .cs, so no room may reuse those four.

   Reduced motion, from the system or from html[data-motion=reduce], turns off every flight and
   entrance. A room that animates must do it with transitions or animations this block can reach. */

@font-face { font-family:"Manrope"; src:url("../fonts/manrope.woff2") format("woff2-variations"); font-weight:100 900; font-display:swap; }
/* Instrument Serif sets the letters themselves (the Desk's cards, the Seat, the crop and the person view), so
   --serif names it. A SIL Open Font License 1.1 typeface (github.com/Instrument/instrument-serif); the font
   file carries its own copyright and license notice, so ship it whole and never subset or rename it. */
@font-face { font-family:"Instrument Serif"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/instrument-serif.woff2") format("woff2"); }

:root {
  --bg:#0f1011; --panel:#2b2d2f; --sunk:#1c1d1e; --line:rgba(255,255,255,.10); --hair:rgba(255,255,255,.07);
  --ink:#eef0f1; --ink2:#dcdee0; --gray:#b5b8bb; --faint:#95989c; --paper:#f4f4f5;
  --dot:#d0625a; --ok:#8fb595; --hold:#d6bf63; --cool:#7ba3b4;
  --hq:#f07040; --hq2:#f5936b; --hqdim:#955c48; --rail:#1f2122;
  --pew:#33363a; --pew-line:#50545a; --pew-in:#27292c;
  --g:24px; --gg:48px; --r:14px; --ri:9px;
  --f:"Manrope",system-ui,sans-serif; --fm:ui-monospace,"SF Mono",Menlo,monospace; --serif:"Instrument Serif",Georgia,serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .08'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@media (max-width:1100px) { :root { --g:20px; --gg:40px; } }
@media (max-width:640px)  { :root { --g:16px; --gg:32px; } }

* { box-sizing:border-box; }
html { color-scheme:dark; }
html, body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--f); font-weight:300;
  -webkit-font-smoothing:antialiased; font-size:15px; }
a { color:inherit; }
button { font-family:inherit; }
.hide { display:none !important; }

/* ---- the ecosystem bar: the same doors as every other app, HQ after Mill ---- */
.sysbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px 20px;
  background:rgba(20,21,23,.72); -webkit-backdrop-filter:blur(20px) saturate(140%); backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08); font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
.sysbar nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.sysbar nav a { color:var(--gray); text-decoration:none; cursor:pointer; }
.sysbar nav a:hover { color:var(--ink); }
.sysbar nav .here { color:var(--hq); font-weight:600; }
.acct { position:relative; display:flex; align-items:center; gap:10px; }
.acctchip { width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); font-size:11px; letter-spacing:.06em; display:grid; place-items:center; cursor:pointer; padding:0; }
.acctmenu { position:absolute; right:0; top:34px; background:var(--panel); border:1px solid var(--line); border-radius:6px;
  padding:10px 14px; min-width:220px; text-transform:none; letter-spacing:0; font-size:13px; z-index:20; }
.acctemail { color:var(--gray); margin-bottom:8px; word-break:break-all; }
.acctmenu a { color:var(--dot); cursor:pointer; text-decoration:none; }

/* ---- the Test band: across the top of every room, so the mode is never a guess ---- */
.hq-band { display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:7px 20px; font-size:12.5px; line-height:1.45;
  border-bottom:1px solid rgba(255,255,255,.08); }
.hq-band b { font-size:11px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; }
.hq-band span { color:var(--ink2); }
.hq-band a { margin-left:auto; color:inherit; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; font-weight:600; opacity:.85; }
.hq-band a:hover { opacity:1; }
.hq-band.hq-test { background:rgba(214,191,99,.10); color:var(--hold); border-bottom-color:rgba(214,191,99,.28); }
.hq-band.hq-live { background:rgba(208,98,90,.16); color:#f0a39c; border-bottom-color:rgba(208,98,90,.5); }
.hq-band.hq-live span { color:#f6d4d0; }
.hq-sample { padding:5px 20px; font-size:12px; color:var(--cool); background:rgba(92,124,168,.10); border-bottom:1px solid rgba(123,163,180,.25); }
.hq-sample b { letter-spacing:.2em; text-transform:uppercase; font-size:11px; font-weight:700; margin-right:10px; }

/* ---- the threshold: sign-in is paper, everything past it is the instrument ---- */
.auth { max-width:360px; margin:120px auto 0; padding:0 24px; }
.auth h1 { margin:0; font-size:26px; font-weight:200; letter-spacing:-.01em; color:var(--paper); }
.auth .sub { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); margin:6px 0 26px; }
.auth label { display:block; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }
.auth input { width:100%; font-family:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line);
  background:var(--sunk); color:var(--ink); border-radius:4px; margin-bottom:12px; }
.auth button { width:100%; font-family:inherit; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  padding:11px 14px; border:0; background:var(--ink); color:var(--bg); border-radius:4px; cursor:pointer; }
.auth .pwwrap { position:relative; }
.auth .pwwrap input { padding-right:44px; }
.auth .pwwrap .pweye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:auto; margin:0;
  background:none; border:none; cursor:pointer; color:var(--faint); padding:6px; display:flex; align-items:center; }
.auth .pwwrap .pweye:hover { color:var(--gray); }
.pweye svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.pweye .slash { display:none; }
.pweye.on .slash { display:block; }
.auth button.authalt { margin-top:12px; padding:0; background:none; border:0; color:var(--gray); font-size:12px;
  letter-spacing:0; text-transform:none; text-decoration:underline; text-underline-offset:3px; font-weight:400; }
.auth button.authalt:hover { color:var(--ink); }
.auth .ordiv { text-align:center; color:var(--faint); font-size:11px; margin:14px 0; }
.auth .gbtn { background:transparent; border:1px solid var(--line); color:var(--ink2); display:flex; gap:10px;
  align-items:center; justify-content:center; text-transform:none; letter-spacing:0; font-weight:400; font-size:13px; }
.auth .gbtn svg { width:16px; height:16px; }
.auth .msg { font-size:12.5px; color:var(--gray); margin-top:14px; min-height:1.4em; line-height:1.5; }

.locked { max-width:460px; margin:120px auto 0; padding:0 24px; }
.locked h1 { margin:0 0 10px; font-size:24px; font-weight:200; color:var(--paper); }
.locked p { color:var(--gray); line-height:1.6; }
.locked a { color:var(--dot); cursor:pointer; }

/* ---- the shell: a rail of rooms by rhythm, and the room beside it ---- */
.shell { display:grid; grid-template-columns:236px minmax(0,1fr); min-height:calc(100vh - 42px); }
.rail { position:sticky; top:0; height:100vh; overflow-y:auto; border-right:1px solid rgba(255,255,255,.08);
  background:var(--grain),rgba(255,255,255,.03); padding:22px 14px 18px; display:flex; flex-direction:column; gap:16px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.07) transparent; }
.rail::-webkit-scrollbar { width:6px; background:transparent; }
.rail::-webkit-scrollbar-thumb { background:rgba(255,255,255,.07); border:0; border-radius:6px; }
.mark { display:flex; align-items:center; gap:10px; padding:0 6px; text-decoration:none; }
.mark .glyph { width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(160deg,rgba(240,112,64,.24),rgba(240,112,64,.056)); border:1px solid rgba(240,112,64,.38); color:var(--hq2); }
.mark .glyph svg { width:17px; height:17px; }
.mark b { display:block; font-size:15px; font-weight:600; color:var(--paper); }
.mark small { display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-top:2px; }
.nav { display:flex; flex-direction:column; gap:1px; }
.nav .g { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:20px 9px 8px; font-weight:600; }
.nav .g:first-child { margin-top:0; }
.nav a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:7px; text-decoration:none; color:var(--gray);
  font-size:14px; border:1px solid transparent; }
.nav a svg { width:16px; height:16px; flex:none; color:var(--faint); }
.nav a:hover { color:var(--ink); background:rgba(255,255,255,.03); }
.nav a.on { color:var(--paper); background:rgba(240,112,64,.13); border-color:rgba(240,112,64,.26); }
.nav a.on svg { color:var(--hq2); }
.nav a .ct { margin-left:auto; font-family:var(--fm); font-size:11.5px; color:var(--faint); }
.nav a .ct.wait { color:#1c1a10; background:var(--hold); border-radius:999px; padding:1px 7px; font-weight:600; }
.nav a .ct:empty { display:none; }
.sw { margin-top:auto; border-top:1px solid var(--hair); padding:14px 4px 0; }
.sw h3 { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; font-weight:600; }
.seg { display:flex; flex-direction:column; gap:4px; }
.seg button { font-size:13.5px; color:var(--gray); background:transparent; border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  text-align:left; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.seg button small { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.seg button:hover { color:var(--ink); }
.seg button.on { color:var(--paper); border-color:rgba(240,112,64,.47); background:rgba(240,112,64,.084); }
.seg button.on small { color:var(--hq2); }
.sw p { font-size:12.5px; color:var(--faint); line-height:1.5; margin:10px 2px 0; }
.sw p a { color:var(--ink2); }
.railfoot { font-size:12.5px; color:var(--faint); line-height:1.5; border-top:1px solid var(--hair); padding:12px 4px 0; }
.railfoot b { color:var(--ink2); font-weight:500; }

.main { min-width:0; position:relative;
  background:var(--grain),radial-gradient(1000px 640px at 88% 0%,rgba(240,112,64,.11),transparent 62%),radial-gradient(900px 760px at 0% 34%,rgba(92,124,168,.10),transparent 64%),radial-gradient(1000px 700px at 62% 100%,rgba(143,181,149,.06),transparent 62%),#0f1011; }

/* ---- plates: smoked glass, the deepest gutter of wall between them ---- */
/* the frame, as the folded prototype lays it: content starts close to the menu, 16px of wall around the first
   plate, 36px between plates, and no width cap, so a room is as wide as the fold's */
.hq-room { padding:16px 16px 72px; }
.hq-plate { background:var(--grain),linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 55%,rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 40px 80px -50px rgba(0,0,0,.95);
  -webkit-backdrop-filter:blur(22px) saturate(135%); backdrop-filter:blur(22px) saturate(135%);
  border-radius:26px; padding:22px 26px; margin-top:36px; }
.hq-plate:first-child { margin-top:0; }
.hq-who { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gray); }
.hq-plate h1 { margin:8px 0 10px; font-size:33px; font-weight:200; letter-spacing:-.015em; color:var(--paper); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hq-plate h1 .hq-wn { font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); border:1px dashed var(--line); border-radius:2px; padding:4px 8px; font-weight:600; }
.hq-plate p { margin:0; color:var(--gray); font-size:15.5px; line-height:1.62; max-width:74ch; }
.hq-plate p b { color:var(--ink2); font-weight:500; }
.hq-crumb { display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); text-decoration:none; }
.hq-crumb:hover { color:var(--ink); }
.hq-plate h2 { margin:0 0 16px; font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--paper); }
.hq-plate h2 small { margin-left:10px; font-size:11px; letter-spacing:.04em; text-transform:none; font-weight:300; color:var(--faint); }

/* the Overview's doors: one column a rhythm, each room one door */
.hq-doors { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px 16px; align-items:start; }
.hq-col { display:flex; flex-direction:column; gap:8px; }
.hq-col h3 { margin:0 0 2px; font-size:12px; font-weight:600; color:var(--faint); }
.hq-door { display:flex; flex-direction:column; gap:3px; text-decoration:none; background:radial-gradient(72% 260px at 50% 0,rgba(255,255,255,.07) 0%,rgba(255,255,255,.025) 48%,rgba(255,255,255,0) 80%),var(--pew);
  border:1px solid var(--pew-line); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 26px 50px -28px rgba(0,0,0,.9); border-radius:10px;
  padding:13px 16px 12px; position:relative; transition:border-color .15s; }
.hq-door::after { content:"\2192"; position:absolute; right:14px; top:13px; color:var(--faint); font-size:14px; }
.hq-door:hover { border-color:rgba(255,255,255,.3); }
.hq-door:hover::after { color:var(--ink); }
.hq-door .hq-dt { font-size:15px; font-weight:500; color:var(--paper); padding-right:22px; }
.hq-door .hq-dl { font-size:12.5px; color:var(--faint); line-height:1.45; }
.hq-door.hq-wait { border-color:rgba(214,191,99,.38); }
.hq-door.hq-wait .hq-dl { color:var(--hold); }
@media (max-width:1100px) { .hq-doors { grid-template-columns:1fr; } }

/* an empty room: honest about being empty, and says what will live here */
.hq-empty { border:1px dashed var(--pew-line); border-radius:var(--r); padding:calc(var(--g)*1.4) calc(var(--g)*1.2); color:var(--faint); line-height:1.6; font-size:14px; }
.hq-empty b { display:block; color:var(--ink2); font-weight:500; font-size:15px; margin-bottom:4px; }
.hq-empty code { font-family:var(--fm); font-size:12.5px; color:var(--gray); }

.flash { position:fixed; left:50%; bottom:26px; transform:translate(-50%,12px); background:var(--ink); color:var(--bg); padding:9px 16px; border-radius:6px;
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:60; }
.flash.on { opacity:1; transform:translate(-50%,0); }
.flash.bad { background:var(--dot); color:#fff; }

/* ---- the menu, roomier as the screen grows (the prototype's own steps: 268px from 1500px, 292px from 1800px) ---- */
@media (min-width:1500px) {
  .shell { grid-template-columns:268px minmax(0,1fr); }
  .rail { padding:28px 18px 22px; gap:20px; }
  .mark { gap:12px; }
  .mark .glyph { width:34px; height:34px; border-radius:9px; }
  .mark .glyph svg { width:19px; height:19px; }
  .mark b { font-size:16px; }
  .nav { gap:3px; }
  .nav a { font-size:15px; padding:9px 12px; gap:12px; }
  .nav a svg { width:17px; height:17px; }
  .nav a .ct { font-size:12px; }
  .nav .g { margin:24px 12px 9px; font-size:11px; }
  .sw h3 { font-size:11px; }
  .sw p, .railfoot { font-size:13px; }
}
@media (min-width:1800px) {
  .shell { grid-template-columns:292px minmax(0,1fr); }
  .rail { padding:32px 22px 24px; }
  .nav a { font-size:15.5px; padding:10px 13px; }
  .nav .g { margin:28px 13px 10px; }
}

/* ---- phones: the rail lays down along the top and the rooms wrap as chips ---- */
@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .rail { position:static; height:auto; border-right:0; border-bottom:1px solid rgba(255,255,255,.08); padding:14px 14px 12px; gap:12px; }
  .nav { flex-direction:row; flex-wrap:wrap; gap:6px; }
  .nav .g { flex-basis:100%; margin:10px 2px 0; }
  .nav .g:first-child { margin-top:0; }
  .nav a { padding:6px 10px; border-color:rgba(255,255,255,.08); }
  .sw { margin-top:0; }
  .seg { flex-direction:row; }
  .seg button { flex:1; }
  .railfoot { display:none; }
  .hq-room { padding:12px 12px 36px; }
  .hq-plate { border-radius:20px; padding:16px; margin-top:22px; }
  .hq-plate h1 { font-size:28px; }
  .sysbar { padding:8px 14px; }
  .hq-band { padding:7px 14px; }
}

/* ---- reduced motion: system or html[data-motion=reduce]; every flight and entrance off ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation:none !important; transition:none !important; scroll-behavior:auto !important;
}