/* SPDX-License-Identifier: AGPL-3.0-only */
/* Copyright (C) 2026 Jean-Pierre GARNIER (@codeyourweb) */
/* OpenLearn - single stylesheet, no build step, no external assets. */

:root {
  --bg: #070b16;
  --bg-soft: #0d1426;
  --surface: #121a2f;
  --surface-2: #18223c;
  --border: #24304d;
  /* Depth: records sit on the page with a shadow just deep enough to separate
     them. On a dark ground the light one is invisible, so each theme owns its
     own pair. */
  --shadow-1: 0 1px 2px rgba(2, 6, 18, 0.55), 0 1px 1px rgba(2, 6, 18, 0.35);
  --shadow-2: 0 6px 18px rgba(2, 6, 18, 0.45), 0 2px 4px rgba(2, 6, 18, 0.35);
  --text: #e8edf9;
  --muted: #94a3c4;
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --accent-soft: rgba(139, 92, 246, 0.15);
  /* Accent meant to be read, not merely filled: 5.8:1 on the dark surfaces. */
  --accent-text: #a78bfa;
  /* Ink used on top of the accent gradient. */
  --on-accent: #06101f;
  --topbar-h: 58px;
  --ok: #22c55e;
  --ok-soft: rgba(34, 197, 94, 0.16);
  /* Text and fill used *inside* a status surface. Fixed pastels failed here:
     #bbf7d0 on a translucent green is unreadable once the page behind it is
     light, so both sides of the pair live in variables now. */
  --ok-text: #bbf7d0;
  --ok-surface: #14301f;
  --warn: #f59e0b;
  --warn-text: #fde68a;
  --warn-surface: #3a2a0d;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.16);
  --danger-text: #fecaca;
  --danger-surface: #3a1518;
  /* Diff: additions read green, removals red, and a changed line pairs the two. */
  --diff-add-bg: rgba(34, 197, 94, 0.16);
  --diff-add-strong: rgba(34, 197, 94, 0.38);
  --diff-del-bg: rgba(239, 68, 68, 0.14);
  --diff-del-strong: rgba(239, 68, 68, 0.34);
  --diff-gutter: #7f8bab;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 45px rgba(3, 7, 18, 0.55);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1100px 600px at 12% -10%, rgba(139, 92, 246, 0.20), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(34, 211, 238, 0.14), transparent 55%);
  background-repeat: no-repeat;
  background-size: cover;
}

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* The glow lives on a fixed layer: painted on the body itself it would
     scroll away and leave a visible seam halfway down the page. */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.4em; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

/* Logical inset: `left: -999px` parked the link outside the document, which in
   a right-to-left page lands 999 px of overflow on the other side and widened
   the whole document (4878 px for a 1440 px viewport in Arabic). */
.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0; padding: 0.6rem 1rem;
  background: var(--accent); color: #fff; z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* ---------- Chrome ---------- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.1rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav { display: flex; gap: 1.1rem; margin-left: 0.5rem; }
.nav a { color: var(--muted); font-weight: 500; font-size: 0.92rem; padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a.active { color: var(--text); border-bottom-color: var(--accent); text-decoration: none; }
.nav a[hidden] { display: none; }
/* The account is an icon and a popover; the language and theme sit on the far
   right, away from the navigation links. */
.session-box { margin-left: auto; display: flex; align-items: center; }
.account-menu { position: relative; }
.account-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface-2); color: var(--text);
}
.account-button:hover, .account-menu.is-open .account-button { border-color: var(--accent); color: var(--accent); }
.account-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.02em;
}
.account-popover {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 60;
  min-width: 13rem; max-width: calc(100vw - 1.6rem); padding: 0.35rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0.35rem;
  box-shadow: var(--shadow);
  display: grid;
}
.account-popover-head {
  margin: 0; padding: 0.45rem 0.6rem 0.5rem; font-size: 0.78rem; color: var(--muted);
  border-bottom: 1px solid var(--border); margin-bottom: 0.25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.5rem 0.6rem; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 0.9rem; border-radius: 0.25rem;
}
.account-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.account-item.is-primary { color: var(--accent); font-weight: 600; }
.account-signout { color: var(--danger); }

main {
  flex: 1;
  padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  /* Large screens get more room: a 1180px column wasted half of a 2K display. */
  max-width: clamp(1180px, 88vw, 1560px);
  margin: 0 auto;
}
/* Canvases and live sessions take the whole width instead of a centred column. */
main.is-wide { max-width: none; padding-left: clamp(0.9rem, 1.8vw, 2rem); padding-right: clamp(0.9rem, 1.8vw, 2rem); }
main:focus { outline: none; }
.footer {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem); border-top: 1px solid rgba(36, 48, 77, 0.6);
  color: var(--muted); font-size: 0.82rem;
}
/* The row wraps: the legal notice, the accessibility statement and the rest
   are one link too many for a 390 px phone, where the last one used to end
   8 px past the screen and make the whole page scroll sideways. */
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 22vw, 340px), 1fr)); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; }
.hidden, [hidden] { display: none !important; }
.spacer { flex: 1; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card.tight { padding: 1rem; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.card-title { margin: 0; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero {
  display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center; margin-bottom: 2.2rem;
}
.hero-title { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 0.5rem; }
.hero-title .grad { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.3rem; }

.join-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.join-panel h2 { margin-bottom: 0.2rem; }
.pin-form { display: flex; gap: 0.6rem; margin-top: 1rem; }
.pin-input {
  flex: 1; min-width: 0; text-align: center; letter-spacing: 0.4em; text-transform: uppercase;
  font-size: 1.35rem; font-weight: 700; padding: 0.7rem 0.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  padding: 0.55rem 1rem; border-radius: var(--radius-sm); font-size: 0.92rem; font-weight: 550;
  cursor: pointer; transition: transform 0.06s ease, background 0.15s ease, border-color 0.15s ease, opacity 0.15s;
  font-family: inherit; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
/* Icon-only buttons: square, same hit area as a text button, label kept for
   screen readers and as a native tooltip. */
.btn-icon {
  padding: 0.4rem; display: inline-flex; align-items: center; justify-content: center;
  line-height: 0; min-width: 34px; min-height: 32px;
}
.btn-icon svg { pointer-events: none; }
.btn-icon:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn-primary {
  background: linear-gradient(120deg, var(--accent), #6d4bf5 55%, var(--accent-2));
  border-color: transparent; color: var(--on-accent); font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.06); background: linear-gradient(120deg, var(--accent), #6d4bf5 55%, var(--accent-2)); }
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: rgba(139, 92, 246, 0.12); }
.btn-danger { background: var(--danger-surface); border-color: rgba(239, 68, 68, 0.4); color: var(--danger-text); }
.btn-danger:hover { background: rgba(239, 68, 68, 0.28); }
/* Destructive, but quiet: a delete that sits in a row of fields must not shout
   louder than the content it belongs to, and must still read as destructive. */
.btn-danger-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-danger-ghost:hover, .btn-danger-ghost:focus-visible {
  background: var(--danger-soft); border-color: rgba(239, 68, 68, 0.45); color: var(--danger-text);
}
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 0.35rem 0.55rem; font-size: 0.85rem; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.9rem; }
.label { font-size: 0.82rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.input, .textarea, .select {
  width: 100%; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-family: inherit; font-size: 0.95rem;
}
.input:focus, .textarea:focus, .select:focus { outline: 2px solid rgba(139, 92, 246, 0.55); border-color: var(--accent); }
.textarea { min-height: 84px; resize: vertical; }
.hint { color: var(--muted); font-size: 0.8rem; }
.error-text { color: var(--danger); font-size: 0.85rem; }
.form-error { background: var(--danger-soft); border: 1px solid rgba(239, 68, 68, 0.4); color: var(--text); padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); margin-bottom: 0.9rem; }
.checkbox { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem;
  border-radius: 999px; background: var(--accent-soft); color: #c4b5fd; font-size: 0.75rem; font-weight: 600;
}
.badge.ok { background: var(--ok-soft); color: var(--ok-text); }
.badge.warn { background: rgba(245, 158, 11, 0.16); color: var(--text); }
.badge.danger { background: var(--danger-soft); color: var(--danger-text); }
.badge.muted { background: rgba(148, 163, 196, 0.14); color: var(--muted); }

/* ---------- Quiz list ---------- */
.quiz-card { display: flex; flex-direction: column; gap: 0.6rem; height: 100%; }
.quiz-card h3 { margin: 0; }
.quiz-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--muted); font-size: 0.82rem; }
.quiz-desc { color: var(--muted); font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quiz-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.6rem; }

/* ---------- Editor ---------- */
.editor-head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.2rem; }
.question-editor { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1rem; margin-bottom: 1rem; }
.question-editor-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.q-index { width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: #c4b5fd; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex: none; }
.rte-wrap { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.rte-toolbar { display: flex; gap: 0.25rem; padding: 0.35rem; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.rte-btn {
  border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 6px;
  min-width: 30px; height: 28px; font-size: 0.82rem; cursor: pointer; font-family: inherit; font-weight: 600;
}
.rte-btn:hover { background: rgba(139, 92, 246, 0.16); color: var(--text); }
.rte {
  min-height: 74px; padding: 0.6rem 0.75rem; outline: none; font-size: 0.95rem;
  max-height: 260px; overflow-y: auto;
}
.rte:empty::before { content: attr(data-placeholder); color: var(--muted); }
.rte p { margin: 0 0 0.4em; }
.rte ul, .rte ol { margin: 0.2em 0 0.4em 1.2em; padding: 0; }
.rte h1, .rte h2, .rte h3, .rte h4 { margin: 0.2em 0; font-size: 1.05rem; }
.options-editor { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; }
.option-row { display: flex; align-items: center; gap: 0.55rem; }
.option-row .input { flex: 1; }
.opt-marker { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--border); display: grid; place-items: center; flex: none; }
.opt-marker.radio::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: transparent; }
.option-row.correct .opt-marker { border-color: var(--ok); background: var(--ok-soft); }
.option-row.correct .opt-marker::after { background: var(--ok); }
.option-row.correct .input { border-color: rgba(34, 197, 94, 0.45); }
.editor-footer { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.8rem; }
.q-settings { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin-top: 0.8rem; }
.q-settings .field { margin-bottom: 0; }
.q-settings .input { width: 110px; }
.image-preview { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; }
.image-preview img { max-height: 70px; border-radius: 8px; border: 1px solid var(--border); }
.editor-actions { position: sticky; bottom: 0; background: linear-gradient(180deg, transparent, var(--bg) 30%); padding: 1rem 0 0.4rem; display: flex; gap: 0.7rem; justify-content: flex-end; }

/* ---------- Lobby / host ---------- */
.lobby { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pin-display {
  font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: 0.22em;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; padding: 0.3rem 0;
}
.join-url { display: flex; gap: 0.5rem; }
.join-url .input { font-size: 0.82rem; }
.participants { display: flex; flex-direction: column; gap: 0.4rem; max-height: 380px; overflow-y: auto; }
.participant-chip {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9rem;
}
.participant-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); flex: none; }
.participant-chip .score { margin-left: auto; font-weight: 700; color: var(--accent-2); }

/* ---------- Play ---------- */
.play-shell { max-width: 860px; margin: 0 auto; }
.play-head { display: flex; align-items: center; gap: 0.8rem; justify-content: space-between; margin-bottom: 0.9rem; flex-wrap: wrap; }
.question-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.6rem); box-shadow: var(--shadow); }
.question-text { font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; margin-bottom: 1rem; }
.question-text p:last-child { margin-bottom: 0; }
.question-image { width: 100%; height: 220px; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 1rem; display: block; }
.options-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.option-btn {
  display: flex; align-items: center; gap: 0.7rem; text-align: left; width: 100%;
  padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); font-family: inherit; font-size: 0.98rem; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.option-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.option-btn:active:not(:disabled) { transform: scale(0.995); }
.option-btn:disabled { cursor: default; }
.option-btn .letter {
  width: 26px; height: 26px; border-radius: 8px; background: rgba(139, 92, 246, 0.18);
  color: #c4b5fd; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; flex: none;
}
.option-btn.selected { border-color: var(--accent); background: rgba(139, 92, 246, 0.2); }
.option-btn.correct { border-color: var(--ok); background: var(--ok-soft); }
.option-btn.wrong { border-color: var(--danger); background: var(--danger-soft); }
.option-count { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.timer { margin: 0.9rem 0 0.2rem; }
.timer-bar { height: 8px; border-radius: 999px; background: rgba(148, 163, 196, 0.18); overflow: hidden; }
.timer-fill { height: 100%; width: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.25s linear; }
.timer-fill.low { background: linear-gradient(90deg, #f97316, var(--danger)); }
.timer-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); margin-top: 0.3rem; }
.feedback { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 12px; font-weight: 600; }
.feedback.ok { background: var(--ok-surface); border: 1px solid rgba(34, 197, 94, 0.4); color: var(--ok-text); }
.feedback.ko { background: var(--danger-surface); border: 1px solid rgba(239, 68, 68, 0.4); color: var(--danger-text); }
.feedback.wait { background: rgba(148, 163, 196, 0.1); border: 1px solid var(--border); color: var(--muted); font-weight: 500; }

/* ---------- Scoreboard ---------- */
.scoreboard { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.score-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.score-row.me { border-color: var(--accent); background: rgba(139, 92, 246, 0.12); }
.score-rank { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.score-row:nth-child(1) .score-rank { color: #fbbf24; }
.score-name { font-weight: 600; }
.score-value { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); }

/* ---------- Tables (results) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--surface-2); color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; position: sticky; top: 0; }
tr:last-child td { border-bottom: none; }
td.correct { color: var(--ok-text); }
td.wrong { color: var(--danger-text); }
td.muted { color: var(--muted); }

/* ---------- Auth ---------- */
.auth-card { max-width: 430px; margin: 2rem auto; }
.auth-switch { text-align: center; color: var(--muted); font-size: 0.88rem; margin-top: 0.8rem; }

/* ---------- Toast / modal ---------- */
.toast-region { position: fixed; bottom: 1.2rem; right: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 90; }
.toast {
  padding: 0.7rem 1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 0.9rem; box-shadow: var(--shadow); animation: slide-in 0.18s ease-out;
  max-width: 360px;
}
.toast.error { border-color: var(--danger); background: var(--danger-surface); color: var(--danger-text); }
.toast.success { border-color: var(--ok); background: var(--ok-surface); color: var(--ok-text); }
@keyframes slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.modal-backdrop { position: fixed; inset: 0; background: rgba(3, 7, 18, 0.7); display: grid; place-items: center; z-index: 95; padding: 1rem; }
.modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; max-width: 460px; width: 100%; box-shadow: var(--shadow); }
.modal h3 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; }

/* ---------- Misc ---------- */
.loading { text-align: center; padding: 3rem; color: var(--muted); }
.empty { text-align: center; padding: 2.2rem 1rem; color: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); }
.banner { padding: 0.85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 1rem; font-size: 0.9rem; }
.banner.warn { border-color: var(--warn); background: rgba(245, 158, 11, 0.12); color: var(--text); }
.banner.ok { border-color: rgba(34, 197, 94, 0.45); background: var(--ok-surface); color: var(--ok-text); }
.divider { height: 1px; background: var(--border); margin: 1.2rem 0; border: 0; }
kbd { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 0.1rem 0.4rem; font-size: 0.8rem; font-family: ui-monospace, monospace; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86em; background: rgba(148, 163, 196, 0.12); padding: 0.1rem 0.35rem; border-radius: 5px; }
pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem; overflow-x: auto; font-size: 0.82rem; }
pre code { background: none; padding: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero, .lobby { grid-template-columns: 1fr; }
  .hero { gap: 1.4rem; }
}
@media (max-width: 620px) {
  .topbar { flex-wrap: wrap; gap: 0.7rem; }
  .nav { order: 3; width: 100%; overflow-x: auto; }
  .session-box { margin-left: auto; }
  .options-grid { grid-template-columns: 1fr; }
  .editor-actions { position: static; }
  .toast-region { left: 0.8rem; right: 0.8rem; bottom: 0.8rem; }
  .toast { max-width: none; }
}

/* ---------- Utility layout (CSP-safe, no inline styles) ---------- */
.align-start { align-items: flex-start; }
.flex-1 { flex: 1 1 auto; }
.row-center { justify-content: center; }
.play-join { max-width: 460px; margin: 2rem auto; }

/* ---------- Theme: light ---------- */
[data-theme="light"] {
  --bg: #f6f7fb;
  --bg-soft: #eef1f8;
  --surface: #ffffff;
  --surface-2: #f2f4fa;
  --border: #d7dced;
  --shadow-1: 0 1px 2px rgba(19, 26, 43, 0.10), 0 2px 6px rgba(19, 26, 43, 0.06);
  --shadow-2: 0 8px 20px rgba(19, 26, 43, 0.14), 0 2px 6px rgba(19, 26, 43, 0.08);
  --text: #131a2b;
  --muted: #5b6580;
  --accent: #6d28d9;
  --accent-2: #0e7490;
  --accent-soft: rgba(109, 40, 217, 0.10);
  --accent-text: #6d28d9;
  --ok: #15803d;
  --ok-soft: rgba(21, 128, 61, 0.12);
  --ok-text: #14532d;
  --ok-surface: #e8f7ee;
  --warn: #b45309;
  --warn-text: #78350f;
  --warn-surface: #fdf3e3;
  --danger: #b91c1c;
  --danger-soft: rgba(185, 28, 28, 0.12);
  --danger-text: #7f1d1d;
  --danger-surface: #fdeaea;
  --diff-add-bg: rgba(21, 128, 61, 0.12);
  --diff-add-strong: rgba(21, 128, 61, 0.3);
  --diff-del-bg: rgba(185, 28, 28, 0.1);
  --diff-del-strong: rgba(185, 28, 28, 0.26);
  --diff-gutter: #5b6580;
  --shadow: 0 16px 40px rgba(19, 26, 43, 0.10);
  /* White on the deeper light-theme gradient; the dark theme keeps dark ink
     on its brighter violet. */
  --on-accent: #ffffff;
}
[data-theme="light"] body {
  background: var(--bg);
}
[data-theme="light"] body::before {
  background-image:
    radial-gradient(1100px 600px at 12% -10%, rgba(109, 40, 217, 0.10), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(14, 116, 144, 0.08), transparent 55%);
}
/* Status colours now come from --ok-text / --warn-text / --danger-text, which
   the light theme redefines, so no per-component override is needed here. */
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger) { background: var(--surface-2); }
[data-theme="light"] .btn-primary {
  background: linear-gradient(120deg, var(--accent), #6d4bf5 55%, var(--accent-2));
  color: #fff;
}
[data-theme="light"] .btn-primary:hover { filter: brightness(0.96); }
[data-theme="light"] .topbar { background: rgba(255, 255, 255, 0.82); }
[data-theme="light"] .option-btn { background: var(--surface); }

/* ---------- Chrome controls (language + theme) ---------- */
.chrome-controls { display: flex; align-items: center; gap: 0.4rem; }
.lang-select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.3rem 0.6rem; font-size: 0.82rem; font-family: inherit;
}
.theme-toggle {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; width: 32px; height: 32px; cursor: pointer; line-height: 1;
}
.theme-toggle:hover { border-color: var(--accent); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--muted);
  padding: 0.55rem 0.8rem; font: inherit; font-size: 0.9rem; cursor: pointer; border-radius: 8px 8px 0 0;
}
.tab:hover { color: var(--text); background: var(--surface-2); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.tab-count { font-size: 0.72rem; opacity: 0.75; margin-left: 0.25rem; }

/* ---------- Status pills ---------- */
.pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
.pill.draft { background: rgba(148, 163, 196, 0.16); color: var(--muted); }
.pill.private { background: rgba(148, 163, 196, 0.16); color: var(--muted); }
.pill.pending { background: rgba(245, 158, 11, 0.16); color: var(--warn); }
.pill.public { background: var(--ok-soft); color: var(--ok-text); }
.pill.rejected { background: var(--danger-soft); color: var(--danger); }
.pill.ai { background: var(--accent-soft); color: var(--accent-2); }

/* ---------- Swipe deck: one statement per card, dragged like a dating app -- */
.swipe-deck { display: flex; justify-content: center; margin: 0.7rem 0 0.9rem; touch-action: pan-y; }
.swipe-card {
  position: relative; width: min(540px, 100%); border-radius: 26px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 22px 55px rgba(2, 6, 18, 0.32);
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  transform-origin: 50% 120%;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease, box-shadow 0.2s ease;
  will-change: transform;
}
.swipe-card.is-dragging { transition: none; cursor: grabbing; box-shadow: 0 32px 70px rgba(2, 6, 18, 0.42); }
/* One gentle nudge when the card appears: shows it is meant to be dragged. */
@keyframes swipe-invite {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  30% { transform: translateX(-14px) rotate(-1.8deg); }
  65% { transform: translateX(14px) rotate(1.8deg); }
}
.swipe-card.is-inviting { animation: swipe-invite 1.5s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .swipe-card.is-inviting { animation: none; } }
.swipe-card.is-flying { transition: transform 0.42s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.42s ease; opacity: 0; }
.swipe-card.is-locked { cursor: default; }
.swipe-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swipe-card-body { display: grid; gap: 0.9rem; padding: 1.05rem 1.05rem 1.35rem; }
.swipe-card-image { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); }
.swipe-card-text { font-size: 1.16rem; line-height: 1.5; color: var(--text); }
.swipe-stamp {
  position: absolute; top: 1rem; z-index: 2; padding: 0.3rem 0.7rem;
  border: 3px solid currentColor; border-radius: 10px; background: var(--surface);
  font-size: 0.9rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
}
.swipe-stamp.yes { right: 1rem; color: var(--ok); transform: rotate(9deg); }
.swipe-stamp.no { left: 1rem; color: var(--danger); transform: rotate(-9deg); }
.swipe-card.lean-yes .swipe-stamp.yes,
.swipe-card.lean-no .swipe-stamp.no { opacity: var(--swipe-progress, 0); }
.swipe-card.reveal-yes .swipe-stamp.yes,
.swipe-card.reveal-no .swipe-stamp.no { opacity: 1; }
.swipe-sent {
  display: grid; place-items: center; gap: 0.2rem; padding: 2rem 1rem;
  border: 1px dashed var(--border); border-radius: 20px; background: var(--surface-2);
}
.swipe-sent-badge {
  padding: 0.4rem 1rem; border-radius: 999px; border: 2px solid var(--ok);
  color: var(--ok); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.swipe-actions { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; }
.swipe-actions .btn { min-width: 132px; }
.swipe-hint { text-align: center; color: var(--muted); font-size: 0.82rem; margin-top: 0.45rem; }
.swipe-tally { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 0.35rem; }

/* ---------- Translation editor ---------- */
.translation-panel { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 0.7rem; margin-top: 0.7rem; background: var(--surface-2); }
.translation-panel summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.translation-row { display: grid; grid-template-columns: 92px 1fr; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.translation-row .lang-tag { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.lang-checkboxes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.lang-checkboxes label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.88rem; }

/* ---------- Misc ---------- */
.stack-sm > * + * { margin-top: 0.35rem; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.spacer { flex: 1; }
.small-note { font-size: 0.8rem; color: var(--muted); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.review-item { border-left: 3px solid var(--border); padding: 0.5rem 0.75rem; margin-bottom: 0.6rem; }
.review-item.blocked { border-left-color: var(--danger); }
.review-item.approved { border-left-color: var(--ok); }
.review-item.corrected { border-left-color: var(--warn); }
.finding { font-size: 0.82rem; color: var(--muted); }

/* ---- Utility classes used by the current views -------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-select {
  background: var(--surface-2, rgba(255, 255, 255, 0.06));
  color: inherit;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font: inherit;
  font-size: 0.85rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.pin-display.sm {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  vertical-align: top;
}

.table th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #9aa4b2);
}

.right {
  text-align: right;
}

.mt-4 {
  margin-top: 2rem;
}

.search-form,
.join-box,
.answer-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.banner.info {
  border-left: 3px solid var(--accent, #6c8cff);
}

/* Time is up: dim the answers so the player sees they can no longer act. */
.play-shell.time-up .options-grid,
.play-shell.time-up .swipe-deck {
  opacity: 0.65;
  filter: grayscale(0.35);
}

[data-theme="light"] .lang-select {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.15);
}


/* -------------------------------------------------------------------------- */
/* Adventure mode: player                                                     */
/* -------------------------------------------------------------------------- */

.adv-player { display: grid; gap: 18px; max-width: 940px; margin: 0 auto; padding: 14px 0 48px; align-content: start; }

.adv-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adv-brand { color: var(--muted); font-size: 14px; }
.adv-brand:hover { color: var(--text); }

.adv-scene {
  position: relative;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 6px);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.adv-image { width: 100%; max-height: 320px; object-fit: cover; display: block; border-bottom: 1px solid var(--border); }
.adv-body { padding: 26px 28px 22px; display: grid; gap: 20px; }
.adv-text { font-size: 18px; line-height: 1.6; }
.adv-text p:first-child { margin-top: 0; }
.adv-text p:last-child { margin-bottom: 0; }

.adv-choices { display: grid; gap: 10px; }
.adv-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.adv-choice:hover:not(:disabled) { transform: translateX(3px); border-color: var(--accent); background: var(--accent-soft); }
.adv-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.adv-choice:disabled { opacity: 0.55; cursor: progress; }
.adv-choice.chosen { border-color: var(--accent-2); background: var(--accent-soft); }
.adv-choice-arrow { color: var(--accent-2); font-size: 18px; }

.adv-stats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0; padding: 0; }
.adv-stat { display: grid; gap: 6px; }
.adv-stat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.adv-stat-label { font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.adv-stat-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.adv-stat-track { height: 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.adv-stat-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.35s ease; }
.adv-delta { margin-left: 6px; font-size: 12px; font-weight: 600; }
.adv-delta.up { color: var(--ok); }
.adv-delta.down { color: var(--danger); }

.adv-ending {
  position: relative; overflow: hidden;
  display: grid; gap: 16px; padding: 32px 30px;
  border-radius: calc(var(--radius) + 6px);
  border: 1px solid var(--border);
  background-color: var(--surface);
  background-size: cover; background-position: center;
  box-shadow: var(--shadow);
}
.adv-ending.death { border-color: var(--danger); }
.adv-ending.victory { border-color: var(--ok); }

/* An illustrated ending sits on a dark painting: force a scrim and light
   text so the theme's ink-on-paper colours never land on it. */
.adv-ending.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(6, 10, 20, 0.58), rgba(6, 10, 20, 0.78));
}
.adv-ending.has-bg > * { position: relative; z-index: 1; }
.adv-ending.has-bg { color: #eef3fb; }
.adv-ending.has-bg .adv-ending-title { color: #ffffff; }
.adv-ending.has-bg .adv-ending-kind { color: rgba(226, 232, 240, 0.78); border-color: rgba(226, 232, 240, 0.35); }
.adv-ending.has-bg .adv-ending-sub,
.adv-ending.has-bg .adv-stat-label { color: rgba(226, 232, 240, 0.72); }
.adv-ending.has-bg .adv-stat-track { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.22); }
.adv-ending.has-bg .adv-text p { color: #e7edf7; }
.adv-ending-kind { justify-self: start; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.adv-ending-title { margin: 0; font-size: 30px; }
.adv-ending-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* -------------------------------------------------------------------------- */
/* Adventure mode: editor                                                     */
/* -------------------------------------------------------------------------- */

.adv-editor { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 0; height: calc(100vh - 130px); min-height: 620px; padding-bottom: 18px; }
.adv-editor-bar { display: flex; align-items: center; gap: 10px; padding: 8px 2px 12px; flex-wrap: wrap; }
.adv-editor-bar .adv-title { max-width: 360px; font-size: 16px; }
.adv-editor-bar .spacer { flex: 1; }
.adv-status { color: var(--muted); white-space: nowrap; }
.adv-status.is-dirty { color: var(--warn); }

.adv-editor-body { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; min-height: 0; }
@media (max-width: 1100px) {
  .adv-editor { height: auto; }
  .adv-editor-body { grid-template-columns: 1fr; grid-template-rows: 460px auto; }
}

/* Phones and small tablets: one column, the graph keeps a usable height and the
   inspector sits underneath instead of eating the screen. */
@media (max-width: 900px) {
  .adv-editor { height: auto; min-height: 0; grid-template-rows: auto auto; }
  .adv-editor-bar { gap: 8px; }
  .adv-editor-bar .adv-title { max-width: none; flex: 1 1 100%; order: -1; }
  .adv-editor-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 58vh) auto; gap: 12px; }
  .adv-canvas-wrap { min-height: 300px; }
  .adv-inspector { max-height: none; }
  .adv-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .adv-tabs::-webkit-scrollbar { display: none; }
  .adv-tab { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 560px) {
  .adv-editor-body { grid-template-rows: minmax(260px, 52vh) auto; }
  .adv-node { transform-origin: top left; }
}

.adv-canvas-wrap { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft); overflow: hidden; }

/* Two-card method chooser and the publish tab actions. */
.mode-grid-two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 760px; }

.publish-choices { display: grid; gap: 12px; }
.publish-check { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.publish-check h3 { margin: 0; font-size: 15px; }
.publish-actions { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.publish-action { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--border); border-radius: 12px; }
.publish-action .btn { width: 100%; }

.ai-draft-card summary { cursor: pointer; }
.opt-marker.poll { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); font-size: 12px; }

/* Floating canvas controls, bottom-left, the way n8n stacks them: a compact
   column of icon buttons that never scrolls away with the graph. */
.adv-canvas-toolbar {
  position: absolute; z-index: 6; left: 14px; bottom: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 10px 24px rgba(3, 7, 18, 0.28);
}
.adv-tool {
  display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); cursor: pointer;
}
.adv-tool:hover { background: var(--surface-2); color: var(--accent); }
.adv-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.adv-tool.is-danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.adv-tool-sep { width: 22px; height: 1px; margin: 2px 0; background: var(--border); }
.adv-zoom-level { font-size: 11px; color: var(--muted); padding: 2px 0 1px; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Touch targets the size of a thumb, laid out along the bottom edge so the
     graph keeps the full width of a phone. */
  .adv-canvas-toolbar {
    left: 8px; right: 8px; bottom: 8px; flex-direction: row; justify-content: flex-start;
    gap: 2px; padding: 4px 6px; border-radius: 12px;
    /* Eight tools do not fit in 358 px: let the bar scroll instead of shrinking
       below a usable tap target. */
    overflow-x: auto; scrollbar-width: none;
  }
  .adv-canvas-toolbar::-webkit-scrollbar { display: none; }
  .adv-tool { width: 40px; height: 40px; flex: 0 0 auto; }
  .adv-tool-sep { flex: 0 0 auto; }
  .adv-tool-sep { width: 1px; height: 22px; margin: 0 2px; }
  .adv-zoom-level { min-width: 34px; text-align: center; }
}
.adv-canvas-scroll { overflow: auto; position: relative; }
.adv-canvas { position: relative; transform-origin: top left; width: max-content; min-width: 100%; min-height: 100%; padding: 0; }

.adv-edges { position: absolute; inset: 0; z-index: 1; color: var(--accent); opacity: 0.85; pointer-events: none; }
.adv-edge { fill: none; stroke: currentColor; stroke-width: 1.8; }
.adv-edge.is-ghost { stroke-dasharray: 6 5; opacity: 0.9; }

/* A block mirrors a switch node: a header, the scene text, then one row per
   answer, each row owning the output port on the right edge. */
.adv-node {
  position: absolute; z-index: 2; display: grid;
  grid-template-rows: 40px 54px auto; padding: 0 0 12px;
  border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  box-shadow: 0 12px 26px rgba(3, 7, 18, 0.22);
  cursor: grab; user-select: none;
}
.adv-node.is-ending { border-color: var(--accent-2); }
.adv-node.is-start { box-shadow: inset 3px 0 0 var(--ok), 0 12px 26px rgba(3, 7, 18, 0.22); }
.adv-node.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.adv-node.is-dragging { cursor: grabbing; z-index: 4; }
.adv-node-head {
  display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted);
  border-bottom: 1px solid var(--border); border-radius: 14px 14px 0 0;
  background: var(--surface-2);
}
.adv-node-head .spacer { flex: 1; }
.adv-node-start { color: var(--ok); font-weight: 700; }
.adv-node-text {
  margin: 0; padding: 8px 14px 6px; font-size: 13px; line-height: 1.45; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.adv-node-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.adv-row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  height: 44px; padding: 0 30px 0 12px; margin: 0;
  font-size: 12.5px; color: var(--text); cursor: crosshair;
  border-top: 1px dashed var(--border);
}
.adv-row:first-child { border-top: 1px solid var(--border); }
.adv-row.is-open { color: var(--muted); }
.adv-row:hover { background: var(--accent-soft); }
.adv-row-index {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 10.5px; font-weight: 600;
}
.adv-row.is-linked .adv-row-index { border-color: var(--accent); color: var(--accent); }
.adv-row-label {
  overflow: hidden; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.adv-row-hint {
  max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10.5px; color: var(--muted);
}
.adv-row.is-linked .adv-row-hint { color: var(--accent); }
.adv-node-in {
  position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; border: 2px solid var(--muted); background: var(--surface);
}

.adv-problems { margin: 0; padding: 10px 14px 12px 30px; border-top: 1px solid var(--danger); background: var(--danger-soft); color: var(--text); font-size: 13px; }
/* Revision panel: a strip under the toolbar, not a dialog, so the canvas the
   model just rewrote stays visible behind the instruction. */
.adv-ai-panel { padding: 10px 16px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.adv-ai-panel .label { margin-bottom: 4px; }
.adv-ai-panel .textarea { min-height: 56px; }

.adv-inspector { display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.adv-tabs { display: flex; border-bottom: 1px solid var(--border); }
.adv-tab { flex: 1; padding: 11px 8px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; cursor: pointer; }
.adv-tab:hover { color: var(--text); }
.adv-tab.is-active { color: var(--text); border-bottom-color: var(--accent); background: var(--accent-soft); }
.adv-inspector-body { overflow: auto; padding: 14px; }
.adv-inspector-section { display: grid; gap: 10px; }
.adv-inspector-section h3 { margin: 0; font-size: 16px; }
.adv-inspector-section .rte { background: var(--surface-2); color: var(--text); min-height: 84px; }

.adv-choice-list, .adv-outcome-list { display: grid; gap: 10px; }
.adv-choice-card, .adv-outcome-card, .adv-attribute-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.adv-choice-card .row, .adv-outcome-card .row, .adv-attribute-card .row { flex-wrap: wrap; }
.adv-choice-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--text); font-size: 12px; font-weight: 600; }
.adv-choice-effects { display: grid; gap: 6px; }
.adv-effects { display: grid; gap: 6px; }
.adv-effect-row { display: grid; grid-template-columns: 1fr 84px auto; gap: 6px; align-items: center; }
.adv-attribute-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 1400px) { .adv-attribute-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adv-key { max-width: 120px; }
.adv-range { max-width: 74px; }
.adv-priority { max-width: 64px; }
.input-sm { padding: 6px 8px; font-size: 13px; }

/* --- Adventure editor: ports, links, node menu, wide layout ---------------- */

/* Desktop only: on a phone this two-column rule used to win over the stacked
   layout below it in the file and squeezed the canvas to zero width. */
@media (min-width: 1101px) {
  .adv-editor-body { grid-template-columns: minmax(0, 1fr) clamp(380px, 26vw, 520px); }
}
@media (min-width: 1700px) {
  .adv-editor-body { grid-template-columns: minmax(0, 1fr) 560px; }
  .adv-editor { height: calc(100vh - 96px); }
}

.adv-node-action {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.adv-node:hover .adv-node-action,
.adv-node.is-selected .adv-node-action,
.adv-node-action:focus-visible { opacity: 1; }
.adv-node-action:hover { color: var(--text); border-color: var(--border); background: var(--surface); }
.adv-node-action.is-danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }

.adv-ports { position: absolute; right: -7px; top: 0; width: 14px; height: 100%; z-index: 3; }
.adv-port {
  position: absolute;
  right: 0;
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--surface);
  cursor: crosshair;
  transition: transform 0.12s ease, background 0.12s ease;
}
.adv-port.is-open { border-style: dashed; border-color: var(--muted); background: var(--surface); }
.adv-port.is-linked { background: var(--accent); }
.adv-port:hover { transform: scale(1.4); background: var(--accent); }
.adv-port::after {
  /* A bigger invisible hit area: a 13px dot is hard to grab. */
  content: "";
  position: absolute;
  inset: -6px;
}
.adv-editor.is-linking .adv-node { cursor: crosshair; }
.adv-editor.is-linking .adv-port { pointer-events: none; }

.adv-edge.is-ghost { stroke: var(--accent-2); stroke-dasharray: 6 5; opacity: 0.95; }
.adv-canvas.has-hot .adv-edge { opacity: 0.28; }
.adv-edge.is-hot { stroke-width: 2.8; opacity: 1 !important; }
.adv-row.is-hot { background: var(--accent-soft); }
.adv-row.is-hot .adv-row-index { border-color: var(--accent); color: var(--accent); }
.adv-row.is-hot .adv-row-hint { color: var(--accent); }
.adv-editor.is-linking .adv-row { cursor: crosshair; pointer-events: none; }

.adv-node-menu {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  padding: 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.adv-menu-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.adv-menu-item:hover { background: var(--surface-2); }
.adv-menu-item.is-danger { color: var(--danger); }
.adv-menu-item.is-danger:hover { background: var(--danger-soft); }
.adv-menu-sep { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }

/* --- Autosave indicator --------------------------------------------------- */

.autosave-state { color: var(--muted); }
.autosave-state[data-state="pending"] { color: var(--warn); }
.autosave-state[data-state="saving"] { color: var(--accent-2); }
.autosave-state[data-state="saved"] { color: var(--ok); }
.autosave-state[data-state="error"] { color: var(--danger); }

/* --- Pagination ----------------------------------------------------------- */

.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 1.2rem; }
.pager .is-disabled { opacity: 0.45; pointer-events: none; }
.pager .small-note { margin-left: 6px; }

/* --- Version history ------------------------------------------------------ */

.versions-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.versions-table th {
  text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border);
}
.versions-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.versions-table tr:last-child td { border-bottom: 0; }

/* --- Wide-screen use of space in the editors ------------------------------ */

.card { padding: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 1440px) {
  /* Two columns of question cards beat one very wide column. */
  #questions.stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
}
@media (min-width: 1440px) {
  .quiz-card { min-height: 100%; }
}

/* Format chooser (new quiz) */
.new-quiz {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 2.1rem);
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(.5rem, 1.5vw, 1.5rem) 0 1rem;
}
.new-quiz-head { display: grid; gap: .55rem; text-align: center; }
.new-quiz-head h1 { margin: 0; font-size: clamp(1.65rem, 2.6vw, 2.35rem); letter-spacing: -.01em; }
.new-quiz-head p { margin: 0 auto; max-width: 62ch; color: var(--muted); line-height: 1.6; }
.new-quiz-foot { margin: 0; text-align: center; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  align-items: stretch;
}

.mode-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: .55rem;
  padding: 1.5rem 1.45rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mode-card,
.mode-card:hover {
  text-decoration: none; /* overrides the global a:hover underline */
}
.mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 18px 38px rgba(3, 7, 18, .22);
}
.mode-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.mode-card:active { transform: translateY(-1px); }

.mode-card-badge {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  padding: .16rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface-2);
}

.mode-card-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(120, 190, 255, .14);
  color: var(--accent);
}
.mode-card-swipe .mode-card-icon { background: rgba(255, 170, 90, .15); color: #f0a25a; }
.mode-card-story .mode-card-icon { background: rgba(180, 150, 255, .16); color: #b9a1ff; }

.mode-card h2 { margin: 0; font-size: 1.16rem; }
.mode-card-lead { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55; }
.mode-card-points {
  margin: .15rem 0 .35rem;
  padding-left: 1.05rem;
  display: grid;
  gap: .32rem;
  font-size: .88rem;
  line-height: 1.45;
}
.mode-card-points li::marker { color: var(--accent); }
.mode-card-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .92rem;
  /* The accent violet is a fill colour: as text on a card it measured 3.7:1 on
     the dark surface. The link tint is the readable member of the same family. */
  color: var(--accent-text);
}
.mode-card:hover .mode-card-cta svg { transform: translateX(3px); }
.mode-card-cta svg { transition: transform .16s ease; }

@media (max-width: 640px) {
  .mode-card { padding: 1.25rem 1.15rem 1.1rem; }
  .mode-card-badge { top: 1rem; right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mode-card, .mode-card-cta svg { transition: none; }
  .mode-card:hover { transform: none; }
}

/* Language picker with flags */
.lang-picker { position: relative; }

.lang-button {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .32rem .55rem .32rem .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.lang-button:hover { border-color: var(--accent); }
.lang-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-chevron { opacity: .6; transition: transform .15s ease; }
.lang-picker.is-open .lang-chevron { transform: rotate(180deg); }

.flag {
  display: block;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.lang-button-flag { display: flex; }

.lang-menu {
  position: absolute;
  top: calc(100% + .4rem);
  right: 0;
  z-index: 60;
  margin: 0;
  padding: .3rem;
  min-width: 12.5rem;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 18px 40px rgba(3, 7, 18, .28);
}
.lang-menu[hidden] { display: none; }

.lang-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  padding: .45rem .5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .88rem;
  text-align: left;
  cursor: pointer;
}
.lang-option:hover, .lang-option:focus-visible { background: var(--surface-2); outline: none; }
.lang-option .lang-check { opacity: 0; color: var(--accent); }
.lang-option[aria-selected="true"] { font-weight: 600; }
.lang-option[aria-selected="true"] .lang-check { opacity: 1; }

@media (max-width: 720px) {
  .lang-button-label { display: none; }
  .lang-button { padding: .3rem .45rem; }
}

/* Flag grid used in the account preferences */
.flag-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.flag-choice {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.flag-choice[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* ---------------------------------------------------------------------------
   Quiz detail: hero, aside, tabs
   --------------------------------------------------------------------------- */
.detail { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }

.detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(120, 190, 255, .10), transparent 55%),
    var(--surface);
}
.detail-hero h1 { margin: .35rem 0 0; font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; }
.detail-description { margin: .6rem 0 0; max-width: 62ch; line-height: 1.6; }
.detail-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }
.detail-aside { display: grid; gap: .8rem; }
.detail-aside .card { padding: .95rem 1rem; }
.detail-aside h3 { margin: 0 0 .6rem; font-size: .95rem; }

.fact-list { display: grid; gap: .45rem; margin: 0; }
.fact-list > div { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; }
.fact-list dt { color: var(--muted); }
.fact-list dd { margin: 0; text-align: right; font-weight: 500; }

.stack-sm { display: grid; gap: .45rem; }
.stack-sm .btn { justify-content: center; }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  width: fit-content;
  max-width: 100%;
}
.tab {
  padding: .42rem .95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .88rem;
  cursor: pointer;
}
.tab:hover { color: var(--text); }
/* Ink on the accent depends on the theme: a fixed dark value was unreadable
   on the light theme, where the active tab looked black on deep violet. */
.tab.is-active { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--on-accent); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.q-preview-list { display: grid; gap: .7rem; }
.q-preview { border: 1px solid var(--border); border-radius: 12px; padding: .85rem .95rem; background: var(--surface-2); }
.q-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .45rem; }
.q-meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.q-index {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
}

/* Statistics */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.stat-card {
  display: grid;
  gap: .15rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.stat-value { font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; }
.stat-label { font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.stat-hint { margin-top: .1rem; }

.bar-list { display: grid; gap: .85rem; margin-top: .4rem; }
.bar-row { display: grid; gap: .3rem; }
.bar-label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; font-size: .9rem; }
.bar-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.bar-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.bar-track { height: 10px; border-radius: 999px; background: var(--surface-3, var(--surface-2)); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.bar-fill.ok { background: #22b573; }
.bar-fill.warn { background: #e09b1a; }
.bar-fill.danger { background: #e04f4f; }

/* Versions */
.version-list { display: grid; gap: .5rem; }
.version-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
}
.version-row.is-live { border-color: var(--accent); }
.version-meta { grid-column: 1 / -1; }

/* Participation history */
.history-list { display: grid; gap: .45rem; margin-top: .6rem; }
.history-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.history-row:hover { border-color: var(--accent); text-decoration: none; }
.history-title { display: grid; gap: .1rem; min-width: 0; }
.history-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-score { font-variant-numeric: tabular-nums; text-align: right; }

/* Host answering their own session */
.host-play { border-color: var(--accent); }
.answers-inline { display: grid; gap: .5rem; margin-top: .6rem; }
.answers-inline .option-btn { cursor: pointer; }
.answers-inline .option-btn.selected,
.options-grid .option-btn.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.participant-chip.me { border-color: var(--accent); }

.share-box { margin-top: .9rem; }

/* A report button a non-technical user can find without scrolling to the
   footer. Fixed to the bottom right, out of the reading column, and hidden in
   print and on very short screens where it would sit on the answer buttons. */
.report-pill {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-2);
}

.report-pill:hover,
.report-pill:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
}

.report-pill-icon {
  font-size: .95rem;
  line-height: 1;
  color: var(--accent-text);
}

/* The lobby: the code and the PIN side by side, so a projector shows both. */
.lobby-qr-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-top: .9rem;
}

.lobby-qr {
  width: 176px;
  height: 176px;
  padding: .5rem;
  border-radius: .7rem;
  background: #ffffff;
  box-shadow: var(--shadow-1);
}

.lobby-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Full screen, for a projector or a shared screen in a video call. */
.qr-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(4, 8, 18, 0.86);
}

.qr-overlay-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.4rem 1.6rem 1.6rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  max-width: min(92vw, 44rem);
  max-height: 92vh;
}

.qr-overlay-code {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--accent-text);
}

.qr-overlay-qr {
  width: min(62vh, 60vw, 34rem);
  height: min(62vh, 60vw, 34rem);
  padding: .7rem;
  border-radius: .8rem;
  background: #ffffff;
}

.qr-overlay-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-height: 520px) {
  .report-pill {
    display: none;
  }
}

@media print {
  .report-pill,
  .qr-overlay {
    display: none;
  }
}

/* Home tiles */
.quiz-card-foot { gap: .6rem; flex-wrap: wrap; }
.quiz-card-actions { gap: .4rem; }

@media (max-width: 860px) {
  .detail-hero { grid-template-columns: minmax(0, 1fr); }
  .detail-aside { order: -1; }
}

@media (max-width: 560px) {
  .history-row { grid-template-columns: auto minmax(0, 1fr); }
  .history-score, .history-row .pill { grid-column: 2; justify-self: start; }
  .tabs { width: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

/* Detail page: action hierarchy and hints */
.detail-hint {
  margin: -0.35rem 0 0.9rem;
  color: var(--muted);
  max-width: 62ch;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.host-actions {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem 0.4rem;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}

.host-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.host-actions-caption {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: 0.35rem;
}

.btn-quiet {
  background: transparent;
  border-color: transparent;
  font-weight: 600;
}

.btn-quiet:hover {
  background: rgba(139, 92, 246, 0.14);
  border-color: transparent;
}

.btn-lg {
  padding: 0.72rem 1.35rem;
  font-size: 1.02rem;
}

@media (max-width: 780px) {
  .host-actions {
    width: 100%;
  }
}

[data-theme="light"] .btn-danger {
  background: #fdeaea;
  border-color: #e9a9a9;
  color: #a3231f;
}

[data-theme="light"] .btn-danger:hover { background: #fbd9d9; }

/* Host answer panel: compact two-column grid on wide screens */
@media (min-width: 760px) {
  .answers-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Upload progress: a photo leaving a phone can take a while. */
.upload-progress {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.45rem 0.75rem;
  min-width: min(22rem, calc(100vw - 2rem));
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(6, 10, 22, 0.35));
}

.upload-label {
  font-size: 0.82rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-percent {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.upload-track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3, var(--surface));
  overflow: hidden;
}

.upload-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.2s ease;
}

.upload-progress.is-finishing .upload-fill {
  background: var(--accent-2);
}

/* Adventure inspector previews */
.adv-preview {
  margin: 0.55rem 0 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
  pointer-events: none;
}

.adv-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.adv-preview-wide img { max-height: 130px; }

/* Canvas panning */
.is-panning,
.is-panning .adv-canvas {
  cursor: grabbing;
}

/* Busy overlay for AI work */
.busy-overlay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(6, 10, 22, 0.55);
  backdrop-filter: blur(2px);
}

.busy-card {
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  padding: 1.35rem 1.7rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(6, 10, 22, 0.45));
  max-width: 26rem;
  text-align: center;
}

.busy-label {
  margin: 0;
  color: var(--text);
  font-size: 0.94rem;
}

.busy-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--surface-2);
  border-top-color: var(--accent);
  animation: busy-spin 0.9s linear infinite;
}

@keyframes busy-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .busy-spinner { animation-duration: 3s; }
}

/* Flag rows on cards and detail pages */
.flag-strip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.flag-chip {
  display: inline-grid;
  place-items: center;
  padding: 1px;
  border-radius: 3px;
  line-height: 0;
  opacity: 0.55;
}

.flag-chip.is-default {
  opacity: 1;
  outline: 1px solid var(--border-strong, var(--border));
}

.flag-more {
  font-size: 0.7rem;
  color: var(--muted);
  margin-left: 2px;
}

.quiz-card-langs {
  gap: 0.5rem;
  min-width: 0;
  align-items: center;
}

.quiz-card-langs .small-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fact-langs {
  gap: 0.5rem;
  align-items: center;
}

/* Management card: breathing room between the primary link and the rest */
.detail-aside .btn-block {
  margin-bottom: 0.6rem;
}

.detail-aside .btn-block:last-child {
  margin-bottom: 0;
}

/* API reference */
.docs-head {
  margin-bottom: 1.2rem;
}

.docs-head h1 {
  margin-bottom: 0.35rem;
}

.docs-head .input {
  margin-top: 0.9rem;
  max-width: 30rem;
}

.docs-group {
  margin: 1.6rem 0 0.4rem;
}

.docs-group h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.docs-op {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.7rem;
  background: var(--surface);
}

.docs-op-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.docs-method {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* Method pills are theme pairs. The green that reads on the dark surface is
   invisible on the light one, and the reverse: each side is given a shade that
   clears 4.5:1 on its own --surface-2, measured rather than eyeballed. */
.docs-method.is-get { color: #4ade80; border-color: #4ade8055; }
.docs-method.is-post { color: #93b4ff; border-color: #93b4ff55; }
.docs-method.is-put { color: #f0b354; border-color: #f0b35455; }
.docs-method.is-patch { color: #c4b5fd; border-color: #c4b5fd55; }
.docs-method.is-delete { color: #fca5a5; border-color: #fca5a555; }
[data-theme="light"] .docs-method.is-get { color: #15803d; border-color: #15803d55; }
[data-theme="light"] .docs-method.is-post { color: #1d4ed8; border-color: #1d4ed855; }
[data-theme="light"] .docs-method.is-put { color: #9a5b00; border-color: #9a5b0055; }
[data-theme="light"] .docs-method.is-patch { color: #6d28d9; border-color: #6d28d955; }
[data-theme="light"] .docs-method.is-delete { color: #b91c1c; border-color: #b91c1c55; }

.docs-path {
  font-size: 0.86rem;
  word-break: break-all;
}

.docs-summary {
  margin: 0.45rem 0 0.2rem;
}

.docs-block {
  margin-top: 0.7rem;
}

.docs-block h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.docs-table th,
.docs-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.docs-table th {
  color: var(--muted);
  font-weight: 600;
}

/* On a phone a documentation table is wider than the screen: a parameter name
   such as `array[Question]` sets a min-content width of 391 px inside a 390 px
   viewport, and the whole page scrolls sideways (WCAG 2.2 reflow, 1.4.10).
   Fixed layout halves the columns and lets long tokens wrap. */
@media (max-width: 620px) {
  .docs-table {
    table-layout: fixed;
  }

  .docs-table th,
  .docs-table td {
    overflow-wrap: anywhere;
    padding: 0.3rem 0.35rem;
  }

  /* The request body heading carries the FastAPI name of the model, one token
     such as `Body_upload_question_image_api_v1_upload`, 567 px wide on a 390 px
     screen. It has to break. */
  .docs-block h4 {
    overflow-wrap: anywhere;
  }

  /* Same disease in the MCP page's markdown table: three columns, no room. */
  .mcp-docs .prose table {
    table-layout: fixed;
  }

  .mcp-docs .prose th,
  .mcp-docs .prose td {
    overflow-wrap: anywhere;
    padding: 0.3rem 0.35rem;
  }
}

/* Timers: off and whole-quiz variants */
.timer-off .timer-row {
  justify-content: space-between;
}

.timer-run {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.timer-run .low,
[data-run-clock].low {
  color: var(--danger, #e04f4f);
}

.field.is-muted {
  opacity: 0.55;
}

/* Story clock in the play header */
.adv-clock {
  font-variant-numeric: tabular-nums;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 0.82rem;
}

.adv-clock.low {
  border-color: var(--danger, #e04f4f);
  color: var(--danger, #e04f4f);
}

/* --------------------------------------------------------------------------
   Wiki: reader, editor, graph, canvas, chat
   -------------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.page-head h1 { margin-bottom: 0.15rem; }

.grid-2 { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .grid-2 { grid-template-columns: 1fr; } }

.wiki-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 900px) { .wiki-shell { grid-template-columns: 1fr; } }

.wiki-side { padding: 0.9rem; position: sticky; top: 1rem; }
.wiki-side-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.wiki-side-title { font-weight: 650; color: var(--text); }
.wiki-nav { display: flex; flex-direction: column; gap: 2px; margin: 0.8rem 0; max-height: 48vh; overflow: auto; }
.wiki-nav a { padding: 0.35rem 0.5rem; border-radius: 8px; color: var(--muted); font-size: 0.9rem; }
.wiki-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.wiki-nav a.is-current { background: var(--accent-soft); color: var(--text); }
.wiki-side-actions { display: flex; flex-direction: column; gap: 0.4rem; }

.wiki-article { padding: 1.4rem 1.6rem; }
.wiki-article-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.wiki-content { line-height: 1.7; max-width: 74ch; }
.wiki-content > * + * { margin-top: 0.85em; }
.wiki-content h1 { font-size: 1.6rem; margin-top: 1.4em; }
.wiki-content h2 { font-size: 1.25rem; margin-top: 1.3em; }
.wiki-content h3 { font-size: 1.05rem; margin-top: 1.2em; }
.wiki-content ul, .wiki-content ol { padding-left: 1.3rem; }
.wiki-content code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 6px; font-size: 0.88em; }
.wiki-content pre { background: var(--surface-2); padding: 0.9rem 1rem; border-radius: var(--radius-sm); overflow: auto; }
.wiki-content pre code { background: none; padding: 0; }
.wiki-content blockquote { margin-left: 0; padding-left: 0.9rem; border-left: 3px solid var(--accent); color: var(--muted); }
.wiki-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.wiki-content table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.wiki-content th, .wiki-content td { border: 1px solid var(--border); padding: 0.45rem 0.6rem; text-align: left; }
.wiki-content .wikilink { border-bottom: 1px dotted var(--accent-2); }
.wiki-content .wikilink.is-missing {
  color: var(--danger-text);
  border-bottom: 1px dashed var(--danger);
  text-decoration: none;
}
.wiki-content .wikilink.is-missing:hover { color: var(--danger); }
.wiki-content .footnote-ref { font-size: 0.75em; vertical-align: super; }
/* Block decorations written by the editor toolbar: alignment, size, typeface.
   They live as classes because the CSP refuses inline styles. */
.wiki-content .al-center { text-align: center; }
.wiki-content .al-right { text-align: right; }
.wiki-content .al-justify { text-align: justify; }
.wiki-content .sz-sm { font-size: 0.88em; }
.wiki-content .sz-lg { font-size: 1.18em; }
.wiki-content .sz-xl { font-size: 1.45em; }
.wiki-content .ff-serif { font-family: Georgia, "Times New Roman", serif; }
.wiki-content .ff-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wiki-content .ff-script { font-family: "Segoe Script", "Brush Script MT", "Apple Chancery", cursive; }

.wiki-toc { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; font-size: 0.88rem; }
.wiki-toc a { color: var(--muted); }
.wiki-toc a:hover { color: var(--text); text-decoration: none; }
.wiki-backlinks { margin-top: 1.2rem; font-size: 0.9rem; }
.wiki-backlinks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.wiki-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 1040px) { .wiki-editor { grid-template-columns: 1fr; } }
.wiki-editor-main { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.wiki-editor-side { position: sticky; top: 1rem; }
.input-title { font-size: 1.3rem; font-weight: 650; }

.ed-toolbar { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }
.ed-tool {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 30px; padding: 0 0.45rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); cursor: pointer; font-size: 0.85rem;
}
.ed-tool:hover { border-color: var(--accent); }
.ed-tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-upload { cursor: pointer; }

.segmented { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 2px; }
.seg {
  border: 0; background: none; color: var(--muted); padding: 0.3rem 0.7rem;
  border-radius: 8px; cursor: pointer; font-size: 0.85rem;
}
.seg.is-active { background: var(--accent-soft); color: var(--text); }

.ed-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; min-height: 52vh; }
@media (max-width: 820px) { .ed-body { grid-template-columns: 1fr; } }
.ed-textarea, .ed-wysiwyg {
  width: 100%; min-height: 52vh; padding: 0.9rem;
  background: var(--bg-soft); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem; line-height: 1.6; resize: vertical;
}
.ed-textarea:focus, .ed-wysiwyg:focus { outline: 2px solid rgba(139, 92, 246, 0.55); outline-offset: 1px; }
.ed-preview { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 0.9rem; overflow: auto; min-height: 52vh; }
.ed-wysiwyg { font-family: var(--font); max-width: none; overflow: auto; }

.ai-panel { padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.ai-panel h2 { font-size: 1rem; }
.ai-jobs { display: flex; flex-direction: column; gap: 0.5rem; }
.ai-job { background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.6rem; }
.ai-job.is-done { border-color: var(--ok); }
.ai-job.is-error { border-color: var(--danger); }
.ai-job-bar { height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.ai-job-bar span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }
.ai-review { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; }
.ai-finding { padding: 0.3rem 0.5rem; border-radius: 8px; background: var(--surface-2); }
.ai-finding.high { background: var(--danger-surface); color: var(--danger-text); }
.ai-finding.medium { background: var(--warn-surface); color: var(--warn-text); }

.wiki-graph-panel, .wiki-canvas-panel { padding: 1rem; overflow: auto; }
.wiki-graph { width: 100%; height: auto; max-height: 74vh; }
.graph-edge { stroke: var(--border); stroke-width: 1.5; }
.graph-node circle { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1.5; }
.graph-node:hover circle { fill: var(--accent); }
.graph-node text { fill: var(--muted); font-size: 11px; }
.graph-node:hover text { fill: var(--text); }

.wiki-canvas { position: relative; margin-top: 0.9rem; min-height: 520px; overflow: auto; background:
  radial-gradient(circle, rgba(148, 163, 196, 0.16) 1px, transparent 1px);
  background-size: 22px 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.canvas-edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.canvas-edges path { stroke: var(--accent); stroke-width: 1.6; fill: none; opacity: 0.55; }
.canvas-node {
  position: absolute; width: 220px; min-height: 96px; padding: 0.6rem 0.7rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); cursor: grab; touch-action: none;
}
.canvas-node:active { cursor: grabbing; }
.canvas-node strong { display: block; font-size: 0.9rem; }
.canvas-node p { margin: 0.25rem 0 0; }
.canvas-node-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 0.4rem; font-size: 0.78rem; }
.canvas-remove { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; }
.canvas-remove:hover { color: var(--danger); }

.chat-shell { display: flex; flex-direction: column; gap: 0.8rem; padding: 1rem; }
.chat-log { display: flex; flex-direction: column; gap: 0.7rem; max-height: 60vh; overflow: auto; }
.chat-message { padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); max-width: 80ch; }
.chat-message p { margin: 0 0 0.4em; }
.chat-message.is-user { align-self: flex-end; background: var(--accent-soft); }
.chat-message.is-assistant { background: var(--bg-soft); border: 1px solid var(--border); }
.chat-message.is-thinking p { color: var(--muted); font-style: italic; }
.chat-form { display: flex; gap: 0.5rem; }
.chat-form .input { flex: 1; }
.chat-sources { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; }
.chat-sources li { margin-bottom: 0.2rem; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 1.5rem 0 2.5rem;
}
@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; } }
.about-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.5rem; }
.about-hero .lead { font-size: 1.05rem; color: var(--muted); max-width: 58ch; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--accent-2); margin-bottom: 0.6rem; }
.about-hero-figure { margin: 0; }
.about-hero-figure img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); }

.about-features, .about-shots, .about-steps { padding: 1.6rem 0; }
.about-grid {
  display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1180px;
}
@media (max-width: 980px) { .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .about-grid { grid-template-columns: 1fr; } }
.about-card { padding: 1.1rem; }
.about-card h3 { margin: 0.5rem 0 0.35rem; }
.about-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.about-icon { font-size: 1.2rem; color: var(--accent); }

.about-shot-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.about-shot { margin: 0; padding: 0.5rem; }
.about-shot img { width: 100%; height: auto; border-radius: var(--radius-sm); display: block; }
.about-shot figcaption { font-size: 0.82rem; color: var(--muted); padding: 0.5rem 0.2rem 0; }

.about-step-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; padding: 0; margin: 0; counter-reset: step; }
.about-step-list li { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.about-step-list strong { display: block; margin-bottom: 0.3rem; }
.about-step-list p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.about-cta { margin: 1.5rem 0 2rem; padding: 1.6rem; text-align: center; }
.about-cta p { color: var(--muted); max-width: 62ch; margin: 0.2rem auto 1rem; }
.about-cta .row-wrap { justify-content: center; }

/* --------------------------------------------------------------------------
   Wiki editor: one full-width surface, three modes
   -------------------------------------------------------------------------- */

.ed-shell { display: flex; flex-direction: column; gap: 0.55rem; }

.ed-bar { display: flex; align-items: center; gap: 0.7rem; }
.ed-back {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: 1.05rem;
}
.ed-back:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.ed-titles { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ed-title {
  font-size: clamp(1.2rem, 1.6vw, 1.55rem); font-weight: 650;
  border: 0; background: none; padding: 0.1rem 0.15rem;
}
.ed-title:focus { outline: none; border-bottom: 2px solid var(--accent); }
.ed-tags {
  border: 0; background: none; font-size: 0.82rem; color: var(--muted);
  /* 2.5.8: a control has to offer a 24 x 24 target, however small it looks. */
  padding: 0.28rem 0.35rem; min-height: 24px; min-width: 24px;
}
.ed-tags:focus { outline: none; color: var(--text); }
.ed-bar-actions { display: flex; align-items: center; gap: 0.45rem; flex: none; }

.ed-modebar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 0.45rem 0;
  /* Long pages scroll: the tools must stay reachable while the author writes
     further down, so the bar sticks instead of leaving the viewport. */
  position: sticky; top: 0; z-index: 8; background: var(--surface);
}
.ed-align { display: inline-flex; align-items: center; gap: 0.1rem; }
.ed-tools { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.ed-count { white-space: nowrap; }

.ed-surface { display: flex; }
.ed-surface > * { flex: 1; width: 100%; }
.ed-textarea, .ed-wysiwyg, .ed-preview {
  min-height: calc(100vh - 330px); padding: 1.4rem 1.6rem;
  max-height: calc(100vh - 240px);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: auto;
}
.ed-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92rem; line-height: 1.65; resize: vertical; }
/* The reader column is 74ch; the editor preview must use the whole surface. */
.ed-preview.wiki-content, .ed-wysiwyg { max-width: none; }
.ed-preview { border-style: dashed; }
.ed-wysiwyg { font-family: var(--font); padding: 1.6rem 2.4rem; }
.ed-wysiwyg:focus, .ed-textarea:focus { outline: 2px solid rgba(139, 92, 246, 0.5); outline-offset: -1px; }
.ed-wysiwyg .wiki-content { max-width: none; }

.ed-ai { padding: 0.4rem 1rem 0.9rem; }
.ed-ai > summary {
  cursor: pointer; display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.55rem 0; font-weight: 600; list-style: none;
}
.ed-ai > summary::-webkit-details-marker { display: none; }
.ed-ai > summary::before { content: "▸"; color: var(--accent); font-size: 0.8rem; }
.ed-ai[open] > summary::before { content: "▾"; }
.ed-ai-body { display: flex; flex-direction: column; gap: 0.7rem; }
.ed-ai-brief textarea {
  min-height: 7.5rem; line-height: 1.55; font-family: var(--font);
  resize: vertical;
}
.ed-ai-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ed-ai-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.ed-ai-reviews { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 0.6rem; }

/* --------------------------------------------------------------------------
   Wiki chat: a ChatGPT-shaped column
   -------------------------------------------------------------------------- */

.gpt-shell {
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: calc(100vh - 190px);
}
.gpt-log { flex: 1; overflow-y: auto; }
.gpt-turn { display: flex; gap: 0.85rem; max-width: 800px; margin: 0 auto; padding: 0.9rem 0.4rem; }
.gpt-turn.is-user { justify-content: flex-end; }
.gpt-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 0.78rem;
}
.gpt-body { min-width: 0; line-height: 1.7; }
.gpt-turn.is-user .gpt-body { max-width: 84%; }
.gpt-bubble { background: var(--surface-2); border-radius: 18px; padding: 0.6rem 1rem; }
.gpt-body p { margin: 0 0 0.65em; }
.gpt-body p:last-child { margin-bottom: 0; }
.gpt-empty { max-width: 720px; margin: 7vh auto 0; text-align: center; }
.gpt-empty h1 { font-size: 1.7rem; margin-bottom: 0.3rem; }
.gpt-suggestions {
  display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 1.3rem 0 1rem; text-align: left;
}
.gpt-suggestion {
  /* A lone "?" on a second line reads like a layout bug. */
  text-wrap: balance;
  padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); cursor: pointer; font-size: 0.88rem; text-align: left;
}
.gpt-suggestion:hover { border-color: var(--accent); background: var(--surface-2); }
.gpt-composer {
  position: sticky; bottom: 0.6rem; width: 100%; max-width: 800px; margin: 0.4rem auto 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px;
  padding: 0.55rem 0.65rem; box-shadow: var(--shadow);
}
#gpt-input {
  flex: 1; min-height: 2.2rem; max-height: 200px; padding: 0.4rem 0.3rem;
  border: 0; background: none; color: var(--text); font: inherit; line-height: 1.5;
  resize: none; outline: none;
}
.gpt-send {
  width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%;
  background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.gpt-send:disabled { opacity: 0.45; cursor: default; }
.gpt-hint { width: 100%; text-align: center; margin: 0; }
.gpt-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.7rem; }
.gpt-sources-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.gpt-source {
  display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem;
  border: 1px solid var(--border); border-radius: 999px; padding: 0.12rem 0.55rem;
}
.gpt-source:hover { text-decoration: none; border-color: var(--accent); }
.gpt-source-head { color: var(--muted); }
.gpt-source-head::before { content: "· "; }
.gpt-source-num {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-soft); font-size: 0.68rem;
}
.gpt-dots { display: inline-flex; gap: 4px; padding: 0.35rem 0; }
.gpt-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: gpt-blink 1.1s infinite ease-in-out;
}
.gpt-dots i:nth-child(2) { animation-delay: 0.15s; }
.gpt-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes gpt-blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .gpt-dots i { animation: none; opacity: 0.6; }
}
@media (max-width: 760px) {
  .ed-wysiwyg { padding: 1.1rem; }
  .ed-bar { flex-wrap: wrap; }
  .ed-bar-actions { width: 100%; justify-content: flex-end; }
  .gpt-turn { padding: 0.7rem 0.2rem; }
}

/* --------------------------------------------------------------------------
   Wiki diff: two panes, additions on the right, removals on the left
   -------------------------------------------------------------------------- */

.diff-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.diff-tally { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 0.6rem; }
.diff-tally-add { color: var(--ok); }
.diff-tally-del { color: var(--danger); }

#wiki-diff { scroll-margin-top: 5.5rem; }
.diff-panes {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.diff-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; }
.diff-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--muted);
  font-size: 0.78rem; font-weight: 600; text-align: left;
  padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--border);
}
.diff-table thead th + th { border-left: 1px solid var(--border); }
.diff-cell {
  vertical-align: top;
  padding: 0.15rem 0.5rem 0.15rem 0;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(36, 48, 77, 0.35);
}
.diff-cell + .diff-cell { border-left: 1px solid var(--border); }
.diff-no {
  display: inline-block; width: 3ch; margin-right: 0.5rem;
  text-align: right; color: var(--diff-gutter); font-size: 0.75rem;
  user-select: none;
}
.diff-sign { display: inline-block; width: 1ch; margin-right: 0.35rem; font-weight: 700; color: var(--muted); user-select: none; }
.diff-cell.is-add .diff-sign { color: var(--ok); }
.diff-cell.is-del .diff-sign { color: var(--danger); }
.diff-ver { font-weight: 700; color: var(--text); margin-right: 0.45rem; }
.diff-vtitle { font-weight: 400; opacity: 0.8; }
.wiki-import-hint { flex-basis: 100%; order: 3; text-align: right; margin: 0.45rem 0 0; }
.diff-legend { display: inline-flex; gap: 0.7rem; align-items: center; font-size: 0.78rem; color: var(--muted); }
.diff-legend span::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }
.diff-legend .is-add::before { background: var(--diff-add-strong); }
.diff-legend .is-del::before { background: var(--diff-del-strong); }
.diff-text { white-space: pre-wrap; }
.diff-cell.is-del { background: var(--diff-del-bg); }
.diff-cell.is-add { background: var(--diff-add-bg); }
.diff-cell.is-blank { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(127, 139, 171, 0.08) 6px, rgba(127, 139, 171, 0.08) 12px); }
.diff-seg-chg { border-radius: 3px; padding: 0 1px; }
.diff-table .diff-seg-chg:first-child { margin-left: 0; }
.diff-cell.is-del .diff-seg-chg { background: var(--diff-del-strong); }
.diff-cell.is-add .diff-seg-chg { background: var(--diff-add-strong); }
.diff-hunk td {
  background: var(--surface-2); color: var(--muted);
  font-size: 0.75rem; padding: 0.25rem 0.7rem; border-bottom: 1px solid var(--border);
}
@media (max-width: 700px) {
  .diff-table { font-size: 0.76rem; }
  .diff-no { display: none; }
}

/* A <label> that behaves like a file-picker button. */
.btn-import { cursor: pointer; }
.btn-import:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------------------------- */
/* Wiki: menu tree, active page, live editing, references                    */
/* ------------------------------------------------------------------------- */

/* The menu is a tree: depth has to be readable at a glance. */
.wiki-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wiki-nav-item { --indent: 0rem; padding-left: var(--indent); position: relative; }
.wiki-nav-item[hidden] { display: none; }
.wiki-nav-item.depth-1 { --indent: 0.9rem; }
.wiki-nav-item.depth-2 { --indent: 1.8rem; }
.wiki-nav-item.depth-3 { --indent: 2.7rem; }
.wiki-nav-item.depth-4 { --indent: 3.6rem; }
.wiki-nav-item.depth-5 { --indent: 4.5rem; }
.wiki-nav-item.is-child::before {
  content: ""; position: absolute; left: calc(var(--indent) - 0.5rem); top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.wiki-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  border-left: 3px solid transparent; padding-left: 0.45rem;
}
.wiki-nav-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiki-nav-version { flex: none; opacity: 0.7; }
.wiki-nav-item.is-ancestor > .wiki-nav-link { color: var(--text); font-weight: 600; }
.wiki-nav-item.is-active > .wiki-nav-link,
.wiki-nav a.is-active {
  background: var(--accent-soft); border-left-color: var(--accent);
  color: var(--text); font-weight: 700;
}
.wiki-nav-item.is-active > .wiki-nav-link .wiki-nav-title { color: var(--accent); }
.wiki-nav-item.is-active > .wiki-nav-link .wiki-nav-version { opacity: 1; color: var(--accent); }

.wiki-breadcrumb {
  display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--muted); margin-bottom: 0.2rem;
}
.wiki-breadcrumb a { color: var(--muted); }
.wiki-breadcrumb a:hover { color: var(--text); }
.wiki-crumb-sep { opacity: 0.5; }
.wiki-crumb-current { color: var(--text); font-weight: 600; }

.wiki-sources-title { margin-top: 0.9rem; }
.wiki-sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.wiki-sources li { display: flex; gap: 0.35rem; align-items: baseline; flex-wrap: wrap; }
.wiki-sources a { overflow-wrap: anywhere; }
.wiki-sources-all { margin-top: 0.5rem; font-size: 0.8rem; }
.wiki-source-form { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; }
.wiki-source-form[hidden] { display: none; }
.wiki-source-add { margin-top: 0.45rem; align-self: flex-start; font-size: 0.78rem; }

.wiki-missing {
  margin-top: 1.4rem; padding: 0.9rem 1rem; border-radius: var(--radius);
  border: 1px dashed var(--border); background: var(--surface-2);
}
.wiki-missing h2 { font-size: 0.95rem; }
.wiki-missing ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.wiki-missing li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.wiki-missing-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--warn-text); background: var(--warn-surface); padding: 0.1rem 0.35rem; border-radius: 6px; }

.pill.ok { background: var(--ok-soft); color: var(--ok-text); }
.pill.warn { background: var(--warn-surface); color: var(--warn-text); }

/* Menu structure editor */
.tree-card { padding: 1rem 1.1rem; }
.tree-tip { margin-bottom: 0.7rem; }
.tree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.tree-item {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.55rem 0.4rem calc(0.55rem + var(--depth, 0) * 1.4rem);
  border: 1px solid transparent; border-radius: 9px; background: var(--surface-2);
  cursor: grab; user-select: none;
}
.tree-item:hover { border-color: var(--border); }
.tree-item.is-dragging { opacity: 0.4; }
.tree-item[data-depth="1"] { box-shadow: inset 2px 0 0 var(--border); }
.tree-item[data-depth="2"], .tree-item[data-depth="3"], .tree-item[data-depth="4"], .tree-item[data-depth="5"] { box-shadow: inset 2px 0 0 var(--border); }
.tree-depth[hidden] { display: none; }
.tree-item:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree-grip { color: var(--muted); letter-spacing: -2px; font-size: 0.95rem; }
.tree-title { flex: 1; min-width: 0; color: var(--text); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-depth { flex: none; font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 0 0.3rem; }
.tree-actions { display: flex; gap: 0.1rem; flex: none; opacity: 0.5; }
.tree-item:hover .tree-actions, .tree-item:focus-within .tree-actions { opacity: 1; }
.tree-item.is-drop-before { box-shadow: inset 0 3px 0 var(--accent); }
.tree-item.is-drop-after { box-shadow: inset 0 -3px 0 var(--accent); }
.tree-item.is-drop-into { border-color: var(--accent); background: var(--accent-soft); }

/* References index */
.ref-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ref-block { padding: 1rem 1.2rem; margin-bottom: 1rem; }
.ref-block h2 { font-size: 1rem; margin-bottom: 0.5rem; }
.ref-sources, .ref-internal, .ref-missing, .ref-orphans {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem;
}
.ref-host-name { font-weight: 650; }
.ref-host ul { list-style: none; margin: 0.3rem 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ref-host ul a, .ref-sources a { overflow-wrap: anywhere; }
.ref-internal li, .ref-missing li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ref-missing-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; color: var(--warn-text); background: var(--warn-surface); padding: 0.1rem 0.35rem; border-radius: 6px; }

/* Live co-editing: presence chips, remote carets, drop zone */
.ed-live { display: flex; align-items: center; gap: 0.45rem; }
.ed-live[hidden] { display: none; }
.ed-live-status { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.ed-live-status.is-offline { opacity: 0.55; }
.ed-live-people { display: flex; gap: 0.2rem; }
.ed-person {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  color: #fff; font-size: 0.62rem; font-weight: 700; border: 2px solid var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.ed-surface { position: relative; }
.ed-carets { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.ed-caret { position: absolute; width: 2px; border-radius: 1px; transition: top 60ms linear, left 60ms linear; }
.ed-caret-label {
  position: absolute; bottom: 100%; left: -1px; padding: 0 0.3rem; border-radius: 4px;
  color: #fff; font-size: 0.62rem; font-weight: 700; line-height: 1.35; white-space: nowrap;
}
.ed-draft-offer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface-2, var(--surface));
  font-size: 0.9rem;
}

.ed-drop {
  position: absolute; inset: 0.6rem; z-index: 6; display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: var(--accent-soft); color: var(--text); font-weight: 650;
  pointer-events: none; text-align: center; padding: 1rem;
}
.ed-drop[hidden] { display: none; }


/* ------------------------------------------------------------------------- */
/* LOT 6: deletion, templates, image sizing, link picker, reviews            */
/* ------------------------------------------------------------------------- */

.ed-reviews { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.ed-reviews .btn { white-space: nowrap; }

.ed-review-strip {
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  white-space: pre-wrap;
  font-size: 0.92rem;
}
.ed-review-strip[hidden] { display: none; }
.ed-review-strip.is-error { border-color: var(--danger); color: var(--danger-text); background: var(--danger-surface); }

/* A settled AI job keeps a line of text and a way to clear it; the progress
   bar belongs to the run, not to the result. */
.ai-job { position: relative; }
.ai-job.is-error p { color: var(--danger-text); }
.ai-job-bar span.is-error { background: var(--danger); }
.ai-job-close {
  position: absolute; top: 0.2rem; right: 0.3rem;
  width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
  border: 0; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--muted); font-size: 1.05rem;
}
.ai-job-close:hover { background: var(--surface-2); color: var(--text); }

.ed-template-bar {
  display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.5rem 0.7rem;
}
.ed-template-bar[hidden] { display: none; }

.field-inline { display: flex; gap: 0.5rem; align-items: center; }
.field-inline > span { font-size: 0.85rem; color: var(--muted); }

/* Image sizing: a small floating strip over the selected picture. */
.ed-img-tools {
  position: absolute; z-index: 6;
  display: flex; gap: 0.3rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.25rem 0.4rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.ed-img-tools[hidden] { display: none; }
.ed-img-tools .btn { padding: 0.1rem 0.4rem; font-size: 0.78rem; }
.ed-img-grip {
  width: 12px; height: 18px; cursor: ew-resize; border-radius: 3px;
  background: linear-gradient(90deg, transparent 30%, var(--accent) 30%, var(--accent) 45%, transparent 45%, transparent 55%, var(--accent) 55%, var(--accent) 70%, transparent 70%);
}
#wiki-wysiwyg img.is-selected { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Link picker: search a page instead of remembering its title. */
.ed-link-picker {
  position: absolute; z-index: 7; left: 1rem; right: 1rem; top: 3.2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  padding: 0.6rem;
}
.ed-link-picker[hidden] { display: none; }
.ed-link-search { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; }
.ed-link-search .input { flex: 1; min-width: 12rem; }
.ed-link-results { list-style: none; margin: 0; padding: 0; max-height: 18rem; overflow: auto; }
.ed-link-hit {
  display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius-sm);
  padding: 0.45rem 0.5rem; color: var(--text); cursor: pointer;
}
.ed-link-hit:hover, .ed-link-hit:focus-visible { background: var(--accent-soft); }
.ed-link-title { font-weight: 600; }
.ed-link-empty { padding: 0.5rem; }

/* Whole-wiki generation now lives on the wiki page, not on a draft. */
.wiki-ai-panel { margin-bottom: 1rem; display: grid; gap: 0.6rem; }
.wiki-ai-panel[hidden] { display: none; }
.wiki-ai-panel h2 { margin: 0; font-size: 1.1rem; }
.wiki-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; }
#wiki-ai-panel .check { display: flex; gap: 0.5rem; align-items: center; }

/* Templates */
.wiki-template-list { display: grid; gap: 0.8rem; margin-bottom: 1rem; }
.wiki-template { padding: 0.9rem 1rem; }
.wiki-template-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.wiki-template-head h2 { margin: 0 0 0.2rem; font-size: 1rem; }
.wiki-template-keywords { display: flex; gap: 0.3rem; flex-wrap: wrap; margin: 0.4rem 0; }
.wiki-template-body {
  margin: 0.5rem 0 0; padding: 0.6rem; max-height: 9rem; overflow: auto;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 0.78rem; white-space: pre-wrap;
}
.wiki-template-editor { display: grid; gap: 0.6rem; }
.wiki-template-editor[hidden] { display: none; }
.wiki-template-preview {
  border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 0.7rem; max-height: 20rem; overflow: auto;
}
.wiki-template-preview:empty { display: none; }

/* --------------------------------------------------------------------------
   LOT 7 — rich formatting, AI accents, questionnaire tabs, wiki side foot
   -------------------------------------------------------------------------- */

/* Paragraph style and formatting tools */
.ed-block {
  height: 32px;
  padding: 0 .4rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: .82rem;
  max-width: 8.5rem;
}
.ed-sep { width: 1px; height: 20px; background: var(--border); display: inline-block; }

/* Text colour: a popover of swatches, plus a picker for anything else */
.ed-colors { position: relative; display: inline-flex; }
.ed-color-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1.6rem);
  gap: .3rem;
  padding: .5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ed-color-menu[hidden] { display: none; }
/* The table menu sits under its own button, as a short list rather than a grid:
   three sentences, one of which the author came for. */
.ed-table { position: relative; display: inline-flex; align-items: center; }
.ed-table-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  padding: .35rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ed-table-menu[hidden] { display: none; }
.ed-table-menu button {
  padding: .4rem .55rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: .85rem;
  text-align: start;
  cursor: pointer;
}
.ed-table-menu button:hover, .ed-table-menu button:focus-visible { background: var(--surface-2); }
.ed-swatch {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.ed-swatch:hover { border-color: currentColor; }
.ed-swatch-picker { position: relative; display: grid; place-items: center; }
.ed-swatch-picker input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.ed-swatch-reset { color: var(--muted); }

/* The palette itself: one class per colour, so a page never carries a style
   attribute (the CSP forbids them). */
.c-red { color: #ff7b72; }
.c-orange { color: #ffa657; }
.c-amber { color: #f2cc60; }
.c-green { color: #7ee787; }
.c-teal { color: #56d4c0; }
.c-blue { color: #79c0ff; }
.c-violet { color: #c297ff; }
.c-pink { color: #ff9ecd; }
.c-muted { color: var(--muted); }
.ed-swatch.c-red { color: #ff7b72; }
.ed-swatch.c-orange { color: #ffa657; }
.ed-swatch.c-amber { color: #f2cc60; }
.ed-swatch.c-green { color: #7ee787; }
.ed-swatch.c-teal { color: #56d4c0; }
.ed-swatch.c-blue { color: #79c0ff; }
.ed-swatch.c-violet { color: #c297ff; }
.ed-swatch.c-pink { color: #ff9ecd; }
[data-theme="light"] .c-red { color: #b42318; }
[data-theme="light"] .c-orange { color: #b54708; }
[data-theme="light"] .c-amber { color: #8a6100; }
[data-theme="light"] .c-green { color: #067647; }
[data-theme="light"] .c-teal { color: #0e7490; }
[data-theme="light"] .c-blue { color: #1d4ed8; }
[data-theme="light"] .c-violet { color: #6d28d9; }
[data-theme="light"] .c-pink { color: #be185d; }
[data-theme="light"] .ed-swatch.c-red { color: #b42318; }
[data-theme="light"] .ed-swatch.c-orange { color: #b54708; }
[data-theme="light"] .ed-swatch.c-amber { color: #8a6100; }
[data-theme="light"] .ed-swatch.c-green { color: #067647; }
[data-theme="light"] .ed-swatch.c-teal { color: #0e7490; }
[data-theme="light"] .ed-swatch.c-blue { color: #1d4ed8; }
[data-theme="light"] .ed-swatch.c-violet { color: #6d28d9; }
[data-theme="light"] .ed-swatch.c-pink { color: #be185d; }

/* AI accents: one place that says "this is generated", never mixed with plain
   buttons. */
.btn-ai {
  border: 1px solid rgba(139, 92, 246, 0.45);
  background: var(--accent-soft);
  color: var(--text);
}
.btn-ai:hover { border-color: var(--accent); }
[data-theme="light"] .btn-ai { background: rgba(109, 40, 217, 0.08); }

.ed-reviews {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .2rem .35rem .2rem .45rem;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 12px;
  background: var(--accent-soft);
}
.ed-reviews-label {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06rem;
  color: var(--accent-2);
  font-weight: 700;
}

/* Wiki side column: the AI and delete actions sit apart from the navigation */
.wiki-side-foot {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .6rem;
  padding-top: .7rem;
  border-top: 1px solid var(--border);
}
.wiki-side-foot .btn { justify-content: center; }

/* Generating pages is not editing the page on screen */
.wiki-main.is-generating > :not(#wiki-ai-panel) { display: none; }
.wiki-main.is-generating #wiki-ai-panel { margin: 0; }

/* Questionnaire tabs reuse the pill tab bar of the app */
a.tab { text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
a.tab .tab-count { font-size: .72rem; opacity: .8; }

.ai-zone {
  padding: .4rem;
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 12px;
  background: var(--accent-soft);
}
[data-theme="light"] .ai-zone { background: rgba(109, 40, 217, 0.07); }

/* --------------------------------------------------------------------------
   Landing page (/about, the default page)
   -------------------------------------------------------------------------- */

.landing { display: block; position: relative; overflow-x: clip; }
.landing > section, .landing > .ld-scenes { padding-inline: clamp(1rem, 3vw, 2.5rem); }

.ld-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.ld-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.ld-hero {
  position: relative;
  /* The glow must reach the edges of the window: clipping it to this column
     left two pastel seams down the sides of the page. Only the document
     clips horizontal overflow now. */
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  min-height: min(88vh, 900px);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5rem);
  max-width: 1240px;
  margin-inline: auto;
}
/* Fixed to the window rather than to the hero: the glow used to end with the
   section and leave a visible step where the next block began. */
.ld-aurora {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 0; pointer-events: none; filter: blur(70px); opacity: .55;
  overflow: hidden;
}
.ld-aurora span { position: absolute; display: block; border-radius: 50%; }
.ld-aurora span:nth-child(1) { width: 42vw; height: 42vw; left: -4%; top: 4%; background: radial-gradient(circle at 30% 30%, rgba(139,92,246,.55), transparent 62%); animation: ld-drift 18s ease-in-out infinite; }
.ld-aurora span:nth-child(2) { width: 34vw; height: 34vw; right: 2%; top: 18%; background: radial-gradient(circle at 60% 40%, rgba(34,211,238,.38), transparent 64%); animation: ld-drift 22s ease-in-out infinite reverse; }
.ld-aurora span:nth-child(3) { width: 26vw; height: 26vw; left: 38%; bottom: -6%; background: radial-gradient(circle at 50% 50%, rgba(236,72,153,.28), transparent 66%); animation: ld-drift 26s ease-in-out infinite; }
@keyframes ld-drift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2.5%, -3%, 0) scale(1.08); }
}
.ld-hero-text, .ld-hero-art { position: relative; z-index: 1; }
.ld-eyebrow {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: .9rem; font-weight: 600;
}
.ld-hero h1,
.ld-hero .ld-hero-title {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin-bottom: 1.1rem;
  background: linear-gradient(120deg, var(--text) 30%, var(--accent) 78%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ld-lead { font-size: clamp(1rem, 1.24vw, 1.12rem); color: var(--muted); max-width: 48ch; line-height: 1.6; }
.ld-hero-points { list-style: none; padding: 0; margin: 1.4rem 0 .6rem; display: grid; gap: .45rem; font-size: .92rem; }
.ld-hero-points span { color: var(--accent-2); margin-right: .45rem; }
.ld-scroll-hint {
  position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0;
  width: 26px; height: 40px; border: 1px solid var(--border); border-radius: 14px;
  display: grid; place-items: start center; padding-top: 7px; z-index: 1;
}
.ld-scroll-hint span { width: 4px; height: 8px; border-radius: 2px; background: var(--accent-2); animation: ld-drop 1.8s ease-in-out infinite; }
@keyframes ld-drop { 0%,100% { opacity:.3; transform: translateY(0); } 50% { opacity:1; transform: translateY(9px); } }

/* App mocks ---------------------------------------------------------------- */
.ld-window {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow);
  transform: perspective(1400px) rotateY(-6deg) rotateX(3deg);
  transition: transform .5s ease;
}
.ld-hero-art .ld-window { animation: ld-float 7s ease-in-out infinite; }
@keyframes ld-float { 0%,100% { transform: perspective(1400px) rotateY(-6deg) rotateX(3deg) translateY(0); } 50% { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-10px); } }
.ld-window-bar { display: flex; align-items: center; gap: .3rem; padding: .55rem .7rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.ld-window-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.ld-window-bar em { margin-left: auto; font-style: normal; font-size: .7rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.ld-window-body { padding: 1rem; }
.ld-mock-question { font-weight: 600; font-size: .95rem; margin-bottom: .8rem; }
.ld-bars { display: grid; gap: .45rem; }
.ld-bar { display: grid; grid-template-columns: 1.1rem minmax(0,1fr) 2.6rem; align-items: center; gap: .5rem; }
.ld-bar-label { font-size: .72rem; color: var(--muted); }
.ld-bar i { display: block; height: 14px; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.ld-bar b { font-size: .72rem; color: var(--muted); font-weight: 600; text-align: right; }
.ld-mock-foot { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .75rem; color: var(--muted); }
.ld-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }

.ld-formats { display: grid; grid-template-columns: 1.1fr .9fr; gap: .8rem; }
.ld-format { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: .8rem; box-shadow: var(--shadow); }
.ld-format-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2); }
.ld-format-swipe { grid-row: span 2; display: flex; flex-direction: column; gap: .6rem; }
.ld-swipe-card { border: 1px solid var(--border); border-radius: 12px; padding: .9rem; background: var(--surface-2); transform: rotate(-2.5deg); font-size: .85rem; }
.ld-swipe-actions { display: flex; justify-content: space-between; margin-top: .7rem; color: var(--muted); }
.ld-swipe-actions span:last-child { color: var(--ok); }
.ld-story { width: 100%; height: auto; color: var(--accent); }
.ld-story rect { fill: var(--surface-2); stroke: var(--border); }
.ld-poll div { display: flex; align-items: center; gap: .4rem; margin-top: .45rem; font-size: .7rem; color: var(--muted); }
.ld-poll i { display: block; height: 10px; width: 0; border-radius: 3px; background: var(--accent-2); transition: width 1.1s ease .2s; }

.ld-wiki-body { display: grid; grid-template-columns: 68px minmax(0,1fr); gap: .9rem; }
.ld-wiki-nav { display: grid; gap: .38rem; align-content: start; }
.ld-wiki-nav span { height: 8px; border-radius: 4px; background: var(--surface-2); }
.ld-wiki-nav .is-sub { width: 72%; margin-left: 12px; opacity: .7; }
.ld-wiki-nav .is-on { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.ld-wiki-doc h4, .ld-wiki-doc h5 { height: 10px; border-radius: 4px; background: var(--text); opacity: .35; margin: .2rem 0 .6rem; }
.ld-wiki-doc h4 { width: 62%; }
.ld-wiki-doc h5 { width: 42%; opacity: .25; }
.ld-wiki-doc p { height: 7px; border-radius: 4px; background: var(--border); margin-bottom: .45rem; }
.ld-wiki-doc p.short { width: 70%; }
.ld-diff { display: grid; gap: .3rem; margin-top: .7rem; font-size: .68rem; }
.ld-diff .add, .ld-diff .del { padding: .25rem .45rem; border-radius: 6px; }
.ld-diff .add { background: var(--diff-add-bg); color: var(--ok-text); }
.ld-diff .del { background: var(--diff-del-bg); color: var(--danger-text); }

.ld-collab-body p { height: 8px; border-radius: 4px; background: var(--border); margin-bottom: .55rem; position: relative; }
.ld-collab-body p.short { width: 62%; }
.ld-caret { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--accent); animation: ld-blink 1.6s steps(2) infinite; }
.ld-caret::after { content: ""; position: absolute; top: -12px; left: -10px; width: 22px; height: 9px; border-radius: 4px; background: currentColor; opacity: .55; }
.ld-caret.c-one { left: 38%; }
.ld-caret.c-two { left: 66%; background: var(--accent-2); animation-delay: .4s; }
@keyframes ld-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.ld-avatars { display: flex; gap: -.4rem; margin-top: .8rem; }
.ld-avatars span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .62rem; font-weight: 700; border: 2px solid var(--surface); margin-right: -.4rem; }
.ld-avatars .a { background: var(--accent-soft); color: var(--accent-2); }
.ld-avatars .b { background: var(--ok-soft); color: var(--ok-text); }
.ld-avatars .c { background: var(--warn-surface); color: var(--warn-text); }

/* The opening window: a wiki being written, then the quiz it feeds. Both panels
   share one fixed-height box, so alternating never moves the page. */
.ld-studio-stage { position: relative; padding: 1rem; min-height: 344px; }
.ld-studio-tabs { display: flex; align-items: center; gap: .3rem; padding: .4rem .6rem; border-bottom: 1px solid var(--border); }
.ld-studio-tab {
  border: 1px solid transparent; background: none; color: var(--muted); font: inherit;
  font-size: .76rem; font-weight: 600; padding: .26rem .7rem; border-radius: 999px; cursor: pointer;
}
.ld-studio-tab:hover { color: var(--text); }
.ld-studio-tab.is-active {
  color: var(--accent-2); background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.ld-studio-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ld-studio-live { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; color: var(--muted); }
.ld-studio-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.ld-studio-panel {
  position: absolute; inset: 1rem; display: grid; gap: .55rem; align-content: start;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .32s ease, transform .32s ease, visibility .32s;
}
.ld-studio-panel.is-on { opacity: 1; visibility: visible; transform: none; }
.ld-studio-panel[data-studio-panel="wiki"] { grid-template-columns: 54px minmax(0, 1fr) 168px; gap: .85rem; }
.ld-studio-panel[data-studio-panel="quiz"] { align-content: center; gap: .7rem; }
.ld-studio-nav { display: grid; gap: .45rem; align-content: start; }
.ld-studio-nav span { display: block; height: 9px; border-radius: 3px; background: var(--surface-2); }
.ld-studio-nav span.is-on { background: color-mix(in srgb, var(--accent) 45%, var(--surface-2)); }
.ld-studio-nav span.is-sub { margin-left: .5rem; height: 7px; }
.ld-studio-doc { display: grid; gap: .5rem; align-content: start; }
.ld-studio-doc h4 { margin: 0; font-size: .85rem; line-height: 1.25; color: var(--text); letter-spacing: -.01em; }
.ld-studio-doc p { position: relative; margin: 0; font-size: .74rem; line-height: 1.55; color: var(--muted); }
.ld-studio-doc p.ld-studio-typed {
  color: var(--text); padding: .3rem .45rem; border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}
.ld-studio-doc .ld-caret { top: .2rem; height: 13px; }
.ld-studio-doc .ld-caret::after { display: none; }
.ld-caret.c-three { left: 78%; background: var(--ok); animation-delay: .8s; }
.ld-studio-doc .ld-diff { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.ld-studio-doc .ld-diff .add, .ld-studio-doc .ld-diff .del { font-size: .66rem; padding: .16rem .38rem; }
.ld-studio-doc .ld-avatars { margin-top: .15rem; }
.ld-studio-options { display: grid; gap: .4rem; }
.ld-studio-opt {
  display: grid; grid-template-columns: 1.15rem 1fr; align-items: center; gap: .5rem;
  padding: .38rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.ld-studio-opt b { font-size: .68rem; color: var(--muted); font-weight: 700; }
.ld-studio-opt span { font-size: .74rem; color: var(--text); }
.ld-studio-opt.is-picked { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
.ld-studio-opt.is-picked b { color: var(--accent-2); }
.ld-studio-opt.is-picked span { color: var(--accent-2); font-weight: 600; }

/* The AI card: the argument the page has to make without a caption. It sits in
   its own column, so it never covers the paragraph it comments on. */
.ld-studio-ai {
  align-self: start; display: grid; gap: .4rem; padding: .55rem .6rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: 10px; background: var(--accent-soft);
}
.ld-studio-ai-badge { margin: 0; font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-2); }
.ld-studio-ai-text { margin: 0; font-size: .72rem; line-height: 1.4; color: var(--text); }
.ld-studio-ai-actions { display: flex; flex-wrap: wrap; gap: .3rem; }
.ld-studio-ai-actions button {
  font: inherit; font-size: .64rem; padding: .16rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
}
.ld-studio-ai-actions .ld-studio-ai-yes { border-color: transparent; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.ld-studio-ai-actions .ld-studio-ai-no { color: var(--muted); }
.ld-studio-from { margin: 0; font-size: .68rem; color: var(--accent-2); }

/* Advance controls, at the foot of the live screen: out of thumb reach of the
   answer grid, and never the same tap as "submit". */
.host-advance {
  margin-top: 1rem; padding: .8rem .9rem; display: grid; gap: .55rem;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.host-advance-hint { margin: 0; font-size: .86rem; color: var(--muted); }
.host-advance.is-ready .host-advance-hint { color: var(--ok-text); }
.host-advance.is-ready { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.host-advance .row { margin: 0; }

@media (max-width: 860px) {
  .ld-studio-stage { min-height: 408px; }
  .ld-studio-panel[data-studio-panel="wiki"] { grid-template-columns: minmax(0, 1fr); }
  .ld-studio-nav { display: none; }
  .ld-studio-ai { order: 2; }
  .ld-studio-doc p { font-size: .72rem; }
}

.ld-chat { border: 1px solid rgba(139,92,246,.35); border-radius: 16px; padding: 1rem; background: var(--surface); box-shadow: var(--shadow); display: grid; gap: .55rem; }
.ld-chat-head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2); font-weight: 700; }
.ld-bubble { padding: .6rem .75rem; border-radius: 12px; font-size: .84rem; line-height: 1.45; max-width: 92%; }
.ld-bubble.me { background: var(--accent-soft); justify-self: end; }
.ld-bubble.ai { background: var(--surface-2); border: 1px solid var(--border); }
.ld-bubble.short { font-size: .8rem; }
.ld-source { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-2); font-size: .62rem; margin-left: .25rem; vertical-align: middle; }
.ld-typing { display: flex; gap: .25rem; padding: .35rem .2rem; }
.ld-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ld-typing 1.2s ease-in-out infinite; }
.ld-typing span:nth-child(2) { animation-delay: .15s; }
.ld-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ld-typing { 0%,100% { opacity:.25; transform: translateY(0); } 50% { opacity:1; transform: translateY(-3px); } }

.ld-host-body { display: grid; gap: .8rem; }
.ld-terminal { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; background: var(--bg-soft); border-radius: 10px; padding: .7rem .8rem; display: grid; gap: .25rem; }
.ld-terminal b { color: var(--accent-2); }
.ld-terminal .ok { color: var(--ok-text); }
.ld-terminal .cursor { color: var(--accent); animation: ld-blink 1.4s steps(2) infinite; }
.ld-shield { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--muted); }

/* Stats -------------------------------------------------------------------- */
.ld-stats {
  max-width: 1240px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem; padding-block: 2rem;
  border-block: 1px solid var(--border);
}
.ld-stat { text-align: center; display: grid; gap: .25rem; }
.ld-stat strong { font-size: clamp(1.6rem, 2.6vw, 2.2rem); background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-stat span { font-size: .76rem; color: var(--muted); }
.ld-stat-icon { display: grid; place-items: center; margin: 0 auto .15rem; width: 30px; height: 30px; border-radius: 9px; background: var(--surface-2, rgba(127,127,127,.08)); color: var(--accent, #2b5cff); }
.ld-stat-icon svg { width: 16px; height: 16px; }

/* Scenes ------------------------------------------------------------------- */
.ld-scenes { max-width: 1240px; margin-inline: auto; }
.ld-scene {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(1.5rem, 5vw, 4rem); align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
}
/* No divider line between chapters: the glow behind the page is continuous, a
   hairline would cut it in two. Spacing does the separating. */
.ld-scene + .ld-scene { padding-block-start: clamp(4rem, 9vw, 7.5rem); }
.ld-scene-right .ld-scene-text { order: 2; }
.ld-scene-text h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; margin-bottom: .8rem; letter-spacing: -.01em; }
.ld-scene .ld-lead { max-width: 44ch; }
.ld-step { font-size: .74rem; letter-spacing: .2em; color: var(--muted); margin-bottom: .6rem; font-variant-numeric: tabular-nums; }
.ld-points { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .5rem; font-size: .9rem; color: var(--muted); }
.ld-points li { position: relative; padding-left: 1.35rem; }
.ld-points li::before { content: ""; position: absolute; left: 0; top: .45rem; width: .5rem; height: .5rem; border-radius: 50%; border: 2px solid var(--accent); opacity: .8; }
.ld-scene-art > * { transform: translateY(var(--ldy, 0)); }
.ld-scene-right .ld-scene-art > * { transform: translateY(var(--ldy, 0)); }
.ld-scene-art .ld-window { transform: perspective(1400px) rotateY(4deg) rotateX(2deg); }

/* The AI chapter is the only one with a backdrop. It used to bleed 6% past the
   column on each side, which left a visible seam where the gradient was cut and
   pushed the prose against its edge; the panel now ends exactly on the column
   and the text keeps a margin inside it. */
.ld-scene-ai {
  position: relative;
  padding-inline: clamp(1.1rem, 2.4vw, 2rem);
}
.ld-scene-ai::before {
  content: ""; position: absolute; inset: 0; border-radius: 26px;
  background: radial-gradient(ellipse at 22% 18%, rgba(139,92,246,.13), transparent 62%),
              radial-gradient(ellipse at 80% 82%, rgba(34,211,238,.09), transparent 58%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  pointer-events: none;
}
.ld-ai-badge {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2);
  background: var(--accent-soft); border: 1px solid rgba(139,92,246,.4);
  border-radius: 999px; padding: .2rem .6rem; margin-bottom: .7rem;
}
.ld-scene-ai h2 { background: linear-gradient(110deg, var(--text), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Steps and final CTA ----------------------------------------------------- */
.ld-steps { max-width: 1100px; margin-inline: auto; padding-block: clamp(3rem,6vw,5rem); }
.ld-steps h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); text-align: center; margin-bottom: 2rem; }
.ld-step-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.ld-step-list li { border: 1px solid var(--border); border-radius: 16px; padding: 1.2rem; background: var(--surface); }
.ld-step-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-2); font-weight: 700; font-size: .8rem; margin-bottom: .7rem; }
.ld-step-list strong { display: block; margin-bottom: .35rem; }
.ld-step-list p { color: var(--muted); font-size: .86rem; line-height: 1.55; }

.ld-final { max-width: 1000px; margin-inline: auto; padding-block: clamp(3rem,6vw,5.5rem) 4rem; }
.ld-final-inner {
  position: relative; border-radius: 24px; padding: clamp(2rem, 5vw, 3.2rem); text-align: center;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(ellipse at 85% 100%, rgba(34,211,238,.14), transparent 55%),
    var(--surface);
  box-shadow: var(--shadow);
}
.ld-final-actions { justify-content: center; gap: 0.7rem; }
.ld-final-actions .btn { flex: 0 1 auto; }
.ld-final h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: .7rem; }
.ld-final p { color: var(--muted); max-width: 56ch; margin: 0 auto 1.3rem; }

/* Reveal and parallax ----------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.25,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ld-hero-art .ld-window, .ld-aurora span, .ld-caret, .ld-typing span, .ld-scroll-hint span, .ld-terminal .cursor { animation: none; }
  .ld-scene-art > * { transform: none; }
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 980px) {
  .ld-hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-block: 1.8rem 2.4rem; }
  /* Text first: the visitor must meet the problem and the answer on the first
     screen, instead of a mock followed by a headline whose sequel is hidden. */
  .ld-hero-text { order: 0; }
  .ld-hero-art { order: 1; }
  .ld-scroll-hint { display: none; }
  .ld-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ld-scene { grid-template-columns: minmax(0,1fr); }
  .ld-scene-right .ld-scene-text { order: 0; }
  .ld-scene-art .ld-window { transform: none; }
  .ld-step-list { grid-template-columns: minmax(0,1fr); }
}

/* --------------------------------------------------------------------------
   LOT 8 — graph, canvas, tags, wiki/quizzes links
   -------------------------------------------------------------------------- */

.wiki-graph-panel { padding: .8rem; }
.graph-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .5rem; }
.graph-split { display: flex; gap: .8rem; align-items: stretch; }
.graph-stage { position: relative; flex: 1 1 auto; min-width: 0; height: min(66vh, 620px); border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--accent-soft), transparent 60%), var(--bg-soft); }
.graph-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.graph-hint { position: absolute; left: .7rem; bottom: .5rem; pointer-events: none; opacity: .7; }
.graph-pane {
  width: min(420px, 38%);
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: min(66vh, 620px);
  overflow: hidden;
}
.graph-pane-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
.graph-pane-head strong { font-size: .9rem; }
.graph-pane-body { overflow: auto; padding: .7rem; display: flex; flex-direction: column; gap: .6rem; }
.graph-pane-body .wiki-content { font-size: .86rem; }
.graph-pane-meta { display: flex; flex-wrap: wrap; gap: .3rem; }

.tag-chip {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .72rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(139,92,246,.25);
}
.tag-suggestions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.tag-suggestion { cursor: pointer; }
.tag-suggestion:hover { border-color: var(--accent); }

/* Obsidian-style canvas */
.canvas-toolbar { align-items: center; }
.wcanvas-viewport {
  position: relative;
  height: min(70vh, 660px);
  margin-top: .6rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background-color: var(--bg-soft);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  cursor: grab;
  touch-action: none;
}
.wcanvas-board { position: absolute; inset: 0; transform-origin: 0 0; }
.wcanvas-edges { position: absolute; inset: 0; width: 4000px; height: 3000px; pointer-events: none; overflow: visible; }
.wcanvas-edges path { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .55; }
.wcanvas-cards { position: absolute; inset: 0; }
.wcanvas-card {
  position: absolute;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: .55rem .6rem;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  min-height: 92px;
}
.wcanvas-card:hover { border-color: var(--accent); }
.wcanvas-card.is-linking { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.wcanvas-card header { display: flex; align-items: start; justify-content: space-between; gap: .4rem; }
.wcanvas-card header strong { font-size: .84rem; }
.wcanvas-card p { margin: 0; font-size: .74rem; color: var(--muted); line-height: 1.35; }
.wcanvas-card footer { display: flex; justify-content: space-between; align-items: center; gap: .3rem; margin-top: auto; }
.wcanvas-remove { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: .95rem; line-height: 1; }
.wcanvas-remove:hover { color: var(--danger-text); }

/* A wiki's questionnaires */
.wiki-quiz-list { display: grid; gap: .5rem; margin-top: .6rem; }
.wiki-quiz-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.wiki-quiz-row strong { font-size: .88rem; }
.wiki-quiz-actions { display: flex; gap: .35rem; flex-wrap: wrap; }

@media (max-width: 900px) {
  .graph-split { flex-direction: column; }
  .graph-pane { width: 100%; max-height: 420px; }
  .graph-stage { height: 52vh; }
}

/* Editor: title over tags, with the AI tag suggestion beside them. */
.ed-tags-row { display: flex; align-items: center; gap: .4rem; }
.ed-tags-row .ed-tags { flex: 1 1 auto; min-width: 0; }
.ed-tags-row .btn-ai { white-space: nowrap; }

.pager-slot { margin-top: .4rem; }
.pager-num {
  min-width: 32px; height: 30px; padding: 0 .4rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--muted); cursor: pointer;
  font-variant-numeric: tabular-nums; font-size: .82rem;
}
.pager-num:hover { border-color: var(--accent); color: var(--text); }
.pager-num.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }

.wiki-quizzes h2 { font-size: 1.05rem; margin-bottom: .2rem; }
.wiki-quizzes .tag-chip { margin-right: .2rem; }

/* -------------------------------------------------------------------------- */
/* LOT 9 — tabs of the about page, professional chapter, assessment           */
/* -------------------------------------------------------------------------- */

/* The two doors of the page: buttons, not tabs glued under the bar, and placed
   a few centimetres lower so the eye meets them after the header. */
.ld-switch-wrap { display: flex; justify-content: center; padding: 2.6rem 1rem 3.4rem; }
.ld-switch {
  display: flex; gap: 0.35rem; padding: 0.3rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
}

.ld-switch-btn {
  border: 0; background: none; color: var(--muted);
  padding: 0.55rem 1.25rem; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.ld-switch-btn:hover { color: var(--text); }

.ld-switch-btn.is-active {
  color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.pro-hero { padding-top: 28px; }

.pro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 28px auto;
  padding: 0 20px;
}

.pro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
}

.pro-card h2 { font-size: 1.15rem; margin: 10px 0 8px; }
.pro-card p { color: var(--muted); margin: 0 0 12px; }
.pro-card .ld-points { margin: 0; }
.pro-icon { font-size: 1.7rem; }

.pro-free {
  max-width: 900px;
  margin: 34px auto 60px;
  padding: 0 20px;
}

.pro-free-inner {
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--border));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
  border-radius: 20px;
  padding: 26px;
}

.pro-free-inner h2 { margin: 8px 0 10px; }

/* Assessment card on the questionnaire page */

.assess-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
}

.assess-head h2 { margin: 0 0 4px; }

.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--muted);
}

.assess-share { margin: 16px 0; }

.assess-share-box {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}

.assess-share-box .input { min-width: min(420px, 60vw); }

.assess-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.assess-table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.assess-table td { padding: 10px; border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent); }
.assess-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.assess-detail {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--surface-2, var(--surface));
}

.assess-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.assess-detail-head .btn { margin-left: auto; }

.assess-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.assess-answer {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--border) 25%, transparent);
}

.assess-answer.ok { background: color-mix(in oklab, var(--ok, #2f9e60) 14%, transparent); }
.assess-answer.ko { background: color-mix(in oklab, var(--danger, #d64545) 14%, transparent); }
.assess-answer-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.assess-answer-q { margin: 0 0 2px; }
.assess-answer-score { font-variant-numeric: tabular-nums; font-weight: 600; }

.eval-invite { max-width: 760px; margin: 40px auto; padding: 28px; }
.eval-facts { list-style: none; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); }
.eval-facts .warn { color: var(--danger, #d64545); }

@media (max-width: 640px) {
  .assess-share-box { flex-direction: column; align-items: stretch; }
  .assess-table thead { display: none; }
  .assess-table td { display: block; border: 0; padding: 4px 0; }
  .assess-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--border); }
}

/* Embedded questionnaire inside a wiki page: a card that plays in place. */
.wiki-embed { margin: 1.1rem 0; }
.wiki-embed-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 0.9rem 1rem;
}
.wiki-embed-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wiki-embed-title { font-weight: 600; margin: 0; }
.wiki-embed-meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0; flex-wrap: wrap; }
.wiki-embed-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.wiki-embed-body { margin-top: 0.9rem; }
.wiki-embed-body .play-shell { padding: 0; }
.wiki-embed-body .host-shell { padding: 0; }
/* The editor shows the marker as a solid block so it cannot be typed into. */
.ed-wysiwyg .wiki-embed {
  position: relative;
  border: 1px dashed var(--accent); border-radius: var(--radius-sm);
  padding: 0.5rem 2.2rem 0.5rem 0.7rem; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85rem; color: var(--muted); background: var(--surface-2);
}
/* The caret cannot enter the block, so it carries its own way out. */
.wiki-embed-remove {
  position: absolute; top: 0.3rem; right: 0.3rem;
  width: 1.6rem; height: 1.6rem; padding: 0; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--muted);
  font-size: 1rem; cursor: pointer;
}
.wiki-embed-remove:hover,
.wiki-embed-remove:focus-visible { color: var(--danger-text); border-color: var(--danger); }
.ed-embed-menu {
  position: absolute; z-index: 20; margin-top: 0.4rem; min-width: 16rem; max-height: 18rem;
  overflow: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 0.35rem;
}
.ed-embed-title { margin: 0.15rem 0.4rem 0.35rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ed-embed-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; padding: 0.45rem 0.5rem; border: 0; border-radius: 6px;
  background: none; color: var(--text); text-align: left; cursor: pointer; font: inherit;
}
.ed-embed-item:hover, .ed-embed-item:focus-visible { background: var(--surface-2); }

.wiki-capsule { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wiki-capsule h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.wiki-capsule p { margin: 0; max-width: 62ch; }

/* ---------------------------------------------------------------------------
   Revision cards
   A deck is a grid of cards that flip on click. The flip is a 3D transform on
   an inner wrapper: no height animation, so a long back never clips the front.
   ------------------------------------------------------------------------- */
.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.deck-card { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: inherit; }
.deck-card:hover { border-color: var(--accent); }
.deck-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.deck-card-head h2 { margin: 0; font-size: 1.05rem; }
.deck-card-meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; }
.deck-new-form { margin-bottom: 1rem; }

.revision-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.revision-card { perspective: 1200px; cursor: pointer; position: relative; display: flex; flex-direction: column; }
/* Shape comes from the deck: 2:3 portrait by default, like a printed card. */
.revision-card[data-aspect="2:3"] { aspect-ratio: 2 / 3; }
.revision-card[data-aspect="3:4"] { aspect-ratio: 3 / 4; }
.revision-card[data-aspect="1:1"] { aspect-ratio: 1 / 1; }
.revision-card[data-aspect="3:2"] { aspect-ratio: 3 / 2; }
.revision-card[data-aspect="16:9"] { aspect-ratio: 16 / 9; }
.revision-card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.45s ease;
}
.revision-card.flipped .revision-card-inner { transform: rotateY(180deg); }
.revision-card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: auto;
}
.revision-card-back { transform: rotateY(180deg); background: var(--surface-2); }
.revision-card-index {
  position: absolute; top: 0.5rem; right: 0.7rem;
  font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
/* The picture is never cropped: a card that hides the horse's head is useless. */
.revision-card-body { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; height: 100%; min-height: 0; }
.revision-card-body.image-only { justify-content: center; }
.revision-card-image {
  display: block; width: 100%; flex: 1 1 auto; min-height: 0;
  object-fit: contain; border-radius: var(--radius-sm);
}
.revision-card-body.has-image:not(.image-only) .revision-card-image { flex: 0 1 auto; max-height: 55%; }
.revision-card-body.image-only .revision-card-image { flex: 1 1 100%; }
.revision-card-text { font-size: 0.95rem; overflow: auto; min-height: 0; }
.revision-card-body.image-only .revision-card-text { display: none; }
.revision-card-text > :first-child { margin-top: 0; }
.revision-card-text > :last-child { margin-bottom: 0; }
.revision-card-inner { flex: 1 1 auto; }
.shape-picker { margin: 0; }
.shape-picker select { min-width: 9rem; }
/* The tools sit under the card, not on top of it: a long back used to slide
   under the buttons and lose its last lines. */
.revision-card-tools {
  display: flex; justify-content: flex-end; gap: 0.3rem;
  max-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.15s ease;
}
.revision-card:hover .revision-card-tools,
.revision-card:focus-within .revision-card-tools,
.revision-card.flipped .revision-card-tools { max-height: 3rem; opacity: 1; }

.deck-editor { margin-top: 1.5rem; }
.deck-editor h2 { margin-top: 0; font-size: 1.05rem; }
.deck-editor .sep { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.file-button { cursor: pointer; }

/* Study mode: one card, centred, the size of the screen on mobile. */
.deck-study-page { max-width: 46rem; margin: 0 auto; }
.study-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.study-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.4rem; display: flex; flex-direction: column;
  justify-content: center; cursor: pointer; box-shadow: var(--shadow);
  margin: 0 auto; width: 100%; min-height: min(60vh, 26rem);
}
/* The study card keeps the deck's shape, bounded by the screen height. */
.study-card[data-aspect="2:3"] { aspect-ratio: 2 / 3; max-width: min(34rem, 46vh * 0.6667); }
.study-card[data-aspect="3:4"] { aspect-ratio: 3 / 4; max-width: min(34rem, 60vh * 0.75); }
.study-card[data-aspect="1:1"] { aspect-ratio: 1 / 1; max-width: min(34rem, 60vh); }
.study-card[data-aspect="3:2"] { aspect-ratio: 3 / 2; max-width: 46rem; }
.study-card[data-aspect="16:9"] { aspect-ratio: 16 / 9; max-width: 46rem; }
.study-card .revision-card-body { gap: 0.8rem; }
.study-card .revision-card-face { position: static; border: 0; padding: 0; background: none; overflow: visible; }
.study-card .revision-card-image { width: 100%; max-width: 100%; margin: 0 auto; display: block; object-fit: contain; }
/* A deck read inside an article: one card at a time, arrows, no page jump. */
.embed-deck { display: grid; gap: 0.7rem; justify-items: center; padding: 0.8rem 0 1.2rem; }
.embed-deck .revision-card { width: 100%; max-width: 20rem; }
.embed-deck-bar { display: flex; align-items: center; gap: 0.9rem; }
.embed-deck .center { text-align: center; }

/* An adventure mounted inside a wiki page must not offer a way out of it. */
.wiki-embed-body .adv-brand { pointer-events: none; opacity: 0.7; }
.wiki-embed-body .adv-brand::after { content: ""; }
.study-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1rem; }
.study-actions .btn { width: 100%; }
.study-summary { text-align: center; }
.study-score { font-size: 2.4rem; font-weight: 700; margin: 0.4rem 0; }
.center { text-align: center; }
/* `hidden` must win over the face's `display: flex` in study mode. */
.study-card [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   LOT 12 — phones and tablets, embed chrome, light-theme contrast
   -------------------------------------------------------------------------- */

/* The glow of the landing page bleeds past the hero: only the document clips,
   and clipping here (instead of `hidden` on body) keeps sticky bars working. */
html { overflow-x: clip; }

/* Embed module: the title sits left, one discreet link sits top-right. */
.wiki-embed-head { align-items: center; }
.wiki-embed-ident { min-width: 0; }
.wiki-embed-title { font-size: 1rem; line-height: 1.3; }
.wiki-embed-open {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 8px;
  border: 1px solid transparent; color: var(--muted); background: transparent;
}
.wiki-embed-open:hover, .wiki-embed-open:focus-visible {
  color: var(--text); background: var(--surface); border-color: var(--border);
  text-decoration: none;
}
.wiki-embed-body .loading { padding: 0.6rem 0; }

/* The table of pages folds into one bar on a phone. */
.wiki-side-toggle { display: none; }

@media (max-width: 900px) {
  /* A sticky menu card sat on top of the article for the whole scroll. */
  .wiki-side { position: static; }
  .wiki-side-head { flex-wrap: wrap; row-gap: 0.4rem; }
  .wiki-side-toggle { display: inline-flex; margin-left: auto; }
  .wiki-side.is-collapsed > *:not(.wiki-side-head) { display: none; }
  .wiki-side.is-collapsed .wiki-side-head { align-items: center; }
  .wiki-nav { max-height: none; }
  .wiki-article { padding: 1.1rem; }
  .wiki-content { max-width: none; }
  .wiki-content table { display: block; max-width: 100%; overflow-x: auto; }
  .wiki-content pre { max-width: 100%; }
  .wiki-article-head, .page-head { align-items: flex-start; }
  /* Sticky tabs under a two-row topbar only ever peeked out from under it. */
  .ld-switch-wrap { padding: 1.6rem 1rem 2.2rem; }
  .ld-switch-btn { padding: 0.5rem 0.9rem; font-size: 0.86rem; }
  .embed-deck .revision-card { max-width: 17rem; }
}

@media (max-width: 620px) {
  /* Two wrapped rows stuck on top of a phone screen ate a sixth of the
     reading area: the bar scrolls away with the page. The grid keeps the
     chrome on one line and the navigation on a second, whatever the width. */
  .topbar {
    position: static; padding: 0.55rem 0.9rem;
    display: grid; gap: 0.35rem 0.45rem;
    grid-template-columns: auto 1fr auto;
    /* The account comes last: its popover is anchored on its right edge, so a
       button in the middle of the bar pushed a 13rem panel off the left of a
       phone screen. On the far right, the panel opens inwards. */
    grid-template-areas: "brand tools session" "nav nav nav";
  }
  .topbar .brand { grid-area: brand; }
  .topbar .topbar-tools { grid-area: tools; justify-content: flex-end; }
  .topbar .session-box { grid-area: session; margin: 0; }
  .topbar .nav { grid-area: nav; margin-left: 0; }
  /* The flag already says which language is on. */
  .lang-button-label { display: none; }
  /* One compact row of chrome, then the navigation: the sign-in pair used to
     fall on its own line and leave a hole under the logo. */
  .topbar .brand { margin-right: auto; }
  .topbar select, .topbar .btn, .topbar #theme-toggle { min-height: 2.25rem; }
  /* Everything on the first line, even on a 360px screen: 140px of chrome is a
     sixth of the screen before the content starts. */
  .topbar .brand .brand-name { font-size: 0.95rem; }
  .topbar select { font-size: 0.78rem; padding-inline: 0.35rem; }
  .topbar .btn { font-size: 0.76rem; padding-inline: 0.5rem; }
  .topbar #theme-toggle { min-width: 2.25rem; padding: 0; }
  .session-box { gap: 0.3rem; margin-left: 0; }
  .topbar nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { white-space: nowrap; }
  .ld-eyebrow { font-size: 0.72rem; letter-spacing: 0.1em; }
  /* Ragged headings ("know." alone on a line) look broken on a phone. */
  .ld-hero h1, .ld-hero-title, .about-hero h1, h1, h2 { text-wrap: balance; }
  .brand { font-size: 1rem; }
  .nav { gap: 0.95rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.15rem; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .session-box .btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
  .session-box .user-name { display: none; }
  main { padding: 0.9rem 0.9rem 1.4rem; }
  .wiki-article { padding: 0.9rem; }
  .wiki-content { font-size: 0.97rem; line-height: 1.65; }
  .wiki-content h1 { font-size: 1.35rem; }
  .wiki-content h2 { font-size: 1.15rem; }
  .wiki-embed-card { padding: 0.75rem 0.8rem; }
  .wiki-embed-body { margin-top: 0.7rem; }
  /* Action rows wrap in columns instead of squeezing into unreadable pills. */
  .row-wrap, .wiki-article-head .row-wrap { gap: 0.4rem; }
  .btn { padding: 0.5rem 0.8rem; }
  .ld-tabs { gap: 0.4rem; }
  .ld-tab { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
  .about-hero h1, .ld-hero h1, .ld-hero-title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .ld-hero { padding-block: 1.2rem 1.8rem; }
  .ld-hero h1, .ld-hero-title { margin-bottom: 0.85rem; }
  .ld-problem { margin-top: 1.1rem; }
  .embed-deck .revision-card { max-width: 15rem; }
  .footer { padding: 0.9rem; }
}

/* -------------------------------------------------------------------------- */
/* LOT 12 — reading surface on phones and tablets                             */
/* -------------------------------------------------------------------------- */

/* Sticky chrome is a convenience on a desktop and a nuisance in bed: the tab
   strip and the two wiki side panels stop following the scroll under 900px, so
   the text keeps the whole screen. */
@media (max-width: 900px) {
  .ld-tabs { position: static; }
  .wiki-side, .wiki-editor-side { position: static; top: auto; }
  /* Collapsed to its header line, not removed: hiding the card also hid the
     "Pages" button that opens it again. */
  .wiki-side.is-collapsed { padding: 0.5rem 0.8rem; }
  .wiki-side.is-collapsed > *:not(.wiki-side-head) { display: none; }
}

@media (max-width: 620px) {
  /* Touch targets: the small chrome buttons were 26px tall. */
  .topbar a, .topbar button, .topbar select { min-height: 2.1rem; }
  .wiki-page-actions, .page-actions { flex-wrap: wrap; gap: 0.4rem; }
  .wiki-page-actions .btn, .page-actions .btn { padding: 0.4rem 0.65rem; font-size: 0.82rem; }
}

/* -------------------------------------------------------------------------- */
/* LOT 13 — flat lists                                                        */
/*                                                                            */
/* Rows of data are records, not pills: square-ish corners (4px), one outline  */
/* each, real space between them, and a shadow just deep enough to lift them   */
/* off the page. Buttons keep their rounding — the rule is about what holds    */
/* rows, not about the whole stylesheet.                                      */
/* -------------------------------------------------------------------------- */

/* Records are separated, never glued: two borders meeting on the same pixel
   read as a seam, and a run of them reads as a ledger. Each record keeps its
   own outline, a little air around it, and a shadow shallow enough to lift it
   off the page without turning it into a floating sticker. */
/* The search bar is a control, the grid is its result set: without a gap the
   two cards read as one block and the results look pasted under the field. */
.wiki-toolbar { margin-bottom: 1.1rem; }

.wiki-grid, .deck-grid { display: grid; gap: 0.65rem; }

.wiki-grid > *, .deck-grid > * {
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.wiki-grid > *:hover, .deck-grid > *:hover,
.wiki-grid > *:focus-within, .deck-grid > *:focus-within {
  box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* A catalogue card is a record, not a poster. */
.quiz-card.card, .wiki-card.card, .deck-card.card,
.history-row, .score-row, .q-preview {
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

.quiz-card.card:hover, .wiki-card.card:hover, .deck-card.card:hover { box-shadow: var(--shadow-2); }

.table-wrap { border-radius: 4px; box-shadow: var(--shadow-1); }
.table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* The rows of a flat list keep a single line of metadata each. */
.wiki-grid .wiki-card, .deck-grid .deck-card { padding: 0.9rem 1.1rem; }
.wiki-grid .wiki-result { padding: 0.9rem 1.1rem; }

/* The catalogue is a grid of separate records. Painting the container in the
   border colour to get 1px separators left that colour showing through every
   empty cell of a short last row (`?tab=mine` with three quizzes looked like a
   broken table), so the surface stays unpainted and the gap does the work. */
#catalog.grid {
  gap: 0.7rem; padding: 0;
  background: none; border: 0; overflow: visible;
}

#catalog.grid > .card {
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); box-shadow: var(--shadow-1);
  transition: box-shadow 0.16s ease, border-color 0.16s ease;
}

#catalog.grid > .card:hover, #catalog.grid > .card:focus-within {
  box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* A section header: one filter on the left, one action on the right. */
.list-head { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.list-head .search-form { flex: 1 1 20rem; }

/* Inside a header the search is a single line: field grows, button stays small.
   The base .search-form stacks its children, which stretched the button under
   the field and read like a second, empty bar. */
.list-head .search-form, .search-form.inline {
  flex-direction: row; align-items: center; gap: 0.4rem;
}
.list-head .search-form .input, .search-form.inline .input { flex: 1 1 auto; min-width: 0; }
.list-head .search-form .btn, .search-form.inline .btn { flex: 0 0 auto; }

/* ---------------------------------------------------------------- */
/* Problem / solution hero                                           */
/* ---------------------------------------------------------------- */

.ld-hero-problem .ld-hero-text { max-width: 44rem; }

/* The headline types itself, so its text changes width all the time. Every
   rotating word is laid out in the same grid cell — the hidden ones reserve
   their space — and the tallest one fixes the height of the line: the problem
   and the answer below never move while the sentence is being typed. */
.ld-rotator {
  display: grid;
  color: var(--accent, #2b5cff);
}
.ld-rotator > * { grid-area: 1 / 1; min-width: 0; }
.ld-rot-sizer { visibility: hidden; pointer-events: none; }
.ld-rot-live { display: inline-flex; align-items: baseline; gap: 2px; }

.ld-caret {
  display: inline-block;
  width: 3px;
  height: 0.95em;
  margin-left: 2px;
  background: currentColor;
  animation: ld-caret 1.05s steps(1) infinite;
  transform: translateY(0.08em);
}

@keyframes ld-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.ld-problem,
.ld-solution {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  margin: 1.1rem 0 0;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

/* The icon names the box before the label is read: a warning for the problem,
   a light for the answer. */
.ld-box-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  margin-top: 0.1rem;
}

.ld-problem .ld-box-icon { background: var(--danger-soft, rgba(192, 57, 43, 0.12)); color: var(--danger, #c0392b); }
.ld-solution .ld-box-icon { background: var(--accent-soft, rgba(43, 92, 255, 0.12)); color: var(--accent, #2b5cff); }

.ld-icon { display: block; }

.ld-problem { border-left: 3px solid var(--danger, #c0392b); margin-top: 1.45rem; }
.ld-solution { border-left: 3px solid var(--accent, #2b5cff); margin-top: 0.85rem; }

/* A phone shows the title and the two boxes with the rest of the story below
   the fold: this quiet arrow says the page continues. Desktop hides it. */
.ld-scroll-cue {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 1.1rem auto 0;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
}
.ld-scroll-cue span {
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  animation: ld-cue 1.9s ease-in-out infinite;
}
@keyframes ld-cue {
  0%, 100% { transform: rotate(45deg) translate(-3px, -3px); opacity: 0.35; }
  50% { transform: rotate(45deg) translate(1px, 1px); opacity: 1; }
}
/* Declared after the base rule: a media query placed earlier in the file would
   lose to it, and the arrow would never appear. Sticky, because an arrow under
   the last paragraph sits below the fold and says nothing to nobody. Kept bare
   and small: a disc with a background covered the first lines of the problem
   card on a 320px screen. */
@media (max-width: 980px) {
  .ld-scroll-cue {
    display: grid;
    position: sticky;
    bottom: 0.45rem;
    z-index: 3;
    width: auto;
    height: auto;
    border: 0;
    color: var(--accent, #2b5cff);
    pointer-events: none;
    /* A white halo lifts the arrow off whatever it crosses, without the opaque
       disc that hid the card text on a narrow screen. */
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #fff);
  }
  .ld-scroll-cue span {
    width: 1rem;
    height: 1rem;
    border-width: 0 2.5px 2.5px 0;
  }
}

.ld-problem p,
.ld-solution p { margin: 0; color: var(--text); }

.ld-problem-tag,
.ld-solution-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.35rem !important;
}

.ld-problem-tag { color: var(--danger, #c0392b); }
.ld-solution-tag { color: var(--accent, #2b5cff); }

.ld-github {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.ld-github:hover,
.ld-github:focus-visible {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

/* ---------------------------------------------------------------- */
/* Sign-in options                                                   */
/* ---------------------------------------------------------------- */

.auth-forgot { margin: 0.55rem 0 0; text-align: right; font-size: 0.86rem; }
.auth-forgot a { color: var(--muted); }
.auth-forgot a:hover { color: var(--text); }

.sso-block { margin-top: 1.1rem; display: grid; gap: 0.5rem; }

.sso-separator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.2rem 0 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.sso-separator::before,
.sso-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.sso-button { justify-content: center; gap: 0.5rem; }

/* ---------------------------------------------------------------- */
/* Optional features                                                 */
/* ---------------------------------------------------------------- */

/* An administrator can run the platform without any model provider: the
   interface then hides every control that would call one. */
html[data-ai="off"] .ai-only,
html[data-ai="off"] .btn-ai { display: none !important; }

/* The presentation page belongs to demo instances; the wiki is the entry
   point everywhere else. */
html[data-demo="off"] [data-nav="about"] { display: none !important; }


/* ---------------------------------------------------------------- */
/* Landing: repository corner and the self-playing hero mock         */
/* ---------------------------------------------------------------- */

.ld-hero-problem { position: relative; }

.ld-star-corner {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(6px);
  color: var(--muted);
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.ld-star-corner:hover,
.ld-star-corner:focus-visible {
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.ld-mock-question { transition: opacity .3s ease; }
.ld-mock-question.is-swapping { opacity: .15; }

@media (max-width: 720px) {
  .ld-star-corner { position: static; margin: 0 0 .9rem; }
  .ld-star-corner span { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-mock-question, .ld-bar i { transition: none; }
}


/* ---------------------------------------------------------------- */
/* MCP documentation page                                            */
/* ---------------------------------------------------------------- */

.mcp-docs .mcp-summary { padding: 1rem 1.2rem; margin-bottom: 1.4rem; display: grid; gap: .35rem; }
.mcp-docs .mcp-summary p { margin: 0; font-size: .88rem; }
.mcp-docs .mcp-h2 { margin: 1.6rem 0 .4rem; font-size: 1.1rem; }
.docs-code {
  margin: .7rem 0 1.4rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2, rgba(127,127,127,.07));
  font-size: .8rem;
  line-height: 1.5;
  overflow-x: auto;
}
/* A link inside running text is underlined: colour alone does not tell it
   apart from the sentence around it (1.4.1). Cards, titles and buttons keep
   their own treatment. */
.mcp-docs .prose a,
.wiki-article a,
.legal-doc a { text-decoration: underline; text-underline-offset: 2px; }
.mcp-docs .prose h2 { margin-top: 1.6rem; }
.mcp-docs .prose table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.mcp-docs .prose th, .mcp-docs .prose td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }


/* --------------------------------------------------------------------------
   Legal notice: the public page and the administrator's editor
   -------------------------------------------------------------------------- */

.legal { padding-block: clamp(1.4rem, 4vw, 2.6rem); }
.legal-head h1 { margin-bottom: .4rem; }
.legal-head .muted { max-width: 62ch; }
/* Long paragraphs read better in a column than edge to edge. Centred, so the
   page is symmetric in both directions: a block with a max-width and no auto
   margins hugs the start edge, which leaves the other half empty in Arabic. */
.legal-head, .legal-doc { max-width: 78ch; margin-inline: auto; }
.legal-doc { margin-top: 1.6rem; display: grid; gap: 1.5rem; }
.legal-section { border-top: 1px solid var(--border); padding-top: 1.2rem; }
.legal-doc .legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-section h2 { font-size: 1.12rem; margin-bottom: .45rem; letter-spacing: -.005em; }
.legal-body { line-height: 1.68; }
.legal-body p + p, .legal-body p + ul, .legal-body ul + p { margin-top: .7rem; }
.legal-body ul, .legal-body ol { margin: .5rem 0 .5rem 1.2rem; }
.legal-body a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.legal-instance {
  border: 1px solid var(--border); border-radius: 16px;
  padding: 1.1rem 1.2rem; background: var(--surface);
}
.legal-instance.is-empty { border-style: dashed; }
.legal-instance h2 { margin-top: 0; }
.legal-stamp, .legal-footnote { font-size: .82rem; }
.legal-footnote { border-top: 1px solid var(--border); padding-top: .9rem; }
.legal-loading { opacity: .45; }

.legal-admin { display: grid; gap: .9rem; }
.legal-langs { display: flex; flex-wrap: wrap; gap: .3rem; }
.legal-lang {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  padding: .28rem .55rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: .72rem; font-weight: 600;
}
.legal-lang .flag { width: 17px; height: 11px; border-radius: 2px; }
.legal-lang.is-filled { color: var(--text); }
.legal-lang.is-filled::after { content: "✓"; color: var(--ok); font-size: .68rem; line-height: 1; }
.legal-lang.is-active {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); color: var(--text);
}
.legal-editor {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface);
}
.legal-toolbar {
  display: flex; align-items: center; gap: .2rem; flex-wrap: wrap;
  padding: .35rem .45rem; border-bottom: 1px solid var(--border);
}
.legal-tool {
  min-width: 30px; height: 28px; padding: 0 .5rem; border-radius: 8px;
  border: 1px solid transparent; background: transparent; color: var(--text);
  font-weight: 600; font-size: .82rem; cursor: pointer;
}
.legal-tool:hover { background: var(--accent-soft); }
.legal-modes {
  margin-inline-start: auto; display: inline-flex; overflow: hidden;
  border: 1px solid var(--border); border-radius: 999px;
}
.legal-mode {
  padding: .24rem .6rem; font-size: .72rem; cursor: pointer;
  background: transparent; color: var(--muted); border: 0;
}
.legal-mode.is-active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.legal-surface, .legal-source {
  min-height: 320px; margin: 0; padding: 1rem 1.1rem;
  line-height: 1.68; outline: none; border: 0; width: 100%;
}
.legal-surface:focus, .legal-source:focus { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.legal-source {
  background: transparent; color: var(--text); resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .86rem;
}
.legal-surface:empty::before,
.legal-source:placeholder-shown::before { color: var(--muted); }
.legal-hint { padding: 0 1.1rem .8rem; }
/* The save bar follows the page: a form whose only action sits below a 320 px
   surface is a form whose action nobody sees. */
.legal-bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  padding: .6rem 0 .3rem;
  background: linear-gradient(180deg, transparent, var(--bg) 42%);
}
.legal-translate { display: inline-flex; align-items: center; gap: .4rem; }
.legal-bar .legal-from { max-width: 180px; }
.legal-count { margin-inline-end: auto; }
.legal-dirty { color: var(--warn-text, var(--muted)); }

@media (max-width: 620px) {
  .legal-surface, .legal-source { min-height: 240px; padding: .8rem .85rem; }
  .legal-bar .legal-from { max-width: 100%; flex: 1 1 140px; }
  .legal-modes { margin-inline-start: 0; }
}

/* Right-to-left: the document flips by itself; the few rules that were written
   with physical sides are mirrored here. */
[dir="rtl"] .ld-points li { padding-left: 0; padding-right: 1.35rem; }
[dir="rtl"] .ld-points li::before { left: auto; right: 0; }
[dir="rtl"] .legal-body ul, [dir="rtl"] .legal-body ol { margin: .5rem 1.2rem .5rem 0; }

/* A link inside a sentence cannot be told from the words around it by colour
   alone: it measured 1.08:1 against its own paragraph. */
.auth-switch a { text-decoration: underline; text-underline-offset: 2px; }

.a11y-list { margin: .2rem 0 1rem; padding-left: 1.1rem; display: grid; gap: .45rem; }
.a11y-list li { line-height: 1.55; }

/* Seventh about scene: a page reached without a mouse. */
.ld-a11y-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  padding: 1rem;
  align-items: start;
}
.ld-a11y-doc { display: grid; gap: 0.55rem; }
.ld-a11y-line {
  height: 7px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.16;
  margin: 0;
}
.ld-a11y-line.long { width: 92%; }
.ld-a11y-line.short { width: 58%; }
.ld-a11y-link {
  width: fit-content;
  padding: 0.18rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  color: var(--accent-text);
  font-size: 0.74rem;
}
.ld-a11y-sr {
  margin: 0;
  padding-left: 0.5rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}
.ld-a11y-side { display: grid; gap: 0.4rem; justify-items: center; align-content: start; }
.ld-a11y-key {
  border: 1px solid var(--border);
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 0.12rem 0.45rem;
  font-size: 0.72rem;
  color: var(--text);
}
.ld-a11y-pos { font-size: 0.68rem; color: var(--muted); }
.ld-a11y-pos.is-ok {
  color: var(--ok-text);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0 0.4rem;
  font-weight: 600;
}