/* Participant pages: mobile first, calm, large touch targets.
   All colours of the survey pages are tokens; the values below are the standard look. The tools of the
   preview (preview bar, device frame, comments) are no part of the survey and keep their fixed colours. */
body.participant, .participant-frame {
  /* page, surfaces, text */
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f7f4; --surface-3: #faf9f6; --hover: #f4f3ef;
  --fg: #1d1d1b; --muted: #66665f;
  /* accent: selection, buttons, sliders, progress */
  --accent: #2a5db0; --accent-soft: #e9f0fb; --on-accent: #ffffff; --on-accent-veil: rgba(255, 255, 255, 0.7);
  --focus-ring: rgba(41, 87, 164, 0.4);
  /* lines */
  --border: #d6d4cc; --border-strong: #b9b7ae; --line: #ecebe6; --track: #e2e0d9; --track-edge: #a9a69b;
  /* messages: error (must be fixed), nudge (please check), ok */
  --error: #b3261e; --error-soft: #fdeceb; --error-line: #eba7a2;
  --nudge: #6b4f00; --nudge-soft: #fdf6de; --nudge-line: #ecd48a;
  --ok: #1f6b2a;
  /* best / worst (MaxDiff) */
  --good-soft: #eef7ef; --good-mid: #e3f1e5; --good-line: #9ccaa3;
  --bad-soft: #fdf1ef; --bad-mid: #fbe9e7; --bad-line: #e3aaa3;
  /* stars, smileys (lightness only; the hue comes from the scale point) */
  --star: #f2b01e; --star-hover: #f7c957; --star-off: #d4d2ca;
  --face-bg-l: 94%; --face-on-l: 80%; --face-edge-l: 42%; --face-ink-l: 30%;
  /* a theme with a fixed colour world sets --face-bg, --face-on, --face-edge, --face-ink instead (one look for all faces) */
  /* feedback charts: the others, oneself */
  --data: #8fa6d4; --data-soft: #b9c7e3; --data-strong: #6f8cc4; --crowd: #8c9ab0;
  --own: #173a7a; --own-shadow: rgba(23, 58, 122, 0.28);
  --partner-bg: rgba(255, 255, 255, 0);
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Atkinson Hyperlegible Next: a typeface of the Braille Institute, drawn so that letters are hard to mistake for
   one another. Served from this server (nothing is loaded from elsewhere) and only fetched by the browser when a
   survey's theme uses it. Copyright 2020-2024 The Atkinson Hyperlegible Next Project Authors
   (https://github.com/googlefonts/atkinson-hyperlegible-next), SIL Open Font License 1.1; the licence lies next
   to the font files: fonts/atkinson-hyperlegible-next/OFL.txt. The files are the unchanged upstream web fonts. */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-wght.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("fonts/atkinson-hyperlegible-next/AtkinsonHyperlegibleNext-Italic-wght.woff2") format("woff2"); }
* { box-sizing: border-box; }
body.participant { margin: 0; background: var(--bg); color: var(--fg);
  font: 1.125rem/1.55 var(--font); -webkit-text-size-adjust: 100%; }
.p-container { max-width: 760px; margin: 0 auto; padding: 24px 16px 32px; }
.p-preview-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 36px; padding: 0 12px; background: #fbf1cf; color: #5c4500; font-size: 0.8rem; border-bottom: 1px solid #f0e2b0; }
.p-preview-label { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-preview-pager { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.p-preview-pager a, .p-preview-pager .off { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  font-size: 1.1rem; line-height: 1; text-decoration: none; font-weight: inherit; color: inherit; background: rgba(255,255,255,0.6); }
.p-preview-pager a:hover { background: #fff; }
.p-preview-pager .off { opacity: 0.35; }
/* Narrow phones: the preview bar wraps instead of overflowing. Anything wider than the screen makes
   mobile browsers zoom out the whole page, so all text looks tiny. */
@media (max-width: 560px) {
  .p-preview-bar { height: auto; min-height: 36px; flex-wrap: wrap; gap: 2px 8px; padding: 4px 8px; }
  .p-preview-label { flex: 1 0 100%; font-size: 0.72rem; }  /* a line of its own: on the phone it is the only sign of a preview */
  .p-preview-pager { min-width: 0; flex: 1 1 auto; }
  .p-preview-pager [data-pager-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .p-preview-pager a.p-restart .p-restart-text { display: none; }
  .p-preview-tools { margin-left: auto; }
}
body.participant { overflow-x: clip; }  /* safety net: never wider than the screen */
/* Footer: a small line at the end of the page (privacy link, name of the tool), in the content column */
/* not in the element preview of the editor: its frame takes the height of its content (app.js) */
body.participant:not(.is-item-preview) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.participant > main { flex: 1 0 auto; width: 100%; }
.p-footer { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 760px; margin: 0 auto; padding: 10px 16px 14px;
  font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--line); }
/* Links of the survey pages: accent colour of the theme, never underlined; keyboard focus shows the focus
   ring. Text links are semi-bold, so they differ from the text around them by more than their
   colour (WCAG 1.4.1). :where() keeps the rules weak: buttons and the tools of the preview win. */
:where(body.participant, .participant-frame) a { color: var(--accent); text-decoration: none; }
:where(body.participant, .participant-frame) a:where(:not([class])) { font-weight: 600; }
:where(body.participant, .participant-frame) a:where(:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
:where(body.participant, .participant-frame) .leaflet-container a { font-weight: inherit; }
.leaflet-container .leaflet-control-attribution a:hover, .leaflet-container .leaflet-control-attribution a:focus { text-decoration: none; }
.p-footer a { color: var(--muted); }
.p-footer .p-footer-legal { margin-left: auto; }  /* privacy and legal notice at the right end */
/* Logo of the survey's theme, above the page: shown as it is (no filter, no opacity, proportions kept) */
.p-logo { display: flex; margin: 0 0 22px; }
.p-logo-center { justify-content: center; }
.p-logo-right { justify-content: flex-end; }
.p-logo img { display: block; max-width: 100%; height: auto; }
/* Logos of funders and partners: small, at the end of the first and the last page, shown as they are */
.p-partners { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; width: 100%; max-width: 760px; margin: 0 auto; padding: 14px 16px; }
.p-partners img { display: block; height: auto; max-width: 100%; }
.p-partners-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 8px 12px; margin: 0 -12px; background: var(--partner-bg); border-radius: var(--radius); }
.p-page-title { font-size: 1.4rem; margin: 0 0 20px; }
.p-item { margin: 0 0 32px; }
.p-question { font-weight: 600; margin: 0 0 12px; padding: 0; font-size: 1.05rem; }
.p-required { color: var(--error); }
.p-required-note { margin: 4px 0 12px; color: var(--muted); font-size: 0.9rem; }
.p-if-touch { display: none; }
@media (hover: none) { .p-if-mouse { display: none; } .p-if-touch { display: inline; } }
.p-hint { color: var(--muted); font-size: 0.9rem; margin: -6px 0 10px; }
.p-fieldset, .p-likert-row { border: 0; margin: 0; padding: 0; min-width: 0; }
.p-info { font-size: 1rem; }
.p-info p { margin: 0 0 0.8em; }
.p-info p:last-child { margin-bottom: 0; }
.p-info small { font-size: 0.85em; color: var(--muted); }
.p-info ul { margin: 0 0 0.8em; padding-left: 1.3em; }
.has-error .p-question, .has-error .p-statement { color: var(--error); }
.p-error { color: var(--error); font-size: 0.9rem; margin: 8px 0 0; }

/* Single and multiple choice: whole row is the touch target */
.p-options { display: flex; flex-direction: column; gap: 8px; }
.p-options.horizontal { flex-direction: row; flex-wrap: wrap; }
.p-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.p-option:hover { border-color: var(--accent); }
.p-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.p-option input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.p-radio input { border-radius: 50%; }
.p-check input { border-radius: 4px; }
/* An option with a text field ("Other: ..."): the field follows the label and wraps below it on narrow screens */
.p-option-text { flex-wrap: wrap; row-gap: 6px; padding-top: 5px; padding-bottom: 5px; }
.p-option input.p-other { flex: 1 1 12em; width: auto; height: auto; min-width: 0; font: inherit; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); cursor: text; }
.p-option input.p-other:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Single choice as a drop-down list: as tall as an option row, as wide as its longest answer, never wider
   than the column; the text field of an option ("Other: ...") stands below the list */
label.p-question { display: block; }
.p-select select { display: block; font: inherit; min-height: 48px; min-width: min(100%, 14em); max-width: 100%;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--fg); cursor: pointer; }
.p-select select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.p-select input.p-other { display: block; width: 100%; max-width: 28em; margin-top: 8px; font: inherit; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--fg); }
.p-select input.p-other:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.p-select input.p-other[hidden] { display: none; }

/* Federal states as a map to click on: outlines and names only, in the colours of the survey. The radio
   buttons of the states leave the view once the map works (participant.js) and stay for screen readers and
   the keyboard; "not in Germany" and "no answer" stay as buttons below the map. */
.p-state-map { max-width: 520px; margin: 0 0 12px; }
.p-state-map svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.p-state-area { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; stroke-linejoin: round; cursor: pointer; }
.p-state-hit { fill: transparent; cursor: pointer; }
.p-state-label { font-size: 17px; text-anchor: middle; dominant-baseline: middle; fill: var(--fg); cursor: pointer;
  paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; stroke-linejoin: round; }
.p-state-label-small { font-size: 14px; }
.p-state-area.is-hover { fill: var(--hover); stroke: var(--accent); }
.p-state-area.is-chosen { fill: var(--accent); stroke: var(--accent); }
.p-state-label.is-chosen { fill: var(--on-accent); stroke: var(--accent); font-weight: 700; }
/* a small state (Hamburg, Bremen, Berlin, Saarland): the circle around it shows the choice as well */
.p-state-hit.is-hover { stroke: var(--accent); stroke-width: 1.5; }
.p-state-hit.is-chosen { fill: var(--accent-soft); fill-opacity: 0.7; stroke: var(--accent); stroke-width: 2.5; }
.p-state-label-small.is-chosen { fill: var(--fg); stroke: var(--accent-soft); }
.p-state-area.is-focus { stroke: var(--accent); stroke-width: 4; }
.p-state-chosen { margin: 8px 0 0; font-size: 1rem; }
.p-state.has-map [data-state-option] { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.has-error .p-state-area { stroke: var(--error-line); }
.has-error .p-state-area.is-chosen { stroke: var(--accent); }
.has-nudge .p-state-area { stroke: var(--nudge-line); }

/* Likert: a matrix on wide screens, one card per statement on phones */
.p-likert-head { display: none; }
.p-head-endpoints { display: flex; justify-content: space-between; gap: 16px; grid-column: 2 / -1; }
.p-head-endpoints span:last-child { text-align: right; }
.p-likert-row { padding: 14px 0; border-top: 1px solid var(--line); }
.p-likert-row:last-child { border-bottom: 1px solid var(--line); }
.p-statement { font-size: 1rem; margin-bottom: 10px; padding: 0; }
.p-scale { display: grid; grid-template-columns: repeat(var(--points), 1fr); gap: 6px; }
.p-point { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border-radius: 8px; cursor: pointer; text-align: center; }
.p-point:hover { background: var(--hover); }
.p-point:has(input:checked) { background: var(--accent-soft); }
.p-point input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
.p-point-label { font-size: 0.8rem; line-height: 1.2; color: var(--muted); hyphens: auto; }
.p-likert-endpoints .p-point-label { display: none; }
.p-endpoints { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--muted); margin-top: 2px; gap: 16px; }
.p-endpoints span:last-child { text-align: right; }

/* Fully labelled scales on narrow phones: vertical list, labels readable */
@media (max-width: 560px) {
  .p-likert-each.p-likert-full .p-scale { grid-template-columns: 1fr; gap: 4px; }
  .p-likert-each.p-likert-full .p-point { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); text-align: left; }
  .p-likert-each.p-likert-full .p-point-label { font-size: 0.95rem; color: var(--fg); }
}
/* "Labels once": one sticky header row, statements show circles only (all screen sizes) */
.p-likert-once .p-likert-head { display: grid; grid-template-columns: repeat(var(--points), 1fr); gap: 6px;
  position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 8px 0 6px; border-bottom: 1px solid var(--line);
  font-size: 0.8rem; line-height: 1.2; color: var(--muted); text-align: center; align-items: end; hyphens: auto; }
.p-likert-once .p-likert-corner { display: none; }
.p-likert-once .p-head-endpoints { grid-column: 1 / -1; font-size: 0.875rem; }
.p-likert-once .p-point-label { display: none; }
.p-likert-once .p-likert-row:first-child { border-top: 0; }
@media (min-width: 700px) {
  .p-likert-once .p-likert-corner { display: block; }
  .p-likert-once .p-likert-head { grid-template-columns: minmax(200px, 2fr) repeat(var(--points), 1fr); }
  .p-likert-once .p-head-endpoints { grid-column: 2 / -1; }
  .p-likert-once .p-likert-row { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(var(--points), 1fr); gap: 6px; align-items: center; padding: 8px 0; }
  .p-likert-once .p-statement { margin: 0; }
  .p-likert-once .p-scale { display: contents; }
  .p-likert-head { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(var(--points), 1fr); gap: 6px;
    font-size: 0.85rem; color: var(--muted); text-align: center; align-items: end; padding-bottom: 6px; }
  .p-likert-full .p-likert-row { display: grid; grid-template-columns: minmax(200px, 2fr) repeat(var(--points), 1fr);
    gap: 6px; align-items: center; padding: 8px 0; }
  /* float: a floated legend is not the fieldset's "rendered legend", so it becomes a grid cell like the radios */
  .p-likert-full .p-statement, .p-likert-once .p-statement { margin: 0; float: left; }
  .p-likert-full .p-scale { display: contents; }
  .p-likert-full .p-point-label { display: none; }
  .p-likert-each.p-likert-endpoints .p-likert-head { display: none; }
}

/* Text input */
.p-text { display: block; }
.p-text input, .p-text textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); }
.p-text input:focus, .p-text textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Date and time: one list per part, large enough for a thumb; they wrap on a narrow phone */
.p-date-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-date select { font: inherit; min-height: 48px; max-width: 100%; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--fg); }
.p-date select:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.p-date-sep { color: var(--muted); }
.p-date select[data-date-part=h]:not(:first-child) { margin-left: 12px; }  /* a date before the time */

/* Images */
.p-figure { margin: 0; }
.p-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.p-figure figcaption { font-size: 0.9rem; color: var(--muted); margin-top: 6px; }
.p-image-missing { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--hover); color: var(--muted); border-radius: var(--radius); }
.placeholder { background: #fbf1cf; color: #1d1d1b; border-radius: 4px; padding: 0 3px; font-family: ui-monospace, monospace; font-size: 0.9em; }

/* Navigation: Back left, Next right (Next stays right when there is no Back) */
.p-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.p-nav .p-next { margin-left: auto; }
.p-nav .p-back { order: -1; }
.p-button { font: inherit; font-weight: 600; padding: 12px 28px; border-radius: var(--radius); border: 0; background: var(--accent); color: var(--on-accent); cursor: pointer; min-width: 140px; }
a.p-button { text-decoration: none; text-align: center; }
.p-button-secondary { background: var(--surface); color: var(--accent); border: 1px solid var(--accent); }
.p-button-disabled, .p-button:disabled { background: var(--line); color: var(--muted); cursor: default; }
/* minimum or maximum time of a page: the seconds left, next to "Next" */
.p-hold { margin-left: auto; color: var(--muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.p-hold:not([hidden]) + .p-next { margin-left: 0; }
/* Informed consent */
.p-consent-title { font-size: 1.35rem; margin: 0 0 12px; }
.p-consent-body { font-size: 0.98rem; margin-bottom: 20px; }
.p-consent-body h3 { font-size: 1rem; margin: 18px 0 4px; }
.p-consent-body p { margin: 0 0 8px; }
.p-consent-body ul { margin: 0 0 8px; padding-left: 1.2em; }
.p-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.p-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p-text input.p-short { max-width: 14em; }
.p-text .p-hint { display: block; margin: -6px 0 8px; }
.p-confirms { margin-bottom: 16px; }
.p-confirms .p-option { align-items: flex-start; }
.p-confirms .p-option input { margin-top: 2px; }

/* Rating: slider */
.p-rating .p-endpoints { margin-top: 6px; }
.p-slider { position: relative; padding-top: 30px; --pct: 50%; }
.p-range { width: 100%; margin: 0; height: 36px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.p-range::-webkit-slider-runnable-track { height: 8px; border-radius: 4px;
  background: linear-gradient(to right, var(--accent) var(--pct), var(--track) var(--pct)); }
.p-range::-moz-range-track { height: 8px; border-radius: 4px; background: var(--track); }
.p-range::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--accent); }
.p-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.p-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
.p-slider.untouched .p-range::-webkit-slider-runnable-track { background: var(--track); box-shadow: inset 0 0 0 1px var(--track-edge); }
.p-slider.untouched .p-range::-moz-range-track { box-shadow: inset 0 0 0 1px var(--track-edge); }
.p-slider-hint { margin: 0 0 4px; }
.p-rating .p-slider-hint { margin: 6px 0 0; }
.p-slider-hint[hidden] { display: none; }
.p-slider.untouched .p-range::-moz-range-progress { background: transparent; }
.p-slider.untouched .p-range::-webkit-slider-thumb { opacity: 0; }
.p-slider.untouched .p-range::-moz-range-thumb { opacity: 0; }
/* optional start value: the handle is visible (muted) at the start value, but no answer until moved or tapped */
.p-slider.untouched.has-start .p-range::-webkit-slider-thumb { opacity: 0.55; }
.p-slider.untouched.has-start .p-range::-moz-range-thumb { opacity: 0.55; }
.p-slider-value { position: absolute; top: 0; left: clamp(0px, calc(var(--pct) - 20px), calc(100% - 40px)); width: 40px;
  text-align: center; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.p-slider:not([data-show-value]) .p-slider-value, .p-slider.untouched .p-slider-value { visibility: hidden; }

/* Rating: smileys */
.p-faces { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 4px; max-width: calc(var(--n) * 72px); }
.p-face { display: grid; place-items: center; padding: 4px; border-radius: 12px; cursor: pointer; }
.p-face input, .p-star input, .p-number input { position: absolute; opacity: 0; pointer-events: none; }
.p-face svg { width: 100%; max-width: 56px; height: auto; transition: transform 0.12s; }
.p-face svg circle:first-child { fill: var(--face-bg, hsl(var(--h) 60% var(--face-bg-l))); stroke: var(--face-edge, hsl(var(--h) 35% var(--face-edge-l))); stroke-width: 1.8; }
.p-face svg .eye { fill: var(--face-ink, hsl(var(--h) 35% var(--face-ink-l))); }
.p-face svg path { fill: none; stroke: var(--face-ink, hsl(var(--h) 35% var(--face-ink-l))); stroke-width: 2.4; stroke-linecap: round; }
.p-face:hover svg { transform: scale(1.08); }
.p-face input:checked + svg { transform: scale(1.12); }
.p-face input:checked + svg circle:first-child { fill: var(--face-on, hsl(var(--h) 70% var(--face-on-l))); stroke-width: 2.6; }
.p-face input:focus-visible + svg, .p-star input:focus-visible + svg, .p-number input:focus-visible + span {
  outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 8px; }
.p-face:has(input:checked) { background: var(--accent-soft); }
.p-face:has(input:checked) svg { transform: scale(1.12); }
.p-face:has(input:checked) svg circle:first-child { fill: var(--face-on, hsl(var(--h) 70% var(--face-on-l))); stroke-width: 2.6; }
.p-faces:has(input:checked) .p-face:not(:has(input:checked)) svg { opacity: 0.55; }
.p-face:has(input:focus-visible), .p-star:has(input:focus-visible), .p-number:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.p-rating-smileys .p-endpoints { max-width: calc(var(--n, 5) * 72px); }

/* Rating: stars in their natural order (1 … n). "This and all lower" comes from participant.js (.on up to the
   chosen star, .hov up to the hovered one); without JavaScript: :has() where the browser knows it, else the chosen star alone */
.p-stars { display: inline-flex; gap: 2px; }
.p-star { cursor: pointer; padding: 2px; color: var(--star-off); }
.p-star svg { width: 38px; height: 38px; fill: currentColor; stroke: var(--border-strong); stroke-width: 0.8; transition: transform 0.1s; }
.p-star input:checked + svg { color: var(--star); }
.p-stars:not(.is-live) .p-star:has(~ .p-star input:checked) { color: var(--star); }
.p-star.on { color: var(--star); }
.p-stars.hovering .p-star { color: var(--star-off); }
.p-stars.hovering .p-star input:checked + svg { color: inherit; }
.p-stars.hovering .p-star.hov { color: var(--star-hover); }
.p-star:hover svg { transform: scale(1.1); }
/* small screens: smaller stars, but each one stays easy to hit (44 px high; 44 px wide up to six stars) */
@media (max-width: 480px) {
  .p-rating-stars .p-star svg { width: 30px; height: 30px; }
  .p-rating-stars .p-star { padding: 7px 2px; }
  .p-rating-stars .p-stars:not(:has(.p-star:nth-child(7))) .p-star { padding: 7px; }
}

/* Rating: number row */
.p-numbers { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; }
.p-number span { display: grid; place-items: center; height: 44px; border: 1px solid var(--border); border-radius: 8px;
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; background: var(--surface); }
.p-number:hover span { border-color: var(--accent); }
.p-number input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* T17: on phones long rows (0 to 10) wrap instead of shrinking below a fingertip */
@media (max-width: 480px) {
  .p-numbers { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; }
  .p-number span { height: 44px; font-size: 0.95rem; }
}
.p-consent-note { font-size: 0.9rem; color: var(--muted); margin: 0 0 12px; }
/* Decline left (flush with the survey edge), continue right; on phones continue on top */
.p-consent-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.p-consent-actions .p-consent-decline { order: -1; }
@media (max-width: 560px) {
  .p-consent-actions { flex-direction: column; align-items: stretch; }
  .p-consent-actions .p-consent-decline { order: 1; }
  .p-consent-actions .p-button { width: 100%; }
}
.p-progress { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: -8px 0 24px; }
.p-progress span { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.2s; }
/* first on the page (no logo, no language switch above it): flush with the top edge, no white space above */
.p-container > .p-progress:first-child { margin-top: -24px; border-radius: 0 0 4px 4px; }
.p-container > .p-progress:first-child span { border-radius: 0 0 4px 4px; }

/* Marked fields: light red for errors, light amber for nudges (plus a short text line) */
.has-error .p-option, .has-error .p-text input, .has-error .p-text textarea, .p-option.p-missing,
.has-error .p-number span, .has-error .p-faces, .has-error .p-stars, .has-error .p-slider, .has-error .p-date select,
.has-error .p-select select, .has-error .p-select input.p-other {
  background: var(--error-soft); border-color: var(--error-line); }
.has-error .p-faces, .has-error .p-stars, .has-error .p-slider { border: 1px solid var(--error-line); border-radius: 12px; padding: 6px; }
.has-error .p-slider { padding-top: 30px; }
.p-likert-row.p-missing { background: var(--error-soft); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
.has-nudge .p-option, .has-nudge .p-text input, .has-nudge .p-text textarea, .has-nudge .p-number span,
.has-nudge .p-date select, .has-nudge .p-select select, .has-nudge .p-select input.p-other {
  background: var(--nudge-soft); border-color: var(--nudge-line); }
.has-nudge .p-likert-row.p-missing, .has-nudge .p-sd-row.p-missing { background: var(--nudge-soft); }
.p-likert-row.p-missing, .p-sd-row.p-missing { box-shadow: inset 4px 0 0 var(--error-line); }
.has-nudge .p-likert-row.p-missing, .has-nudge .p-sd-row.p-missing { box-shadow: inset 4px 0 0 var(--nudge-line); }
.has-nudge .p-faces, .has-nudge .p-stars, .has-nudge .p-slider { background: var(--nudge-soft); border: 1px solid var(--nudge-line); border-radius: 12px; padding: 6px; }
.has-nudge .p-slider { padding-top: 30px; }
.has-nudge .cj-table td, .has-nudge .md td { background: var(--nudge-soft); }
.has-error .p-csum-num input, .has-error .p-assoc-word input, .has-error .p-map-canvas, .has-error .p-pos-field { border-color: var(--error-line); }
.has-error .p-mark-stage { box-shadow: 0 0 0 2px var(--error-line); }
.has-nudge .p-csum-num input, .has-nudge .p-assoc-word input, .has-nudge .p-map-canvas, .has-nudge .p-pos-field { border-color: var(--nudge-line); }
.has-nudge .p-mark-stage { box-shadow: 0 0 0 2px var(--nudge-line); }
.has-error .p-option:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.p-nudge { color: var(--nudge); font-size: 0.9rem; margin: 8px 0 0; }
.p-tempo-note { color: var(--nudge); background: var(--nudge-soft); border: 1px solid var(--nudge-line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 18px; }
.p-preview-tools { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.p-preview-tools a { color: inherit; font-weight: 650; text-decoration: none; padding: 2px 5px; border-radius: 4px; }
.p-preview-tools a[aria-current] { background: #fff; }
.p-preview-summary { margin-top: 32px; padding: 16px; border: 1px dashed #e0cf8f; border-radius: var(--radius); background: #fffbeb; font-size: 0.9rem; }
.p-preview-summary ul { padding-left: 1.2em; }

.p-preview-bar ~ .p-container .p-likert-once .p-likert-head { top: 36px; }

/* Preview: device switch and phone frame */
.p-device { display: inline-flex; padding: 2px; background: rgba(255,255,255,0.55); border-radius: 7px; gap: 2px; }
.p-device a { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 5px; }
.p-device a[aria-current] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.p-preview-pager a.off { opacity: 0.35; pointer-events: none; }
@media (max-width: 640px) { .p-device span { display: none; } }
.device-stage-body { background: #e9e8e3; min-height: 100vh; padding-bottom: 0; }
.device-stage { display: flex; flex-direction: column; align-items: center; padding: 20px 16px 8px; }
.device { width: 414px; height: 868px; padding: 12px; border-radius: 48px; background: #1c1c1e;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25), inset 0 0 0 2px #3a3a3c; transform-origin: top center; flex: none; }
.device iframe { display: block; width: 390px; height: 844px; border: 0; border-radius: 38px; background: #fff; }
.device-caption { font-size: 0.75rem; color: #77756e; margin: 6px 0 0; }
.device.is-landscape { border-radius: 40px; }
.device-controls { display: flex; gap: 8px; align-items: center; margin-top: 12px; font-size: 0.8rem; }
.device-controls select, .device-rotate { font: inherit; padding: 5px 8px; border: 1px solid #cfccc2; border-radius: 8px; background: #fff; color: #3d3c37; }
.device-rotate { cursor: pointer; white-space: nowrap; }
/* Inside the phone frame: overlay scrollbars like on real phones */
html.in-device { scrollbar-width: none; }
html.in-device::-webkit-scrollbar { display: none; }
.device-stage-body { overflow-x: hidden; }
.p-langs { display: flex; justify-content: flex-end; gap: 10px; margin: -8px 0 12px; font-size: 0.9rem; }
.p-langs a { color: var(--muted); text-decoration: none; font-weight: 400; }
.p-langs a[aria-current] { color: var(--fg); font-weight: 600; }
.p-end { padding: 40px 0 20px; }
.p-end h3 { font-size: 1.4rem; margin: 0 0 10px; }
.p-again { margin-top: 4px; }
.p-forward { margin: 0 0 20px; }
.p-forward-note { color: var(--muted); margin: 0 0 12px; }
.p-end-boards { display: flex; flex-wrap: wrap; gap: 12px; }
a.p-button[data-forward] { display: inline-block; }
.p-validate { display: inline-flex; align-items: center; gap: 4px; font-weight: 650; cursor: pointer; }
.p-validate select { font: inherit; font-weight: 500; max-width: 13em; padding: 1px 4px; border-radius: 5px; border: 1px solid rgba(0,0,0,0.25); background: #fff; color: #222; }
.p-validate input { width: 14px; height: 14px; margin: 0; accent-color: #7a5b00; }
.device-row { display: flex; gap: 32px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.device-col { display: flex; flex-direction: column; align-items: center; }
.phone-card { width: 260px; background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); font-size: 0.85rem; }
.phone-card h2 { font-size: 0.95rem; margin: 0 0 12px; }
.phone-card .qr svg { display: block; width: 100%; height: auto; }
.phone-card p { margin: 10px 0 0; line-height: 1.4; }
.phone-card input { width: 100%; margin-top: 10px; font: 0.7rem ui-monospace, monospace; padding: 6px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); }
@media (max-width: 900px) { .phone-card { display: none; } }

/* Conjoint: attributes x alternatives; the whole column is clickable */
.cj { overflow-x: auto; }
.cj-table { width: 100%; border-collapse: separate; border-spacing: 6px 0; table-layout: fixed; min-width: calc(var(--alts) * 130px); }
.cj-table th, .cj-table td { padding: 8px 10px; text-align: center; vertical-align: middle; font-size: 0.95rem; }
.cj-table thead th { font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.cj-table tbody th { text-align: left; font-size: 0.875rem; color: var(--muted); font-weight: 500; width: 26%; }
.cj-table .cj-corner { width: 26%; }
.cj-table td { background: var(--surface-2); border-left: 1px solid var(--line); border-right: 1px solid var(--line); cursor: pointer; }
.cj-table tbody tr:first-child td { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.cj-table tr.cj-choose td { border-bottom: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-bottom: 12px; }
.cj-table td.on { background: var(--accent-soft); border-color: var(--accent); }
.cj-images img { width: 100%; height: auto; border-radius: 8px; display: block; }
.cj-pick { justify-content: center; padding: 8px 10px; background: var(--surface); }
.cj-none { margin-top: 10px; }
/* conjoint: the chosen column is highlighted already; its "Choose" field stays as it is (only the radio is filled) */
.cj-pick-plain:has(input:checked) { background: var(--surface); border-color: var(--border); }
@media (max-width: 560px) {
  .cj-table tbody th { width: 30%; font-size: 0.8rem; }
  .cj-table th, .cj-table td { padding: 6px; font-size: 0.9rem; }
  .cj-pick span { font-size: 0.9rem; }
}
.has-error .cj-table td { background: var(--error-soft); }

/* MaxDiff: best | statement | worst; a row cannot be both (participant.js) */
.md { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.md th { font-size: 0.875rem; color: var(--muted); font-weight: 600; padding: 0 6px 2px; line-height: 1.2; }
.md .md-pick { width: 4.5rem; text-align: center; }
.md td { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; vertical-align: middle; }
.md td:first-child { border-left: 1px solid var(--line); border-radius: 10px 0 0 10px; }
.md td:last-child { border-right: 1px solid var(--line); border-radius: 0 10px 10px 0; }
.md td.md-text { padding: 12px 10px; font-size: 0.95rem; }
.md td.md-pick label { display: flex; align-items: center; justify-content: center; min-height: 48px; cursor: pointer; }
.md td.md-pick input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.md td.md-best:has(input:checked) { background: var(--good-mid); border-color: var(--good-line); }
.md td.md-worst:has(input:checked) { background: var(--bad-mid); border-color: var(--bad-line); }
.md tr.md-b td.md-text { background: var(--good-soft); }
.md tr.md-w td.md-text { background: var(--bad-soft); }
@media (max-width: 560px) {
  .md .md-pick { width: 3.6rem; }
  .md th { font-size: 0.8rem; padding: 0 2px 2px; }
  .md td.md-text { padding: 10px 6px; font-size: 0.9rem; }
}
.has-error .md td { background: var(--error-soft); }

/* Automatic continue: a short visual cue on the Next button */
form.auto-advancing .p-next { position: relative; overflow: hidden; }
form.auto-advancing .p-next::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--on-accent-veil); transform-origin: left; animation: p-auto 0.45s linear; }
@keyframes p-auto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { form.auto-advancing .p-next::after { animation: none; } }
.p-preview-pager a.p-restart { width: auto; padding: 0 8px; font-size: 0.75rem; font-weight: 650; margin-right: 4px; }
.p-separated { font-size: 0.9rem; color: var(--ok); background: var(--good-soft); border: 1px solid var(--good-line); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 18px; }

/* Semantic differential: left pole | scale | right pole; on phones the poles sit above the scale */
.p-sd { display: flex; flex-direction: column; }
.p-sd-row { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, calc(var(--points) * 44px)) minmax(90px, 1fr);
  align-items: center; gap: 10px; border: 0; margin: 0; padding: 8px 0; border-top: 1px solid var(--line); min-width: 0; }
.p-sd-row:last-child { border-bottom: 1px solid var(--line); }
.p-sd-left { text-align: right; font-size: 0.95rem; }
.p-sd-right { text-align: left; font-size: 0.95rem; }
.p-sd-scale { display: grid; grid-template-columns: repeat(var(--points), 1fr); }
.p-sd-point { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 8px; cursor: pointer; }
.p-sd-point:hover { background: var(--hover); }
.p-sd-point:has(input:checked) { background: var(--accent-soft); }
.p-sd-point input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }
.p-sd-num { font-size: 0.8rem; color: var(--muted); }
.p-sd-row.p-missing { background: var(--error-soft); border-radius: 10px; padding-left: 10px; padding-right: 10px; }
@media (max-width: 560px) {
  .p-sd-row { grid-template-columns: 1fr 1fr; grid-template-areas: "l r" "s s"; row-gap: 4px; }
  .p-sd-left { grid-area: l; text-align: left; font-size: 0.9rem; }
  .p-sd-right { grid-area: r; text-align: right; font-size: 0.9rem; }
  .p-sd-scale { grid-area: s; }
}

/* Live sample comparison */
.p-sc { display: flex; flex-direction: column; gap: 16px; }
.p-sc-row { padding: 12px 0; border-top: 1px solid var(--line); }
.p-sc-label { margin: 0 0 8px; font-weight: 500; }
.p-sc-few, .p-sc-note { margin: 0; color: var(--muted); font-size: 0.9rem; }
.p-sc-note { margin-bottom: 8px; }
.p-sc-hist { display: grid; grid-template-columns: repeat(var(--k), 1fr); gap: 4px; align-items: end; height: 72px; max-width: 520px; }
.p-sc-col { height: 100%; display: flex; align-items: flex-end; background: var(--hover); border-radius: 4px; }
.p-sc-colfill { display: block; width: 100%; background: var(--data-soft); border-radius: 4px; min-height: 2px; }
.p-sc-col.is-own .p-sc-colfill { background: var(--accent); }
.p-sc-col.is-own { outline: 2px solid var(--accent); outline-offset: 1px; }
.p-sc-axis { display: flex; justify-content: space-between; max-width: 520px; font-size: 0.875rem; color: var(--muted); margin-top: 4px; gap: 12px; }
.p-sc-meta { margin: 6px 0 0; font-size: 0.9rem; color: var(--muted); }
.p-sc-bars { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.p-sc-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 2fr 3.2em; gap: 10px; align-items: center; font-size: 0.9rem; }
.p-sc-track { height: 12px; background: var(--hover); border-radius: 6px; overflow: hidden; }
.p-sc-fill { display: block; height: 100%; background: var(--data-soft); }
.p-sc-bars li.is-own .p-sc-fill { background: var(--accent); }
.p-sc-bars li.is-own .p-sc-opt { font-weight: 600; }
.p-sc-pct { text-align: right; color: var(--muted); }
@media (max-width: 560px) { .p-sc-bars li { grid-template-columns: 1fr 3.2em; } .p-sc-track { grid-column: 1 / -1; order: 3; } }

/* Live sample comparison: bell curve of scale means */
.p-sc-bell { margin: 4px 0 18px; max-width: 560px; }
.p-bell { display: block; width: 100%; height: auto; overflow: visible; }
.p-bell-area { fill: var(--accent-soft); }
.p-bell-line { fill: none; stroke: var(--data); stroke-width: 2; }
.p-bell-axis, .p-bell-tick { stroke: var(--border-strong); }
.p-bell-num { fill: var(--muted); font-size: 12px; }
.p-bell-mean { stroke: var(--muted); stroke-dasharray: 3 3; }
.p-bell-meanlabel { fill: var(--muted); font-size: 12px; }
.p-bell-own { stroke: var(--accent); stroke-width: 2; }
.p-bell-dot { fill: var(--accent); }
.p-bell-ownlabel { fill: var(--accent); font-size: 13px; font-weight: 600; }
.p-sc-bell-axis { max-width: none; }

/* Live sample comparison: 2D map */
.p-sc-map { max-width: 560px; margin: 4px 0 18px; }
.p-map { display: block; width: 100%; height: auto; }
.p-map-bg { fill: var(--surface-3); stroke: var(--line); }
.p-map-grid { stroke: var(--line); }
.p-map-num { fill: var(--muted); font-size: 12px; }
.p-map-mean { stroke: var(--muted); stroke-dasharray: 3 3; }
.p-map-dot { fill: var(--data); fill-opacity: 0.55; stroke: var(--data-strong); stroke-width: 1; }
.p-map-own { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.p-map-ownlabel { fill: var(--accent); font-size: 14px; font-weight: 700; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; }  /* readable over a bubble */
.p-map-axislabel { fill: var(--fg); font-size: 13px; font-weight: 600; }
.p-map-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--data); vertical-align: -1px; }
.p-map-key.own { background: var(--accent); }
.p-map-axes { margin: 6px 0 0; display: grid; gap: 2px; font-size: 0.9rem; color: var(--muted); }
.p-map-axes div { display: flex; gap: 8px; }
.p-map-axes dt { color: var(--muted); min-width: 6.5em; }
.p-map-axes dd { margin: 0; }

/* Einordnung (score bands) */
.p-band { max-width: 560px; }
.p-band-result { margin: 4px 0 2px; font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.p-band-text { margin: 0 0 10px; }
.p-band-bar { position: relative; display: flex; height: 38px; border-radius: 10px; overflow: visible; margin: 14px 0 6px; }
.p-band-seg { display: flex; align-items: center; justify-content: center; background: var(--hover); color: var(--muted);
  font-size: 0.8rem; text-align: center; padding: 0 4px; border-right: 2px solid var(--bg); overflow: hidden; }
.p-band-seg:first-child { border-radius: 10px 0 0 10px; }
.p-band-seg:last-of-type { border-radius: 0 10px 10px 0; border-right: 0; }
.p-band-seg.is-hit { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.p-band-marker { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: var(--accent); border-radius: 2px; }

/* Ranking */
.p-rank-hint { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.p-rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.p-rank-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); color: var(--fg); border: 1px solid var(--border);
  border-radius: 10px; cursor: grab; user-select: none; }
.p-rank-item.is-dragging { opacity: 0.5; border-style: dashed; }
.p-rank-pos { display: inline-grid; place-items: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-weight: 700; font-size: 0.9rem; }
.p-rank-grip { color: var(--border-strong); letter-spacing: -2px; }
.p-rank-label { flex: 1; }
.p-rank-btns { display: flex; gap: 4px; }
.p-rank-btns button { width: 44px; height: 44px; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-3); font-size: 1rem; cursor: pointer; }
.p-rank-btns button:hover { border-color: var(--accent); color: var(--accent); }
.p-rank-confirm { margin: 8px 0 0; }
.p-rank-ok { border: 1px dashed var(--border-strong); background: transparent; border-radius: 8px; padding: 6px 12px; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.9rem; }
.p-rank-ok.is-done { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.has-error .p-rank-item { border-color: var(--error-line); background: var(--error-soft); }
.has-nudge .p-rank-item { border-color: var(--nudge-line); background: var(--nudge-soft); }

/* Assignment task */
.p-assign { max-width: 620px; }
.p-assign-stage { padding: 12px 0; }
.p-assign-start { padding: 12px 34px; font-size: 1.05rem; font-weight: 700; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); cursor: pointer; }
.p-assign-note { color: var(--muted); font-size: 0.9rem; }
.p-assign-task { padding: 8px 0; }
.p-assign-progress { margin: 0; color: var(--muted); font-size: 0.9rem; text-align: center; }
.p-assign-word { min-height: 3.2rem; margin: 14px 0 20px; text-align: center; font-size: 1.8rem; font-weight: 700; }
.p-assign-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.p-assign-box { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 92px; border: 2px solid var(--border);
  border-radius: 14px; background: var(--surface-3); color: var(--fg); font: inherit; font-size: 1.15rem; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.p-assign-box:hover, .p-assign-box:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.p-assign-box:active { transform: scale(0.98); }
.p-assign-box kbd { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }
.p-assign-done { font-weight: 600; color: var(--accent); }
.p-assign-restart { color: var(--fg); margin-left: 10px; border: 1px solid var(--border); background: transparent; border-radius: 8px; padding: 4px 10px; font: inherit; cursor: pointer; }
@media (hover: none) { .p-assign-box kbd { display: none; } }
.p-nav[hidden], .p-next[hidden] { display: none !important; }
.p-assign-navstart[hidden], [data-assign-start][hidden] { display: none !important; }

/* Conjoint: explanation page, table without attribute names */
.cj-explain { margin: 14px 0 0; display: flex; flex-direction: column; gap: 10px; }
.cj-explain div { border-left: 3px solid var(--accent-soft); padding: 2px 0 2px 12px; }
.cj-explain dt { font-weight: 700; }
.cj-explain dd { margin: 2px 0 0; }
.cj-explain-desc { display: block; }
.cj-explain-levels { display: block; color: var(--muted); font-size: 0.9rem; }
.cj-table.cj-no-labels td { text-align: center; }

/* Constant sum: slider + number per option, the total is always right */
.p-csum { max-width: 620px; }
.p-csum-hint { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.p-csum-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 2fr) auto; align-items: center; gap: 6px 14px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }
.p-csum:not(.is-live) .p-csum-row { grid-template-columns: 1fr auto; }
.p-csum-num { display: inline-flex; align-items: baseline; gap: 4px; }
.p-csum-num input { width: 4.6em; text-align: right; font: inherit; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--fg); }
.p-csum-unit { color: var(--muted); font-size: 0.9rem; }
.p-csum-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.p-csum-sum { color: var(--muted); }
.p-csum-sum strong { color: var(--text, inherit); }
.p-csum-rest { margin-left: 8px; font-weight: 600; color: var(--error); }
.p-csum-rest[hidden] { display: none; }
@media (max-width: 520px) {
  .p-csum-row { grid-template-columns: 1fr auto; }
  .p-csum-row .p-csum-range { grid-column: 1 / -1; grid-row: 2; }
}

/* Mark an image: spots or highlighter lines over the image; ↶ takes back the last mark */
.p-mark-hint { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.p-mark-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: 10px; overflow: hidden;
  user-select: none; -webkit-user-select: none; }
.p-mark-stage img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; }
.p-mark-layer { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
.p-mark[data-mode="lines"] .p-mark-layer { touch-action: none; }  /* drawing, not scrolling, on the image */
.p-mark.is-full .p-mark-layer { cursor: not-allowed; }
.p-mark-dot { fill: var(--mark); fill-opacity: 0.8; stroke: rgba(0, 0, 0, 0.55); }
.p-mark-line { fill: none; stroke: var(--mark); stroke-opacity: 0.6; stroke-linecap: round; stroke-linejoin: round; }
.p-mark-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 36px; }
.p-mark-count { color: var(--muted); font-size: 0.9rem; }
.p-mark-undo { color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.p-mark-btns { display: flex; gap: 8px; }
.p-mark-undo:disabled { opacity: 0.4; cursor: default; }
.p-mark:not(.is-live) .p-mark-bar { display: none; }
.p-mark.bump .p-mark-count { animation: p-mark-bump 0.4s; }
@keyframes p-mark-bump { 50% { color: var(--error); } }

/* Map with markers (Leaflet, static/vendor/leaflet): markers on the map, one card per marker below it */
.p-map-hint { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; }
.p-map-search { display: flex; gap: 8px; margin-bottom: 8px; }
.p-map-search[hidden], .p-map-results[hidden] { display: none; }
.p-map-search input { flex: 1; min-width: 0; font: inherit; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--fg); }
.p-map-results { list-style: none; margin: 0 0 8px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.p-map-results button { color: var(--fg); display: block; width: 100%; text-align: left; font: inherit; font-size: 0.9rem; padding: 6px 8px;
  border: 0; background: none; border-radius: 6px; cursor: pointer; }
.p-map-results button:hover, .p-map-results button:focus { background: var(--accent-soft); }
.p-map-empty { padding: 6px 8px; color: var(--muted); font-size: 0.9rem; }
.p-map-credit { padding: 4px 8px 2px; color: var(--muted); font-size: 0.8rem; }
.p-map-stage { position: relative; }
.p-map-canvas { height: min(60vh, 440px); min-height: 260px; border: 1px solid var(--border); border-radius: 10px; z-index: 0; }
.p-map.is-full .p-map-canvas { cursor: not-allowed; }
.p-map-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-height: 36px; }
.p-map-count { color: var(--muted); font-size: 0.9rem; }
.p-map.bump .p-map-count { animation: p-mark-bump 0.4s; }
.p-map-btn { color: var(--fg); border: 1px solid var(--border-strong); background: var(--surface); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 0.9rem; cursor: pointer; }
.p-map-btn:disabled { opacity: 0.4; cursor: default; }
.p-map-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.p-map-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.p-map-card.is-incomplete { border-left: 3px solid var(--nudge-line); }
.p-map-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.p-map-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-map-no { border: 0; background: none; font: inherit; font-weight: 600; padding: 4px 0; cursor: pointer; color: inherit; }
.p-map-del { padding: 4px 10px; font-size: 0.9rem; }
@media (pointer: coarse) { .p-map-del, .p-map-no { min-height: 44px; } .p-map-del { padding: 4px 14px; } }
.p-map-q { margin-top: 10px; }
.p-map-q-text { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.p-map-options .p-option { padding: 8px 12px; }
.p-map-text { width: 100%; font: inherit; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--fg); }
.p-map-noscript { padding: 16px; color: var(--error); }
.q-map-icon { background: none; border: 0; }
.q-map-icon svg { display: block; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }
.q-map-icon.is-active { z-index: 1000 !important; }

/* Sliders (one or more statements, independent values) */
.p-sliders { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.p-slider-label { margin-bottom: 2px; }
.p-slider[data-signed="1"] .p-range::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--track) var(--lo, 50%), var(--accent) var(--lo, 50%), var(--accent) var(--hi, 50%), var(--track) var(--hi, 50%)); }
.p-slider[data-signed="1"] .p-range::-moz-range-track {
  background: linear-gradient(to right, var(--track) var(--lo, 50%), var(--accent) var(--lo, 50%), var(--accent) var(--hi, 50%), var(--track) var(--hi, 50%)); }
.p-slider[data-signed="1"] .p-range::-moz-range-progress { background: transparent; }
.p-slider[data-signed="1"].untouched .p-range::-webkit-slider-runnable-track, .p-slider[data-signed="1"].untouched .p-range::-moz-range-track { background: var(--track); }
.p-sliders .p-slider-value { white-space: nowrap; width: auto; left: var(--pct); transform: translateX(calc(var(--pct) * -1)); }

/* Crowd: previous participants as figures walking to their answer */
.p-crowd { max-width: 760px; }
.p-crowd-stage { border-radius: 12px; background: linear-gradient(var(--surface-2), var(--hover)); overflow: hidden; }
.p-crowd-svg { display: block; width: 100%; height: auto; }
.crowd-floor { fill: var(--track); }
.crowd-bin { stroke: var(--border); stroke-dasharray: 3 5; }
.av { --av: var(--crowd); transition-property: transform; transition-timing-function: linear; }
.av-body, .av-head { fill: var(--av); }
.av-leg { stroke: var(--av); stroke-width: 4; stroke-linecap: round; }
.av-own { --av: var(--own); }  /* darker than the accent, so the own figure stands out from the crowd */
.av-own .av-body, .av-own .av-head { stroke: var(--bg); stroke-width: 1.4; paint-order: stroke; }
.av-own .av-leg { stroke-width: 4.5; }
.av-shadow { fill: var(--own-shadow); }
.av-me { font: 800 12px system-ui, sans-serif; fill: var(--own); text-anchor: middle; stroke: var(--bg); stroke-width: 3px; paint-order: stroke; }
.av.walking .av-bob { animation: av-bob 0.3s ease-in-out infinite alternate; }
.av.walking .av-leg { transform-box: fill-box; transform-origin: top center; animation: av-step 0.3s ease-in-out infinite alternate; }
.av.walking .av-leg-r { animation-direction: alternate-reverse; }
@keyframes av-bob { to { transform: translateY(-2.5px); } }
@keyframes av-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@media (prefers-reduced-motion: reduce) { .av { transition-duration: 0s !important; } .av.walking .av-bob, .av.walking .av-leg { animation: none; } }
.p-crowd-bins { display: grid; grid-template-columns: repeat(var(--k), 1fr); gap: 4px; margin: 6px 3% 0; font-size: 0.85rem; color: var(--muted); text-align: center; line-height: 1.25; }
.p-crowd-ends { display: flex; justify-content: space-between; margin: 4px 3% 0; font-size: 0.875rem; color: var(--muted); }
.p-crowd-wait { color: var(--muted); font-style: italic; }

/* Preview bar: jump to a block (dropdown on the page label) */
.p-jump { position: relative; }
.p-jump summary { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.p-jump summary::-webkit-details-marker { display: none; }
.p-jump summary:hover, .p-jump[open] summary { background: #fff; }
.p-jump-caret { font-size: 0.75em; opacity: 0.7; }
.p-jump-list { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 30; margin: 0; padding: 6px;
  list-style: none; min-width: 340px; max-width: min(440px, 92vw); max-height: 60vh; overflow: auto; background: #fff; color: #222;
  border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); white-space: normal; text-align: left; }
.p-preview-pager .p-jump-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: auto; height: auto;
  padding: 7px 10px; border-radius: 6px; color: inherit; text-decoration: none; font-weight: 400; }
.p-preview-pager .p-jump-list a:hover { background: #f1efe6; }
.p-preview-pager .p-jump-list a[aria-current="true"] { background: #fdf3cf; font-weight: 700; }
.p-jump-iter { color: #777; font-weight: 400; }
.p-jump-page { color: #888; font-size: 0.85em; white-space: nowrap; }
@media (max-width: 700px) {
  .p-preview-pager .p-jump[data-pager-label] { overflow: visible; min-width: 0; }
  .p-jump summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .p-jump-list { position: fixed; top: 40px; left: 50%; }
}

/* Footer: the tool's name in the logo font (no link) next to the privacy link */
.p-brand { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: 0.95rem; color: var(--muted); letter-spacing: -0.01em; }
/* Privacy page for participants */
.p-privacy h2 { font-size: 1.05rem; margin: 26px 0 8px; }
.p-privacy p, .p-privacy li { line-height: 1.55; }
.p-privacy-people { padding-left: 1.2em; margin: 0 0 8px; }
.p-privacy-back { margin-top: 32px; }
.p-complaint-form { display: grid; gap: 18px; margin-top: 18px; }
.p-complaint-label { display: block; font-weight: 600; margin-bottom: 8px; padding: 0; }
.p-complaint .p-hint { display: block; color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
.p-complaint-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.p-complaint-actions { margin: 0; }
@media (max-width: 560px) { .p-complaint-actions .p-button { width: 100%; } }
/* the deletion code (end page, privacy page, "Antworten löschen"): evenly spaced letters that are easy to copy by hand */
.p-erase-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; white-space: nowrap; }
.p-erase-note { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; }
.p-erase-note p { margin: 0; }
.p-copy { font: inherit; font-size: 0.85em; margin-left: 8px; padding: 4px 12px; min-height: 32px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--surface); color: var(--accent); cursor: pointer; }
.p-erase-note .p-hint { margin: 6px 0 0; }
.p-erase input.p-erase-code { text-transform: uppercase; max-width: 16em; }
.p-erase .p-complaint-form + .p-complaint-form { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Preview comments: fixed panel right of the page on wide screens, a button that opens it elsewhere */
.p-comments { font-size: 0.85rem; }
.p-comments h2 { font-size: 0.95rem; margin: 0 0 10px; }
.p-comments form { display: flex; flex-direction: column; gap: 8px; }
.p-comments label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.p-comments select, .p-comments input, .p-comments textarea { font: inherit; font-weight: 400; padding: 6px 8px; border: 1px solid #d8d6ce; border-radius: 6px; width: 100%; box-sizing: border-box; }
.p-comments .p-comments-send { align-self: flex-start; padding: 7px 14px; font-size: 0.85rem; }
.p-comments-hint { color: #777; font-weight: 400; font-size: 0.8rem; }
.p-comments-error { color: #b3261e; margin: 0; }
.p-comments-list { list-style: none; margin: 14px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.p-comments-list li { background: #fff8d6; border: 1px solid #f0e2a0; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.p-comments-target { font-size: 0.75rem; color: #7a6000; font-weight: 600; }
.p-comments-text { white-space: pre-wrap; }
.p-comments-meta { font-size: 0.75rem; color: #777; }
.p-comments-del { border: 0; background: none; padding: 0; color: #b3261e; cursor: pointer; font: inherit; font-weight: 600; }
.p-comments-toggle { position: fixed; right: 16px; bottom: 44px; z-index: 12; padding: 9px 14px; border-radius: 999px; border: 1px solid #e3cf7a;
  background: #fff3c4; color: #5c4500; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.p-comments-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: #c99a00; color: #fff; font-size: 0.75rem; }
.p-comments:not(.is-stage) .p-comments-panel { display: none; position: fixed; right: 16px; bottom: 92px; z-index: 12; width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 150px); overflow: auto; background: #fff; border: 1px solid #e3cf7a; border-radius: 12px; padding: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); }
.p-comments.is-open .p-comments-panel { display: block; }
/* the floating button covers no answer: room below the page, and on a phone only the symbol */
body:has(.p-comments-toggle) main.p-container { padding-bottom: 72px; }
@media (max-width: 480px) { .p-comments-word { display: none; } .p-comments-toggle { padding: 9px 12px; } }
@media (min-width: 1280px) {  /* room right of the 760 px column: the panel is always visible */
  .p-comments:not(.is-stage) .p-comments-toggle { display: none; }
  .p-comments:not(.is-stage) .p-comments-panel { display: block; top: 52px; bottom: 44px; right: 20px; width: min(320px, calc(50vw - 420px)); max-height: none; }
}
.p-comments.is-stage { width: 300px; background: #fff; border: 1px solid #e3cf7a; border-radius: 12px; padding: 14px; align-self: flex-start; }

/* Free text: optional text before and after the input box ("ca. [ 1,82 ] m") */
.p-affixed.has-affix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p-affixed.has-affix input:not(.p-short) { flex: 1 1 200px; width: auto; min-width: 0; }
.p-affix { color: inherit; }
.p-affix-block { display: block; margin: 4px 0; }

/* Conjoint explanation: levels with their definitions */
.cj-explain-defs { margin: 4px 0 0; padding-left: 1.1em; }
.cj-explain-defs li { margin: 2px 0; }

/* Van Westendorp price questions: product box, four price fields, live order hint */
.p-psm-product { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; }
.p-psm-product > :first-child { margin-top: 0; }
.p-psm-product > :last-child { margin-bottom: 0; }
.p-psm-row { display: block; margin: 0 0 14px; }
.p-psm-q { display: block; margin: 0 0 6px; }
.p-psm-row input.p-short { max-width: 10em; text-align: right; }
.p-psm-row input.p-invalid { border-color: var(--error); }
.p-psm-msg { display: block; color: var(--error); font-size: 0.9rem; margin-top: 4px; }
.p-psm-msg:empty { display: none; }
.p-psm-nms { margin-top: 18px; }
.p-psm-order { color: var(--nudge); background: var(--nudge-soft); border-radius: 8px; padding: 8px 10px; font-size: 0.9rem; margin: 4px 0 0; }

/* 2D positioning (items/position2d.py) */
.p-pos { max-width: 620px; }
.p-pos-hint { margin: 0 0 10px; color: var(--muted); font-size: 0.9rem; }
.p-pos-frame { display: grid; grid-template-columns: 1.4em auto 1fr; grid-template-rows: 1fr auto auto; gap: 4px 6px; }
.p-pos-ylabel { grid-row: 1; grid-column: 1; display: flex; align-items: center; justify-content: center; }
.p-pos-ylabel span { transform: rotate(-90deg); white-space: nowrap; font-weight: 600; font-size: 0.9rem; }
.p-pos-yends { grid-row: 1; grid-column: 2; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.875rem; color: var(--muted); text-align: right; }
.p-pos-field { grid-row: 1; grid-column: 3; position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface-2); cursor: crosshair; touch-action: none; }
.p-pos-mid-x, .p-pos-mid-y { position: absolute; background: var(--border); pointer-events: none; }
.p-pos-mid-x { left: 50%; top: 0; bottom: 0; width: 1px; }
.p-pos-mid-y { top: 50%; left: 0; right: 0; height: 1px; }
.p-pos-xends { grid-row: 2; grid-column: 3; display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--muted); }
.p-pos-xlabel { grid-row: 3; grid-column: 3; text-align: center; font-weight: 600; font-size: 0.9rem; }
.p-pos-marker { position: absolute; display: flex; align-items: center; gap: 4px; transform: translate(-7px, -50%); cursor: grab;
  touch-action: none; white-space: nowrap; font-size: 0.875rem; z-index: 1; }
.p-pos-marker.is-right { flex-direction: row-reverse; transform: translate(calc(-100% + 7px), -50%); }
.p-pos-marker.is-dragging { cursor: grabbing; z-index: 2; }
.p-pos-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--accent); flex: none; }
.p-pos-name { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; }
.p-pos-marker.is-selected .p-pos-name, .p-pos-marker:focus .p-pos-name { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.p-pos-remove { border: 0; background: none; color: var(--muted); padding: 0 2px; font-size: 1rem; line-height: 1; cursor: pointer; }
.p-pos-tray { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.p-pos-el { display: inline-flex; flex-direction: column; gap: 2px; }
.p-pos-chip { border: 1px solid var(--border-strong); background: var(--bg); color: var(--fg); border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; }
.p-pos-chip.is-selected { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent); }
.p-pos-chip.is-placed { opacity: 0.55; }
.p-pos-chip.is-placed::before { content: "✓ "; }
.p-pos-skip { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }

/* Free associations (items/association.py): step 1 words, step 2 ratings (data-phase set by participant.js) */
.p-assoc { max-width: 620px; display: grid; gap: 14px; }
.p-assoc[data-phase="words"] .p-assoc-step-rate, .p-assoc[data-phase="rate"] .p-assoc-step-words { display: none; }
.p-assoc-step-words, .p-assoc-step-rate { display: grid; gap: 14px; }
.p-assoc-word { display: flex; align-items: center; gap: 8px; }
.p-assoc-num { color: var(--muted); min-width: 1.4em; }
.p-assoc-word input { flex: 1; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); }
.p-assoc-word input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.p-assoc-legend { font-size: 0.9rem; color: var(--muted); margin: 0; }
.p-assoc-rate { border: 0; padding: 0; margin: 0; }
.p-assoc-rate[hidden] { display: none; }
.p-assoc-shown { font-weight: 600; padding: 0; margin-bottom: 6px; }
.p-assoc-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; max-width: 360px; }
.p-assoc-ends { display: flex; justify-content: space-between; max-width: 360px; margin-top: 3px; font-size: 0.875rem; color: var(--muted); }
.p-assoc-point { display: flex; flex-direction: column; align-items: center; padding: 4px 2px;
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.p-assoc-point:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.p-assoc-point input { margin: 0 0 2px; }
.p-assoc-edit { justify-self: start; background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }

/* Adaptive conjoint: build your own, screening (two choices per option) */
.acbc-byo { display: flex; flex-direction: column; gap: 12px; }
.acbc-byo-attr { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; }
.acbc-byo-attr legend { font-weight: 600; padding: 0 4px; }
.acbc-price-part { color: var(--muted); font-size: 0.9em; margin-left: 4px; }
.acbc-byo-total { margin: 4px 0 0; }
.cj-screen .cj-table td { cursor: default; }
.acbc-screen-choice { display: flex; flex-direction: column; gap: 4px; }
.acbc-screen-choice .p-option { justify-content: flex-start; padding: 6px 8px; background: var(--surface); font-size: 0.9rem; }
.cj-table tr.cj-extra td { font-weight: 600; }
/* conjoint with images on a phone held upright (option "untereinander", default on): one option below the other,
   each a card from its heading to "Choose"; the cells carry their place as "order" (items/_attributes/macros.html) */
@media (max-width: 640px) and (orientation: portrait) {
  .cj-stack .cj-table { display: flex; flex-direction: column; min-width: 0; border-spacing: 0; }
  .cj-stack .cj-table thead, .cj-stack .cj-table tbody, .cj-stack .cj-table tr { display: contents; }
  .cj-stack .cj-table th, .cj-stack .cj-table td { display: block; width: auto; }
  .cj-stack .cj-table .cj-corner, .cj-stack .cj-table tbody th { display: none; }
  .cj-stack .cj-table thead th { text-align: left; padding: 14px 2px 6px; }
  .cj-stack .cj-table td { border-radius: 0; }
  .cj-stack .cj-table tr.cj-images td { border-top: 1px solid var(--line); border-radius: 10px 10px 0 0; }
  .cj-stack .cj-table td[data-label] { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .cj-stack .cj-table td[data-label]::before { content: attr(data-label); color: var(--muted); text-align: left; font-size: 0.875rem; }
}
.acbc-must-level { font-weight: 600; font-size: 1.05rem; margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid var(--accent-soft); }

/* Text highlighting (items/highlight.py): choose a marker above the text, then tap words (drag with a mouse) */
.p-hl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.p-hl-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--fg); font: inherit; cursor: pointer; }
.p-hl-tool[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; font-weight: 600; }
.p-hl-tool:focus-visible, .p-hl-clear:focus-visible, .p-hl-w:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.p-hl-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.2); }
.p-hl-tool[data-hl-tool="1"] .p-hl-swatch { background: var(--hl1); }
.p-hl-tool[data-hl-tool="2"] .p-hl-swatch { background: var(--hl2); }
.p-hl-tool[data-hl-tool="3"] .p-hl-swatch { background: var(--hl3); }
/* "Alle Markierungen entfernen": a pill like the markers beside it, a little quieter (no swatch, muted text) */
.p-hl-clear { margin-left: auto; display: inline-flex; align-items: center; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--muted); font: inherit; font-size: 0.9rem; cursor: pointer; }
.p-hl-clear[hidden] { display: none; }
.p-hl-clear:hover { border-color: var(--accent); color: var(--accent); }
.p-hl-text { white-space: pre-wrap; line-height: 2.05; font-size: 1.05rem; margin: 0; -webkit-user-select: none; user-select: none; }
.p-hl-w { cursor: pointer; border-radius: 4px; padding: 2px 1px; transition: background-color 0.12s; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .p-hl-w:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); } }
.p-hl-w[data-cat] { color: rgba(0, 0, 0, 0.87); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.p-hl-w[data-cat="1"] { background: var(--hl1); }
.p-hl-w[data-cat="2"] { background: var(--hl2); }
.p-hl-w[data-cat="3"] { background: var(--hl3); }
.p-hl-count { min-height: 1.4em; margin: 8px 0 0; font-size: 0.9rem; color: var(--muted); }

/* Cloze text (items/cloze.py): input fields within the text, three widths */
.p-cloze { line-height: 2.1; }
.p-cloze p, .p-cloze li { line-height: 2.1; }
.p-cloze-gap { display: inline-block; vertical-align: baseline; margin: 0 2px; padding: 2px 6px; min-height: 0; font: inherit;
  border: 0; border-bottom: 2px solid var(--fg); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); color: var(--fg); }
.p-cloze-gap:focus { outline: none; border-bottom-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
.p-cloze-gap.is-s { width: 7em; }
.p-cloze-gap.is-m { width: 12em; }
.p-cloze-gap.is-l { width: 19em; }
@media (max-width: 520px) { .p-cloze-gap.is-m, .p-cloze-gap.is-l { width: 100%; max-width: 19em; } }
/* Live votes (app/live.py): the participant's page and the screen */
.live-title { font-size: 1.2rem; margin: 0 0 16px; }
.live-wait { font-size: 1.15rem; text-align: center; padding: 48px 0; color: var(--muted); }
.live-note { margin-top: 24px; }
.live-end { font-size: 1.1rem; padding: 32px 0; text-align: center; }
.live-form .p-nav { margin-top: 16px; }
/* columns as in the app: the middle at most 1400 px, the outer ones beside it (Ralf, 2026-10-03) */
.live-screen { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1400px); justify-content: center; gap: 40px; align-items: start; min-height: 70vh; }
.live-joinbox { text-align: center; }
.live-qr svg { width: 100%; height: auto; border-radius: 12px; }  /* white in the SVG itself (app/live.py): readable on dark themes */
.live-qr svg { display: block; }
.live-joinurl { font-size: 1.3rem; font-weight: 700; word-break: break-all; margin-top: 10px; }
.live-section-label { color: var(--accent); font-weight: 600; margin: 0 0 4px; min-height: 1.2em; }
.live-q { font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; margin: 0 0 8px; }
.live-n { color: var(--muted); font-size: 1.1rem; margin: 0 0 24px; }
.live-bars { display: flex; flex-direction: column; gap: 14px; }
.live-bar { display: grid; grid-template-columns: minmax(120px, 30%) 1fr 3.5em; gap: 14px; align-items: center; font-size: 1.3rem; }
.live-bar-track { background: var(--surface-2); border-radius: 8px; height: 2.1rem; overflow: hidden; }
.live-bar-track span { display: block; height: 100%; background: var(--accent); border-radius: 8px; transition: width 0.6s ease; }
.live-bar-n { font-weight: 700; text-align: right; }
.live-bars-icons .live-bar { grid-template-columns: max-content 1fr 3.5em; }
.live-face { padding: 0; cursor: default; justify-items: start; }
.live-face svg { max-width: 2.6rem; }
.live-face:hover svg { transform: none; }
.live-stars { color: var(--accent); letter-spacing: 0.08em; }
.live-cloud { text-align: center; line-height: 1.25; }
.live-cloud span { display: inline-block; margin: 6px 12px; color: var(--accent); font-weight: 700; }
/* results hidden on the screen: a cartoon ghost in the middle, "VERBORGEN" under it (app/static/live.js) */
.live-hidden { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; gap: 14px;
  width: 100%; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.live-hidden-hint { margin-top: -10px; font-size: 0.9rem; color: var(--muted); opacity: 0.7; }  /* close under "VERBORGEN" */
.live-hidden-brand { margin-top: 18px; font-size: 1.3rem; color: var(--muted); opacity: 0.55; }
.live-board { position: relative; min-height: 70vh; width: 100%; max-width: 1200px; justify-self: center; }  /* content at most 1200 px in the middle of its 1400 px column: the outer columns stand where they would with 1400 (Ralf, 2026-10-03) */
/* shown: the ghost waits bottom right of the window, in the presenter view above "Folie 2 von 9" */
.live-ghost-corner { position: fixed; right: 20px; bottom: 58px; z-index: 6; width: 64px; padding: 0; background: none; border: 0; cursor: pointer; }
.live-ghost-corner .live-ghost { width: 100%; opacity: 0.3; }
.live-ghost-corner:hover .live-ghost, .live-ghost-corner:focus-visible .live-ghost { opacity: 0.6; }
.live-ghost { width: min(220px, 36vw); height: auto; opacity: 0.35; }
.live-ghost-body { fill: var(--surface-2); stroke: var(--muted); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.live-ghost-eye, .live-ghost-mouth { fill: var(--muted); }
.live-ghost-eye { transform-box: fill-box; transform-origin: center; transition: transform 0.08s ease-in-out; }
.live-ghost.is-blinking .live-ghost-eye { transform: scaleY(0.12); }
.live-hidden-text { margin: 0; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); text-align: center; opacity: 0.6; }
body.participant main[data-live-screen] { max-width: none; }
@media (max-width: 800px) { .live-screen { grid-template-columns: 1fr; } }
/* the presenter's panel under the QR code: sections as boxes, questions as dots, the buttons; quiet for the audience */
.live-presenter { margin-top: 28px; display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: 0.9rem; }
.live-outline { display: flex; flex-direction: column; gap: 6px; }
.live-sec { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface); }
.live-sec.is-active { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.live-release { font: inherit; font-size: 0.8rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--surface); color: var(--accent); cursor: pointer; }
.live-sec-title { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8rem; margin-bottom: 4px; }
.live-sec-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-sec-state { font-size: 0.8rem; }
.live-sec.is-active .live-sec-title { color: var(--accent); font-weight: 600; }
.live-sec:not(.is-active) .live-sec-title { opacity: 0.8; }  /* closed: participants do not see it */
.live-sec .live-sec-state { margin-left: auto; }
.live-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.live-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; padding: 0; cursor: pointer; }
.live-dot.is-screen { background: var(--accent); border-color: var(--accent); }
.live-dot.is-closed { opacity: 0.45; }  /* voting on it has ended */
.live-dot.is-phones { box-shadow: 0 0 0 3px var(--accent-soft); }
.live-group { display: flex; flex-direction: column; gap: 6px; }
.live-group-title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.live-group-title .live-dot { width: 12px; height: 12px; cursor: default; }
.live-presenter { gap: 16px; }
.live-steer { display: flex; gap: 6px; }
/* in the look of the researcher pages' buttons (app.css .button, .button-secondary; Ralf, 2026-10-03): Weiter filled,
   the others outlined; same height, corners and weight */
.live-steer button, .live-steer-wide { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-sizing: border-box; min-height: 38px; padding: 0 14px; font: inherit; font-size: 0.925rem; font-weight: 550;
  border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg); cursor: pointer;
  transition: background 0.12s, border-color 0.12s; }
.live-steer button:hover, .live-steer-wide:hover { background: var(--surface-2); }
.live-steer [data-step="next"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.live-steer [data-step="next"]:hover { background: var(--accent); filter: brightness(1.08); }
.live-steer-minor { font-size: 0.85rem; }
.live-steer-wide[data-toggle] { display: flex; align-items: center; justify-content: center; gap: 8px; }
.live-ghost-mini { display: inline-flex; width: 18px; }
.live-ghost-mini .live-ghost { width: 100%; opacity: 0.6; }

/* Live votes: further views on the screen (app/live.py results, live.js): means on a scale, ranking, the 2x2 field,
   text and image slides */
.live-means .live-bar-n { min-width: 3.5em; }
.live-ends { display: flex; justify-content: space-between; margin: 6px 0 0; color: var(--muted); font-size: 0.9rem; }
.live-field { display: block; width: min(100%, 70vh); margin: 0 auto; }
.live-field rect { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.live-field line { stroke: var(--border-strong); stroke-dasharray: 6 6; }
.live-field text { font-family: var(--font); font-size: 18px; fill: var(--fg); }
.live-field .live-axis-end { fill: var(--muted); font-size: 15px; }
.live-field .live-axis-name { font-weight: 600; }
.live-point circle { fill: var(--accent); }
.live-content { font-size: 1.4rem; }
.live-content img { max-width: 100%; max-height: 60vh; }
/* the code page of live votes (app/live.py, enter_code) and the code under the QR code on the screen */
.live-code-form { display: flex; flex-direction: column; gap: 10px; }
.live-code-input { font-size: 1.6rem; letter-spacing: 0.12em; text-align: center; padding: 10px; }
.live-joincode { margin: 4px 0 0; font-size: 0.95rem; color: var(--muted); word-break: break-all; }
/* live votes, moderation (package D): the wall of posts; a word or post can be clicked away by the presenter */
.live-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.live-post { margin: 0; padding: 14px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border);
  font-size: 1.25rem; overflow-wrap: anywhere; cursor: pointer; }
.live-post-n { color: var(--muted); font-size: 0.9rem; }
.live-cloud [data-hide] { cursor: pointer; }
/* live votes, Q&A (package E): asking and voting on the phone, the list on the screen */
.live-qa { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--border); }
.live-qa-title { font-size: 1.05rem; margin: 0 0 10px; }
.live-qa-form { display: flex; flex-direction: column; gap: 8px; }
.live-qa-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); }
.live-qa-list { list-style: none; margin: 12px 0 0; padding: 0; }
.live-qa-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.live-qa-item.is-answered { opacity: 0.6; }
.live-qa-vote { flex: none; min-width: 3.4em; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--accent); background: var(--surface);
  color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.live-qa-vote.is-voted { background: var(--accent); color: var(--on-accent); }
.live-qa-screen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 1.35rem; }
.live-qa-screen li { display: flex; gap: 16px; align-items: baseline; padding: 10px 14px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--border); cursor: pointer; }
.live-qa-screen li.is-answered { opacity: 0.5; }
.live-qa-votes { flex: none; color: var(--accent); font-weight: 700; }
.live-qa-empty { color: var(--muted); font-size: 1.2rem; }
/* live votes, quiz (package F): nickname and countdown on the phone, right answers and the leaderboard on the screen */
.live-nick { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.live-nick-row { display: flex; gap: 8px; }
.live-nick-row input { flex: 1; min-width: 0; font: inherit; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--fg); }
.live-nick-row .p-button { min-width: 0; padding: 8px 14px; }
.live-countdown { margin: 0 0 8px; font-weight: 600; color: var(--accent); }
.live-quiz-result { font-size: 1.3rem; font-weight: 700; }
.live-quiz-result.is-right { color: var(--ok); }
.live-quiz-place { text-align: center; color: var(--muted); }
.live-bar.is-right .live-bar-label { font-weight: 700; color: var(--accent); }
.live-board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 1.5rem; }
.live-board-list li { display: flex; gap: 16px; align-items: baseline; padding: 10px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.live-board-place { width: 2.2em; color: var(--muted); font-weight: 700; }
.live-board-name { flex: 1; }
.live-board-points { font-weight: 700; color: var(--accent); }
/* live votes, package G: reactions, marks over an image, the printable slides */
.live-react { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
.live-react-btn { font-size: 1.6rem; line-height: 1; padding: 8px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; transition: transform 0.15s; }
.live-react-btn.is-sent { transform: scale(1.25); }
.live-floats { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.live-float { position: absolute; bottom: -60px; font-size: 3rem; animation: live-rise 4s ease-out forwards; }
@keyframes live-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(-80vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-float { animation: live-pop 2s forwards; bottom: 20px; }
  @keyframes live-pop { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } } }
.live-marks { position: relative; display: inline-block; max-width: 100%; }
.live-marks img { display: block; max-width: 100%; max-height: 62vh; }
.live-marks svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-marks circle { opacity: 0.18; }
.live-marks polyline { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0.25; }
.live-slides-head { margin-bottom: 20px; }
/* the controls above the slides are the researcher's, not a participant's: fields and button as in the app (42 px,
   app.css .button), not the large participant ones (Ralf, 2026-10-03) */
.live-slides-head .live-slides-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.live-slides-head .live-slides-runs { margin: 0; }
.live-slides-head select { font: inherit; font-size: 0.95rem; height: 42px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--fg); cursor: pointer; }
.live-slides-head select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.live-slides-head .p-button { min-width: 0; height: 38px; padding: 0 16px; border-radius: 8px; font-size: 0.925rem; font-weight: 550; }
.live-slide { break-after: page; page-break-after: always; padding: 12px 0 28px; }
@media print { .live-slides-head .p-button, .live-slides-head a, .live-slides-head .live-slides-runs { display: none; } .p-footer { display: none; } }
/* the presenter view (/live/<code>/referent): notes, next question, clock beside a smaller board */
.live-presenter-info { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; text-align: left; }
.live-clock { font-size: 2rem; font-weight: 700; margin: 0; font-variant-numeric: tabular-nums; }
.live-pos { position: fixed; right: 20px; bottom: 14px; z-index: 6; margin: 0; font-size: 0.95rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.live-next { margin: 0 0 8px; font-weight: 600; }
.live-notes { padding: 0; font-size: 1.05rem; text-align: left; max-height: 40vh; overflow: auto; overflow-wrap: anywhere; }  /* plain text, no frame */
.live-none { color: var(--muted); }
.is-presenter .live-board { font-size: 0.8em; }
/* Q&A on: the open questions from the audience in a third column beside every slide */
.live-screen.has-qa { grid-template-columns: minmax(200px, 300px) minmax(0, 1400px) minmax(240px, 360px); }
.live-qa-side { order: 1; }  /* after the board, whatever the order in the page */
.live-qa-side-title { font-size: 1.1rem; margin: 0 0 10px; color: var(--accent); }
.live-qa-side .live-qa-screen { font-size: 1.1rem; gap: 8px; }
.live-qa-side .live-qa-none { color: var(--muted); cursor: default; background: none; border: 0; padding: 0; }
@media (max-width: 900px) { .live-screen.has-qa { grid-template-columns: 1fr; } }
/* the presenter view on a phone (a remote control): the steering first, large buttons, the results short */
@media (max-width: 700px) {
  .is-presenter { grid-template-columns: 1fr; gap: 16px; }
  .is-presenter .live-board { min-height: 0; font-size: 0.7em; order: 2; }
  .is-presenter .live-board .live-result { max-height: 30vh; overflow: hidden; }
  .is-presenter .live-steer button, .is-presenter .live-steer-wide { min-height: 56px; font-size: 1.05rem; }
  .is-presenter .live-clock { font-size: 1.6rem; }
}
/* accessibility (improvement 5): a visible focus on every control of the screen and the phone */
.live-steer button:focus-visible, .live-steer-wide:focus-visible, .live-dot:focus-visible, .live-react-btn:focus-visible,
.live-qa-vote:focus-visible, .live-qa-screen li:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* the corner button that shows the steering on the projector (hidden there by default) */
/* the audience view: full screen, a small secondary button as in the app (app.css .button-small), above the footer line */
.live-fullscreen { position: fixed; left: 16px; bottom: 58px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box;
  height: 30px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg);
  font: inherit; font-size: 0.85rem; font-weight: 550; cursor: pointer; }
.live-fullscreen:hover { background: var(--surface-2); }
.live-fullscreen[hidden] { display: none; }
.live-fullscreen.is-refused::after { content: "Vollbild hier nicht erlaubt: F11 drücken"; position: absolute; left: calc(100% + 8px); white-space: nowrap;
  padding: 4px 10px; border-radius: 8px; background: var(--fg); color: var(--surface); font-size: 0.8rem; }

.live-presenter[hidden] { display: none; }
.live-steer-wide[hidden], .live-steer button[hidden] { display: none !important; }  /* the screen's steering: display inline-flex would show a hidden button */
/* two runs side by side on the printable slides; teams above the people on the leaderboard */
.live-slides-runs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 12px; }
.live-slides-runs label { display: flex; align-items: center; gap: 8px; }
.live-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.live-compare-name { font-weight: 700; color: var(--accent); margin: 0 0 8px; }
.live-board-teams { margin-bottom: 18px; }
.live-board-teams li { background: var(--accent-soft); }
.live-board-members { color: var(--muted); font-size: 0.8em; }
.live-nick select { font: inherit; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); }
/* the presenter view: opening the screen for the projector, as a button */
.live-beamer { position: fixed; right: 20px; bottom: 58px; z-index: 6; margin: 0; font-size: 0.95rem; color: var(--accent); text-decoration: none; text-align: right; }
.live-beamer:hover { color: var(--fg); }
.is-presenter .live-ghost-corner { bottom: 86px; }  /* above the link for the projector */
.live-presenter-notes { margin-top: 18px; }
/* screen and presenter view: the footer (logo) left, in line with the left column, not under the content */
/* screen and presenter view: the footer stays at the bottom of the window, so the ghost, the link for the projector
   and "Folie x von y" have the same place over and on its line in both views (Ralf, 2026-10-03) */
main[data-live-screen] ~ .p-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; max-width: none; margin: 0; padding-left: 16px; background: var(--bg); }
main[data-live-screen] { padding-bottom: 72px; }
.live-presenter-info .live-joinurl { text-align: center; }  /* as on the screen for the audience */
/* the wall/cloud switch of a short-text question: with the question in the content area, small */
.live-wall-toggle { display: inline-flex; align-items: center; box-sizing: border-box; height: 30px; margin: 0 0 12px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: inherit; font-size: 0.85rem;
  font-weight: 550; cursor: pointer; }  /* as the app's small secondary buttons (Ralf, 2026-10-03) */
.live-wall-toggle:hover { background: var(--surface-2); }
.live-wall-toggle[hidden] { display: none; }
.live-sec[data-block-first] { cursor: pointer; }
/* the QR code large in the middle (a click on it or the address; another click back) */
.live-zoomable { cursor: zoom-in; }
.live-qr-zoom { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--surface); cursor: zoom-out; }  /* the code itself keeps its white ground */
.live-qr-zoom-code svg { width: min(80vh, 80vw); height: auto; display: block; }
.live-qr-zoom-url { margin: 0; font-size: clamp(1.4rem, 4vw, 3rem); font-weight: 700; color: var(--fg); }
.live-presenter-notes, .live-presenter-notes p { text-align: left; }

/* the presenter view: short texts and questions from the audience under the notes (live.js, as on "Präsentieren" before) */
.live-presenter-mod { margin-top: 18px; text-align: left; font-size: 0.85rem; }
.live-presenter-mod[hidden] { display: none; }
.live-presenter-mod .live-mod-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 40vh; overflow-y: auto; }
.live-presenter-mod .live-mod { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.live-presenter-mod .live-mod-text { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
.live-presenter-mod .live-mod-status { flex: 1; font-size: 0.8rem; color: var(--muted); }
.live-presenter-mod .live-mod.is-hidden .live-mod-text, .live-presenter-mod .live-mod.is-filtered .live-mod-text { text-decoration: line-through; color: var(--muted); }
.live-presenter-mod .live-mod.is-pending .live-mod-status { color: var(--accent); font-weight: 600; }
/* the buttons as the app's small ones (app.css .button-small): square corners of 8 px, primary filled, secondary framed */
.live-presenter-mod .button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 30px; padding: 0 12px;
  border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 0.85rem; font-weight: 550; cursor: pointer; white-space: nowrap; }
.live-presenter-mod .button:hover { filter: brightness(1.08); }
.live-presenter-mod .button-secondary { background: var(--surface); color: var(--fg); border-color: var(--border-strong); }
.live-presenter-mod .button-secondary:hover { filter: none; background: var(--surface-2); }
/* the presenter view: the questions from the audience in the right column, with their actions */
.live-qa-manage { margin-top: 0; font-size: 0.95rem; }
.live-qa-manage .live-mod-list { max-height: none; }
.live-qa-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.live-qa-tools .button:empty { display: none; }