/* Daily Breach. Fonts are self-hosted (SIL OFL, see /assets/fonts/OFL-LICENSES.txt). */
@font-face{font-family:"Big Shoulders Display";font-weight:700;font-display:swap;src:url(/assets/fonts/big-shoulders-display-700.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-display:swap;src:url(/assets/fonts/big-shoulders-display-800.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2")}
/* Layout: one narrow column built like a case file. An edition switch sits under the masthead, then exhibits stack as evidence tags, a golf-style scorecard follows, and the picker comes last. */
:root{
  --bg:#E8ECF1; --surface:#F6F8FA; --log:#EDF1F5; --ink:#111A2B; --muted:#4F5C73; --line:#C3CCD8;
  --accent:#C2410C; --btn:#111A2B; --btn-ink:#F6F8FA;
  --hit:#187A49; --hit-ink:#FFFFFF; --near:#E8B04A; --near-ink:#1A1304; --miss:#8A94A6; --miss-ink:#0F1624;
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D131F; --surface:#151D2D; --log:#0F1623; --ink:#E7ECF4; --muted:#96A3BB; --line:#2A3650;
    --accent:#FF9B6A; --btn:#E7ECF4; --btn-ink:#0D131F;
    --hit:#3CB878; --hit-ink:#06210F; --near:#E8B04A; --near-ink:#1A1304; --miss:#5B677D; --miss-ink:#F1F4F9;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D131F; --surface:#151D2D; --log:#0F1623; --ink:#E7ECF4; --muted:#96A3BB; --line:#2A3650;
  --accent:#FF9B6A; --btn:#E7ECF4; --btn-ink:#0D131F;
  --hit:#3CB878; --hit-ink:#06210F; --near:#E8B04A; --near-ink:#1A1304; --miss:#5B677D; --miss-ink:#F1F4F9;
  color-scheme:dark;
}
:root{--alert:#B3261E}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--alert:#FF7A70}}
:root[data-theme="dark"]{--alert:#FF7A70}
*{box-sizing:border-box}
.ex,.result{scroll-margin-top:130px}
.hook-wrap{display:grid;gap:6px}
.live{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--alert)}
.live::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--alert);animation:pulse 1.4s ease-in-out infinite}
.live.done{color:var(--muted)}
.live.done::before{animation:none;background:var(--muted)}
.live.ok{color:var(--hit)}
.live.ok::before{animation:none;background:var(--hit)}
.hook{font-size:19px;font-weight:600;line-height:1.35;max-width:46ch}
.meter{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:8px 16px;flex-wrap:wrap;background:var(--surface);border:1.5px solid var(--line);border-radius:8px;padding:10px 14px}
.meter.crit{border-color:var(--alert);animation:alarm 1.2s ease-in-out infinite}
.meter.lost{border-color:var(--alert)}
.m-main{display:grid;min-width:0}
.gl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.gn{font-family:var(--display);font-weight:800;font-size:clamp(34px,9vw,46px);line-height:1;color:var(--alert);font-variant-numeric:tabular-nums}
.meter.won .gn{color:var(--hit)}
.m-side{display:grid;gap:6px;width:min(200px,100%)}
.segs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.seg{height:14px;border-radius:2px;background:var(--log);border:1px solid var(--line)}
.seg.on{background:var(--alert);border-color:var(--alert)}
.gs{font-size:12px;color:var(--muted);line-height:1.35}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes alarm{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 35%,transparent)}}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5;padding-inline:16px;padding-block:20px 48px}
.wrap{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
h1,h2,h3,p{margin:0}
button,input,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.mast{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:12px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,12vw,60px);line-height:.88;letter-spacing:.01em;text-transform:uppercase}
.sub{color:var(--muted);font-size:13px;margin-top:8px}
.case{text-align:right;font-family:var(--mono);font-size:12px;color:var(--muted);line-height:1.55}
.case b{display:block;font-family:var(--display);font-size:30px;line-height:1;color:var(--ink);font-weight:700;letter-spacing:.03em;text-transform:uppercase}

.eds{display:flex;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;width:100%;max-width:360px}
.ed{flex:1;background:none;border:0;padding:10px 14px;font-weight:600;font-size:14px;color:var(--ink);cursor:pointer}
.ed+.ed{border-left:1.5px solid var(--ink)}
.ed[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

.brief{display:grid;gap:12px}
.brief p{max-width:62ch}
.key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.key span{display:inline-flex;align-items:center;gap:7px}
.sw{width:14px;height:14px;border-radius:3px;display:inline-block}
.sw.hit{background:var(--hit)} .sw.near{background:var(--near)} .sw.miss{background:var(--miss)}

.stack{display:flex;flex-direction:column;gap:12px}
.ex{background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ex.fresh{animation:rise .3s ease-out}
.ex-head{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--line)}
.tag{font-family:var(--display);font-weight:700;letter-spacing:.1em;font-size:16px;color:var(--accent);text-transform:uppercase}
.src{font-size:12.5px;color:var(--muted);min-width:0}
.ex pre{margin:0;padding:12px;background:var(--log);font:400 12.5px/1.65 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.ex pre.meta{color:var(--muted);border-bottom:1px solid var(--line)}
.ex .note{padding:12px 14px;max-width:62ch}
.sealed{border:1.5px dashed var(--line);border-radius:6px;padding:11px 12px;color:var(--muted);display:flex;gap:6px 12px;align-items:baseline;flex-wrap:wrap;font-size:13px}
.sealed .tag{color:var(--muted)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{display:grid;gap:12px}
h2{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
h2 span{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:0;color:var(--muted);text-transform:none}
.cells{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.cell{border:1px solid var(--line);border-radius:4px;background:var(--surface);min-height:36px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);position:relative}
.cell.par::after{content:"par";position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}
.cell.hit{background:var(--hit);color:var(--hit-ink);border-color:transparent}
.cell.near{background:var(--near);color:var(--near-ink);border-color:transparent}
.cell.miss{background:var(--miss);color:var(--miss-ink);border-color:transparent}
.rows{display:grid;gap:6px}
.row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border-radius:5px}
.row.hit{background:var(--hit);color:var(--hit-ink)}
.row.near{background:var(--near);color:var(--near-ink)}
.row.miss{background:var(--miss);color:var(--miss-ink)}
.row .n{font-family:var(--mono);font-size:12px}
.row .nm{min-width:0;font-weight:600}
.row .nm span{display:block;font-weight:400;font-size:12.5px}
.row .st{font-family:var(--display);font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:15px;text-align:right}

.picker{display:grid;gap:10px}
.lbl{font-weight:600;font-size:15px}
.q{width:100%;font-size:16px;padding:11px 12px;border:1.5px solid var(--ink);border-radius:6px;background:var(--surface);color:var(--ink)}
.q::placeholder{color:var(--muted)}
.list{max-height:290px;overflow:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.grp{position:sticky;top:0;background:var(--log);font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:13px;padding:5px 12px;color:var(--muted);border-bottom:1px solid var(--line)}
.opt{display:flex;width:100%;gap:12px;align-items:baseline;justify-content:space-between;text-align:left;padding:10px 12px;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:14.5px;cursor:pointer}
.opt span{min-width:0}
.opt small{font-family:var(--mono);color:var(--muted);font-size:12px;flex:none}
.opt[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.opt[aria-pressed="true"] small{color:var(--bg)}
.opt:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.none{padding:14px 12px;color:var(--muted);font-size:14px}
.btn{background:var(--btn);color:var(--btn-ink);border:2px solid var(--btn);border-radius:6px;padding:12px 16px;font-weight:600;font-size:15px;cursor:pointer}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.btns{display:flex;flex-wrap:wrap;gap:10px}

.result{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px 18px;display:grid;gap:18px}
.verdict{font-family:var(--display);font-weight:800;font-size:clamp(46px,13vw,72px);line-height:.88;text-transform:uppercase}
.verdict.win{color:var(--hit)} .verdict.lose{color:var(--accent)}
.vsub{color:var(--muted);font-size:14px;margin-top:8px}
.answer{display:grid;gap:4px;padding-block:14px;border-block:1px solid var(--line)}
.answer h3{font-size:20px;font-weight:600}
.answer .id{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.answer .def{font-size:14px;max-width:62ch}
.answer a{color:var(--ink);font-size:13px}
.debrief{display:grid;gap:14px}
.debrief div{max-width:62ch}
.debrief h4{margin:0 0 3px;font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:15px;color:var(--accent)}
.debrief p{margin:0}
.share{width:100%;min-height:92px;font:400 13px/1.5 var(--mono);padding:10px;border:1px solid var(--line);border-radius:6px;background:var(--log);color:var(--ink)}
.meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--mono);font-size:12px;color:var(--muted)}
footer{font-size:12px;color:var(--muted);max-width:66ch;display:grid;gap:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
.kt{font-weight:400}
.err{background:var(--surface);border:1.5px solid var(--alert);border-radius:6px;padding:10px 12px;color:var(--alert);font-weight:600}
footer a,.prose a{color:var(--ink)}
.prose{display:grid;gap:14px;max-width:62ch}
.prose h2{display:block}
.skeleton{color:var(--muted)}
[hidden]{display:none!important}
.list.short{max-height:none;overflow:visible}
.list.short .opt{padding:14px 12px;font-size:15.5px;align-items:center}
.row .nm span{line-height:1.35}