/* ROOTWAR — botnet & lab views (SPEC §9.4, DESIGN.md §9 v3). Scoped under .view-botnet / .view-lab.
   Colours only through the theme vars (app.css derived tokens). Hot = actionable / attack, intel = data / defense / research. */

/* ========================================================================================================= BOTNET */
/* The roster layout follows the width of the view itself (the chat column eats into the viewport): container queries. */
.view-botnet { container: bn / inline-size; }
.view-botnet [data-role="atk"], .view-botnet [data-role="siege"] { --role: var(--hot); }
.view-botnet [data-role="spy"], .view-botnet [data-role="def"] { --role: var(--intel); }

.view-botnet .bn-k {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--t1);
  font: 700 15px/1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.view-botnet .bn-k .ico { width: 17px; height: 17px; color: var(--t3); }
.view-botnet .bn-k .slab-osd { margin-left: auto; }

/* ---- hero: compute gauge + compile pipeline ---- */
.view-botnet .bn-hero { display: grid; grid-template-columns: minmax(270px, 360px) minmax(0, 1fr); gap: 16px; }
.view-botnet .bn-gauge, .view-botnet .bn-pipe { padding: 16px 18px; border: 1px solid var(--line); background: var(--s1); }
.view-botnet .bn-gauge { display: grid; align-content: start; gap: 12px; }
.view-botnet .bg-big { display: flex; align-items: baseline; gap: 6px; margin: 0; font: 700 58px/.9 var(--font-display); font-variant-numeric: tabular-nums; }
.view-botnet .bg-used { color: var(--t1); font-weight: 700; }
.view-botnet .bg-sep, .view-botnet .bg-cap { color: var(--t3); font-size: 30px; }
.view-botnet .bg-big.full .bg-used { color: var(--hostile); }
.view-botnet .bg-segs { display: grid; grid-template-columns: repeat(40, minmax(0, 1fr)); gap: 2px; height: 14px; }
.view-botnet .bg-segs i { background: color-mix(in srgb, var(--fg) 8%, transparent); transition: background-color var(--dur-2); }
.view-botnet .bg-segs i.home { background: var(--hot); }
.view-botnet .bg-segs i.queued { background: var(--intel); }
.view-botnet .bg-segs i.away { background: repeating-linear-gradient(-45deg, var(--t2) 0 1.5px, transparent 1.5px 3.5px); }
.view-botnet .bg-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.view-botnet .bg-leg { display: flex; align-items: center; gap: 7px; color: var(--t3); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.view-botnet .bg-leg > i { flex: 0 0 auto; width: 8px; height: 8px; background: color-mix(in srgb, var(--fg) 12%, transparent); }
.view-botnet .bg-leg.home > i { background: var(--hot); }
.view-botnet .bg-leg.queued > i { background: var(--intel); }
.view-botnet .bg-leg.away > i { background: repeating-linear-gradient(-45deg, var(--t2) 0 1.5px, transparent 1.5px 3px); }
.view-botnet .bg-leg b { margin-left: auto; color: var(--t1); font: 600 13px var(--font-mono); letter-spacing: 0; }
.view-botnet .bg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.view-botnet .bg-slots { display: flex; align-items: baseline; gap: 8px; }
.view-botnet .bg-slots b { color: var(--t1); font: 600 13px var(--font-mono); }
.view-botnet .bg-hint { margin: 0; color: color-mix(in srgb, var(--danger) 80%, var(--fg)); font-size: 12.5px; }

.view-botnet .bn-pipe { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; }
.view-botnet .pipe-track { position: relative; display: flex; align-items: stretch; min-height: 118px; padding-bottom: 16px; overflow-x: auto; scrollbar-width: thin; }
/* the conveyor under the blocks: a dashed belt, moving only while something compiles (live status, slow) */
.view-botnet .pipe-track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 5px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: repeating-linear-gradient(90deg, var(--line-3) 0 8px, transparent 8px 16px);
}
.view-botnet .bn-pipe.running .pipe-track::after { animation: bn-belt 2.4s linear infinite; }
@keyframes bn-belt { to { background-position: 32px 0; } }
.view-botnet .pipe-belt { display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; }
.view-botnet .pipe-empty { align-self: center; max-width: 46ch; margin: 0; color: var(--t3); font-size: 13px; }
.view-botnet .pipe-empty[hidden] { display: none; }
.view-botnet .pb {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: 30px minmax(0, 1fr) 24px;
  grid-template-areas: "g id x" "bar bar bar" "st st eta";
  align-content: start;
  gap: 7px 8px;
  width: 172px;
  padding: 10px 10px 9px;
  border: 1px solid var(--line-2);
  background: var(--s2);
  animation: bn-pb-in var(--dur-2) var(--ease-out);
  transition: opacity var(--dur-1);
}
@keyframes bn-pb-in { from { opacity: 0; transform: translateX(14px); } }
.view-botnet .pb + .pb::before { content: ''; position: absolute; top: 24px; left: -13px; width: 12px; height: 1px; background: var(--line-3); }
.view-botnet .pb.head { border-color: var(--line-hot); background: linear-gradient(180deg, var(--a-soft), transparent 60%), var(--s2); }
.view-botnet .pb.out { opacity: .35; pointer-events: none; }
.view-botnet .pb-g { grid-area: g; display: grid; place-items: center; color: var(--t2); }
.view-botnet .pb.head .pb-g { color: var(--hot); }
.view-botnet .pb-id { grid-area: id; display: grid; gap: 2px; min-width: 0; }
.view-botnet .pb-name { overflow: hidden; color: var(--t2); font: 600 12.5px/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.view-botnet .pb-n { color: var(--t1); font: 700 21px/1 var(--font-display); }
.view-botnet .pb-x { grid-area: x; align-self: start; width: 24px; height: 24px; }
.view-botnet .pb-x .ico { width: 13px; height: 13px; }
.view-botnet .pb-bar { grid-area: bar; }
.view-botnet .pb-wait > i { transform: none; background: repeating-linear-gradient(-45deg, var(--line-3) 0 1.5px, transparent 1.5px 4px); }
.view-botnet .pb-state { grid-area: st; }
.view-botnet .pb.head .pb-state { color: var(--hot); }
.view-botnet .pb-eta { grid-area: eta; color: var(--t2); text-align: right; white-space: nowrap; }
.view-botnet .pipe-foot { display: flex; justify-content: flex-end; min-height: 1.2em; }
.view-botnet .bn-pipe.done { animation: bn-pipe-done 1.2s var(--ease-out); }
@keyframes bn-pipe-done { 0%, 35% { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--line-hot); } 100% { border-color: var(--line); box-shadow: none; } }

/* ---- roster: program spec sheets ---- */
.view-botnet .bn-sec .osd { flex: 0 0 auto; }
.view-botnet .bn-roster { border: 1px solid var(--line); background: var(--s1); }
.view-botnet .prog, .view-botnet .bn-fw {
  position: relative;
  display: grid;
  grid-template-columns: 4px 64px minmax(0, 1.3fr) minmax(0, 1.2fr) 92px 236px;
  grid-template-areas:
    "led badge id   stats home order"
    "led badge desc cost  home order";
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-1);
}
.view-botnet .bn-roster > :last-child { border-bottom: 0; }
.view-botnet .prog:hover, .view-botnet .prog:focus-within { background: var(--s2); }
.view-botnet .p-led { grid-area: led; align-self: stretch; margin: -14px 0; background: var(--line-2); }
.view-botnet .prog[data-state="ok"] .p-led { background: var(--role); }
.view-botnet .p-badge {
  grid-area: badge;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 9px 0 7px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--role, var(--intel)) 10%, transparent), transparent 70%);
  color: var(--role, var(--intel));
}
.view-botnet .p-badge .ico { width: 30px; height: 30px; }
.view-botnet .p-code { color: var(--t3); font: 600 9px/1 var(--font-mono); letter-spacing: .08em; }
.view-botnet .p-id { grid-area: id; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; min-width: 0; }
.view-botnet .p-name { margin: 0; color: var(--t1); font: 700 20px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.view-botnet .p-vs { white-space: nowrap; }
.view-botnet .p-desc { grid-area: desc; margin: 0; color: var(--t3); font-size: 12.5px; line-height: 1.4; }
.view-botnet .p-stats { grid-area: stats; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.view-botnet .pst { display: grid; gap: 3px; min-width: 0; padding: 6px 8px; background: var(--s1); }
.view-botnet .prog:hover .pst, .view-botnet .prog:focus-within .pst { background: var(--s2); }
.view-botnet .pst-k { overflow: hidden; color: var(--t3); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.view-botnet .pst b { color: var(--t1); font: 600 15px/1 var(--font-mono); }
.view-botnet .pst.zero b { color: var(--t3); }
.view-botnet .p-cost { grid-area: cost; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.view-botnet .pc { display: inline-flex; align-items: center; gap: 6px; color: var(--t1); font: 600 13px var(--font-mono); }
.view-botnet .pc[hidden] { display: none; }
.view-botnet .pc-time { color: var(--t3); }
.view-botnet .p-home { grid-area: home; display: grid; justify-items: end; gap: 3px; text-align: right; }
.view-botnet .ph-n { color: var(--t3); font: 700 36px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.view-botnet .prog.has .ph-n { color: var(--t1); }
.view-botnet .ph-n.bump { animation: bn-bump .7s var(--ease-snap); }
@keyframes bn-bump { 25% { color: var(--role, var(--hot)); transform: translateY(-3px); } }
.view-botnet .ph-out { color: var(--intel); letter-spacing: .04em; }
.view-botnet .ph-out:empty { display: none; }
.view-botnet .p-order { grid-area: order; display: grid; gap: 6px; }
.view-botnet .ps { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px auto; height: 32px; border: 1px solid var(--line-2); background: var(--s3); }
.view-botnet .ps-b { border: 0; background: transparent; color: var(--t2); font: 600 16px/1 var(--font-mono); transition: color var(--dur-1), background-color var(--dur-1); }
.view-botnet .ps-b:hover { background: var(--s4); color: var(--t1); }
.view-botnet .ps-in {
  min-width: 0;
  height: 100%;
  padding: 0 4px;
  border: 0;
  border-left: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--t1);
  font: 600 15px var(--font-mono);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.view-botnet .ps-in::-webkit-outer-spin-button, .view-botnet .ps-in::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.view-botnet .ps-in:focus { outline: 1px solid var(--hot); outline-offset: -1px; }
.view-botnet .ps-in[aria-invalid="true"] { color: var(--hostile); }
.view-botnet .ps-max { padding: 0 11px; border: 0; border-left: 1px solid var(--line-2); background: transparent; color: var(--hot); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; }
.view-botnet .ps-max:hover { background: var(--a-soft); }
.view-botnet .ps-go { justify-content: center; width: 100%; }
.view-botnet .ps-total { margin: 0; color: var(--t3); letter-spacing: .04em; }
.view-botnet .ps-hint { min-height: 1.2em; margin: 0; color: var(--t3); font: var(--osd); letter-spacing: .04em; }
.view-botnet .ps-hint[data-tone="bad"] { color: color-mix(in srgb, var(--danger) 85%, var(--fg)); }
.view-botnet .ps-hint[data-tone="ok"] { color: var(--t2); }
.view-botnet .p-locked { display: none; }
.view-botnet .prog[data-state="locked"] { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--fg) 3.5%, transparent) 0 2px, transparent 2px 9px); }
.view-botnet .prog[data-state="locked"] .p-order { display: none; }
.view-botnet .prog[data-state="locked"] .p-locked { grid-area: order; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 8px 8px; color: var(--intel); }
.view-botnet .p-locked .ico { width: 16px; height: 16px; }
.view-botnet .p-lock { margin: 0; color: var(--intel); font: 600 12px/1.35 var(--font-mono); }
.view-botnet .p-lock-go { grid-column: 1 / -1; justify-self: start; }
.view-botnet .prog[data-state="locked"] .p-badge { border-style: dashed; color: var(--t3); background: none; }
.view-botnet .prog[data-state="locked"] .p-name { color: var(--t2); }
.view-botnet .prog.deny { animation: hold-nudge .32s; }
.view-botnet .prog.queued { animation: bn-queued .9s var(--ease-out); }
@keyframes bn-queued { 0%, 25% { background: color-mix(in srgb, var(--intel) 10%, var(--s1)); } 100% { background: transparent; } }

/* firewall group (fights with the defense programs) */
.view-botnet .bn-fw { grid-template-columns: 4px 64px minmax(0, 2.5fr) minmax(0, 1fr) auto; grid-template-areas: "led badge id stats go"; --role: var(--intel); }
.view-botnet .bn-fw .p-led { background: var(--intel); }
.view-botnet .fw-id { grid-area: id; display: grid; gap: 5px; min-width: 0; }
.view-botnet .bn-fw .p-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.view-botnet .fw-go { grid-area: go; }

/* ---- black market: exchange ticket ---- */
.view-botnet .bn-market { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--line); background: var(--s1); }
.view-botnet .mk-ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) 44px minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.view-botnet .mk-dir { display: grid; }
.view-botnet .mk-dir button + button { border-left: 0; border-top: 1px solid var(--line-2); }
.view-botnet .mk-give, .view-botnet .mk-get { display: grid; gap: 7px; min-width: 0; }
.view-botnet .mk-field { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-in); background: var(--s3); }
.view-botnet .mk-field:focus-within { border-color: var(--hot); }
.view-botnet .mk-in { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--t1); font: 700 22px/1 var(--font-display); appearance: textfield; -moz-appearance: textfield; }
.view-botnet .mk-in:focus { outline: 0; border: 0; }
.view-botnet .mk-in::-webkit-outer-spin-button, .view-botnet .mk-in::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.view-botnet .mk-in[aria-invalid="true"] { color: var(--hostile); }
.view-botnet .mk-mark { display: inline-flex; }
.view-botnet .mk-quick { display: flex; flex-wrap: wrap; gap: 4px; }
.view-botnet .mk-q { padding: 3px 8px; border: 1px solid var(--line-2); background: transparent; color: var(--t2); font: var(--osd); letter-spacing: .06em; text-transform: uppercase; }
.view-botnet .mk-q:hover { border-color: var(--t2); color: var(--t1); }
.view-botnet .mk-have { margin: 0; }
.view-botnet .mk-arrow { justify-self: center; width: 40px; height: 12px; background: var(--t3); clip-path: polygon(0 45%, 30px 45%, 30px 0, 40px 50%, 30px 100%, 30px 55%, 0 55%); }
.view-botnet .mk-out { display: flex; align-items: center; gap: 10px; margin: 0; }
.view-botnet .mk-got { color: var(--intel); font: 700 42px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.view-botnet .mk-got.cr { color: var(--hot); }
.view-botnet .mk-rate { margin: 0; }
.view-botnet .mk-go { align-self: center; }

/* ---- narrower views (container queries on the view width) / mobile ---- */
@container bn (max-width: 1180px) {
  .view-botnet .prog {
    grid-template-columns: 4px 56px minmax(0, 1fr) auto 220px;
    grid-template-areas:
      "led badge id    home  order"
      "led badge desc  home  order"
      "led badge stats stats order"
      "led badge cost  cost  order";
  }
  .view-botnet .prog .p-badge { align-self: start; }
  .view-botnet .bn-fw { grid-template-columns: 4px 56px minmax(0, 1fr) minmax(0, 200px) auto; }
  .view-botnet .mk-ticket { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .view-botnet .mk-dir { grid-column: 1 / -1; display: inline-flex; justify-self: start; }
  .view-botnet .mk-dir button + button { border-top: 0; border-left: 1px solid var(--line-2); }
  .view-botnet .mk-go { grid-column: 1 / -1; justify-self: stretch; justify-content: center; }
}
@container bn (max-width: 860px) {
  .view-botnet .bn-hero { grid-template-columns: 1fr; }
}
@container bn (max-width: 640px) {
  .view-botnet .bg-big { font-size: 46px; }
  .view-botnet .prog, .view-botnet .bn-fw {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    grid-template-areas:
      "badge id    home"
      "desc  desc  desc"
      "stats stats stats"
      "cost  cost  cost"
      "order order order";
    padding: 14px;
  }
  .view-botnet .bn-fw { grid-template-areas: "badge id id" "stats stats stats" "go go go"; }
  .view-botnet .p-led { display: none; }
  .view-botnet .p-badge { padding: 7px 0 5px; }
  .view-botnet .p-badge .glyph, .view-botnet .p-badge .ico { width: 24px; height: 24px; }
  .view-botnet .p-name { font-size: 18px; }
  .view-botnet .ph-n { font-size: 30px; }
  .view-botnet .pst { padding: 5px 6px; }
  .view-botnet .pst b { font-size: 13px; }
  .view-botnet .mk-ticket { grid-template-columns: 1fr; gap: 12px; }
  .view-botnet .mk-arrow { transform: rotate(90deg); }
  .view-botnet .pb { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .view-botnet .bn-pipe.running .pipe-track::after, .view-botnet .pb, .view-botnet .ph-n.bump, .view-botnet .prog.queued { animation: none; }
}
html.rm .view-botnet .bn-pipe.running .pipe-track::after, html.rm .view-botnet .pb, html.rm .view-botnet .ph-n.bump, html.rm .view-botnet .prog.queued { animation: none; }

/* ============================================================================================================ LAB */
/* An R&D schematic: chips wired by traces (intel when the prerequisite is met, hot on the path being researched). */
.view-lab { container: lab / inline-size; }
.view-lab .lab-k {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  color: var(--t1);
  font: 700 15px/1 var(--font-display);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.view-lab .lab-k .ico { width: 17px; height: 17px; color: var(--t3); }
.view-lab .lab-k .slab-osd { margin-left: auto; }
.view-lab .glyph-wrap { display: inline-grid; place-items: center; }

/* ---- hero: the running research as a ring timer ---- */
.view-lab .lab-hero {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  background: var(--s1);
}
.view-lab .lab-hero.running { border-color: var(--line-hot); }
.view-lab .lh-dial { position: relative; display: grid; place-items: center; width: 132px; height: 132px; }
.view-lab .lh-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.view-lab .lh-track { fill: none; stroke: var(--line-2); stroke-width: 6; }
.view-lab .lh-arc { fill: none; stroke: var(--hot); stroke-width: 6; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s linear; }
.view-lab .lh-ticks { fill: none; stroke: var(--line-3); stroke-width: 3; stroke-dasharray: .35 2.15; }
.view-lab .lh-glyph { display: grid; place-items: center; color: var(--t3); }
.view-lab .lh-glyph .ico { width: 40px; height: 40px; }
.view-lab .lab-hero.running .lh-glyph { color: var(--hot); }
.view-lab .lh-main { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.view-lab .lh-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.view-lab .lh-name { color: var(--t1); font: 700 32px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.view-lab .lab-hero:not(.running) .lh-name { color: var(--t2); font-size: 24px; }
.view-lab .lh-lvl { color: var(--t3); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.view-lab .lh-time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; }
.view-lab .lh-eta { color: var(--hot); font: 700 44px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.view-lab .lh-eta:empty { display: none; }
.view-lab .lab-hero:not(.running) .lh-left { max-width: 44ch; color: var(--t3); font: 13px/1.45 var(--font-ui); letter-spacing: 0; text-transform: none; }
.view-lab .lh-cancel[hidden] { display: none; }
.view-lab .lh-side { display: grid; align-content: start; gap: 8px; padding-left: 20px; border-left: 1px solid var(--line); }
.view-lab .lh-bonus { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; margin: 0; padding: 0; list-style: none; }
.view-lab .lh-bonus li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.view-lab .lb-k { color: var(--t3); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.view-lab .lh-bonus b { color: var(--intel); font: 600 13px var(--font-mono); }
.view-lab .lb-none { color: var(--t3); }
.view-lab .lh-total { margin: 0; }

/* ---- board ---- */
.view-lab .lab-main { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 16px; margin-top: 16px; }
.view-lab .lab-schem { padding: 16px 18px; border: 1px solid var(--line); background: var(--s1); }
.view-lab .lab-board {
  position: relative;
  height: 500px;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--fg) 9%, transparent) 1px, transparent 1.2px);
  background-size: 20px 20px;
  background-position: 10px 10px;
}
.view-lab .lab-traces { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.view-lab .tr, .view-lab .tr-bus { fill: none; stroke: var(--line-3); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.view-lab .tr-bus { stroke: var(--line-2); stroke-dasharray: 2 5; }
.view-lab .tr.on { stroke: var(--intel); }
.view-lab .tr.hot { stroke: var(--hot); stroke-dasharray: 7 5; animation: lab-flow .9s linear infinite; }
@keyframes lab-flow { to { stroke-dashoffset: -12; } }
.view-lab .tr-pad { fill: var(--s1); stroke: var(--line-3); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.view-lab .tr-lvl { position: absolute; z-index: 1; padding: 1px 5px; transform: translate(-50%, -140%); background: var(--s1); color: var(--t3); pointer-events: none; }
.view-lab .tr-lvl.on { color: var(--intel); }
.view-lab .tr-lvl.hot { color: var(--hot); }

.view-lab .lab-legend { position: absolute; right: 0; bottom: 0; display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); background: var(--s1); list-style: none; }
.view-lab .lab-legend li { display: flex; align-items: center; gap: 9px; color: var(--t3); font: var(--osd); letter-spacing: .08em; text-transform: uppercase; }
.view-lab .lab-legend i { width: 22px; height: 2px; background: var(--line-3); }
.view-lab .lab-legend .lg-on i { background: var(--intel); }
.view-lab .lab-legend .lg-hot i { background: repeating-linear-gradient(90deg, var(--hot) 0 5px, transparent 5px 8px); }
.view-lab .lab-legend .lg-ok i { width: 7px; height: 7px; margin: 0 7px; background: var(--hot); }

/* ---- chips ---- */
.view-lab .tchip {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 178px;
  padding: 7px 10px 8px 7px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--line-2);
  background: var(--s2);
  color: var(--t2);
  text-align: left;
  transition: background-color var(--dur-1), border-color var(--dur-1);
}
.view-lab .tchip:hover { border-color: var(--t3); background: var(--s3); }
.view-lab .tchip:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.view-lab .ch-dial { position: relative; display: grid; place-items: center; width: 46px; height: 46px; }
.view-lab .ch-dial .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.view-lab .ring path { fill: none; stroke: var(--line-2); stroke-width: 2.6; }
.view-lab .ring path.on { stroke: var(--intel); }
.view-lab .ch-txt { display: grid; gap: 2px; min-width: 0; }
.view-lab .ch-code { color: var(--t3); font: 600 9px/1 var(--font-mono); letter-spacing: .08em; }
.view-lab .ch-name { overflow: hidden; color: var(--t1); font: 700 14.5px/1.05 var(--font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.view-lab .ch-lvl { color: var(--t3); font: 600 12px/1 var(--font-mono); }
.view-lab .ch-bar { position: absolute; right: -1px; bottom: -1px; left: -1px; display: none; height: 3px; background: var(--line-2); }
.view-lab .ch-bar i { display: block; height: 100%; background: var(--hot); transform: scaleX(0); transform-origin: left center; transition: transform 1s linear; }
.view-lab .tchip.owned { border-color: var(--a2-line); }
.view-lab .tchip.owned .ch-dial { color: var(--intel); }
.view-lab .tchip.owned .ch-lvl { color: var(--intel); }
/* researchable right now: a small hot tab in the corner */
.view-lab .tchip[data-state="ok"]::before { content: ''; position: absolute; top: -1px; right: -1px; width: 7px; height: 7px; background: var(--hot); }
.view-lab .tchip[data-state="locked"] {
  border-style: dashed;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--fg) 3.5%, transparent) 0 2px, transparent 2px 8px), var(--s1);
  color: var(--t3);
}
.view-lab .tchip[data-state="locked"] .ch-name { color: var(--t3); }
.view-lab .tchip[data-state="running"] { border-color: var(--hot); box-shadow: 0 0 0 1px var(--line-hot), 0 0 18px var(--glow); }
.view-lab .tchip[data-state="running"] .ch-dial { color: var(--hot); }
.view-lab .tchip[data-state="running"] .ch-bar { display: block; }
.view-lab .tchip[data-state="maxed"] { border-color: var(--intel); background: var(--intel); color: var(--t-ink); }
.view-lab .tchip[data-state="maxed"] .ch-name, .view-lab .tchip[data-state="maxed"] .ch-lvl, .view-lab .tchip[data-state="maxed"] .ch-code, .view-lab .tchip[data-state="maxed"] .ch-dial { color: var(--t-ink); }
.view-lab .tchip[data-state="maxed"] .ring path, .view-lab .tchip[data-state="maxed"] .ring path.on { stroke: var(--t-ink); }
.view-lab .tchip.leveled { animation: lab-leveled 1.2s var(--ease-out); }
@keyframes lab-leveled { 0%, 30% { background: color-mix(in srgb, var(--intel) 22%, var(--s2)); } 100% { background: var(--s2); } }
.view-lab .tchip.started { animation: lab-started .9s var(--ease-out); }
@keyframes lab-started { 0%, 30% { background: color-mix(in srgb, var(--hot) 18%, var(--s2)); } }

/* ---- side sheet ---- */
.view-lab .lab-sheet { display: grid; align-content: start; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-top: 3px solid var(--intel); background: var(--s1); }
.view-lab .lab-sheet[data-state="running"] { border-top-color: var(--hot); }
.view-lab .lab-sheet.deny { animation: hold-nudge .32s; }
.view-lab .ls-head { display: flex; align-items: center; gap: 12px; }
.view-lab .ls-glyph { display: grid; flex: 0 0 auto; place-items: center; width: 58px; height: 58px; border: 1px solid var(--line-2); color: var(--intel); }
.view-lab .ls-id { display: grid; gap: 3px; min-width: 0; }
.view-lab .ls-name { margin: 0; color: var(--t1); font: 700 24px/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; }
.view-lab .ls-lvl { color: var(--t2); font: 600 13px var(--font-mono); }
.view-lab .ls-desc { margin: 0; color: var(--t2); font-size: 13px; line-height: 1.45; }
.view-lab .ls-diff { display: flex; align-items: flex-end; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.view-lab .ls-cell { display: grid; gap: 5px; }
.view-lab .ls-cell[hidden], .view-lab .ls-arrow[hidden] { display: none; }
.view-lab .ls-now { color: var(--t2); font: 700 26px/1 var(--font-display); }
.view-lab .ls-next { color: var(--t1); font: 700 38px/1 var(--font-display); }
.view-lab .ls-arrow { width: 22px; height: 10px; margin-bottom: 10px; background: var(--t3); clip-path: polygon(0 40%, 14px 40%, 14px 0, 22px 50%, 14px 100%, 14px 60%, 0 60%); }
.view-lab .ls-eff { margin: 0; color: var(--intel); font: 12px/1.45 var(--font-mono); }
.view-lab .ls-sub { margin: 4px 0 0; color: var(--t3); font: var(--osd); letter-spacing: .1em; text-transform: uppercase; }
.view-lab .ls-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.view-lab .ls-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 9px; background: var(--s2); }
.view-lab .ls-list li.ok .osd { color: var(--intel); }
.view-lab .ls-list li.miss .osd { color: color-mix(in srgb, var(--danger) 85%, var(--fg)); }
.view-lab .ls-list li.part .osd { color: var(--t2); }
.view-lab .ls-list li.none { min-height: 0; padding: 0; background: none; color: var(--t3); font-size: 12.5px; }
.view-lab .ls-link { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 0; border: 0; background: none; color: var(--t1); font: 600 13px var(--font-ui); text-align: left; }
.view-lab .ls-link:hover { color: var(--intel); }
.view-lab .ls-link .glyph-wrap { color: var(--t3); }
.view-lab .ls-list li.ok .ls-link .glyph-wrap { color: var(--intel); }
.view-lab .ls-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.view-lab .ls-cost[hidden] { display: none; }
.view-lab .ls-cost b { color: var(--t1); font: 600 13px var(--font-mono); }
.view-lab .ls-cost .pc { display: inline-flex; align-items: center; gap: 6px; }
.view-lab .ls-cost .pc.short b { color: color-mix(in srgb, var(--danger) 85%, var(--fg)); }
.view-lab .ls-go { justify-content: center; width: 100%; }
.view-lab .ls-hint { min-height: 1.2em; margin: 0; color: var(--t3); font: var(--osd); letter-spacing: .04em; }
.view-lab .ls-hint[data-tone="bad"] { color: color-mix(in srgb, var(--danger) 85%, var(--fg)); }
.view-lab .ls-hint[data-tone="intel"] { color: var(--intel); }
.view-lab .ls-hint[data-tone="hot"] { color: var(--hot); }

/* ---- narrower views / mobile ---- */
@container lab (max-width: 980px) {
  .view-lab .lab-hero { grid-template-columns: 112px minmax(0, 1fr); }
  .view-lab .lh-dial { width: 112px; height: 112px; }
  .view-lab .lh-side { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .view-lab .lh-bonus { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .view-lab .lab-main { grid-template-columns: 1fr; }
}
@container lab (max-width: 600px) {
  .view-lab .lab-hero { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .view-lab .lh-dial { width: 84px; height: 84px; }
  .view-lab .lh-glyph .glyph { width: 30px; height: 30px; }
  .view-lab .lh-name { font-size: 24px; }
  .view-lab .lh-eta { font-size: 32px; }
  .view-lab .lab-board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: auto; background: none; }
  .view-lab .lab-traces, .view-lab .tr-lvl, .view-lab .lab-legend { display: none; }
  .view-lab .tchip { position: relative; left: auto !important; top: auto !important; width: auto; transform: none; }
  .view-lab .ch-name { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .view-lab .tr.hot, .view-lab .tchip.leveled, .view-lab .tchip.started { animation: none; }
  .view-lab .lh-arc, .view-lab .ch-bar i { transition: none; }
}
html.rm .view-lab .tr.hot, html.rm .view-lab .tchip.leveled, html.rm .view-lab .tchip.started { animation: none; }
html.rm .view-lab .lh-arc, html.rm .view-lab .ch-bar i { transition: none; }