:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c222b; --line:#2b323c;
  --fg:#e6edf3; --dim:#9aa7b4; --faint:#6e7b8a;
  --red:#f85149; --amber:#d29922; --green:#3fb950; --blue:#58a6ff;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#ffffff; --panel:#f6f8fa; --panel2:#eef1f5; --line:#d0d7de;
         --fg:#1f2328; --dim:#57606a; --faint:#8c959f;
         --red:#cf222e; --amber:#9a6700; --green:#1a7f37; --blue:#0969da; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.wrap{max-width:980px;margin:0 auto;padding:20px 18px 80px}
h1{font-size:20px;margin:0 0 2px}
h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);
   margin:30px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}
a{color:var(--blue)}
.shadow{background:var(--amber);color:#111;padding:8px 12px;border-radius:6px;
  font-weight:700;font-size:13px;margin-bottom:14px}
.state{border-radius:8px;padding:12px 14px;margin:12px 0;border:1px solid var(--line)}
.state.ok{background:var(--panel);border-left:4px solid var(--green)}
.state.zero{background:var(--panel);border-left:4px solid var(--green)}
.state.stale{background:var(--panel);border-left:4px solid var(--amber)}
.state.bad{background:rgba(248,81,73,.12);border-left:4px solid var(--red)}
.state .hd{font-weight:700;margin-bottom:4px}
.state .sub{color:var(--dim);font-size:13px}
.card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:8px;padding:12px 14px;margin-bottom:10px}
.card.blocking{border-left-color:var(--red)}
.card .num{color:var(--faint);font-size:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.card .ttl{font-weight:600;margin:2px 0 6px}
.meta{color:var(--dim);font-size:12.5px}
.tag{display:inline-block;background:var(--panel2);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;font-size:11.5px;color:var(--dim);margin:2px 4px 0 0}
.tag.hot{background:var(--red);color:#fff;border-color:var(--red)}
textarea{width:100%;min-height:72px;background:var(--panel2);color:var(--fg);
  border:1px solid var(--line);border-radius:6px;padding:8px;font:inherit;margin-top:8px}
button{background:var(--blue);color:#fff;border:0;border-radius:6px;padding:7px 14px;
  font:inherit;font-weight:600;cursor:pointer;margin-top:8px}
button.ghost{background:transparent;color:var(--blue);border:1px solid var(--line)}
button:disabled{opacity:.5;cursor:not-allowed}
.pending{color:var(--amber);font-size:12.5px;margin-top:6px;font-weight:600}
.empty{color:var(--faint);font-size:13px;padding:6px 0}
.foot{margin-top:40px;color:var(--faint);font-size:12px;border-top:1px solid var(--line);padding-top:12px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:var(--panel2);padding:1px 5px;border-radius:4px}
table{width:100%;border-collapse:collapse;font-size:13px}
td,th{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--dim);font-weight:600}
.scroll{overflow-x:auto}

/* ── DECISION BRIEFINGS ─────────────────────────────────────────────────────────
   A chip that states only WHAT is waiting is a notification. The briefing is what
   makes it a decision: background, options with pros AND cons, a recommendation,
   and the exact steps when there is an action. Erik's requirement, 2026-09-01. */
.brief { margin: 12px 0 4px; padding: 12px 14px; border-left: 3px solid #4a7ab8;
         background: rgba(74,122,184,.07); border-radius: 0 6px 6px 0; }
.brief p { margin: 6px 0; line-height: 1.5; }
.bh { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .74rem;
      opacity: .75; margin: 14px 0 4px; }
.bh:first-child { margin-top: 0; }
.opt { margin: 10px 0; padding: 10px 12px; background: rgba(127,127,127,.09); border-radius: 6px; }
.optlabel { font-weight: 700; margin-bottom: 4px; }
.rec { font-size: .68rem; font-weight: 700; letter-spacing: .06em; padding: 2px 7px;
       border-radius: 10px; background: #2e7d32; color: #fff; margin-left: 6px; vertical-align: middle; }
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
@media (max-width: 640px) { .pc { grid-template-columns: 1fr; } }
.pchd { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; font-weight: 700; }
.pc ul { margin: 4px 0 0; padding-left: 18px; }
.pc li { margin: 3px 0; line-height: 1.45; }
.pc li.none { opacity: .5; font-style: italic; }
.steps { margin: 6px 0 0; padding-left: 20px; }
.steps li { margin: 5px 0; line-height: 1.5; }
.who { margin-top: 8px; font-size: .85rem; opacity: .8; }
.bwhen { margin-top: 10px; font-size: .72rem; opacity: .55; }
.nobrief { margin: 12px 0 4px; padding: 10px 12px; border-left: 3px solid #b8860b;
           background: rgba(184,134,11,.09); border-radius: 0 6px 6px 0; font-size: .9rem; }

/* The desk banner. A ruling typed into a page with no watcher is a ruling lost. */
.desk { margin: 8px 0 14px; padding: 10px 14px; border-radius: 6px; font-size: .92rem; line-height: 1.45; }
.desk.ok   { background: rgba(46,125,50,.14); border-left: 3px solid #2e7d32; }
.desk.warn { background: rgba(184,134,11,.14); border-left: 3px solid #b8860b; }
.desk.bad  { background: rgba(198,40,40,.16); border-left: 3px solid #c62828; font-weight: 600; }