/* --- Variables --- */
/* Shared tokens (type scale, spacing, radius, color palette, --bg) are in /rolig.css */
:root {
  /* Accent aliases (shared components use --accent) */
  --accent: var(--green);
  --accent-hover: oklch(0.65 0.19 163);
  --accent-subtle: oklch(from var(--green) calc(l + 0.22) calc(c * 0.25) h);

  /* Poll-specific color variants */
  --green-hover: oklch(0.65 0.19 163);
  --green-subtle: oklch(from var(--green) calc(l + 0.22) calc(c * 0.25) h);

  /* Semantiske overflader */
  --card: light-dark(oklch(1 0 0), oklch(0.19 0.015 255));
  --card-raised: light-dark(oklch(1 0 0), oklch(0.22 0.018 255));
  --text: light-dark(oklch(0.15 0.02 260), oklch(0.95 0.01 240));
  --text-secondary: light-dark(oklch(0.35 0.02 240), oklch(0.75 0.015 240));
  --muted: light-dark(oklch(0.50 0.02 240), oklch(0.60 0.02 240));
  --border: light-dark(oklch(0.91 0.008 240), oklch(0.26 0.015 255));
  --border-subtle: light-dark(oklch(0 0 0 / 4%), oklch(1 0 0 / 6%));
  --input-bg: light-dark(oklch(0.98 0.005 240), oklch(0.20 0.02 250));

  /* Shadows */
  --shadow-alpha: light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 20%));
  --shadow-xs: 0 1px 3px light-dark(oklch(0 0 0 / 6%), oklch(0 0 0 / 18%));
  --shadow-sm: 0 4px 12px light-dark(oklch(0 0 0 / 7%), oklch(0 0 0 / 22%));
  --shadow: 0 4px 20px light-dark(oklch(0 0 0 / 9%), oklch(0 0 0 / 30%));
  --shadow-hover: 0 8px 32px light-dark(oklch(0 0 0 / 13%), oklch(0 0 0 / 40%));
  --shadow-glow: 0 0 0 3px oklch(from var(--green) l c h / 20%);
  --glass-inset: inset 0 1px 0 light-dark(oklch(1 0 0 / 60%), oklch(1 0 0 / 8%));
  --input-inset: inset 0 2px 4px light-dark(oklch(0 0 0 / 6%), oklch(0 0 0 / 15%));

  /* Animation */
  --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.25s;
  --duration-slow: 0.4s;
}

/* ─── Inline SVG-ikoner ─── */
.i {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
}
.i-lg {
  inline-size: 1.5em;
  block-size: 1.5em;
}

/* 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-height: 100vh;
  padding-block: 2rem;
  padding-inline: 1.5rem;
  line-height: 1.6;
  font-size: var(--step-0);
  -moz-osx-font-smoothing: grayscale;
}

/* Index page: .page handles its own padding (from components.css) */
body:has(.page) {
  padding: 0;
}

/* Results-side */
html:has(.results-container) {
  overflow: hidden;
}

body:has(.results-container) {
  padding-block-end: 0;
  padding-block-start: 0;
}


/* --- Common --- */
.container {
  max-width: 65ch;
  margin: 0 auto;
}

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;
}

/* Join section, code inputs, join button: shared in /components.css */

/* --- Buttons --- */
/* .btn and .text-input are in /components.css — only poll-specific variants below */

/* Farve-varianter */
.btn-blue { background: var(--blue); &:hover { background: color-mix(in oklch, var(--blue) 85%, black); } }
.btn-red  { background: var(--red);  &:hover { background: color-mix(in oklch, var(--red) 85%, black); } }

/* Layout-varianter */
.btn-full { width: 100%; display: block; text-align: center; }

/* --- Loading-state for knapper --- */
.btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;

  &::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid oklch(1 0 0 / 30%);
    border-top-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-top-color: var(--muted);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Create form is now a separate page (create.html) — old .create-form styles removed */

/* --- Edit notice (editing existing poll) --- */
.edit-notice {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.6rem 1rem;
  background: oklch(0.80 0.16 75 / 15%);
  border: 1px solid oklch(0.80 0.16 75 / 30%);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  font-weight: 600;
  color: oklch(0.45 0.12 75);
  margin-block-end: var(--space-m);
}

/* --- Onboarding hint (3-step guide) --- */
.onboarding-hint {
  display: flex;
  align-items: center;
  gap: var(--space-l);
  padding: 0.6rem 1rem;
  background: oklch(0.72 0.19 155 / 8%);
  border: 1.5px dashed oklch(0.72 0.19 155 / 30%);
  border-radius: var(--radius-m);
  margin-block-end: var(--space-m);
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--muted);
}

.onboarding-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--green);
  color: oklch(1 0 0);
  font-size: var(--step--2);
  font-weight: 700;
  flex-shrink: 0;
}

.form-group {
  margin-block-end: 1rem;

  & 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;
  }

  & input,
  & select,
  & textarea {
    width: 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;

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

  & textarea {
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    min-block-size: 3rem;
  }

  & input::placeholder,
  & textarea::placeholder {
    color: var(--muted);
    opacity: 0.7;
  }
}

/* --- Type-toggle (Flervalg / Fritekst) --- */
.type-toggle {
  display: flex;
  gap: 0.5rem;
}

.type-btn {
  flex: 1;
  padding: 0.65rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: var(--step-0);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
  font-family: inherit;
}

.type-btn.active {
  border-color: var(--green);
  background: oklch(0.75 0.18 163 / 8%);
  color: var(--green);
}

.type-btn:hover {
  border-color: var(--green);
}

/* --- Diagram type selector (create form) --- */
.diagram-type-picker {
  display: flex;
  gap: 0.35rem;
}

.diagram-pick {
  flex: 1;
  padding: 0.5rem 0.4rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out;
  font-family: inherit;
  text-align: center;
}

.diagram-pick.active {
  border-color: var(--green);
  background: oklch(0.75 0.18 163 / 8%);
  color: var(--green);
}

.diagram-pick:hover {
  border-color: var(--green);
}

/* --- Svarliste i formularen --- */
.answer-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.answer-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.answer-row input {
  flex: 1;
}

.answer-row .remove-btn {
  background: none;
  border: none;
  color: var(--red);
  font-size: var(--step-2);
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  opacity: 0.5;
  transition: opacity 0.15s ease-out;
}

.answer-row .remove-btn:hover {
  opacity: 1;
}

/* --- Preset-dropdown --- */
/* --- Custom preset dropdown --- */
.preset-dropdown {
  position: relative;
  display: inline-block;
}

.preset-trigger {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  font-size: var(--step--1);
  font-family: inherit;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s;
}

.preset-trigger:hover {
  border-color: var(--green);
  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);
}

.preset-menu {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 0.35rem);
  background: var(--card);
  border-radius: var(--radius-l);
  box-shadow: 0 12px 40px oklch(0 0 0 / 15%), 0 4px 12px oklch(0 0 0 / 8%);
  border: 1px solid var(--border);
  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;
}

.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;
  width: 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 --- */
.vend-om-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 0.4rem 0.75rem;
  font-size: var(--step--1);
  font-family: inherit;
  color: var(--muted);
  cursor: pointer;
  margin-block-end: 0.5rem;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.vend-om-btn:hover {
  border-color: var(--green);
  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;
  width: 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"] {
  width: 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-bottom-color: var(--green);
}

.add-answer-btn {
  background: none;
  border: 2px dashed var(--border);
  border-radius: var(--radius-s);
  padding: 0.6rem;
  width: 100%;
  cursor: pointer;
  color: var(--muted);
  font-size: var(--step-0);
  margin-block-start: 0.5rem;
  font-family: inherit;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.add-answer-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

/* --- Slide list (added questions) --- */
.slide-list {
  background: var(--input-bg);
  border-radius: var(--radius-l);
  padding: 1.25rem;
  margin-block-end: 1.5rem;
}

.slide-list h3 {
  font-size: var(--step--1);
  margin-block-end: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.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);
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;
}

.slide-preview-num {
  background: var(--green);
  color: white;
  width: 26px;
  height: 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-width: 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 {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-xl) var(--space-m);
  box-shadow: none;
  text-align: center;
}

.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 {
  width: 100%;
  padding: 0.8rem 0;
  border: none;
  border-block-end: 2px solid var(--border);
  border-radius: 0;
  font-size: var(--step-2);
  font-family: inherit;
  text-align: center;
  background: transparent;
  color: var(--text);
  margin-block-end: 1.5rem;
  outline: none;
  transition: border-color 0.15s ease-out;
}

.name-input:focus {
  border-bottom-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 {
  font-size: var(--step-2);
  font-weight: 700;
  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;
}

.vote-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.vote-btn {
  padding: 0.9rem 1.25rem;
  min-height: 48px;
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--card);
  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);
  box-shadow: var(--shadow-sm);

  @media (hover: hover) {
    &:hover:not(:disabled) {
      border-color: var(--green);
      background: var(--green-subtle);
      box-shadow: var(--shadow);
      transform: translateY(-2px);
    }
  }

  &:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
  }

  &.selected {
    border-color: var(--green);
    background: var(--green-subtle);
    color: var(--green);
    font-weight: 600;
    box-shadow: var(--shadow-glow);
  }
}

/* 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 {
  width: 100%;
  min-height: 120px;
  padding: 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-l);
  font-size: var(--step-1);
  font-family: inherit;
  color: var(--text);
  background: var(--card);
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease-out;
}

.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;
}

.check-circle {
  margin-block-end: 1rem;
  display: inline-block;
}

.check-circle svg {
  width: 56px;
  height: 56px;
}

.check-circle .check-bg {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  opacity: 0;
}

.check-circle .check-mark {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  opacity: 0;
}

.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;
  width: 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;
  /* Negative margin so it does not push content down */
  max-block-size: 0;
  overflow: visible;
}

.error-msg.visible {
  opacity: 1;
  pointer-events: auto;
}

/* "Mine afstemninger" — shared .my-sessions, .my-item, .my-link etc. in /components.css */

/* --- 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;
}

/* ==========================================
   RESULTS PAGE
   ========================================== */

/* Body override: remove top-padding + scrollbar on results page */
html:has(.results-container),
body:has(.results-container) {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/Edge */
}
html:has(.results-container)::-webkit-scrollbar,
body:has(.results-container)::-webkit-scrollbar {
  display: none;                  /* Chrome/Safari */
}
body:has(.results-container) {
  padding-block-start: 0;
  padding-inline: 0;
}

.results-container {
  max-inline-size: 100%;
  margin-inline: auto;
  padding-inline: 0;
  padding-block-end: 0;
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
}

/* Results-view: flex-kolonne der fylder HELE viewport — aldrig scroll */
.results-view {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dynamic viewport height (mobile) */
  overflow: hidden;
}

/* Topbar: fast i toppen, skalerer med indhold */
.results-topbar {
  flex-shrink: 0;
  z-index: 5;
  background: light-dark(oklch(0.97 0.008 240 / 95%), oklch(0.14 0.02 260 / 95%));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Content area: fills ALL remaining space between topbar and control bar */
.results-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0; /* vigtig: tillader flex-child at krympe */
  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; }
/* topbar-link now contains brand + code-badge */

/* Klikkbar link i lobby: dida.dk/p1234 */
.lobby-link {
  cursor: pointer;
  display: inline-block;
  transition: opacity 0.15s;
}
.lobby-link:hover { opacity: 0.7; }
.lobby-url-part {
  color: var(--muted);
  font-size: clamp(1.8rem, 3vw + 1rem, 3.5rem);
  font-weight: 600;
  display: none; /* erstattet af lobby-logo */
}

/* 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-height: 80vh;
  gap: 0.5rem;
}

.lobby-code {
  font-size: clamp(100px, 20vw, 220px);
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--green);
}

.lobby-url {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--muted);
  margin-block-end: 1rem;
}

.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 {
  width: 10px;
  height: 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-height: 56px;
  border-radius: var(--radius-l);
}

/* --- Topbar: branding-navbar (flex-row, full-width) --- */
.results-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 clamp(1rem, 3vw, 1.5rem);
  margin-block-end: 0;
  height: 56px;
  flex-shrink: 0;
}

/* Large brand logo on the front page (h1) — brand classes from /brand.css, overrides for large display */
.brand-title {
  & .brand {
    font-size: inherit;
    letter-spacing: -0.03em;
  }
  & .brand-sep {
    font-size: 0.65em;
  }
  & .brand-sub {
    font-size: 0.65em;
  }
}

.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%);
}

.results-header {
  text-align: center;
  margin-block-end: 2rem;
}

.results-code {
  font-size: clamp(80px, 15vw, 140px);
  font-weight: 800;
  letter-spacing: 0.15em;
  line-height: 1.1;
  color: var(--green);
}

.results-hint {
  color: var(--muted);
  font-size: clamp(1.2rem, 3vw, 2.2rem);
  margin-block-start: 0.25rem;
}

/* .results-question er nu .results-question-bar — se topbar-styles */

/* --- 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-height: 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;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}

.slide-counter {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  min-inline-size: 2.5em;
  text-align: center;
}

.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); }
}

.slide-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slide-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.slide-dot.active {
  background: var(--green);
  box-shadow: 0 0 0 3px oklch(0.72 0.19 150 / 20%);
}

.slide-dot.done {
  background: var(--green);
}

.slide-dot:hover {
  transform: scale(1.2);
}

/* --- ECharts diagram --- */
.chart-wrap {
  view-transition-name: chart-area;
  position: relative;
  flex: 1;
  min-height: 0; /* tillader krympning i flex */
}

/* --- Tabel-view --- */
.table-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.results-table {
  width: auto;
  min-width: 40%;
  max-width: 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);
}

.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;
}

.results-table tbody tr:hover {
  background: oklch(0 0 0 / 2%);
}

.table-dot {
  display: inline-block;
  width: clamp(10px, 1.2vw, 16px);
  height: 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;
}

/* Lange svar: tillad linjeskift */
@media (max-width: 900px) {
  .table-answer { white-space: normal; }
}

.table-bar-bg {
  width: 100%;
  height: clamp(12px, 1.3vw, 20px);
  background: var(--input-bg);
  border-radius: var(--radius-s);
  overflow: hidden;
}

.table-bar-fill {
  height: 100%;
  border-radius: var(--radius-s);
  transition: width 0.4s ease;
}

/* 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); }

@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-width: none; }
}

/* --- Indstillingspanel --- */
.settings-dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: min(420px, 90vw);

  &::backdrop {
    background: light-dark(oklch(0 0 0 / 40%), oklch(0 0 0 / 60%));
  }
}

.settings-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 0.75rem 1.2rem 1rem;
  box-shadow: var(--shadow-hover);
}

.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);
}

.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;
}

/* Toggle switch (iOS-stil) */
/* Toggle-switch: used in both results.html and index.html
   Markup: <label class="toggle-switch"><input type="checkbox"><span class="toggle-track"></span></label>
*/

/* --- Segmented control (diagram type selector) --- */
.seg-control {
  display: flex;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 3px;
  gap: 2px;
}

.seg-btn {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: none;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
  font-family: inherit;
}

.seg-btn:hover {
  color: var(--text);
}

.seg-btn.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 1px 4px oklch(0 0 0 / 8%);
}

/* --- Settings sections --- */
.settings-section {
  padding: 0.15rem 0;
  width: 100%;
}

.settings-section + .settings-section {
  /* Ingen separator-linjer — rent og minimalt */
}

.settings-action {
  display: grid;
  grid-template-columns: 1fr 24px 48px;
  align-items: center;
  gap: 0.3rem;
  width: 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 {
  width: 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);
}

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

.skeleton-text {
  height: 1.5rem;
  display: inline-block;
}

.skeleton-chart {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.skeleton-label {
  width: 100px;
  height: 1rem;
  flex-shrink: 0;
}

.skeleton-bar {
  flex: 1;
  height: 42px;
  width: 80%;
}

/* --- Navne-dialog (modal: hvem stemte hvad) --- */
.names-dialog {
  border: none;
  border-radius: var(--radius-xl);
  padding: 0;
  max-width: min(500px, 90vw);
  width: 90vw;
  max-height: 70vh;
  margin: auto; /* centrerer i viewport */
  background: var(--card);
  box-shadow: var(--shadow-hover);
  color: inherit;

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

.names-panel {
  display: flex;
  flex-direction: column;
  max-height: 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;

  &:hover {
    background: var(--input-bg);
  }
}

.names-content {
  padding: 0 var(--space-xl) var(--space-l);
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.75 0.02 155) transparent;

  &::-webkit-scrollbar { width: 6px; }
  &::-webkit-scrollbar-track { background: transparent; }
  &::-webkit-scrollbar-thumb {
    background: oklch(0.75 0.02 155 / 40%);
    border-radius: var(--radius-full);
  }
  &::-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);
}

.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-width: min(520px, 92vw);
  max-height: 85vh;
  overflow: hidden; /* kun indholdet scroller, ikke dialogen selv */
}

/* ─── Quiz-done dialog: aggregate stats + optional scoreboard ─── */
.quiz-done-dialog {
  max-width: min(580px, 92vw);
  max-height: 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);
}

@media (max-width: 480px) {
  .quiz-done-stats { gap: var(--s-2); padding-inline: var(--s-2); }
  .qd-stat .qd-num { font-size: 26px; }
}

.scoreboard-loading,
.scoreboard-tom {
  text-align: center;
  padding: var(--space-xl) var(--space-m);
  color: var(--muted);
  font-size: var(--step-0);
}

.scoreboard-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step-0);

  & 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);
  }

  & td {
    padding: var(--space-s) var(--space-s);
    border-block-end: 1px solid var(--border);
    vertical-align: middle;
  }

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

.sb-col-rank {
  width: 3rem;
  text-align: center;
  font-weight: 700;
  font-size: var(--step-1);
  /* Tal i mono med tabular-nums, så placeringerne står i lod under hinanden —
     også når listen går fra 9 til 10. Samme behandling som score-kolonnen. */
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.sb-col-navn {
  font-weight: 500;
}

.sb-col-score {
  width: 4.5rem;
  text-align: end;
  font-variant-numeric: tabular-nums;

  & 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; }

/* Mobile: table fills full width, larger touch targets */
@media (max-width: 480px) {
  .scoreboard-dialog {
    max-width: 96vw;
    max-height: 80vh;
  }

  .scoreboard-tabel td {
    padding: var(--space-s) var(--space-xs);
  }

  .sb-col-rank {
    width: 2.5rem;
    font-size: var(--step-0);
  }

  .sb-col-score {
    width: 3.5rem;
  }
}

/* Smartboard/Full HD: lidt mere luft */
@media (min-width: 1200px) {
  .scoreboard-dialog {
    max-width: 560px;
  }

  .scoreboard-tabel {
    font-size: var(--step-1);
  }

  .scoreboard-tabel td {
    padding: var(--space-m) var(--space-s);
  }
}


/* --- Freetext result list (teacher) — with CSS counter numbering --- */
.freetext-list {
  flex: 1;
  min-height: 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;
  background: var(--card);
  border: none;
  border-radius: var(--radius-m);
  font-size: var(--step-0);
  line-height: 1.5;
  word-wrap: break-word;
  box-shadow: var(--shadow-sm);
  position: relative;

  &::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;
}

/* --- Kontrolbar (professionel pill-stil, sticky bund) --- */
.controls-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
  z-index: 10;
  padding-block: var(--space-s);
  padding-inline: var(--space-m);
  background: light-dark(oklch(0.97 0.008 240 / 90%), oklch(0.14 0.02 260 / 90%));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ctrl-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--input-bg);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
  text-decoration: none;
  font-family: inherit;
  line-height: 1;

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

  &.ctrl-active {
    background: var(--green);
    color: oklch(1 0 0);
  }

  & kbd {
    font-size: var(--step--2);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-s);
    background: oklch(0 0 0 / 6%);
    color: var(--muted);
    font-family: inherit;
    font-weight: 500;
  }

  &.ctrl-danger {
    background: oklch(0.97 0.01 27);
    color: var(--red);
    &:hover { background-color: oklch(0.94 0.03 27); }
  }

  &.ctrl-success {
    background: oklch(0.97 0.02 163);
    color: oklch(0.55 0.18 155);
    &:hover { background-color: oklch(0.94 0.04 163); }
  }
}

/* Dark mode controls — bruger custom properties via light-dark() */
body.dark .ctrl-pill {
  background: var(--input-bg);
  color: var(--text);
}
body.dark .ctrl-pill:hover { background: var(--border); }
body.dark .ctrl-pill.ctrl-active { background: var(--green); color: oklch(1 0 0); }
body.dark .ctrl-pill kbd { background: oklch(1 0 0 / 8%); color: var(--muted); }
body.dark .ctrl-pill.ctrl-danger { background: oklch(0.25 0.05 27); color: oklch(0.72 0.18 27); }
body.dark .ctrl-pill.ctrl-danger:hover { background: oklch(0.30 0.05 27); }
body.dark .ctrl-pill.ctrl-success { background: oklch(0.22 0.05 163); color: oklch(0.72 0.18 163); }
body.dark .ctrl-pill.ctrl-success:hover { background: oklch(0.28 0.05 163); }

/* Dark mode settings — bruger custom properties */
body.dark .settings-panel { background: var(--card); border-color: var(--border); }
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 { background: var(--bg); border-color: var(--border); }
body.dark .seg-btn { color: var(--muted); }
body.dark .seg-btn:hover { color: var(--text); }
body.dark .seg-btn.active { background: var(--border); color: var(--text); box-shadow: 0 1px 4px oklch(0 0 0 / 20%); }

/* (focus-mode rules collected further down) */

/* --- SSE-forbindelsesindikator --- */
/* 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;

  &[hidden] { display: none; }
}

.sse-dot {
  display: inline-block;
  width: 8px;
  height: 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 (0 svar) --- */
.empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.empty-state-icon {
  font-size: var(--step-3);
  margin-block-end: 0.5rem;
  opacity: 0.5;

  & .i { inline-size: 1.2em; block-size: 1.2em; }
}

/* Settings rows — toggle-row, toggle-label, toggle-desc are in components.css */

/* Toggle switch — now in components.css */

.settings-select-b {
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-m);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: var(--step--1);
}

/* Collapsible import/export */
.collapsible-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0;
  cursor: pointer;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  transition: color 0.15s;
  border-block-start: 1px solid var(--border);
}

.collapsible-toggle:hover { color: var(--text); }

.collapsible-arrow {
  font-size: var(--step--2);
  transition: transform 0.2s;
}

.collapsible-toggle.open .collapsible-arrow {
  transform: rotate(90deg);
}

.collapsible-body {
  animation: fade-in 0.15s ease-out;
}

.ie-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-end: var(--space-s);

  & .btn {
    font-size: var(--step--1);
    padding: 0.3em 0.7em;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    font-weight: 500;

    &:hover {
      color: var(--text);
      border-color: var(--green);
      background: oklch(0.72 0.19 155 / 6%);
    }
  }
}

/* CTA zone */
.cta-zone {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-block-start: var(--space-l);
}

.draft-link {
  text-align: center;
}

.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  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%);
  transition: color 0.15s;
  padding: 0.5rem;
}

.link-btn:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

.import-area {
  margin-block-start: var(--space-m);
  animation: fade-in 0.2s ease-out;
}

.import-textarea {
  inline-size: 100%;
  min-block-size: 120px;
  padding: var(--space-m);
  border: 2px solid var(--border);
  border-radius: var(--radius-m);
  font-family: 'Courier New', monospace;
  font-size: var(--step--1);
  line-height: 1.5;
  resize: vertical;
  background: light-dark(oklch(0.99 0 0), oklch(0.16 0.02 260));
  color: var(--text);
  transition: border-color 0.2s ease;

  &: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);

  & .preview-slide {
    padding: var(--space-xs) 0;

    &: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);
    }
  }

  & .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);
  }

  & .preview-q {
    font-weight: 600;
    color: var(--text);
  }

  & .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);
}

/* --- Hide-results mode: center question + counter --- */

/* 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 {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Question moved from topbar to centered overlay */
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-width: 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;
}

/* --- Focus-mode (fullscreen — hide buttons) --- */
/* 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;
}

/* --- Dark mode (til projektor) --- */
/* body.dark forces dark color-scheme, so light-dark() automatically picks dark values */
body.dark {
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}

/* Elementer der bruger hardcodede farver i stedet for custom properties */
body.dark .slide-dot {
  border-color: var(--green);
}
body.dark .slide-dot.active,
body.dark .slide-dot.done {
  background: var(--green);
}

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-bottom-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-width: none;
  margin: 0;
  padding: 0;
  animation: fadeIn 0.3s ease;
}

.create-columns {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: 1rem;
  padding-block-start: var(--space-l);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .create-header removed — now uses shared .create-topbar from components.css */

.create-columns {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.5rem;
  align-items: start;
}

.create-col-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Mine afstemninger i opret-mode: kompakt */
.create-col-left .my-polls {
  margin-block-end: 0;
}

.create-col-left .my-polls-list {
  max-height: 200px;
  overflow-y: auto;
}

/* Formularen i opret-mode er altid synlig */
.create-layout .create-form {
  display: block;
  margin-block-start: 0;
}

.create-col-left,
.create-col-right {
  min-width: 0; /* Prevent grid blowout */
}

.create-col-right {
  position: sticky;
  inset-block-start: calc(56px + 1rem);
}

.slide-panel {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  min-height: 200px;
}

.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-empty .empty-state-icon {
  font-size: var(--step-3);
  margin-block-end: 0.5rem;
  opacity: 0.5;
}

.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;
}

/* --- Klik-for-edit --- */
.slide-preview-item {
  cursor: pointer;
  transition: box-shadow 0.15s ease-out, border-color 0.15s ease-out;

  &:hover {
    box-shadow: var(--shadow);
    border-color: var(--green);
  }

  &.editing {
    border: 2px solid var(--green);
    background: oklch(0.75 0.18 163 / 4%);
  }

  &.dragging { opacity: 0.4; }
  &.drag-over { border-block-start: 2px solid var(--green); margin-block-start: -2px; }

  &: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);
}

/* --- Mine afstemninger som overlay-dropdown i opret-mode --- */
.my-polls-collapsible {
  position: relative;
  z-index: 100;
}

.my-polls-toggle-btn {
  width: 100%;
  padding: 0.65rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}

.my-polls-toggle-btn:hover {
  box-shadow: var(--shadow-m);
}

.toggle-arrow {
  transition: transform 0.2s;
  color: var(--muted);
  font-size: var(--step--2);
}

/* .my-polls-collapse-content and .my-poll-edit-row removed — dropdown is now in create.html topbar */

/* --- Elev lobby-venter --- */
.lobby-wait {
  text-align: center;
  padding: 3rem 1rem;
}

.lobby-wait-icon {
  font-size: var(--step-3);
  margin-block-end: 1rem;

  & .i { inline-size: 1.2em; block-size: 1.2em; }
}

.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);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .create-columns {
    grid-template-columns: 1fr;
  }

  .create-col-right {
    position: static;
  }

  .create-layout {
    max-width: 520px;
  }

}

@media (max-width: 480px) {
  body {
    padding: 1rem;
  }

  /* Create-mode: body-padding fjernes — topbar + create-columns styrer layout */
  body.create-mode {
    padding: 0;
  }

  .results-question-bar {
    font-size: var(--step-0);
  }

  /* Hide keyboard shortcuts on touch/mobile */
  kbd { display: none; }

  .results-question-bar {
    text-align: start;
  }

  .results-hint {
    font-size: var(--step-2);
  }

  .slide-nav {
    gap: 0.5rem;
  }

  .slide-indicator {
    font-size: var(--step--1);
    min-width: 100px;
  }

  .code-section,
  .create-form,
  .my-polls,
  .name-card {
    padding: 1.75rem 1.25rem;
  }
}

/* --- 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;

  &: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-width: min(420px, 90vw);
  overflow: visible;

  &::backdrop {
    background: light-dark(oklch(0 0 0 / 45%), oklch(0 0 0 / 60%));
  }
}

@keyframes fadeInModal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  background: var(--card);
  border-radius: var(--radius-l);
  padding: 2rem;
  width: 100%;
  box-shadow: var(--shadow-hover);
  text-align: center;
  overflow: visible;
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.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 {
  width: 12px;
  height: 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);
}

/* --- Flytte-knapper (▲▼ til keyboard-nav) --- */
.slide-move-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.slide-move-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  color: var(--muted);
  font-size: var(--step--1);
  cursor: pointer;
  min-width: 28px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;

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

  &:disabled {
    opacity: 0.2;
    cursor: not-allowed;
  }
}

/* --- Onboarding-hint --- */
.onboarding-hint {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 1.25rem;
  background: oklch(0.75 0.18 163 / 6%);
  border: 1px dashed var(--green);
  border-radius: var(--radius-m);
  margin-block-end: 1rem;
  font-size: var(--step--1);
  color: var(--muted);
  line-height: 1.4;
}

.onboarding-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.onboarding-step-num {
  background: var(--green);
  color: oklch(1 0 0);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--step--2);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Elev connection-indikator --- */
.connection-status {
  text-align: center;
  font-size: var(--step--1);
  color: var(--muted);
  margin-block-start: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.connection-status.disconnected {
  opacity: 1;
  color: var(--amber);
}

/* --- Rediger-notice i create-mode --- */
.edit-notice {
  background: oklch(0.75 0.18 163 / 8%);
  border: 1px solid var(--green);
  border-radius: var(--radius-s);
  padding: 0.6rem 1rem;
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--green);
  margin-block-end: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Help-tooltip (?) --- */
.help-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: var(--step--2);
  font-weight: 700;
  cursor: help;
  position: relative;
  flex-shrink: 0;

  &::after {
    content: attr(aria-label);
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--bg);
    font-size: var(--step--1);
    font-weight: 400;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    white-space: normal;
    width: max-content;
    max-width: 220px;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
    z-index: 10;
    box-shadow: 0 4px 12px oklch(0 0 0 / 15%);
  }

  &:hover::after,
  &:focus::after {
    opacity: 1;
  }
}

/* --- Forlad-knap (deltager) --- */
.leave-btn {
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  padding-block: var(--space-2xs);
  padding-inline: 0;
  margin-block-end: var(--space-s);
  transition: color 0.15s ease-out;
  display: block;

  &:hover {
    color: var(--green);
  }
}

/* --- Ikoner i kontrolknapper --- */
.btn-icon {
  margin-inline-end: 0.25em;
}

/* --- 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); }
}

/* --- Prefers-contrast: more --- */
@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));
  }
  .btn, .vote-btn, .ctrl-pill {
    border: 2px solid currentColor;
  }
}

/* --- Forced-colors (Windows High Contrast) --- */
@media (forced-colors: active) {
  .vote-btn, .btn { border: 2px solid ButtonText; }
  .slide-dot { border-color: ButtonText; }
  .slide-dot.active, .slide-dot.done { background: Highlight; border-color: Highlight; }
  .topbar-code { color: LinkText; }
  .topbar-code.lukket { color: GrayText; }
}

/* --- Progressive Enhancement: field-sizing --- */
@supports (field-sizing: content) {
  .freetext-input {
    field-sizing: content;
    min-block-size: 3lh;
  }
}

/* --- Progressive Enhancement: corner-shape --- */
@supports (corner-shape: squircle) {
  .code-section, .create-form, .my-polls, .slide-panel,
  .modal-box, .settings-panel, .name-card, .vote-btn {
    corner-shape: squircle;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   V2 GLASSMORPHISM — Elevside redesign
   Dot-grid background, glass card, green accent
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --glass-bg: light-dark(oklch(1 0 0 / 82%), oklch(1 0 0 / 6%));
  --glass-bg-hover: light-dark(oklch(1 0 0 / 92%), oklch(1 0 0 / 10%));
  --glass-border: light-dark(oklch(0 0 0 / 10%), oklch(1 0 0 / 10%));
  --glass-blur: blur(16px);
  --dot-color: light-dark(oklch(0 0 0 / 4%), oklch(1 0 0 / 4%));
  --green-glow: oklch(from var(--green) l c h / 30%);
  --green-light: oklch(from var(--green) l c h / 12%);
}

/* Dot-grid baggrund (elevside + builder, ikke results) */
body:not(:has(.results-container)) {
  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:not(:has(.results-container))::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* Container/page shall sit above dot-grid */
.container, .page {
  position: relative;
  z-index: 1;
}

/* Code inputs and join button now use shared .code-digit / .btn from components.css */

/* ─── Stemmeknapper: glass-kort med letter-badge ─── */
.vote-btn {
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.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;
}

@media (hover: hover) {
  .vote-btn:hover:not(:disabled) {
    border-color: oklch(from var(--green) l c h / 40%);
    background: var(--green-light);
    backdrop-filter: var(--glass-blur);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px oklch(0 0 0 / 6%);
  }
}

.vote-btn.selected {
  border-color: var(--green);
  background: var(--green-light);
  box-shadow: 0 0 0 2px var(--green-light);
}

.vote-btn.selected .vote-letter {
  background: var(--green);
  color: oklch(1 0 0);
}

/* ─── Question text: more weight ─── */
.vote-section .question-text {
  font-size: var(--step-2);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ─── Progress dots: green ─── */
.slide-dots .slide-dot.active {
  background: var(--green);
  box-shadow: 0 0 6px var(--green-glow);
}

/* ─── Fritekst-input: glass ─── */
.freetext-input {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
}

.freetext-input:focus {
  border-color: var(--green);
}

/* ─── Send-svar knap: gradient ─── */
.freetext-input-wrap .btn {
  inline-size: 100%;
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.65 0.20 155));
  box-shadow: 0 2px 8px var(--green-glow);
}

/* ─── Lobby-venter: glass-kort ─── */
.lobby-wait {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 1.5rem;
  box-shadow: var(--shadow);
}

/* ─── Confirmation: glass card ─── */
.confirmation.visible {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

/* ─── Check circle: green with glow ─── */
.check-circle svg .check-bg {
  stroke: var(--green);
}

.check-circle svg .check-mark {
  stroke: var(--green);
}

/* ─── Navn-input: glass ─── */
.name-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
}

.name-input {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  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);
}

/* ─── Forlad-knap: subtil ─── */
.leave-btn {
  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);
}

/* ─── Forbindelsesstatus: glass ─── */
.connection-status {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  backdrop-filter: var(--glass-blur);
}

/* ─── Responsive glass-kort ─── */
@media (max-width: 480px) {
  .lobby-wait,
  .confirmation.visible,
  .name-card {
    padding: 1.5rem 1rem;
    border-radius: var(--radius-l);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   V2 GLASSMORPHISM — Builder (opret-formular) redesign
   Dot-grid background, glass card, green accent, matching Groups style
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Dot-grid background on create-layout ─── */
/* Remove body-padding when builder is active */
body.create-mode {
  padding: 0;
}

/* Edit-notice: skjult — topbar viser allerede koden */
.create-layout .edit-notice {
  display: none !important;
}

.create-layout {
  position: relative;
  z-index: 1;
}

/* Old .create-header glassmorphism overrides removed — now uses shared .create-topbar */

/* ─── Create form: transparent container med sektionskort ─── */
.create-layout .create-form {
  background: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* ─── Each form-group is an independent card ─── */
.create-layout .slide-editor > .form-group {
  background: var(--card);
  border: none;
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
  position: relative;
  z-index: 1;
}

/* 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;
}

/* CTA i egne kort */

/* Separator mellem editor og settings */
.create-layout .slide-editor > hr {
  display: none;
}

/* Separator mellem editor og settings */
.create-layout .slide-editor ~ .collapsible-toggle,
.create-layout .slide-editor ~ .collapsible-body {
  /* Handled via wrapper below */
}

/* CTA-zone som eget kort */
.create-layout .cta-zone {
  background: var(--card);
  border: none;
  border-radius: var(--radius-l);
  padding: var(--space-m);
  box-shadow: var(--shadow-s);
}

/* ─── Slide panel (right column) ─── */
.slide-panel {
  background: var(--card);
  border: none;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-s);
}

/* ─── Type-toggle form-group: ingen kort-styling ─── */
.create-layout .slide-editor > .form-group:has(.type-toggle) {
  background: transparent;
  backdrop-filter: none;
  border: none;
  padding: 0;
  box-shadow: none;

  & label { display: none; }
}

/* ─── Type-toggle: pill-group (matcher mockup) ─── */
.create-layout .type-toggle {
  display: inline-flex;
  background: light-dark(oklch(0 0 0 / 5%), oklch(1 0 0 / 5%));
  border: none;
  border-radius: var(--radius-full);
  padding: 3px;
  gap: 2px;
}

.create-layout .type-btn {
  border: none;
  border-radius: var(--radius-full);
  padding: 0.4rem 1rem;
  font-size: var(--step--1);
  font-weight: 600;
  background: transparent;
  color: var(--muted);
  transition: all 0.2s ease;
  flex: 0;
}

.create-layout .type-btn.active {
  background: var(--green);
  color: oklch(1 0 0);
  box-shadow: 0 2px 8px oklch(from var(--green) l c h / 30%);
  border: 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);
  width: 100%;
}

.create-layout .form-group input:focus,
.create-layout .form-group textarea:focus {
  border-block-end-color: var(--accent);
  box-shadow: none;
  outline: none;
}

/* ─── Answer rows: badges + inputs (matches mockup) ─── */
.create-layout .answer-list {
  counter-reset: answer-counter;
  gap: 0.5rem;
}

.create-layout .answer-row {
  counter-increment: answer-counter;
  gap: 0.625rem;
}

.create-layout .answer-row::before {
  content: counter(answer-counter, upper-alpha);
  flex-shrink: 0;
  width: 28px;
  height: 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;

  &::placeholder { color: var(--muted); }

  &: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;
  width: 28px;
  height: 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 .answer-row .remove-btn {
  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;
}

/* ─── Add svar-knap: matcher mockup ─── */
.create-layout .add-answer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 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);
}

/* ─── Preset-dropdown: pill-knap ─── */
.create-layout .preset-trigger {
  width: 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%));
  backdrop-filter: none;
  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);
}

.create-layout .preset-menu {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  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%);
}

/* ─── Diagram-picker: kort-layout med ikoner ─── */
.create-layout .diagram-type-picker {
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 0.5rem;
}

.create-layout .diagram-pick {
  border: none;
  border-radius: var(--radius-m);
  background: light-dark(oklch(0 0 0 / 3%), oklch(1 0 0 / 4%));
  color: var(--muted);
  transition: all 0.2s ease;
  flex-direction: column;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
}

.create-layout .diagram-pick .diagram-icon {
  display: block;
}

.create-layout .diagram-pick.active {
  background: var(--green-light);
  color: var(--green);
  box-shadow: inset 0 0 0 1.5px oklch(from var(--green) l c h / 30%);
}

.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);
}

/* Settings-card + settings-card-title — now in components.css */

/* Toggle rows in create — components.css handles base styling */

/* ─── Separator: subtil ─── */
.create-layout .slide-editor > hr {
  border: none;
  border-block-start: 1px solid var(--glass-border);
  margin-block: var(--space-l);
}

/* ─── Settings select ─── */
.create-layout .settings-select-b {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-m);
  background: var(--card);
}

/* ─── 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 .btn[onclick*="start"],
.create-layout .cta-zone #startBtn {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.65 0.20 155));
  box-shadow: 0 2px 8px var(--green-glow);
  border: none;
  font-weight: 700;
  transition: all 0.2s ease;
}

.create-layout .cta-zone .btn-green:hover,
.create-layout .cta-zone .btn[onclick*="start"]:hover,
.create-layout .cta-zone #startBtn:hover {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.60 0.21 155));
  box-shadow: 0 4px 16px var(--green-glow);
  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);
}

/* ─── Collapsible toggle (Import/Eksport): glass ─── */
/* ─── Import/Eksport card ─── */
.create-layout .ie-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: none;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-sm), var(--glass-inset);
  overflow: hidden;
}

.create-layout .ie-card .collapsible-toggle {
  border: none;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding: 0.875rem 1.25rem;
  width: 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-arrow {
  margin-inline-start: auto;
  font-size: var(--step--2);
}

.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-body {
  padding: 0 1.25rem 1.25rem;
}

.create-layout .ie-card .ie-buttons {
  display: flex;
  gap: 1.25rem;
}

.create-layout .ie-card .ie-buttons .btn {
  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 {
  color: var(--green);
}

.create-layout .ie-card .ie-buttons .btn svg {
  opacity: 0.5;
}

.create-layout .ie-card .ie-buttons .btn:hover svg {
  opacity: 1;
}

/* ─── Import textarea: glass ─── */
.create-layout .import-textarea {
  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%));
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--input-inset);
}

.create-layout .import-textarea:focus {
  border-color: var(--green);
}

/* ─── Slide items i panelet: glass hover ─── */
.slide-panel .slide-item {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: light-dark(oklch(0 0 0 / 2%), oklch(1 0 0 / 3%));
  transition: all 0.2s ease;
}

.slide-panel .slide-item:hover {
  border-color: oklch(from var(--green) l c h / 30%);
  background: var(--green-light);
}

.slide-panel .slide-item.active,
.slide-panel .slide-item.editing {
  border-color: var(--green);
  background: var(--green-light);
  box-shadow: 0 0 0 2px oklch(from var(--green) l c h / 15%);
}

/* ─── Onboarding hint: glass-stil ─── */
.create-layout .onboarding-hint {
  background: var(--green-light);
  border: none;
  border-radius: var(--radius-l);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sm), var(--glass-inset);
}

/* ─── Edit notice: glass-stil ─── */
.create-layout .edit-notice {
  background: oklch(from var(--green) l c h / 6%);
  border: none;
  border-inline-start: 3px solid var(--green);
  border-radius: 0;
  backdrop-filter: none;
  padding: 0.5rem 0.75rem;
  font-size: var(--step--1);
}

/* Old .create-header .my-polls-collapsible removed — now uses .create-topbar-dropdown */

/* ─── Vend-om knap: glass ─── */
.create-layout .vend-om-btn {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-m);
  background: light-dark(oklch(0 0 0 / 2%), oklch(1 0 0 / 3%));
  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 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%));
}

/* ─── Gem kladde link: subtil ─── */
.create-layout .draft-link .link-btn {
  color: var(--muted);
  transition: color 0.2s;
}

.create-layout .draft-link .link-btn:hover {
  color: var(--green);
}

/* IE-buttons styling er nu i .ie-card blokken */

/* ─── Responsive builder glass ─── */
@media (max-width: 768px) {
  .create-layout .type-toggle,
  .create-layout .diagram-type-picker {
    padding: 0.2rem;
  }

  /* Reduce create-columns padding on tablet */
  .create-columns {
    padding-inline: 0.75rem;
    padding-block-start: var(--space-m);
    padding-block-end: 2rem;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  /* Remove body-padding in create-mode — topbar and cards handle it themselves */
  .create-layout {
    max-width: none;
  }

  .create-columns {
    padding-inline: 0.5rem;
    padding-block-start: var(--space-s);
    padding-block-end: 2rem;
    gap: 0.75rem;
  }

  /* Glasskort: reducer padding */
  .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;
  }

  /* Old .create-header responsive overrides removed — now uses shared .create-topbar */

  /* Diagram-knapper: horisontalt i stedet for lodret ikoner */
  .create-layout .diagram-pick {
    flex-direction: row;
    padding: 0.5rem 0.75rem;
    gap: 0.4rem;
    font-size: var(--step--1);
  }

  /* Answer rows: tighter */
  .create-layout .answer-list {
    gap: 0.35rem;
  }

  .create-layout .answer-row::before {
    width: 24px;
    height: 24px;
    font-size: var(--step--2);
  }

  /* Slide-panel items: mindre tekst */
  .slide-panel .slide-item {
    font-size: var(--step--1);
    padding: 0.5rem 0.625rem;
  }

  /* Inputs: compact on mobile */
  .create-layout .form-group input,
  .create-layout .form-group textarea {
    padding-block: var(--space-xs);
    font-size: var(--step--1);
  }

  /* Form-group labels: tighter */
  .create-layout .form-group label {
    font-size: var(--step--2);
    margin-block-end: var(--space-2xs);
  }

  /* Add-answer button: compact */
  .create-layout .add-answer-btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--step--1);
  }

  /* CTA-knapper: lidt kompaktere */
  .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);
  }

  /* Type-toggle: kompakt */
  .create-layout .type-btn {
    padding: 0.3rem 0.75rem;
    font-size: var(--step--1);
  }

  /* Preset-trigger: kompakt */
  .create-layout .preset-trigger {
    font-size: var(--step--1);
    padding: 0.3rem 0.6rem;
  }

  /* IE-card: kompakt */
  .create-layout .ie-card {
    padding: 0.875rem;
    border-radius: var(--radius-m);
  }

  /* Onboarding: kompakt */
  .create-layout .onboarding-hint {
    padding: 0.75rem;
    border-radius: var(--radius-m);
  }
}


/* ═══════════════════════════════════════════════════════════════════════
   V2 GLASSMORPHISM — Results (teacher screen) redesign
   Dot-grid background, glass topbar/control bar, green accent
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Dot-grid and gradient on results page ─── */
body:has(.results-container) {
  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 {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.results-container {
  position: relative;
  z-index: 1;
}

/* ─── Topbar: full-width navbar (som Grupper) ─── */
.results-topbar {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: none;
  border-block-end: 1px solid var(--glass-border);
  border-radius: 0;
  margin: 0;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
  height: 56px;
  box-shadow: none;
}

/* ─── Slide-counter: pill-style ─── */
.results-topbar .slide-counter {
  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-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);
  backdrop-filter: var(--glass-blur);
  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);
}

/* ─── Control bar: transparent, shown only on mouse movement ─── */
.controls-bar {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

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

/* Touch-devices: altid vis kontrolbar */
@media (hover: none) {
  .controls-bar {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ─── Kontrol-pills: glass ─── */
.ctrl-pill {
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: light-dark(oklch(1 0 0 / 60%), oklch(1 0 0 / 6%));
  backdrop-filter: var(--glass-blur);
  transition: all 0.2s ease;
}

.ctrl-pill:hover {
  border-color: oklch(from var(--green) l c h / 30%);
  background: light-dark(oklch(1 0 0 / 80%), oklch(1 0 0 / 10%));
}

.ctrl-pill.ctrl-active {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.65 0.20 155));
  border-color: transparent;
  color: oklch(1 0 0);
  box-shadow: 0 2px 8px var(--green-glow);
}

.ctrl-pill.ctrl-success {
  border-color: oklch(from var(--green) l c h / 30%);
  background: var(--green-light);
  color: var(--green);
}

.ctrl-pill.ctrl-success:hover {
  border-color: oklch(from var(--green) l c h / 50%);
  background: oklch(from var(--green) l c h / 18%);
}

.ctrl-pill.ctrl-danger {
  border-color: oklch(0.63 0.24 27 / 30%);
  background: oklch(0.63 0.24 27 / 8%);
  color: var(--red);
}

.ctrl-pill.ctrl-danger:hover {
  border-color: oklch(0.63 0.24 27 / 50%);
  background: oklch(0.63 0.24 27 / 15%);
}

/* ─── Lobby: glass-kort ─── */
.lobby {
  position: relative;
  z-index: 1;
}

.btn-lobby-start {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.65 0.20 155));
  box-shadow: 0 2px 12px var(--green-glow);
  border: none;
  transition: all 0.2s ease;
}

.btn-lobby-start:hover {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.60 0.21 155));
  box-shadow: 0 4px 20px var(--green-glow);
  transform: translateY(-2px);
}

/* ─── Fritekst-svar kort: glass ─── */
.freetext-answer {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-sm);
}

/* ─── Tabel: glass-accenter ─── */
.results-table th {
  border-block-end-color: var(--glass-border);
}

.results-table td {
  border-block-end-color: var(--glass-border);
}

.results-table tbody tr:hover {
  background: var(--green-light);
}

.table-bar-bg {
  background: light-dark(oklch(0 0 0 / 4%), oklch(1 0 0 / 6%));
  border-radius: var(--radius-full);
}

.table-bar-fill {
  border-radius: var(--radius-full);
}

/* ─── Settings dialog: glass ─── */
.settings-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  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 {
  border-block-end-color: var(--glass-border);
}

/* ─── Seg-control (diagram-type i settings): pill-style ─── */
.seg-control {
  background: light-dark(oklch(0 0 0 / 4%), oklch(1 0 0 / 4%));
  border: none;
  border-radius: var(--radius-m);
  padding: 0.25rem;
}

.seg-btn {
  border-radius: var(--radius-s);
  transition: all 0.2s ease;
}

.seg-btn.active {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  color: var(--green);
  box-shadow: var(--shadow-sm);
}

/* ─── Navne-dialog: glass ─── */
.names-dialog {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 40px oklch(0 0 0 / 12%), 0 4px 12px oklch(0 0 0 / 6%);
}

.name-group + .name-group {
  border-block-start-color: var(--glass-border);
}

/* ─── Modal box (stop/reopen/delete dialogs): glass ─── */
.modal-box {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 40px oklch(0 0 0 / 12%);
}

/* ─── Dark mode glass-overrides ─── */
body.dark .results-topbar {
  background: oklch(0.14 0.02 260 / 70%);
  border-block-end-color: oklch(1 0 0 / 8%);
}

body.dark .controls-bar {
  background: transparent;
}

body.dark .ctrl-pill {
  background: oklch(1 0 0 / 6%);
  border-color: oklch(1 0 0 / 10%);
}

body.dark .ctrl-pill:hover {
  background: oklch(1 0 0 / 10%);
  border-color: oklch(1 0 0 / 15%);
}

body.dark .ctrl-pill.ctrl-active {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.65 0.20 155));
  border-color: transparent;
  color: oklch(1 0 0);
}

body.dark .settings-panel {
  background: oklch(0.18 0.02 260 / 85%);
  border-color: oklch(1 0 0 / 10%);
}

body.dark .seg-control {
  background: oklch(1 0 0 / 4%);
}

body.dark .seg-btn.active {
  background: oklch(1 0 0 / 8%);
  color: var(--green);
}

/* ─── Quiz-mode: facit-knap ─── */
.ctrl-facit.ctrl-active {
  background: linear-gradient(135deg, oklch(0.72 0.19 155), oklch(0.65 0.20 155)) !important;
  border-color: transparent !important;
  color: oklch(1 0 0) !important;
}

/* ─── Quiz-mode: table rows ─── */
/* ─── 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: light-dark(oklch(0 0 0 / 4%), oklch(1 0 0 / 6%));
  color: var(--muted);
}

/* ─── Quiz options-only mode ─── */
/* 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;
}

/* ─── Quiz-mode: table rows ─── */
/* 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); }

/* ─── Responsive results glass ─── */
@media (max-width: 480px) {
  .results-topbar {
    padding-inline: 0.75rem;
    height: 48px;
    gap: 0.5rem;
  }

  /* /p stays visible on mobile — it is part of the "logo" */

  /* Lobby code: stack URL above code, reduce size */
  .lobby-link {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .lobby-url-part {
    font-size: clamp(1.2rem, 4vw, 1.8rem);
  }

  .lobby-code {
    font-size: clamp(60px, 18vw, 100px);
    letter-spacing: 0.08em;
  }

  /* Result diagram: reduce horizontal padding */
  .results-content {
    padding-inline: 0.75rem;
  }

  /* Result: start from top on mobile instead of vertical centering */
  .results-view.center-content .results-content {
    justify-content: flex-start;
    padding-block-start: 2rem;
  }

  /* Question text: slightly smaller */
  .results-question-bar {
    font-size: var(--step-0);
    padding-inline: 0;
  }

  /* Kontrolbar-pills: kompakt */
  .ctrl-pill {
    font-size: var(--step--1);
    padding: 0.35rem 0.65rem;
  }
}


/* ==========================================================================
   QUILL — inline WYSIWYG editor for poll questions
   ========================================================================== */
#pollQuillWrap {
  & .ql-toolbar.ql-snow {
    border: none;
    border-block-end: 1.5px solid var(--border);
    background: transparent;
    padding-inline: 0;
    font-family: var(--sans);

    & .ql-stroke { stroke: var(--text); }
    & .ql-fill { fill: var(--text); }
    & .ql-picker-label { color: var(--text); font-family: var(--sans); }
    & button:hover .ql-stroke, & .ql-active .ql-stroke { stroke: var(--accent); }
    & button:hover .ql-fill, & .ql-active .ql-fill { fill: var(--accent); }
    & .ql-picker-label:hover { color: var(--accent); }
    & .ql-picker-options { background: var(--card); border-color: var(--border); color: var(--text); font-family: var(--sans); }
    & button { border-radius: var(--r-s); }
  }

  & .ql-container.ql-snow {
    border: none;
    font-family: var(--font-body);
    font-size: var(--step-0);
  }

  & .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;

    &:focus { border-block-end-color: var(--accent); outline: none; }
  }

  & .ql-editor.ql-blank::before {
    color: var(--muted);
    font-style: normal;
    left: 0;
  }

  & img {
    max-inline-size: 100%;
    max-block-size: 45dvh;
    block-size: auto;
    object-fit: contain;
    cursor: pointer;
    display: inline-block;
  }

  & .quill-extra-tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-block-start: 0.4rem;
  }

  & .quill-extra-tools .quill-hint {
    font-size: var(--step--1);
    color: var(--muted);
  }
}

/* Student-side: question text rendered from markdown */
.question-text {
  /* Already exists — just ensure images are responsive */
  & 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);
  }
  & p { margin-block-end: 0.5em; }
  & p:last-child { margin-block-end: 0; }
}

/* Results-side: question in toolbar renders markdown */
.results-question-bar {
  & img {
    max-inline-size: 100%;
    max-block-size: 50dvh;
    block-size: auto;
    object-fit: contain;
  }
  & p { margin: 0; display: inline; }
}

/* =========================================================
   Image size classes — work in editor, student and results.
   Teacher clicks an image in the editor to pick a size.
   ========================================================= */
#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;
}

/* =========================================================
   Floating image resize toolbar (appears below selected img)
   ========================================================= */
.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;
}

/* =========================================================
   Preview dialog — shows question as it will look on screen
   ========================================================= */
.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;
}