:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#F4F6F8; --panel:#FFFFFF; --op:#DCE1E7; --ink:#18202C; --muted:#5A6573; --rule:#CBD2DA; --spine:#8C97A4; --stripe:#EAEEF2;
  --c-GAZA:#E4572E; --c-JS:#D99A1E; --c-LEB:#1F9D55; --c-SYR:#8B5CF6; --c-IRQ:#8D6E4B; --c-YEM:#0FA3A3;
  --c-IRAN:#2754C5; --c-INTL:#64748B; --c-UN:#2E95D6; --c-LEGAL:#C026D3; --c-ANTI:#B3123A; --c-PROTEST:#8FAE1E;
  --display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101722; --panel:#18233A; --op:#2B3850; --ink:#E6EBF1; --muted:#98A4B3; --rule:#2A3647; --spine:#56657C; --stripe:#141D2C;
    --c-IRAN:#4C7BEA; --c-INTL:#8C9AAE; --c-ANTI:#E0335E; --c-IRQ:#B08D66; --c-SYR:#A07CF8;
  }
}
:root[data-theme="dark"]{
  --bg:#101722; --panel:#18233A; --op:#2B3850; --ink:#E6EBF1; --muted:#98A4B3; --rule:#2A3647; --spine:#56657C; --stripe:#141D2C;
  --c-IRAN:#4C7BEA; --c-INTL:#8C9AAE; --c-ANTI:#E0335E; --c-IRQ:#B08D66; --c-SYR:#A07CF8;
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.45 var(--body);-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;overflow:hidden}

.top{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding:.8rem 1rem;border-bottom:1px solid var(--rule)}
.top h1{font:700 1.9rem/1 var(--display);margin:0;letter-spacing:.005em}
.zoom{display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:8px;background:var(--panel);overflow:hidden}
.zoom button{width:2.4rem;height:2.2rem;border:0;background:transparent;color:var(--ink);font:600 1.3rem/1 var(--body);cursor:pointer}
.zoom button:disabled{opacity:.3;cursor:default}
.zoom .lvl{min-width:8.5rem;text-align:center;font:600 1rem/1 var(--display);letter-spacing:.02em;border-left:1px solid var(--rule);border-right:1px solid var(--rule);padding:.6rem .5rem}
.pips{display:inline-flex;gap:3px;margin-left:.4rem;vertical-align:1px}
.pips i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.2}
.pips i.on{opacity:1}
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:600 .75rem/1 var(--body);padding:.35rem .55rem .35rem .4rem;border-radius:999px;cursor:pointer}
.seg2{display:inline-flex;gap:.3rem}
.chipbtn{border:1px solid var(--rule);background:transparent;color:var(--ink);font:600 .75rem/1 var(--body);padding:.35rem .6rem;border-radius:999px;cursor:pointer}
.chip .n{color:var(--muted);font-weight:500}
.chip .sw{width:.7rem;height:.7rem;border-radius:50%;background:var(--c)}
.chip[aria-pressed="false"]{opacity:.38}
.chip[aria-pressed="false"] .sw{background:transparent;box-shadow:inset 0 0 0 2px var(--c)}
.count{color:var(--muted);font-size:.8rem;margin-left:auto}
.hublink{color:var(--muted);font-size:.8rem;text-decoration:none;border-bottom:1px dotted var(--rule)}
.hublink:hover{color:var(--ink);border-color:var(--ink)}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

#board{flex:1;overflow:auto;position:relative}
#head{position:sticky;top:0;z-index:4;display:flex;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
#head .corner{flex:none}
#head .lane{flex:none;padding:.55rem .6rem .5rem;font:700 1rem/1 var(--display);letter-spacing:.03em;color:var(--c);border-left:1px solid var(--rule);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#head .lane small{display:block;font:500 .72rem/1.2 var(--body);color:var(--muted);letter-spacing:0;margin-top:.2rem}
#canvas{position:relative}
.stripe{position:absolute;left:0;right:0}
.stripe.alt{background:var(--stripe)}
.yr{position:absolute;left:10px;font:700 2.6rem/1 var(--display);color:var(--ink);opacity:.85;writing-mode:vertical-rl;transform:rotate(180deg)}
.yr.sm{writing-mode:horizontal-tb;transform:none;font-size:1.05rem;left:6px}
.mo{position:absolute;font:600 .78rem/1 var(--display);color:var(--muted);text-align:right;width:40px;letter-spacing:.03em}
.laneline{position:absolute;top:0;bottom:0;width:1px;background:var(--rule);opacity:.6}
svg#wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
svg#wires path{fill:none;stroke-width:1.2;opacity:.45}
svg#wires path.hot{opacity:1;stroke-width:2.2}
svg#wires circle{stroke:var(--bg);stroke-width:1.5}

.card{position:absolute;background:var(--panel);border-left:3px solid var(--c);border-radius:0 5px 5px 0;padding:.35rem .5rem .4rem;cursor:default;box-shadow:0 1px 0 var(--rule)}
.card.op{background:var(--op)}
.card.op.i3{color:var(--ink)}
.oplegend{display:inline-flex;align-items:center;gap:.4rem;font:600 .75rem/1 var(--body);color:var(--muted)}
.oplegend i{width:1.4rem;height:.9rem;border-radius:2px;background:var(--op);border:1px solid var(--rule)}
.card .dt{display:block;font:600 .74rem/1.1 var(--display);letter-spacing:.03em;color:var(--c);margin-bottom:.15rem}
.card p{margin:0;font-weight:400}
.card .bd{font-weight:700;color:var(--c)}
.card .hl{display:block;font:700 .95rem/1.1 var(--display);letter-spacing:.03em;color:var(--c);margin-bottom:.2rem}
.card.i1 .hl{font-size:1.1rem}
.card.i3 .hl{font-size:.85rem}
.card.s-mini .hl{font-size:.85rem;margin-bottom:0}
.card.s-mini p{display:none !important}
.card.s-mini:hover p,.card.s-mini:focus-visible p,.card.s-mini:has(:focus-visible) p{display:block !important;margin-top:.15rem}
.card.s-large .hl{font-size:1.3rem}
.card .dt{margin:.3rem 0 0 !important}
.card{line-height:1.34;font-family:var(--body)}
.card.i1{font-weight:600;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 2px 6px rgba(0,0,0,.08)}
.card.i3{color:var(--muted)}
.card.s-small{font-size:12px}
.card.s-small.i1{font-size:12.5px;border-left-width:5px;padding:.5rem .65rem .55rem}
.card.s-small.i1 .dt{font-size:.9rem}
.card.s-small.i3{font-size:11px}
.card.s-small.i3 .dt{font-size:.68rem}
.card.s-mini{font-size:10.5px;padding:.2rem .35rem .25rem}
.card.s-mini .dt{font-size:.64rem;margin-bottom:.05rem}


.card.s-large{font-size:15px;padding:.65rem .85rem .75rem;border-left-width:6px}
.card.s-large.i1{font-size:16px}
.card.s-large .dt{font-size:1.05rem;margin-bottom:.25rem}
.card:hover,.card:focus-visible,.card:has(:focus-visible){z-index:5}
dialog{border:1px solid var(--rule);border-radius:10px;background:var(--panel);color:var(--ink);padding:1rem;max-width:min(92vw,640px)}
dialog::backdrop{background:rgba(0,0,0,.35)}
dialog .row{display:flex;gap:.5rem;justify-content:flex-end;align-items:center;margin-top:.6rem}
dialog textarea{width:min(80vw,600px);font:12px/1.4 ui-monospace,Menlo,monospace}
#exp textarea{height:16vh}
.expsec+.expsec{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--rule)}
.explbl{margin:0 0 .4rem;font-weight:600}
.explbl span{color:var(--muted);font-weight:500}
dialog h2{margin:0 0 .8rem;font:700 1.5rem/1 var(--display)}
#imp textarea{height:22vh;margin-top:.5rem;color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:6px;padding:.45rem .55rem}
#imp .explbl{font-weight:500;color:var(--muted)}
#imp .err{margin:.5rem 0 0;font-size:.8rem;min-height:1em}
#imp .err.ok{color:var(--c-LEB)}
#imp .err.bad{color:var(--c-ANTI)}
#imp input[type=file]{font:400 .85rem var(--body);color:var(--ink)}
#addDlg .grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem}
#addDlg .grid .full{grid-column:1/-1}
#addDlg label{display:flex;flex-direction:column;gap:.25rem;font:600 .78rem/1.2 var(--body)}
#addDlg label small,#addDlg legend small{font-weight:500;color:var(--muted)}
#addDlg input[type=text],#addDlg input[type=date],#addDlg select,#addDlg textarea{width:100%;font:400 14px/1.3 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--rule);border-radius:6px;padding:.45rem .55rem}
#addDlg textarea{resize:vertical}
#addDlg fieldset{border:1px solid var(--rule);border-radius:6px;padding:.45rem .6rem .5rem;margin:0;display:flex;flex-direction:column;gap:.35rem}
#addDlg .opt b{font-weight:700}
#addDlg legend{font:600 .78rem/1.2 var(--body);padding:0 .3rem}
#addDlg .flags{display:flex;gap:1rem;flex-wrap:wrap}
#addDlg .opt{flex-direction:row;align-items:center;gap:.35rem;font-weight:500;font-size:.85rem}
#addDlg .err{margin:.5rem 0 0;color:var(--c-ANTI);font-size:.8rem;min-height:1em}
#addDlg .hint{margin-right:auto;color:var(--muted);font-size:.75rem}
.tool.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.card .added{display:inline-block;margin-left:.3rem;font:600 .6rem/1 var(--body);color:var(--bg);background:var(--muted);border-radius:3px;padding:.1rem .25rem;vertical-align:1px}
.ctl button.del{color:var(--c-ANTI)}
@media (max-width:560px){#addDlg .grid{grid-template-columns:1fr}}
.ctl{position:absolute;top:3px;right:3px;display:none;gap:2px}
.card:hover .ctl,.card:focus-visible .ctl,.card:has(:focus-visible) .ctl{display:flex}
.ctl button{width:20px;height:20px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);border-radius:4px;font:600 13px/1 var(--body);padding:0;cursor:pointer}
.ctl{background:var(--panel);border-radius:5px;padding:1px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tool{border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:600 .95rem/1 var(--display);padding:.6rem .8rem;border-radius:8px;cursor:pointer}
.card.hot{z-index:3;outline:2px solid var(--c)}
.verify{display:inline-block;margin-left:.3rem;font:500 .65rem/1 var(--body);color:var(--muted);border:1px dashed var(--muted);border-radius:3px;padding:.08rem .25rem;vertical-align:1px}

@media print{body{overflow:visible;height:auto} #board{overflow:visible}}