/* Futures of Maths: design tokens */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  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: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  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 {
  --bg: #f6f6fb;
  --surface: #ffffff;
  --surface-2: #eff0f7;
  --text: #12131a;
  --muted: #5c6070;
  --border: #e3e4ee;
  --accent: #4f46e5;
  --accent-strong: #3b3fb6;
  --accent-soft: #ecebff;
  --accent-text: #ffffff;
  --brand-gradient: linear-gradient(135deg, #5b5ef0 0%, #a046e0 100%);
  /* Agree/disagree use blue and orange (from the Okabe-Ito palette) rather
     than green and red, so they stay distinct with colour blindness. */
  --agree: #0b5fa5;
  --agree-soft: #e1edf9;
  --disagree: #b14f00;
  --disagree-soft: #fbeadb;
  --notice-bg: #e1edf9;
  --error: #a8430a;
  --shadow: 0 1px 2px rgb(16 18 40 / 0.04), 0 10px 30px -14px rgb(16 18 40 / 0.16);
  --radius: 18px;
  --radius-sm: 12px;
  --tabbar-h: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1016;
    --surface: #161922;
    --surface-2: #1d212c;
    --text: #eceef5;
    --muted: #9aa0b4;
    --border: #272b38;
    --accent: #8b8cf8;
    --accent-strong: #a9aafb;
    --accent-soft: #24264a;
    --accent-text: #0e1016;
    --agree: #6db6ef;
    --agree-soft: #10283d;
    --disagree: #f0a356;
    --disagree-soft: #3a2510;
    --notice-bg: #10283d;
    --error: #f0a356;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 10px 30px -14px rgb(0 0 0 / 0.6);
  }
}

/* Tag colours: --tc-bg/--tc-fg for chips, --tc-solid for accents. Based on
   the Okabe-Ito colour-blind-safe palette; tags always show their name too,
   so colour is never the only way to tell them apart. */
.tc-none { --tc-bg: var(--surface-2); --tc-fg: var(--muted); --tc-solid: var(--muted); }
.tc-0 { --tc-bg: #dcebf7; --tc-fg: #005a8f; --tc-solid: #0072b2; }
.tc-1 { --tc-bg: #fcefd2; --tc-fg: #7a5300; --tc-solid: #e69f00; }
.tc-2 { --tc-bg: #d4f0e7; --tc-fg: #00664a; --tc-solid: #009e73; }
.tc-3 { --tc-bg: #fbe2d3; --tc-fg: #9a4300; --tc-solid: #d55e00; }
.tc-4 { --tc-bg: #f6e3ee; --tc-fg: #8a3d6c; --tc-solid: #cc79a7; }
.tc-5 { --tc-bg: #e0f1fb; --tc-fg: #1d6690; --tc-solid: #56b4e9; }
.tc-6 { --tc-bg: #f8f4c8; --tc-fg: #646000; --tc-solid: #e3d53a; }
.tc-7 { --tc-bg: #ececef; --tc-fg: #3f4250; --tc-solid: #6b6f80; }
.tc-8 { --tc-bg: #e9e2f5; --tc-fg: #4c3485; --tc-solid: #6a4fb0; }
.tc-9 { --tc-bg: #efe4da; --tc-fg: #6b4320; --tc-solid: #8c5a2b; }
@media (prefers-color-scheme: dark) {
  .tc-0 { --tc-bg: #10283d; --tc-fg: #7cc0f0; }
  .tc-1 { --tc-bg: #3a2c0c; --tc-fg: #f2c25a; }
  .tc-2 { --tc-bg: #0d3329; --tc-fg: #5fd1ae; }
  .tc-3 { --tc-bg: #3d1f0c; --tc-fg: #f7a066; }
  .tc-4 { --tc-bg: #3a1d2f; --tc-fg: #e8a6cb; }
  .tc-5 { --tc-bg: #0f2c3d; --tc-fg: #9ad3f5; }
  .tc-6 { --tc-bg: #34320c; --tc-fg: #ece27a; }
  .tc-7 { --tc-bg: #262833; --tc-fg: #c2c5d2; }
  .tc-8 { --tc-bg: #261d3d; --tc-fg: #bba7ea; }
  .tc-9 { --tc-bg: #33230f; --tc-fg: #dcb48a; }
}

/* Base */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16.5px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-wrap: break-word;
}
.wrap { max-width: 780px; margin: 0 auto; padding: 0 16px; }
.wrap.wide { max-width: 1140px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px; z-index: 40; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3, h4 { letter-spacing: -0.015em; }
h1 { font-size: 2rem; line-height: 1.15; font-weight: 750; margin: 1.6rem 0 0.75rem; }
h2 { font-size: 1.2rem; line-height: 1.3; font-weight: 680; margin: 0 0 0.5rem; }
h3 { font-size: 1.05rem; font-weight: 650; margin: 1rem 0 0.4rem; }
h4 { font-size: 1rem; font-weight: 650; margin: 1rem 0 0.4rem; }
.lead { font-size: 1.12rem; color: var(--muted); }
.muted, .note { color: var(--muted); }
.small { font-size: 0.9rem; }
main { padding-bottom: 48px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; margin: 16px 0; box-shadow: var(--shadow);
}
.notice { background: var(--notice-bg); border-radius: var(--radius-sm); padding: 14px 18px; margin: 16px 0; }
.notice p { margin: 0.4rem 0; }
.error { color: var(--error); font-weight: 600; }
.crumbs { margin: 1.25rem 0 0; font-size: 0.9rem; color: var(--muted); }
.crumbs a { text-decoration: none; }

/* Hero */
.hero { padding: 28px 0 8px; }
.hero h1 {
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin-top: 0.5rem;
  background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 0.9rem;
}

/* Header and navigation */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; min-height: 60px; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; letter-spacing: -0.02em; text-decoration: none; color: var(--text); font-size: 1.05rem; }
.logo { width: 30px; height: 30px; flex: none; }
.badge { font-size: 0.72rem; font-weight: 650; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; letter-spacing: 0; }
nav.topnav, nav.tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface-2); }
nav.topnav a, nav.tabs a {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted);
  padding: 7px 14px; border-radius: 999px; min-height: 36px; font-size: 0.92rem; font-weight: 550;
}
nav.topnav a:hover, nav.tabs a:hover { color: var(--text); }
nav.topnav a[aria-current], nav.tabs a[aria-current] { color: var(--text); background: var(--surface); box-shadow: 0 1px 3px rgb(16 18 40 / 0.12); }
.icon { width: 22px; height: 22px; flex: none; }
nav.tabs .icon { display: none; }

/* Phones: participant navigation becomes a bottom tab bar */
@media (max-width: 719px) {
  /* A backdrop filter would trap the fixed tab bar inside the header. */
  .site-header { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
  body.has-tabs { --tabbar-h: 66px; padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom)); }
  nav.tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; border-radius: 0; padding: 0 0 var(--safe-bottom);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--border);
  }
  nav.tabs a {
    flex-direction: column; justify-content: center; gap: 3px; border-radius: 0;
    height: var(--tabbar-h); padding: 6px 2px; font-size: 0.7rem; text-align: center;
  }
  nav.tabs a[aria-current] { background: transparent; box-shadow: none; color: var(--accent); }
  nav.tabs .icon { display: block; }
  h1 { font-size: 1.65rem; }
  .card { padding: 18px; border-radius: 16px; }
}

/* Footer and cookie notice */
.site-footer { border-top: 1px solid var(--border); padding: 22px 0 32px; font-size: 0.88rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a { color: var(--muted); }
.cookie-banner {
  background: var(--accent-soft); border-bottom: 1px solid var(--border);
  padding: 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
}
.cookie-banner p { margin: 0; max-width: 640px; font-size: 0.9rem; }
.cookie-banner button { min-height: 36px; padding: 6px 16px; }
[hidden] { display: none !important; }

/* Buttons and inputs */
.button, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 620; cursor: pointer; text-decoration: none; letter-spacing: -0.005em;
  background: var(--accent); color: var(--accent-text); border: 1px solid transparent;
  padding: 10px 20px; border-radius: 12px; min-height: 46px; touch-action: manipulation;
  box-shadow: 0 1px 2px rgb(16 18 40 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.12);
  transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.button:hover, button:hover { background: var(--accent-strong); }
.button:active, button:active { transform: translateY(1px); }
.button.primary-gradient { background: var(--brand-gradient); color: #fff; }
button.secondary, .button.secondary { background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; }
button.secondary:hover, .button.secondary:hover { background: var(--surface-2); }
button.danger { background: var(--disagree); color: #fff; }
@media (prefers-color-scheme: dark) { button.danger { color: #0e1016; } }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
input[type="email"], input[type="text"], textarea, select, .pass-link {
  font: inherit; font-size: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 11px 14px; max-width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="email"]:focus, input[type="text"]:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); outline: none; }
textarea { width: 100%; resize: vertical; }
.pass-link { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; background: var(--surface-2); }
.inline-form label { display: block; margin-bottom: 6px; font-weight: 550; }
.inline-form input { width: min(100%, 360px); margin: 0 8px 8px 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sticky-actions {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--safe-bottom)); z-index: 5;
  background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 12px 0; margin-top: 8px;
}
@media (max-width: 479px) {
  .sticky-actions button { flex: 1 1 auto; }
}

/* Questions */
fieldset.question { border: 0; padding: 0; margin: 0 0 32px; min-width: 0; }
fieldset.question:last-child { margin-bottom: 0; }
fieldset.question legend { font-weight: 650; padding: 0; margin-bottom: 12px; font-size: 1.02rem; }
.choices { display: grid; gap: 8px; }
.choice {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice input { margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.other { display: block; margin-top: 6px; font-size: 0.95rem; }
div.question { margin: 0 0 32px; }
.question-label { display: block; font-weight: 650; margin-bottom: 12px; font-size: 1.02rem; }
.question .muted.small { margin: -6px 0 10px; }
.question select { width: 100%; }
@media (min-width: 600px) { .choices.columns { grid-template-columns: 1fr 1fr; } }
.other-row { margin-top: 8px; }
.other-text { width: 100%; }
.other input { width: 100%; margin-top: 6px; }

/* 1–5 scales as large tap targets */
.scale { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 6px; max-width: 420px; }
.scale-end { font-size: 0.8rem; color: var(--muted); }
.scale-end:first-child { grid-column: 1 / 3; grid-row: 2; }
.scale-end:last-child { grid-column: 4 / 6; grid-row: 2; text-align: right; }
.scale-point { position: relative; grid-row: 1; }
.scale-point input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.scale-point > span {
  display: flex; align-items: center; justify-content: center; height: 46px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); font-weight: 650; color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) {
  .scale-point:hover input:not(:checked) + span { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
}
.scale-point input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 4px 14px -6px var(--accent); }
.scale-point input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.likert-row { padding: 14px 0; border-top: 1px solid var(--border); }
.likert-label { display: block; margin-bottom: 8px; }
@media (min-width: 720px) {
  .likert-row { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: center; }
  .likert-label { margin: 0; }
}

/* Survey overview */
.area-list { margin-top: 8px; }
.area {
  position: relative; display: flex; gap: 14px; align-items: flex-start; cursor: pointer; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 18px 22px; margin: 12px 0;
  box-shadow: var(--shadow); transition: border-color 0.15s ease, opacity 0.15s ease;
}
.area::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--tc-solid); }
.area:not(:has(input:checked)) { opacity: 0.6; box-shadow: none; }
.area input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--accent); }
.area-body { display: grid; gap: 4px; }
.area-title { font-weight: 680; font-size: 1.05rem; }
.area-intro { color: var(--muted); font-size: 0.95rem; }
.area-meta { font-size: 0.85rem; color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.area-heading { display: flex; align-items: center; gap: 12px; }
.area-heading::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--tc-solid); flex: none; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font-size: 0.78rem; font-weight: 600; }
.ok-pill { background: var(--agree-soft); color: var(--agree); }
.muted-pill { text-decoration: line-through; }
progress.progress { width: 100%; height: 6px; appearance: none; border: 0; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 4px 0 8px; }
progress.progress::-webkit-progress-bar { background: var(--surface-2); }
progress.progress::-webkit-progress-value { background: var(--brand-gradient); border-radius: 3px; }
progress.progress::-moz-progress-bar { background: var(--brand-gradient); border-radius: 3px; }


/* Statements and tags */
.statement-card { position: relative; padding-top: 24px; }
.statement-card blockquote { font-size: 1.4rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; margin: 12px 0 22px; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 0.78rem; font-weight: 620; padding: 3px 11px; border-radius: 999px; background: var(--tc-bg, var(--accent-soft)); color: var(--tc-fg, var(--accent)); }
.filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scrollbar-width: none; }
.filter::-webkit-scrollbar { display: none; }
.filter a {
  flex: none; text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 6px 14px; font-size: 0.88rem; font-weight: 560; min-height: 36px; display: inline-flex; align-items: center; gap: 8px;
}
.filter a[class^="tc-"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc-solid); }
.filter a[aria-current] { background: var(--text); border-color: var(--text); color: var(--bg); }
@media (min-width: 720px) {
  .filter { flex-wrap: wrap; overflow: visible; }
}
.add-statement summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.add-statement summary::-webkit-details-marker { display: none; }
.add-statement summary::after {
  content: "+"; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; font-weight: 600; flex: none;
}
.add-statement[open] summary::after { content: "–"; }
.add-statement summary h2 { margin: 0; }
.tag-picker { border: 0; padding: 0; margin: 16px 0 0; min-width: 0; }
.tag-picker legend { font-weight: 650; padding: 0; margin-bottom: 10px; }
.chip-options { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-option { position: relative; }
.chip-option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip-option span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: 0.9rem; font-weight: 560;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chip-option span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tc-solid); }
@media (hover: hover) {
  .chip-option:hover span { background: var(--tc-bg); }
}
.chip-option input:checked + span { background: var(--tc-fg); border-color: var(--tc-fg); color: var(--surface); }
.chip-option input:checked + span::before { content: "✓"; width: auto; height: auto; background: none; font-size: 0.85rem; }
.chip-option input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.new-tag { display: block; margin-top: 14px; font-size: 0.95rem; }
.new-tag input { display: block; width: min(100%, 360px); margin-top: 6px; }

/* Ranking */
.rank-list { padding-left: 0; list-style: none; }
.rank-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.rank-label { flex: 1 1 220px; }
.rank-buttons { display: none; gap: 6px; }
.rank-list.enhanced .rank-buttons { display: inline-flex; }
.rank-list.enhanced .rank-select { position: absolute; left: -9999px; }
.rank-list.enhanced li[data-ranked="0"] .rank-label { color: var(--muted); }
.rank-list.enhanced { counter-reset: rank; }
.rank-list.enhanced li[data-ranked="1"] .rank-label::before {
  content: counter(rank); counter-increment: rank; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px;
  border-radius: 50%; background: var(--brand-gradient); color: #fff; font-weight: 700; font-size: 0.82rem;
}
.rank-buttons button { min-width: 44px; min-height: 40px; padding: 6px 12px; background: var(--surface); color: var(--text); border-color: var(--border); box-shadow: none; }
.rank-buttons button:hover { background: var(--surface-2); }
.rank-list.enhanced li[data-ranked="0"] button[data-move="up"],
.rank-list.enhanced li[data-ranked="0"] button[data-move="down"] { display: none; }

/* Session and admin */
.danger-zone { border-color: color-mix(in srgb, var(--disagree) 50%, var(--border)); }
.mod-row { border-top: 1px solid var(--border); padding: 16px 0; }
.mod-row textarea { margin-bottom: 4px; }
.mod-row .actions { margin-top: 12px; }
.proposed-tag { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.proposed-tag .choice { border: 0; background: none; padding: 0; }
.proposed-tag input[type="text"] { width: min(100%, 360px); margin-top: 6px; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; display: block; overflow-x: auto; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 650; color: var(--muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.prose h1 { margin-top: 0.5rem; }
.prose h2 { margin-top: 1.6rem; }

/* Verification forms */
.form-stack { display: grid; gap: 8px; }
.form-stack label { font-weight: 550; margin-top: 8px; }
.form-stack input[type="email"], .form-stack input[type="text"] { width: 100%; }
.form-stack .note { margin: 0; font-size: 0.9rem; }
.form-stack button { justify-self: start; margin-top: 8px; }
.form-stack label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.form-stack label.check input { margin-top: 4px; flex: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.callout { background: var(--notice-bg); border-radius: var(--radius-sm); padding: 12px 16px; margin: 16px 0; }
.callout p { margin: 0 0 8px; }
.callout.error { background: var(--disagree-soft); color: var(--error); font-weight: 550; }
.callout.error ul { margin: 0; padding-left: 20px; }
.small-details { margin-top: 12px; font-size: 0.92rem; }
.small-details summary { cursor: pointer; color: var(--accent); }

/* Statement ratings: five buttons from orange (strongly disagree) through
   grey to blue (strongly agree), with text labels and no numbers. Stacked on phones, in one row on wider screens. */
.important-box { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.rating-buttons { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 720px) { .rating-buttons { grid-template-columns: repeat(5, 1fr); } }
.rating-buttons button.rating {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 10px 14px; line-height: 1.2;
  background: color-mix(in srgb, var(--rc) 8%, var(--surface)); color: var(--text); border: 2px solid var(--rc); box-shadow: none;
}
@media (min-width: 720px) { .rating-buttons button.rating { font-size: 0.92rem; } }
.rating.r1 { --rc: var(--disagree); }
.rating.r2 { --rc: color-mix(in srgb, var(--disagree) 55%, var(--border)); }
.rating.r3 { --rc: color-mix(in srgb, var(--muted) 70%, var(--border)); }
.rating.r4 { --rc: color-mix(in srgb, var(--agree) 55%, var(--border)); }
.rating.r5 { --rc: var(--agree); }
@media (hover: hover) { .rating-buttons button.rating:hover { background: color-mix(in srgb, var(--rc) 20%, var(--surface)); } }
.skip-row { margin: 12px 0 0; }
.skip-row button { width: 100%; }
@media (min-width: 720px) { .skip-row button { width: auto; } }
.table-scroll { overflow-x: auto; }

/* Pass page: the survey button stays inactive until the saved-link box is ticked. */
.saved-check { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 8px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-weight: 550; }
.saved-check input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
a.button[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }

/* Statement feed: participation figures, the answer/answered switch,
   pinned statements, compact cards and each statement's vote breakdown. */
.feed-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.feed-stats div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.25; }
.feed-stats strong { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.feed-stats div > span { font-size: 0.8rem; color: var(--muted); }
.feed-stats .of { font-size: 0.9rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.view-switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--surface-2); margin: 4px 0 4px; }
.view-switch a { text-decoration: none; color: var(--muted); font-weight: 600; font-size: 0.9rem; padding: 6px 14px; border-radius: 999px; min-height: 36px; display: inline-flex; align-items: center; }
.view-switch a[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.pinned, .feed { margin-top: 20px; }
.pinned > h2, .feed > h2 { margin-bottom: 0; }
.pinned .statement-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pinned-label { display: flex; align-items: center; gap: 6px; margin: -6px 0 10px; font-size: 0.8rem; font-weight: 650; color: var(--accent); }
.pinned-label .icon { width: 16px; height: 16px; }
.pinned-done summary { margin: 4px 0; }
.feed-item { scroll-margin-top: 16px; }
.feed-item blockquote { font-size: 1.22rem; margin: 10px 0 16px; }
.feed-item .important-box { margin-bottom: 12px; font-size: 0.92rem; }
.feed-item .rating-buttons { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.feed-item .rating-buttons button.rating { min-height: 54px; padding: 6px 2px; font-size: 0.74rem; font-weight: 600; hyphens: auto; }
@media (min-width: 480px) { .feed-item .rating-buttons button.rating { font-size: 0.85rem; padding: 8px 6px; } }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; font-size: 0.88rem; color: var(--muted); }
.vote-count { font-variant-numeric: tabular-nums; }
button.link-button { background: none; border: 0; box-shadow: none; color: var(--accent); font-weight: 600; padding: 8px 4px; min-height: 40px; font-size: 0.9rem; }
button.link-button:hover { background: none; text-decoration: underline; }
.feed-item.answered { background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.feed-item.answered:focus { outline: none; }
.feed-item.answered:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.your-answer { margin: 0 0 10px; font-size: 0.95rem; }
.breakdown { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.breakdown li { display: grid; grid-template-columns: 1em 8.2em 1fr 2.8em; align-items: center; gap: 8px; font-size: 0.86rem; }
.breakdown .b-mark { color: var(--accent); font-weight: 800; text-align: center; }
.breakdown .b-label { white-space: nowrap; }
.breakdown li.mine .b-label { font-weight: 700; }
.result-foot { margin: 12px 0 0; }
.breakdown .b-bar { width: 100%; height: 10px; display: block; }
.breakdown .b-track { fill: var(--surface-2); }
.breakdown .b-fill { fill: var(--rc); }
.breakdown .b-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.breakdown li.mine .b-pct { color: var(--text); font-weight: 700; }
.feed-more { text-align: center; margin: 20px 0; }
.feed-more .button[aria-busy] { opacity: 0.7; }

/* Context sentence some statements have, shown above the statement. */
.statement-context { margin: 10px 0 -6px; font-size: 0.9rem; color: var(--muted); font-style: italic; }

/* Ranking questions: a card with its own colour and label, so it does not
   look like a statement. With JavaScript, participants tap options in
   order and the rank menus are hidden; without it, they use the menus. */
.rk-card { border: 1.5px solid color-mix(in srgb, var(--accent) 55%, var(--border)); background: linear-gradient(180deg, var(--accent-soft) 0, var(--surface) 120px); }
.rk-card.answered { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 70%, var(--surface)) 0, color-mix(in srgb, var(--surface-2) 45%, var(--surface)) 120px); }
.rk-label { display: inline-flex; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-strong); background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 999px; padding: 4px 10px; margin: 0 0 10px; }
.rk-card h3 { font-size: 1.15rem; line-height: 1.35; letter-spacing: -0.01em; margin: 4px 0 6px; }
.rk-card h4 { font-size: 0.98rem; margin: 14px 0 2px; }
.rk-how { color: var(--muted); font-size: 0.9rem; margin: 0 0 12px; }
.rk-tip { background: var(--notice-bg); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.88rem; margin: 0 0 12px; }
.rk-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.rk-item { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 4px 6px; padding: 4px 8px 4px 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.rk-item.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.rk-pick { display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 52px; padding: 8px; text-align: left; background: none; color: var(--text); border: 0; box-shadow: none; font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.rk-pick:hover { background: none; }
.rk-badge { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px dashed var(--border); display: grid; place-items: center; font-weight: 800; color: var(--muted); }
.rk-item.on .rk-badge { border: 0; background: var(--accent); color: var(--accent-text); }
.rk-move { display: flex; flex-direction: column; gap: 4px; width: 32px; }
.rk-move button { width: 32px; min-height: 26px; padding: 0; font-size: 0.75rem; border-radius: 8px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); box-shadow: none; }
.rk-move button:hover { background: var(--accent-soft); color: var(--accent); }
.rk-i { width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 50%; display: grid; place-items: center; font: italic 700 0.95rem/1 Georgia, serif; color: var(--accent); background: var(--accent-soft); border: 0; box-shadow: none; }
.rk-i:hover, .rk-i[aria-expanded="true"] { background: var(--accent); color: var(--accent-text); }
.rk-desc { grid-column: 1 / -1; margin: -4px 8px 8px 52px; font-size: 0.87rem; color: var(--muted); line-height: 1.4; }
.rk-desc a { font-weight: 600; white-space: nowrap; }
.js .rk-desc:not(.open) { display: none; }
html:not(.js) .rk-i { display: none; }
.rk-select { grid-column: 1 / -1; margin: 0 8px 8px 52px; }
.rk-select select { min-height: 40px; }
.rk-nojs { display: inline; }
.js .rk-nojs, .js .rk-select { display: none; }
html:not(.js) .rk-pick { pointer-events: none; }
html:not(.js) .rk-badge { display: none; }
.rk-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.rk-count { font-weight: 700; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.rk-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.rk-results { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.rk-results li { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: center; }
.rk-pos { font-weight: 800; color: var(--muted); text-align: center; }
.rk-name { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.rk-yours { font-size: 0.74rem; font-weight: 700; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }
.rk-pct { font-variant-numeric: tabular-nums; font-size: 0.88rem; color: var(--muted); }
.rk-bar { grid-column: 2 / 4; width: 100%; height: 8px; display: block; }
.rk-bar .b-track { fill: var(--surface-2); }
.rk-bar .b-fill { fill: var(--accent); }
.rk-results li.mine .b-fill { fill: var(--agree); }
.rk-legend { margin: 4px 0 0; }
.feed-end { text-align: center; }

/* Composer: a post box at the top of the feed, and a floating button that
   jumps to it from anywhere in the feed. */
.composer { scroll-margin-top: 80px; }
.composer h2 { margin-bottom: 10px; }
.compose-form textarea { width: 100%; resize: vertical; font-size: 1.08rem; line-height: 1.45; min-height: 3.4em; }
.compose-form.active textarea { min-height: 6em; }
.js .compose-form:not(.active) .compose-extra { display: none; }
.compose-extra .tag-picker { margin-top: 12px; }
.compose-extra .chip-option span { min-height: 34px; padding: 4px 12px; font-size: 0.85rem; }
.compose-extra .new-tag { font-size: 0.88rem; }
.compose-extra .tag-picker legend { font-size: 0.88rem; margin-bottom: 8px; }
.compose-extra .tag-picker legend .muted { font-weight: 500; }
@media (max-width: 719px) {
  /* One scrolling row of topics on phones, so the Post button stays close. */
  .tag-picker.compact .chip-options { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding: 2px 4px 4px; }
  .tag-picker.compact .chip-options::-webkit-scrollbar { display: none; }
  .tag-picker.compact .chip-option { flex: none; }
}
.compose-extra .new-tag { margin-top: 10px; }
.compose-bar { display: flex; align-items: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.compose-help { flex: 1 1 100%; order: 3; font-size: 0.85rem; color: var(--muted); }
.compose-help summary { cursor: pointer; }
.compose-help p { margin: 6px 0 0; }
.compose-bar .char-count { margin-left: auto; }
.char-count { font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.char-count.near { color: var(--error); font-weight: 650; }
.post-button { border-radius: 999px; padding: 8px 26px; min-height: 42px; background: var(--brand-gradient); color: #fff; }
.post-button:hover { background: var(--brand-gradient); filter: brightness(1.08); }

/* Similar statements, shown straight under the post box. The list sits
   outside the post form (its vote forms cannot be nested in it), so the form
   lets its parts take part in the composer's layout and the list is placed
   between the text box and the rest. */
.composer:has(.similar:not([hidden])) { display: flex; flex-direction: column; }
.composer:has(.similar:not([hidden])) .compose-form { display: contents; }
.composer:has(.similar:not([hidden])) :is(.compose-extra, .compose-bar, .my-pending) { order: 2; }
.similar { order: 1; margin-top: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.similar-head { margin: 0 0 10px; font-size: 0.9rem; }
.similar-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.similar-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.similar-item summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 44px;
}
.similar-item summary::-webkit-details-marker { display: none; }
.similar-text { flex: 1; font-size: 0.95rem; font-weight: 560; line-height: 1.35; }
.similar-action {
  flex: none; font-size: 0.82rem; font-weight: 650; color: var(--accent); border: 1px solid currentColor;
  border-radius: 999px; padding: 4px 12px;
}
.similar-item[open] .similar-action { display: none; }
.similar-item .feed-item { margin: 0; padding: 0 12px 12px; border: 0; box-shadow: none; background: none; }
.similar-item .feed-item blockquote { display: none; }
.my-pending ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.fab {
  position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 16px); z-index: 30;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 20px 0 16px; height: 54px; border-radius: 999px;
  background: var(--brand-gradient); color: #fff; font-weight: 680; text-decoration: none;
  box-shadow: 0 8px 24px -6px rgb(79 70 229 / 0.55), 0 2px 6px rgb(16 18 40 / 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fab .icon { width: 22px; height: 22px; }
.fab.hidden { opacity: 0; transform: translateY(12px) scale(0.95); pointer-events: none; }
@media (min-width: 720px) { .fab { right: max(24px, calc((100vw - 780px) / 2 - 190px)); bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .fab { transition: none; } }
.results-pending { margin: 0; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 0.92rem; color: var(--muted); }

/* Karma on the My session page */
.karma-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.karma-points { margin: 0; }
.karma-points strong { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.karma-points span { color: var(--muted); font-weight: 600; margin-left: 4px; }
.karma-level { margin: 0; font-weight: 700; padding: 4px 14px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.karma .badges { margin: 10px 0 14px; }
.karma .badges .chip::before { content: "★ "; }
.karma-table td:nth-child(2), .karma-table td:nth-child(3) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.karma-table td:nth-child(3) { font-weight: 700; }
.karma-table { display: table; }
.karma-rules { padding-left: 20px; margin: 0 0 12px; }
.karma-rules li { margin: 4px 0; }

/* Personal link: copy row and how to save it */
.copy-row { display: flex; gap: 8px; align-items: stretch; margin: 12px 0; }
.copy-row .pass-link { flex: 1 1 auto; min-width: 0; font-size: 16px; }
.copy-row button { flex: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.save-ways { display: grid; gap: 10px; margin: 18px 0; }
.save-ways .card { margin: 0; }
.save-way summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-height: 28px; }
.save-way summary .muted { font-size: 0.9rem; }
.save-way-title { font-weight: 650; }
.save-way ol { margin: 12px 0 0; padding-left: 1.3em; }
.save-way li { margin: 6px 0; }
.key {
  display: inline-block; min-width: 1.6em; padding: 0 6px; text-align: center; white-space: nowrap;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); font-size: 0.9em;
}
ul.who { padding-left: 1.2em; }
ul.who li { margin: 8px 0; }
details.card > summary { cursor: pointer; font-weight: 650; }
.share-icon { width: 1em; height: 1em; vertical-align: -0.15em; }

/* Frequently asked questions */
.faq-toc ul { padding-left: 1.2em; }
.faq-toc li { margin: 6px 0; }
.faq section { scroll-margin-top: 80px; }
.feed-help { margin-top: -4px; }

/* Select-all-that-apply questions: a statement card with a label, a tick
   box per option and "None of these" set apart below them. */
.sel-label { display: inline-flex; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 4px 10px; margin: 0 0 2px; }
.sel-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sel-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.sel-option {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; cursor: pointer; font-size: 0.95rem; line-height: 1.35;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sel-option:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.sel-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sel-option input { margin-top: 1px; flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.sel-none-item { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--border); }
.sel-none { font-style: italic; }
.sel-card .card-foot { flex-wrap: wrap; }
.sel-results { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.sel-results li { display: grid; grid-template-columns: 1em 1fr auto; gap: 4px 10px; align-items: center; }
.sel-results .b-mark { color: var(--accent); font-weight: 800; text-align: center; }
.sel-results .rk-name { font-weight: 500; }
.sel-results li.mine .rk-name, .sel-results li.mine .rk-pct { font-weight: 700; color: var(--text); }
.sel-results li.mine .b-fill { fill: var(--agree); }
.sel-results .sel-none-row .rk-name { font-style: italic; }