/* Infrastructure map. Uses the page tokens (--paper, --ink, --accent, ...) from index.html. */
.infra-band{border-top:1px solid var(--rule-strong);background:var(--paper);padding:26px 0 56px;position:relative;z-index:1}
.infra-band .kk{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.in-head{padding:0 18px 16px;max-width:1500px}
.in-head h2{margin:8px 0 6px;font:600 21px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.in-head p{margin:0;max-width:78ch;font:13.5px/1.55 var(--sans);color:var(--muted)}
.modes{display:inline-flex;margin-top:14px;border:1px solid var(--rule-strong);background:var(--card)}
.modebtn{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;color:var(--muted)}
.modebtn+.modebtn{border-left:1px solid var(--rule-strong)}
.modebtn:hover{color:var(--ink)}
.modebtn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.in-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0 24px;padding:0 18px;align-items:start}
.in-main{min-width:0}
.in-sub{margin:26px 0 8px;font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.in-panel{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;border:1px solid var(--rule-strong);background:var(--card);padding:16px 18px 20px}

/* topology svg */
.in-topo{border:1px solid var(--rule);background:var(--card);padding:8px}
.in-topo svg{display:block;width:100%;height:auto;color:var(--muted)}
.in-topo .z rect{fill:none;stroke:var(--rule-strong);stroke-dasharray:3 4}
.in-topo .z.box rect{fill:rgba(193,54,29,.04);stroke:var(--accent);stroke-dasharray:none}
.in-topo .z.gh rect{fill:var(--paper-2);stroke:var(--ink);stroke-dasharray:none}
.in-topo .z[data-id]{cursor:pointer}
.in-topo .z-label{font:500 9.5px var(--mono);letter-spacing:.12em;fill:var(--faint)}
.in-topo .z.box .z-label{fill:var(--accent)}
.in-topo .inode{cursor:pointer}
.in-topo .inode rect{fill:var(--card);stroke:var(--ink);stroke-width:1}
.in-topo .inode.dash rect{stroke-dasharray:4 3;stroke:var(--faint)}
.in-topo .inode.faded{opacity:.5}
.in-topo .inode:hover rect{stroke-width:2}
.in-topo .inode:focus-visible{outline:none}
.in-topo .inode:focus-visible rect{stroke:var(--accent);stroke-width:2}
.in-topo .inode.sel rect{fill:var(--accent-soft);stroke:var(--accent);stroke-width:2.2}
.in-topo .i-t{font:620 12px var(--sans);fill:var(--ink)}
.in-topo .i-s{font:10px var(--mono);fill:var(--muted)}
.in-topo .inode.sel .i-t{fill:var(--accent)}
.in-topo .iedge{fill:none;stroke:var(--muted);stroke-width:1.2}
.in-topo .iedge.dash{stroke-dasharray:4 4;stroke:var(--faint)}
.in-topo .e-label{font:9px var(--mono);fill:var(--muted);letter-spacing:.02em}

/* matrix */
.in-mx{overflow-x:auto;padding-bottom:4px}
.mx{display:grid;grid-template-columns:104px repeat(8,minmax(112px,1fr));min-width:1000px;border-top:1px solid var(--ink)}
.mx-corner{border-bottom:1px solid var(--ink)}
.mx-col{padding:8px 8px 7px;text-align:left;border-bottom:1px solid var(--ink);border-left:1px solid var(--rule)}
.mx-col .n{font:620 13px var(--sans);letter-spacing:-.01em}
.mx-col:hover{background:var(--paper-2)}
.mx-col.on{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.mx-lane{padding:10px 8px;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:3px;justify-content:center}
.mx-lane b{font:620 12.5px var(--sans)}
.mx-lane span{font:9px/1.35 var(--mono);letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.mx-lane.box b{color:var(--accent)}
.mx-cell{padding:7px 6px;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:5px;align-items:stretch;min-height:58px;transition:opacity .12s}
.mx-cell.box{background:rgba(193,54,29,.04)}
.mx-cell.ci{background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(21,23,20,.025) 7px 8px)}
.mx-cell.human{background:rgba(154,98,6,.045)}
.mx-cell.dim{opacity:.32}
.mx-span{grid-column:2 / -1;padding:7px 10px 8px;border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);font:12px/1.5 var(--sans);color:var(--muted)}
.mx-span span{display:inline-block;margin-right:9px;font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.mx-span.human{background:rgba(154,98,6,.045)}

.ic{display:block;text-align:left;font:11px/1.35 var(--sans);padding:4px 6px;border:1px solid var(--rule-strong);background:var(--card);color:var(--ink);overflow-wrap:anywhere}
.ic:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.ic.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.ic.gate{font:10.5px/1.35 var(--mono);border:1px dashed var(--ink);background:var(--paper-2)}
.ic.gate.ask{border:1px solid var(--accent);background:var(--accent-soft)}
.ic.gate.prop,.ic.prop{border-style:dashed;border-color:var(--amber);color:var(--amber);background:transparent}
.ic.seat{font-weight:600}
.ic.drv{font:10.5px/1.35 var(--mono);background:var(--paper-2)}
.ic.must{border-color:var(--accent);background:var(--accent-soft)}
.ic.cond{border-style:dashed;color:var(--muted)}
.ic.opt{color:var(--muted);border-color:var(--rule)}
.ic.gate:hover,.ic.seat:hover,.ic.must:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* gate table */
.in-gates{overflow-x:auto}
.gt{border-collapse:collapse;width:100%;min-width:900px;font-size:12px;line-height:1.45}
.gt th{text-align:left;font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 10px 6px 8px;border-bottom:1px solid var(--ink);border-top:1px solid var(--ink);white-space:nowrap}
.gt td{padding:8px 10px 8px 8px;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--muted)}
.gt td:first-child{color:var(--ink);white-space:nowrap}
.gt tbody tr{cursor:pointer}
.gt tbody tr:hover td{background:var(--paper-2)}
.gt tbody tr.sel td{background:var(--accent-soft)}
.gt tbody tr:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gk{display:inline-block;font:600 10.5px var(--mono);border:1px dashed var(--ink);padding:0 5px;margin-right:4px}
.tg{font:8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px dashed var(--amber);padding:0 4px;margin-left:4px}

/* panel */
.in-panel .k{font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.in-panel h3{margin:6px 0 8px;font:660 19px/1.18 var(--sans);letter-spacing:-.02em}
.in-panel .lead{margin:0 0 12px;font-size:13.5px;line-height:1.55}
.in-panel .muted{color:var(--muted)}
.in-panel .small{font-size:12px;line-height:1.5;margin:10px 0 0}
.in-panel dl.d{margin:0;border-top:1px solid var(--rule)}
.in-panel dl.d dt{font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:8px 0 2px}
.in-panel dl.d dd{margin:0;padding:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--muted);border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.badge{display:inline-block;vertical-align:middle;margin-left:6px;font:500 8.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--ink);color:var(--ink);white-space:nowrap}
.badge.st-planned,.badge.st-proposed,.badge.st-assumed{border:1px dashed var(--amber);color:var(--amber)}
.badge.st-spike{border-color:var(--accent);color:var(--accent)}
.badge.st-driver{border-color:var(--rule-strong);color:var(--faint);background:var(--paper-2)}
.key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:14px 0 4px}
.ks{display:flex;align-items:center;gap:6px;font:9px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.ks i{width:14px;height:10px;border:1px solid var(--ink);background:var(--card);display:inline-block}
.ks i.dash{border:1px dashed var(--amber)}
.ks i.ask{border-color:var(--accent);background:var(--accent-soft)}

/* notes */
.in-notes{padding:34px 18px 0;max-width:1500px}
.nt-head h3{margin:8px 0 6px;font:600 19px/1.25 var(--sans);letter-spacing:-.01em}
.nt-head p{margin:0 0 16px;max-width:78ch;font:13px/1.55 var(--sans);color:var(--muted)}
.nt{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.nt li{border:1px solid var(--rule-strong);background:var(--card);padding:12px 14px 10px}
.nt-top{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.nt-top b{font:620 14px/1.3 var(--sans)}
.tag{flex:none;font:500 8.5px var(--mono);letter-spacing:.1em;padding:2px 6px;border:1px solid var(--ink);color:var(--ink)}
.t-conflict{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.t-differs,.t-changed{border-color:var(--accent);color:var(--accent)}
.t-open{border-style:dashed;border-color:var(--amber);color:var(--amber)}
.t-kept,.t-clarified{border-color:var(--rule-strong);color:var(--muted)}
.nt dl{margin:0}
.nt dt{font:500 8.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:7px}
.nt dd{margin:1px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

@media (max-width:1080px){
  .in-grid{display:block}
  .in-panel{position:static;max-height:none;margin-top:16px}
}
@media (max-width:620px){
  .in-head,.in-grid,.in-notes{padding-left:10px;padding-right:10px}
  .nt{grid-template-columns:1fr}
}
@media print{.modes{display:none}.in-panel{position:static}}