/* Shared tokens (type scale, spacing, radius, color palette, --bg) are in /rolig.css */
:root {
  --accent: var(--green);
  --accent-hover: oklch(from var(--green) calc(l - 0.05) c h);
  --accent-subtle: oklch(from var(--green) l c h / 10%);
  --green-hover: oklch(from var(--green) calc(l - 0.05) c h);
  --green-subtle: oklch(from var(--green) l c h / 10%);
  --green-light: oklch(from var(--green) l c h / 10%);
  --green-glow: transparent;
  --card: var(--paper);
  --card-raised: var(--paper);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --muted: var(--ink-3);
  --border: var(--rule);
  --border-subtle: var(--rule);
  --input-bg: var(--paper);
  --glass-bg: var(--paper);
  --glass-bg-hover: var(--paper-2);
  --glass-border: var(--rule);
  --glass-blur: none;
  --glass-inset: none;
  --input-inset: none;
  --shadow-xs: var(--shadow-s);
  --shadow-sm: var(--shadow-s);
  --shadow: var(--shadow-m);
  --shadow-hover: var(--shadow-hover);
  --shadow-glow: 0 0 0 2px oklch(from var(--green) l c h / 20%);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;
}
/* CLS prevention */
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--space-2xl);
}
/* Fjern focus-outline ved mus-klik */
:focus:not(:focus-visible) { outline: none; }
/* Focus-visible: only on keyboard navigation (Tab) */
:focus-visible {
  outline: 2px solid oklch(0.72 0.19 155 / 50%);
  outline-offset: 2px;
}
/* --- Base (reset + body foundation is in /rolig.css) --- */
body {
  min-block-size: 100dvh;
  padding-block: 2rem;
  padding-inline: 1.5rem;
  line-height: 1.6;
  font-size: var(--step-0);
  -moz-osx-font-smoothing: grayscale;
}
body:has(.page) { padding: 0; }
/* Results-side */
html:has(.results-container) { overflow: hidden; }
h1 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  text-align: center;
  margin-block-end: var(--space-2xs);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
}
/* --- Text selection --- */
::selection {
  background: oklch(from var(--green) calc(l + 0.18) calc(c * 0.5) h);
  color: oklch(0.15 0 0);
}
/* --- Entry animation --- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.join-section, .vote-section.visible, .name-card, .confirmation {
  animation: fade-up var(--duration-slow) var(--ease-out) both;
}
.btn-red { background: var(--red); }
.btn-red:hover { background: color-mix(in oklch, var(--red) 85%, black); }
/* Layout-varianter */
.btn-full {
  inline-size: 100%;
  display: block;
  text-align: center;
}
/* --- Loading-state for knapper --- */
.btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn.loading::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 20px;
  block-size: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid oklch(1 0 0 / 30%);
  border-block-start-color: oklch(1 0 0);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.btn-muted.loading::after {
  border-color: oklch(0.55 0.04 260 / 30%);
  border-block-start-color: var(--muted);
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* --- Edit notice (editing existing poll) --- */
.create-layout .edit-notice {
  font-weight: 600;
  color: var(--green);
  margin-block-end: 1rem;
  align-items: center;
  gap: 0.5rem;
  display: none !important;
  background: oklch(from var(--green) l c h / 6%);
  border: none;
  border-inline-start: 3px solid var(--green);
  border-radius: 0;
  padding: 0.5rem 0.75rem;
  font-size: var(--step--1);
}
/* --- Onboarding hint (3-step guide) --- */
.create-layout .onboarding-hint {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-block: var(--s-3);
  padding-inline: var(--s-4);
  margin-block-end: var(--s-4);
  font: 500 12px var(--mono);
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-s);
}
.onboarding-step {
  font: inherit;
  color: inherit;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.onboarding-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 18px;
  border-radius: var(--r-full);
  background: oklch(from var(--accent) l c h / 12%);
  color: var(--accent);
  font: 600 11px var(--mono);
}
.create-layout .slide-editor > .form-group {
  margin-block-end: 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
  position: relative;
  z-index: 1;
}
.form-group label {
  display: block;
  font-weight: 700;
  margin-block-end: var(--space-s);
  font-size: var(--step--2);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.form-group input, .form-group select, .form-group textarea {
  inline-size: 100%;
  padding: var(--space-s) var(--space-m);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--card);
  color: var(--text);
  font-size: var(--step-0);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent);
}
.form-group textarea {
  resize: none;
  overflow: hidden;
  line-height: 1.5;
  min-block-size: 3rem;
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
/* --- Type-toggle (Flervalg / Fritekst) --- */
.create-layout .type-toggle {
  display: inline-flex;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
}
.create-layout .type-btn {
  cursor: pointer;
  font: 500 12px var(--mono);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  padding: 4px 12px;
  background: transparent;
  color: var(--ink-3);
  transition: all var(--duration-fast);
  flex: 0;
}
.create-layout .type-btn:hover:not(.active) {
  color: var(--ink);
  background: var(--paper-3);
}
.create-layout .type-btn.active {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule-2);
  box-shadow: var(--shadow-s);
}
/* --- Diagram type selector (create form) --- */
.create-layout .diagram-type-picker {
  display: flex;
  background: transparent;
  padding: 0;
  gap: var(--s-2);
}
.create-layout .diagram-pick {
  flex: 1;
  cursor: pointer;
  font: 500 12px var(--mono);
  text-align: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-m);
  background: var(--paper-2);
  color: var(--ink-2);
  transition: all var(--duration-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
}
.create-layout .diagram-pick:hover:not(.active) {
  background: var(--paper-3);
  color: var(--ink);
}
.create-layout .diagram-pick.active {
  background: oklch(from var(--accent) l c h / 12%);
  border-color: oklch(from var(--accent) l c h / 35%);
  color: var(--accent);
}
.diagram-pick:hover { border-color: var(--green); }
/* --- Svarliste i formularen --- */
.create-layout .answer-list {
  display: flex;
  flex-direction: column;
  counter-reset: answer-counter;
  gap: 0.5rem;
}
.create-layout .answer-row {
  display: flex;
  align-items: center;
  counter-increment: answer-counter;
  gap: 0.625rem;
}
.create-layout .answer-row .remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  min-inline-size: 44px;
  min-block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: var(--radius-s);
  transition: all 0.2s ease;
  color: var(--muted);
  opacity: 0.4;
  font-size: var(--step-0);
}
.create-layout .answer-row .remove-btn:hover {
  background: oklch(0.63 0.24 27 / 10%);
  color: var(--red);
  opacity: 1;
}
/* --- Custom preset dropdown --- */
.preset-dropdown {
  position: relative;
  display: inline-block;
}
.create-layout .preset-trigger {
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  justify-content: space-between;
  transition: all 0.15s;
  inline-size: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: var(--radius-full);
  background: light-dark(oklch(0 0 0 / 4%), oklch(1 0 0 / 5%));
  padding: 0.4rem 0.85rem;
  font-size: var(--step--1);
}
.create-layout .preset-trigger:hover {
  border-color: oklch(from var(--green) l c h / 40%);
  background: var(--green-light);
  color: var(--text);
}
.preset-arrow {
  font-size: var(--step--2);
  transition: transform 0.2s;
  color: var(--muted);
}
.preset-trigger.open .preset-arrow { transform: rotate(90deg); }
.create-layout .preset-menu {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 0.35rem);
  z-index: 200;
  max-block-size: 300px;
  overflow-y: auto;
  padding: 0.3rem;
  animation: dropdown-in 0.15s ease-out;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.75 0.02 155) transparent;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-l);
  box-shadow: 0 12px 40px oklch(0 0 0 / 12%), 0 4px 12px oklch(0 0 0 / 6%);
}
.preset-menu::-webkit-scrollbar { width: 6px; }
.preset-menu::-webkit-scrollbar-track { background: transparent; }
.preset-menu::-webkit-scrollbar-thumb {
  background: oklch(0.75 0.02 155 / 40%);
  border-radius: var(--radius-full);
}
.preset-menu::-webkit-scrollbar-thumb:hover {
  background: oklch(0.72 0.19 155 / 60%);
}
.preset-group-label {
  font-size: var(--step--2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.4rem 0.6rem 0.15rem;
  margin-block-start: 0.15rem;
}
.preset-group-label:first-child { margin-block-start: 0; }
.preset-option {
  display: block;
  inline-size: 100%;
  padding: 0.35rem 0.6rem 0.35rem 1.2rem;
  border: none;
  border-radius: var(--radius-s);
  background: transparent;
  font-family: inherit;
  font-size: var(--step--1);
  color: var(--text);
  text-align: start;
  cursor: pointer;
  transition: background 0.1s;
}
.preset-option:hover {
  background: oklch(0.72 0.19 155 / 10%);
  color: var(--green);
}
/* Skjul den originale select */
.preset-select { display: none; }
/* --- Vend om-knap --- */
.create-layout .vend-om-btn {
  padding: 0.4rem 0.75rem;
  font-size: var(--step--1);
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  margin-block-end: 0.5rem;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--paper-2);
  transition: all 0.2s ease;
}
.create-layout .vend-om-btn:hover {
  border-color: oklch(from var(--green) l c h / 40%);
  background: var(--green-light);
  color: var(--green);
}
/* --- Talskala-indstillinger --- */
.num-scale-settings {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
  padding: 0.75rem;
  background: var(--input-bg);
  border-radius: var(--radius-s);
}
.num-scale-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  inline-size: 100%;
}
.num-scale-row label {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.num-scale-row input[type="number"] {
  inline-size: 70px;
  padding: 0.5rem;
  border: none;
  border-block-end: 2px solid var(--border);
  border-radius: 0;
  font-size: var(--step-0);
  text-align: center;
  font-family: inherit;
  background: transparent;
  color: var(--text);
  transition: border-color 0.15s ease-out;
}
.num-scale-row input[type="number"]:focus {
  outline: none;
  border-block-end-color: var(--green);
}
.create-layout .add-answer-btn {
  cursor: pointer;
  margin-block-start: 0.5rem;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  inline-size: auto;
  border: 1px dashed light-dark(oklch(0 0 0 / 10%), oklch(1 0 0 / 10%));
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  transition: all 0.2s ease;
}
.create-layout .add-answer-btn:hover {
  border-color: oklch(from var(--green) l c h / 40%);
  background: oklch(from var(--green) l c h / 12%);
  color: var(--green);
}
.slide-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.slide-preview-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: var(--radius-s);
  font-size: var(--step-0);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}
.slide-preview-num {
  background: var(--green);
  color: white;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step--1);
  font-weight: 700;
  flex-shrink: 0;
}
.slide-preview-content {
  flex: 1;
  overflow: hidden;
  min-inline-size: 0;
}
.slide-preview-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slide-preview-options {
  font-size: var(--step--1);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-block-start: 0.15rem;
}
.slide-preview-type {
  color: var(--muted);
  font-size: var(--step--1);
  flex-shrink: 0;
}
.slide-remove {
  background: none;
  border: none;
  color: var(--red);
  font-size: var(--step-2);
  cursor: pointer;
  padding: 0 0.2rem;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s ease-out;
}
.slide-remove:hover { opacity: 1; }
/* --- Navnefelt (elev) --- */
.name-section { text-align: center; }
.name-card {
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
}
.name-card h2 {
  font-size: var(--step--1);
  margin-block-end: 1rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.name-input {
  inline-size: 100%;
  border-block-end: 2px solid var(--border);
  font-family: inherit;
  color: var(--text);
  margin-block-end: 1.5rem;
  outline: none;
  transition: border-color 0.15s ease-out;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  padding: 0.75rem 1rem;
  font-size: var(--step-1);
  text-align: center;
  border-block-end-width: 1.5px;
}
.name-input:focus {
  border-color: var(--green);
  border-block-end-color: var(--green);
}
.name-input::placeholder { color: oklch(0.75 0.02 240); }
/* --- Stemme-sektion --- */
.vote-section { display: none; }
.vote-section.visible { display: block; }
.question-text {
  text-align: center;
  margin-block-end: var(--space-l);
  line-height: 1.4;
  color: var(--text);
  text-wrap: balance;
  text-box: trim-both cap alphabetic;
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vote-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vote-btn {
  min-block-size: 48px;
  font-size: var(--step-1);
  font-weight: 500;
  cursor: pointer;
  text-align: start;
  transition: all var(--duration-base) var(--ease-out);
  font-family: inherit;
  color: var(--text);
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (hover: hover) {
  .vote-btn:hover:not(:disabled) {
    border-color: oklch(from var(--green) l c h / 40%);
    background: var(--green-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px oklch(0 0 0 / 6%);
  }
}
.vote-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}
.vote-btn.selected {
  color: var(--green);
  font-weight: 600;
  border-color: var(--green);
  background: var(--green-light);
  box-shadow: 0 0 0 2px var(--green-light);
}
/* Stagger vote-btns */
.vote-options .vote-btn:nth-child(1) { animation-delay: 0ms; }
.vote-options .vote-btn:nth-child(2) { animation-delay: 60ms; }
.vote-options .vote-btn:nth-child(3) { animation-delay: 120ms; }
.vote-options .vote-btn:nth-child(4) { animation-delay: 180ms; }
.vote-options .vote-btn:nth-child(5) { animation-delay: 240ms; }
.vote-options .vote-btn:nth-child(6) { animation-delay: 300ms; }
.vote-options .vote-btn:nth-child(7) { animation-delay: 360ms; }
.vote-options .vote-btn {
  animation: fade-up var(--duration-slow) var(--ease-out) both;
}
/* --- Fritekst-input (elev) --- */
.freetext-input-wrap { margin-block-start: 0.5rem; }
.freetext-input {
  inline-size: 100%;
  min-block-size: 120px;
  padding: 1rem;
  font-size: var(--step-1);
  font-family: inherit;
  color: var(--text);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease-out;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
}
.freetext-input:focus { border-color: var(--green); }
.freetext-counter {
  text-align: end;
  color: var(--muted);
  font-size: var(--step--1);
  margin: 0.25rem 0 0.75rem;
}
/* --- Confirmation --- */
.confirmation {
  text-align: center;
  padding: 3rem 1rem;
  display: none;
}
.confirmation.visible {
  display: block;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.check-circle {
  margin-block-end: 1rem;
  display: inline-block;
}
.check-circle svg {
  inline-size: 56px;
  block-size: 56px;
}
.check-circle .check-bg {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  opacity: 0;
  stroke: var(--green);
}
.check-circle .check-mark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  opacity: 0;
  stroke: var(--green);
}
.check-circle.animate .check-bg {
  opacity: 1;
  animation: drawCircle 0.5s ease forwards;
}
.check-circle.animate .check-mark {
  opacity: 1;
  animation: drawCheck 0.3s 0.4s ease forwards;
}
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}
.confirmation h2 {
  font-size: var(--step-2);
  margin-block-end: var(--space-xs);
}
.confirmation p { color: var(--muted); }
.confirm-slide-info {
  margin-block-start: 0.75rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.confirm-question {
  margin-block-start: 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--input-bg);
  border-radius: var(--radius-m);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}
.confirm-waiting {
  margin-block-start: 1rem;
  color: var(--muted);
  font-size: var(--step-0);
}
.waiting-dots .dots {
  display: inline-block;
  inline-size: 1.5em;
  text-align: start;
  vertical-align: bottom;
  overflow: hidden;
}
.waiting-dots .dots::after {
  content: '...';
  display: inline-block;
  animation: dots-reveal 1.5s steps(3) infinite;
}
@keyframes dots-reveal {
  0%   { width: 0; }
  100% { width: 1.5em; }
}
/* --- Fejlbesked (overlay mellem subtitle og kodefelt) --- */
.error-msg {
  background: oklch(0.97 0.01 27);
  color: var(--red);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-m);
  font-size: var(--step-0);
  font-weight: 600;
  text-align: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  margin-block: 0;
  max-block-size: 0;
  overflow: visible;
}
.error-msg.visible {
  opacity: 1;
  pointer-events: auto;
}
/* --- Footer --- */
.footer {
  text-align: center;
  color: var(--muted);
  font-size: var(--step--1);
  margin-block-start: 3rem;
  opacity: 0.6;
}
.footer a {
  color: inherit;
  text-decoration: none;
}
.footer a:hover {
  color: var(--green);
  opacity: 1;
}

/* ==========================================
   RESULTATSIDE (lærerskærm)
   ========================================== */
/* Body override: remove top-padding + scrollbar on results page */
html:has(.results-container), body:has(.results-container) {
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline: 0;
  background: var(--paper-2);
  color: var(--ink);
}
html:has(.results-container)::-webkit-scrollbar, body:has(.results-container)::-webkit-scrollbar {
  display: none;
}
.results-container {
  max-inline-size: 100%;
  margin-inline: auto;
  padding-inline: 0;
  padding-block-end: 0;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}
/* Results-view: flex-kolonne der fylder HELE viewport — aldrig scroll */
.results-view {
  display: flex;
  flex-direction: column;
  block-size: 100dvh;
  overflow: hidden;
}
/* Topbar: fast i toppen, skalerer med indhold */
.results-topbar {
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
  margin-block-end: 0;
  flex-shrink: 0;
  background: var(--glass-bg);
  border: none;
  border-block-end: 1px solid var(--glass-border);
  border-radius: 0;
  margin: 0;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  block-size: 56px;
  box-shadow: none;
}
/* Content area: fills ALL remaining space between topbar and control bar */
.results-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-block-size: 0;
  overflow: hidden;
  padding-inline: clamp(2rem, 5vw, 8rem);
  padding-block-start: clamp(1.5rem, 4vh, 3rem);
}
/* Choice slides: center diagram vertically in the available space */
.results-view.center-content .results-content { justify-content: flex-start; }
/* Fritekst/navne: tillad scroll kun her */
.results-content.scrollable {
  overflow-y: auto;
  justify-content: flex-start !important;
}
/* Klikkbar link i topbar: dida.dk/p1234 */
.topbar-link {
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  transition: opacity 0.15s;
}
.topbar-link:hover { opacity: 0.7; }
/* Klikkbar link i lobby: dida.dk/p1234 */
.lobby-link {
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.15s;
}
.lobby-link:hover { opacity: 0.7; }
/* dida.dk logo i lobby */
.lobby-logo {
  font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
}
.lobby-logo-dot { color: var(--green); }
.lobby-link .lobby-code {
  color: var(--green);
  font-weight: 900;
  font-size: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  letter-spacing: 0.05em;
}
/* --- Lobby: large code screen before start --- */
.lobby {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-block-size: 80vh;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}
.lobby-code {
  font-size: clamp(100px, 20vw, 220px);
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--green);
}
.lobby-count {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text);
  margin-block-end: 1rem;
}
.lobby-count-num {
  color: var(--green);
  font-size: 1.2em;
}
.lobby-waiting {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: var(--step-1);
  margin-block-end: 2rem;
}
.lobby-dot-pulse {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse-dot 1.5s infinite;
}
.btn-lobby-start {
  font-size: var(--step-2);
  padding: 1rem 2.5rem;
  min-block-size: 56px;
  border-radius: var(--radius-l);
  background: var(--accent);
  color: oklch(1 0 0);
  box-shadow: var(--shadow-s);
  border: none;
  transition: all 0.2s ease;
}
.lobby-qr-box {
  margin-block: var(--s-3);
  display: flex;
  justify-content: center;
  align-items: center;
}
.lobby-qr-box img {
  inline-size: clamp(140px, 18vmin, 220px);
  block-size: clamp(140px, 18vmin, 220px);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-m);
  background: oklch(1 0 0);
  padding: var(--s-2);
}
.topbar-code-badge {
  display: inline-block;
  margin-inline-start: 0.6rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--green-light);
  color: var(--green);
  font-size: var(--step-0);
  font-weight: 800;
  letter-spacing: 0.1em;
  transition: color 0.15s ease-out, background 0.15s ease-out;
}
.topbar-code-badge.lukket {
  color: var(--red);
  background: oklch(0.63 0.24 27 / 10%);
}
.topbar-spacer { flex: 1; }
.topbar-count {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.topbar-count strong {
  color: var(--green);
  font-size: var(--step-1);
}
/* Question text (separate bar below topbar) */
.results-question-bar {
  view-transition-name: question-text;
  overflow-wrap: break-word;
  padding-block: var(--space-s);
  flex-shrink: 0;
}
/* --- Keyboard shortcut badges --- */
kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  margin-inline-start: 0.3em;
  font-size: 0.7em;
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  background: oklch(0 0 0 / 8%);
  border-radius: var(--radius-s);
  vertical-align: middle;
  opacity: 0.5;
  line-height: 1.4;
}
body.dark kbd { background: oklch(1 0 0 / 10%); }
/* --- Slide-navigation med progress-dots --- */
.slide-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-l);
}
/* Remove margin when slide-nav is inside topbar */
.results-topbar .slide-nav { margin-block-end: 0; }
.slide-nav .btn {
  padding: 0.3rem 0.6rem;
  min-block-size: 32px;
  font-size: var(--step--1);
  border-radius: var(--radius-s);
}
/* Skjul pile-knapper i topbar (keyboard shortcuts virker stadig) */
.results-topbar .slide-arrow-btn {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}
.results-topbar .slide-counter {
  white-space: nowrap;
  min-inline-size: 2.5em;
  text-align: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
}
.slide-counter.end-bump { animation: counter-shake 0.32s ease-out; }
@keyframes counter-shake {
  0%, 100% { transform: translateX(0); color: var(--muted); }
  20% { transform: translateX(-3px); color: var(--accent); }
  60% { transform: translateX(3px); color: var(--accent); }
}
/* --- ECharts diagram --- */
.chart-wrap {
  view-transition-name: chart-area;
  position: relative;
  flex: 1;
  min-block-size: 0;
}
/* --- Tabel-view --- */
.table-wrap {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.results-table {
  inline-size: auto;
  min-inline-size: 40%;
  max-inline-size: 100%;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: clamp(0.95em, 2.2vw, 2em);
}
.results-table th {
  text-align: start;
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: clamp(0.4em, 0.8vw, 0.8em) clamp(0.5em, 1vw, 1.2em);
  border-block-end: 2px solid var(--border);
  border-block-end-color: var(--glass-border);
}
.results-table td {
  padding: clamp(0.5em, 1vw, 1em) clamp(0.5em, 1vw, 1.2em);
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
  border-block-end-color: var(--glass-border);
}
.results-table tbody tr:hover { background: var(--green-light); }
.table-dot {
  display: inline-block;
  inline-size: clamp(10px, 1.2vw, 16px);
  block-size: clamp(10px, 1.2vw, 16px);
  border-radius: 50%;
}
/* Kolonne-bredder: alt content-sized, bar er fast lille */
.table-col-color { width: 36px; }
.table-col-count { width: 55px; }
.table-col-pct { width: 50px; }
.table-col-bar { width: clamp(70px, 8vw, 130px); }
.table-count {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-pct {
  text-align: right;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-answer {
  line-height: 1.35;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .table-answer {
    white-space: normal;
  }
}
.table-bar-bg {
  inline-size: 100%;
  block-size: clamp(12px, 1.3vw, 20px);
  overflow: hidden;
  background: var(--paper-2);
  border-radius: var(--radius-full);
}
.table-bar-fill {
  block-size: 100%;
  transition: width 0.4s ease;
  border-radius: var(--radius-full);
}
/* Dark mode tabel */
body.dark .results-table th {
  color: var(--muted);
  border-color: var(--border);
}
body.dark .results-table td { border-color: var(--border); }
body.dark .results-table tbody tr:hover { background: oklch(1 0 0 / 3%); }
body.dark .table-bar-bg { background: var(--border); }
/* --- Indstillingspanel --- */
.settings-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-inline-size: min(420px, 90vw);
}
.settings-dialog::backdrop {
  background: oklch(0 0 0 / 40%);
}
.settings-panel {
  padding: 0.75rem 1.2rem 1rem;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px oklch(0 0 0 / 12%), 0 4px 12px oklch(0 0 0 / 6%);
}
.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 0.5rem;
  margin-block-end: 0.25rem;
  border-block-end: 1px solid var(--border);
  border-block-end-color: var(--glass-border);
}
.settings-title {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text);
}
.settings-close {
  background: none;
  border: none;
  font-size: var(--step-2);
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-s);
  transition: background 0.15s;
  outline: none;
}
.settings-close:hover {
  background: var(--input-bg);
  color: var(--text);
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 24px 48px;
  align-items: center;
  padding: 0.5rem 0;
  gap: 0.3rem;
}
.settings-label {
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--text);
}
/* kbd i settings-rows og settings-actions */
.settings-row > kbd, .settings-action > kbd {
  font-size: var(--step--2);
  padding: 0.1em 0.35em;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-family: inherit;
  color: var(--muted);
  justify-self: center;
}
/* --- Segmented control (diagram type selector) --- */
.seg-control {
  display: flex;
  gap: 2px;
  background: var(--paper-2);
  border: none;
  border-radius: var(--radius-m);
  padding: 0.25rem;
}
.seg-btn {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius-s);
  transition: all 0.2s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: var(--glass-bg);
  color: var(--green);
  box-shadow: var(--shadow-sm);
}
/* --- Settings sections --- */
.settings-section {
  padding: 0.15rem 0;
  inline-size: 100%;
}
.settings-action {
  display: grid;
  grid-template-columns: 1fr 24px 48px;
  align-items: center;
  gap: 0.3rem;
  inline-size: 100%;
  padding: 0.6rem 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  text-align: start;
  transition: opacity 0.15s ease;
}
.settings-action:hover { opacity: 0.7; }
.settings-reset-btn {
  inline-size: 100%;
  padding: 0.6rem 1rem;
  border: 1.5px solid oklch(0.63 0.24 27 / 30%);
  border-radius: var(--radius-m);
  background: oklch(0.63 0.24 27 / 8%);
  color: oklch(0.55 0.22 27);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-start: 0.5rem;
}
.settings-reset-btn:hover {
  background: oklch(0.63 0.24 27 / 15%);
  border-color: oklch(0.63 0.24 27 / 50%);
}
.settings-reset-btn kbd {
  font-size: var(--step--2);
  padding: 0.1em 0.35em;
  background: oklch(0.63 0.24 27 / 10%);
  border: 1px solid oklch(0.63 0.24 27 / 20%);
  border-radius: var(--radius-s);
  color: oklch(0.55 0.22 27);
}
.settings-arrow {
  font-size: var(--step-2);
  color: var(--muted);
  line-height: 1;
  justify-self: center;
}
.total-votes { display: none !important; }
.total-votes.pulse { animation: pulseVotes 0.6s ease; }
@keyframes pulseVotes {
  0%   { transform: scale(1); color: var(--muted); }
  30%  { transform: scale(1.05); color: var(--green); }
  100% { transform: scale(1); color: var(--muted); }
}
/* --- Skeleton loading --- */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--input-bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-s);
}
.skeleton-text {
  block-size: 1.5rem;
  display: inline-block;
}
/* --- Navne-dialog (modal: hvem stemte hvad) --- */
.names-dialog {
  border-radius: var(--radius-xl);
  padding: 0;
  max-inline-size: min(500px, 90vw);
  inline-size: 90vw;
  max-block-size: 70vh;
  margin: auto;
  color: inherit;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 40px oklch(0 0 0 / 12%), 0 4px 12px oklch(0 0 0 / 6%);
}
.names-dialog::backdrop {
  background: oklch(0 0 0 / 40%);
  -webkit-
}
.names-panel {
  display: flex;
  flex-direction: column;
  max-block-size: 70vh;
}
.names-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-l) var(--space-xl) var(--space-m);
  flex-shrink: 0;
}
.names-title {
  font-size: var(--step-1);
  font-weight: 700;
}
.names-close {
  background: none;
  border: none;
  font-size: var(--step-3);
  cursor: pointer;
  color: var(--muted);
  padding: var(--space-xs);
  line-height: 1;
  border-radius: var(--radius-s);
  transition: background 0.15s;
}
.names-close:hover { background: var(--input-bg); }
.names-content {
  padding: 0 var(--space-xl) var(--space-l);
  overflow-y: auto;
  flex: 1;
  min-block-size: 0;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.75 0.02 155) transparent;
}
.names-content::-webkit-scrollbar { width: 6px; }
.names-content::-webkit-scrollbar-track { background: transparent; }
.names-content::-webkit-scrollbar-thumb {
  background: oklch(0.75 0.02 155 / 40%);
  border-radius: var(--radius-full);
}
.names-content::-webkit-scrollbar-thumb:hover {
  background: oklch(0.72 0.19 155 / 60%);
}
.name-group { padding: 0.6rem 0; }
.name-group + .name-group {
  border-block-start: 1px solid var(--border);
  border-block-start-color: var(--glass-border);
}
.name-group-title {
  font-weight: 700;
  font-size: var(--step-0);
  margin-block-end: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.name-group-names {
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.5;
}
.names-pending {
  flex-shrink: 0;
  padding: var(--space-m) var(--space-xl) var(--space-l);
  border-block-start: 1px solid var(--border);
}
/* --- Svar med navn (fritekst) --- */
.answer-name {
  font-weight: 700;
  color: var(--green);
  margin-inline-end: 0.4rem;
}
.answer-name::after { content: ':'; }
/* --- Scoreboard (quiz-resultater) --- */
.scoreboard-dialog {
  max-inline-size: min(520px, 92vw);
  max-block-size: 85vh;
  overflow: hidden;
}
/* ─── Quiz-done dialog: aggregate stats + optional scoreboard ─── */
.quiz-done-dialog {
  max-inline-size: min(580px, 92vw);
  max-block-size: 85vh;
  overflow: hidden;
}
.quiz-done-stats {
  display: flex;
  gap: var(--s-3);
  justify-content: space-around;
  padding-block: var(--s-4);
  padding-inline: var(--s-3);
  border-block-end: 1.5px solid var(--rule);
  margin-block-end: var(--s-3);
}
.qd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  flex: 1;
}
.qd-stat .qd-num {
  font: 800 32px var(--sans);
  color: var(--ink);
  line-height: 1;
}
.qd-stat .qd-num.qd-pct { color: var(--accent); }
.qd-stat label {
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-4);
}
.quiz-done-scoreboard {
  padding-inline: var(--s-3);
  padding-block-end: var(--s-3);
}
.scoreboard-loading, .scoreboard-tom {
  text-align: center;
  padding: var(--space-xl) var(--space-m);
  color: var(--muted);
  font-size: var(--step-0);
}
.scoreboard-tabel {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);
}
.scoreboard-tabel th {
  text-align: start;
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: var(--space-xs) var(--space-s);
  border-block-end: 2px solid var(--border);
}
.scoreboard-tabel td {
  padding: var(--space-s) var(--space-s);
  border-block-end: 1px solid var(--border);
  vertical-align: middle;
}
.scoreboard-tabel tbody tr:last-child td { border-block-end: none; }
.sb-col-rank {
  inline-size: 3rem;
  text-align: center;
  font-weight: 700;
  font-size: var(--step-1);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.sb-col-navn { font-weight: 500; }
.sb-col-score {
  inline-size: 4.5rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.sb-col-score strong { font-size: 1.1em; }
.sb-total {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9em;
}
/* Top 3 highlighting */
.sb-top-1 td { background: oklch(0.80 0.16 75 / 8%); }
.sb-top-2 td { background: oklch(0.75 0.05 240 / 6%); }
.sb-top-3 td { background: oklch(0.70 0.14 40 / 5%); }
/* Top 3 markeres på selve tallet med guld/sølv/bronze + ekstra vægt. Reglerne
   har stået her hele tiden, men havde ingen virkning, så længe cellen indeholdt
   en emoji: et emoji-glyf tegner sine egne farver og arver ikke `color`. */
.sb-top-1 .sb-col-rank { color: oklch(0.70 0.16 75); }
.sb-top-2 .sb-col-rank { color: oklch(0.60 0.06 240); }
.sb-top-3 .sb-col-rank { color: oklch(0.55 0.12 40); }
.sb-top-1 .sb-col-rank, .sb-top-2 .sb-col-rank, .sb-top-3 .sb-col-rank {
  font-weight: 800;
}
@media (min-width: 1200px) {
  .scoreboard-dialog {
    max-inline-size: 560px;
  }
}
@media (min-width: 1200px) {
  .scoreboard-tabel {
    font-size: var(--step-1);
  }
}
@media (min-width: 1200px) {
  .scoreboard-tabel td {
    padding: var(--space-m) var(--space-s);
  }
}
/* --- Freetext result list (teacher) — with CSS counter numbering --- */
.freetext-list {
  flex: 1;
  min-block-size: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  counter-reset: freetext;
}
.freetext-answer {
  counter-increment: freetext;
  padding: 0.9rem 1.1rem 0.9rem 2.8rem;
  font-size: var(--step-0);
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
}
.freetext-answer::before {
  content: counter(freetext);
  position: absolute;
  inset-inline-start: 0.9rem;
  inset-block-start: 0.85rem;
  font-size: var(--step--1);
  font-weight: 700;
  color: var(--muted);
  opacity: 0.5;
}
.freetext-empty {
  text-align: center;
  color: var(--muted);
  padding: 2rem;
  font-style: italic;
}
.freetext-del-btn {
  position: absolute;
  inset-inline-end: var(--s-2);
  inset-block-start: var(--s-2);
  inline-size: 28px;
  block-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  color: var(--ink-3);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  opacity: 0.4;
}
.freetext-del-btn:hover, .freetext-del-btn:focus-visible {
  opacity: 1;
  color: var(--red);
  background: oklch(from var(--red) l c h / 10%);
  border-color: oklch(from var(--red) l c h / 20%);
}
.freetext-del-btn .hi {
  inline-size: 14px;
  block-size: 14px;
}
.freetext-answer:hover .freetext-del-btn { opacity: 0.8; }
/* --- Results Toast Notification --- */
.results-toast {
  position: fixed;
  inset-block-end: var(--s-6);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-3);
  padding-inline: var(--s-5);
  border-radius: var(--r-m);
  font: 500 13px var(--sans);
  box-shadow: var(--shadow-m);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.results-toast.results-toast-vis {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* --- Kontrolbar (professionel pill-stil, sticky bund) --- */
.controls-bar {
  position: fixed;
  inset-block-end: var(--s-4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px;
  background: oklch(from var(--paper) l c h / 95%);
  border: 1px solid var(--rule);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-hover);
  z-index: 100;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
  pointer-events: none;
}
.ctrl-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding-block: 6px;
  padding-inline: 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font: 500 12px var(--mono);
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--duration-fast);

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

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

  & kbd {
    font: inherit;
    font-size: 10px;
    padding-inline: 4px;
    padding-block: 1px;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-s);
    color: var(--ink-3);
  }
}
/* Dark mode settings — bruger custom properties */
body.dark .settings-panel {
  background: oklch(0.18 0.02 260 / 85%);
  border-color: oklch(1 0 0 / 10%);
}
body.dark .settings-header, body.dark .settings-section + .settings-section, body.dark .settings-row + .settings-row {
  border-color: var(--border);
}
body.dark .settings-title, body.dark .settings-label, body.dark .settings-action .settings-label {
  color: var(--text);
}
body.dark .settings-close { color: var(--muted); }
body.dark .settings-close:hover {
  background: var(--border);
  color: var(--text);
}
body.dark .settings-label kbd {
  background: var(--border);
  border-color: oklch(0.38 0.02 240);
  color: var(--muted);
}
body.dark .toggle-track { background: oklch(0.38 0.02 240); }
body.dark .settings-arrow { color: oklch(0.48 0.02 240); }
body.dark .seg-control {
  border-color: var(--border);
  background: oklch(1 0 0 / 4%);
}
body.dark .seg-btn { color: var(--muted); }
body.dark .seg-btn:hover { color: var(--text); }
body.dark .seg-btn.active {
  box-shadow: 0 1px 4px oklch(0 0 0 / 20%);
  background: oklch(1 0 0 / 8%);
  color: var(--green);
}
/* Vises/skjules via hidden-attribut af connectSSE() i /lib/sse-connect.js */
.sse-status {
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-end: 0.5rem;
  flex-shrink: 0;
}
.sse-status[hidden] { display: none; }
.sse-dot {
  display: inline-block;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--amber);
  margin-inline-end: 0.4rem;
  vertical-align: middle;
  animation: pulse-dot 1s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.empty-state-icon {
  font-size: var(--step-3);
  margin-block-end: 0.5rem;
  opacity: 0.5;
}
.create-layout .settings-select-b {
  padding: var(--space-2xs) var(--space-s);
  color: var(--text);
  font-family: inherit;
  font-size: var(--step--1);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--card);
}
/* Collapsible import/export */
.create-layout .ie-card .collapsible-toggle {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-block-start: 1px solid var(--border);
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0.875rem 1.25rem;
  inline-size: 100%;
  text-align: start;
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.create-layout .ie-card .collapsible-toggle:hover {
  background: light-dark(oklch(0 0 0 / 3%), oklch(1 0 0 / 3%));
  color: var(--text);
}
.create-layout .ie-card .collapsible-arrow {
  transition: transform 0.2s;
  margin-inline-start: auto;
  font-size: var(--step--2);
}
.collapsible-toggle.open .collapsible-arrow { transform: rotate(90deg); }
.create-layout .ie-card .collapsible-body {
  animation: fade-in 0.15s ease-out;
  padding: 0 1.25rem 1.25rem;
}
.create-layout .ie-card .ie-buttons {
  flex-wrap: wrap;
  margin-block-end: var(--space-s);
  display: flex;
  gap: 1.25rem;
}
.create-layout .ie-card .ie-buttons .btn {
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}
.create-layout .ie-card .ie-buttons .btn:hover {
  border-color: var(--green);
  background: oklch(0.72 0.19 155 / 6%);
  color: var(--green);
}
/* CTA zone */
.create-layout .cta-zone {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: var(--space-l);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
}
.draft-link { text-align: center; }
.create-layout .draft-link .link-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: oklch(0.55 0.02 240 / 40%);
  padding: 0.5rem;
  color: var(--muted);
  transition: color 0.2s;
}
.create-layout .draft-link .link-btn:hover {
  text-decoration-color: currentColor;
  color: var(--green);
}
.import-area {
  margin-block-start: var(--space-m);
  animation: fade-in 0.2s ease-out;
}
.create-layout .import-textarea {
  inline-size: 100%;
  min-block-size: 120px;
  padding: var(--space-m);
  font-family: 'Courier New', monospace;
  font-size: var(--step--1);
  line-height: 1.5;
  resize: vertical;
  color: var(--text);
  transition: border-color 0.2s ease;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: light-dark(oklch(0.98 0.005 240), oklch(1 0 0 / 4%));
  box-shadow: var(--input-inset);
}
.create-layout .import-textarea:focus {
  outline: none;
  border-color: var(--green);
}
.import-error {
  margin-block-start: var(--space-s);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background: oklch(0.63 0.24 27 / 10%);
  color: oklch(0.55 0.22 27);
  font-size: var(--step--1, 0.85rem);
  font-weight: 500;
}
.import-preview {
  margin-block-start: var(--space-s);
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: oklch(0.72 0.19 155 / 8%);
  font-size: var(--step--1, 0.85rem);
}
.import-preview .preview-slide { padding: var(--space-xs) 0; }
.import-preview .preview-slide:not(:last-child) {
  border-block-end: 1px solid oklch(0.72 0.19 155 / 15%);
  margin-block-end: var(--space-xs);
  padding-block-end: var(--space-xs);
}
.import-preview .preview-type {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: var(--radius-full);
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase;
  background: oklch(0.72 0.19 155 / 15%);
  color: oklch(0.45 0.15 155);
  margin-inline-end: var(--space-s);
}
.import-preview .preview-q {
  font-weight: 600;
  color: var(--text);
}
.import-preview .preview-answers {
  color: var(--muted);
  font-size: 0.85em;
  margin-block-start: 2px;
}
.import-actions {
  display: flex;
  gap: var(--space-s);
  justify-content: flex-end;
  margin-block-start: var(--space-m);
}
/* Topbar: skjul navigation-dots, behold kode */
body.results-hidden .slide-nav { display: none; }
/* Remove backdrop-filter so position:fixed works inside topbar */
body.results-hidden .results-topbar {
  -webkit-
}
body.results-hidden .results-question-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: var(--step-3);
  text-align: center;
  z-index: 50;
  padding-inline: var(--space-xl);
  max-inline-size: none;
}
/* Counter: hide the fixed one in the middle, use topbar-count instead */
body.results-hidden .total-votes { display: none !important; }
body.results-hidden .sse-status, body.results-hidden .footer { display: none; }
/* Note: .settings-dialog is intentionally NOT hidden — users must still be
   able to open settings in fokus-mode (via I-shortcut or settings button). */
body.fokus-mode .controls-bar, body.fokus-mode .footer {
  display: none !important;
}
/* body.dark forces dark color-scheme, so light-dark() automatically picks dark values */
body.dark {
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}
body.dark .type-btn.active { background: oklch(0.75 0.18 163 / 12%); }
body.dark .vote-btn {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
body.dark .vote-btn:hover {
  border-color: var(--green);
  background: oklch(0.75 0.18 163 / 8%);
}
body.dark .my-poll-item { background: oklch(1 0 0 / 5%); }
body.dark .my-poll-item:hover { background: oklch(0.75 0.18 163 / 10%); }
body.dark .preset-select {
  color: var(--muted);
  border-block-end-color: var(--border);
}
body.dark .error-msg {
  background: oklch(0.22 0.04 27);
  box-shadow: 0 4px 16px oklch(0 0 0 / 30%);
}
body.dark .skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--card) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ==========================================
   OPRET-MODE: To-kolonne layout
   ========================================== */
.create-layout {
  max-inline-size: none;
  margin: 0;
  padding: 0;
  animation: fadeIn 0.3s ease;
  position: relative;
  z-index: 1;
}
.create-columns {
  max-inline-size: 1040px;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block-start: var(--space-l);
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  align-items: start;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.create-col-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Formularen i opret-mode er altid synlig */
.create-layout .create-form {
  margin-block-start: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}
.create-col-left, .create-col-right { min-width: 0; }
.create-col-right {
  position: sticky;
  inset-block-start: calc(56px + 1rem);
}
.slide-panel {
  padding: 1.5rem;
  min-block-size: 200px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
}
.slide-panel h3 {
  font-size: var(--step--1);
  margin-block-end: 1rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.slide-panel .slide-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.slide-panel-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: var(--step-0);
  line-height: 1.6;
}
.slide-panel-hint {
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-start: 0.75rem;
  opacity: 0.6;
}
/* --- Drag & drop on slides --- */
.slide-drag-handle {
  cursor: grab;
  color: var(--muted);
  opacity: 0.3;
  font-size: var(--step-0);
  flex-shrink: 0;
  user-select: none;
  transition: opacity 0.2s;
}
.slide-drag-handle:active { cursor: grabbing; }
.slide-preview-item:hover {
  box-shadow: var(--shadow);
  border-color: var(--green);
}
.slide-preview-item.editing {
  border: 2px solid var(--green);
  background: oklch(0.75 0.18 163 / 4%);
}
.slide-preview-item.dragging { opacity: 0.4; }
.slide-preview-item.drag-over {
  border-block-start: 2px solid var(--green);
  margin-block-start: -2px;
}
.slide-preview-item:hover .slide-drag-handle { opacity: 0.7; }
/* --- Opdater-knap (edit-mode) --- */
#addSlideBtn.editing {
  background: var(--green);
  color: oklch(1 0 0);
  border-color: var(--green);
}
.toggle-arrow {
  transition: transform 0.2s;
  color: var(--muted);
  font-size: var(--step--2);
}
/* --- Elev lobby-venter --- */
.lobby-wait {
  text-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow);
}
.lobby-wait-icon {
  font-size: var(--step-3);
  margin-block-end: 1rem;
}
.lobby-wait h2 {
  font-size: var(--step-2);
  margin-block-end: 0.5rem;
  color: var(--green);
}
.lobby-wait p {
  color: var(--muted);
  font-size: var(--step-0);
}
/* --- Focus-visible for keyboard users --- */
.vote-btn:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}
/* --- Freetext answer: max visual length with expand --- */
.freetext-answer.truncated {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
  overflow: hidden;
}
.freetext-answer.truncated .freetext-text-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-inline-size: 0;
}
.freetext-show-more {
  background: none;
  border: none;
  color: var(--green);
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-inline-start: var(--space-xs);
  white-space: nowrap;
}
.freetext-show-more:hover { text-decoration: underline; }
.freetext-show-all-wrap {
  text-align: center;
  padding: 0.5rem;
}
/* --- Custom modal --- */
.modal-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-inline-size: min(420px, 90vw);
  overflow: visible;
}
.modal-dialog::backdrop {
  background: light-dark(oklch(0 0 0 / 45%), oklch(0 0 0 / 60%));
}
.modal-box {
  padding: 2rem;
  inline-size: 100%;
  text-align: center;
  overflow: visible;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px oklch(0 0 0 / 12%);
}
.modal-box h3 {
  font-size: var(--step-2);
  margin-block-end: 0.5rem;
}
.modal-box p {
  color: var(--muted);
  font-size: var(--step-0);
  margin-block-end: 1.5rem;
  line-height: 1.5;
}
.modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.modal-actions .btn { min-width: 120px; }
/* --- Undo-toast --- */
.undo-toast {
  position: fixed;
  inset-block-end: 2rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--bg);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-s);
  font-size: var(--step-0);
  font-weight: 500;
  box-shadow: 0 4px 20px oklch(0 0 0 / 30%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 1rem;
  animation: slideUpToast 0.3s ease;
}
@keyframes slideUpToast {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.undo-toast button {
  background: none;
  border: none;
  color: var(--green);
  font-family: inherit;
  font-size: var(--step-0);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
/* --- Progress-dots for elev --- */
.progress-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-block-start: 1rem;
}
.progress-dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;
  background: var(--border);
  transition: background-color 0.15s ease-out, transform 0.15s ease-out;
}
.progress-dot.done { background: var(--green); }
.progress-dot.active {
  background: transparent;
  box-shadow: inset 0 0 0 2.5px var(--green);
  transform: scale(1.2);
}
/* --- Elev connection-indikator --- */
.connection-status {
  text-align: center;
  font-size: var(--step--1);
  color: var(--amber);
  margin-block-start: var(--s-2);
  padding-block: var(--s-1);
  padding-inline: var(--s-3);
  transition: opacity 0.15s ease-out;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
}
.connection-status[hidden] { display: none; }
.connection-status:not([hidden]), .connection-status.disconnected {
  opacity: 1;
  color: var(--amber);
}
/* --- Forlad-knap (deltager) --- */
.leave-btn {
  outline: none;
  appearance: none;
  font-family: var(--font-body);
  padding-block: var(--space-2xs);
  padding-inline: 0;
  margin-block-end: var(--space-s);
  display: block;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 500;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color 0.2s;
}
.leave-btn:hover { color: var(--red); }
/* --- View Transitions (slide-skift) --- */
::view-transition-old(question-text), ::view-transition-old(chart-area) {
  animation: 0.15s ease-out both fade-out;
}
::view-transition-new(question-text), ::view-transition-new(chart-area) {
  animation: 0.2s ease-out 0.1s both fade-in;
}
@keyframes fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(4px); }
}
@media (prefers-contrast: more) {
  :root {
    --border: light-dark(oklch(0.60 0 0), oklch(0.50 0 0));
    --muted: light-dark(oklch(0.30 0.02 240), oklch(0.80 0.02 240));
  }
}
@media (prefers-contrast: more) {
  .btn, .vote-btn, .ctrl-pill {
    border: 2px solid currentColor;
  }
}
@media (forced-colors: active) {
  .vote-btn, .btn {
    border: 2px solid ButtonText;
  }
}
@supports (field-sizing: content) {
  .freetext-input {
    field-sizing: content;
    min-block-size: 3lh;
  }
}
@supports (corner-shape: squircle) {
  .create-form, .slide-panel, .modal-box, .settings-panel, .name-card, .vote-btn {
    corner-shape: squircle;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   ELEVSIDE — baggrund og stemmekort
   ═══════════════════════════════════════════════════════════════════════ */
/* Dot-grid baggrund (elevside + builder, ikke results) */
body:not(:has(.results-container)) {
  background: var(--paper-2);
  color: var(--ink);
  overflow-x: hidden;
}
body:not(:has(.results-container))::before {
  display: none;
}
/* Container/page shall sit above dot-grid */
.page {
  position: relative;
  z-index: 1;
}
.vote-btn .vote-letter {
  flex-shrink: 0;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-full);
  background: var(--green-light);
  color: var(--green);
  font-size: var(--step--1);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.vote-btn.selected .vote-letter {
  background: var(--green);
  color: oklch(1 0 0);
}
/* ─── Send-svar knap: gradient ─── */
.freetext-input-wrap .btn {
  inline-size: 100%;
  background: var(--accent);
  color: oklch(1 0 0);
  box-shadow: var(--shadow-s);
}

/* ═══════════════════════════════════════════════════════════════════════
   OPRET-FORMULAR — kort, svarmuligheder og import/eksport
   ═══════════════════════════════════════════════════════════════════════ */
/* Remove body-padding when builder is active */
body.create-mode { padding: 0; }
/* Answer card needs higher z-index so preset dropdown appears in front of diagram type */
.create-layout .slide-editor > .form-group:has(.answer-list) { z-index: 2; }
/* ─── Type-toggle form-group: ingen kort-styling ─── */
.create-layout .slide-editor > .form-group:has(.type-toggle) {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
.create-layout .slide-editor > .form-group:has(.type-toggle) label {
  display: none;
}
.create-layout .type-btn:hover:not(.active) {
  color: var(--text);
  background: light-dark(oklch(1 0 0 / 50%), oklch(1 0 0 / 5%));
  border: none;
}
/* ─── Underline inputs in create form (no boxed borders) ─── */
.create-layout .form-group input, .create-layout .form-group textarea {
  border: none;
  border-radius: 0;
  border-block-end: 1.5px solid var(--border);
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
  padding-block: var(--space-s);
  font-size: var(--step--1);
  transition: border-color 0.15s;
  color: var(--text);
  font-family: var(--font-body);
  inline-size: 100%;
}
.create-layout .form-group input:focus, .create-layout .form-group textarea:focus {
  border-block-end-color: var(--accent);
  box-shadow: none;
  outline: none;
}
.create-layout .answer-row::before {
  content: counter(answer-counter, upper-alpha);
  flex-shrink: 0;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-full);
  background: oklch(from var(--green) l c h / 12%);
  color: var(--green);
  font-size: var(--step--1);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-layout .answer-row input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--step--1);
  padding-block: var(--space-xs);
  padding-inline: 0;
  border: none;
  border-radius: 0;
  border-block-end: 1.5px solid var(--border);
  background: transparent;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s;
}
.create-layout .answer-row input::placeholder { color: var(--muted); }
.create-layout .answer-row input:focus {
  border-block-end-color: var(--accent);
  box-shadow: none;
}
/* Svar-tools: Skabeloner + Quiz-mode side by side */
.answer-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-block-end: 0.75rem;
}
/* Quiz-mode: pill-knap (matcher Skabeloner-knap) */
.quiz-trigger.active {
  background: var(--green-light);
  color: var(--green);
  border-color: oklch(from var(--green) l c h / 30%);
}
/* Korrekt-knapper skjult som default, vises kun i quiz-mode */
.create-layout .answer-row .correct-btn {
  display: none;
  flex-shrink: 0;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--glass-border);
  background: transparent;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  font-family: inherit;
}
.create-layout .answer-row .correct-btn:hover {
  opacity: 1;
  border-color: var(--green);
  color: var(--green);
  background: oklch(from var(--green) l c h / 8%);
}
/* Show correct buttons when quiz mode is active */
.quiz-mode .correct-btn { display: flex !important; }
.create-layout .answer-row .correct-btn.active {
  opacity: 1;
  background: var(--green);
  color: oklch(1 0 0);
  border-color: var(--green);
  box-shadow: 0 2px 8px oklch(from var(--green) l c h / 25%);
}
.create-layout .diagram-pick .diagram-icon { display: block; }
.create-layout .diagram-pick:hover:not(.active) {
  color: var(--text);
  background: light-dark(oklch(1 0 0 / 50%), oklch(1 0 0 / 5%));
  border-color: var(--glass-border);
}
/* ─── Gem i: pill-group ─── */
.gem-pill-group {
  display: inline-flex;
  border-radius: var(--radius-full);
  background: light-dark(oklch(0 0 0 / 5%), oklch(1 0 0 / 5%));
  border: none;
  padding: 3px;
  gap: 2px;
}
.gem-pill {
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: var(--radius-full);
  font-size: var(--step--1);
  font-weight: 600;
  font-family: inherit;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gem-pill:hover { color: var(--text); }
.gem-pill.active {
  background: var(--green);
  color: oklch(1 0 0);
  box-shadow: 0 2px 8px oklch(from var(--green) l c h / 30%);
}
/* ─── CTA-knapper: gradient ─── */
.create-layout .cta-zone .btn-green, .create-layout .cta-zone #startBtn {
  background: var(--accent);
  color: oklch(1 0 0);
  box-shadow: var(--shadow-s);
  border: none;
  font-weight: 700;
  transition: all var(--duration-fast);
}
.create-layout .cta-zone .btn-green:hover, .create-layout .cta-zone #startBtn:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-m);
  transform: translateY(-1px);
}
/* ─── Add question button: glass accent ─── */
.create-layout #addSlideBtn {
  border: 1.5px dashed light-dark(oklch(0 0 0 / 8%), oklch(1 0 0 / 8%));
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--step--1);
  transition: all 0.2s ease;
}
.create-layout #addSlideBtn:hover {
  border-color: oklch(from var(--green) l c h / 40%);
  background: var(--green-light);
  color: var(--green);
}
/* ─── Import/Eksport card ─── */
.create-layout .ie-card {
  background: var(--glass-bg);
  border: none;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  overflow: hidden;
}
.create-layout .ie-card .ie-buttons .btn svg { opacity: 0.5; }
.create-layout .ie-card .ie-buttons .btn:hover svg { opacity: 1; }
/* ─── Talskala settings: glass ─── */
.create-layout .num-scale-settings input {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: light-dark(oklch(0.98 0.005 240), oklch(1 0 0 / 4%));
}

/* ═══════════════════════════════════════════════════════════════════════
   RESULTATSIDE — topbar, quiz-tilstand og mørk tilstand
   ═══════════════════════════════════════════════════════════════════════ */
/* ─── Dot-grid and gradient on results page ─── */
body:has(.results-container) {
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline: 0;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.72 0.19 155 / 6%) 0%, transparent 60%), radial-gradient(ellipse at 80% 100%, oklch(0.72 0.19 155 / 4%) 0%, transparent 50%), var(--bg);
  background-attachment: fixed;
}
body:has(.results-container)::before {
  display: none;
}
/* ─── Slide-nav knapper (skjulte, men stadig i DOM): glass ─── */
.results-topbar .slide-nav .btn {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  transition: all 0.2s ease;
}
.results-topbar .slide-nav .btn:hover:not(:disabled) {
  border-color: oklch(from var(--green) l c h / 40%);
  background: var(--green-light);
  color: var(--green);
}
body.mouse-active .controls-bar {
  opacity: 1;
  pointer-events: auto;
}
@media (hover: none) {
  .controls-bar {
    opacity: 1;
    pointer-events: auto;
  }
}
.btn-lobby-start:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-m);
  transform: translateY(-1px);
}
/* ─── Mørk tilstand (projektor/smartboard) ─── */
body.dark,
body.dark-mode {
  --ink: oklch(0.95 0.01 240);
  --ink-2: oklch(0.80 0.01 240);
  --ink-3: oklch(0.60 0.015 240);
  --ink-4: oklch(0.40 0.015 240);
  --paper: oklch(0.18 0.015 255);
  --paper-2: oklch(0.14 0.015 255);
  --paper-3: oklch(0.22 0.018 255);
  --rule: oklch(0.26 0.015 255);
  --rule-2: oklch(0.32 0.015 255);
  --card: var(--paper);
  --card-raised: var(--paper-3);
  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --muted: var(--ink-3);
  --border: var(--rule);
  --border-subtle: var(--rule);
  --input-bg: var(--paper-2);
  --glass-bg: var(--paper);
  --glass-bg-hover: var(--paper-3);
  --glass-border: var(--rule);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: none;
  --shadow-hover: 0 8px 24px oklch(0 0 0 / 40%);
  color: var(--ink);
  background: var(--paper-2) !important;
}

body.dark .results-topbar,
body.dark-mode .results-topbar {
  background: oklch(from var(--paper) l c h / 95%);
  border-block-end-color: var(--rule);
}

body.dark .footer,
body.dark-mode .footer {
  background: transparent !important;
  border-block-start: 1px solid var(--rule);
  color: var(--ink-3);
}

body.dark .footer a,
body.dark-mode .footer a {
  color: var(--ink-3);
}

body.dark .controls-bar,
body.dark-mode .controls-bar {
  background: oklch(from var(--paper) l c h / 95%);
  border-color: var(--rule);
}

body.dark .ctrl-pill,
body.dark-mode .ctrl-pill {
  color: var(--ink-2);
}

body.dark .ctrl-pill:hover,
body.dark-mode .ctrl-pill:hover {
  background: var(--paper-3);
  color: var(--ink);
}

body.dark .ctrl-pill.ctrl-active,
body.dark-mode .ctrl-pill.ctrl-active {
  background: oklch(from var(--accent) l c h / 20%);
  border-color: oklch(from var(--accent) l c h / 50%);
  color: var(--accent);
}

body.dark .ctrl-pill kbd,
body.dark-mode .ctrl-pill kbd {
  background: var(--paper-3);
  border-color: var(--rule-2);
  color: var(--ink-3);
}
/* ─── Quiz-mode: facit-knap ─── */
.ctrl-facit.ctrl-active {
  background: oklch(from var(--accent) l c h / 12%) !important;
  border-color: oklch(from var(--accent) l c h / 30%) !important;
  color: var(--accent) !important;
}
/* ─── Quiz-mode: elev-feedback ─── */
.quiz-feedback {
  text-align: center;
  font-size: var(--step-1);
  font-weight: 700;
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-m);
  margin-block-start: var(--space-m);
  animation: fadeIn 0.3s ease;
}
.quiz-feedback-icon {
  font-size: 1.3em;
  margin-inline-end: 0.3em;
}
.quiz-feedback.quiz-correct {
  background: oklch(from var(--green) l c h / 12%);
  color: var(--green);
}
.quiz-feedback.quiz-wrong {
  background: oklch(from var(--red) l c h / 12%);
  color: var(--red);
}
.quiz-feedback.quiz-neutral {
  background: var(--paper-2);
  color: var(--muted);
}
/* First click on a quiz slide shows just the options; second click reveals
   distribution (counts/%/bars); third click reveals the correct answer.
   Layout MUST stay identical across all three states so the table doesn't
   jump horizontally — only visibility/color of cells changes. */
body.results-options-only .table-count, body.results-options-only .table-pct, body.results-options-only .table-bar-cell, body.results-options-only .results-table thead th.th-end, body.results-options-only .results-table thead th:last-child {
  visibility: hidden;
}
/* Reserve space for the ✓ icon on EVERY row (transparent placeholder)
   so revealing the correct answer doesn't shift the text horizontally.
   Only the correct row paints its ✓ visible; wrong rows keep the
   same spacing but with an invisible placeholder. */
.results-table .table-answer::before {
  content: '✓';
  color: transparent;
  font-weight: 900;
  margin-inline-end: 0.5em;
  font-size: 1.1em;
}
.results-table tr.quiz-correct .table-answer::before { color: var(--green); }
.results-table tr.quiz-correct {
  background: oklch(from var(--green) l c h / 22%);
}
.results-table tr.quiz-correct td {
  font-weight: 700;
  color: var(--ink);
}
.results-table tr.quiz-wrong { opacity: 0.35; }
body.dark .freetext-answer {
  background: oklch(1 0 0 / 5%);
  border-color: oklch(1 0 0 / 8%);
}
body.dark .names-dialog {
  background: oklch(0.18 0.02 260 / 85%);
  border-color: oklch(1 0 0 / 10%);
}
body.dark .sb-top-1 td { background: oklch(0.80 0.16 75 / 12%); }
body.dark .sb-top-2 td { background: oklch(0.75 0.05 240 / 10%); }
body.dark .sb-top-3 td { background: oklch(0.70 0.14 40 / 8%); }
/* Samme tre farver løftet i lyshed til mørk baggrund (projektor). Nødvendigt
   nu hvor placeringen ER tallet: bronze på L 0.55 forsvandt i det mørke. */
body.dark .sb-top-1 .sb-col-rank { color: oklch(0.85 0.15 75); }
body.dark .sb-top-2 .sb-col-rank { color: oklch(0.82 0.05 240); }
body.dark .sb-top-3 .sb-col-rank { color: oklch(0.75 0.12 40); }
/* ─── Responsiv: @media (max-width: 768px) ─── */
@media (max-width: 768px) {
  .create-columns {
    grid-template-columns: 1fr;
    padding-inline: 0.75rem;
    padding-block-start: var(--space-m);
    padding-block-end: 2rem;
    gap: 1rem;
  }
  .create-col-right { position: static; }
  .create-layout { max-width: 520px; }
  .create-layout .type-toggle, .create-layout .diagram-type-picker {
    padding: 0.2rem;
  }
}
/* ─── Responsiv: @media (max-width: 480px) ─── */
@media (max-width: 480px) {
  .table-col-bar, .table-bar-cell, .results-table thead th:nth-child(5) {
    display: none;
  }
  .results-table { font-size: var(--step-0); }
  .results-table td, .results-table th { padding: 0.5rem 0.4rem; }
  .table-answer {
    white-space: normal;
    max-inline-size: none;
  }
  .quiz-done-stats {
    gap: var(--s-2);
    padding-inline: var(--s-2);
  }
  .qd-stat .qd-num { font-size: 26px; }
  .scoreboard-dialog {
    max-inline-size: 96vw;
    max-block-size: 80vh;
  }
  .scoreboard-tabel td { padding: var(--space-s) var(--space-xs); }
  .sb-col-rank {
    inline-size: 2.5rem;
    font-size: var(--step-0);
  }
  .sb-col-score { width: 3.5rem; }
  body { padding: 1rem; }
  body.create-mode { padding: 0; }
  .results-question-bar {
    text-align: start;
    font-size: var(--step-0);
    padding-inline: 0;
  }
  kbd { display: none; }
  .slide-nav { gap: 0.5rem; }
  .create-form, .name-card { padding: 1.75rem 1.25rem; }
  .lobby-wait, .confirmation.visible, .name-card {
    padding: 1.5rem 1rem;
    border-radius: var(--radius-l);
  }
  .create-layout { max-width: none; }
  .create-columns {
    padding-inline: 0.5rem;
    padding-block-start: var(--space-s);
    padding-block-end: 2rem;
    gap: 0.75rem;
  }
  .create-layout .slide-editor > .form-group {
    padding: 0.875rem;
    border-radius: var(--radius-m);
  }
  .create-layout .cta-zone {
    padding: 0.875rem;
    border-radius: var(--radius-m);
  }
  .create-layout .settings-card {
    padding: var(--space-s);
    border-radius: var(--radius-m);
  }
  .create-layout .create-form {
    padding: 0;
    gap: 0.75rem;
  }
  .slide-panel {
    border-radius: var(--radius-m);
    padding: 0.75rem;
  }
  .create-layout .diagram-pick {
    flex-direction: row;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    font-size: var(--step--1);
  }
  .create-layout .answer-list { gap: 0.35rem; }
  .create-layout .answer-row::before {
    inline-size: 24px;
    block-size: 24px;
    font-size: var(--step--2);
  }
  .create-layout .form-group input, .create-layout .form-group textarea {
    padding-block: var(--space-xs);
    font-size: var(--step--1);
  }
  .create-layout .form-group label {
    font-size: var(--step--2);
    margin-block-end: var(--space-2xs);
  }
  .create-layout .add-answer-btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--step--1);
  }
  .create-layout .cta-zone .btn-green, .create-layout .cta-zone #startBtn {
    padding: 0.6rem 1rem;
    font-size: var(--step--1);
  }
  .create-layout #addSlideBtn {
    padding: 0.5rem 0.75rem;
    font-size: var(--step--1);
  }
  .create-layout .type-btn {
    padding: 0.3rem 0.75rem;
    font-size: var(--step--1);
  }
  .create-layout .preset-trigger {
    font-size: var(--step--1);
    padding: 0.3rem 0.6rem;
  }
  .create-layout .ie-card {
    padding: 0.875rem;
    border-radius: var(--radius-m);
  }
  .create-layout .onboarding-hint {
    padding: 0.75rem;
    border-radius: var(--radius-m);
  }
  .results-topbar {
    padding-inline: 0.75rem;
    block-size: 48px;
    gap: 0.5rem;
  }
  .lobby-link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .lobby-code {
    font-size: clamp(60px, 18vw, 100px);
    letter-spacing: 0.08em;
  }
  .results-content { padding-inline: 0.75rem; }
  .results-view.center-content .results-content {
    justify-content: flex-start;
    padding-block-start: 2rem;
  }
  .ctrl-pill {
    font-size: var(--step--1);
    padding: 0.35rem 0.65rem;
  }
}

/* ==========================================================================
   QUILL — teksteditor til spørgsmål
   ========================================================================== */
#pollQuillWrap .ql-toolbar.ql-snow {
  border: none;
  border-block-end: 1.5px solid var(--border);
  background: transparent;
  padding-inline: 0;
  font-family: var(--sans);
}
#pollQuillWrap .ql-toolbar.ql-snow .ql-stroke { stroke: var(--text); }
#pollQuillWrap .ql-toolbar.ql-snow .ql-fill { fill: var(--text); }
#pollQuillWrap .ql-toolbar.ql-snow .ql-picker-label {
  color: var(--text);
  font-family: var(--sans);
}
#pollQuillWrap .ql-toolbar.ql-snow button:hover .ql-stroke, #pollQuillWrap .ql-toolbar.ql-snow .ql-active .ql-stroke {
  stroke: var(--accent);
}
#pollQuillWrap .ql-toolbar.ql-snow button:hover .ql-fill, #pollQuillWrap .ql-toolbar.ql-snow .ql-active .ql-fill {
  fill: var(--accent);
}
#pollQuillWrap .ql-toolbar.ql-snow .ql-picker-label:hover {
  color: var(--accent);
}
#pollQuillWrap .ql-toolbar.ql-snow .ql-picker-options {
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
  font-family: var(--sans);
}
#pollQuillWrap .ql-toolbar.ql-snow button { border-radius: var(--r-s); }
#pollQuillWrap .ql-container.ql-snow {
  border: none;
  font-family: var(--font-body);
  font-size: var(--step-0);
}
#pollQuillWrap .ql-editor {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  background: transparent;
  color: var(--text);
  border-block-end: 1.5px solid var(--border);
  padding-inline: 0;
  padding-block: var(--space-xs);
  min-block-size: 80px;
}
#pollQuillWrap .ql-editor:focus {
  border-block-end-color: var(--accent);
  outline: none;
}
#pollQuillWrap .ql-editor.ql-blank::before {
  color: var(--muted);
  font-style: normal;
  inset-inline-start: 0;
}
#pollQuillWrap img {
  max-inline-size: 100%;
  max-block-size: 45dvh;
  block-size: auto;
  object-fit: contain;
  cursor: pointer;
  display: inline-block;
}
#pollQuillWrap .quill-extra-tools {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-block-start: 0.4rem;
}
#pollQuillWrap .quill-extra-tools .quill-hint {
  font-size: var(--step--1);
  color: var(--muted);
}
.question-text img {
  max-inline-size: 100%;
  max-block-size: 50dvh;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--radius-s);
  margin-block: var(--space-s);
}
.question-text p { margin-block-end: 0.5em; }
.question-text p:last-child { margin-block-end: 0; }
.results-question-bar img {
  max-inline-size: 100%;
  max-block-size: 50dvh;
  block-size: auto;
  object-fit: contain;
}
.results-question-bar p {
  margin: 0;
  display: inline;
}

/* =========================================================
   Billedstørrelser — virker i editor, elevvisning og resultatvisning
   ========================================================= */
#pollQuillWrap .ql-editor img.img-size-s, .question-text img.img-size-s, .results-question-bar img.img-size-s {
  max-inline-size: 25%;
}
#pollQuillWrap .ql-editor img.img-size-m, .question-text img.img-size-m, .results-question-bar img.img-size-m {
  max-inline-size: 50%;
}
#pollQuillWrap .ql-editor img.img-size-l, .question-text img.img-size-l, .results-question-bar img.img-size-l {
  max-inline-size: 100%;
}
/* Selected image in editor gets a ring */
#pollQuillWrap .ql-editor img.img-selected {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* =========================================================
   Flydende værktøjslinje til billedstørrelse
   ========================================================= */
.img-resize-toolbar {
  position: absolute;
  z-index: 20;
  display: none;
  gap: 0.2rem;
  padding: 0.3rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-hover);
  font: 600 11px var(--mono);
}
.img-resize-toolbar.visible { display: flex; }
.img-resize-toolbar button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-s);
  cursor: pointer;
  font: inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  min-inline-size: 32px;
}
.img-resize-toolbar button:hover { background: var(--input-bg); }
.img-resize-toolbar button.active {
  background: var(--green);
  color: white;
}
.img-resize-toolbar .sep {
  inline-size: 1px;
  background: var(--border);
  margin-inline: 0.1rem;
}

/* =========================================================
   Forhåndsvisnings-dialog — viser spørgsmålet som på storskærm
   ========================================================= */
.preview-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-inline-size: 95vw;
  max-block-size: 95dvh;
}
.preview-dialog::backdrop {
  background: light-dark(oklch(0 0 0 / 45%), oklch(0 0 0 / 70%));
}
.preview-dialog[open] {
  display: flex;
  flex-direction: column;
}
.preview-panel {
  background: var(--card);
  border-radius: var(--radius-l);
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-hover);
  inline-size: min(960px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-block-end: 1px solid var(--border);
  padding-block-end: 0.5rem;
}
.preview-title {
  font-size: var(--step-0);
  font-weight: 700;
}
.preview-close {
  background: none;
  border: none;
  font-size: var(--step-2);
  cursor: pointer;
  color: var(--muted);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-s);
  line-height: 1;
}
.preview-close:hover {
  background: var(--input-bg);
  color: var(--text);
}
.preview-stage {
  background: oklch(0.98 0.005 85);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 1.5rem 2rem;
  overflow-y: auto;
  max-block-size: 70dvh;
  text-align: center;
  font-size: clamp(1.1rem, 2.5vw, 2rem);
  font-weight: 900;
  line-height: 1.25;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.preview-stage img {
  max-inline-size: 100%;
  max-block-size: 50dvh;
  block-size: auto;
  object-fit: contain;
}
.preview-stage img.img-size-s { max-inline-size: 25%; }
.preview-stage img.img-size-m { max-inline-size: 50%; }
.preview-stage img.img-size-l { max-inline-size: 100%; }
.preview-stage p { margin: 0 0 0.4em; }
.preview-stage p:last-child { margin: 0; }
.preview-hint {
  font-size: var(--step--1);
  color: var(--muted);
  text-align: center;
  font-weight: 400;
}