/* Mitbestimmen - Live-Voting
   ==========================
   The Claude Design source carries its styling inline, which is right for a
   prototype and wrong for a codebase. Everything is lifted into classes here
   and expressed in the design system's tokens, so a token change moves the
   whole app rather than one screen.

   Layout values that are not on the token scale (the 392px phone frame, the
   16:9 slide) come straight from the design and are marked where they appear.
*/

@import url('tokens.css');
@import url('fonts.css');

*, *::before, *::after { box-sizing: border-box; }

/* The user-agent rule for [hidden] loses to any author `display` on the same
   element. Every state panel here is a flex or grid container, so without
   this the waiting and the done screen rendered at the same time, and the
   projector showed bars, cloud and texts together. Seen on a real phone. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pc-bg);
  font-family: var(--pc-font-sans);
  font-size: var(--pc-fs-body);
  line-height: var(--pc-lh-normal);
  color: var(--pc-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--pc-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pc-lavender-95); text-decoration-thickness: 2px; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Keyboard focus must be obvious on every surface, including the ink ones. */
:focus-visible {
  outline: 2px solid var(--pc-crimson);
  outline-offset: 2px;
}
.masthead :focus-visible,
.slide :focus-visible,
.ticker :focus-visible {
  outline-color: var(--pc-lavender);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes pcFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

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

/* ── shell ─────────────────────────────────────────────────────────────── */

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

.masthead {
  background: var(--pc-ink);
  color: var(--pc-text-on-ink);
  padding: 14px var(--pc-space-5);
  display: flex;
  align-items: center;
  gap: var(--pc-space-5);
  flex-wrap: wrap;
}
.masthead__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.masthead__logo { display: block; height: 28px; width: auto; }
.masthead__mark { width: 12px; height: 12px; background: var(--pc-lavender); display: block; }
.masthead__wordmark {
  font-size: 17px;
  font-weight: var(--pc-fw-semibold);
  letter-spacing: var(--pc-ls-snug);
}
.masthead__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--pc-fs-caption);
  color: var(--pc-lavender-50);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.masthead__tick { width: 6px; height: 6px; background: var(--pc-crimson); display: block; }
.masthead__room {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--pc-space-4);
}
.masthead__room-label { font-size: var(--pc-fs-caption); color: var(--pc-lavender-50); }
.code-chip {
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-body);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: 0.18em;
  border: 1px solid var(--pc-ink-70);
  padding: 6px 12px;
}

.tabs {
  background: var(--pc-surface);
  border-bottom: 1px solid var(--pc-ink-15);
  padding: 0 var(--pc-space-5);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tabs__link {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--pc-ink-70);
  padding: var(--pc-space-4) 20px;
  font-size: 15px;
  font-weight: var(--pc-fw-regular);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--pc-dur-fast) var(--pc-ease);
}
.tabs__link:hover { color: var(--pc-ink); }
.tabs__link[aria-current='page'] {
  border-bottom-color: var(--pc-crimson);
  color: var(--pc-ink);
  font-weight: var(--pc-fw-semibold);
}
.tabs__status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--pc-fs-caption);
  color: var(--pc-ink-70);
  padding: var(--pc-space-2) 0;
}
.tabs__phase { display: flex; align-items: center; gap: var(--pc-space-2); }
.dot { width: 8px; height: 8px; border-radius: 50%; display: block; background: var(--pc-ink-30); }
.dot--offen { background: var(--pc-crimson); }
.dot--zu { background: var(--pc-ink-50); }

/* Sits above the content, never over it: a banner that covers the question
   would trade one problem for another. */
.connection {
  margin: 0;
  padding: 10px var(--pc-space-5);
  background: var(--pc-amber-15);
  color: var(--pc-slate-900);
  border-bottom: 1px solid var(--pc-amber);
  font-size: var(--pc-fs-body-s);
}
.connection[hidden] { display: none; }

.main { flex: 1; padding: var(--pc-space-6) var(--pc-space-5) var(--pc-space-8); }

.eyebrow {
  font-size: var(--pc-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-ink-70);
}

/* ── buttons ───────────────────────────────────────────────────────────── */

.btn {
  border-radius: var(--pc-radius-1);
  padding: 12px 18px;
  font-size: 15px;
  cursor: pointer;
  transition: background var(--pc-dur-fast) var(--pc-ease),
              border-color var(--pc-dur-fast) var(--pc-ease);
}
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* A disabled crimson button still reads as "press me" at a glance, so the
   filled variants lose their fill while they do not apply. */
.btn--commit[disabled], .btn--primary[disabled], .btn--next-step[disabled] {
  background: var(--pc-ink-08);
  color: var(--pc-text-muted);
  border: 1px solid var(--pc-ink-15);
  opacity: 1;
}
.btn--primary {
  background: var(--pc-ink);
  color: var(--pc-text-on-ink);
  border: none;
  font-weight: var(--pc-fw-semibold);
}
.btn--primary:hover:not([disabled]) { background: var(--pc-ink-90); }
.btn--ghost {
  background: none;
  color: var(--pc-ink);
  border: 1px solid var(--pc-line-control);
}
.btn--ghost:hover:not([disabled]) { background: var(--pc-ink-08); }
/* Crimson is a 10%-of-surface colour, so it marks the one irreversible
   action on the page: writing a decision into the log. */
.btn--commit {
  background: var(--pc-crimson);
  color: var(--pc-white);
  border: none;
  font-weight: var(--pc-fw-semibold);
}
.btn--commit:hover:not([disabled]) { background: var(--pc-crimson-90); }
.btn--block { width: 100%; padding: var(--pc-space-4); font-size: var(--pc-fs-body); }
/* A click must look like it did something, even before the server answers. */
.btn--pending { opacity: 0.75; cursor: progress; }

.field {
  border: 1px solid var(--pc-line-control);
  border-radius: var(--pc-radius-1);
  padding: 11px 12px;
  font-size: 15px;
  color: var(--pc-ink);
  background: var(--pc-bone);
  width: 100%;
}
/* No `outline: none` here. It sits later in the file at equal specificity to
   the global :focus-visible rule and silently removed the focus ring from
   every input, select and textarea in the app. */
.field:focus-visible {
  outline: 2px solid var(--pc-crimson);
  outline-offset: 2px;
  border-color: var(--pc-lavender-95);
}
.field::placeholder { color: var(--pc-ink-70); opacity: 1; }

/* ── participant ───────────────────────────────────────────────────────── */

.participant {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pc-space-6);
}
/* The moderator sees the join panel next to the card; participants never do. */
.participant--with-join {
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--pc-space-7);
}

/* One card for phone and laptop. The design drew a 392px phone inside a
   desktop page; that was the moderator's preview. A participant on a laptop
   gets a real card: centred, capped at a comfortable reading width.
   No overflow:hidden here - it would break the sticky submit button. */
.phone {
  width: 100%;
  max-width: 640px;
  border: 1px solid var(--pc-ink-30);
  background: var(--pc-surface);
  border-radius: var(--pc-radius-2);
  box-shadow: var(--pc-shadow-1);
  display: flex;
  flex-direction: column;
}
/* Optional and asked once: one compact 44px row on top, never a block that
   pushes the question down. Once a name is saved the row collapses to the
   chip below. */
.phone__name {
  padding: 10px 18px;
  border-bottom: 1px solid var(--pc-ink-15);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.field--compact { padding: 9px 12px; font-size: 15px; min-height: 44px; }
.btn--compact { padding: 9px 14px; font-size: var(--pc-fs-body-s); min-height: 44px; flex: none; }
.phone__name-chip {
  margin: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--pc-ink-15);
  font-size: var(--pc-fs-body-s);
  color: var(--pc-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.phone__name-chip strong { color: var(--pc-ink); font-weight: var(--pc-fw-semibold); }
.link-button {
  appearance: none;
  background: none;
  border: none;
  padding: 4px 6px;
  margin-left: auto;
  color: var(--pc-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--pc-fs-body-s);
  cursor: pointer;
  min-height: 32px;
}
.link-button:hover { color: var(--pc-link-hover); }

/* The done screen lists what this person chose. */
.phone__state-eyebrow { margin: 0; }
.phone__answer {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--pc-fs-body);
  font-weight: var(--pc-fw-semibold);
  color: var(--pc-ink);
  max-width: 420px;
}
.phone__answer li { padding: 8px 12px; background: var(--pc-lavender-15); border-radius: var(--pc-radius-1); }

/* The released tally on the participant's own screen. Same rows as the
   moderation console, left aligned, capped so bars stay readable. */
/* Doubled class on purpose: this rule sits before .phone__state in the file
   and would lose the tie on text-align and align-items otherwise. */
.phone__state.phone__state--results { justify-content: flex-start; align-items: stretch; text-align: left; }
.phone__state--results .phone__state-mark { align-self: flex-start; }
.phone__state--results .phone__state-eyebrow, .phone__state--results .phone__state-title { text-align: left; }
.phone__state-title--left { text-align: left; }
.phone__results { width: 100%; }
.phone__results .result-row + .result-row { margin-top: 12px; }
.phone__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}
.cloud-word--dark { color: var(--pc-ink-70); }
.cloud-word--dark.cloud-word--strong { color: var(--pc-crimson-90); }
.phone__body { flex: 1; display: flex; flex-direction: column; padding: var(--pc-space-5) 18px 18px; }
.phone__state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: var(--pc-space-8) 28px;
  text-align: center;
}
.phone__state-mark { width: 16px; height: 16px; display: block; background: var(--pc-lavender); }
.phone__state-mark--done { background: var(--pc-crimson); }
.phone__state-title { font-size: 19px; font-weight: var(--pc-fw-semibold); }
.phone__state-body { font-size: 15px; color: var(--pc-ink-70); line-height: 1.55; }

.question__eyebrow { margin-bottom: 10px; }
.question__prompt {
  font-size: 23px;
  font-weight: var(--pc-fw-semibold);
  line-height: 1.25;
  margin: 0 0 6px;
  text-wrap: pretty;
}
.question__hint { font-size: var(--pc-fs-body-s); color: var(--pc-ink-70); margin-bottom: 20px; }

.choices { display: flex; flex-direction: column; gap: 10px; }

.choice {
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line-control);
  border-radius: var(--pc-radius-1);
  padding: 15px 14px;
  font-size: var(--pc-fs-body);
  color: var(--pc-ink);
  cursor: pointer;
  transition: background var(--pc-dur-fast) var(--pc-ease),
              border-color var(--pc-dur-fast) var(--pc-ease);
  width: 100%;
}
.choice:hover { border-color: var(--pc-lavender-70); }
.choice__tick { width: 12px; height: 12px; flex: none; display: block; background: var(--pc-ink-15); }
.choice__label { flex: 1; }
.choice__badge { font-size: var(--pc-fs-caption); color: var(--pc-ink-70); }
.choice[aria-pressed='true'] { background: var(--pc-lavender-15); border-color: var(--pc-lavender-95); }
.choice[aria-pressed='true'] .choice__tick { background: var(--pc-ink); }

.choice--rank .choice__rank {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--pc-ink-15);
  color: var(--pc-ink-70);
  font-size: var(--pc-fs-caption);
  font-weight: var(--pc-fw-semibold);
}
.choice--rank[aria-pressed='true'] .choice__rank {
  background: var(--pc-ink);
  color: var(--pc-white);
}

.dots-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--pc-ink-15);
  border-radius: var(--pc-radius-1);
  padding: 12px;
}
.dots-row__label { flex: 1; font-size: 15px; }
.dots-row__count {
  font-size: var(--pc-fs-body-s);
  color: var(--pc-crimson);
  font-weight: var(--pc-fw-semibold);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dots-row__step {
  /* 44x44 minimum: these are the +/- keys people hit fastest, on their own
     phone, under time pressure. The design drew them at 34. */
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--pc-line-control);
  background: var(--pc-surface);
  border-radius: var(--pc-radius-1);
  font-size: 17px;
  color: var(--pc-ink);
  cursor: pointer;
}
.dots-row__step:hover:not([disabled]) { background: var(--pc-ink-08); }
.dots-row__step[disabled] { opacity: 0.4; cursor: not-allowed; }

.scale-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--pc-space-2); }
.scale-grid .choice {
  justify-content: center;
  padding: 20px 0;
  font-size: 20px;
  font-weight: var(--pc-fw-semibold);
}
.scale-legend {
  display: flex;
  justify-content: space-between;
  font-size: var(--pc-fs-caption);
  color: var(--pc-ink-70);
  margin-top: 10px;
}

.idea {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid var(--pc-ink-15);
  border-radius: var(--pc-radius-1);
  padding: 12px;
}
.idea__vote {
  flex: none;
  width: 44px;
  min-height: 44px;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--pc-surface);
  border: 1px solid var(--pc-line-control);
  border-radius: var(--pc-radius-1);
  padding: 6px 0;
  cursor: pointer;
  color: var(--pc-ink);
}
.idea__vote[aria-pressed='true'] {
  background: var(--pc-ink);
  border-color: var(--pc-ink);
  color: var(--pc-white);
}
.idea__arrow { font-size: var(--pc-fs-caption); line-height: 1; }
.idea__count { font-size: var(--pc-fs-body-s); font-weight: var(--pc-fw-semibold); }
.idea__text { font-size: 15px; line-height: 1.4; }
.idea__author { font-size: var(--pc-fs-eyebrow); color: var(--pc-ink-70); margin-top: 4px; }

.composer { display: flex; flex-direction: column; gap: 12px; }
.composer textarea.field { min-height: 120px; resize: vertical; font-size: var(--pc-fs-body); }
.composer input.field { font-size: 18px; padding: 14px 12px; }
.composer__note { font-size: var(--pc-fs-body-s); color: var(--pc-ink-70); }

/* Die Zugangs-PIN in der Moderation. Gross genug, um sie vom Bildschirm
   abzulesen, waehrend man in den Raum spricht - dafuer ist sie da. Kein
   Crimson: die Farbe markiert in dieser App genau eine Handlung, und das ist
   "Als Entscheidung uebernehmen". */
.access__pin {
  font-family: var(--pc-font-mono);
  font-size: var(--pc-fs-h2);
  font-weight: var(--pc-fw-semibold);
  letter-spacing: 0.22em;
  color: var(--pc-ink);
  margin: var(--pc-space-0) var(--pc-space-0) var(--pc-space-2);
}

.access__note {
  font-size: var(--pc-fs-body-s);
  color: var(--pc-ink-70);
  margin: var(--pc-space-2) var(--pc-space-0);
}

.phone__submit {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--pc-surface);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--pc-ink-15);
}

.notice {
  margin-top: var(--pc-space-3);
  font-size: var(--pc-fs-body-s);
  border-left: 3px solid var(--pc-terracotta);
  background: var(--pc-terracotta-15);
  color: var(--pc-slate-900);
  padding: var(--pc-space-2) var(--pc-space-3);
}
.notice[hidden] { display: none; }

/* ── join panel ────────────────────────────────────────────────────────── */

.join { width: 300px; max-width: 100%; }
.join__card { border: 1px solid var(--pc-ink-30); background: var(--pc-surface); padding: 22px; border-radius: var(--pc-radius-1); box-shadow: var(--pc-shadow-1); }
/* Holds the real, scannable QR svg rendered by app/qr.py. White ground
   rather than the design's ink block, because a scanner needs the contrast
   the specification expects. */
.join__qr {
  width: 180px;
  height: 180px;
  background: var(--pc-white);
  border: 1px solid var(--pc-ink-15);
  margin-bottom: 18px;
  padding: 8px;
}
.join__qr svg { display: block; width: 100%; height: 100%; }
.join__text { font-size: 15px; line-height: 1.5; color: var(--pc-ink-70); }
.join__text strong { color: var(--pc-ink); font-weight: var(--pc-fw-semibold); }
.join__code {
  margin-top: 14px;
  font-family: var(--pc-font-mono);
  font-size: 22px;
  font-weight: var(--pc-fw-semibold);
  letter-spacing: 0.2em;
  color: var(--pc-ink);
}
.join__note { margin-top: 14px; font-size: var(--pc-fs-body-s); color: var(--pc-ink-70); }

/* ── beamer ────────────────────────────────────────────────────────────── */

.beamer { max-width: var(--pc-container-wide); margin: 0 auto; position: relative; }

/* Sits over the slide's top right corner, quiet until hovered. */
.slide__fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(31, 31, 64, 0.6);
  color: var(--pc-white);
  border-radius: var(--pc-radius-1);
  padding: 8px 12px;
  font-size: var(--pc-fs-caption);
  letter-spacing: var(--pc-ls-wide);
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--pc-dur-fast) var(--pc-ease);
}
.slide__fullscreen:hover, .slide__fullscreen:focus-visible { opacity: 1; }

/* ?vollbild=1 or the button: nothing but the slide. Letterboxed to 16:9 so
   the container-query sizes inside stay proportional on any projector. */
.is-chromeless .masthead,
.is-chromeless .tabs,
.is-fullscreen .masthead,
.is-fullscreen .tabs { display: none; }
.is-chromeless .main,
.is-fullscreen .main { padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--pc-ink-95); }
.is-chromeless .beamer,
.is-fullscreen .beamer { max-width: none; width: min(100vw, calc(100vh * 16 / 9)); }
.is-chromeless .slide,
.is-fullscreen .slide { width: 100%; }
.is-fullscreen .slide__fullscreen { opacity: 0; }
.is-fullscreen .slide__fullscreen:hover, .is-fullscreen .slide__fullscreen:focus-visible { opacity: 1; }
.slide {
  aspect-ratio: 16 / 9;
  background: var(--pc-ink-95);
  color: var(--pc-text-on-ink);
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  overflow: hidden;
  /* Every size on the slide is a share of its own width, so the whole thing
     scales to any projector without a media query. */
  container-type: size;
}
.slide__stage {
  padding: 2.3cqw 2.3cqw 1.9cqw;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.slide__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.63cqw;
  font-size: 0.78cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-lavender);
}
.slide__eyebrow-tick { width: 0.52cqw; height: 0.52cqw; background: var(--pc-accent-on-ink); display: block; flex: none; }
.slide__count { margin-left: auto; color: var(--pc-ink-50); letter-spacing: var(--pc-ls-wide); }
.slide__prompt {
  font-size: 2.3cqw;
  font-weight: var(--pc-fw-semibold);
  line-height: 1.15;
  margin: 0.94cqw 0 1.46cqw;
  text-wrap: pretty;
}
.slide__bars { display: flex; flex-direction: column; gap: 0.73cqw; }
.bar__head {
  display: flex;
  align-items: baseline;
  gap: 0.83cqw;
  font-size: 1.15cqw;
  margin-bottom: 0.31cqw;
}
.bar__label { flex: 1; }
.bar--leader .bar__label { font-weight: var(--pc-fw-semibold); }
.bar__value { color: var(--pc-lavender); font-variant-numeric: tabular-nums; }
.bar__track { height: 0.83cqw; background: var(--pc-ink); }
.bar__fill {
  height: 100%;
  background: var(--pc-lavender);
  transition: width var(--pc-dur-base) var(--pc-ease);
}
.bar--leader .bar__fill { background: var(--pc-accent-on-ink); }

.slide__cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42cqw 1.35cqw;
  align-items: baseline;
  align-content: flex-start;
}
.cloud-word { line-height: 1.15; color: var(--pc-lavender); }
.cloud-word--lead { color: var(--pc-accent-on-ink); }
.cloud-word--near { color: var(--pc-white); }
.cloud-word--strong { font-weight: var(--pc-fw-semibold); }

.slide__texts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.73cqw;
  align-content: flex-start;
  overflow: hidden;
}
.slide-text {
  border-left: 0.16cqw solid var(--pc-lavender);
  padding: 0.42cqw 0 0.42cqw 0.73cqw;
  font-size: 0.99cqw;
  line-height: 1.4;
  animation: pcFade var(--pc-dur-base) var(--pc-ease-out);
}
.slide-text__author { font-size: 0.73cqw; color: var(--pc-ink-50); margin-top: 0.21cqw; }

.slide__foot {
  margin-top: auto;
  padding-top: 1.25cqw;
  display: flex;
  align-items: center;
  gap: 0.73cqw;
  font-size: 0.83cqw;
  color: var(--pc-ink-50);
}
.slide__foot .dot { width: 0.42cqw; height: 0.42cqw; border-radius: 0; flex: none; }
.slide__foot-code {
  margin-left: auto;
  font-family: var(--pc-font-mono);
  letter-spacing: 0.18em;
  color: var(--pc-lavender-50);
}

.ticker {
  background: var(--pc-ink);
  padding: 1.9cqw 1.67cqw;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.ticker__title {
  font-size: 0.73cqw;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-lavender);
  margin-bottom: 1.04cqw;
}
.ticker__list { display: flex; flex-direction: column; gap: 0.94cqw; overflow: hidden; }
.ticker__item { display: flex; gap: 0.63cqw; animation: pcFade var(--pc-dur-base) var(--pc-ease-out); }
.ticker__time {
  font-family: var(--pc-font-mono);
  font-size: 0.73cqw;
  color: var(--pc-ink-50);
  flex: none;
  padding-top: 0.1cqw;
}
.ticker__result { font-size: 0.89cqw; font-weight: var(--pc-fw-semibold); line-height: 1.3; }
.ticker__question { font-size: 0.73cqw; color: var(--pc-lavender-50); line-height: 1.35; margin-top: 0.1cqw; }
.ticker__foot {
  margin-top: auto;
  padding-top: 1.04cqw;
  border-top: 1px solid var(--pc-ink-70);
  font-size: 0.78cqw;
  color: var(--pc-lavender-50);
}
.ticker__empty { font-size: 0.78cqw; color: var(--pc-ink-50); }

/* ── moderation ────────────────────────────────────────────────────────── */

.moderation {
  max-width: var(--pc-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: var(--pc-space-6);
}
.panel { border: 1px solid var(--pc-ink-30); background: var(--pc-surface); border-radius: var(--pc-radius-1); box-shadow: var(--pc-shadow-1); }
.panel--padded { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.panel__title { margin-bottom: 12px; }

.queue__item {
  width: 100%;
  text-align: left;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--pc-surface);
  border: none;
  border-bottom: 1px solid var(--pc-ink-15);
  padding: 14px var(--pc-space-4);
  cursor: pointer;
}
.queue__item:hover { background: var(--pc-ink-08); }
.queue__item[aria-current='true'] { background: var(--pc-lavender-15); }
.queue__dot { width: 8px; height: 8px; margin-top: 7px; flex: none; display: block; background: var(--pc-ink-15); }
.queue__item[aria-current='true'] .queue__dot { background: var(--pc-crimson); }
.queue__item[data-done='1'] .queue__dot { background: var(--pc-ink-30); }
.queue__prompt { display: block; font-size: 15px; color: var(--pc-ink); line-height: 1.35; }
.queue__item[aria-current='true'] .queue__prompt { font-weight: var(--pc-fw-semibold); }
.queue__meta {
  display: block;
  /* 14px rather than 12px: uppercase with 0.08em tracking at 12px is the
     hardest thing on the page to read, and ink-50 measured 3.17:1. */
  font-size: var(--pc-fs-body-s);
  color: var(--pc-ink-70);
  margin-top: 3px;
  letter-spacing: var(--pc-ls-wide);
  text-transform: uppercase;
}

.active-question { border: 1px solid var(--pc-ink-30); background: var(--pc-surface); padding: 28px; border-radius: var(--pc-radius-1); box-shadow: var(--pc-shadow-1); }
.active-question__prompt {
  font-size: 26px;
  font-weight: var(--pc-fw-semibold);
  line-height: 1.25;
  text-wrap: pretty;
  margin: 0;
}
.active-question__meta { font-size: 15px; color: var(--pc-ink-70); margin-top: 6px; }
.controls { display: flex; flex-direction: column; gap: 12px; margin: var(--pc-space-5) 0 28px; }
.controls__flow, .controls__audience { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.controls__hint { margin: 0; font-size: var(--pc-fs-body-s); color: var(--pc-text-muted); }
.controls__audience {
  padding-top: 12px;
  border-top: 1px solid var(--pc-ink-15);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.policy { border: none; margin: 0; padding: 0; }
.policy__legend {
  padding: 0;
  font-size: var(--pc-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-ink-70);
  margin-bottom: 8px;
}
.policy__options { display: flex; gap: 8px; flex-wrap: wrap; }
/* Radios, not a dropdown: three exclusive choices a moderator must be able to
   read and hit at a glance, without opening anything. */
.policy__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--pc-line-control);
  border-radius: var(--pc-radius-1);
  background: var(--pc-surface);
  font-size: var(--pc-fs-body-s);
  cursor: pointer;
}
.policy__option:hover { background: var(--pc-ink-08); }
.policy__option:has(input:checked) {
  background: var(--pc-lavender-15);
  border-color: var(--pc-lavender-95);
  font-weight: var(--pc-fw-semibold);
}
.policy__option input { width: 18px; height: 18px; accent-color: var(--pc-ink); margin: 0; }
.policy__hint { margin: 8px 0 0; font-size: var(--pc-fs-body-s); color: var(--pc-text-muted); }
.policy__now { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.controls__audience-note { font-size: var(--pc-fs-body-s); color: var(--pc-text-muted); }
.controls__audience-note strong { color: var(--pc-ink); font-weight: var(--pc-fw-semibold); }
/* The one step to take next. Crimson stays reserved for committing. */
.btn--next-step { background: var(--pc-ink); color: var(--pc-text-on-ink); border-color: var(--pc-ink); font-weight: var(--pc-fw-semibold); }
.btn--next-step:hover:not([disabled]) { background: var(--pc-ink-90); }

.result-row + .result-row { margin-top: 12px; }
.result-row__head { display: flex; gap: var(--pc-space-4); font-size: var(--pc-fs-body); margin-bottom: 5px; }
.result-row__label { flex: 1; }
.result-row--leader .result-row__label { font-weight: var(--pc-fw-semibold); }
.result-row__value { color: var(--pc-ink-70); font-variant-numeric: tabular-nums; }
.result-row__track { height: 10px; background: var(--pc-ink-15); }
.result-row__fill {
  height: 100%;
  /* lavender-50 on ink-15 measured 1.34:1 - the bar was all but invisible
     against its own track. lavender-95 clears the 3:1 that 1.4.11 asks of a
     graphic carrying information. */
  background: var(--pc-lavender-95);
  transition: width var(--pc-dur-base) var(--pc-ease);
}
.result-row--leader .result-row__fill { background: var(--pc-crimson); }

.active-question__foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--pc-ink-15);
  display: flex;
  gap: var(--pc-space-5);
  flex-wrap: wrap;
  font-size: 15px;
  color: var(--pc-ink-70);
}
.active-question__foot strong { color: var(--pc-ink); font-weight: var(--pc-fw-semibold); }

.built-list { display: flex; flex-direction: column; gap: 10px; }
.built-row { display: flex; gap: 12px; align-items: flex-start; font-size: var(--pc-fs-body); }
.built-row__mark { width: 10px; height: 10px; margin-top: 6px; flex: none; display: block; background: var(--pc-lavender); }
.built-row__label { flex: 1; }
.built-row__time { font-family: var(--pc-font-mono); font-size: var(--pc-fs-body-s); color: var(--pc-ink-70); }
.built-add { display: flex; gap: 10px; margin-top: var(--pc-space-2); }

/* ── ideas on the moderation console ───────────────────────────────────── */

.ideas { margin-top: var(--pc-space-5); padding-top: var(--pc-space-4); border-top: 1px solid var(--pc-ink-15); }
.ideas__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--pc-space-2); }
.idea-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--pc-line-control);
  border-radius: var(--pc-radius-1);
  background: var(--pc-surface);
  font-size: var(--pc-fs-body-s);
}
.ideas__title { margin-bottom: 14px; }
.condense { margin-bottom: var(--pc-space-3); }
.idea-row { flex-wrap: wrap; }
.idea-row__text { flex: 1; min-width: 0; }
/* A disclosure, closed by default: the evidence is read when a row looks
   wrong, not every time. */
.idea-row__source-toggle {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  color: var(--pc-text-muted);
  font: inherit;
  font-size: var(--pc-fs-body-s);
  text-decoration: underline;
  cursor: pointer;
  min-height: 44px;
}
.idea-row__source-toggle:hover { color: var(--pc-ink); }
/* In words, not by colour alone: which rows rest on nothing is the one thing
   worth seeing at a glance. */
.idea-row__unsourced { flex: none; color: var(--pc-text-muted); font-size: var(--pc-fs-body-s); }
/* Full width, and last in the row, so opening the evidence never pushes
   the buttons beside it onto another line under the cursor. */
.idea-row__quotes {
  flex-basis: 100%;
  order: 1;
  margin: 6px 0 0;
  padding-left: 18px;
  color: var(--pc-text-muted);
  font-size: var(--pc-fs-body-s);
}
.idea-row__quotes li { margin-bottom: 4px; }
.idea-row__author { color: var(--pc-text-muted); font-size: var(--pc-fs-body-s); flex: none; }
/* Votes are why a row may no longer be removed, so the count sits next to
   the button that is missing rather than somewhere else on the card. */
.idea-row__votes { font-family: var(--pc-font-mono); color: var(--pc-ink-70); flex: none; }

/* ── decision log ──────────────────────────────────────────────────────── */

.log-page { max-width: 960px; margin: 0 auto; }
.log-page__title {
  font-size: 40px;
  font-weight: var(--pc-fw-semibold);
  line-height: 1.15;
  margin: 10px 0 var(--pc-space-2);
}
.log-page__lede {
  font-size: var(--pc-fs-body-l);
  color: var(--pc-ink-70);
  line-height: var(--pc-lh-relaxed);
  max-width: 640px;
  margin: 0 0 var(--pc-space-7);
}
.log-table { border: 1px solid var(--pc-ink-30); background: var(--pc-surface); }
.log-table__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr) 96px;
  gap: var(--pc-space-4);
  padding: 18px 22px;
  border-bottom: 1px solid var(--pc-ink-15);
  align-items: baseline;
}
.log-table__row--head {
  padding: 14px 22px;
  border-bottom: 1px solid var(--pc-ink-30);
  background: var(--pc-paper);
  font-size: var(--pc-fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pc-ink-70);
}
.log-table__row:last-child { border-bottom: none; }
.log-table__time { font-family: var(--pc-font-mono); font-size: 15px; color: var(--pc-ink-70); }
.log-table__question { font-size: var(--pc-fs-body); color: var(--pc-ink-70); line-height: 1.4; }
.log-table__result { font-size: 17px; font-weight: var(--pc-fw-semibold); line-height: 1.4; }
.log-table__votes { font-size: var(--pc-fs-body); text-align: right; color: var(--pc-ink); font-variant-numeric: tabular-nums; }
.log-table__empty { padding: var(--pc-space-6) 22px; color: var(--pc-ink-70); }

.summary {
  margin-top: var(--pc-space-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--pc-space-5);
}
.summary__card { border: 1px solid var(--pc-ink-30); background: var(--pc-surface); padding: 26px; border-radius: var(--pc-radius-1); box-shadow: var(--pc-shadow-1); }
.summary__card--ink { background: var(--pc-ink); color: var(--pc-text-on-ink); border-color: var(--pc-ink); }
.summary__card--ink .eyebrow { color: var(--pc-lavender); }
.stat + .stat { margin-top: 18px; }
.stat__value { font-size: 38px; font-weight: var(--pc-fw-semibold); line-height: 1; }
.stat__label { font-size: 15px; color: var(--pc-lavender-50); margin-top: 4px; }

/* ── login ─────────────────────────────────────────────────────────────── */

.login { max-width: 420px; margin: var(--pc-space-8) auto; }
.login__card { border: 1px solid var(--pc-ink-30); background: var(--pc-surface); padding: 28px; border-radius: var(--pc-radius-1); box-shadow: var(--pc-shadow-1); }
.login__title { font-size: var(--pc-fs-h3); font-weight: var(--pc-fw-semibold); margin: 10px 0 var(--pc-space-2); }
.login__body { color: var(--pc-ink-70); font-size: 15px; margin: 0 0 var(--pc-space-5); }
.login__form { display: flex; flex-direction: column; gap: 12px; }

/* ── responsive ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .moderation { grid-template-columns: minmax(0, 1fr); }
  .main { padding: var(--pc-space-5) var(--pc-space-4) var(--pc-space-7); }
  .log-table__row {
    grid-template-columns: 72px minmax(0, 1fr);
    row-gap: var(--pc-space-1);
  }
  .log-table__row--head { display: none; }
  .log-table__question { grid-column: 2; }
  .log-table__result { grid-column: 2; }
  .log-table__votes { grid-column: 2; text-align: left; font-size: var(--pc-fs-body-s); color: var(--pc-ink-70); }
  .log-page__title { font-size: var(--pc-fs-h2); }
}

@media (max-width: 560px) {
  /* The design is a desktop mockup that DRAWS a phone. On a real phone that
     rendered twice: the desktop chrome (masthead, status row) AND the drawn
     phone's chrome (bar, join panel). Together with the name field that put
     about 360px above the question and the submit button below the fold on
     every single question. Here the phone is the frame. */

  /* Masthead: one slim row, brand and code only. The event meta is projector
     information; the participant needs none of it to answer. */
  .masthead { gap: var(--pc-space-3); padding: 10px var(--pc-space-4); flex-wrap: nowrap; justify-content: space-between; }
  .masthead__logo { height: 22px; }
  .masthead__meta { display: none; }
  .masthead__room { margin-left: auto; width: auto; gap: var(--pc-space-2); }
  .masthead__room-label { display: none; }
  .code-chip { font-size: var(--pc-fs-caption); padding: 4px 8px; letter-spacing: 0.12em; }

  /* Status row stays: "Frage 3 / 8" and the phase are orientation. */
  .tabs { padding: 0 var(--pc-space-4); }
  .tabs__link { padding: 12px 10px; font-size: var(--pc-fs-body-s); }
  .tabs__status { width: 100%; gap: 12px; font-size: var(--pc-fs-eyebrow); padding: 6px 0; }

  .main { padding: var(--pc-space-3) var(--pc-space-4) var(--pc-space-6); }
  .participant { gap: var(--pc-space-5); }

  /* On a phone the device is the frame: no border, no radius, full width. */
  .phone { border: none; border-radius: 0; box-shadow: none; background: transparent; }
  .phone__body { padding: var(--pc-space-2) 0 0; }
  .phone__name, .phone__name-chip { padding-left: 0; padding-right: 0; }
  .question__prompt { font-size: 22px; }
  /* On a phone the action bar is FIXED to the viewport, not sticky inside
     the card. Sticky depends on the containing block reaching below the fold
     and on no ancestor having an overflow; on the device it did not hold.
     A fixed bar cannot fail that way. The body keeps room underneath so the
     last option is never hidden behind it. */
  .phone__submit {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    margin: 0;
    padding: 12px var(--pc-space-4) calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--pc-bg);
    border-top: 1px solid var(--pc-ink-15);
  }
  .phone__body { padding-bottom: 104px; }
  .phone__state { padding: var(--pc-space-7) var(--pc-space-2); }
  /* Even for a moderator on a phone the QR panel is dead weight. */
  .join { display: none; }

  .scale-grid { gap: var(--pc-space-1); }
  .scale-grid .choice { font-size: 17px; padding: 16px 0; }
}