:root, [data-skin="cabinet"] {
    --bg:#0B0F0C; --panel:#111813; --panel2:#0E1410; --ink:#D7F5DD; --muted:#8FAD98; --line:#1F2A22;
    --line2:#2A3A2E; --ok:#39FF88; --deny:#FF6B7A; --esc:#FFB547; --info:#5CD6FF; --accent:#39FF88;
    --on-accent:#06140B; --press:#1C8A4A; --esc-bg:#15130B; --seg:#1F2A22;
    --font:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --display:var(--font); --radius:0px;
    --scan:repeating-linear-gradient(0deg, rgba(215,245,221,.03) 0 1px, transparent 1px 3px);
    color-scheme:dark;
  }
  [data-skin="briefing"] {
    --bg:#F6F4EE; --panel:#FFFFFF; --panel2:#FBFAF6; --ink:#1C1B19; --muted:#5E5B55; --line:#DDD8CC;
    --line2:#BDB7A8; --ok:#2F6B45; --deny:#A8322B; --esc:#8A4B00; --info:#1F5C66; --accent:#1F5C66;
    --on-accent:#FFFFFF; --press:transparent; --esc-bg:#FBF3E6; --seg:#E4DFD3;
    --font:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display:Newsreader, Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif; --radius:4px;
    --scan:none; color-scheme:light;
  }
  * { box-sizing:border-box }
  [hidden] { display:none !important }
  html, body { background:var(--bg) }
  body { margin:0; color:var(--ink); font:13px/1.5 var(--font); background-image:var(--scan);
         font-variant-numeric:tabular-nums; min-height:100vh }
  [data-skin="briefing"] body { font-size:14px }
  button, input, select { font:inherit; color:inherit }
  :focus-visible { outline:2px solid var(--accent); outline-offset:2px }
  .m { color:var(--muted); font-size:12px }
  .err { color:var(--deny) }
  [data-skin="cabinet"] .only-brief, [data-skin="briefing"] .only-cab { display:none !important }
  .mark { display:inline-flex; color:var(--accent) }
  .mark svg { height:18px; width:auto; shape-rendering:crispEdges }

  /* buttons */
  .btn { border:1px solid var(--line2); background:transparent; padding:8px 12px; min-height:36px;
         border-radius:var(--radius); cursor:pointer }
  .btn.yes { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700;
             box-shadow:0 3px 0 var(--press) }
  .btn.no { color:var(--deny); border:2px solid var(--deny); font-weight:700 }
  .btn:disabled { opacity:.5; cursor:default }
  kbd { font:inherit; font-size:11px; opacity:.8 }
  kbd::before { content:"[" } kbd::after { content:"]" }
  [data-skin="cabinet"] .btn, [data-skin="cabinet"] .caps { text-transform:uppercase }
  [data-skin="briefing"] kbd { display:none }
  [data-skin="briefing"] .btn.yes { box-shadow:none; font-weight:600 }

  /* sign-in */
  form.gate { display:grid; gap:10px; max-width:360px; margin:12vh auto; background:var(--panel);
              padding:24px; border:1px solid var(--line); border-radius:var(--radius) }
  form.gate strong { font-size:16px }
  form.gate input { padding:10px; min-height:44px; border:1px solid var(--line2); background:var(--bg);
                    border-radius:var(--radius) }
  form.gate .btn { min-height:44px }

  /* header */
  header { display:flex; gap:18px; align-items:center; flex-wrap:wrap; padding:12px 24px;
           border-bottom:1px solid var(--line); background:var(--panel2) }
  .brand { display:flex; gap:8px; align-items:center; font-weight:700; letter-spacing:.04em }
  [data-skin="cabinet"] .brand .word { color:var(--muted) }
  header select { padding:7px 10px; min-height:36px; background:var(--panel); border:1px solid var(--line2);
                  border-radius:var(--radius) }
  nav.views { display:flex; gap:4px }
  nav.views button { background:transparent; border:1px solid var(--line); padding:7px 12px; min-height:36px;
                     cursor:pointer; color:var(--ink) }
  [data-skin="cabinet"] nav.views button { text-transform:uppercase }
  [data-skin="cabinet"] nav.views button.on { background:var(--accent); color:var(--on-accent); font-weight:700;
                                               border-color:var(--accent) }
  [data-skin="briefing"] nav.views button { border:0; border-bottom:2px solid transparent; color:var(--muted) }
  [data-skin="briefing"] nav.views button.on { color:var(--ink); font-weight:600; border-bottom-color:var(--accent) }
  #live { color:var(--muted); font-size:12px }
  #live.on::before { content:"\25CF "; color:var(--ok) }
  .spacer { flex:1 }

  /* cabinet: HUD, columns, cards, feed */
  .hud { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); border-bottom:1px solid var(--line) }
  .hud div { padding:12px 24px; border-right:1px solid var(--line) }
  .hud span { display:block; font-size:11px; letter-spacing:.14em; color:var(--muted); text-transform:uppercase }
  .hud b { font-size:24px }
  .hud .hot b { color:var(--esc) } .hud .bad b { color:var(--deny) }
  .cols { display:grid; grid-template-columns:440px minmax(0,1fr); min-height:calc(100vh - 160px) }
  aside { border-right:1px solid var(--line); padding:18px 24px; display:flex; flex-direction:column; gap:14px }
  h2 { font-size:12px; letter-spacing:.2em; color:var(--muted); margin:6px 0 0; text-transform:uppercase }
  h2.hot { color:var(--esc) }
  [data-skin="briefing"] h2 { letter-spacing:.08em }
  .card { border:1px solid var(--line2); padding:14px; display:flex; flex-direction:column; gap:8px;
          border-radius:var(--radius); background:var(--panel) }
  .card.esc { border:2px solid var(--esc); background:var(--esc-bg) }
  .card.sel { outline:2px solid var(--accent); outline-offset:3px }
  .card .head { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:12px }
  .card .title { font-size:15px; font-weight:700; overflow-wrap:anywhere }
  .card .title em { font-style:normal; color:var(--esc) }
  .card label { display:grid; gap:4px; color:var(--muted); font-size:12px }
  .card input { padding:8px 10px; min-height:36px; background:var(--bg); border:1px solid var(--line2);
                border-radius:var(--radius) }
  .card .acts { display:flex; gap:10px; flex-wrap:wrap }
  .card .acts .btn { min-height:44px }
  .seat { display:grid; gap:5px }
  .seat .top { display:flex; justify-content:space-between; gap:8px }
  .seat .lv { font-weight:700 }
  .seg { display:flex; gap:3px }
  .seg i { flex:1; height:8px; background:var(--seg); border-radius:1px }
  .seg i.on { background:var(--accent) }
  .seg.hp i.on { background:var(--esc) }
  .feedbar { display:flex; align-items:center; gap:8px; padding:12px 24px; border-bottom:1px solid var(--line);
             flex-wrap:wrap }
  .chip { border:1px solid var(--line2); background:transparent; padding:3px 10px; cursor:pointer;
          border-radius:var(--radius); min-height:28px }
  .chip.on { background:var(--ink); color:var(--bg); border-color:var(--ink) }
  .feed { padding:6px 24px 24px; max-height:calc(100vh - 220px); overflow:auto }
  .row { display:grid; grid-template-columns:80px 76px 88px minmax(0,1fr); gap:12px; padding:6px 0;
         border-bottom:1px solid var(--line); align-items:baseline }
  .row .what { overflow-wrap:anywhere }
  .row .why { color:var(--muted) }
  .tag { font-weight:700; font-size:12px; white-space:nowrap }
  .tag.ok { color:var(--ok) } .tag.deny { color:var(--deny) } .tag.info { color:var(--info) }
  .tag.plain { color:var(--ink) } .tag.dim { color:var(--muted) }
  [data-skin="cabinet"] .tag { text-transform:uppercase }
  [data-skin="cabinet"] .tag.esc { background:var(--esc); color:var(--bg); padding:0 5px }
  [data-skin="briefing"] .tag { font-weight:600; text-transform:lowercase }
  [data-skin="briefing"] .tag.esc { color:var(--esc) }
  footer.keys { display:flex; gap:18px; padding:10px 24px; border-top:1px solid var(--line); background:var(--panel2);
                color:var(--muted); font-size:12px; flex-wrap:wrap; position:sticky; bottom:0 }
  #keyhelp { position:fixed; right:24px; bottom:56px; background:var(--panel); border:1px solid var(--accent);
             padding:16px 20px; display:grid; grid-template-columns:auto auto; gap:6px 18px; font-size:12px }

  /* briefing overview (both skins) */
  .brief { max-width:1280px; margin:0 auto; padding:32px 24px 48px; display:flex; flex-direction:column; gap:24px }
  .lede { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap }
  .lede .who { display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted) }
  h1.headline { margin:8px 0 0; font:600 36px/1.18 var(--display); max-width:900px; text-wrap:pretty }
  [data-skin="cabinet"] h1.headline { font-size:24px; font-weight:700 }
  sup.cite { font:500 11px var(--font); color:var(--info); margin-left:2px }
  [data-skin="briefing"] sup.cite { font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace }
  .pill { font-size:12px; font-weight:600; padding:3px 10px; border-radius:99px; white-space:nowrap }
  .pill.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent) }
  .pill.esc { color:var(--esc); background:color-mix(in srgb, var(--esc) 16%, transparent) }
  .pill.dim { color:var(--muted); background:color-mix(in srgb, var(--muted) 14%, transparent) }
  .pill.info { color:var(--info); background:color-mix(in srgb, var(--info) 14%, transparent) }
  [data-skin="cabinet"] .pill { border-radius:0; text-transform:uppercase; letter-spacing:.06em }
  .cards { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px }
  .panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px }
  .metric span { display:block; color:var(--muted); font-size:13px }
  .metric b { display:block; font-size:28px; font-weight:600; margin:4px 0 }
  .grid2 { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:16px; align-items:start }
  .stack { display:flex; flex-direction:column; gap:16px }
  .panel h3 { margin:0 0 12px; font-size:16px; font-weight:600 }
  [data-skin="cabinet"] .panel h3 { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted) }
  .ms { display:grid; gap:6px; margin-bottom:14px }
  .ms .top { display:flex; justify-content:space-between }
  .ms .seg i { height:10px }
  .ms .seg i.on { background:var(--info) }
  .risk { display:flex; gap:10px; align-items:baseline; padding:4px 0 }
  .rep { display:flex; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); flex-wrap:wrap }
  .rep .t { flex:1; min-width:180px }
  .rep .btn { padding:4px 10px; min-height:32px; font-size:12px }
  .cites { font:12px/1.7 "IBM Plex Mono", ui-monospace, Menlo, monospace; color:var(--muted);
           background:var(--panel2) }
  .cites h3 { font-family:var(--font); color:var(--ink) }
  svg.burn { width:100%; height:auto; display:block }

  /* the dashboard: work by milestone, plan items */
  .wrow { display:grid; grid-template-columns:minmax(0,1fr) 110px 90px 80px; gap:10px; padding:7px 0;
          border-top:1px solid var(--line); align-items:baseline }
  .wrow .k { color:var(--muted); font-size:12px; margin-right:6px }
  .wms { margin:14px 0 4px; font-weight:600 }
  .wms:first-child { margin-top:0 }
  .chg { padding:6px 0; border-top:1px solid var(--line) }
  @media (max-width: 960px) { .wrow { grid-template-columns:minmax(0,1fr) 90px } .wrow .opt { display:none } }

  /* the task drawer and rules (lead console) */
  .clickable { cursor:pointer } .clickable:hover { background:var(--panel) }
  #drawer { position:fixed; top:0; right:0; bottom:0; width:min(620px, 100vw); background:var(--panel2);
            border-left:2px solid var(--accent); overflow:auto; padding:20px 24px; display:flex;
            flex-direction:column; gap:14px; z-index:5; box-shadow:-12px 0 32px rgba(0,0,0,.35) }
  #drawer .top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start }
  #drawer h3 { margin:0; font-size:18px }
  #drawer pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.5 var(--font);
                background:var(--bg); border:1px solid var(--line); padding:10px; max-height:260px; overflow:auto }
  [data-skin="briefing"] #drawer pre { font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace }
  #drawer textarea { width:100%; min-height:72px; padding:8px 10px; background:var(--bg); border:1px solid var(--line2);
                     border-radius:var(--radius); resize:vertical }
  .dlog .row { grid-template-columns:72px 64px minmax(0,1fr) }
  .rule { display:flex; gap:8px; align-items:baseline }
  .rule span { flex:1 }
  .rule .x { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:2px 6px }
  .addrule { display:flex; gap:6px }
  .addrule input { flex:1; padding:6px 8px; min-height:34px; background:var(--bg); border:1px solid var(--line2);
                   border-radius:var(--radius) }

  @media (max-width: 960px) {
    .cols, .grid2 { grid-template-columns:1fr }
    .hud { grid-template-columns:repeat(3, minmax(0,1fr)) }
    .cards { grid-template-columns:repeat(2, minmax(0,1fr)) }
    aside { border-right:0; border-bottom:1px solid var(--line) }
    .row { grid-template-columns:64px 64px 76px minmax(0,1fr); gap:8px }
  }