/* ============================================================
   FREDERICK STUDIOS — CONTROL CENTER 2.0 · DESIGN-SYSTEM KIT
   ds2-kit.css — extracted verbatim from the LOCKED home deck
   (step1-home-deck-candidate-v2.html, locked by Brad, Oct 31, 2026:
   "I fucking love it. This is perfect.")

   Every panel, tab, and pop-up console in Dashboard 2.0 is built
   from this kit — Brad's consistency directive. If a component
   isn't here, it doesn't ship; extend the kit, never fork it.

   Contents:
     0. Self-hosted fonts (Oswald / Inter — no Google Fonts)
     1. Tokens + base          5. The living core
     2. Console pills (header) 6. Needs You list
     3. All-hands light strip  7. Marina (the quiet light)
     4. Panels + metrics       8. Calendar (compact, highlight-first)
        + toggles + gap card   9. Ops meter
                                10. Console overlay (the pop-up windows)
                                11. Laptop band + phone companion
                                12. Revision pass 2 — animation lift
   Animation guardrails (Brad-approved, standing):
     · the gold attention blink is the ONLY blink — nothing else
       pulses at its rhythm; lit pills glow STEADY.
     · content never animates — numbers, labels, text stay still.
     · cheap motion only — transform / opacity / box-shadow.
     · prefers-reduced-motion quiets everything.
   Behavior is governed by the companion standard:
     design-concepts/dashboard-2-0/brad-logic-build-standard.md
   ============================================================ */

/* ---------- 0. self-hosted fonts ---------- */
@font-face{font-family:'Oswald';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts2/oswald-400.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts2/oswald-500.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts2/oswald-600.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts2/oswald-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts2/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts2/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts2/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts2/inter-700.woff2') format('woff2')}

:root{
  --ink:#151626;
  --midnight:#070B1A;
  --b1:#076DF2;
  --b2:#0F88F2;
  --b3:#139DF2;
  --b4:#2EBBF2;
  --gold:#D7A451;
  --white:#FFFFFF;
  --panel-edge:rgba(46,187,242,.38);
  --panel-fill:linear-gradient(160deg, rgba(21,22,38,.94), rgba(7,11,26,.96));
  --soft:rgba(255,255,255,.78);
  --faint:rgba(255,255,255,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px}
body{
  font-family:'Inter',-apple-system,'Segoe UI',sans-serif;
  color:var(--white);
  background:
    radial-gradient(1100px 480px at 18% -60px, rgba(7,109,242,.20), transparent 60%),
    radial-gradient(900px 520px at 85% 8%, rgba(19,157,242,.13), transparent 62%),
    radial-gradient(700px 380px at 55% 108%, rgba(7,109,242,.12), transparent 60%),
    var(--midnight);
  min-height:100vh;
  font-size:17px;
  line-height:1.55;
}
h1,h2,h3,.oswald{font-family:'Oswald','Arial Narrow',sans-serif}
button{font-family:inherit;cursor:pointer;color:inherit;background:none;border:none}
:focus-visible{outline:3px solid var(--b4);outline-offset:2px;border-radius:6px}

/* ---------- header ---------- */
header.topbar{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  padding:22px 34px 6px;max-width:1600px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:16px;margin-right:auto}
.brand .mark{
  font-family:'Oswald',sans-serif;font-weight:700;font-size:30px;letter-spacing:.06em;
  color:var(--white);text-shadow:0 0 18px rgba(46,187,242,.85),0 0 42px rgba(7,109,242,.5);
}
.brand .sub{font-size:16px;color:var(--soft);font-weight:500}
.brand .sub strong{color:var(--b4);font-weight:600}
nav.consoles{display:flex;gap:10px;flex-wrap:wrap}
.console-btn{
  font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  min-height:52px;padding:12px 26px;border-radius:999px;position:relative;
  background:linear-gradient(180deg, rgba(46,187,242,.22), rgba(15,136,242,.10) 55%, rgba(7,109,242,.05));
  border:1px solid var(--panel-edge);
  box-shadow:inset 0 1px 0 rgba(189,233,255,.35), inset 0 0 14px rgba(19,157,242,.12), 0 0 12px rgba(7,109,242,.16);
  transition:box-shadow .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.console-btn:hover{
  border-color:var(--b4);
  background:linear-gradient(180deg, rgba(46,187,242,.34), rgba(15,136,242,.16) 55%, rgba(7,109,242,.08));
  box-shadow:inset 0 1px 0 rgba(189,233,255,.5), inset 0 0 18px rgba(19,157,242,.24), 0 0 26px rgba(7,109,242,.45);
  transform:translateY(-1px);
}
.console-btn:focus-visible{border-radius:999px;border-color:var(--b4);box-shadow:inset 0 1px 0 rgba(189,233,255,.5), inset 0 0 18px rgba(19,157,242,.24), 0 0 26px rgba(7,109,242,.5)}
.console-btn .dot{
  position:absolute;top:9px;right:13px;width:10px;height:10px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 10px var(--gold);display:none;
}
.console-btn.needs .dot{display:block}
/* lit pill — the section's desk needs Brad (tied to the light system).
   Steady gold glow on purpose: lit, not blinking — the blink stays the light strip's alone. */
.console-btn.needs{
  border-color:rgba(215,164,81,.75);color:#FFF6E0;
  background:linear-gradient(180deg, rgba(215,164,81,.30), rgba(215,164,81,.12) 55%, rgba(7,109,242,.06));
  box-shadow:inset 0 1px 0 rgba(255,233,188,.55), inset 0 0 14px rgba(215,164,81,.20), 0 0 22px rgba(215,164,81,.42);
}
.console-btn.needs:hover,.console-btn.needs:focus-visible{
  border-color:var(--gold);
  box-shadow:inset 0 1px 0 rgba(255,233,188,.7), inset 0 0 18px rgba(215,164,81,.28), 0 0 32px rgba(215,164,81,.55);
}

/* ---------- all-hands light strip ---------- */
.lights-wrap{max-width:1600px;margin:0 auto;padding:14px 34px 4px}
.lights{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-start;
  background:var(--panel-fill);border:1px solid var(--panel-edge);border-radius:16px;
  padding:16px 22px;box-shadow:0 0 22px rgba(7,109,242,.16), inset 0 0 16px rgba(19,157,242,.05);
}
.lights .strip-title{
  font-family:'Oswald',sans-serif;font-size:18px;font-weight:600;letter-spacing:.14em;
  color:var(--b4);text-transform:uppercase;width:100%;
}
.lights .strip-title span{color:var(--faint);letter-spacing:.04em;text-transform:none;font-family:'Inter',sans-serif;font-size:16px;font-weight:500}
.light-group{display:flex;flex-direction:column;gap:6px}
.light-group .gname{font-size:16px;font-weight:600;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.light-row{display:flex;gap:14px;flex-wrap:wrap}
.light{
  display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border-radius:10px;
  font-size:16px;font-weight:500;color:var(--soft);
}
.light:hover{background:rgba(19,157,242,.10);color:var(--white)}
.light .bulb{
  width:13px;height:13px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 35% 35%, #BDE9FF, var(--b3) 55%, var(--b1));
  box-shadow:0 0 9px rgba(46,187,242,.75);
}
.light.dim .bulb{background:radial-gradient(circle at 35% 35%, rgba(189,233,255,.35), rgba(19,157,242,.35) 60%, rgba(7,109,242,.25));box-shadow:0 0 4px rgba(46,187,242,.3)}
.light.blink .bulb{
  background:radial-gradient(circle at 35% 35%, #FFE9BC, var(--gold) 55%, #9A742E);
  animation:blinkpulse 1.6s ease-in-out infinite;
}
.light.blink{color:var(--white);font-weight:600}
.light.pearl .bulb{
  background:radial-gradient(circle at 35% 35%, #FFFFFF, #CFE9FF 55%, rgba(46,187,242,.55));
  box-shadow:0 0 12px rgba(207,233,255,.65);
}
@keyframes blinkpulse{0%,100%{box-shadow:0 0 5px rgba(215,164,81,.45)}50%{box-shadow:0 0 18px rgba(215,164,81,.95)}}

/* ---------- stale banner (design-system pattern — lives in the Ops console reference, not on the standing deck) ---------- */
.stale-banner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border:2px dashed var(--gold);border-radius:14px;padding:13px 20px;
  background:rgba(215,164,81,.08);color:#F4D894;font-size:17px;
}
.stale-banner .tag{
  font-family:'Oswald',sans-serif;font-weight:700;letter-spacing:.12em;font-size:18px;color:var(--midnight);
  background:var(--gold);border-radius:8px;padding:3px 12px;
}
.stale-banner strong{color:var(--white)}

/* ---------- deck grid ---------- */
.deck{
  max-width:1600px;margin:0 auto;padding:22px 34px 30px;
  display:grid;grid-template-columns:410px 1fr 410px;gap:24px;align-items:start;
}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
.panel{
  background:var(--panel-fill);border:1px solid var(--panel-edge);border-radius:18px;
  padding:22px 24px;box-shadow:0 0 24px rgba(7,109,242,.16), inset 0 0 18px rgba(19,157,242,.05);
}
.panel h2{
  font-size:21px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--b4);
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;
}
.panel h2 .hint{font-family:'Inter',sans-serif;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint)}
.panel p{font-size:17px;color:var(--soft)}
/* ---------- metrics & toggles ---------- */
.toggle-row{display:flex;gap:8px;margin:2px 0 16px}
.toggle{
  font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;letter-spacing:.08em;
  min-height:48px;padding:9px 20px;border-radius:10px;color:var(--soft);
  border:1px solid rgba(46,187,242,.30);background:rgba(7,109,242,.06);
}
.toggle[aria-pressed="true"]{
  color:var(--white);border-color:var(--b4);
  background:linear-gradient(180deg, rgba(46,187,242,.35), rgba(7,109,242,.18));
  box-shadow:0 0 14px rgba(7,109,242,.35), inset 0 0 10px rgba(46,187,242,.25);
}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.metric{
  border:1px solid rgba(46,187,242,.22);border-radius:14px;padding:14px 16px;
  background:rgba(7,11,26,.45);
}
.metric .num{font-family:'Oswald',sans-serif;font-size:40px;font-weight:600;line-height:1.05;color:var(--white);text-shadow:0 0 14px rgba(46,187,242,.45)}
.metric .lbl{font-size:16px;font-weight:600;color:var(--soft);margin-top:2px}
.metric .clk{font-size:16px;color:var(--faint);margin-top:4px}
.followers{
  margin-top:14px;border:1px solid rgba(46,187,242,.22);border-radius:14px;padding:14px 16px;background:rgba(7,11,26,.45);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.followers .num{font-family:'Oswald',sans-serif;font-size:34px;font-weight:600;color:var(--white);text-shadow:0 0 12px rgba(46,187,242,.4)}
.followers .split{font-size:16px;color:var(--soft);font-weight:500}
.panel p.fresh-line{margin-top:14px;font-size:16px;color:var(--faint)}
.fresh-line strong{color:#8FE3B1;font-weight:600}
.gap-strip{
  margin-top:14px;border:2px dashed var(--gold);border-radius:14px;padding:13px 16px;
  background:rgba(215,164,81,.07);font-size:16px;color:#F4D894;
}
.gap-strip .gname{font-family:'Oswald',sans-serif;font-size:18px;font-weight:700;letter-spacing:.1em;color:var(--gold)}
.gap-strip p{font-size:16px;color:#F4D894}

/* ---------- the living core ---------- */
.core-zone{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:8px}
.core{
  position:relative;width:392px;height:392px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.core .ring-seg{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from -30deg,
    rgba(46,187,242,.0) 0deg, rgba(46,187,242,.55) 24deg, rgba(46,187,242,0) 60deg,
    rgba(19,157,242,.5) 130deg, rgba(19,157,242,0) 170deg,
    rgba(46,187,242,.55) 250deg, rgba(46,187,242,0) 292deg,
    rgba(15,136,242,.45) 330deg, rgba(46,187,242,0) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 61%, #000 62%, #000 71%, transparent 72%);
          mask:radial-gradient(circle, transparent 61%, #000 62%, #000 71%, transparent 72%);
}
.core .ring-metal{
  position:absolute;inset:14px;border-radius:50%;
  border:3px solid rgba(189,233,255,.35);
  box-shadow:0 0 0 6px rgba(7,109,242,.18), inset 0 0 26px rgba(46,187,242,.35), 0 0 34px rgba(7,109,242,.35);
}
.core .disc{
  position:absolute;inset:44px;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #7ED4FF 0%, var(--b4) 26%, var(--b2) 52%, var(--b1) 74%, rgba(7,109,242,.25) 100%);
  box-shadow:inset 0 0 60px rgba(255,255,255,.28), inset 0 0 90px rgba(7,11,26,.35), 0 0 70px rgba(15,136,242,.55);
  animation:breathe 6.5s ease-in-out infinite;
}
.core .fs{
  position:relative;z-index:2;font-family:'Oswald',sans-serif;font-weight:700;font-size:118px;letter-spacing:.02em;
  color:var(--white);text-shadow:0 2px 0 rgba(7,11,26,.35), 0 0 26px rgba(255,255,255,.55), 0 0 60px rgba(46,187,242,.8);
}
@keyframes breathe{
  0%,100%{box-shadow:inset 0 0 60px rgba(255,255,255,.24), inset 0 0 90px rgba(7,11,26,.35), 0 0 52px rgba(15,136,242,.42)}
  50%{box-shadow:inset 0 0 78px rgba(255,255,255,.38), inset 0 0 90px rgba(7,11,26,.28), 0 0 104px rgba(46,187,242,.78)}
}
.core-status{
  font-family:'Oswald',sans-serif;font-size:19px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--b4);
  text-align:center;text-shadow:0 0 12px rgba(46,187,242,.5);
}
.core-status span{display:block;font-family:'Inter',sans-serif;font-size:16px;letter-spacing:0;text-transform:none;color:var(--faint);margin-top:4px}

/* ---------- needs-you list ---------- */
.need{display:flex;gap:14px;padding:13px 2px;border-top:1px solid rgba(46,187,242,.16);align-items:flex-start}
.need:first-of-type{border-top:none}
.need .when{
  font-family:'Oswald',sans-serif;font-size:17px;font-weight:600;letter-spacing:.06em;color:var(--midnight);
  background:linear-gradient(180deg, var(--b4), var(--b2));border-radius:9px;padding:4px 11px;white-space:nowrap;margin-top:2px;
}
.need .when.gold{background:linear-gradient(180deg, #EDC87E, var(--gold))}
.need .what{font-size:17px;color:var(--soft)}
.need .what strong{color:var(--white);font-weight:600}

/* ---------- dashboard five #1-#4 (Nov 1): alerts, dateline strip, due chips ---------- */
.deck-banner-off{display:none!important}
.lead-ack{
  font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;letter-spacing:.05em;
  background:var(--gold);color:var(--midnight);border:none;border-radius:8px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;
}
.today-strip{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:rgba(7,11,26,.45);border:1px solid rgba(46,187,242,.24);
  border-radius:12px;padding:10px 14px;font-size:17px;color:var(--soft);
}
.today-strip .ts-date{
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.07em;
  color:var(--white);white-space:nowrap;
}
.today-strip .ts-items{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.today-strip .ts-more{white-space:nowrap;color:var(--b4);font-weight:600}
.need .when.due{
  background:var(--midnight);border:1.5px solid var(--gold);color:var(--gold);
}
.need .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.need .acts .from{font-size:16px;color:var(--faint)}
.rbtn{
  font-family:'Oswald',sans-serif;font-size:16px;font-weight:700;letter-spacing:.05em;
  border-radius:9px;padding:7px 16px;cursor:pointer;text-decoration:none;display:inline-block;
}
.rbtn.go{background:linear-gradient(180deg, #EDC87E, var(--gold));color:var(--midnight);border:1.5px solid transparent}
.rbtn.no{background:transparent;color:var(--soft);border:1.5px solid rgba(240,246,255,.35)}
.rbtn.open{background:var(--midnight);color:var(--gold);border:1.5px solid var(--gold)}
.rbtn[disabled]{opacity:.55;cursor:wait}
.need .when.due.hot{
  background:linear-gradient(180deg, #EDC87E, var(--gold));color:var(--midnight);
  border:1.5px solid transparent;
}
@media (max-width:760px){
  #lead-banner,#stale-alarm{order:2;margin:24px 18px 0}
  .today-strip{order:3;margin:24px 18px 0}
}

/* ---------- marina ---------- */
.marina{border-color:rgba(215,164,81,.4)}
.marina h2{color:var(--white)}
.marina .rule{height:3px;border-radius:2px;background:linear-gradient(90deg, var(--gold), rgba(215,164,81,0));margin:-6px 0 14px}
.marina .note{font-size:19px;line-height:1.6;color:var(--white)}
.marina .sig{margin-top:10px;font-size:16px;color:var(--faint)}
.marina .sig strong{color:var(--gold);font-weight:600}

/* ---------- calendar ---------- */
.cal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel p.tonight{font-size:16px;color:#F4D894;font-weight:600;margin-bottom:12px}
.tonight strong{color:var(--gold)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-grid .dow{
  font-size:16px;font-weight:600;color:var(--faint);text-align:center;padding:4px 0;letter-spacing:.05em;
}
.day{
  min-height:48px;border-radius:11px;font-size:17px;font-weight:600;color:var(--faint);
  display:flex;align-items:center;justify-content:center;position:relative;
  border:1px solid transparent;
}
.day.blank{visibility:hidden}
.day.live{color:var(--white);background:rgba(7,109,242,.45);border-color:rgba(46,187,242,.4)}
button.day.live:hover{background:rgba(7,109,242,.7);box-shadow:0 0 14px rgba(7,109,242,.5)}
.day.attn{box-shadow:inset 0 0 0 2px var(--gold)}
.day.attn::after{
  content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 7px var(--gold);
}
.day.off{color:var(--b4);background:rgba(46,187,242,.10);border-color:rgba(46,187,242,.25)}
.cal-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px;font-size:16px;color:var(--faint)}
.cal-legend .sw{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:7px;vertical-align:-1px}
.sw-act{background:rgba(7,109,242,.7)}
.sw-attn{background:var(--midnight);box-shadow:inset 0 0 0 2px var(--gold)}

/* ---------- ops meter ---------- */
.meter{height:16px;border-radius:8px;background:rgba(255,255,255,.10);overflow:hidden;margin:8px 0 6px}
.meter i{display:block;height:100%;width:75%;border-radius:8px;background:linear-gradient(90deg, var(--b1), var(--b4));box-shadow:0 0 12px rgba(46,187,242,.6)}
.ops-line{font-size:17px;color:var(--soft)}
.ops-line strong{color:var(--white);font-family:'Oswald',sans-serif;font-size:22px;font-weight:600;letter-spacing:.03em}
.gate-list{margin-top:10px}
.gate-list li{list-style:none;font-size:16px;color:var(--soft);padding:7px 0;border-top:1px solid rgba(46,187,242,.16)}
.gate-list li:first-child{border-top:none}
.gate-list strong{color:var(--white);font-weight:600}

footer.colophon{
  max-width:1600px;margin:0 auto;padding:4px 34px 30px;text-align:center;
  font-size:16px;color:var(--faint);
}
footer.colophon .fname{font-family:'Oswald',sans-serif;letter-spacing:.14em;color:var(--b4);font-size:17px}
/* ---------- console overlay ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;display:none;align-items:flex-start;justify-content:center;
  background:rgba(7,11,26,.82);backdrop-filter:blur(5px);padding:34px 18px;overflow-y:auto;
}
.overlay.open{display:flex}
.console{
  width:min(920px,100%);background:var(--panel-fill);border:1px solid var(--b3);border-radius:20px;
  box-shadow:0 0 44px rgba(7,109,242,.45), inset 0 0 24px rgba(19,157,242,.06);
  padding:28px 32px 32px;animation:consolein .22s ease;
}
@keyframes consolein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.console header{display:flex;align-items:flex-start;gap:16px;margin-bottom:8px}
.console h2{font-size:27px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white);flex:1}
.console h2 small{display:block;font-family:'Inter',sans-serif;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--faint);margin-top:3px}
.close-btn{
  min-width:52px;min-height:52px;border-radius:12px;font-size:22px;line-height:1;color:var(--white);
  border:1px solid var(--panel-edge);background:rgba(7,109,242,.12);
}
.close-btn:hover{background:rgba(7,109,242,.3)}
.console h3{
  font-size:19px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--b4);margin:24px 0 10px;
}
.console p{font-size:17px;color:var(--soft);line-height:1.6}
.console p.fresh-line{margin-top:14px;font-size:16px;color:var(--faint)}
.console ul{list-style:none}
.console li{
  font-size:17px;color:var(--soft);padding:10px 0 10px 22px;position:relative;border-top:1px solid rgba(46,187,242,.14);line-height:1.55;
}
.console li:first-child{border-top:none}
.console li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:50%;background:var(--b3);box-shadow:0 0 7px rgba(46,187,242,.7)}
.console li strong{color:var(--white);font-weight:600}
.chan-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chan{
  border:1px solid rgba(46,187,242,.24);border-radius:14px;padding:15px 17px;background:rgba(7,11,26,.45);
}
.chan .cname{font-family:'Oswald',sans-serif;font-size:19px;font-weight:600;letter-spacing:.07em;color:var(--white)}
.chan .cnum{font-family:'Oswald',sans-serif;font-size:32px;font-weight:600;color:var(--white);margin-top:2px}
.chan .clbl{font-size:16px;color:var(--soft);font-weight:500}
.chan .cclk{font-size:16px;color:var(--faint);margin-top:5px}
.chan.gap{border:2px dashed var(--gold);background:rgba(215,164,81,.06)}
.chan.gap .cname{color:var(--gold)}
.chan.gap .cnum{font-size:21px;color:#F4D894;line-height:1.35}
.chan.lead{grid-column:1 / -1;border:1px solid rgba(46,187,242,.55);border-top:4px solid #2EBBF2;box-shadow:0 0 0 1px rgba(46,187,242,.22),0 0 22px rgba(46,187,242,.25)}
.chan.lead .cname{font-size:21px}
.chan.lead .cnum{font-size:46px}
.coverage{
  border:1px solid rgba(46,187,242,.3);border-radius:12px;padding:12px 16px;background:rgba(7,109,242,.08);
  font-size:16px;color:var(--soft);
}
.coverage strong{color:var(--b4);letter-spacing:.06em}
.comment-row{display:flex;flex-direction:column;gap:2px}
.comment-row .cmeta{font-size:16px;color:var(--faint)}
.comment-row .cmeta strong{color:var(--b4);font-weight:600}
.health-line{
  display:flex;gap:12px;align-items:flex-start;border:1px solid rgba(143,227,177,.35);border-radius:12px;
  padding:13px 16px;background:rgba(46,160,90,.08);font-size:16px;color:var(--soft);
}
.health-line strong{color:#8FE3B1}
.day-list li::before{background:var(--gold);box-shadow:0 0 7px rgba(215,164,81,.8)}

/* ---------- laptop squeeze band (F1, Brad's ruling): the core scales down, the three-column deck holds ---------- */
@media (max-width:1327px) and (min-width:1181px){
  .core{width:calc(100vw - 956px);height:calc(100vw - 956px)}
  .core .disc{inset:11.224%}
  .core .ring-metal{inset:3.571%}
  .core .fs{font-size:calc((100vw - 956px) * .301)}
  .need{flex-direction:column;gap:8px}
}

/* ---------- mobile companion ---------- */
@media (max-width:1180px){
  .deck{grid-template-columns:1fr 1fr}
  .core-col{grid-column:1 / -1;order:-1}
}
@media (max-width:760px){
  .lights-wrap{padding-left:18px;padding-right:18px}
  .deck{grid-template-columns:1fr;padding:18px 18px 24px}
  .core{width:248px;height:248px}
  .core .fs{font-size:74px}
  .core .disc{inset:28px}
  .core .ring-metal{inset:9px}
  nav.consoles{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .metric-grid,.chan-grid{grid-template-columns:1fr}
  .console{padding:22px 20px 26px}
  footer.colophon{padding-left:18px;padding-right:18px}
  /* Phone stack order (Brad's rulings, Oct 31): on small screens the FS
     core is the presence at the very top — brand line, then the core with
     its title and status line; the console pills are navigation and sit
     UNDER the core; then the light strip, then Needs You; the columns
     follow in their standing order (Insights · Marina · Calendar · Ops
     Glance). The header and the deck's children are promoted into the
     body's flex column at this width only (display:contents); the
     topbar's old insets move onto the brand and the pills so their
     spacing doesn't shift. Desktop and band layouts never see these
     rules. Console builds inherit this order — see DS2-KIT.md. */
  body{display:flex;flex-direction:column}
  .deck{display:contents}
  .core-col{display:contents}
  header.topbar{display:contents}
  .brand{order:0;padding:18px 18px 4px}
  .core-zone{order:1;padding:26px 18px 0}
  nav.consoles{order:2;margin-top:24px;padding-left:18px;padding-right:18px}
  .lights-wrap{order:3;padding-top:24px}
  .core-col>.panel{order:4;margin:24px 18px 0}
  .deck>.col{padding-left:18px;padding-right:18px}
  .deck>.col:nth-child(1){order:5;margin-top:24px}
  .deck>.col:nth-child(3){order:6;margin-top:24px;margin-bottom:24px}
  footer.colophon{order:7}
}
@media (prefers-reduced-motion: reduce){
  .core .disc{animation:none}
  .light.blink .bulb{animation:none}
  .console{animation:none}
}
/* ================= REVISION PASS 2 (Brad's rulings, Oct 31) =================
   Animation lift, THIS SURFACE ONLY — the one-ambient-motion discipline is
   lifted by Brad's ruling, under Miri's guardrails:
   · signal stays sacred — nothing here is gold, pulses at the blink's 1.6s
     rhythm, or competes with the attention blink; the lit pill's glow is steady.
   · content never animates — no number, label, or text moves; atmosphere + state only.
   · cheap motion only — transform / opacity / box-shadow glow. No blur fields.
   · prefers-reduced-motion quiets everything (see the block at the end). */

/* the freed stale-strip space closes up */
.deck{padding-top:18px}

/* --- the core: segmented ring drift, periodic halo flare, counter ring --- */
.core .ring-seg{animation:spin360 70s linear infinite}
.core::before{
  content:"";position:absolute;inset:-9%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle, transparent 57%, rgba(46,187,242,.38) 68%, rgba(15,136,242,.12) 74%, transparent 80%);
  animation:flarepulse 13s ease-in-out infinite;
}
.core::after{
  content:"";position:absolute;inset:1.5%;border-radius:50%;z-index:0;pointer-events:none;
  border:2px dashed rgba(189,233,255,.26);
  animation:spinrev 90s linear infinite;
}
@keyframes spin360{to{transform:rotate(360deg)}}
@keyframes spinrev{to{transform:rotate(-360deg)}}
@keyframes flarepulse{
  0%,100%{opacity:.22;transform:scale(.965)}
  50%{opacity:.85;transform:scale(1.045)}
}

/* --- light strip: a slow shimmer travels the top edge; panels breathe at the edges --- */
.lights{position:relative;overflow:hidden;animation:lightsglow 7s ease-in-out infinite alternate}
.lights::before{
  content:"";position:absolute;top:0;left:0;height:2px;width:40%;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(46,187,242,.75), transparent);
  animation:shimmerline 9s linear infinite;
}
@keyframes shimmerline{from{transform:translateX(-110%)}to{transform:translateX(280%)}}
@keyframes lightsglow{
  from{box-shadow:0 0 18px rgba(7,109,242,.13), inset 0 0 16px rgba(19,157,242,.05)}
  to{box-shadow:0 0 30px rgba(7,109,242,.24), inset 0 0 20px rgba(19,157,242,.08)}
}
.panel{animation:panelglow 7s ease-in-out infinite alternate}
@keyframes panelglow{
  from{box-shadow:0 0 18px rgba(7,109,242,.13), inset 0 0 18px rgba(19,157,242,.05)}
  to{box-shadow:0 0 30px rgba(7,109,242,.24), inset 0 0 22px rgba(19,157,242,.08)}
}
.deck .col:nth-child(1) .panel:nth-child(2){animation-delay:-3.5s}
.deck .col:nth-child(2) .panel{animation-delay:-1.5s}
.deck .col:nth-child(3) .panel:nth-child(1){animation-delay:-5s}
.deck .col:nth-child(3) .panel:nth-child(2){animation-delay:-2.8s}

/* Marina's pearl — warmth, gently swelling. Not a signal; the blink stays gold and alone. */
.light.pearl .bulb{animation:pearlpulse 5.5s ease-in-out infinite}
@keyframes pearlpulse{
  0%,100%{box-shadow:0 0 8px rgba(207,233,255,.45)}
  50%{box-shadow:0 0 17px rgba(207,233,255,.85)}
}

/* --- console arrival: backdrop fades, the console rises and settles --- */
.overlay.open{animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.console{animation:consolein .28s ease}
@keyframes consolein{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:none}}

/* toggles answer the hand */
.toggle{transition:box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease}

@media (prefers-reduced-motion: reduce){
  .core .ring-seg,.core::before,.core::after,
  .lights,.lights::before,.panel,.light.pearl .bulb,
  .overlay.open,.console{animation:none}
  .console-btn,.toggle{transition:none}
}

/* --- desktop tightening (Brad, Nov 2 — live ask): the deck reads compact
   and deliberate on desktop. BREAKPOINT SPLIT (Brad's ruling, Nov 2
   07:37): his 1920x1080 screen presents a narrower CSS width than the
   old 1181 gate (OS scaling / browser zoom), so the consoles grid and
   the tightened carriers engage from 900px; the three-column deck
   switch stays at 1181, the narrowest width where its center column
   still fits the core. The phone layout (<=760px) is untouched. --- */
@media (min-width:900px){
  header.topbar{max-width:1280px;padding-left:28px;padding-right:28px}
  /* consoles: a strict two-row grid (Brad, Nov 2) — the lead three
     (Comms · News & Media · Website) span the top row, the other five
     tile the row beneath; equal heights, one gap, flush edges. */
  nav.consoles{display:grid;grid-template-columns:repeat(15,1fr);gap:12px;width:100%}
  nav.consoles .console-btn:nth-child(-n+3){grid-column:span 5}
  nav.consoles .console-btn:nth-child(n+4){grid-column:span 3}
  .lights-wrap{max-width:1280px;padding-left:28px;padding-right:28px}
  .deck{max-width:1280px;padding-left:28px;padding-right:28px}
  .col{gap:18px}
  .panel{padding:20px}
  footer.colophon{max-width:1280px;padding-left:28px;padding-right:28px}
}
@media (min-width:1181px){
  .deck{grid-template-columns:380px 1fr 380px;gap:18px}
}