/* ============================================================================
   OPERATION: BOTNET — shared lab stylesheet
   ----------------------------------------------------------------------------
   One source of truth for the look of every walkthrough / guide page.
   Link it and use the classes below; do NOT re-declare colors inline.

     <link rel="stylesheet" href="lab.css">

   Design language: dark "terminal" aesthetic, neon-green accent, monospace
   for anything the student types. Extracted from lab.html / dashboard.html /
   index.html so all pages read as one system.

   Click-to-COPY note: command blocks (code.cmd) are styled for copy-to-
   clipboard (the terminal is now a separate native window, not embedded).
   Minimal JS to wire it up is at the bottom of this file in a comment.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg:        #0b0f0c;   /* page background */
  --card:      #0e1410;   /* raised panels / chapters */
  --card-2:    #0c120e;   /* nested / header strips */
  --code:      #0f1a12;   /* command block background */
  --black:     #000000;   /* terminals, data panels */

  /* text */
  --ink:       #cfe8d4;   /* body text */
  --ink-bright:#e8ffe8;   /* emphasized / command text */
  --dim:       #7fa789;   /* muted labels, hints */

  /* accent + status */
  --accent:    #39ff14;   /* neon green — the brand */
  --accent-ink:#0b0f0c;   /* text on an accent fill */
  --hl:        #175c0f;   /* inline highlight background */
  --bad:       #ff5a5a;   /* danger / sold-out / reset */
  --warn:      #ffce4a;   /* caution */
  --blue:      #2a6cff;   /* secondary action (human/you) */

  /* lines */
  --line:      #1d2a20;   /* default hairline border */
  --line-live: #244e22;   /* "active/live" border tint */
  --line-btn:  #28402d;   /* ghost-button border */

  /* type */
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm */
  --radius:    8px;
  --radius-sm: 4px;
}

/* ----------------------------------------------------------------------------
   2. BASE / RESET
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

::selection { background: var(--hl); color: #fff; }

/* neon-green scrollbars — bold + high-contrast track so they're easy to see */
* { scrollbar-width: auto; scrollbar-color: var(--accent) var(--code); }
*::-webkit-scrollbar { width: 14px; height: 14px; }
*::-webkit-scrollbar-track { background: var(--code); border-radius: 7px; }
*::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 7px;
  min-height: 40px;
  border: 2px solid var(--code);
  box-shadow: 0 0 6px var(--accent);
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-bright); box-shadow: 0 0 8px var(--ink-bright); }

/* ----------------------------------------------------------------------------
   3. PAGE LAYOUT
   .guide  — canonical single-column walkthrough (terminal-only model)
   .wrap / .story / .console — legacy two-pane split (kept for old pages)
   ------------------------------------------------------------------------- */
.guide {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 26px 80px;
}

/* student-facing pages (guide + store) sit against the left edge, not centered */
.guide.student {
  margin-left: 0;
  margin-right: auto;
}

/* legacy split layout */
.wrap { display: flex; height: 100vh; }
.story {
  flex: 0 0 42%; min-width: 240px;
  overflow-y: auto;
  padding: 28px 30px 60px;
}
.console {
  flex: 1 1 0; min-width: 300px;
  display: flex; flex-direction: column;
  background: var(--black);
}
.console .bar {
  padding: 8px 14px;
  font-size: 12px; color: var(--dim);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.console .bar b { color: var(--accent); }

/* ----------------------------------------------------------------------------
   4. MASTHEAD / TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, .h1 {
  font-size: 22px;
  color: var(--accent);
  letter-spacing: .5px;
  margin: 0 0 4px;
}
.sub {
  color: var(--dim);
  font-size: 13px;
  margin-bottom: 20px;
}
.sub b { color: var(--ink-bright); }

/* ----------------------------------------------------------------------------
   5. CALLOUTS — tip (info) / warn (caution)
   ------------------------------------------------------------------------- */
.tip {
  font-size: 12.5px;
  color: #bfe9c6;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 20px;
}

.warn {
  font-size: 12.5px;
  color: var(--warn);
  background: #2a200a;
  border: 1px solid #5a4410;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  margin-top: 10px;
  line-height: 1.5;
}
.warn code {
  background: var(--black); color: #fff;
  padding: 0 4px; border-radius: 3px;
  font-family: var(--mono);
}

.hint {
  font-size: 12px;
  color: var(--dim);
  margin-top: 6px;
}

/* ----------------------------------------------------------------------------
   6. CHAPTER CARD  — the core walkthrough unit
   ------------------------------------------------------------------------- */
.chapter {
  margin: 0 0 22px;
  padding: 15px 17px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.chapter h2 {
  font-size: 15px;
  margin: 0 0 8px;
  color: var(--accent);
}
.chapter .n {           /* the "00" step number */
  color: var(--dim);
  font-weight: 700;
  margin-right: 6px;
}
.chapter p {
  font-size: 14px;
  line-height: 1.55;
  margin: 8px 0;
}
.chapter.reset { border-style: dashed; }   /* the "reset / clean slate" note */

/* ----------------------------------------------------------------------------
   6b. STAGE HEADER — big divider between the lab's sections (Attack/Detect/Defend)
   ------------------------------------------------------------------------- */
.stagehead {
  margin: 46px 0 22px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: 10px;
}
.stagehead .k {
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--dim);
}
.stagehead h2 { margin: 4px 0 6px; font-size: 22px; color: var(--ink-bright); }
.stagehead p { margin: 0; color: var(--dim); font-size: 14px; }
.stagehead.attack { border-left-color: var(--bad); } .stagehead.attack .k { color: var(--bad); }
.stagehead.detect { border-left-color: var(--warn); } .stagehead.detect .k { color: var(--warn); }
.stagehead.defend { border-left-color: var(--accent); } .stagehead.defend .k { color: var(--accent); }

/* pill label after a heading, e.g. "recon", "mission · loot" */
.tag {
  display: inline-block;
  font-size: 11px;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: 3px;
  padding: 1px 6px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

/* ----------------------------------------------------------------------------
   7. COMMAND BLOCK  — click to copy to clipboard
   Markup:  <code class="cmd" data-cmd="sessions">sessions</code>
   Optional inline highlight:  <b class="hl">c2</b>
   ------------------------------------------------------------------------- */
code.cmd {
  display: block;
  position: relative;
  margin: 10px 0 2px;
  padding: 10px 60px 10px 12px;      /* right pad leaves room for the label */
  background: var(--code);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink-bright);
  font-family: var(--mono);
  font-size: 13px;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  transition: background .12s;
}
code.cmd:hover { background: #13261a; }

/* affordance label (bottom-right) — must NOT be part of the copyable text.
   Firefox folds ::after content into text selection, so exclude it explicitly. */
code.cmd::after {
  content: "⧉ copy";
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: .3px;
  color: var(--dim);
  font-family: var(--sans);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  pointer-events: none;
}
code.cmd:hover::after { color: var(--accent); }

/* toggled by JS after a copy attempt (see snippet at bottom) */
code.cmd.copied { background: #10251a; }
code.cmd.copied::after { content: "✓ copied"; color: var(--accent); }
code.cmd.copyfail { background: #2a1010; }
code.cmd.copyfail::after { content: "✗ press Ctrl+Shift+C"; color: var(--bad); }

/* ssh mission commands run in a PLAIN terminal, NEVER the Sliver console — flag every one
   automatically (attribute selector, so new ssh commands get the badge for free). */
code.cmd[data-cmd^="ssh "] { border-left-color: var(--bad); }
code.cmd[data-cmd^="ssh "]::before {
  content: "⌨ PLAIN terminal — not the Sliver console";
  display: block;
  font: 700 14px/1.4 var(--sans);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--bad);
  margin: 0 0 7px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* highlighted token inside a command (e.g. the fragile "c2" host) */
code.cmd b.hl {
  color: #fff;
  background: var(--hl);
  padding: 0 3px;
  border-radius: 3px;
}

/* ----------------------------------------------------------------------------
   7b. TERMINAL OUTPUT SAMPLE  — "here's what you'll see" preview
   Markup:  <pre class="termout"> ...ascii... </pre>
   ------------------------------------------------------------------------- */
.termout {
  margin: 10px 0 2px;
  padding: 10px 12px;
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: pre;
  overflow-x: auto;
}
.termout .a { color: var(--accent); }   /* accent line (totals, "you") */
.termout .d { color: var(--dim); }       /* dim line (labels, meta) */
.termout .w { color: var(--warn); }      /* a scalper bot / caution */

/* ----------------------------------------------------------------------------
   7c. INLINE CODE + LISTS  (prose bits inside chapters)
   ------------------------------------------------------------------------- */
/* inline code — distinct from the clickable code.cmd block (which overrides) */
code { font-family: var(--mono); color: var(--ink-bright); font-size: .92em; }

.chapter ul { margin: 8px 0; padding-left: 20px; }
.chapter li { font-size: 14px; line-height: 1.5; margin: 5px 0; }
.chapter li b { color: var(--ink-bright); }

/* ----------------------------------------------------------------------------
   8. BUTTONS  — .btn base with variants
   .btn            primary (accent fill)
   .btn.blue       secondary human action
   .btn.ghost      low-emphasis outline
   .btn.danger     destructive outline
   (legacy alias: .firebtn == .btn)
   ------------------------------------------------------------------------- */
.btn, .firebtn {
  display: block;
  width: 100%;
  margin: 6px 0 12px;
  padding: 11px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  cursor: pointer;
  color: var(--accent-ink);
  background: var(--accent);
  border: 0;
  border-radius: 6px;
  transition: filter .12s, border-color .12s, color .12s;
}
.btn:hover, .firebtn:hover { filter: brightness(1.12); }
.btn:disabled, .firebtn:disabled { opacity: .5; cursor: default; filter: none; }

.btn.blue { background: var(--blue); color: #fff; }

.btn.ghost {
  background: #16241a;
  color: var(--ink);
  border: 1px solid var(--line-btn);
}
.btn.ghost:hover { filter: none; border-color: var(--accent); color: var(--accent); }

.btn.danger {
  background: #16241a;
  color: var(--ink);
  border: 1px solid var(--line-btn);
}
.btn.danger:hover { filter: none; border-color: var(--bad); color: var(--bad); }

/* small inline buttons (dashboard tile / modal headers) */
.btn-sm {
  background: #16241a;
  color: var(--ink);
  border: 1px solid var(--line-btn);
  border-radius: 5px;
  font-size: 11px;
  padding: 3px 9px;
  cursor: pointer;
}
.btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm.reset:hover { border-color: var(--bad); color: var(--bad); }

/* ----------------------------------------------------------------------------
   9. DATA PANELS  — mining hashrate + swarm bars
   ------------------------------------------------------------------------- */
.hashpanel {
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  text-align: center;
}
.hashbig {
  font-size: 30px; font-weight: 800; line-height: 1.1;
  color: var(--accent);
  font-family: var(--mono);
}
.hashbig small { font-size: 13px; color: var(--dim); }
.hashsub { font-size: 12px; color: var(--dim); margin-top: 2px; }

.bars {
  display: flex; gap: 3px;
  align-items: flex-end; justify-content: center;
  height: 46px; margin-top: 12px;
}
.bars .b {
  width: 12px;
  background: var(--line-live);
  border-radius: 2px 2px 0 0;
  transition: height .4s, background .4s;
}
.bars .b.hot { background: var(--accent); }

/* ----------------------------------------------------------------------------
   10. SCOREBOARD  — scalper store feed
   ------------------------------------------------------------------------- */
.board {
  background: var(--black);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  margin: 6px 0 12px;
}
.boardhead {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--dim);
  margin-bottom: 8px;
}
.boardhead .soldout, .boardhead #soldout { color: var(--bad); font-weight: 700; }

.feed {
  font-family: var(--mono);
  font-size: 12px;
  max-height: 150px;
  overflow-y: auto;
}
.feed div { padding: 2px 0; border-bottom: 1px solid #11160f; }
.feed .you { color: var(--accent); }   /* the human buyer */
.feed .bot { color: var(--warn); }     /* a scalper bot */

/* ----------------------------------------------------------------------------
   11. INSTRUCTOR DASHBOARD  — header, grid, tiles, status dot
   ------------------------------------------------------------------------- */
header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
}
header h1 { font-size: 17px; }
header .meta { color: var(--dim); font-size: 13px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
  padding: 16px;
}

.tile {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.tile.live { border-color: var(--line-live); }

.thead {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
}
.thead .sid { font-weight: 700; color: var(--ink-bright); }
.thead .who { color: var(--dim); font-size: 12px; }
.thead .sp { flex: 1; }

.dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #3a4a3d;
}
.dot.on { background: var(--accent); box-shadow: 0 0 7px var(--accent); }

.last {
  padding: 5px 11px;
  font-size: 11.5px; color: var(--dim);
  border-top: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--mono);
}
.last b { color: #bfe9c6; }

/* ----------------------------------------------------------------------------
   12. MODAL  — log viewer sheet
   ------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  display: none; align-items: center; justify-content: center;
  z-index: 50;
}
.modal.show { display: flex; }

.sheet {
  display: flex; flex-direction: column;
  width: min(960px, 92vw);
  height: min(80vh, 720px);
  background: var(--card);
  border: 1px solid var(--line-btn);
  border-radius: 10px;
}
.sheet h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 11px 15px;
  color: var(--accent); font-size: 15px;
  border-bottom: 1px solid var(--line);
}
.sheet h3 .sp { flex: 1; }

.files {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
}
.files a {
  font-size: 12px;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line-btn);
  border-radius: 5px;
  padding: 4px 9px;
  cursor: pointer;
  font-family: var(--mono);
}
.files a:hover, .files a.sel { border-color: var(--accent); color: var(--accent); }

.viewer { flex: 1; overflow: auto; padding: 10px 14px; background: var(--black); }
.viewer pre {
  margin: 0; white-space: pre-wrap;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--ink);
}

/* ----------------------------------------------------------------------------
   12b. LEGACY PAGE STRUCTURE  (split console + dashboard terminals)
   These evaporate with the terminal-only pivot — delete this block together
   with the matching console/splitter markup. Kept so the current pages
   migrate to lab.css losslessly.
   ------------------------------------------------------------------------- */
/* embedded console + draggable divider (lab.html / index.html) */
.splitter {
  flex: 0 0 7px;
  position: relative;
  cursor: col-resize;
  background: var(--line);
  transition: background .12s;
}
.splitter:hover, .splitter.drag { background: var(--accent); }
.splitter::after {
  content: "⋮⋮";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #5a7a60; font-size: 11px; letter-spacing: -2px;
  pointer-events: none;
}
body.dragging { cursor: col-resize; user-select: none; }
#term { flex: 1; width: 100%; padding: 6px 8px; overflow: hidden; }  /* xterm host */
iframe { flex: 1; width: 100%; border: 0; background: var(--black); } /* ttyd host */
body.dragging #term,
body.dragging iframe { pointer-events: none; }

/* dashboard tile console + modal transcript terminal (dashboard.html) */
.tile .term { height: 230px; padding: 4px 6px; background: var(--black); }
#vterm { height: 100%; }
.thead button, .sheet h3 button {
  background: #16241a; color: var(--ink);
  border: 1px solid var(--line-btn); border-radius: 5px;
  padding: 3px 9px; cursor: pointer;
}
.thead button { font-size: 11px; }
.sheet h3 button { font-size: 12px; }
.thead button:hover, .sheet h3 button:hover { border-color: var(--accent); color: var(--accent); }
.thead button.reset:hover { border-color: var(--bad); color: var(--bad); }

/* ----------------------------------------------------------------------------
   13. RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .guide { padding: 22px 16px 60px; }
  .wrap { flex-direction: column; height: auto; }
  .story { flex: none; width: 100%; }
  .grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   COPY-TO-CLIPBOARD SNIPPET  (drop into each page's <script>)
   Prefers the async Clipboard API (secure contexts: https / localhost);
   falls back to execCommand so it still works over plain-HTTP LAN pages —
   the actual workshop delivery condition. Toggles .copied / .copyfail.
   ----------------------------------------------------------------------------
   async function copyText(text) {
     if (navigator.clipboard && window.isSecureContext) {
       try { await navigator.clipboard.writeText(text); return true; } catch (_) {}
     }
     const ta = document.createElement('textarea');
     ta.value = text; ta.setAttribute('readonly', '');
     ta.style.position = 'fixed'; ta.style.top = '-1000px'; ta.style.opacity = '0';
     document.body.appendChild(ta);
     ta.select(); ta.setSelectionRange(0, text.length);
     let ok = false;
     try { ok = document.execCommand('copy'); } catch (_) {}
     ta.remove();
     return ok;
   }
   document.querySelectorAll('code.cmd').forEach(el => {
     el.addEventListener('click', async () => {
       const text = el.getAttribute('data-cmd') || el.textContent;
       const ok = await copyText(text);
       el.classList.add(ok ? 'copied' : 'copyfail');
       setTimeout(() => el.classList.remove('copied', 'copyfail'), 1200);
     });
   });
   ========================================================================= */