/* =============================================================================
   rolig.css — Rolig design system (pilot: join-sider)
   Selvstændigt stylesheet — erstatter tokens.css + components.css + brand.css
   for de tre join-sider (poll, dagsorden, test). Andre sider er uændrede.

   Accent-farve styres via data-tool på <body>:
     <body data-tool="poll">       → grøn
     <body data-tool="dagsorden">  → teal
     <body data-tool="test">       → plum
   ============================================================================= */

:root {
  color-scheme: light;

  /* Ink-skala (tekst/ikoner) */
  --ink:    oklch(0.20 0.012 250);
  --ink-2:  oklch(0.38 0.010 250);
  --ink-3:  oklch(0.56 0.008 250);
  --ink-4:  oklch(0.74 0.006 250);

  /* Paper-skala (baggrunde) — varmere, lidt amber-tone */
  --paper:   oklch(0.990 0.004 85);
  --paper-2: oklch(0.970 0.005 85);
  --paper-3: oklch(0.940 0.006 85);

  /* Rules (tynde streger) */
  --rule:   oklch(0.905 0.006 85);
  --rule-2: oklch(0.855 0.007 85);

  /* Accentfarver — dæmpede, ikke neon */
  --green: oklch(0.56 0.13 155);
  --teal:  oklch(0.52 0.10 210);
  --plum:  oklch(0.44 0.13 345);
  --amber: oklch(0.66 0.14 70);
  --red:   oklch(0.55 0.18 27);

  /* Default accent (overrides pr. værktøj nedenfor) */
  --accent: var(--green);

  /* Fonte */
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Spacing (4px base, 8pt rytme) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* Border-radius */
  --r-s: 5px; --r-m: 8px; --r-l: 10px; --r-xl: 14px; --r-full: 9999px;

  /* Legacy token aliases — for pages med inline styles der bruger ældre navne */
  --text: var(--ink);
  --muted: var(--ink-3);
  --text-muted: var(--ink-3);
  --font-body: var(--sans);
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --step--2: 11px;
  --step--1: 12px;
  --step-0: 14px;
  --step-1: 16px;
  --step-2: 22px;
  --step-3: 30px;
  --card: var(--paper);
  --bg: var(--paper-2);
  --border: var(--rule);
  --border-subtle: var(--rule);
  --radius-s: var(--r-s);
  --radius-m: var(--r-m);
  --radius-l: var(--r-l);
  --radius-xl: var(--r-xl);
  --radius-full: var(--r-full);
  --shadow-s: 0 1px 2px oklch(0 0 0 / 4%);
  --shadow-m: 0 2px 8px oklch(0 0 0 / 6%);
  --shadow-hover: 0 8px 24px oklch(0 0 0 / 10%);
}

/* Værktøjs-accent via data-tool */
[data-tool="poll"]       { --accent: var(--green); }
[data-tool="dagsorden"]  { --accent: var(--teal); }
[data-tool="test"]       { --accent: var(--plum); }
[data-tool="rollespil"]  { --accent: var(--amber); }
[data-tool="lektie"]     { --accent: oklch(0.50 0.15 264); }
[data-tool="dp"]         { --accent: oklch(0.48 0.16 250); }  /* dyb politisk blå */

/* Accent-subtle — tinted accent background for active states */
body {
  --accent-subtle: oklch(from var(--accent) l c h / 10%);
  --accent-hover: oklch(from var(--accent) calc(l - 0.05) c h);
  --input-bg: var(--paper-2);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { min-block-size: 100dvh; }

/* =============================================================================
   Fælles primitiver
   ============================================================================= */

.hi {
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* Kicker — uppercase meta med streg-dekoration */
.kicker {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-block-end: var(--s-3);
  display: flex;
  align-items: center;
  gap: 10px;

  &::before {
    content: "";
    inline-size: 20px;
    block-size: 1px;
    background: var(--accent);
  }
}

/* =============================================================================
   Brand (sidebar i topbar)
   ============================================================================= */

.brand {
  font-weight: 700;
  letter-spacing: -0.025em;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
}

.brand-dot { color: var(--accent); }

.brand-sep {
  color: var(--ink-4);
  margin-inline: 2px;
  font-weight: 400;
}

.brand-sub {
  color: var(--ink-3);
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* =============================================================================
   Side-container
   ============================================================================= */

.page {
  max-inline-size: 520px;
  margin-inline: auto;
  padding: var(--s-5) var(--s-5) var(--s-6);
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* Topbar (bar) */
.page-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-block: var(--s-4);
  padding-inline: 0;
  border-block-end: 1px solid var(--rule);
  font-size: 13px;
  margin-block-end: var(--s-5);
}

.page-header .spacer { flex: 1; }

.bar-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font: 500 11px var(--mono);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border-radius: var(--r-s);
  transition: color 0.15s, background 0.15s;
  text-decoration: none;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

/* =============================================================================
   Join-sektion
   ============================================================================= */

.join-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-block: var(--s-4);
  text-align: start; /* venstrejusteret — ikke centreret */
}

.join-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
  margin-block-end: var(--s-2);
  text-wrap: balance;
  color: var(--ink);
}

.join-subtitle {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  max-inline-size: 38ch;
  margin-block-end: 28px;
  text-wrap: pretty;
}

/* Fejl-alert */
.join-alert {
  padding: 12px 14px;
  background: oklch(from var(--red) l c h / 8%);
  border: 1px solid oklch(from var(--red) l c h / 25%);
  border-inline-start: 3px solid var(--red);
  color: var(--red);
  font-size: 13px;
  line-height: 1.5;
  border-radius: 0 var(--r-m) var(--r-m) 0;
  margin-block-end: var(--s-4);

  &[hidden], &[style*="display:none"], &[style*="display: none"] {
    display: none !important;
  }
}

/* =============================================================================
   Helsides fejl-state (forkert kode / lukket / offline)
   Erstatter join-section midlertidigt — vises via JS når join fejler
   ============================================================================= */

.error-state {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-6);
  gap: var(--s-3);
}

.error-state-icon {
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-l);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 22px var(--sans);
  line-height: 1;
  margin-block-end: var(--s-3);

  /* default = red */
  background: oklch(from var(--red) l c h / 12%);
  border: 1px solid var(--red);
  color: var(--red);

  /* amber-variant til "lukket"/"offline" */
  .error-state[data-tone="amber"] & {
    background: oklch(from var(--amber) l c h / 14%);
    border-color: var(--amber);
    color: var(--amber);
  }
}

.error-state-kicker {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 4px;

  &::before { content: ""; inline-size: 20px; block-size: 1px; background: currentColor; }

  .error-state[data-tone="amber"] & { color: var(--amber); }
}

.error-state-title {
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
  margin-block-end: 8px;
}

.error-state-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
  max-inline-size: 36ch;
  margin-block-end: var(--s-4);
}

.error-state-detail {
  padding: 12px 14px;
  border: 1px dashed oklch(from var(--red) l c h / 40%);
  border-radius: var(--r-m);
  margin-block-end: var(--s-4);
  font: 500 12px var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.05em;

  & strong { color: var(--ink); font-weight: 700; letter-spacing: 0.08em; }

  .error-state[data-tone="amber"] & {
    border-color: oklch(from var(--amber) l c h / 50%);
    border-style: solid;
    background: var(--paper-2);
  }
}

.error-state-detail-pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  margin-block-end: var(--s-4);
  font: 500 12px var(--mono);
  color: var(--ink-2);

  & .pulse-dot {
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--amber);
    animation: errorStatePulse 2.2s ease-in-out infinite;
  }
}
@keyframes errorStatePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1); }
}

.error-state-actions {
  display: flex;
  gap: 8px;
  margin-block-start: auto;
}
.error-state-actions .btn { flex: 1; }

/* =============================================================================
   Kode-cifre (kode-input)
   ============================================================================= */

.code-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.code-inputs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.code-digit {
  aspect-ratio: 3 / 4;
  inline-size: auto;
  block-size: auto;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-l);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 36px var(--sans);
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  -moz-appearance: textfield;

  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

  &:focus {
    border-color: var(--accent);
  }
}

/* =============================================================================
   Knapper
   ============================================================================= */

.btn {
  inline-size: 100%;
  block-size: 50px;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: var(--paper);
  font: 600 14px var(--sans);
  letter-spacing: -0.005em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.08s, background 0.15s, color 0.15s;
  text-decoration: none;

  &:hover { background: oklch(from var(--accent) calc(l - 0.04) c h); }
  &:active { transform: scale(0.99); }
  &:disabled { opacity: 0.4; cursor: not-allowed; }

  &.loading { opacity: 0.7; cursor: progress; }
}

/* Ghost-variant: neutral, til sekundær handling */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule-2);

  &:hover {
    background: var(--paper-2);
    color: var(--ink);
    border-color: var(--ink-3);
  }
}

/* Plain-variant: stiplet, diskret (fx "+ Opret ny") */
.btn-plain {
  background: transparent;
  color: var(--ink-2);
  font-weight: 500;
  border: 1px dashed var(--rule-2);

  &:hover {
    background: transparent;
    border-color: var(--ink-3);
    color: var(--ink);
  }
}

/* Aliasser så eksisterende markup bliver ved at virke */
.btn-teal, .btn-plum, .btn-green { background: var(--accent); color: var(--paper); }
.btn-teal:hover, .btn-plum:hover, .btn-green:hover {
  background: oklch(from var(--accent) calc(l - 0.04) c h);
}

/* Small-variant: kompakt */
.btn-small {
  block-size: 36px;
  font-size: 12px;
  padding-inline: 14px;
  inline-size: auto;
  border-radius: var(--r-s);
}

/* Ikon-only knap (i rækker) */
.btn-icon {
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  inline-size: 30px;
  block-size: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

/* =============================================================================
   Tekstfelt
   ============================================================================= */

.text-input, .name-input {
  inline-size: 100%;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;

  &::placeholder { color: var(--ink-4); }

  &:focus {
    border-color: var(--accent);
  }
}

/* Navnefelt under kode-input */
.name-field { margin-block-start: var(--s-3); }

/* =============================================================================
   Meta-række i bunden af join
   ============================================================================= */

.meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 10px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}

.meta-row .spacer { flex: 1; }

.meta-row a, .meta-row .btn-link {
  color: var(--ink-2);
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  border-block-end: 1px solid var(--rule-2);
  text-decoration: none;

  &:hover { color: var(--accent); border-block-end-color: var(--accent); }
}

/* =============================================================================
   Drawer ("Mine X" sessioner)
   ============================================================================= */

.drawer {
  margin-block-start: var(--s-5);
  border-block-start: 1px solid var(--rule);
}

.drawer-hd {
  padding-block: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
  background: none;
  border: none;
  inline-size: 100%;
  text-align: start;
  font-family: inherit;
}

.drawer-hd .count {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-inline-start: auto;
}

.drawer-hd .chev {
  font: 500 13px var(--sans);
  color: var(--ink-3);
  transition: transform 0.2s;
  inline-size: 16px;
  text-align: center;
}

.drawer.open .chev { transform: rotate(90deg); }

.drawer-body { display: none; padding-block-end: var(--s-3); }
.drawer.open .drawer-body { display: block; }

.drawer .drawer-tools {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: var(--s-2);
}

/* Trigger-knap i drawer-header (fx "Kopier adgang") */
.ta-trigger-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--r-s);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, background 0.15s;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

/* =============================================================================
   Session-item (rækker i drawer)
   ============================================================================= */

.my-sessions { display: contents; }

.my-header-row { display: none; } /* header ligger nu i drawer-hd */

.my-title { display: none; }

.my-list {
  display: flex;
  flex-direction: column;
}

.my-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--rule);
  font-size: 13px;
  min-inline-size: 0;
}

.my-item:first-child { border-block-start: none; }

.my-link {
  display: contents;
  color: inherit;
  text-decoration: none;
  min-inline-size: 0;
}

.my-code {
  font: 700 17px var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding: 0;
  background: none;
  border-radius: 0;
}

/* Aktiv session: accent-farvet kode */
.my-item.active .my-code,
.my-item[data-active="true"] .my-code { color: var(--accent); }

.my-info {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
}

.my-item-title {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 13px;
}

.my-meta {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block-start: 3px;
  font-weight: 500;
}

.my-actions {
  display: flex;
  gap: var(--s-2);
  flex-shrink: 0;
}

/* .my-item-præfikset for at vinde over .drawer-body .btn-ghost/.btn-plain
   (samme specificitet 0-2-0, men senere i filen) — uden det ekstra niveau
   sad inline-size fast på dén regels 100%, og flex-shrink pressede knapperne
   ned til langt under det tilsigtede touch-target. */
.my-item .my-actions .btn,
.my-item .my-actions button,
.my-item .my-actions a {
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  /* 44×44px minimum touch-target (jf. CLAUDE.md's tilgængeligheds-regel) —
     ikonet selv forbliver kompakt (1em, arver .my-item's 13px), kun den
     klikbare/tabbare boks vokser. */
  inline-size: 44px;
  block-size: 44px;
  min-block-size: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
  text-decoration: none;
  font: inherit;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

/* "Opret ny"-knap inde i drawer */
.drawer-body .btn-plain,
.drawer-body .btn-ghost {
  margin-block-start: var(--s-3);
  block-size: 40px;
  font-size: 12px;
  inline-size: 100%;
  display: flex;
}

/* Divider-sektion (kun hvis synlig i rolig-mode) */
.divider {
  padding-block: var(--s-5);
  text-align: center;
}

/* =============================================================================
   Footer
   ============================================================================= */

.page-footer {
  margin-block-start: auto;
  padding-block-start: var(--s-6);
  text-align: center;
  font: 500 10px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;

  & a { color: var(--ink-3); text-decoration: none; }
  & a:hover { color: var(--accent); }
}

/* =============================================================================
   Forlad-knap (øverst venstre når eleven er i session)
   ============================================================================= */

.leave-btn {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-start: var(--s-4);
  border: none;
  background: transparent;
  color: var(--ink-3);
  font: 500 11px var(--mono);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  z-index: 10;
  transition: color 0.15s, background 0.15s;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

/* =============================================================================
   Vote-sektion (hvor eleven stemmer) — bevarer Rolig-udseende
   ============================================================================= */

.vote-section {
  display: none;
  flex: 1;
  flex-direction: column;
  padding-block: var(--s-4);
}

.vote-section.visible { display: flex; }

.question-text {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.25;
  color: var(--ink);
  margin-block-end: var(--s-5);
  text-wrap: balance;
}

.vote-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.vote-btn {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-l);
  padding: 14px 16px;
  font-size: 14px;
  font-family: var(--sans);
  color: var(--ink);
  text-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;

  &:hover { border-color: var(--ink-3); }
  &:disabled { cursor: not-allowed; }
  &.selected {
    border-color: var(--accent);
    background: oklch(from var(--accent) l c h / 7%);
  }
}

.vote-letter {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 11px var(--mono);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.vote-btn.selected .vote-letter {
  background: var(--accent);
  color: var(--paper);
}

/* Facit vist = stemmer låst — besked til elever der ikke nåede at stemme */
.vote-locked-notice {
  margin-block-end: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 3px solid var(--amber);
  border-radius: var(--r-s);
  background: oklch(from var(--amber) l c h / 10%);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Fritekst */
.freetext-input-wrap { margin-block-start: var(--s-3); }

.freetext-input {
  inline-size: 100%;
  min-block-size: 120px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;

  &:focus { border-color: var(--accent); }
}

.freetext-counter {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-align: end;
  margin-block: 4px var(--s-3);
  text-transform: uppercase;
}

/* =============================================================================
   Lobby-venter
   ============================================================================= */

.lobby-wait {
  display: none;
  text-align: center;
  padding-block: var(--s-7);
}

.lobby-wait-icon {
  inline-size: 44px;
  block-size: 44px;
  margin-inline: auto;
  margin-block-end: var(--s-4);
  color: var(--accent);
}

.lobby-wait-icon svg {
  inline-size: 100%;
  block-size: 100%;
}

.lobby-wait h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-block-end: var(--s-2);
}

.lobby-wait p {
  color: var(--ink-3);
  font-size: 14px;
  margin-block-end: var(--s-4);
}

.waiting-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 11px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.waiting-dots .dots::after {
  content: "…";
  animation: dots 1.4s infinite;
  display: inline-block;
  margin-inline-start: 4px;
}

@keyframes dots {
  0%, 33% { content: "·"; }
  34%, 66% { content: "··"; }
  67%, 100% { content: "···"; }
}

.connection-status {
  display: none;
  font-size: 11px;
  color: var(--amber);
  margin-block-start: var(--s-3);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.connection-status.disconnected { display: block; }

/* =============================================================================
   Bekræftelse
   ============================================================================= */

.confirmation {
  display: none;
  text-align: center;
  padding-block: var(--s-6);
}

.confirmation.visible { display: block; }

.check-circle {
  inline-size: 56px;
  block-size: 56px;
  margin-inline: auto;
  margin-block-end: var(--s-4);
}

.check-circle svg { inline-size: 100%; block-size: 100%; }

.confirmation h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.022em;
  margin-block-end: var(--s-3);
}

.confirm-slide-info {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-block-end: var(--s-3);
}

.confirm-question {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-block-end: var(--s-4);
  text-wrap: balance;
  padding: var(--s-4);
  background: var(--paper-2);
  border-radius: var(--r-m);
  text-align: start;
}

.progress-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-block: var(--s-3);
}

.progress-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--rule-2);
}

.progress-dot.done { background: var(--accent); }
.progress-dot.active {
  background: var(--accent);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
}

.quiz-feedback {
  margin-block: var(--s-3);
  padding: 12px 14px;
  border-radius: var(--r-m);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quiz-correct {
  background: oklch(from var(--green) l c h / 10%);
  color: var(--green);
  border: 1px solid oklch(from var(--green) l c h / 25%);
}

.quiz-wrong {
  background: oklch(from var(--red) l c h / 8%);
  color: var(--red);
  border: 1px solid oklch(from var(--red) l c h / 25%);
}

.quiz-neutral {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}

.quiz-feedback-icon { font-size: 16px; line-height: 1; }

.confirm-waiting { margin-block-start: var(--s-4); }

/* =============================================================================
   Navnefelt-kort (hvis separat fra join)
   ============================================================================= */

.name-section {
  display: block;
  padding-block: var(--s-4);
}

.name-card {
  padding: var(--s-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: var(--paper);
}

.name-card h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-block-end: var(--s-3);
}

.name-card .btn { margin-block-start: var(--s-3); }

/* =============================================================================
   Fejl-besked (global, flyder ind ovenfra)
   ============================================================================= */

.error-msg {
  position: fixed;
  inset-block-start: var(--s-4);
  inset-inline: var(--s-4);
  max-inline-size: 440px;
  margin-inline: auto;
  padding: 12px 14px;
  background: var(--red);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-m);
  text-align: center;
  opacity: 0;
  transform: translateY(-120%);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s;
  z-index: 1000;
  box-shadow: 0 8px 24px oklch(0 0 0 / 12%);
}

.error-msg.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* =============================================================================
   Scrollbar
   ============================================================================= */

::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rule-2);
  border-radius: var(--r-l);
  border: 3px solid var(--paper-2);
}

/* =============================================================================
   Results-view (lærerens big-screen presenter)
   ============================================================================= */

.results-container {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

/* --- LOBBY (stor kode-skærm før læreren starter) --- */
.lobby {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-6);
  text-align: center;
  gap: var(--s-5);
}

.lobby-link {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(12px, 2vw, 28px);
  user-select: none;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-l);
  transition: background 0.15s;

  &:hover { background: var(--paper-2); }
  &:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
}

.lobby-logo {
  font: 700 clamp(28px, 5vw, 48px) var(--sans);
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1;
}

.lobby-logo-dot { color: var(--accent); }

.lobby-logo-p {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--ink-3);
  font-size: 0.7em;
  letter-spacing: 0.02em;
}

.lobby-code {
  font: 700 clamp(80px, 18vw, 220px) var(--mono);
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.lobby-count {
  font: 500 13px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.lobby-count-num {
  color: var(--ink);
  font-weight: 700;
  margin-inline-end: 4px;
}

.lobby-waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 12px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.lobby-dot-pulse {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.btn-lobby-start {
  inline-size: auto;
  padding-inline: var(--s-5);
  margin-block-start: var(--s-3);
}

.btn-lobby-start kbd { margin-inline-start: 8px; }

/* --- TOPBAR --- */
.results-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
}

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-s);
  transition: background 0.15s;
  text-decoration: none;

  &:hover { background: var(--paper-2); }
}

.topbar-code-badge {
  font: 700 14px var(--mono);
  color: var(--accent);
  margin-inline-start: 6px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.topbar-spacer { flex: 1; }

.slide-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.slide-counter {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  min-inline-size: 44px;
  text-align: center;
}

.slide-arrow-btn {
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  font-size: 16px;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--rule-2);

  &:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-3); background: var(--paper-2); }
  &:disabled { opacity: 0.3; cursor: not-allowed; }
}

.topbar-count {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- RESULTS CONTENT --- */
.results-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-block-size: 0;
}

.results-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--s-6);
  gap: var(--s-4);
  min-block-size: 0;
}

.results-question-bar {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
  text-align: center;
  text-wrap: pretty;
}

.chart-wrap {
  flex: 1;
  min-block-size: 300px;
}

.table-wrap {
  flex: 1;
  overflow: auto;
}

.results-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 15px;

  & th, & td {
    padding: 10px 14px;
    text-align: start;
    border-block-end: 1px solid var(--rule);
    vertical-align: middle;
  }

  & th {
    font: 500 10px var(--mono);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  & td { color: var(--ink); }

  & td.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    text-align: end;
    color: var(--ink-2);
  }
}

.results-table th.th-end { text-align: end; }

.table-col-color { inline-size: 32px; }
.table-col-count { inline-size: 72px; }
.table-col-pct   { inline-size: 72px; }
.table-col-bar   { inline-size: clamp(120px, 28vw, 320px); }

.table-dot {
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--r-full);
  vertical-align: middle;
}

.table-answer {
  font-weight: 600;
  line-height: 1.35;
}

.results-table td.table-count,
.results-table td.table-pct {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
  white-space: nowrap;
}

.results-table td.table-count { color: var(--ink); font-weight: 600; }
.results-table td.table-pct   { color: var(--ink-3); }

.table-bar-cell { padding-block: 0; }

.table-bar-bg {
  inline-size: 100%;
  block-size: 10px;
  background: oklch(from var(--ink) l c h / 6%);
  border-radius: var(--r-full);
  overflow: hidden;
}

.table-bar-fill {
  block-size: 100%;
  border-radius: var(--r-full);
  transition: inline-size 0.4s ease;
}

@media (max-width: 520px) {
  .table-col-bar,
  .table-bar-cell,
  .results-table thead th:last-child { display: none; }
}

.freetext-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  overflow: auto;
  flex: 1;
}

.freetext-item {
  padding: var(--s-3) var(--s-4);
  background: var(--paper-2);
  border-inline-start: 3px solid var(--accent);
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}

.freetext-item .freetext-name {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-block-end: 4px;
}

.total-votes {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}

/* Resultater skjult: centrér spørgsmålet */
body.results-hidden .chart-wrap,
body.results-hidden .table-wrap,
body.results-hidden .freetext-list { display: none !important; }

body.results-hidden .results-content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

body.results-hidden .results-question-bar {
  font-size: clamp(28px, 5vw, 56px);
  max-inline-size: 22ch;
}

/* --- SSE status --- */
.sse-status {
  position: fixed;
  inset-block-end: 80px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-full);
  font: 500 11px var(--mono);
  color: var(--amber);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px oklch(0 0 0 / 6%);
  z-index: 50;

  &[hidden] { display: none; }
}

.sse-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--amber);
  animation: pulse-dot 1.4s ease-in-out infinite;
}

/* --- CONTROLS BAR --- */
.controls-bar {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px;
  background: oklch(from var(--paper) l c h / 92%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  box-shadow: 0 8px 24px oklch(0 0 0 / 8%);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

body.mouse-active .controls-bar,
.controls-bar:hover,
.controls-bar:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.ctrl-pill {
  border: none;
  background: transparent;
  color: var(--ink-2);
  font: 500 12px var(--sans);
  cursor: pointer;
  padding: 8px 14px;
  border-radius: var(--r-full);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;

  &:hover { color: var(--ink); background: var(--paper-2); }

  &.ctrl-active {
    color: var(--accent);
    background: oklch(from var(--accent) l c h / 10%);
  }

  &.ctrl-facit {
    color: var(--amber);
    &:hover { background: oklch(from var(--amber) l c h / 10%); }
  }

  & kbd {
    font: 500 10px var(--mono);
    padding: 2px 5px;
    background: var(--paper-2);
    color: var(--ink-3);
    border-radius: 3px;
    margin-inline-start: 2px;
  }
}

/* --- DIALOGS (settings / names / scoreboard / modal) --- */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  max-inline-size: none;
  max-block-size: none;
}

dialog::backdrop {
  background: oklch(0 0 0 / 40%);
  backdrop-filter: blur(2px);
}

.settings-dialog[open],
.names-dialog[open],
.modal-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100dvw;
  block-size: 100dvh;
  max-inline-size: 100dvw;
  max-block-size: 100dvh;
  inset: 0;
  background: transparent;
}

.settings-panel,
.names-panel,
.modal-box {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px oklch(0 0 0 / 18%);
  inline-size: min(480px, 92dvw);
  max-block-size: 86dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-header,
.names-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--rule);
}

.settings-title,
.names-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.settings-close,
.names-close {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

.settings-section {
  padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--rule);

  &:last-child { border-block-end: none; }
}

.settings-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: 6px;
  font-size: 13px;

  & kbd { margin-inline-start: auto; }
  & .toggle-switch { flex-shrink: 0; }
  &:has(.toggle-switch) kbd { margin-inline-start: auto; margin-inline-end: var(--s-2); }
}

.settings-label {
  color: var(--ink);
  font-weight: 500;
  flex: 1;
  min-inline-size: 0;
}

.settings-action {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  inline-size: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: start;
  font-size: 13px;
  font-weight: 500;

  & kbd { margin-inline-start: auto; }
  & .settings-arrow { color: var(--ink-3); font-size: 16px; }

  &:hover .settings-arrow { color: var(--accent); }
}

.settings-reset-btn {
  inline-size: 100%;
  padding: 10px var(--s-3);
  background: transparent;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-s);
  color: var(--ink-2);
  font: 500 12px var(--sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: border-color 0.15s, color 0.15s;

  &:hover { border-color: var(--red); color: var(--red); }
  & kbd { margin-inline-start: auto; }
}

/* --- SEG-CONTROL (Søjle / Tabel) --- */
.seg-control {
  display: inline-flex;
  background: var(--paper-2);
  border-radius: var(--r-s);
  padding: 3px;
  margin-block-start: 8px;
  gap: 2px;
}

.seg-btn {
  border: none;
  background: transparent;
  color: var(--ink-3);
  font: 500 12px var(--sans);
  padding: 6px 12px;
  border-radius: calc(var(--r-s) - 2px);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;

  &.active {
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 1px 2px oklch(0 0 0 / 6%);
  }
}

/* --- TOGGLE-SWITCH — se public/components.css --- */

/* --- MODAL --- */
.modal-box {
  padding: var(--s-5);
  inline-size: min(400px, 92dvw);
  gap: var(--s-3);

  & h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  & p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-2);
  }
}

.modal-actions {
  display: flex;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  justify-content: flex-end;

  & .btn {
    inline-size: auto;
    block-size: 40px;
    padding-inline: var(--s-4);
    font-size: 13px;
  }
}

.btn-muted {
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);

  &:hover { background: var(--paper-3); color: var(--ink); border-color: var(--ink-3); }
}

.btn-red {
  background: var(--red);
  color: var(--paper);

  &:hover { background: oklch(from var(--red) calc(l - 0.04) c h); }
}

/* --- NAMES LIST --- */
.names-content {
  overflow: auto;
  padding: var(--s-3) var(--s-5);
  flex: 1;
}

.names-group {
  margin-block-end: var(--s-4);

  &:last-child { margin-block-end: 0; }
}

.names-group-head {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-block-end: var(--s-2);
  padding-block-end: 4px;
  border-block-end: 1px solid var(--rule);
}

.names-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.names-chip {
  font-size: 13px;
  color: var(--ink);
  padding: 4px 10px;
  background: var(--paper-2);
  border-radius: var(--r-full);
  border: 1px solid var(--rule);
}

/* --- SCOREBOARD --- */
.scoreboard-loading {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-3);
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.scoreboard-list {
  display: flex;
  flex-direction: column;
}

.scoreboard-row {
  display: grid;
  grid-template-columns: 2.5em 1fr auto;
  gap: var(--s-3);
  align-items: center;
  padding: 10px 0;
  border-block-end: 1px solid var(--rule);
  font-size: 14px;

  &:last-child { border-block-end: none; }
}

.scoreboard-rank {
  font: 700 14px var(--mono);
  color: var(--ink-3);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.scoreboard-row.top1 .scoreboard-rank { color: var(--amber); }
.scoreboard-row.top2 .scoreboard-rank { color: var(--ink-2); }
.scoreboard-row.top3 .scoreboard-rank { color: var(--ink-3); }

.scoreboard-name {
  color: var(--ink);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scoreboard-score {
  font: 500 12px var(--mono);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --- KBD (keyboard hint badges) --- */
kbd {
  font: 500 10px var(--mono);
  padding: 2px 6px;
  background: var(--paper-2);
  color: var(--ink-3);
  border-radius: 3px;
  border: 1px solid var(--rule-2);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* --- SKELETON --- */
.skeleton {
  background: linear-gradient(90deg,
    var(--paper-2) 0%,
    var(--paper-3) 50%,
    var(--paper-2) 100%);
  background-size: 200% 100%;
  border-radius: var(--r-s);
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-text { block-size: 1em; }

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- MØRK BAGGRUND (dark mode for presenter — valgfri) --- */
body.dark-mode {
  background: oklch(0.16 0.02 260);
  color: oklch(0.93 0.01 80);
}

body.dark-mode .results-container,
body.dark-mode .results-topbar {
  background: oklch(0.16 0.02 260);
}

body.dark-mode {
  --ink:    oklch(0.95 0.01 80);
  --ink-2:  oklch(0.75 0.01 80);
  --ink-3:  oklch(0.58 0.01 80);
  --ink-4:  oklch(0.40 0.01 80);
  --paper:  oklch(0.16 0.02 260);
  --paper-2: oklch(0.21 0.02 260);
  --paper-3: oklch(0.26 0.02 260);
  --rule:   oklch(0.28 0.02 260);
  --rule-2: oklch(0.34 0.02 260);
}

/* --- FULLSCREEN (fokus-mode: skjul controls som standard) --- */
body.fullscreen .results-topbar { display: none; }

/* =============================================================================
   Test-tagning (elev) — test.html
   ============================================================================= */

.test-container {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  max-inline-size: 720px;
  margin-inline: auto;
  inline-size: 100%;
  padding: var(--s-4) var(--s-5);
  background: var(--paper);
}

.test-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--rule);
  margin-block-end: var(--s-5);
}

.test-leave-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-s);
  transition: color 0.15s, background 0.15s;

  &:hover { color: var(--ink); background: var(--paper-2); }
}

.test-topbar-code {
  font: 700 14px var(--mono);
  color: var(--accent);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.test-topbar-step,
.test-topbar-timer {
  font: 500 12px var(--mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.test-topbar-timer {
  color: var(--ink);
  font-weight: 600;
}

.test-topbar-spacer { flex: 1; }

.extra-time-badge {
  font: 500 10px var(--mono);
  padding: 3px 8px;
  background: oklch(from var(--amber) l c h / 12%);
  color: var(--amber);
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.connection-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--s-3);
  background: oklch(from var(--amber) l c h / 8%);
  border: 1px solid oklch(from var(--amber) l c h / 25%);
  color: var(--amber);
  border-radius: var(--r-m);
  font-size: 13px;
  margin-block-end: var(--s-3);
}

.focus-warning {
  padding: 10px var(--s-3);
  background: oklch(from var(--red) l c h / 8%);
  border: 1px solid oklch(from var(--red) l c h / 25%);
  color: var(--red);
  border-radius: var(--r-m);
  font-size: 13px;
  margin-block-end: var(--s-3);
  text-align: center;
}

/* Test lobby */
.test-lobby {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-5);
  gap: var(--s-4);
}

.test-lobby-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.024em;
  color: var(--ink);
  text-wrap: balance;
  max-inline-size: 22ch;
}

.test-lobby-subtitle {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  &::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: var(--accent);
    animation: pulse-dot 1.6s ease-in-out infinite;
  }
}

.test-lobby-code {
  font: 700 clamp(72px, 15vw, 140px) var(--mono);
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.extra-time-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--s-4);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
  margin-block-start: var(--s-3);
  transition: border-color 0.15s;

  &:hover { border-color: var(--accent); }

  & input { accent-color: var(--accent); }
}

/* Test content (question card) */
.test-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.test-question-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.test-question-points {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.test-question-text {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}

.locked-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--s-3);
  background: oklch(from var(--amber) l c h / 10%);
  color: var(--amber);
  border: 1px solid oklch(from var(--amber) l c h / 25%);
  border-radius: var(--r-m);
  font-size: 12px;
  line-height: 1.4;
}

.test-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.test-options button,
.test-option-btn {
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-l);
  padding: 14px 16px;
  font-size: 14px;
  font-family: var(--sans);
  color: var(--ink);
  text-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  inline-size: 100%;

  &:hover { border-color: var(--ink-3); }
  &:disabled { cursor: not-allowed; opacity: 0.55; }

  &.selected {
    border-color: var(--accent);
    background: oklch(from var(--accent) l c h / 7%);
  }
}

.test-freetext {
  inline-size: 100%;
  min-block-size: 160px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
  line-height: 1.5;

  &:focus { border-color: var(--accent); }
}

.test-freetext-counter {
  font: 500 10px var(--mono);
  color: var(--ink-3);
  letter-spacing: 0.08em;
  text-align: end;
  margin-block: 4px 0;
  text-transform: uppercase;
}

/* Submitted state */
.test-submitted {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-6);

  & h2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--ink);
  }

  & p { color: var(--ink-3); font-size: 14px; }
}

.test-submitted-check {
  inline-size: 56px;
  block-size: 56px;
  color: var(--accent);
  margin-block-end: var(--s-2);
}

/* Navigation bar (bund) */
.test-nav {
  position: sticky;
  inset-block-end: 0;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-4);
  background: linear-gradient(to bottom, transparent, var(--paper) 40%);
  margin-block-start: auto;
}

.test-nav-prev,
.test-nav-next,
.test-submit-btn {
  flex: 1;
  block-size: 44px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  background: transparent;
  color: var(--ink);
  font: 600 13px var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;

  &:hover:not(:disabled) { border-color: var(--ink-3); background: var(--paper-2); }
  &:disabled { opacity: 0.35; cursor: not-allowed; }
}

.test-nav-next,
.test-submit-btn {
  background: var(--accent);
  color: var(--paper);
  border-color: transparent;

  &:hover:not(:disabled) {
    background: oklch(from var(--accent) calc(l - 0.04) c h);
    border-color: transparent;
  }
}

.test-nav-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-inline-size: 180px;
}

.test-nav-dots .dot,
.test-nav-dots button {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--rule-2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;

  &.answered { background: var(--accent); }
  &.active {
    background: var(--accent);
    transform: scale(1.3);
  }

  &:hover { transform: scale(1.3); }
}

/* Submit confirmation dialog */
dialog#submitDialog {
  border: 1px solid var(--rule);
  padding: var(--s-5);
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px oklch(0 0 0 / 18%);
  color: var(--ink);
  inline-size: min(400px, 92dvw);
  max-inline-size: min(400px, 92dvw);

  &::backdrop {
    background: oklch(0 0 0 / 40%);
    backdrop-filter: blur(2px);
  }

  & h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--ink);
  }

  & p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
}

/* =============================================================================
   Test-results (lærerens dashboard for en test)
   ============================================================================= */

.results-lobby {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-6);
  gap: var(--s-4);
  min-block-size: 70dvh;
}

.lobby-logo-accent { color: var(--accent); }

.results-lobby-code {
  font: 700 clamp(80px, 18vw, 180px) var(--mono);
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
}

.results-lobby-count {
  font: 500 13px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.results-topbar-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-inline-start: var(--s-2);
}

.results-topbar-spacer { flex: 1; }

.results-topbar-meta,
.results-topbar-timer {
  font: 500 12px var(--mono);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.results-topbar-timer {
  color: var(--ink);
  font-weight: 600;
}

/* form-card — general content block */
.form-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: var(--s-4);
}

/* student table (live dashboard) */
.student-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 13px;

  & th, & td {
    padding: 10px var(--s-3);
    text-align: start;
    border-block-end: 1px solid var(--rule);
  }

  & th {
    font: 500 10px var(--mono);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: var(--paper-2);
  }

  & tr:last-child td { border-block-end: none; }

  & td { color: var(--ink); }

  & .status-submitted { color: var(--accent); font-weight: 600; }
  & .status-online { color: var(--ink-2); }
  & .status-offline { color: var(--ink-3); }
}

/* Question timeline (spørgsmålsplan) */
.question-timeline {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.question-timeline .tl-item {
  padding: 6px 10px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-s);
  font: 500 11px var(--mono);
  color: var(--ink-3);

  &.active {
    border-color: var(--accent);
    background: oklch(from var(--accent) l c h / 8%);
    color: var(--accent);
  }
}

/* Results controls bar (teacher dashboard) */
.results-controls {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px;
  background: oklch(from var(--paper) l c h / 95%);
  backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  box-shadow: 0 8px 24px oklch(0 0 0 / 8%);
  max-inline-size: 720px;
  margin-inline: auto;
  z-index: 30;
}

.extend-time-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-full);
  font: 500 12px var(--sans);
  color: var(--amber);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;

  &:hover { background: oklch(from var(--amber) l c h / 10%); border-color: var(--amber); }
}

/* Stop test dialog */
dialog#stopDialog,
dialog#submitDialog {
  border: 1px solid var(--rule);
  padding: var(--s-5);
  background: var(--paper);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 50px oklch(0 0 0 / 18%);
  color: var(--ink);
  inline-size: min(400px, 92dvw);
  max-inline-size: min(400px, 92dvw);

  &::backdrop {
    background: oklch(0 0 0 / 40%);
    backdrop-filter: blur(2px);
  }

  & h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--ink);
  }

  & p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
}

/* Dark mode (via body.dark class — test/results) */
body.dark {
  background: oklch(0.16 0.02 260);
  --ink:    oklch(0.95 0.01 80);
  --ink-2:  oklch(0.75 0.01 80);
  --ink-3:  oklch(0.58 0.01 80);
  --ink-4:  oklch(0.40 0.01 80);
  --paper:  oklch(0.16 0.02 260);
  --paper-2: oklch(0.21 0.02 260);
  --paper-3: oklch(0.26 0.02 260);
  --rule:   oklch(0.28 0.02 260);
  --rule-2: oklch(0.34 0.02 260);
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}