/* =============================================================================
   public/rollespil/style.css — Rollespil (amber accent via data-tool)
   Bygger på /rolig.css. Én fil til elevsiden, opret-siden, lærersiden og
   storskærmen — sektionerne nedenfor står i den rækkefølge.
   ============================================================================= */

.muted { color: var(--ink-3); }
/* rolig.css giver fx .error-state display:flex, og det vinder over
   hidden-attributten. Siderne skjuler sektioner med hidden, så den skal vinde. */
[hidden] { display: none !important; }

/* Mørkere amber til tekst og tynde streger: den rene amber er for lys til
   brødtekst på papir. */
body[data-tool="rollespil"] {
  --accent-ink: oklch(from var(--accent) calc(l - 0.18) c h);
}

/* =============================================================================
   Tekst fra læreren (renderText): afsnit og fed
   ============================================================================= */

.rc-block p, .cc-body p, .phase-text p, .t-text p {
  margin-block-end: var(--s-2);
  line-height: 1.6;
  text-wrap: pretty;
}
.rc-block p:last-child, .cc-body p:last-child, .phase-text p:last-child, .t-text p:last-child { margin-block-end: 0; }

/* Lange ord uden mellemrum — en kilde-URL i et rollekort eller en fase, et
   langt elevnavn, et forslag uden mellemrum — kan ellers ikke brydes og
   skubber hele siden ud over telefonens kant (vandret rulning). Kun på
   tekst-elementerne: sat på hele siden, ville fx faseuret "2:45" kunne
   blive brudt i to, når fasens navn er langt. */
.role-card, .case-card, .t-text,
.phase-name, .phase-text,
.s-badge-role, .s-badge-meta,
.s-group-list li, .s-panel, .vote-text,
.name-chips, .board-result, .board-proposal,
.d-phase-name, .d-phase-text, .d-members {
  overflow-wrap: anywhere;
}

/* =============================================================================
   Rollekort og casekort
   ============================================================================= */

.role-card, .case-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  font-size: 14px;
  color: var(--ink);
}

.rc-top { margin-block-end: var(--s-4); }
.rc-top .kicker { margin-block-end: var(--s-2); }

.rc-title, .cc-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

.rc-votes {
  display: inline-block;
  margin-block-start: var(--s-2);
  padding: 3px 10px;
  border-radius: var(--r-full);
  background: oklch(from var(--accent) l c h / 14%);
  color: var(--accent-ink);
  font: 600 11px var(--mono);
  letter-spacing: 0.04em;
}

.rc-block {
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--rule);
}

.rc-hd {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-block-end: var(--s-2);
}

.rc-goal p { font-weight: 600; }

.rc-args {
  list-style: none;
  display: grid;
  gap: var(--s-2);

  li {
    padding-inline-start: var(--s-3);
    border-inline-start: 2px solid var(--rule-2);
    font-style: italic;
    color: var(--ink-2);
  }
}

/* Skjult information og beføjelse skal kunne ses på afstand af eleven selv. */
.rc-secret, .rc-power {
  margin-block-start: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: none;
  border-radius: var(--r-l);
}
.rc-secret {
  background: oklch(from var(--plum) l c h / 8%);
  border-inline-start: 3px solid var(--plum);
  .rc-hd { color: var(--plum); }
}
.rc-power {
  background: oklch(from var(--accent) l c h / 10%);
  border-inline-start: 3px solid var(--accent);
  .rc-hd { color: var(--accent-ink); }
}
.rc-note {
  font-size: 12px;
  color: var(--ink-3);
}

.cc-title { margin-block-end: var(--s-3); }

/* =============================================================================
   ELEVSIDEN (spil.html)
   ============================================================================= */

.s-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-block-end: var(--s-2);
  text-wrap: balance;
}

.s-lead {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-block-end: var(--s-5);
  text-wrap: pretty;
}

.name-form {
  display: grid;
  gap: var(--s-3);
}

/* Kun elevens telefonpaneler. De delte små knapper er stadig 36 px på
   lærer/storskærm; her vokser trykfladen uden nye farver eller bredder. */
@media (max-width: 600px) {
  /* #priorityBlocks (henvendelser) og #committeeArea (udvalg) manglede før: deres knapper
     og "Støttes af"-felter var 32-36 px høje. */
  .student-page #playSection :is(#budgetArea, #motionArea, #activityBlocks, #priorityBlocks, #committeeArea, #representativeArea) :is(button, a) {
    min-block-size: 44px;
  }
  .student-page #playSection :is(#budgetArea, #motionArea, #activityBlocks, #priorityBlocks, #committeeArea, #representativeArea) .f-check {
    min-block-size: 44px;
  }
  .student-page #playSection :is(#budgetArea, #motionArea, #activityBlocks, #priorityBlocks, #committeeArea, #representativeArea) summary {
    min-block-size: 44px;
  }
}

/* Venteskærm i lobbyen */
.s-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--s-4);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-l);
  font: 500 12px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-block-end: var(--s-5);
}

/* Øverst: hvilken gruppe og hvilken rolle */
.s-badge {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--accent);
  color: var(--paper);
  margin-block-end: var(--s-4);
}
.s-badge-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  flex-shrink: 0;
  border-radius: var(--r-l);
  background: oklch(1 0 0 / 22%);
  font: 700 30px var(--mono);
  line-height: 1;

  small {
    font: 600 9px var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-block-end: 3px;
  }
}
.s-badge-role {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}
.s-badge-meta {
  font: 500 11px var(--mono);
  letter-spacing: 0.04em;
  opacity: 0.9;
  margin-block-start: 2px;
}

/* Faselinjen: fasens navn, timer og tekst */
.phase-bar {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--s-3) var(--s-4);
  margin-block-end: var(--s-4);
  background: var(--paper);
}
.phase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}
.phase-step {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.phase-name {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}
.phase-clock {
  font: 700 20px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);

  &.over { color: var(--red); }
}
.phase-text {
  font-size: 13px;
  color: var(--ink-2);
  margin-block-start: var(--s-2);
}

/* Min gruppe */
.s-group {
  margin-block-end: var(--s-4);
  font-size: 13px;
}
.s-group-hd {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-block-end: var(--s-2);
}
.s-group-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  li {
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    color: var(--ink-2);
  }
  li.me {
    border-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
  }
  small { color: var(--ink-3); font-weight: 400; }
}

/* Faner: Rollekort / Casekort */
.s-tabs {
  display: flex;
  margin-block-end: var(--s-3);
  margin-block-start: 0;
}
.s-tabs .seg-btn { font-size: 13px; padding: 8px 14px; min-block-size: 36px; }

/* Afstemning og eget forslag */
.s-panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--s-4);
  margin-block-end: var(--s-4);
  background: var(--paper);

  &.open { border-color: var(--accent); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 14%); }
}
.s-panel-hd {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 15px;
  font-weight: 700;
  margin-block-end: var(--s-2);
}
.s-panel-sub {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-block-end: var(--s-3);
}
.vote-options {
  display: grid;
  gap: var(--s-2);
}
.vote-btn { min-block-size: 48px; }
.vote-btn .vote-text { flex: 1; }
.vote-btn.abstain { color: var(--ink-3); }

.s-result {
  margin-block-start: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-m);
  background: var(--paper-2);
  font-size: 13px;
  font-weight: 600;

  &.passed { background: oklch(from var(--green) l c h / 12%); color: oklch(from var(--green) calc(l - 0.1) c h); }
}

/* Gruppens stemmer pr. rolle (elev og lærer) */
.role-votes {
  list-style: none;
  display: grid;
  gap: 4px;
  margin-block-start: var(--s-3);
  font-size: 12px;
  color: var(--ink-2);

  li { display: flex; gap: var(--s-2); align-items: center; }
  /* Rollenavnet må aldrig klemmes til ét bogstav pr. linje */
  .rv-role { flex: 1; min-inline-size: 8ch; }
  .rv-choice {
    max-inline-size: 60%;
    overflow-wrap: anywhere;
    text-align: end;
    font: 600 11px var(--mono);
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--paper-2);
    color: var(--ink-3);
  }
  .rv-choice.set { background: var(--accent); color: var(--paper); }
}

.proposal-input {
  inline-size: 100%;
  min-block-size: 80px;
  resize: vertical;
  font: 14px var(--sans);
  padding: 10px 12px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  background: var(--paper);
  color: var(--ink);
  margin-block-end: var(--s-2);

  &:focus { outline: none; border-color: var(--accent); }
}
@supports (field-sizing: content) { .proposal-input { field-sizing: content; } }

.s-msg {
  font-size: 12px;
  color: var(--ink-3);
  min-block-size: 1.2em;
}
.s-msg.error { color: var(--red); }
/* Kun for skærmlæsere (fx kvitteringen for en stemme i spil.html) */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Budgettets ugemte tekst efter et faseskift (budget.js, showLost) */
.budget-lost { display: grid; gap: var(--s-2); justify-items: start; margin-block-end: var(--s-4); }
.budget-lost textarea { inline-size: 100%; }

/* Spørg din rådgiver (spil.html) og rådgiverens log (teacher.html) */
.ask-privacy {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  margin-block-start: var(--s-2);
}
.ask-list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}
.ask-meta {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  margin-block-end: 4px;
}
.ask-q {
  justify-self: start;
  max-inline-size: 100%;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-l);
  background: oklch(from var(--accent) l c h / 10%);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.ask-a {
  margin-block-start: var(--s-2);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  overflow-wrap: anywhere;

  p + p { margin-block-start: var(--s-2); }
  &.error { color: var(--red); font-size: 12px; }
}
.ask-item { display: grid; }
.ask-usage {
  margin-block-start: 4px;
  font: 500 11px var(--mono);
  color: var(--ink-3);
}

/* Kvitteringen under stemmeknapperne (spil.html): "Stemt: B · …" */
.s-receipt {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin-block: var(--s-3) 0;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-m);
  font-size: 13px;
  color: var(--ink-3);
  background: var(--paper-2);
  transition: background-color 0.4s;

  & .hi { flex: none; margin-block-start: 0.15em; font-size: 16px; }
  & small { display: block; margin-block-start: 2px; font-size: 12px; color: var(--ink-3); font-weight: 400; }
  & b { font-weight: 600; }
  &.done { color: var(--ink); background: oklch(from var(--green) l c h / 10%); }
  &.done .hi { color: var(--green); }
  &.fresh { background: oklch(from var(--green) l c h / 24%); }
  &.error { color: var(--red); background: oklch(from var(--red) l c h / 8%); }
}

.s-end {
  padding: var(--s-4);
  border-radius: var(--r-xl);
  background: var(--paper-2);
  margin-block-end: var(--s-4);

  h2 { font-size: 18px; margin-block-end: var(--s-1); }
  p { font-size: 13px; color: var(--ink-2); }
}

.conn-banner {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  padding: 6px var(--s-4);
  background: var(--amber);
  color: var(--ink);
  font: 500 12px var(--sans);
  text-align: center;
  z-index: 50;
}

/* =============================================================================
   OPRET-SIDEN (create.html)
   ============================================================================= */

.c-page {
  max-inline-size: 1180px;
  margin-inline: auto;
  padding: var(--s-4) var(--s-5) var(--s-7);
  min-block-size: 100dvh;
  background: var(--paper);
}

.c-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .c-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  /* Formularen er lang; forhåndsvisningen bliver stående med sin egen rullebjælke,
     så læreren kan se kortet, mens hun skriver. */
  .c-preview {
    position: sticky;
    inset-block-start: var(--s-4);
    max-block-size: calc(100dvh - 2 * var(--s-4));
    overflow: auto;
    overscroll-behavior: contain;
    padding-inline-end: var(--s-2);
  }
}

/* Gem-knappen øverst i forhåndsvisningen — altid inden for rækkevidde */
.c-save {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background: var(--paper);
  padding-block-end: var(--s-2);
  margin-block-end: var(--s-3);
  border-block-end: 1px solid var(--rule);

  .s-msg:empty { display: none; }
}

.c-modebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-4);

  .c-modes { margin: 0; }
  .c-modes .seg-btn { min-block-size: 36px; padding-inline: 16px; font-size: 13px; }
  .c-tools { margin: 0; }
}

.c-draftnote {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-block-end: var(--s-4);
}

/* =============================================================================
   FORMULAREN (create.html)
   ============================================================================= */

.f-form { display: grid; gap: var(--s-5); }

.f-sec {
  display: grid;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--rule);
}
.f-hd {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;

  span {
    font: 500 10px var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-3);
  }
}
.f-sec-hint { margin-block-start: calc(-1 * var(--s-2)); }

.f-field {
  display: grid;
  gap: 6px;
  min-inline-size: 0;
}
.f-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.f-hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}
.f-area {
  resize: vertical;
  line-height: 1.5;
  min-block-size: 44px;
}
/* Feltet vokser med teksten (Chrome) — men et tomt felt skal stadig vise, hvor
   meget der er plads til at skrive. */
@supports (field-sizing: content) {
  .f-area { field-sizing: content; max-block-size: 60vh; min-block-size: 3.4em; }
  .f-area.f-area-lg { min-block-size: 10em; }
}
.f-form .text-input { min-block-size: 44px; }
.f-form select.text-input { appearance: auto; }

.f-row {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr) 110px;
}
.f-row:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.f-row-narrow { grid-template-columns: 180px; }

.f-list { display: grid; gap: var(--s-2); }
.f-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-2);
  align-items: start;

  .btn-icon { inline-size: 44px; block-size: 44px; }
}
.f-option {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.f-subitem {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-m);
}

.f-add {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 36px;
  padding: 6px 12px;
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink-2);
  font: 500 12px var(--sans);
  cursor: pointer;

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

.f-check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 13px;
  color: var(--ink-2);
  min-block-size: 32px;
  cursor: pointer;

  input { inline-size: 18px; block-size: 18px; accent-color: var(--accent); flex-shrink: 0; }
}
.f-check-lg { font-size: 14px; font-weight: 600; color: var(--ink); }

/* En rolle: foldes ud og ind */
.f-items { display: grid; gap: var(--s-2); }
.f-item {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: var(--paper);

  > summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    min-block-size: 48px;
    cursor: pointer;
    list-style: none;
  }
  > summary::-webkit-details-marker { display: none; }
  > summary .chev { color: var(--ink-3); transition: transform 0.15s; display: inline-flex; }
  &[open] > summary .chev { transform: rotate(90deg); }
  &[open] { border-color: var(--rule-2); }
}
.f-item-title { font-weight: 600; font-size: 14px; }
.f-item-meta {
  margin-inline-start: auto;
  font: 500 11px var(--mono);
  color: var(--ink-3);
  text-align: end;
}
.f-item-body {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-2) var(--s-4) var(--s-4);
  border-block-start: 1px solid var(--rule);
}
.f-item-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}

/* En fase */
.f-phases { display: grid; gap: var(--s-2); }
.f-phase {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);
}
.f-phase-no {
  font: 700 14px var(--mono);
  color: var(--accent-ink);
  padding-block-start: 30px;
}
.f-phase-body { display: grid; gap: var(--s-2); min-inline-size: 0; }
.f-phase-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-start: 24px;

  .btn-icon { inline-size: 36px; block-size: 36px; }
}
@media (max-width: 520px) {
  .f-phase { grid-template-columns: minmax(0, 1fr); }
  .f-phase-no { padding: 0; }
  .f-phase-tools { flex-direction: row; padding: 0; }
  .f-row { grid-template-columns: minmax(0, 1fr); }
}

.btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.t-link:disabled { opacity: 0.4; cursor: not-allowed; }
.t-link.danger { color: var(--red); border-color: oklch(from var(--red) l c h / 35%); }
.t-link.danger:hover { background: oklch(from var(--red) l c h / 8%); }

.c-h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-block-end: var(--s-2);
}
.c-lead {
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
  margin-block-end: var(--s-4);
  max-inline-size: 60ch;
}

.c-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-end: var(--s-3);
}

.c-json {
  inline-size: 100%;
  min-block-size: 380px;
  resize: vertical;
  font: 12px/1.5 var(--mono);
  padding: var(--s-3);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  background: var(--paper-2);
  color: var(--ink);
  tab-size: 2;

  &:focus { outline: none; border-color: var(--accent); background: var(--paper); }
}

.c-drop.dragover .c-json { border-color: var(--accent); border-style: dashed; }

.c-actions {
  display: flex;
  gap: var(--s-2);
  margin-block-start: var(--s-3);
}

.c-msgs {
  display: grid;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
}
.c-msg {
  padding: 10px 14px;
  border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 13px;
  line-height: 1.5;

  ul { padding-inline-start: 18px; margin-block-start: 4px; }
  &.error { background: oklch(from var(--red) l c h / 8%); border-inline-start: 3px solid var(--red); color: oklch(from var(--red) calc(l - 0.08) c h); }
  &.warn  { background: oklch(from var(--amber) l c h / 12%); border-inline-start: 3px solid var(--amber); color: var(--ink); }
  &.ok    { background: oklch(from var(--green) l c h / 10%); border-inline-start: 3px solid var(--green); color: var(--ink); }
}

.c-empty {
  padding: var(--s-6) var(--s-5);
  border: 1px dashed var(--rule-2);
  border-radius: var(--r-xl);
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.6;
}

.c-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: var(--s-2);
  margin-block-end: var(--s-4);
}
.c-stat {
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);

  b { display: block; font: 700 20px var(--mono); }
  span { font: 500 10px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
}

.c-section-hd {
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-block: var(--s-5) var(--s-3);
}

.c-roles {
  display: grid;
  gap: var(--s-3);
}

.c-role {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  background: var(--paper);

  > summary {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 14px;
    min-block-size: 44px;
  }
  > summary::-webkit-details-marker { display: none; }
  > summary .chev { color: var(--ink-3); transition: transform 0.15s; }
  &[open] > summary .chev { transform: rotate(90deg); }
  > summary .c-role-meta { margin-inline-start: auto; font: 500 11px var(--mono); color: var(--ink-3); }
  .role-card { border: none; border-block-start: 1px solid var(--rule); border-radius: 0 0 var(--r-xl) var(--r-xl); }
}

.c-phases {
  list-style: none;
  counter-reset: phase;
  display: grid;
  gap: var(--s-2);

  li {
    counter-increment: phase;
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: var(--s-1) var(--s-3);
    padding: var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-l);
    font-size: 13px;
  }
  li::before {
    content: counter(phase);
    font: 700 13px var(--mono);
    color: var(--accent-ink);
  }
  .ph-name { font-weight: 600; }
  .ph-time { font: 500 12px var(--mono); color: var(--ink-3); }
  .ph-text { grid-column: 2 / -1; color: var(--ink-2); }
  .ph-vote { color: var(--accent-ink); font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
}

.c-options {
  list-style: none;
  display: grid;
  gap: var(--s-2);
  font-size: 13px;

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

.t-text { font-size: 13px; color: var(--ink-2); }
.t-list { padding-inline-start: 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 6px; line-height: 1.5; }

/* AI-prompt-dialogen */
.prompt-dialog {
  border: none;
  border-radius: var(--r-xl);
  padding: 0;
  inline-size: min(720px, calc(100% - 2 * var(--s-4)));
  max-block-size: 86dvh;
  margin: auto;
  box-shadow: var(--shadow-hover);
  background: var(--paper);
  color: var(--ink);

  &[open] { display: flex; flex-direction: column; }
  &::backdrop { background: oklch(0 0 0 / 40%); }
}
.pd-hd {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--rule);
  h2 { font-size: 16px; flex: 1; }
}
.pd-body {
  padding: var(--s-4) var(--s-5);
  overflow: auto;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);

  p { margin-block-end: var(--s-3); }
  pre {
    white-space: pre-wrap;
    font: 11px/1.5 var(--mono);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
    padding: var(--s-3);
    max-block-size: 40dvh;
    overflow: auto;
    color: var(--ink);
  }
}
.pd-foot {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  padding: var(--s-3) var(--s-5);
  border-block-start: 1px solid var(--rule);
}

/* =============================================================================
   LÆRERSIDEN (teacher.html)
   ============================================================================= */

.t-page {
  max-inline-size: 1280px;
  margin-inline: auto;
  min-block-size: 100dvh;
  background: var(--paper);
  padding-block-end: var(--s-7);
}

.t-topbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-block-end: 1px solid var(--rule);
  flex-wrap: wrap;
  font-size: 13px;
}
.t-code {
  font: 700 15px var(--mono);
  padding: 4px 10px;
  border-radius: var(--r-s);
  background: var(--accent);
  color: var(--paper);
}
.t-title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-inline-size: 40ch;
}
.t-spacer { flex: 1; }
.t-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  min-block-size: 36px;
  border-radius: var(--r-s);
  border: 1px solid var(--rule-2);
  color: var(--ink);
  text-decoration: none;
  font: 500 12px var(--sans);
  background: transparent;
  cursor: pointer;

  &:hover { background: var(--paper-2); }
}
.sse-dot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--green);

  &.off { background: var(--red); }
}

.t-main {
  padding: var(--s-5);
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 1000px) {
  .t-main.running { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

.t-card {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  background: var(--paper);
}
.t-card-hd {
  font: 500 11px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-3);
  margin-block-end: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Lobby */
.t-lobby {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .t-lobby { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
}
.t-join-url {
  font: 700 clamp(22px, 3vw, 32px) var(--mono);
  letter-spacing: -0.01em;
  margin-block-end: var(--s-2);
  overflow-wrap: anywhere;

  span { color: var(--accent-ink); }
}
.t-count {
  font: 500 13px var(--mono);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block: var(--s-3);

  b { color: var(--ink); font-size: 22px; margin-inline-end: 4px; }
}
.name-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;

  li {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-inline: 10px 2px;
    border-radius: var(--r-full);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    font-size: 13px;
    min-block-size: 32px;
  }
  li.no-x { padding-inline-end: 10px; }
}
.chip-x {
  border: none;
  background: transparent;
  color: var(--ink-3);
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &:hover { background: oklch(from var(--red) l c h / 12%); color: var(--red); }
}

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-m);
  overflow: hidden;

  button {
    inline-size: 44px;
    block-size: 44px;
    border: none;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    font-size: 16px;
    &:hover { background: var(--paper-2); }
    &:disabled { color: var(--ink-4); cursor: not-allowed; }
  }
  output {
    min-inline-size: 48px;
    text-align: center;
    font: 700 18px var(--mono);
  }
}
.t-plan {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-block: var(--s-3) var(--s-4);
}
.t-plan .warn { color: oklch(from var(--amber) calc(l - 0.2) c h); }

/* Faselinjen hos læreren */
.t-phase {
  display: grid;
  gap: var(--s-3);
}
.t-phase-top {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.t-phase-name {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex: 1;
  min-inline-size: 12ch;
}
.t-clock {
  font: 700 34px var(--mono);
  font-variant-numeric: tabular-nums;

  &.over { color: var(--red); }
}
.t-phase-btns {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;

  .btn { inline-size: auto; padding-inline: 18px; block-size: 44px; }
}
.phase-dots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;

  span {
    block-size: 6px;
    flex: 1;
    min-inline-size: 16px;
    border-radius: var(--r-full);
    background: var(--rule);
  }
  span.done { background: oklch(from var(--accent) l c h / 45%); }
  span.now { background: var(--accent); }
}

/* Grupperne */
.t-groups {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  /* Én stor gruppe (fx hele klassen som Folketing): hele bredden, så
     navnene ligger side om side i stedet for i en smal søjle. */
  &.single { grid-template-columns: minmax(0, 1fr); }
}
.t-group {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: var(--s-3) var(--s-4) var(--s-4);
  background: var(--paper);
}
.t-group-hd {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-block-end: var(--s-2);

  b { font: 700 16px var(--mono); }
  span { font-size: 12px; color: var(--ink-3); }
}
.t-group-result {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-s);
  background: var(--paper-2);
  margin-block-end: var(--s-2);

  &.passed { background: oklch(from var(--green) l c h / 12%); color: oklch(from var(--green) calc(l - 0.12) c h); }
}
.t-slots {
  list-style: none;
  display: grid;
  gap: 2px;
}
.t-slot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--s-2);
  padding-block: 6px;
  border-block-start: 1px solid var(--rule);
  font-size: 13px;
}
.t-slot-role {
  font: 500 11px var(--sans);
  color: var(--ink-3);
  grid-column: 1;
}
.t-slot-choice {
  grid-row: 1;
  grid-column: 2;
  font: 600 11px var(--mono);
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: var(--paper-2);
  color: var(--ink-3);
  align-self: start;

  &.set { background: var(--accent); color: var(--paper); }
}
.t-slot-names {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.t-missing { color: var(--ink-4); font-style: italic; font-size: 12px; }

.p-name {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rule-2);
  border-radius: var(--r-full);
  background: var(--paper);
  font-size: 13px;
  overflow: hidden;
  /* Et langt navn uden mellemrum skubbede krydset (fjern elev) ud over
     pillens kant, hvor overflow: hidden gemte det. Nu brydes navnet, og
     krydset bliver stående. */
  max-inline-size: 100%;

  button {
    border: none;
    background: transparent;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    min-block-size: 30px;
  }
  .p-swap { padding-inline: 10px 6px; min-inline-size: 0; overflow-wrap: anywhere; text-align: start; }
  .p-x { inline-size: 26px; flex-shrink: 0; align-self: stretch; color: var(--ink-4); display: inline-flex; align-items: center; justify-content: center; }
  .p-x:hover { color: var(--red); background: oklch(from var(--red) l c h / 10%); }
  .p-swap:hover { background: var(--paper-2); }

  &.picked { border-color: var(--accent); box-shadow: 0 0 0 2px oklch(from var(--accent) l c h / 30%); }
}

.t-swap-hint {
  font-size: 13px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-m);
  background: oklch(from var(--accent) l c h / 12%);
  margin-block-end: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);

  button { margin-inline-start: auto; }
}

/* Sidekolonnen: faner med lærermateriale */
.t-side .seg-control { margin-block: 0 var(--s-3); display: flex; }
.t-side .seg-btn { flex: 1; min-block-size: 36px; }
.t-side .role-card { padding: var(--s-4); margin-block-end: var(--s-3); }
.t-side .role-card .rc-title { font-size: 17px; }
.t-side h4 {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-block: var(--s-4) var(--s-2);
}
.t-side h4:first-child { margin-block-start: 0; }

.t-danger {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  align-items: center;
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
  margin-block-start: var(--s-3);
}

/* Resultattavle (lærer + storskærm) */
.board {
  display: grid;
  gap: var(--s-2);
}
.board-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-l);

  &.passed { border-color: oklch(from var(--green) l c h / 50%); background: oklch(from var(--green) l c h / 6%); }
}
.board-group { font: 700 14px var(--mono); }
.board-result { font-weight: 600; font-size: 14px; }
.board-proposal { font-size: 12px; color: var(--ink-3); margin-block-start: 2px; }
.board-tally {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-block-start: 6px;

  span {
    font: 600 11px var(--mono);
    padding: 2px 8px;
    border-radius: var(--r-full);
    background: var(--paper-2);
    color: var(--ink-2);
  }
  span.win { background: var(--green); color: var(--paper); }
}

/* =============================================================================
   STORSKÆRMEN (display.html)
   ============================================================================= */

body.display {
  background: var(--paper);
}
.d-page {
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 3vw, 48px);
  gap: clamp(16px, 2.5vw, 36px);
}

.d-lobby {
  flex: 1;
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .d-lobby { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.d-title {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
  margin-block-end: clamp(12px, 2vw, 24px);
}
.d-url {
  font: 700 clamp(32px, 6vw, 88px) var(--mono);
  letter-spacing: -0.02em;
  line-height: 1;
  overflow-wrap: anywhere;

  .d-url-host { color: var(--ink-3); font-weight: 500; }
  .d-url-code { color: var(--accent-ink); }
}
.d-count {
  font: 500 clamp(14px, 1.5vw, 20px) var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-block: clamp(16px, 2vw, 32px) var(--s-3);

  b { color: var(--ink); font-size: 1.8em; margin-inline-end: 6px; }
}
.d-qr {
  display: flex;
  justify-content: center;

  img { inline-size: min(100%, 360px); block-size: auto; image-rendering: pixelated; border-radius: var(--r-l); }
}
.d-names {
  font-size: clamp(14px, 1.3vw, 18px);
}

.d-phase {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  flex-wrap: wrap;
}
.d-phase-name {
  flex: 1;
  min-inline-size: 12ch;
  font-size: clamp(24px, 3.4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;

  small {
    display: block;
    font: 500 clamp(11px, 1vw, 14px) var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    margin-block-end: 6px;
  }
}
.d-clock {
  font: 700 clamp(48px, 9vw, 140px) var(--mono);
  font-variant-numeric: tabular-nums;
  line-height: 1;

  &.over { color: var(--red); }
}
.d-phase-text {
  font-size: clamp(15px, 1.6vw, 24px);
  color: var(--ink-2);
  line-height: 1.45;
  max-inline-size: 70ch;
}

.d-groups {
  display: grid;
  gap: clamp(8px, 1.2vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 18vw, 300px), 1fr));
}
.d-group {
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: clamp(10px, 1.2vw, 18px);
}
.d-group-no {
  font: 700 clamp(18px, 2vw, 28px) var(--mono);
  color: var(--accent-ink);
  margin-block-end: 6px;
}
.d-members {
  list-style: none;
  display: grid;
  gap: 3px;
  font-size: clamp(13px, 1.15vw, 17px);

  li { display: flex; justify-content: space-between; gap: var(--s-2); }
  small { color: var(--ink-3); font-size: 0.8em; text-align: end; }
}

.d-page .board-row { padding: clamp(10px, 1.2vw, 18px) clamp(12px, 1.6vw, 24px); grid-template-columns: clamp(80px, 9vw, 140px) minmax(0, 1fr); }
.d-page .board-group { font-size: clamp(16px, 1.8vw, 26px); }
.d-page .board-result { font-size: clamp(16px, 1.8vw, 26px); }
.d-page .board-tally span { font-size: clamp(12px, 1.1vw, 16px); }

.d-noauth {
  margin: auto;
  max-inline-size: 44ch;
  text-align: center;
  color: var(--ink-2);
  line-height: 1.6;
}

/* =============================================================================
   Tilgængelighed
   ============================================================================= */

button:focus-visible, a:focus-visible, textarea:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
  .s-badge, .t-code, .rv-choice.set, .t-slot-choice.set { border: 1px solid CanvasText; }
}

/* =============================================================================
   PRINT-VINDUET på lærersiden (teacher.html)
   ============================================================================= */

.p-form {
  display: grid;
  gap: var(--s-4);

  > p { margin: 0; }
}
.p-count {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 140px));
  gap: var(--s-3);
  margin-block: var(--s-1) 0;
}
.p-form select.text-input { appearance: auto; min-block-size: 44px; }
.pd-foot .s-msg { margin-inline-end: auto; align-self: center; }

/* =============================================================================
   BESKEDER FRA LÆREREN (spil.html + teacher.html)
   ============================================================================= */

.s-msgs {
  margin-block-end: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-xl);
  background: oklch(from var(--accent) l c h / 10%);
  border: 1px solid oklch(from var(--accent) l c h / 35%);
}
.s-msgs-hd {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
  margin-block-end: var(--s-2);
}
.msg-list {
  list-style: none;
  display: grid;
  gap: var(--s-3);
}
.msg-item + .msg-item {
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--rule);
}
.msg-meta {
  font: 500 11px var(--mono);
  color: var(--ink-3);
  margin-block-end: 2px;
}
.msg-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.msg-dialog .msg-text { font-size: 17px; font-weight: 600; }
.msg-dialog .pd-hd h2 { display: flex; align-items: center; gap: var(--s-2); }

/* Lærerens send-vindue */
.msg-quick {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.msg-sent {
  list-style: none;
  display: grid;
  gap: var(--s-2);

  li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--s-3);
    align-items: start;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--rule);
    border-radius: var(--r-m);
  }
  .msg-text { font-size: 13px; grid-column: 1; }
  .t-link { grid-row: 1 / span 2; grid-column: 2; }
}

/* Forberedte beskeder i lærerens besked-vindue */
.msg-prepared li { grid-template-columns: minmax(0, 1fr) auto; }
.msg-prepared .f-hint { grid-column: 1; }
/* × ud for feltet, ikke ud for feltets overskrift */
.f-list-row.f-row-end { align-items: end; }

/* =============================================================================
   RÅDGIVEREN — lærerens vindue (teacher.html)
   ============================================================================= */
.t-link.on {
  color: var(--accent-ink);
  border-color: var(--accent);
  background: oklch(from var(--accent) l c h / 10%);
}
.adv-key-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);

  .text-input { flex: 1; min-inline-size: 0; }
  code { font: 13px var(--mono); color: var(--ink); }
  &.adv-expiry { margin-block-start: var(--s-2); font-size: 13px; }
  &.adv-expiry select { flex: 0 1 auto; inline-size: auto; min-block-size: 36px; padding-block: 4px; appearance: auto; }
  .muted { font-size: 12px; }
}
.adv-log {
  margin-block-start: var(--s-2);
  padding-block-start: 0;
  border-block-start: 0;

  .ask-item + .ask-item {
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--rule);
  }
}

/* Statuslinjen under en knap i et panel (forslag, rådgiver) — ikke klistret til knappen */
.s-panel .btn + .s-msg { margin-block-start: var(--s-2); }

/* Rådgiveren til/fra i lærerens lobby (over Start-knappen) */
.t-lobby-adv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-3);
  margin-block-end: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-m);

  .f-check { flex: 1; }
  .f-hint { flex-basis: 100%; margin: 0; }
}

/* Fast elevnavigation med plads til telefonens nederste sikkerhedsområde. */
/* Fast scrollbar sikrer også ens bredde for position:fixed-navigationen. */
.student-document { overflow-y: scroll; scrollbar-gutter: stable; }
#playSection { padding-block-end: calc(80px + env(safe-area-inset-bottom, 0px)); }
.student-tabs {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s-1);
  padding-block: var(--s-1) calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--s-2), env(safe-area-inset-left, 0px)) max(var(--s-2), env(safe-area-inset-right, 0px));
  border-block-start: 1px solid var(--rule);
  background: var(--paper);

  button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-inline-size: 0;
    min-block-size: 48px;
    padding-inline: 2px;
    padding-block: var(--s-1);
    border: 1px solid transparent;
    border-radius: var(--r-m);
    background: transparent;
    color: var(--ink-2);
    font: 600 11px var(--sans);
    cursor: pointer;

    .hi { inline-size: 18px; block-size: 18px; }
    &[aria-selected="true"] {
      color: var(--ink);
      background: oklch(from var(--accent) l c h / 14%);
      border-color: var(--accent);
    }
    &:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  }
  .tab-new {
    position: absolute;
    inset-block-start: 2px;
    inset-inline-end: 2px;
    inline-size: 12px;
    block-size: 12px;
    background: oklch(0.55 0.22 27);
    border: 2px solid var(--paper);
    border-radius: var(--r-full);
  }
}
@media (max-width: 360px) {
  .student-tabs { gap: 0; }
  .student-tabs button { font-size: 10px; }
}
.s-badge-compact {
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-3);
  border-radius: var(--r-m);
  color: var(--ink);
  background: oklch(from var(--accent) l c h / 14%);

  .s-badge-group {
    display: block;
    inline-size: auto;
    block-size: auto;
    background: transparent;
    font: 500 12px var(--mono);
  }
  .s-badge-role { font-size: 14px; }
  .s-badge-meta { color: var(--ink-2); font-size: 10px; }
}
@media (min-width: 600px) {
  .student-tabs {
    padding-inline: max(var(--s-4), calc((100% - 680px) / 2));
  }
}

/* Elevens logo-linje skal ikke tage pladsen fra selve aktiviteten. */
.student-page {
  padding-block-start: var(--s-2);

  .page-header {
    min-block-size: 44px;
    padding-block: 0;
    margin-block-end: var(--s-3);
  }
  .page-header .brand {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}

/* På telefonen er siden selve læsefladen: ingen ekstra kortkant og
   indvendig sidemargen omkring rolle, case og aktivitetens paneler.
   Felter, knapper og deres fokusmarkeringer beholder deres egne kanter. */
@media (max-width: 600px) {
  .student-page {
    padding-inline: max(var(--s-4), env(safe-area-inset-left, 0px)) max(var(--s-4), env(safe-area-inset-right, 0px));

    .role-card, .case-card, .phase-bar, .s-panel {
      padding-inline: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .role-card, .case-card { padding-block: var(--s-3) 0; }
    .phase-bar { padding-block: 0 var(--s-3); }
    .s-panel {
      padding-block: var(--s-4) 0;
      border-block-start: 1px solid var(--rule);
    }

    .s-badge-compact {
      padding-block: var(--s-2) var(--s-3);
      padding-inline: 0;
      margin-block-end: var(--s-2);
      border-radius: 0;
      border-block-end: 1px solid var(--rule);
      background: transparent;
    }

    /* Bevar signalet om hemmelig viden og beføjelser med en farvet streg. */
    .rc-secret, .rc-power {
      padding-inline: var(--s-3) 0;
      border-radius: 0;
      background: transparent;
    }
  }
}

/* Fuldskærmsknappen ligger uden for den live-opdaterede storskærm. */
.d-screen-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-block: 0;
  padding-inline: var(--s-2);
  color: var(--ink-2);
  font: 500 12px var(--sans);

  button {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-block-size: 44px;
    cursor: pointer;
  }
  button {
    border: 0;
    background: transparent;
    color: var(--ink-3);
    padding-inline: var(--s-2);
    font: 500 11px var(--sans);
  }
  button:hover { color: var(--ink); background: var(--paper-2); }
  button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* Opdateringer ligger over bundfanerne uden at flytte indhold eller fokus. */
.student-notices {
  position: fixed;
  z-index: 40;
  inset-inline: var(--s-3);
  inset-block-end: calc(68px + env(safe-area-inset-bottom, 0px));
  max-inline-size: 440px;
  margin-inline: auto;
  max-block-size: 60dvh;
  overflow: auto;
  display: grid;
  gap: var(--s-2);
}
.student-notice {
  padding: var(--s-4);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-m);
  p { margin-block: var(--s-2) var(--s-3); white-space: pre-wrap; overflow-wrap: anywhere; }
}
.student-notice-actions {
  display: flex;
  gap: var(--s-2);
  button { min-block-size: 44px; }
}

.phase-clock.over {
  flex-basis: 100%;
  font: 600 13px var(--sans);
}
.d-clock.over {
  font: 600 24px var(--sans);
  line-height: 1.4;
  max-inline-size: 24ch;
}
.phase-task-label {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-block-end: var(--s-2);
}
.phase-task { color: var(--ink); font-weight: 600; }
.phase-details { margin-block-start: var(--s-3); }

/* Forløbsbygger: aktivitetslisten og den valgte aktivitet (create.html: flowSection) */
.flow-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.flow-heading > span { font: 500 11px var(--mono); color: var(--ink-3); }
.flow-component { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-3); min-block-size: 44px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper); color: var(--ink); text-align: start; cursor: pointer; }
.flow-component span { display: grid; gap: var(--s-1); }
.flow-component small { color: var(--ink-3); font: 400 11px/1.4 var(--sans); }
.flow-component strong { font: 600 12px var(--sans); }
.screen-hint { margin-block-start: var(--s-2); padding: var(--s-2) var(--s-3); border-inline-start: 3px solid var(--accent); background: var(--paper-2); color: var(--ink-2); }
.flow-component:hover { border-color: var(--accent); background: var(--paper-2); }
.flow-number { font: 500 12px var(--mono); color: var(--accent); }
.flow-card-tools { display: flex; }
.flow-editor { padding: var(--s-4); border-block-start: 1px solid var(--rule); display: grid; gap: var(--s-3); }
@media (max-width: 480px) {
  .flow-card-tools { margin-inline-start: auto; }
  .flow-component small { display: none; }
}
.builder-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-4); }
.builder-nav a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-full); color: var(--ink); font: 500 12px var(--sans); text-decoration: none; }
.builder-nav a:hover { background: var(--paper-2); }
.role-ability { padding: var(--s-3); background: var(--paper-2); border-radius: var(--r-m); }
.role-mechanisms { display: grid; gap: var(--s-2); padding-block: var(--s-3); }
.role-mechanisms h3 { margin: 0; font: 600 14px var(--sans); }
.mechanism-card { display: flex; align-items: start; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); border-radius: var(--r-m); background: var(--paper-2); }
.mechanism-card > div { flex: 1; }
.mechanism-card strong { font-size: 13px; }
.mechanism-card p, .mechanism-empty { margin-block: var(--s-2) 0; font: 400 12px/1.5 var(--sans); color: var(--ink-2); }
.mechanism-card button { min-inline-size: 44px; min-block-size: 44px; }
.mechanism-library > summary { cursor: pointer; padding: var(--s-3); min-block-size: 44px; border: 1px dashed var(--rule); border-radius: var(--r-m); font-weight: 600; }
.mechanism-library > div { display: grid; gap: var(--s-2); padding-block-start: var(--s-2); }
.mechanism-option { display: grid; gap: var(--s-2); text-align: start; padding: var(--s-3); border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper); color: var(--ink); }
button.mechanism-option { cursor: pointer; min-block-size: 44px; }
.mechanism-option small { font: 400 12px/1.5 var(--sans); color: var(--ink-2); }
.mechanism-option strong { font: 600 13px var(--sans); }
.mechanism-option span { display: inline-block; font: 500 10px var(--mono); color: var(--ink-3); margin-inline-start: var(--s-2); }
.mechanism-option:disabled { cursor: default; }
.mechanism-option:not(:disabled):hover { border-color: var(--accent); }

.mechanism-history { padding-inline-start: var(--s-5); margin-block: var(--s-3); }
.mechanism-history li + li { margin-block-start: var(--s-3); }
.mechanism-history p { margin-block: var(--s-1) 0; overflow-wrap: anywhere; }
/* Budgetpanelet og udvalgets forslag følger de øvrige panelers typografi. */
.budget-panel, .committee-panel {
  font-size: 14px;
  & h2 { font: 700 15px var(--sans); margin-block: 0 var(--s-2); text-wrap: balance; }
  & p { margin-block: var(--s-2); line-height: 1.5; text-wrap: pretty; }
  & label { display: grid; gap: var(--s-1); margin-block: var(--s-2); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
  & label.budget-priority { display: flex; font: 14px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); }
  & details { margin-block: var(--s-3); }
  & summary { cursor: pointer; font-weight: 600; padding-block: var(--s-3); }
  & [data-budget-total] { font: 600 14px var(--mono); color: var(--ink); }
  & small { color: var(--ink-3); font-size: 12px; }
  & .btn, & .btn-ghost { margin-block-start: var(--s-2); }
}
/* Storskærmen læses på afstand: samme skala som fasens tekst. */
.display .budget-panel {
  font-size: clamp(15px, 1.4vw, 22px);
  & h2 { font-size: clamp(18px, 1.8vw, 28px); }
  & h3 { font-size: clamp(16px, 1.6vw, 24px); }
}
.budget-line { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-block-end: 1px solid var(--rule); }
.budget-line h3 { font: 600 14px var(--sans); margin: 0; }
.budget-line label { display: grid; gap: var(--s-1); }
.budget-line textarea { min-block-size: 72px; }
.budget-priority { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); min-block-size: 44px; }
.budget-priority input { inline-size: 22px; block-size: 22px; }
.budget-comparison { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: var(--s-4); }
.budget-comparison ul { padding-inline-start: var(--s-5); }

/* Aktiviteter bruger samme oplysninger på telefon og projektor. */
.activity-instructions { margin-block: var(--s-4); overflow-wrap: anywhere; }
.activity-instructions h3 { margin-block: var(--s-3) var(--s-2); }
.meeting-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: var(--s-4); }
.meeting-card { padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--paper-2); }
.example-picker { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.example-picker select { inline-size: auto; max-inline-size: 100%; }
.flow-editor > h3 { margin-block-start: var(--s-5); }
.flow-editor .s-panel { padding: var(--s-3); margin-block: var(--s-3); }

/* Flere afstemninger, stemmemåden "hvert medlem" og udvalg (27/9 2026) */
.board-ballot + .board-ballot { margin-block-start: var(--s-5); }
.board-title {
  font: 700 15px var(--sans);
  margin-block: 0 var(--s-2);
  text-wrap: balance;
  & small { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-inline-start: var(--s-2); }
}
.board-row.single { grid-template-columns: minmax(0, 1fr); }
.board-legend {
  display: grid;
  gap: 2px;
  margin-block-end: var(--s-2);
  font-size: 13px;
  color: var(--ink-2);
  overflow-wrap: anywhere;
  & b { font-family: var(--mono); margin-inline-end: var(--s-1); }
}
.board-parties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-block-start: var(--s-2);
  font: 500 12px var(--mono);
  color: var(--ink-3);
  & b { font-family: var(--sans); font-weight: 600; color: var(--ink-2); }
}
.d-page .board-title { font-size: clamp(18px, 1.8vw, 28px); }
.d-page .board-legend { font-size: clamp(14px, 1.2vw, 20px); }
.d-page .board-parties { font-size: clamp(12px, 1.1vw, 18px); }

.s-ballot-title { font: 600 13px var(--sans); margin-block: var(--s-4) 0; }
.s-ballot-title:first-of-type { margin-block-start: var(--s-2); }

.committee-text {
  margin-block: var(--s-3);
  padding: var(--s-3);
  border-inline-start: 3px solid var(--accent);
  background: var(--paper-2);
  border-radius: var(--r-m);
  font-size: 13px;
  overflow-wrap: anywhere;
  & p { margin: 0; }
  & p + p { margin-block-start: var(--s-2); }
}
.committee-card h3 small { font: 500 11px var(--mono); color: var(--ink-3); margin-inline-start: var(--s-2); white-space: nowrap; }
.committee-card .d-members {
  gap: var(--s-2);
  li { display: grid; gap: 2px; justify-content: start; }
  small { text-align: start; font: 500 0.7em var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
}

/* .p-name button sætter font og farve — derfor den længere selektor */
.p-name .p-committee {
  font: 500 10px var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-inline: 6px;
  align-self: stretch;
  border-inline-start: 1px solid var(--rule);
  &:hover { color: var(--accent); background: oklch(from var(--accent) l c h / 10%); }
  &:disabled { opacity: 0.5; }
}

/* Udvalgets ændringsforslag (committee.js) */
.committee-item {
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
  & h3 { font: 600 14px var(--sans); margin: 0; }
  & p { margin: 0; overflow-wrap: anywhere; }
  & textarea { min-block-size: 80px; }
}
.committee-meta { font-size: 12px; color: var(--ink-3); }
.committee-support {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  & legend { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-block-end: var(--s-1); }
  & .f-check { font: 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); display: flex; align-items: center; gap: var(--s-1); min-block-size: 32px; margin: 0; }
}
.committee-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.committee-card .committee-amendments { margin-block-start: var(--s-3); font-size: 0.85em; color: var(--ink-2); display: grid; gap: var(--s-1); }

/* Forløbsbyggeren: rammer (27/9 2026) */

.frame-section { border: 1px solid var(--accent); border-radius: var(--r-l); padding: var(--s-4); background: oklch(from var(--accent) l c h / 5%); }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--s-3); margin-block: var(--s-3); }
.frame-card {
  display: grid; align-content: start; gap: var(--s-2);
  padding: var(--s-4); min-block-size: 44px;
  border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper);
  color: var(--ink); text-align: start; font: 13px/1.45 var(--sans); cursor: pointer;
  & strong { font: 700 15px var(--sans); }
  &:hover { border-color: var(--accent); box-shadow: var(--shadow-m); }
}
.frame-tags { display: flex; flex-wrap: wrap; gap: 4px; & small { font: 500 10px var(--mono); padding: 2px 6px; border-radius: var(--r-full); background: var(--paper-2); color: var(--ink-3); } }

.flow-editor > h3 { font: 600 14px var(--sans); }
.flow-more > summary { cursor: pointer; font: 600 13px var(--sans); color: var(--ink-2); min-block-size: 32px; display: flex; align-items: center; }
.flow-more[open] { display: grid; gap: var(--s-3); }
.mechanism-panel { display: grid; gap: var(--s-2); border-inline-start: 3px solid var(--accent); & p { margin: 0; font-size: 13px; } }
.mechanism-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); & strong { font: 600 14px var(--sans); } }
.mechanism-links { margin: 0; padding-inline-start: var(--s-5); font-size: 13px; }
.f-jump { font: 500 12px var(--sans); color: var(--accent); justify-self: start; }
.flow-editor .mechanism-library > div { display: grid; gap: var(--s-2); margin-block-start: var(--s-2); }
.f-canvote { align-self: end; min-block-size: 44px; }

/* Forslag og afstemningsrunder (motions.js) og undersøgelser (inquiries.js) */
.motion-hd { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-block: var(--s-4) var(--s-1); }
.motion-item, .motion-round, .inquiry-card, .inquiry-answer {
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--rule);
  display: grid;
  gap: var(--s-2);
  & h3 { font: 600 14px var(--sans); margin: 0; overflow-wrap: anywhere; }
  & h3 small { font: 400 12px var(--sans); color: var(--ink-3); }
  & p { margin: 0; overflow-wrap: anywhere; }
  & textarea { min-block-size: 72px; }
  & .kicker { margin: 0; }
}
.motion-round.open { border: 1px solid var(--accent); border-radius: var(--r-m); padding: var(--s-3); background: oklch(from var(--accent) l c h / 6%); }
.motion-round.vetoed { opacity: 0.75; }
.motion-tally { font: 500 13px var(--mono); & small { color: var(--ink-3); } }
.motion-split { display: grid; gap: var(--s-2); & label { display: grid; gap: var(--s-1); } }
.inquiry-q { font-style: italic; color: var(--ink-2); }
/* Henvendelser mellem deltagere (interactions.js): samme kort som undersøgelserne.
   En henvendelse TIL eleven står øverst med accentkant, så den ses med det samme. */
.inter-card { display: grid; gap: var(--s-2); padding-block: var(--s-3); border-block-start: 1px solid var(--rule);
  & h3 { margin: 0; font-size: 15px; } & .f-label { display: grid; gap: var(--s-1); } }
.inter-incoming { border: 2px solid var(--accent); border-radius: var(--r-l); padding-inline: var(--s-3);
  background: oklch(from var(--accent) l c h / 8%); }
.inter-text { font-style: italic; color: var(--ink-2); margin: 0; }
.inter-reply { font-size: 13px; }
.inter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2);
  & li { display: grid; gap: 2px; padding-block: var(--s-2); border-block-start: 1px solid var(--rule); }
  & .status-withdrawn, & .status-declined { opacity: 0.7; } }
/* Aftaler, koalitioner og stemmeløfter (agreements.js) */
/* Aftalelogen på telefonen (klasserne står i agreements.js) */
.inter-history { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); & h4 { margin: 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); } }
.inter-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); & > div { display: grid; gap: var(--s-1); min-inline-size: 0; } & .t-link { flex-shrink: 0; } }
.inter-label { font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); }
.inter-arrow { font-size: 14px; overflow-wrap: anywhere; & small { color: var(--ink-3); } }
.inter-quote { margin: 0; font-style: italic; color: var(--ink-2); font-size: 14px; }
.inter-status { font: 500 11px var(--mono); color: var(--ink-3); }
.inter-accepted .inter-status { color: var(--green); }
.status-rejected { color: var(--red); }
.agree-parties { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-1); & legend { margin-block-end: var(--s-1); } }
.agree-pledge-box { display: grid; gap: var(--s-2); padding: var(--s-3); border: 1px dashed var(--rule-2); border-radius: var(--r-m); & .f-label { margin: 0; } }
.agree-pledge-row { display: grid; gap: var(--s-1); padding-block-end: var(--s-2); border-block-end: 1px solid var(--rule); & .t-link { justify-self: start; } }
.agree-coalition { margin: 0; font-size: 13px; color: var(--ink-2); & small { display: block; color: var(--ink-3); font: 400 11px var(--mono); } }
.agree-reaches b { color: var(--ink); }
.agree-pledges { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); font-size: 13px; }
.agree-open { color: var(--ink-3); }
.agree-kept { color: var(--green); font-weight: 600; }
.agree-broken { color: var(--red); font-weight: 600; }
.agree-heading { margin-block: var(--s-3) var(--s-1); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.agree-list { list-style: none; padding: 0; margin: 0; font-size: 13px; & li { display: grid; gap: var(--s-1); padding-block: var(--s-2); border-block-end: 1px solid var(--rule); } }
.agree-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-4); margin-block-start: var(--s-4); }
.agree-card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--paper-2); & h3 { margin: 0; font-size: 16px; } & p { margin: 0; color: var(--ink-2); } }
.agree-kind { font: 600 11px var(--mono); text-transform: uppercase; color: var(--accent); }
.inquiry-a { padding: var(--s-3); border-inline-start: 3px solid var(--accent); background: var(--paper-2); border-radius: var(--r-m); font-size: 13px; & p { margin: 0; } & p + p { margin-block-start: var(--s-2); } }

.t-motions, .t-amendments { margin-block: var(--s-2); font-size: 13px; & summary { cursor: pointer; font-weight: 600; min-block-size: 32px; } & .btn-small { margin-block: var(--s-1); } }
.t-motion-list { list-style: none; margin: var(--s-2) 0; padding: 0; display: grid; gap: var(--s-2); & li { display: grid; gap: var(--s-1); overflow-wrap: anywhere; } }
.t-motion-list li.lapsed > span:first-child, .motion-item.lapsed > p { color: var(--ink-3); text-decoration: line-through; }
.t-motion-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.t-motion-topic, .motion-topic { margin-block: var(--s-3) 0; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
/* Hver elev stemmer: stemmerne pr. parti som almindelig tekst */
.party-votes { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 2px; font: 400 12px/1.45 var(--sans); color: var(--ink-2); & b { font-weight: 600; color: var(--ink); } }
.t-motion-parties { list-style: none; margin: 0 0 var(--s-2); padding: 0; display: grid; gap: 2px; font: 400 12px/1.45 var(--sans); color: var(--ink-2); }
.d-parties { list-style: none; margin: var(--s-2) 0 var(--s-5); padding: 0; display: grid; gap: var(--s-1); font: 400 17px/1.4 var(--sans); color: var(--ink-2); }
.d-votes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); & li { display: flex; justify-content: space-between; gap: var(--s-3); border-block-end: 1px solid var(--rule); padding-block-end: var(--s-1); } & .passed { color: var(--ink); font-weight: 600; } & .failed { color: var(--ink-3); } }
.t-inquiry { border-block-start: 1px solid var(--rule); padding-block: var(--s-3); display: grid; gap: var(--s-2); & p { margin: 0; overflow-wrap: anywhere; } }
.d-rec { font-size: 1.1em; }

.budget-vote-hd { font: 600 14px var(--sans); margin-block: var(--s-4) 0; padding-block-start: var(--s-3); border-block-start: 1px solid var(--rule); }

/* Talerlisten pr. gruppe på storskærmen (speaker-list.js): grupperne side om side */
.speaker-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--s-5); }
.speaker-group { padding-block-start: var(--s-3); border-block-start: 1px solid var(--rule); }
.speaker-group h2 { font-size: 22px; margin-block-end: var(--s-3); }
.speaker-now { padding: var(--s-4); border: 2px solid var(--accent); border-radius: var(--r-l); background: oklch(from var(--accent) l c h / 10%); text-align: center; margin-block-end: var(--s-3); }
.speaker-now h3 { font-size: clamp(24px, 3vw, 36px); margin: 0; }
.speaker-now p { margin: 0 0 var(--s-2); color: var(--ink-2); }
.speaker-clock { font: 700 clamp(40px, 5vw, 64px) var(--mono); letter-spacing: -0.02em; }
.speaker-idle { padding: var(--s-4); border: 1px dashed var(--rule-2); border-radius: var(--r-l); text-align: center; color: var(--ink-3); margin-block-end: var(--s-3); }
.speaker-next { margin: 0; padding-inline-start: var(--s-5); font-size: 16px; }
.speaker-next li { padding-block: var(--s-1); }
.speaker-next small { color: var(--ink-3); }
.speaker-more { list-style: none; color: var(--ink-3); }

/* Grænsen for vedtagne forslag (motions.maxAdopted): rangeringen på telefon og lærerside */
.motion-limit { padding-block: var(--s-3); border-block-start: 1px solid var(--rule); }
.motion-rank, .t-motion-rank { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.motion-rank li, .t-motion-rank li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-1); border-block-end: 1px solid var(--rule); }
.motion-rank li.adopted span:last-of-type, .t-motion-rank li.adopted { color: var(--ink); font-weight: 600; }
.motion-rank li.over, .t-motion-rank li.over { color: var(--ink-3); }
.motion-rank li.tie span:last-of-type, .t-motion-rank li.tie { color: var(--red); font-weight: 600; }

/* Storskærmen: grupperne sammenlignet, ét forslag pr. række (display.html: renderMotionsCompare) */
.d-compare-wrap { max-inline-size: 1400px; }
.d-compare-note { font-size: clamp(16px, 2vw, 22px); margin-block-end: var(--s-3); }
.d-compare { inline-size: 100%; border-collapse: collapse; font-size: clamp(14px, 1.6vw, 20px); }
.d-compare th, .d-compare td { text-align: start; vertical-align: top; padding: var(--s-3); border-block-end: 1px solid var(--rule); }
.d-compare thead th { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.d-compare tbody th { font-weight: 700; inline-size: 24%; }
.d-compare small { display: block; margin-block-start: var(--s-1); font-size: 0.75em; font-weight: 400; color: var(--ink-2); }
.d-compare td b { display: block; }
.d-compare tr.differs { background: oklch(from var(--accent) l c h / 8%); }
.d-compare .d-diff { display: inline-block; margin-inline-start: var(--s-2); font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.d-compare .c-passed b { color: var(--green, var(--ink)); }
.d-compare .c-failed b, .d-compare .c-lapsed b { color: var(--ink-3); }
.d-compare .d-none { color: var(--ink-3); }
.d-compare tfoot th, .d-compare tfoot td { border-block-start: 2px solid var(--ink); font-weight: 600; }
.d-compare .d-tag { display: block; font-weight: 600; }
.d-compare .d-tag.tie, .d-tie { color: var(--red); }
.d-compare .d-tag.over { color: var(--ink-3); font-weight: 400; }
.d-limit { margin-block-start: var(--s-3); font-size: 0.9em; }

/* Oplæsningen åbner i samme diskrete kontrol som Læs op-knappen. */
.speech-control {
  display: inline-grid; grid-template-columns: minmax(0, 1fr) auto auto;
  max-inline-size: 100%; margin-block-end: var(--s-3);
  border: 1px solid var(--rule); border-radius: var(--r-l); background: var(--paper);
  color: var(--ink-2); vertical-align: middle;
}
.speech-control.is-active { inline-size: min(100%, 320px); border-color: var(--accent); background: oklch(from var(--accent) l c h / 5%); }
.speech-toggle, .speech-close, .speech-speed {
  min-block-size: 44px; border: 0; background: transparent; color: inherit;
  font: 500 12px var(--sans); border-radius: var(--r-m);
}
.speech-toggle { display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-3); cursor: pointer; }
.speech-icon { display: inline-flex; font-size: 16px; }
.speech-close { min-inline-size: 44px; padding: var(--s-2); cursor: pointer; }
.speech-speed { min-inline-size: 60px; padding-inline: var(--s-1); font-family: var(--mono); }
.speech-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-2); padding-inline: var(--s-3); border-block-start: 1px solid var(--rule); }
.speech-progress input { flex: 1; min-inline-size: 0; min-block-size: 44px; accent-color: var(--accent); cursor: pointer; }
.speech-time { white-space: nowrap; font: 500 10px var(--mono); color: var(--ink-3); }
.speech-status:not(.sr-only) { grid-column: 1 / -1; padding: var(--s-3); font-size: 12px; color: var(--ink); }
.speech-control :is(button, select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.speech-control [hidden] { display: none; }