/* The breach page (breach-view.mjs): a slim run strip on top, the map in the centre, and beside it the one decision
   in front of you. docs/ui.md tokens; amber is structure and what you can click, teal is you, hot is a fight that
   bites, gray is done or out of reach. */
.page:has(> .bx) { overflow: hidden; }
.bx { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--s5); height: 100%; min-height: 0; }
.bx > * { min-width: 0; min-height: 0; }
.shell-on .page:has(> .bx) { padding-top: var(--s4); }
.bx .ico { width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.bx .lbl { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }

/* ---- the run strip: Signal, Trace, tokens, keycards, the server's rule, the pack, then your scripts ---- */
.bx-hud { grid-column: 1 / -1; position: relative; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); padding: var(--s4) var(--s6); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); }
.bx-hud-id { display: inline-flex; align-items: center; gap: var(--s3); color: var(--amber-soft); cursor: help; }
.bx-hud-id b { font: 600 13px var(--mono); letter-spacing: 1.5px; color: var(--bright); }
.bx-sig { display: flex; align-items: center; gap: var(--s4); font-variant-numeric: tabular-nums; flex: 0 1 300px; min-width: 190px; cursor: help; }
.bx-sig .sigbar { flex: 1; width: auto; min-width: 60px; }
.bx-sig strong { font: 600 18px var(--mono); color: var(--you); line-height: 1; }
.bx-sig small { color: var(--muted); font-family: var(--mono); margin-left: calc(-1 * var(--s3)); }
.bx-sig.mid .sigbar { border-color: var(--next); } .bx-sig.mid .sigbar span { background: var(--next); } .bx-sig.mid strong { color: var(--next); }
.bx-sig.low .sigbar { border-color: var(--hot); } .bx-sig.low .sigbar span { background: var(--hot); } .bx-sig.low strong { color: var(--hot); }
.bx-stat { display: inline-flex; align-items: baseline; gap: var(--s3); font-variant-numeric: tabular-nums; cursor: help; }
.bx-stat b { font: 600 15px var(--mono); color: var(--bright); }
.bx-stat.out b { color: var(--gray); }
.bx-stat small { font: 11px var(--mono); color: var(--dim); white-space: nowrap; }
.bx-packwrap { position: relative; }
.bx-packbtn { position: relative; align-items: center; height: var(--h-btn-sm); padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: transparent; cursor: pointer; }
.bx-packbtn .ico { width: 10px; height: 10px; color: var(--amber-soft); transform: rotate(90deg); transition: transform 0.12s; }
.bx-packbtn.on { border-color: var(--amber); background: var(--amber-wash); }
.bx-packbtn.on .ico { transform: rotate(-90deg); }
.bx-packbtn.new::after { content: ''; position: absolute; top: -3px; right: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px var(--amber); }
.bx-perks { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s2); min-width: 0; }
.bx-perk { flex: none; display: inline-flex; align-items: center; height: var(--h-chip); padding: 0 var(--s3); border: 1px solid var(--line); border-left: 2px solid var(--you); border-radius: var(--r-tag); font: 600 11px var(--mono); color: var(--bright); white-space: nowrap; cursor: help; }
.bx-perk.script.r-stock { border-left-color: var(--r-stock); } .bx-perk.script.r-tuned { border-left-color: var(--r-tuned); } .bx-perk.script.r-custom { border-left-color: var(--r-custom); }
.bx-perk-k { flex: none; display: inline-flex; align-items: center; height: var(--h-chip); padding-right: var(--s2); }
/* Trace: a thin meter with the alarm and the hunter marked on it */
.bx-trace { display: inline-flex; align-items: center; gap: var(--s3); font-variant-numeric: tabular-nums; cursor: help; }
.bx-trace .tbar { position: relative; width: 84px; height: 6px; border: 1px solid var(--line-strong); border-radius: 3px; background: var(--inset); overflow: hidden; }
.bx-trace .tbar span { position: absolute; inset: 0 auto 0 0; background: var(--amber-soft); }
.bx-trace .tbar i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--muted); }
.bx-trace b { font: 600 15px var(--mono); color: var(--bright); min-width: 2ch; }
.bx-trace.alarm .tbar span { background: var(--next); } .bx-trace.alarm b { color: var(--next); }
.bx-trace.hunt .tbar { border-color: var(--hot); } .bx-trace.hunt .tbar span { background: var(--hot); } .bx-trace.hunt b { color: var(--hot); }
.bx-hunted { font: 700 10px var(--mono); letter-spacing: 1px; color: var(--hot); animation: bx-blink 1s steps(2) infinite; }
@keyframes bx-blink { 50% { opacity: 0.35; } }
.bx-kind b { font: 600 12px var(--sans); color: var(--next); }
/* the pack: a pop-over under its button */
.bx-pop { position: absolute; top: calc(100% + var(--s3)); left: 0; z-index: 20; width: min(380px, calc(100vw - 32px)); display: grid; gap: var(--s4); padding: var(--s5) var(--s6); background: var(--panel-2); border: 1px solid var(--amber-deep); border-top: 2px solid var(--amber); border-radius: var(--r-card); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6); }
.bx-sec { margin: 0; font: var(--kicker); letter-spacing: var(--kicker-track); text-transform: uppercase; color: var(--muted); display: flex; gap: var(--s3); align-items: baseline; }
.bx-sec small { font: 11px var(--mono); color: var(--dim); letter-spacing: 0; text-transform: none; }

/* ---- the map panel ---- */
.bx-map { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.bx-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth;
  background: radial-gradient(circle at 1px 1px, rgba(241, 185, 47, 0.07) 1px, transparent 0) 0 0 / 18px 18px; }
.bx-board { position: relative; margin: 0 var(--s4); }

/* edges: one SVG, x in % and y in px, strokes that don't scale */
.bx-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.bx-e { stroke-width: 1.5; stroke-linecap: round; }
.bx-e.fog { stroke: rgba(143, 119, 72, 0.28); stroke-dasharray: 2 5; }
.bx-e.seen { stroke: var(--line-strong); }
.bx-e.live { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 6 4; animation: bx-flow 1.2s linear infinite; }
.bx-e.walked { stroke: var(--you); stroke-width: 2.5; }
.bx-e.hop { stroke-dasharray: 1 4; stroke-width: 2; }
.bx-e.hop.live { stroke-dasharray: 2 4; }
@keyframes bx-flow { to { stroke-dashoffset: -20; } }

/* an act: a kicker band across the board */
.bx-act { position: absolute; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s4); border-top: 1px solid var(--line); border-bottom: 1px dashed var(--line); background: linear-gradient(90deg, rgba(241, 185, 47, 0.06), transparent 70%); }
.bx-act-n { font: var(--kicker); letter-spacing: var(--kicker-track); color: var(--amber); }
.bx-act b { font: 600 13px var(--mono); letter-spacing: 1.5px; text-transform: uppercase; color: var(--bright); }
.bx-act-sub { font: 11px var(--mono); color: var(--dim); margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bx-act.done { opacity: 0.55; }
.bx-act-sw { font: 600 9px/14px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--you); border: 1px solid var(--you); padding: 0 4px; border-radius: var(--r-tag); cursor: help; }
.bx-act.on { border-top-color: var(--line-strong); background: linear-gradient(90deg, rgba(241, 185, 47, 0.12), transparent 75%); }

/* the gutter: the subsystem a row runs, and what you rewrote it into */
.bx-gut { position: absolute; left: 0; width: 19%; transform: translateY(-50%); display: grid; gap: var(--s1); padding-left: var(--s4); border-left: 2px solid var(--line); min-width: 0; cursor: help; }
.bx-gut-dir { font: 600 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-gut small { font: 600 12px/1.25 var(--sans); color: var(--you); overflow-wrap: anywhere; }
.bx-gut.held { border-left-color: var(--you); background: linear-gradient(90deg, rgba(127, 209, 199, 0.08), transparent); padding-block: var(--s2); }
.bx-gut.held .bx-gut-dir { color: var(--dim); font-size: 11px; }
.bx-gut.fog { opacity: 0.4; }

/* a node: a square chip, its kind under it */
.bx-node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; padding: 0; border: 0; background: none; width: 76px; z-index: 1; }
.bx-node:hover:not(:disabled) { border-color: transparent; }
.bx-node:disabled { opacity: 1; cursor: default; }
.bx-chip { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: var(--panel-2); color: var(--muted); transition: transform 0.12s, box-shadow 0.12s; }
.bx-chip .ico { width: 17px; height: 17px; }
.bx-q { font: 600 14px var(--mono); color: var(--dim); }
.bx-lbl { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--muted); }
.bx-sub { font: 10px var(--mono); color: var(--dim); max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-node.k-elite .bx-chip { width: 38px; height: 38px; border-width: 2px; border-color: var(--hot); color: var(--hot); box-shadow: inset 0 0 0 2px var(--panel-2), inset 0 0 0 3px rgba(255, 91, 61, 0.45); }
.bx-node.k-elite .bx-lbl { color: var(--hot); }
.bx-node.k-virus .bx-chip { color: var(--amber-soft); }
.bx-node.k-cache .bx-chip, .bx-node.k-broker .bx-chip { color: var(--next); }
.bx-node.k-defrag .bx-chip { color: var(--you); }
.bx-node.k-term .bx-chip { color: var(--bright); }
.bx-node.k-vault .bx-chip { color: var(--r-custom); border-color: rgba(255, 220, 90, 0.55); }
.bx-node.k-vault .bx-lbl { color: var(--r-custom); }
.bx-node.k-switch .bx-chip { color: var(--you); border-style: double; border-width: 3px; }
/* marks on a node: a keycard rides on it, the hunter stands on it */
.bx-mk { display: inline-flex; align-items: center; height: 14px; padding: 0 4px; border: 1px solid currentColor; border-radius: var(--r-tag); font: 700 9px/12px var(--mono); letter-spacing: 1px; text-transform: uppercase; background: var(--panel-2); white-space: nowrap; }
.bx-mk.key { color: var(--r-custom); }
.bx-mk.hunt { color: var(--hot); animation: bx-blink 1s steps(2) infinite; }
.bx-node.hunted .bx-chip { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255, 91, 61, 0.18), 0 0 16px rgba(255, 91, 61, 0.45); }
.bx-node.s-cleared .bx-mk.key, .bx-node.s-fog .bx-mk.key { display: none; }
.bx-node.s-fog .bx-chip { border-style: dashed; border-color: rgba(143, 119, 72, 0.35); background: transparent; width: 26px; height: 26px; }
.bx-node.s-fog .bx-lbl { color: var(--dim); opacity: 0.6; }
.bx-node.s-seen .bx-chip { opacity: 0.85; }
.bx-node.s-reach .bx-chip { border-color: var(--amber); background: rgba(241, 185, 47, 0.1); box-shadow: 0 0 0 3px rgba(241, 185, 47, 0.12), 0 0 14px rgba(241, 185, 47, 0.25); animation: bx-pulse 1.6s ease-in-out infinite; }
.bx-node.s-reach .bx-lbl { color: var(--amber); }
.bx-node.s-reach:hover .bx-chip, .bx-node.s-reach:focus-visible .bx-chip { transform: scale(1.12); background: rgba(241, 185, 47, 0.2); }
.bx-node.s-reach.k-elite .bx-chip { border-color: var(--hot); box-shadow: 0 0 0 3px rgba(255, 91, 61, 0.14), 0 0 14px rgba(255, 91, 61, 0.3); }
.bx-node.s-cleared .bx-chip { border-color: var(--gray); color: var(--gray); background: var(--inset); }
.bx-node.s-cleared .bx-chip::after { content: ''; position: absolute; width: 22px; height: 1px; background: var(--gray); transform: rotate(-45deg); }
.bx-node.s-cleared .bx-lbl, .bx-node.s-cleared .bx-sub { color: var(--gray); }
.bx-node.s-here .bx-chip { border: 2px solid var(--you); color: var(--you); background: rgba(127, 209, 199, 0.12); box-shadow: 0 0 0 4px rgba(127, 209, 199, 0.15), 0 0 18px rgba(127, 209, 199, 0.35); }
.bx-node.s-here .bx-lbl { color: var(--you); }
.bx-you { position: absolute; top: -9px; right: 2px; padding: 0 4px; font: 600 9px/14px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--bg); background: var(--you); border-radius: var(--r-tag); }
@keyframes bx-pulse { 50% { box-shadow: 0 0 0 5px rgba(241, 185, 47, 0.06), 0 0 20px rgba(241, 185, 47, 0.35); } }

/* gates and the Resident: bars across the lanes */
.bx-bar { position: absolute; left: 21%; right: 2%; transform: translateY(-50%); display: flex; align-items: center; gap: var(--s4); height: 40px; padding: 0 var(--s5); border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: repeating-linear-gradient(135deg, rgba(241, 185, 47, 0.05) 0 8px, transparent 8px 16px), var(--panel-2); color: var(--muted); z-index: 1; min-width: 0; }
.bx-bar:disabled { opacity: 1; cursor: default; }
.bx-bar .ico { width: 16px; height: 16px; color: var(--amber); }
.bx-bar-k { font: var(--kicker); letter-spacing: var(--kicker-track); color: var(--amber-soft); }
.bx-bar b { font: 600 14px var(--mono); letter-spacing: 2px; color: var(--bright); }
.bx-bar small { margin-left: auto; font: 11px var(--mono); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bx-bar.k-boss { height: 48px; border-color: rgba(255, 91, 61, 0.55); background: repeating-linear-gradient(135deg, rgba(255, 91, 61, 0.08) 0 8px, transparent 8px 16px), var(--panel-2); }
.bx-bar.k-boss .ico, .bx-bar.k-boss .bx-bar-k { color: var(--hot); }
.bx-bar.k-boss b { font-size: 16px; color: var(--hot); }
.bx-bar.s-reach { border-color: var(--amber); box-shadow: 0 0 16px rgba(241, 185, 47, 0.25); animation: bx-pulse 1.6s ease-in-out infinite; }
.bx-bar.s-reach:hover { background-color: rgba(241, 185, 47, 0.12); }
.bx-bar.k-boss.s-reach { border-color: var(--hot); box-shadow: 0 0 18px rgba(255, 91, 61, 0.3); }
.bx-bar.s-cleared { opacity: 0.55; }
.bx-bar.s-here { border-color: var(--you); }
.bx-bar .bx-you { top: -8px; right: 10px; }
.bx-done { font: 600 10px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--gray); border: 1px solid var(--gray); padding: 0 4px; border-radius: var(--r-tag); }

/* ---- the side column: the decision on top, the tty at the foot ---- */
.bx-side { display: flex; flex-direction: column; gap: var(--s5); overflow-y: auto; padding-right: 2px; }
.bx-side > * { flex: none; }
.bx-screen { border-color: var(--line-strong); box-shadow: inset 0 2px 0 var(--amber); gap: var(--s5); }
.bx-screen h1 { font: 600 22px/1.15 var(--sans); }
.bx-screen h2 { color: var(--amber-soft); }
/* nothing to decide but where to go: one line, then the lit nodes as cards (each one a move) */
.bx-screen.bx-idle { display: grid; gap: var(--s4); padding: var(--s5) var(--s6); border: 1px solid var(--line); border-left: 2px solid var(--amber); border-radius: var(--r-card); background: var(--panel); box-shadow: none; }
.bx-idle-k { display: flex; align-items: center; gap: var(--s4); }
.bx-idle-k .ico { width: 12px; height: 12px; color: var(--amber); }
.bx-idle-k b { font: 600 14px var(--sans); color: var(--bright); }
.bx-idle-k small { margin-left: auto; font: 11px var(--mono); color: var(--amber-soft); white-space: nowrap; }
.bx-peek { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.bx-peek-card { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--s4); align-items: start; width: 100%; height: auto; min-height: 0; padding: var(--s4) var(--s5); text-align: left; border: 1px solid var(--line); border-left: 2px solid var(--amber-deep); border-radius: var(--r-btn); background: var(--inset); color: var(--text); font: inherit; cursor: pointer; }
.bx-peek-card:hover, .bx-peek-card:focus-visible { border-color: var(--amber); border-left-color: var(--amber); background: var(--amber-wash); }
.bx-peek-ico { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--amber); border-radius: var(--r-btn); color: var(--amber-soft); }
.bx-peek-ico .ico { width: 15px; height: 15px; }
.bx-peek-b { display: grid; gap: var(--s1); min-width: 0; }
.bx-peek-top { display: flex; align-items: baseline; gap: var(--s4); min-width: 0; }
.bx-peek-top .bx-card-k { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-peek-lv { margin-left: auto; font: 600 12px var(--mono); color: var(--bright); white-space: nowrap; }
.bx-peek-card b { font: 600 14px var(--sans); color: var(--bright); overflow-wrap: anywhere; }
.bx-peek-card small { font-size: 12px; color: var(--muted); }
.bx-peek-next { font: 10px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; cursor: help; }
.bx-peek-card.k-elite { border-left-color: var(--hot); } .bx-peek-card.k-elite .bx-peek-ico { border-color: var(--hot); color: var(--hot); }
.bx-peek-card.k-boss { border-left-color: var(--hot); } .bx-peek-card.k-boss .bx-peek-ico { border-color: var(--hot); color: var(--hot); }
.bx-peek-card.k-defrag .bx-peek-ico { color: var(--you); } .bx-peek-card.k-cache .bx-peek-ico, .bx-peek-card.k-broker .bx-peek-ico { color: var(--next); }
.bx-card.k-rewrite.on { border-color: var(--you); border-top-color: var(--you); }
.bx-was { color: var(--you); cursor: help; }
.cap-kept { font: 600 9px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-strong); padding: 0 3px; border-radius: var(--r-tag); cursor: help; }
.cap-report { border-top-color: var(--line-strong); }
.cap-report b { color: var(--next) !important; }
.cap-report li.stock b { color: var(--gray) !important; }
.bx-half { color: var(--next); }
.bx-screen .row.acts { display: flex; flex-wrap: wrap; }
.bx-screen .row.acts .btn { flex: 1 1 auto; }
.bx .btn small { font: 10px var(--mono); color: var(--dim); }
.bx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.bx-cards.two { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bx-card { display: grid; align-content: start; gap: var(--s3); padding: var(--s5); border: 1px solid var(--line); border-top: 2px solid var(--line-strong); border-radius: var(--r-card); background: var(--inset); min-width: 0; }
.bx-card b { font: 600 15px var(--sans); color: var(--bright); overflow-wrap: anywhere; }
.bx-card p { margin: 0; font-size: 13px; color: var(--text); }
.bx-card-k { font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); }
.bx-card-act { margin-top: auto; padding-top: var(--s3); display: flex; align-items: center; gap: var(--s3); }
.bx-card-act .btn { flex: 1; }
.bx-card.k-script.r-stock { border-top-color: var(--r-stock); } .bx-card.k-script.r-tuned { border-top-color: var(--r-tuned); } .bx-card.k-script.r-custom { border-top-color: var(--r-custom); }
.bx-note { margin: 0; font-size: 13px; color: var(--muted); }
.bx-card .bx-rule { font: 12px var(--sans); color: var(--next); }
.bx-card.k-rewrite { border-top-color: var(--amber); }
.bx-card.k-rewrite b { font-size: 17px; }
.bx-out span { display: block; margin-bottom: var(--s1); font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--you); cursor: help; }
.bx-card .bx-out { color: var(--muted); font-size: 12px; }
.bx-out span { color: var(--dim); }
.bx-price { font: 600 12px var(--mono); color: var(--next); }
.bx-price.short { color: var(--hot); }
.bx-term { margin: 0; padding: var(--s4) var(--s5); background: var(--inset); border: 1px solid var(--line); border-radius: var(--r-btn); font: 12px/1.55 var(--mono); color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.bx-term .you { color: var(--you); }
.bx-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.bx-opts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s4); align-items: center; }
.bx-opts span { font-size: 13px; color: var(--text); }
.bx-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.bx-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: center; padding: var(--s2) var(--s4); border: 1px solid var(--line); border-radius: var(--r-btn); }
.bx-slot.on { border-color: var(--line-strong); }

/* gear: name over stats, Equip in its own column (the item row with an action) */
.bx-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.bx-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); align-items: center; padding: var(--s2) 0; border-bottom: 1px dashed var(--line); }
.bx-items li > b, .bx-items li > small { grid-column: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx-items li > small { font: 10px var(--mono); color: var(--dim); }
.bx-items li > .btn, .bx-items li > .tag { grid-column: 2; grid-row: 1 / span 2; }
.bx-items li > .btn { min-height: var(--h-btn-sm); padding: 0 var(--s4); font-size: 12px; }

/* the tty: the last two lines; open, the last twelve */
.bx-log { margin-top: auto; display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.bx-log-k { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 0; height: auto; padding: var(--s1) 0; border: 0; background: none; font: var(--label); letter-spacing: var(--label-track); text-transform: uppercase; color: var(--dim); cursor: pointer; }
.bx-log-k:hover { color: var(--amber-soft); }
.bx-log-k .ico { width: 11px; height: 11px; }
.bx-log-lines { display: grid; font: 11px/1.6 var(--mono); color: var(--muted); }
.bx-log-lines > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-log-lines > div:last-child { color: var(--text); }
.bx-log.open .bx-log-lines { max-height: 240px; overflow-y: auto; }
.bx-log.open .bx-log-lines > div { white-space: pre-wrap; overflow-wrap: anywhere; }
.bx-log .you { color: var(--you) !important; }

/* ---- the end: the capture card ---- */
.bx-capture { border-color: var(--amber); box-shadow: inset 0 3px 0 var(--amber), 0 0 30px rgba(241, 185, 47, 0.12); gap: var(--s5); }
.bx-capture.lost { border-color: var(--hot); box-shadow: inset 0 3px 0 var(--hot), 0 0 30px rgba(255, 91, 61, 0.1); }
.cap-kick { display: flex; justify-content: space-between; font: var(--kicker); letter-spacing: var(--kicker-track); color: var(--amber); }
.bx-capture.lost .cap-kick { color: var(--hot); }
.bx-capture h1 { font: 600 26px var(--mono); letter-spacing: 2px; }
.cap-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cap-lines li { display: grid; grid-template-columns: 62px 120px minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.cap-sub { font: 600 12px var(--mono); color: var(--muted); }
.cap-lines b { font: 600 13px var(--sans); color: var(--you); }
.cap-lines li span:last-child { font-size: 13px; color: var(--text); }
.cap-lines li.stock b { color: var(--gray); } .cap-lines li.stock span:last-child { color: var(--dim); }
.bx-capture.lost .cap-lines b { color: var(--bright); }
.cap-stats { display: flex; flex-wrap: wrap; gap: var(--s4); }
.cap-stats .stat { flex: 1 1 90px; }
.cap-stats .stat b { font: 600 18px var(--mono); color: var(--bright); }
.cap-loot { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.cap-loot li { font-size: 13px; }
.cap-dump { border: 1px solid var(--line); border-left: 2px solid var(--amber-soft); background: var(--inset); border-radius: var(--r-btn); }
.cap-dump-k { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: baseline; padding: var(--s4) var(--s5) 0; font: 11px var(--mono); color: var(--dim); }
.cap-dump-k b { font: 600 13px var(--mono); color: var(--amber); }
.cap-frag { margin-left: auto; color: var(--amber-soft); letter-spacing: 1px; }
.cap-dump pre { margin: 0; padding: var(--s4) var(--s5) var(--s5); font: 12px/1.6 var(--mono); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- phone: one column. The strip sticks to the top; the decision (or the one line) sits over the map ---- */
@media (max-width: 900px) {
  .page:has(> .bx) { overflow: visible; }
  .bx { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; gap: var(--s4); }
  .bx-hud { order: -2; position: sticky; top: 0; gap: var(--s3) var(--s5); padding: var(--s3) var(--s5); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55); }
  .bx-hud-id { display: none; }
  .bx-sig { flex: 1 1 100%; min-width: 0; }
  .bx-sig strong { font-size: 16px; }
  .bx-packwrap { position: static; }
  .bx-pop { left: var(--s3); right: var(--s3); width: auto; }
  .bx-perks { margin-left: 0; justify-content: flex-start; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
  .bx-perks::-webkit-scrollbar { display: none; }
  .bx-stat small { display: none; }
  .bx-side { overflow: visible; order: -1; }
  .bx-side:not(.focus) .bx-log { display: none; }
  .bx-peek { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .bx-peek-card { grid-template-columns: minmax(0, 1fr); padding: var(--s3) var(--s4); }
  .bx-peek-ico, .bx-peek-card small, .bx-peek-next { display: none; }
  .bx-map { overflow: visible; }
  .bx-scroll { overflow: visible; }
  .bx-node { width: 58px; }
  .bx-sub { display: none; }
  .bx-gut { width: 20%; padding-left: var(--s2); }
  .bx-gut small { font-size: 10px; }
  .bx-bar small { display: none; }
  .bx-act-sub { display: none; }
  .bx-opts li { grid-template-columns: minmax(0, 1fr); }
  .cap-lines li { grid-template-columns: 56px minmax(0, 1fr); }
  .cap-lines li span:last-child { grid-column: 2; }
}

/* a breach playtest: the campaign's own tabs and meters step aside */
.breach-mode .modules button[data-module="map"], .breach-mode .modules button[data-module="mail"], .breach-mode .modules button[data-module="server"],
.breach-mode #meter-integrity, .breach-mode .meter:has(#vault-value) { display: none; }
/* the choice in a tile: framed amber, the tile is the card */
.bx-card-act .btn { border-color: var(--amber-deep); }
.bx-card-act .btn:hover:not(:disabled) { border-color: var(--amber); background: var(--amber-wash); }

/* ---- heat on the strip, and a node card's genes ---- */
.bx-peek-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.bx-genes { display: inline-flex; flex-wrap: wrap; gap: var(--s2); margin: 0; }
.bx-heat b { color: var(--hot); }
.bx-peek-card.hunted { border-left-color: var(--hot); }
/* the server's rule on its campaign card */
.cp-rule b { color: var(--next); font-weight: 600; }
.cp-rule span { color: var(--text); }
/* scripts on the fight tray */
#tray .ability.script { border-left: 2px solid var(--r-stock); }
#tray .ability.script.r-tuned { border-left-color: var(--r-tuned); } #tray .ability.script.r-custom { border-left-color: var(--r-custom); }