/* Packet Alley. The palette follows vagrancy/Sam_Comm_final.png — warm
   paper, plum ink — and the status colours are the Okabe–Ito set, which
   stay distinct for colour-blind readers. No meaning is carried by colour
   alone: every packet has a letter, and every map mark a symbol. */
:root {
  --ink: #3b2340;
  --paper: #fbefd0;
  --cream: #fff6e0;
  --panel: #ffffff;
  --sky: #efc46a;
  --skyhi: #f5da92;
  --line: #d8c3a4;
  --muted: #7a6a74;

  /* Okabe–Ito */
  --oi-orange: #e69f00;
  --oi-sky: #56b4e9;
  --oi-green: #009e73;
  --oi-yellow: #f0e442;
  --oi-blue: #0072b2;
  --oi-verm: #d55e00;
  --oi-purple: #cc79a7;

  --good: var(--oi-green);
  --bad: var(--oi-verm);
  --warn: var(--oi-orange);

  /* Packet types. Each differs four ways — shape, fill pattern, letter and
     colour — so none rests on colour alone (see the glyphs in index.html).
     Colours are the Okabe–Ito set; data and seg share the "payload" blue on
     purpose and are told apart by shape (circle vs hexagon), pattern and
     letter. */
  --p-data: var(--oi-blue);
  --p-ping: var(--oi-sky);
  --p-reply: var(--oi-green);
  --p-broadcast: var(--oi-orange);
  --p-arp: var(--oi-purple);
  --p-syn: var(--oi-verm);
  --p-synack: var(--oi-yellow);
  --p-ack: var(--muted);
  --p-seg: var(--oi-blue);
  --p-rst: #2a1830;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
#glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(ellipse at 20% -10%, var(--skyhi) 0, transparent 55%),
    var(--paper);
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
h1, h2, h3 { line-height: 1.2; }
button { font: inherit; cursor: pointer; }
ul, ol { margin: 0; padding-left: 1.2em; }

#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; border-bottom: 3px solid var(--ink);
  background: var(--cream); position: sticky; top: 0; z-index: 5;
}
#brand { font-size: 1.3rem; margin: 0; letter-spacing: 0.02em; }
.spacer { flex: 1; }
.star-count { color: var(--muted); font-size: 0.95rem; }

.screen { max-width: 1180px; margin: 0 auto; padding: 18px; }
.intro { max-width: 60ch; color: var(--muted); }

button.ghost {
  background: transparent; border: 2px solid var(--ink);
  border-radius: 10px; color: var(--ink); padding: 6px 12px;
}
button.ghost:hover, button.ghost:focus-visible { background: var(--paper); }
button.ghost.danger { border-color: var(--bad); color: var(--bad); }
button.primary {
  background: var(--oi-green); border: 3px solid var(--ink);
  border-radius: 12px; color: #fff; padding: 12px 22px; font-weight: 700;
  font-size: 1.05rem;
}
button.primary:hover, button.primary:focus-visible { filter: brightness(1.07); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- menu ---- */
.chapter { margin: 22px 0; }
.chapter h2 { margin: 0 0 2px; }
.chapter .layer { color: var(--oi-blue); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.chapter .blurb { color: var(--muted); max-width: 70ch; margin: 6px 0 12px; }
.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.level-card {
  text-align: left; background: var(--panel); border: 3px solid var(--ink);
  border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 4px 4px 0 var(--line);
}
.level-card:hover:not(:disabled), .level-card:focus-visible { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--line); }
.level-card .num { color: var(--muted); font-size: 0.8rem; }
.level-card .name { font-weight: 700; font-size: 1.1rem; }
.level-card.locked { opacity: 0.55; background: var(--paper); }
.level-card .stars { font-size: 1.1rem; letter-spacing: 2px; color: var(--warn); }
.level-card .stars .empty { color: var(--line); }
.lock-note { color: var(--muted); font-size: 0.85rem; }
.menu-foot { margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.switch { display: inline-flex; align-items: center; gap: 8px; }

/* ---- level ---- */
.eyebrow { color: var(--oi-blue); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8rem; font-weight: 700; margin: 0; }
.level-grid { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.brief { background: var(--panel); border: 3px solid var(--ink); border-radius: 14px; padding: 16px; box-shadow: 4px 4px 0 var(--line); }
.brief h2 { margin: 2px 0 8px; }
.brief h3 { margin: 16px 0 4px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.brief p, .brief li { font-size: 0.95rem; }
.goals li { margin: 3px 0; }
.goals li::marker { content: ""; }
.goals li { list-style: none; margin-left: -1em; padding-left: 1.6em; position: relative; }
.goals li::before { content: "○"; position: absolute; left: 0; color: var(--muted); }
.goals li.met::before { content: "✓"; color: var(--good); font-weight: 700; }
.goals li.unmet::before { content: "✕"; color: var(--bad); font-weight: 700; }
.bonus { font-size: 0.9rem; color: var(--warn); font-weight: 600; }
.bonus.met { color: var(--good); }

.edits-head { margin-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.edits-head h3 { margin: 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
button.ghost.small { padding: 3px 9px; font-size: 0.8rem; border-width: 2px; }
.edits-hint { margin: 4px 0 0; font-size: 0.82rem; color: var(--muted); }
.edits { margin-top: 10px; display: flex; flex-direction: column; gap: 14px; }
.edit { border: 2px dashed var(--line); border-radius: 10px; padding: 10px; }
.edit .prompt { font-weight: 700; font-size: 0.92rem; margin: 0 0 8px; }
.opts { display: flex; flex-direction: column; gap: 6px; }
.opts-dev { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.opt {
  text-align: left; border: 2px solid var(--line); background: var(--paper);
  border-radius: 8px; padding: 8px 10px; font-size: 0.9rem;
}
.opt.chosen { border-color: var(--ink); background: var(--cream); box-shadow: inset 0 0 0 2px var(--oi-blue); font-weight: 600; }
.opt:hover, .opt:focus-visible { border-color: var(--ink); }
.opt-dev { display: flex; align-items: center; gap: 8px; }
.opt-icon { width: 34px; height: 34px; flex: 0 0 auto; object-fit: contain; }
.opt-dev-text { display: flex; flex-direction: column; line-height: 1.15; }
.opt-dev-name { font-weight: 700; }
.opt-dev-sub { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* The action area (prediction + commit) sits on the right beside the map, so
   the commit button is always in view — no scrolling down a long brief. */
.action { margin-top: 12px; }
.action .predict { margin-top: 0; }
.run-row { margin-top: 12px; text-align: center; }

.stage { min-width: 0; }
.map-hint { margin: 0 0 8px; padding: 8px 12px; background: var(--oi-blue); color: #fff; border-radius: 10px; font-size: 0.9rem; font-weight: 600; }
.map-wrap { position: relative; border: 3px solid var(--ink); border-radius: 14px; overflow: auto; background: var(--cream); aspect-ratio: 5 / 3; --zoom: 1; cursor: grab; touch-action: none; }
.map-wrap.grabbing { cursor: grabbing; }
.map-inner { position: absolute; top: 0; left: 0; width: calc(100% * var(--zoom)); height: calc(100% * var(--zoom)); }
.backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0.6; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Map zoom controls (accessibility). */
.zoom-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.zoom-h { font-weight: 600; }
.zoom-range { flex: 1 1 160px; max-width: 260px; accent-color: var(--ink); }
.zoom-btn { min-width: 2.6em; font-size: 1.1rem; line-height: 1; }

.node-hit { cursor: pointer; }
.node-label { font-size: 22px; font-weight: 700; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--cream); stroke-width: 5px; }
.node-addr { font-size: 18px; fill: var(--muted); text-anchor: middle; paint-order: stroke; stroke: var(--cream); stroke-width: 5px; }
/* A machine the student can point at to answer a destination edit: a blue
   glow and a label say "pick me". */
.node-hit.candidate { cursor: pointer; }
.node-hit.candidate image { filter: drop-shadow(0 0 7px var(--oi-blue)) drop-shadow(0 0 4px var(--oi-blue)); }
/* A device still to be inspected for evidence before a prediction: an orange
   glow, distinct from the blue "point at me" of a destination pick. */
.node-hit.evidence image { filter: drop-shadow(0 0 7px var(--oi-orange)) drop-shadow(0 0 4px var(--oi-orange)); }

/* A simplified-model caveat badge (Phase 2). */
.note-badge { margin: 6px 0 0; padding: 6px 10px; border-left: 4px solid var(--oi-orange); background: var(--cream); font-size: 0.82rem; color: var(--muted); border-radius: 4px; }
/* A verbatim textbook passage with attribution (Phase 2, CC BY-SA 3.0). */
.textbook { margin-top: 12px; padding: 10px; border-left: 4px solid var(--oi-blue); background: var(--cream); border-radius: 4px; }
.textbook h3 { margin: 0 0 6px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.textbook p { margin: 0; font-size: 0.88rem; }
.textbook-src { margin-top: 6px !important; font-size: 0.74rem; color: var(--muted); font-style: italic; }

/* The prediction step (Phase 2). */
.predict { margin-top: 16px; border: 2px solid var(--oi-blue); border-radius: 10px; padding: 10px; }
.predict h3 { margin: 0; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.predict .prompt { font-weight: 700; font-size: 0.92rem; margin: 8px 0; }
.run-row button[disabled] { opacity: 0.5; cursor: not-allowed; }
.commit-hint { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* The edit badge (a ✎) that marks an editable spot, and the chooser popover. */
.edit-badge { cursor: pointer; }
.edit-badge:focus-visible { outline: none; }
.edit-glyph { font-size: 22px; font-weight: 800; fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.chooser {
  position: absolute; z-index: 10; transform: translate(-50%, 14px);
  background: var(--panel); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 6px 6px 0 var(--line); padding: 12px; width: 260px; max-width: 86vw;
  max-height: 70%; overflow: auto;
}
.chooser .edit { border: none; padding: 0; margin-bottom: 10px; }
.chooser .edit:last-child { margin-bottom: 0; }
.chooser-close { position: absolute; top: 6px; right: 6px; padding: 2px 8px; }
.cable { fill: none; stroke: var(--ink); stroke-width: 6px; stroke-linecap: round; }
.cable.down { stroke: var(--bad); stroke-dasharray: 2 14; }
.cable.blocked { stroke: var(--muted); stroke-dasharray: 10 10; opacity: 0.6; }
.cable.lossy { stroke-dasharray: 16 8; }

/* Packets are glyphs defined once in index.html (shape + pattern + colour +
   letter) and placed on the map with <use>. The letter is dark with a white
   halo, so it stays readable over any fill, light or dark. */
.pkt { cursor: pointer; }
.pkt-letter {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-weight: 800; font-size: 21px;
  text-anchor: middle; dominant-baseline: central;
  fill: var(--ink); stroke: #fff; stroke-width: 3.5px;
  paint-order: stroke; pointer-events: none;
}
.pkt-letter--sm { font-size: 15px; letter-spacing: -0.5px; }
.pkt-letter--light { fill: #fff; stroke: #2a1830; stroke-width: 3.5px; }

.fx text { font-size: 34px; font-weight: 800; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.fx.deliver text { fill: var(--good); }
.fx.drop text { fill: var(--bad); }
.fx.collision text { fill: var(--warn); }
.fx.learn text { fill: var(--oi-blue); }
.fx.ignore text { fill: var(--muted); }

.hud { margin-top: 6px; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; text-align: center; }
.controls { margin-top: 6px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ctl { border: 2px solid var(--ink); background: var(--cream); border-radius: 10px; padding: 8px 14px; font-weight: 600; }
.ctl:hover, .ctl:focus-visible { background: var(--paper); }

.legend-row { margin-top: 12px; }
.legend-row h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); margin: 0 0 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.legend .item { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; }
.chip-svg { width: 30px; height: 30px; flex: 0 0 auto; overflow: visible; vertical-align: middle; }
.legend .chip-svg { margin: 0; }

/* The step-by-step log: a panel with a search box, filter chips, a full-screen
   toggle and a hide/show toggle. Rows read like game entries, not plain text. */
.log-panel { margin-top: 14px; display: flex; flex-direction: column; min-height: 0; border: 2px solid var(--ink); border-radius: 12px; background: var(--panel); overflow: hidden; }
.log-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; background: var(--cream); border-bottom: 2px solid var(--line); }
.log-head h3 { margin: 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.log-head-btns { display: flex; gap: 6px; }
.log-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-bottom: 2px solid var(--line); }
.log-search { width: 100%; border: 2px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 0.9rem; background: var(--paper); color: var(--ink); }
.log-search:focus-visible { border-color: var(--ink); outline: none; }
.log-filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.log-filter-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 700; flex: 0 0 auto; }
.log-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.log-chip { display: inline-flex; align-items: center; gap: 5px; border: 2px solid var(--line); background: var(--paper); border-radius: 999px; padding: 3px 11px; font-size: 0.78rem; color: var(--ink); }
.log-chip .chip-sym { font-weight: 800; }
.log-chip[aria-pressed="false"] { opacity: 0.5; }
.log-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--cream); font-weight: 700; }
.log-chip:hover, .log-chip:focus-visible { border-color: var(--ink); }

.log-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.log { max-height: none; list-style: none; padding: 0; margin: 0; }
.log li { display: grid; grid-template-columns: auto auto auto 1fr; gap: 8px; align-items: baseline; margin: 0; padding: 5px 12px; border-top: 1px solid var(--line); font-size: 0.86rem; }
.log li:first-child { border-top: none; }
.log .l-t { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.76rem; }
.log .l-tag { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; font-size: 0.7rem; font-weight: 700; white-space: nowrap; }
.log .l-tag .chip-sym { font-weight: 800; }
.log .l-machine { font-weight: 700; }
.log .l-text { color: var(--ink); }
.log .l-tag.deliver { color: var(--good); border-color: var(--good); }
.log .l-tag.drop, .log .l-tag.collision { color: var(--bad); border-color: var(--bad); }
.log .l-tag.forward, .log .l-tag.learn { color: var(--oi-blue); border-color: var(--oi-blue); }
.log .l-tag.retry { color: var(--warn); border-color: var(--warn); }
.log .l-tag.ignore, .log .l-tag.other { color: var(--muted); }
.log-note { margin: 0; padding: 14px 12px; color: var(--muted); font-size: 0.85rem; }

/* Full screen: the log fills the window over a dim backdrop; collapse hides
   everything but the header bar. */
.log-panel.full { position: fixed; inset: 3vh 3vw; z-index: 30; max-height: none; box-shadow: 0 0 0 100vmax rgba(40,25,45,0.55); }
.log-panel.collapsed { flex: 0 0 auto; }
.log-panel.collapsed .log-tools, .log-panel.collapsed .log-body { display: none; }

/* ---- super build levels ---- */
.super-card {
  text-align: left; background: linear-gradient(135deg, var(--cream), var(--skyhi));
  border: 3px solid var(--ink); border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: 4px 4px 0 var(--oi-verm);
  grid-column: 1 / -1;
}
.super-card:hover:not(:disabled), .super-card:focus-visible { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--oi-verm); }
.super-card.locked { opacity: 0.6; filter: grayscale(0.4); }
.super-card .super-tag { color: var(--oi-verm); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.super-card .name { font-weight: 800; font-size: 1.15rem; }
.super-card .stars { font-size: 1.1rem; letter-spacing: 2px; color: var(--warn); }
.super-card .stars .empty { color: var(--line); }
.stars .gold, .stars-big .gold { color: #c9a227; text-shadow: 0 0 6px rgba(201,162,39,0.6); }

.build-panel { margin-top: 10px; }
.build-panel h3 { margin: 14px 0 6px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.palette { display: flex; flex-direction: column; gap: 8px; }
.palette-item { display: flex; align-items: center; gap: 10px; text-align: left; border: 2px solid var(--line); background: var(--paper); border-radius: 10px; padding: 8px 10px; }
.palette-item:hover, .palette-item:focus-visible { border-color: var(--ink); }
.palette-item.armed { border-color: var(--oi-verm); box-shadow: inset 0 0 0 2px var(--oi-verm); background: var(--cream); }
.palette-text { display: flex; flex-direction: column; line-height: 1.2; }
.palette-name { font-weight: 700; }
.palette-sub { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.build-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.build-tool { border: 2px solid var(--ink); background: var(--cream); border-radius: 10px; padding: 7px 12px; font-weight: 600; font-size: 0.85rem; }
.build-tool.on { background: var(--oi-blue); color: #fff; }
.build-tool.ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.build-cost { border: 2px solid var(--line); border-radius: 10px; padding: 8px 12px; background: var(--panel); }
.cost-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 2px 0; font-variant-numeric: tabular-nums; }
.cost-row.total { border-top: 2px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 800; font-size: 1.05rem; }
.cost-tier { margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; }
.cost-tier.t0 { color: var(--muted); }
.cost-tier.t1 { color: var(--warn); }
.cost-tier.t2 { color: var(--oi-blue); }
.cost-tier.t3 { color: var(--good); }
.build-steps { margin: 8px 0 0; padding-left: 1.3em; color: var(--muted); font-size: 0.85rem; }
.build-steps li { margin: 4px 0; }

.obstacle { fill: var(--line); opacity: 0.5; stroke: var(--muted); stroke-width: 2px; stroke-dasharray: 8 6; }
.obstacle.water { fill: var(--oi-sky); opacity: 0.4; stroke: var(--oi-blue); stroke-width: 1.5px; stroke-dasharray: none; }
.bridge { fill: #b07d46; stroke: #6b4a26; stroke-width: 2px; }
.route-block { font-family: var(--mono, monospace); font-weight: 600; }
.route-name { display: block; color: var(--muted); font-size: 0.82em; }
.obstacle-label { fill: var(--muted); font-size: 22px; font-weight: 700; text-anchor: middle; dominant-baseline: central; text-transform: uppercase; letter-spacing: 0.06em; }
.build-cable { fill: none; stroke: var(--ink); stroke-width: 6px; stroke-linecap: round; }
.build-cable-hit { fill: none; stroke: transparent; stroke-width: 22px; cursor: pointer; }
.cable-label { fill: var(--oi-blue); font-size: 20px; font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: var(--cream); stroke-width: 5px; pointer-events: none; }
.build-machine.wiring image { filter: drop-shadow(0 0 8px var(--oi-verm)) drop-shadow(0 0 4px var(--oi-verm)); }
.build-machine.needs-addr image { filter: drop-shadow(0 0 7px var(--warn)) drop-shadow(0 0 4px var(--warn)); }
.node-addr.warn { fill: var(--bad); }

.chooser-title { margin: 0 0 8px; font-size: 1.05rem; }
.chooser-field { margin-bottom: 10px; }
.chooser-label { margin: 0 0 4px; font-weight: 700; font-size: 0.85rem; }
.chooser-hint { margin: 0 0 6px; font-size: 0.78rem; color: var(--muted); }
.build-select { width: 100%; font: inherit; font-size: 0.9rem; padding: 5px 8px; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); }
.switch-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.switch-table td { padding: 4px 4px; border-top: 1px solid var(--line); vertical-align: middle; }
.switch-table td.st-dst { font-weight: 700; white-space: nowrap; padding-right: 8px; }
.chooser-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.chooser-actions .danger { border-color: var(--bad); color: var(--bad); }
.result-bill { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gold-note { border-left: 4px solid #c9a227; }

/* ---- overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(40,25,45,0.55); overflow-y: auto; padding: 4vh 18px; z-index: 20; }
.sheet { background: var(--panel); border: 3px solid var(--ink); border-radius: 16px; max-width: 560px; width: 100%; margin: 0 auto; padding: 24px; position: relative; box-shadow: 8px 8px 0 var(--ink); }
.sheet-close { position: absolute; top: 12px; right: 12px; padding: 4px 10px; }
.sheet h2 { margin: 0 0 10px; }
.sheet h3 { margin: 16px 0 6px; }
.result-goals li.met { color: var(--good); }
.result-goals li.unmet { color: var(--bad); }
.stars-big { font-size: 2rem; letter-spacing: 6px; color: var(--warn); margin: 6px 0; }
.stars-big .empty { color: var(--line); }
.diagnosis { background: var(--paper); border-left: 4px solid var(--warn); padding: 8px 12px; border-radius: 6px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.quiz-opt { text-align: left; border: 2px solid var(--line); background: var(--paper); border-radius: 8px; padding: 10px; }
.quiz-opt:hover, .quiz-opt:focus-visible { border-color: var(--ink); }
.quiz-opt.right { border-color: var(--good); background: #e7f6ef; }
.quiz-opt.wrong { border-color: var(--bad); background: #fbe9e0; }
.sheet-actions { margin-top: 18px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* device inspector: facts as a key/value grid, then titled tables (a switch's
   MAC table, a router's interfaces and routes) drawn in the game's style. */
.node-facts { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 0.92rem; }
.node-facts td { padding: 5px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.node-facts tr:first-child td { border-top: none; }
.node-facts td.k { color: var(--muted); width: 45%; }
.node-facts td.v { font-variant-numeric: tabular-nums; }
.node-table { border: 2px solid var(--line); border-radius: 10px; overflow: hidden; margin: 10px 0; }
.node-table .nt-title { background: var(--cream); padding: 6px 10px; font-weight: 700; border-bottom: 2px solid var(--line); font-size: 0.9rem; }
.node-table table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.node-table th { text-align: left; color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.node-table td { padding: 6px 10px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.node-table tbody tr:first-child td { border-top: none; }
.node-table .nt-empty { padding: 8px 10px; color: var(--muted); font-size: 0.85rem; }

/* packet inspector */
.layer { border: 2px solid var(--line); border-radius: 10px; margin: 8px 0; overflow: hidden; }
.layer .lname { background: var(--cream); padding: 6px 10px; font-weight: 700; border-bottom: 2px solid var(--line); }
.layer table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.layer td { padding: 4px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.layer td.k { color: var(--muted); width: 42%; }
.layer td.v { font-variant-numeric: tabular-nums; }

.message { text-align: center; color: var(--bad); font-weight: 600; min-height: 1.4em; }

/* On a roomy screen the level is a fixed-height app shell: the whole level
   fits the viewport, and only the brief and the log scroll (each within its
   own panel). The map and the log share the stage's free height, so the
   commit button and the controls never fall below the fold. */
@media (min-width: 821px) {
  #level.screen { max-width: min(1600px, 97vw); height: calc(100vh - 68px); display: flex; }
  #level .level-grid { width: 100%; height: 100%; grid-template-columns: minmax(360px, 440px) 1fr; align-items: stretch; }
  #brief { overflow-y: auto; max-height: 100%; }
  #level .stage { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  /* Keep the map frame at the map's own 5:3 so the backdrop and the SVG scale
     the same way (nothing cropped or letterboxed out of line); the frame grows
     with the stage's free height and centres in the column. */
  #level .map-wrap { aspect-ratio: 5 / 3; flex: 4 1 0; min-height: 170px; align-self: center; max-width: 100%; }
  #level #log-panel { flex: 2 1 0; min-height: 120px; }
}

@media (max-width: 820px) {
  .level-grid { grid-template-columns: 1fr; }
  #brand { font-size: 1.1rem; }
  .log-body { max-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
  .level-card { transition: none; }
}