/* TrueLeak Academy voting tool — design tokens mirror the duwir.org TrueLeak pages.
   Brand: Saira, Dunkelblau #0e3b5f, Hellblau #2798d5 (accent), Orange #ec661b (highlight), no rounded corners. */

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/saira-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/static/fonts/saira-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0e3b5f;
  --slate: #16496f;
  --paper: #f2f6f9;
  --blue: #2798d5;
  --orange: #ec661b;
  --accent: var(--blue);
  --highlight: var(--orange);
  --on-accent: #092740;
  --on-highlight: #09233a;
  --verify: #17705b;
  --alert: #c2452d;
  /* Surface-dependent tints, set by .on-light / .on-dark */
  --muted: #3d5f7c;
  --line: #d6e0e9;
  --accent-text: #1b6e9e;
  --highlight-text: #b4460d;
  --fg: var(--ink);
  --bg: #ffffff;
}
.on-dark {
  --muted: #a8c2d6;
  --line: #35688f;
  --accent-text: #73c3e9;
  --highlight-text: #faa478;
  --fg: #ffffff;
  --bg: var(--ink);
}
.on-light {
  --muted: #3d5f7c;
  --line: #d6e0e9;
  --accent-text: #1b6e9e;
  --highlight-text: #b4460d;
  --fg: var(--ink);
  --bg: #ffffff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Saira', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.on-dark { background: var(--ink); }
main { flex: 1 0 auto; }
h1, h2, h3 { margin: 0; letter-spacing: -0.01em; line-height: 1.08; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea {
  font: inherit;
  border-radius: 0;
  color: inherit;
}
.container { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.narrow { max-width: 44rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--highlight-text);
}
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.xs { font-size: 0.75rem; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.between { justify-content: space-between; }
.hidden { display: none !important; }

/* The brand guide's highlight device: a word set white on a colour block */
.redact {
  display: inline-block;
  padding: 0 0.18em;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
}
.redact.hl { background: var(--highlight); }

/* Slabs: full-bleed colour fields */
.slab { padding: 3rem 0; }
.slab-navy { background: var(--ink); color: #fff; }
.slab-slate { background: var(--slate); color: #fff; }
.slab-white { background: #fff; color: var(--ink); }
.slab-paper { background: var(--paper); color: var(--ink); }
.slab-accent { background: var(--accent); color: var(--on-accent); }
.slab.hero { position: relative; isolation: isolate; overflow: hidden; padding: 4rem 0 3.5rem; }
.slab.hero .hero-mark {
  position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  height: 125%; width: auto; color: var(--accent); opacity: 0.9; pointer-events: none;
}
.slab.hero h1 { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 700; max-width: 16ch; }
.slab.hero .lead { max-width: 40rem; color: rgba(255,255,255,0.7); font-size: 1.125rem; margin-top: 1.5rem; }
/* The grid-breaking square from the brand sheet, straddling the seam */
.seam-square { position: absolute; bottom: -0.75rem; left: 6%; width: 3rem; height: 3rem; background: var(--highlight); }

/* Nav */
.tl-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.tl-nav .container { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; }
.tl-nav .brand { display: inline-flex; align-items: center; gap: 1rem; color: #fff; text-decoration: none; }
.tl-nav .brand:hover { color: var(--accent-text); }
.tl-logo { display: inline-flex; align-items: stretch; height: 1.5rem; }
.tl-logo svg { height: 100%; width: auto; }
.tl-logo .gap { width: 0.19rem; }
.tl-nav .sep { color: rgba(255,255,255,0.2); }
.tl-nav .crumb { font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.tl-nav .crumb.current { color: var(--highlight-text); font-weight: 600; }
.tl-nav .right { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: rgba(255,255,255,0.8); }
.tl-nav .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; color: rgba(255,255,255,0.8); }
.tl-nav .linkbtn:hover { color: #fff; }
@media (max-width: 640px) { .tl-nav .crumb.sub, .tl-nav .sep.sub { display: none; } .tl-logo { height: 1.3rem; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.85rem 1.6rem; border: 1px solid transparent; cursor: pointer;
  font-weight: 600; text-decoration: none; line-height: 1.2; transition: background-color .15s, color .15s, border-color .15s;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--highlight); color: var(--on-highlight); }
.btn-primary:hover:not(:disabled) { background: #fff; color: var(--ink); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover:not(:disabled) { background: #fff; color: var(--ink); }
.btn-outline { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.btn-outline:hover:not(:disabled) { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover:not(:disabled) { background: var(--slate); }
.btn-sm { padding: 0.5rem 0.9rem; font-size: 0.875rem; }
.btn-lg { padding: 1.1rem 2rem; font-size: 1.125rem; }
.btn-block { width: 100%; }
.btn-danger { color: var(--alert); border-color: var(--alert); }

/* Forms */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-size: 0.875rem; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; padding: 0.7rem 0.85rem;
  border: 1px solid var(--line); background: var(--bg); color: var(--fg);
}
.on-dark .input, .on-dark .select, .on-dark .textarea { background: rgba(255,255,255,0.06); }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.textarea { min-height: 7rem; resize: vertical; }
.help { font-size: 0.75rem; color: var(--muted); }
.field label.check { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.error { color: var(--alert); font-size: 0.875rem; min-height: 1.25rem; }
.on-dark .error { color: #ffb4a3; }

/* Cards & tables */
.card { border: 1px solid var(--line); padding: 1.25rem; background: var(--bg); }
.on-dark .card { background: rgba(255,255,255,0.04); }
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 600; color: var(--muted); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.tag { display: inline-block; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tag-accent { background: var(--accent); color: var(--on-accent); }
.tag-hl { background: var(--highlight); color: var(--on-highlight); }
.tag-line { border: 1px solid var(--line); color: var(--muted); }
.tag-verify { background: var(--verify); color: #fff; }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); }
.tab { padding: 0.7rem 1rem; border: 0; background: none; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tab.active { color: var(--fg); border-bottom-color: var(--highlight); }

/* Picker */
.picker { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .picker { grid-template-columns: 3fr 2fr; } }
.pool { max-height: 32rem; overflow: auto; border: 1px solid var(--line); }
.pool-item { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; padding: 0.75rem; border-bottom: 1px solid var(--line); align-items: start; }
.pool-item:last-child { border-bottom: 0; }
.pool-item .txt { font-size: 0.9rem; white-space: pre-wrap; }
.pool-item .ctx { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.25rem; }
.pool-item .meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.set-item .set-num { font-weight: 700; color: var(--accent-text); font-size: 0.8rem; margin-bottom: 0.2rem; }
.set-item summary { cursor: pointer; color: var(--accent-text); }
.set-item .teaser:has(+ details[open]) { display: none; }
.set-item .txt.full { margin-top: 0.25rem; }
.set-note { font-size: 0.8rem; white-space: pre-wrap; margin-top: 0.5rem; padding-left: 0.6rem; border-left: 3px solid var(--line); }
.set-note.trainer { border-left-color: var(--highlight); }
.sel-item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--line); border-top: 0; align-items: start; }
.sel-item:first-child { border-top: 1px solid var(--line); }
.sel-item .num { font-weight: 700; color: var(--accent-text); min-width: 1.5rem; }
.sel-item .txt { font-size: 0.9rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.sel-item .ctx { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; }
/* Keep the create button reachable however long the selection gets */
.create-bar { position: sticky; bottom: 0; background: var(--bg); padding: 0.75rem 0; border-top: 1px solid var(--line); z-index: 2; }
.sel-item .ctrls { display: flex; flex-direction: column; gap: 0.25rem; }
.sel-item .ctrls button { border: 1px solid var(--line); background: none; cursor: pointer; padding: 0.15rem 0.45rem; font-size: 0.8rem; }
.sel-item .opts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.sel-item .opts select { padding: 0.25rem 0.4rem; font-size: 0.8rem; border: 1px solid var(--line); background: var(--bg); }
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.filters select, .filters input { padding: 0.45rem 0.6rem; border: 1px solid var(--line); background: var(--bg); font-size: 0.875rem; }

/* Host (projector) */
.host { min-height: calc(100vh - 4rem); display: flex; flex-direction: column; }
.host-main { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 0; }
.host-bar { border-top: 1px solid rgba(255,255,255,0.1); padding: 1rem 0; }
.host-bar .container { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.stat { font-variant-numeric: tabular-nums; }
.stat b { font-size: 1.5rem; font-weight: 700; color: var(--accent-text); }
.code-big { font-size: clamp(3.5rem, 12vw, 9rem); font-weight: 800; letter-spacing: 0.12em; line-height: 1; color: #fff; }
.lobby { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .lobby { grid-template-columns: 1fr auto; } }
.qr { background: #fff; padding: 0.75rem; width: min(22rem, 70vw); }
.qr img { display: block; width: 100%; height: auto; }
.statement { font-size: clamp(1.4rem, 3.2vw, 2.6rem); font-weight: 600; line-height: 1.25; white-space: pre-wrap; max-width: 56rem; }
.statement.long { font-size: clamp(1.05rem, 1.9vw, 1.5rem); font-weight: 500; line-height: 1.45; }
.statement b, .txt b { font-weight: 700; }
.md-h { display: inline-block; margin-top: 0.35em; color: var(--accent-text); }
.context { font-size: clamp(1rem, 1.6vw, 1.35rem); color: var(--muted); max-width: 56rem; white-space: pre-wrap; }
.context b { color: #fff; font-weight: 600; }
.answer-box { border-left: 4px solid var(--accent); padding-left: 1.25rem; margin-top: 1.25rem; }
.reveal-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem; }
@media (min-width: 900px) { .reveal-grid { grid-template-columns: 1.1fr 0.9fr; } }
.bars { display: flex; flex-direction: column; gap: 0.6rem; }
.bar { display: grid; grid-template-columns: 11rem 1fr 3.5rem; gap: 0.75rem; align-items: center; font-size: 1rem; }
.bar .track { height: 1.6rem; background: rgba(255,255,255,0.08); position: relative; }
.on-light .bar .track { background: var(--paper); }
.bar .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); transition: width .4s ease; }
.bar.disinfo .fill { background: var(--highlight); }
.bar.none .fill { background: var(--accent); }
.bar.unsure .fill { background: var(--muted); }
.bar .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.bar.small { font-size: 0.85rem; grid-template-columns: 9rem 1fr 3rem; }
.bar.small .track { height: 1.1rem; }
.bar .lbl.hit::after { content: ' ✓'; color: var(--highlight-text); }
.bar.ai .fill { background: var(--verify); }
.bar.human .fill { background: var(--accent); }
/* Pre-test value: thin strip under the current fill plus the old share in brackets */
.bar .prev { position: absolute; left: 0; bottom: -0.45rem; height: 0.3rem; background: rgba(255,255,255,0.6); transition: width .4s ease; }
.on-light .bar .prev { background: var(--ink); }
.bar.cmp { grid-template-columns: 11rem 1fr 4.5rem; margin-bottom: 0.45rem; }
.bar.small, .bar.small.cmp { grid-template-columns: 9rem 1fr 4.5rem; }
.bar .n .was { display: block; font-weight: 400; font-size: 0.75em; color: var(--muted); }
.legend { font-size: 0.8rem; color: var(--muted); }
.results-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.kpi { border: 1px solid var(--line); padding: 1rem 1.25rem; }
.kpi .big { font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi .big .arrow { color: var(--muted); font-weight: 400; margin: 0 0.35rem; }
.feedback-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.einordnung { border: 1px solid var(--line); padding: 1.25rem; }
.einordnung .note { white-space: pre-wrap; font-size: 0.9rem; color: var(--muted); margin-top: 0.75rem; }
.summary-table td .mini { display: flex; gap: 0.25rem; align-items: center; font-size: 0.8rem; }
.summary-table td .mini span { display: inline-block; height: 0.7rem; }
.summary-table td .mini .p { background: var(--highlight); }
.summary-table td .mini .k { background: var(--accent); }
.summary-table td .mini .u { background: var(--muted); }
.kbd { font-family: ui-monospace, monospace; font-size: 0.75rem; border: 1px solid var(--line); padding: 0 0.35rem; color: var(--muted); }

/* Vote (phone) */
.vote { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.vote .statement { font-size: 1.35rem; }
.vote .statement.long { font-size: 1rem; }
.vote .bar, .vote .bar.cmp { grid-template-columns: 8rem 1fr 3.5rem; font-size: 0.9rem; }
.pretest-nav { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.5rem; }
.choice-grid { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.choice {
  width: 100%; text-align: left; padding: 1rem 1.1rem; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.04); color: #fff; font-weight: 600; font-size: 1.05rem;
}
.choice:hover { border-color: #fff; }
.choice.selected { border-color: var(--highlight); background: var(--highlight); color: var(--on-highlight); }
.choice.selected.none { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.choice.selected.unsure { border-color: #fff; background: #fff; color: var(--ink); }
.choice.selected.ai { border-color: var(--verify); background: var(--verify); color: #fff; }
.choice.selected.human { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.choice.pat { font-size: 0.95rem; padding: 0.8rem 1rem; }
.choice.pat .sh { display: block; font-weight: 400; font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-top: 0.15rem; }
.choice.pat.selected .sh { color: inherit; }
.saved { color: var(--accent-text); font-weight: 600; }
.likert { border: 0; padding: 0; margin: 1.75rem 0 0; }
.likert legend { font-weight: 600; font-size: 1.05rem; padding: 0; }
.likert-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin-top: 0.75rem; }
.likert-scale .choice { text-align: center; padding: 0.8rem 0; }
.likert-ends { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; color: var(--muted); margin-top: 0.35rem; }
.waiting { text-align: center; padding: 4rem 1rem; }
.pulse { display: inline-block; width: 0.6rem; height: 0.6rem; background: var(--highlight); animation: pulse 1.4s infinite; margin-right: 0.5rem; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Funder strip and footer (grant visibility obligation) */
.funder { background: #fff; color: var(--ink); border-top: 1px solid #d6e0e9; border-bottom: 1px solid #d6e0e9; }
.funder .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; padding: 1.25rem 1rem; }
.funder p { margin: 0; }
.funder .lead-line { font-weight: 600; }
.funder .via { font-size: 0.875rem; color: #3d5f7c; }
.funder .logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; }
.funder .logos img { height: 3rem; width: auto; }
.funder.compact .container { padding: 0.6rem 1rem; gap: 1rem 2rem; }
.funder.compact .logos img { height: 2rem; }
.funder.compact .lead-line { font-size: 0.8rem; }
.tl-footer { background: var(--ink); color: rgba(255,255,255,0.7); }
.tl-footer .container { padding: 2.5rem 1rem; display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .tl-footer .container { grid-template-columns: repeat(3, 1fr); } .tl-footer .links { text-align: right; } }
.tl-footer a { text-decoration: none; }
.tl-footer a:hover { color: var(--accent-text); }
.tl-footer .org { color: #fff; font-weight: 600; font-size: 1.1rem; }
.tl-footer .links { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; }

/* Login */
.login-wrap { min-height: calc(100vh - 4rem); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.login-card { width: 100%; max-width: 26rem; background: #fff; color: var(--ink); padding: 2rem; }
.login-card h1 { font-size: 1.75rem; margin-top: 0.5rem; }
.login-card form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }