/* ═══════════════════════════════════════════════════════════════
   Cyber Defense Workshop Platform · Design System
   Dark theme · Analyst Mind purple accent #9B6BD6
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  /* Neutrals per design-guide-analyst-mind.md. The background is a warm dark
     neutral, NOT near-black, so borders are lifted to stay visible against it. */
  --bg:          #2E2E2B;
  --bg-surface:  #252523;
  --bg-raised:   #393936;
  --bg-hover:    #343431;
  --border:      #4A4A44;
  --border-lit:  #5F5F56;

  /* Guide rule: no grey text. White, with opacity for hierarchy. */
  --text:        #FFFFFF;
  --text-muted:  rgba(255,255,255,.78);
  --text-dim:    rgba(255,255,255,.60);

  --accent:      #9B6BD6;
  --accent-dim:  #9B6BD633;
  --accent-glow: #9B6BD666;
  --accent-light:#B894DF;

  --success:     #4CAF50;
  --success-dim: #4CAF5022;
  --error:       #FF6B6B;
  --error-dim:   #FF6B6B22;
  --warning:     #f59e0b;   /* NOT in the brand guide - see note below */

  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   16px;

  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;

  --shadow:      0 4px 24px rgba(0,0,0,.5);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.4);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
button { cursor: pointer; font: inherit; border: none; background: none; }
input, select, textarea { font: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE
   ═══════════════════════════════════════════════════════════════ */

.landing-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Login background.
   A single fixed image carries the surface. The grid ruling and the purple bleed
   layers that used to live here were doing the job this image now does, and all
   three at once was noise - so they are replaced rather than stacked.

   The image is cool-toned and the brand is warm neutral, so it sits under a warm
   scrim. That pulls it toward #2E2E2B and keeps the card, the form controls and
   the footer legible over the bright horizontal band, which lands exactly where
   the button and the footer sit. */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url('/img/login-bg.png') center/cover no-repeat;
  pointer-events: none;
}
.grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Knocked back. The source image's lower third is genuinely bright and it was
     pulling the eye below the card - the card should be the brightest thing on
     this page. A flat warm wash plus a heavier floor keeps the horizon readable
     as depth without competing. */
  background:
    linear-gradient(180deg, rgba(46,46,43,.52) 0%, rgba(46,46,43,.44) 40%, rgba(46,46,43,.70) 100%),
    radial-gradient(ellipse 55% 45% at 50% 40%, rgba(155,107,214,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* Radial glow behind card */
.landing-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.landing-wrapper::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Landing card */
.landing-card {
  position: relative;
  z-index: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow), 0 0 0 1px var(--accent-dim);
}

/* Logo */
.landing-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.logo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1px solid var(--border-lit);
  display: flex;
  align-items: center;
  justify-content: center;
}
#workshop-logo {
  max-height: 160px;
  max-width: 400px;
  border-radius: var(--radius-sm);
  object-fit: contain;
}

/* Titles */
.landing-titles { text-align: center; margin-bottom: 1.75rem; }
.landing-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin-bottom: .4rem;
}
.landing-subtitle {
  font-size: .95rem;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.landing-location {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  color: var(--accent);
  font-weight: 500;
}

/* Divider */
.landing-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.5rem;
  color: var(--text-dim);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.landing-divider::before,
.landing-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Login form */
.login-form { display: flex; flex-direction: column; gap: 1rem; }

.input-label {
  display: block;
  font-size: .82rem;
  color: var(--text-muted);
  margin-bottom: .4rem;
  font-weight: 500;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.input-icon {
  position: absolute;
  left: .85rem;
  color: var(--text-dim);
  pointer-events: none;
}
.password-input {
  width: 100%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .7rem 2.8rem .7rem 2.5rem;
  font-size: .95rem;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.password-input::placeholder { color: var(--text-dim); }
.password-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.toggle-password {
  position: absolute;
  right: .75rem;
  color: var(--text-dim);
  padding: .25rem;
  transition: color .15s;
}
.toggle-password:hover { color: var(--text); }

/* Buttons */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: .75rem 1.5rem;
  border-radius: var(--radius-sm);
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 2px 12px var(--accent-glow);
}
.btn-primary:hover { background: var(--accent-light); box-shadow: 0 4px 20px var(--accent-glow); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; pointer-events: none; }

.btn-ghost {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: var(--text-muted);
  padding: .45rem .75rem;
  border-radius: var(--radius-sm);
  font-size: .88rem;
  transition: background .15s, color .15s;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
.btn-sm { font-size: .82rem; padding: .35rem .65rem; }

/* Spinner */
.btn-spinner { display: flex; }
.spinner-svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Error */
.error-msg {
  font-size: .84rem;
  color: var(--error);
  background: var(--error-dim);
  border: 1px solid var(--error);
  border-radius: var(--radius-sm);
  padding: .55rem .85rem;
  display: none;
}
.error-msg.visible { display: block; }

/* Footer */
.landing-footer {
  position: relative;
  z-index: 1;
  margin-top: 2rem;
  font-size: .76rem;
  color: var(--text-dim);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.footer-logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: .7;
}

.ws-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

/* ═══════════════════════════════════════════════════════════════
   WORKSHOP PAGE
   ═══════════════════════════════════════════════════════════════ */

.workshop-body { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.ws-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.ws-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
.ws-header-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.header-logo-img { height: 28px; object-fit: contain; }
.header-logo-svg { flex-shrink: 0; }
.ws-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
}
.ws-header-right { display: flex; align-items: center; gap: .75rem; }

.ws-score-badge {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-lit);
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent);
}
.ws-nickname-badge {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .3rem .75rem;
  letter-spacing: .02em;
}

.ws-skip-badge {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: #f59e0b22;
  border: 1px solid #f59e0b88;
  border-radius: 999px;
  padding: .3rem .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--warning);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ws-skip-badge:hover { background: #f59e0b33; border-color: var(--warning); }

/* Progress bar */
.ws-progress-bar {
  height: 2px;
  background: var(--border);
}
.ws-progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width .4s ease;
}

/* Layout */
/* 1400px left ~137 monospace characters for a paste block, and the longest lines
   participants must read are 137-145 (the staged-payload and differential one-liners).
   So most blocks looked fine and a few clipped, which reads as "sometimes broken"
   rather than "scroll me". 1680px fits ~174 and leaves headroom for a longer block
   later. Prose is held to a readable measure separately - see .chapter-desc. */
.ws-layout {
  flex: 1;
  display: flex;
  max-width: 1680px;
  margin: 0 auto;
  width: 100%;
}

/* Sidebar */
.ws-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 57px;
  height: calc(100vh - 57px);
  overflow-y: auto;
}
.sidebar-title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  padding: 0 .5rem;
  margin-bottom: .75rem;
}
.chapter-list { display: flex; flex-direction: column; gap: .25rem; }

/* Chapter items */
.chapter-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
  text-align: left;
  width: 100%;
}
.chapter-item:hover:not(.locked) { background: var(--bg-hover); }
.chapter-item.active {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.chapter-item.locked {
  opacity: .4;
  cursor: not-allowed;
}
.chapter-item.completed .chapter-item-icon { color: var(--success); }

.chapter-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-lit);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: border-color .15s, color .15s;
}
.chapter-item.active .chapter-item-icon {
  border-color: var(--accent);
  color: var(--accent);
}
.chapter-item.completed .chapter-item-icon {
  background: var(--success-dim);
  border-color: var(--success);
}

.chapter-item-text { flex: 1; min-width: 0; }
.chapter-item-title {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chapter-item-sub {
  font-size: .72rem;
  color: var(--text-muted);
}

/* Divider before the completion chapter */
.chapter-list-divider {
  height: 1px;
  background: var(--border);
  margin: .5rem .5rem;
}

/* Main content */
.ws-main {
  flex: 1;
  padding: 2rem 2.5rem;
  overflow-y: auto;
}

/* Loading */
.ws-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 1rem;
  color: var(--text-muted);
}
.ws-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border-lit);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Chapter header */
.chapter-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 2rem;
}
.chapter-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
}
.chapter-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.25;
}
/* The description is now three distinct things - prose, code to paste, and an
   aside - so the container is a block and each part carries its own weight. */
.chapter-desc {
  font-size: .9rem;
  color: var(--text-muted);
  margin-top: .3rem;
  /* Preserve newlines so a chapter description can carry a short, paste-able
     code snippet - the lines a participant adds to grow the gate this lesson.
     Prose is unaffected: existing descriptions are single paragraphs, and
     pre-wrap still wraps normally at the container edge. */
  white-space: pre-wrap;
}

/* Questions */
.questions-list { display: flex; flex-direction: column; gap: 1.25rem; }

.question-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color .2s;
}
.question-card.answered-correct { border-color: var(--success); background: var(--success-dim); }
.question-card.answered-wrong { border-color: var(--error); }
.question-feedback.skipped { color: var(--text-muted); }

.question-badge-skipped {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--warning);
  background: #f59e0b1f;
  border: 1px solid #f59e0b55;
  padding: .15rem .45rem;
  border-radius: 4px;
  white-space: nowrap;
}

.btn-skip-q { margin-left: .5rem; color: var(--text-dim); }

.question-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.question-num {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: .2rem .5rem;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.question-points {
  font-size: .75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.question-text {
  font-size: .97rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.question-hint {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.question-hint::before {
  content: '💡';
  font-size: .85rem;
}

.question-link {
  font-size: .85rem;
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.question-link::before {
  content: '🔗';
  font-size: .85rem;
}
.question-link a {
  color: var(--accent, #B894DF);
  text-decoration: underline;
  word-break: break-all;
}
.question-link a:hover {
  text-decoration: none;
}

/* Text input */
.question-text-input {
  width: 100%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .65rem 1rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.question-text-input::placeholder { color: var(--text-dim); }
.question-text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.question-text-input:disabled { opacity: .6; }

/* Dropdown */
.question-select {
  width: 100%;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .65rem 1rem;
  font-size: .9rem;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4L6 8L10 4' stroke='%23808080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.question-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.question-select:disabled { opacity: .6; }

/* Radio / Checkbox options */
.options-list { display: flex; flex-direction: column; gap: .5rem; }

.option-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  cursor: pointer;
  transition: border-color .2s, background .15s;
  font-size: .9rem;
}
.option-label:hover { border-color: var(--border-lit); background: var(--bg-hover); }
.option-label.selected { border-color: var(--accent); background: var(--accent-dim); }
.option-label.correct { border-color: var(--success); background: var(--success-dim); }
.option-label.wrong { border-color: var(--error); background: var(--error-dim); }

.option-label input[type="radio"],
.option-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

/* Submit button for question */
.question-actions {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.btn-submit-q {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .55rem 1.2rem;
  border-radius: var(--radius-sm);
  transition: background .15s, box-shadow .15s;
}
.btn-submit-q:hover { background: var(--accent-light); }
.btn-submit-q:disabled { opacity: .5; pointer-events: none; }

/* Feedback */
.question-feedback {
  margin-top: .75rem;
  font-size: .84rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-sm);
  display: none;
  align-items: center;
  gap: .5rem;
}
.question-feedback.visible { display: flex; }
.question-feedback.correct {
  background: var(--success-dim);
  border: 1px solid var(--success);
  color: var(--success);
}
.question-feedback.wrong {
  background: var(--error-dim);
  border: 1px solid var(--error);
  color: var(--error);
}

/* Chapter footer */
.chapter-footer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }

/* Mobile sidebar toggle */
.sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--accent-glow);
}

/* ═══════════════════════════════════════════════════════════════
   LIGHTNING QUESTION
   ═══════════════════════════════════════════════════════════════ */

.lightning-card {
  border-color: #B894DF55;
}

/* Pre-start overlay */
.lightning-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem 1.75rem;
  gap: .85rem;
}

.lightning-banner-icon {
  filter: drop-shadow(0 0 14px #B894DF99);
  animation: lightning-pulse 2s ease-in-out infinite;
}
@keyframes lightning-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px #B894DF55); }
  50%       { filter: drop-shadow(0 0 22px #B894DFcc); }
}

.lightning-banner-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--warning);
  letter-spacing: -.01em;
}

.lightning-banner-desc {
  font-size: .88rem;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 420px;
}

.btn-lightning-start {
  background: var(--warning);
  color: #000;
  font-weight: 700;
}
.btn-lightning-start:hover {
  background: #d97706;
  box-shadow: 0 4px 20px #B894DF66;
}

.lightning-banner-info {
  font-size: .76rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* Active timer bar (shown after start) */
.lightning-timer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  background: #B894DF14;
  border: 1px solid #B894DF44;
  border-radius: var(--radius-sm);
  margin-bottom: .85rem;
  font-size: .82rem;
  flex-wrap: wrap;
}

.lightning-timer-icon {
  color: var(--warning);
  flex-shrink: 0;
}

.lightning-timer-secs {
  font-weight: 700;
  color: var(--warning);
  font-size: .95rem;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}

.lightning-timer-bar-wrap {
  flex: 1;
  min-width: 60px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.lightning-timer-bar {
  height: 100%;
  background: var(--warning);
  transition: width .12s linear;
  border-radius: 3px;
}

.lightning-timer-bonus {
  font-size: .8rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.lightning-timer-bonus-val {
  font-weight: 700;
  color: var(--warning);
}

/* Grace period (reading time, bonus not yet depleting) */
.lightning-timer.grace { background: #ffffff0a; border-color: var(--border-lit); }
.lightning-timer.grace .lightning-timer-bar     { background: var(--border-lit); transition: none; }
.lightning-timer.grace .lightning-timer-secs    { color: var(--text-muted); font-size: .75rem; font-style: italic; }
.lightning-timer.grace .lightning-timer-bonus-val { color: var(--text-muted); }

/* Forfeited state (wrong attempt given) */
.lightning-timer.forfeited .lightning-timer-bar    { background: var(--error); }
.lightning-timer.forfeited .lightning-timer-secs   { color: var(--error); }
.lightning-timer.forfeited .lightning-timer-bonus-val { color: var(--error); }

/* Lightning bolt in question-num badge */
.q-lightning-icon {
  vertical-align: middle;
  margin-right: 2px;
  color: var(--warning);
}

/* ═══════════════════════════════════════════════════════════════
   COMPLETION SCREEN
   ═══════════════════════════════════════════════════════════════ */

.completion-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 2rem 0;
}
.completion-inner {
  text-align: center;
  max-width: 540px;
  width: 100%;
}
.completion-icon {
  margin-bottom: 1.5rem;
  animation: pop .5s ease both;
}
@keyframes pop {
  0% { transform: scale(.5); opacity: 0; }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.completion-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: .5rem;
}
.completion-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.score-display-big {
  background: var(--bg-surface);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.score-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-dim);
  margin-bottom: .5rem;
}
.score-value {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.04em;
}
.score-max { font-size: .9rem; color: var(--text-muted); margin-top: .25rem; }

/* Radar chart section */
.radar-chart-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  padding: 1.25rem 0.75rem 1rem;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.radar-chart-section canvas {
  max-width: 100%;
  height: auto;
}

/* Certificate section */
.certificate-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: left;
}
.skipped-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: #f59e0b18;
  border: 1px solid #f59e0b66;
  border-radius: var(--radius);
  padding: .9rem 1.2rem;
  margin-bottom: 1.5rem;
  font-size: .88rem;
  color: var(--warning);
}
.skipped-warning-body {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.skipped-warning-icon { flex-shrink: 0; }
.skipped-warning[hidden] { display: none; }

.cert-section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .35rem;
}
.cert-section-desc { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; }
.cert-input-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.cert-name-input {
  flex: 1;
  min-width: 180px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: .65rem 1rem;
  font-size: .9rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.cert-name-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.cert-error {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--error);
  min-height: 1.2em;
}

/* ═══════════════════════════════════════════════════════════════
   BONUS QUESTIONS
   ═══════════════════════════════════════════════════════════════ */

.bonus-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 2rem 0 1.25rem;
  color: var(--warning);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.bonus-divider::before,
.bonus-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #B894DF44;
}

.question-optional {
  border-color: #B894DF44;
}

.question-badge-optional {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--warning);
  background: #B894DF1a;
  border: 1px solid #B894DF55;
  border-radius: 4px;
  padding: .1rem .45rem;
  margin-left: .25rem;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   CHAPTER FOOTER - SPEED WARNING · PEER PROGRESS · COOLDOWN
   ═══════════════════════════════════════════════════════════════ */

.chapter-speed-warning[hidden] { display: none; }
.chapter-speed-warning {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #f59e0b18;
  border: 1px solid #f59e0b66;
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  color: var(--warning);
  line-height: 1.5;
}

.chapter-peer-progress {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .85rem;
  font-size: .82rem;
  color: var(--text-muted);
}

.btn-primary.btn-cooldown {
  opacity: .7;
  cursor: not-allowed;
  background: var(--bg-raised);
  color: var(--text-muted);
  border: 1px solid var(--border-lit);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ws-sidebar {
    position: fixed;
    left: -280px;
    top: 57px;
    height: calc(100vh - 57px);
    z-index: 150;
    transition: left .25s ease;
    width: 260px;
  }
  .ws-sidebar.open { left: 0; }
  .sidebar-toggle { display: flex; }
  .ws-main { padding: 1.25rem 1rem; }
  .landing-card { padding: 2rem 1.5rem; }
  .chapter-title { font-size: 1.2rem; }
  .completion-title { font-size: 1.5rem; }
  .score-value { font-size: 2.5rem; }
}

@media (max-width: 480px) {
  .ws-header-inner { padding: .65rem 1rem; }
  .ws-header-title { display: none; }
  .cert-input-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-lit); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════════
   COOKIE BANNER
   ═══════════════════════════════════════════════════════════════ */

.cookie-banner {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 9999;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.85rem;
  width: 300px;
  padding: 1rem 1.1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-lit);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.55), 0 0 0 1px var(--accent-dim);
  animation: cookie-slide-in .35s cubic-bezier(.22,1,.36,1) both;
}
.cookie-banner[hidden] { display: none; }

@keyframes cookie-slide-in {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

.cookie-icon { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

.cookie-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cookie-title { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .07em; text-transform: uppercase; }
.cookie-text  { margin: 0 0 .8rem; font-size: .78rem; color: var(--text); line-height: 1.5; }

.cookie-btn {
  align-self: stretch;
  padding: .38rem .75rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.cookie-btn:hover { opacity: .85; }

/* ── Chapter attachments — admin editor ────────────────────────── */
.ed-section-title { display: flex; align-items: center; gap: .5rem; }
.ed-section-meta {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.ed-attach-dropzone {
  display: block;
  border: 1.5px dashed var(--border-lit);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  padding: 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .65rem;
}
.ed-attach-dropzone:hover:not(.disabled) {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.ed-attach-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.ed-attach-dropzone.disabled {
  cursor: not-allowed;
  opacity: .55;
}
.ed-attach-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  color: var(--text-muted);
}
.ed-attach-dropzone-inner svg { color: var(--accent); }
.ed-attach-prompt { font-size: .85rem; color: var(--text); }
.ed-attach-hint {
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.ed-attach-hint code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: .7rem;
  color: var(--accent);
}
.ed-attach-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.ed-attach-row {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .6rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .82rem;
}
.ed-attach-icon { color: var(--accent); flex-shrink: 0; }
.ed-attach-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.ed-attach-size {
  font-size: .72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ed-attach-status {
  margin-top: .5rem;
  font-size: .75rem;
  min-height: 1em;
  color: var(--text-muted);
}
.ed-attach-status.ok  { color: var(--success); }
.ed-attach-status.err { color: var(--error); }

/* ── Chapter attachments — workshop view ───────────────────────── */
.chapter-attachments {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
}
.chapter-attachments-title {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .55rem;
}
.chapter-attachments-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.chapter-attachment-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chapter-attachment-btn:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.chapter-attachment-btn.is-malware {
  border-color: var(--error);
  color: var(--error);
}
.chapter-attachment-btn.is-malware:hover {
  background: var(--error-dim);
}
.chapter-attachment-icon { color: inherit; flex-shrink: 0; }
.chapter-attachment-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.chapter-attachment-size {
  font-size: .7rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.chapter-attachment-btn.is-malware .chapter-attachment-size { color: var(--error); opacity: .8; }
.chapter-attachment-tag {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--error-dim);
  color: var(--error);
}

/* ── Malware-sample warning modal ──────────────────────────────── */
.mal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 1rem;
  animation: malModalFade .15s ease-out;
}
@keyframes malModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mal-modal-card {
  background: var(--bg-surface);
  border: 1px solid var(--error);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--shadow), 0 0 0 1px var(--error-dim);
}
.mal-modal-icon {
  color: var(--error);
  margin-bottom: .75rem;
  display: flex;
  justify-content: center;
}
.mal-modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  margin-bottom: .85rem;
  letter-spacing: -.01em;
}
.mal-modal-body {
  font-size: .9rem;
  color: var(--text);
  text-align: center;
  margin-bottom: 1rem;
}
.mal-modal-body strong { word-break: break-all; }
.mal-modal-list {
  list-style: none;
  padding: .85rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}
.mal-modal-list li {
  font-size: .85rem;
  color: var(--text);
  padding: .25rem 0;
  line-height: 1.5;
}
.mal-modal-list li + li { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .5rem; }
.mal-modal-list code {
  font-family: var(--font-mono);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .8rem;
  color: var(--accent);
}
.mal-modal-actions {
  display: flex;
  gap: .65rem;
  justify-content: flex-end;
}
.mal-modal-btn {
  padding: .55rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid var(--border-lit);
  background: var(--bg-raised);
  color: var(--text);
  transition: background .15s, border-color .15s;
}
.mal-modal-cancel:hover { background: var(--bg-hover); border-color: var(--accent); }
.mal-modal-proceed {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}
.mal-modal-proceed:hover { background: #dc2626; }

/* ── Workshop slide deck box (completion screen) ───────────────── */
.slide-deck-box {
  background: var(--bg-surface);
  border: 1px solid #ffc00055; /* TLP:Amber tint */
  border-left: 3px solid #ffc000;
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 2rem;
  text-align: left;
}
.slide-deck-header {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin-bottom: 1rem;
}
.slide-deck-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: #ffc00022;
  color: #ffc000;
}
.slide-deck-text { flex: 1; min-width: 0; }
.slide-deck-text .score-label { margin-bottom: .35rem; }
.slide-deck-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}
.slide-deck-desc a {
  color: #ffc000;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.slide-deck-desc a:hover { color: #ffd633; }
.slide-deck-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--border-lit);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.slide-deck-btn:hover {
  border-color: #ffc000;
  color: #ffc000;
  background: var(--bg-hover);
}
.js-slide-deck-size { color: var(--text-muted); font-weight: 500; }


/* ── Chapter description parts ─────────────────────────────────────────────── */
/* Widening the layout to 1680px was for the paste blocks, not for the prose -
   a 170-character line of body text is hard to track back to the next line.
   Hold prose and asides to a readable measure; .chapter-code stays full width. */
.chapter-prose {
  white-space: pre-wrap;
  margin: 0 0 .75rem;
  max-width: 82ch;
}

/* The lines to paste. A raised, bordered surface so the eye finds it without
   reading - this is the one thing on the page people came to copy. */
.chapter-code {
  margin: .9rem 0;
  border: 1px solid var(--border-lit);
  border-radius: var(--radius);
  background: var(--bg-surface);
  overflow: hidden;
}
.chapter-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .45rem .75rem;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* A label naming a file ("save this as prompts/05-read-social-engineering.txt")
   is one long unbreakable word. Left to its min-content width it shoves Copy out
   of the panel, which clips it - and a code block you cannot copy is useless on
   a phone. Let the path break, and never let it cost the button. */
.chapter-code-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chapter-code-copy {
  flex: none;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-light);
  font-size: .74rem;
  padding: .2rem .7rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chapter-code-copy:hover { background: var(--accent); color: #fff; }
.chapter-code pre {
  margin: 0;
  padding: .8rem .9rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre;
  max-height: 22rem;
  overflow-y: auto;
}

/* "If you are stuck" - present, but quieter than the lesson itself. */
.chapter-note {
  white-space: pre-wrap;
  max-width: 82ch;
  margin: .75rem 0 0;
  padding: .6rem .85rem;
  border-left: 2px solid var(--border-lit);
  background: rgba(255,255,255,.03);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: .84rem;
  color: var(--text-dim);
}