/* Pesi's editor. One stylesheet, no framework: the page has to stay legible to whoever
   picks it up next, and a build step is one more thing that can be broken on a Sunday.

   Visual language borrows the two systems this kind of internal tool usually gets compared
   to: GitHub's Primer (the neutral grays, the border-forward cards, the labelled-pill badges,
   the blue accent) for structure, and Vercel's flatter, quieter chrome (tight radii, soft
   shadows instead of heavy borders, a segmented-control look for tabs) for finish. Primer's
   published palette (primer.style/primitives) is real; the exact shades below are close to
   it from memory rather than pulled token-for-token, so treat the hexes as "in that family",
   not an official Primer build. */

:root {
  color-scheme: light dark;

  --ink: #1f2328;
  --ink-soft: #57606a;
  --ink-faint: #8b949e;
  --page: #f6f8fa;
  --card: #ffffff;
  --card-inset: #f6f8fa;
  --line: #d1d9e0;
  --line-subtle: #e8ecf0;
  --accent: #0969da;
  --accent-hover: #0757ba;
  --accent-wash: #ddf1ff;
  --accent-ink: #ffffff;
  --danger: #cf222e;
  --danger-hover: #a40e26;
  --draft: #9a6700;
  --draft-bg: #fff8c5;
  --reviewed: #0969da;
  --reviewed-bg: #ddf1ff;
  --verified: #1a7f37;
  --verified-bg: #dafbe1;
  --archived: #57606a;
  --archived-bg: #eaeef2;
  --withdrawn: #cf222e;
  --withdrawn-bg: #ffebe9;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  --shadow-xs: 0 1px 0 rgba(31, 35, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08), 0 0 0 1px rgba(31, 35, 40, 0.03);
  --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1), 0 0 0 1px rgba(31, 35, 40, 0.03);
  --focus-ring: 0 0 0 3px var(--accent-wash);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e6edf3;
    --ink-soft: #9198a1;
    --ink-faint: #6e7681;
    --page: #0d1117;
    --card: #161b22;
    --card-inset: #0d1117;
    --line: #30363d;
    --line-subtle: #21262d;
    --accent: #4493f8;
    --accent-hover: #6cb0ff;
    --accent-wash: #0d2d4d;
    --accent-ink: #0d1117;
    --danger: #ff7b72;
    --danger-hover: #ffa198;
    --draft: #d29922;
    --draft-bg: #3b2e07;
    --reviewed: #4493f8;
    --reviewed-bg: #0d2d4d;
    --verified: #3fb950;
    --verified-bg: #0f2e17;
    --archived: #9198a1;
    --archived-bg: #21262d;
    --withdrawn: #ff7b72;
    --withdrawn-bg: #3c1618;

    --shadow-xs: 0 1px 0 rgba(1, 4, 9, 0.2);
    --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.4), 0 0 0 1px rgba(240, 246, 252, 0.06);
    --shadow-md: 0 8px 24px rgba(1, 4, 9, 0.5), 0 0 0 1px rgba(240, 246, 252, 0.06);
  }
}

/* An explicit choice from the theme switch in the header always wins over the system
   setting above; system stays the default until someone picks one (kept in localStorage). */
:root[data-theme='dark'] {
  --ink: #e6edf3;
  --ink-soft: #9198a1;
  --ink-faint: #6e7681;
  --page: #0d1117;
  --card: #161b22;
  --card-inset: #0d1117;
  --line: #30363d;
  --line-subtle: #21262d;
  --accent: #4493f8;
  --accent-hover: #6cb0ff;
  --accent-wash: #0d2d4d;
  --accent-ink: #0d1117;
  --danger: #ff7b72;
  --danger-hover: #ffa198;
  --draft: #d29922;
  --draft-bg: #3b2e07;
  --reviewed: #4493f8;
  --reviewed-bg: #0d2d4d;
  --verified: #3fb950;
  --verified-bg: #0f2e17;
  --archived: #9198a1;
  --archived-bg: #21262d;
  --withdrawn: #ff7b72;
  --withdrawn-bg: #3c1618;
  --shadow-xs: 0 1px 0 rgba(1, 4, 9, 0.2);
  --shadow-sm: 0 1px 2px rgba(1, 4, 9, 0.4), 0 0 0 1px rgba(240, 246, 252, 0.06);
  --shadow-md: 0 8px 24px rgba(1, 4, 9, 0.5), 0 0 0 1px rgba(240, 246, 252, 0.06);
}

:root[data-theme='light'] {
  --ink: #1f2328;
  --ink-soft: #57606a;
  --ink-faint: #8b949e;
  --page: #f6f8fa;
  --card: #ffffff;
  --card-inset: #f6f8fa;
  --line: #d1d9e0;
  --line-subtle: #e8ecf0;
  --accent: #0969da;
  --accent-hover: #0757ba;
  --accent-wash: #ddf1ff;
  --accent-ink: #ffffff;
  --danger: #cf222e;
  --danger-hover: #a40e26;
  --draft: #9a6700;
  --draft-bg: #fff8c5;
  --reviewed: #0969da;
  --reviewed-bg: #ddf1ff;
  --verified: #1a7f37;
  --verified-bg: #dafbe1;
  --archived: #57606a;
  --archived-bg: #eaeef2;
  --withdrawn: #cf222e;
  --withdrawn-bg: #ffebe9;
  --shadow-xs: 0 1px 0 rgba(31, 35, 40, 0.04);
  --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.08), 0 0 0 1px rgba(31, 35, 40, 0.03);
  --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.1), 0 0 0 1px rgba(31, 35, 40, 0.03);
}

* { box-sizing: border-box; }

/* `hidden` is only `display: none` in the UA stylesheet, so any author `display` rule beats
   it — and three of the containers below are grids. Without this the whole editor, and the
   "no permission" card, are briefly visible to anyone who loads the page before its script
   decides who they are. Found by the smoke test, which is the only reason it is not a bug
   Pesi would have reported as "it flashes". */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* === chrome ============================================================== */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: calc(9px + env(safe-area-inset-top, 0px)) 20px 9px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}

.bar-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 16px;
  line-height: 1;
  border-radius: var(--radius-sm);
  background: var(--accent-wash);
}
.brand-word {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.bar h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.bar-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* Reglas / Cobertura / Visuales. Same segmented tabs as the status tabs. */
.mode-tabs button { font-size: 13px; padding: 5px 12px; }
.who { color: var(--ink-soft); font-size: 13px; padding: 0 2px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover { background: var(--card-inset); color: var(--ink); }

.centered { display: grid; place-items: start center; padding: 48px 16px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.narrow { width: 100%; max-width: 400px; }
.card h2 { margin: 0 0 8px; font-size: 18px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; font-weight: 400; }
.pad { padding: 16px; }

.notice { padding: 16px; }

/* === two panes =========================================================== */

.work {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 1px;
  background: var(--line);
  min-height: calc(100vh - 52px);
}

.pane { background: var(--page); min-width: 0; }
.list-pane { display: flex; flex-direction: column; }
.edit-pane { padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }

/* A rule's page runs long (D88): the list stays put beside it and scrolls on its own. */
@media (min-width: 801px) {
  .list-pane { position: sticky; top: 57px; height: calc(100vh - 57px); }
}

@media (max-width: 800px) {
  .work { grid-template-columns: 1fr; }
  .list-pane { max-height: 60vh; }
}

/* === filters ============================================================= */

.filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

/* A segmented control, GitHub/Vercel style: a quiet track, a raised pill for whichever tab
   is current. Used for the mode tabs in the header as well as every filter-chip row below. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--line-subtle);
  border-radius: calc(var(--radius) + 3px);
}

.tabs button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.tabs button:hover { color: var(--ink); }

.tabs button[aria-selected='true'] {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.progress { margin: 0; padding: 10px 12px; font-size: 13px; color: var(--ink-soft); }

/* === the list ============================================================ */

.list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }

.list li > button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
}

.list li > button { transition: background-color 0.1s ease; }
.list li > button:hover { background: var(--card); }
.list li > button[aria-current='true'] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); }

.list .prompt {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list .meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* === badges ============================================================== */

.badge {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge.draft { background: var(--draft-bg); color: var(--draft); }
.badge.reviewed { background: var(--reviewed-bg); color: var(--reviewed); }
.badge.verified { background: var(--verified-bg); color: var(--verified); }
.badge.archived { background: var(--archived-bg); color: var(--archived); }
.badge.warn { background: var(--draft-bg); color: var(--draft); }
.badge.withdrawn { background: var(--withdrawn-bg); color: var(--withdrawn); }
/* Open learner reports on a row (D67): not a state, a thing to look at. */
.badge.alert { background: var(--withdrawn-bg); color: var(--withdrawn); }
/* A drawing Alex has finished, waiting for Pesi's yes (D103). */
.badge.review { background: var(--partial-bg); color: var(--partial); }

/* === the form ============================================================ */

#question-form { max-width: 720px; }

.form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.form-head code { font-size: 13px; color: var(--ink-soft); }

label { display: block; margin: 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--ink); }
legend { font-size: 14px; font-weight: 600; padding: 0; color: var(--ink); }

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='number'],
input[type='file'],
textarea,
select {
  width: 100%;
  max-width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input[type='text']:hover,
input[type='email']:hover,
input[type='password']:hover,
input[type='search']:hover,
input[type='number']:hover,
textarea:hover,
select:hover {
  border-color: var(--ink-faint);
}

textarea { resize: vertical; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 16px 0 0; padding: 12px; }

.option { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.option input[type='radio'] { flex: 0 0 auto; width: auto; }
.option input[type='text'] { flex: 1 1 auto; }

.option button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.option button:hover { border-color: var(--ink-faint); color: var(--ink); }

.row { display: flex; gap: 12px; flex-wrap: wrap; }
.col { flex: 1 1 220px; min-width: 0; }
.narrow-col { flex: 0 1 200px; }

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 6px;
}

.actions select { width: auto; }

button.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.primary:active { transform: translateY(1px); }

/* Pesi's yes on a question and its drawings (D103). */
button.approve {
  background: var(--verified-bg);
  color: var(--verified);
  border: 1px solid var(--verified);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.approve:disabled { opacity: 0.5; cursor: not-allowed; }

button.ghost {
  background: var(--card);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}
button.ghost:hover { border-color: var(--ink-faint); color: var(--ink); background: var(--card-inset); }

.consent-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

button.danger {
  background: var(--card);
  color: var(--danger);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
button.danger:hover { background: var(--withdrawn-bg); border-color: var(--danger); }

button.block { width: 100%; }
button.small { padding: 4px 10px; font-size: 13px; }
button[disabled] { opacity: 0.5; cursor: default; }

.saved { color: var(--verified); font-size: 13px; font-weight: 600; }
.note { margin: 12px 0 0; font-size: 14px; }
.note.bad { color: var(--danger); }

.problems {
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--card);
  font-size: 14px;
}

.problems ul { margin: 6px 0 0; padding-left: 20px; }
.problems .warn-only { border-left-color: var(--draft); }

/* === reports and the app's switches (D67) ================================ */

.reports {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 4px solid var(--withdrawn);
  border-radius: 6px;
  background: var(--withdrawn-bg);
  font-size: 14px;
}
.reports ul { margin: 6px 0 10px; padding-left: 20px; }
.reports li { margin: 2px 0; }

.settings {
  margin-top: auto;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.settings summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.settings form { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.settings .check { margin: 0; }
.settings label.inline { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 400; }
.settings label.inline input { width: 64px; }
.settings .actions { margin-top: 0; }
/* Open, the box can be taller than the pane (D101's scope lists 16 temas): it scrolls on its own
   and the save row stays pinned to its bottom, so «Guardar ajustes» is always in reach. */
.settings[open] { max-height: 70%; overflow-y: auto; flex-shrink: 0; }
.settings[open] .actions {
  position: sticky;
  bottom: -10px;
  padding: 8px 0 10px;
  background: var(--page);
  border-top: 1px solid var(--line);
}

/* The feed's user-testing scope (D101). */
.scope-field { margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; }
.scope-field legend { font-weight: 600; color: var(--ink-soft); padding: 0 4px; }
.scope-field p { margin: 0; }
.scope-choices { display: flex; flex-direction: column; gap: 4px; padding-left: 22px; }
.scope-head { font-weight: 600; font-size: 13px; margin-top: 4px !important; }
.scope-grid { display: flex; flex-direction: column; gap: 2px; }
.scope-grid .check { font-size: 13px; color: var(--ink); }
.scope-count { font-size: 13px; font-weight: 600; }
.scope-count.bad { color: var(--danger); }
.scope-link { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.scope-link code { font-size: 12px; word-break: break-all; }

/* === coverage (D78) ====================================================== */

:root {
  --complete: #1a7f37;
  --complete-bg: #dafbe1;
  --partial: #9a6700;
  --partial-bg: #fff8c5;
  --missing: #cf222e;
  --missing-bg: #ffebe9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --complete: #3fb950;
    --complete-bg: #0f2e17;
    --partial: #d29922;
    --partial-bg: #3b2e07;
    --missing: #ff7b72;
    --missing-bg: #3c1618;
  }
}

:root[data-theme='dark'] {
  --complete: #3fb950;
  --complete-bg: #0f2e17;
  --partial: #d29922;
  --partial-bg: #3b2e07;
  --missing: #ff7b72;
  --missing-bg: #3c1618;
}

:root[data-theme='light'] {
  --complete: #1a7f37;
  --complete-bg: #dafbe1;
  --partial: #9a6700;
  --partial-bg: #fff8c5;
  --missing: #cf222e;
  --missing-bg: #ffebe9;
}

/* One wide page instead of the list beside the form. */
.work.single { grid-template-columns: 1fr; }

.coverage {
  background: var(--page);
  padding: 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  min-width: 0;
}

.coverage-head h2 { margin: 0; font-size: 20px; }
.coverage-head p { margin: 4px 0 10px; }
.coverage-head .tabs { margin-top: 6px; }
.coverage-head .check { margin-top: 10px; }

.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.legend li { display: flex; align-items: center; gap: 6px; }

.dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}
.dot.complete { background: var(--complete); }
.dot.partial { background: var(--partial); }
.dot.missing { background: var(--missing); }

.badge.cov.complete { background: var(--complete-bg); color: var(--complete); }
.badge.cov.partial { background: var(--partial-bg); color: var(--partial); }
.badge.cov.missing { background: var(--missing-bg); color: var(--missing); }
.badge.level { background: var(--reviewed-bg); color: var(--reviewed); }

.coverage-note {
  margin: 14px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--partial);
  border-radius: 6px;
  background: var(--card);
  font-size: 14px;
}
.coverage-note p { margin: 2px 0; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-xs);
}
.tile strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.tile span { font-size: 13px; color: var(--ink-soft); }
.tile.complete { border-top-color: var(--complete); }
.tile.partial { border-top-color: var(--partial); }
.tile.missing { border-top-color: var(--missing); }

.temas { display: flex; flex-direction: column; gap: 8px; }

.tema {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.tema.complete { border-left-color: var(--complete); }
.tema.partial { border-left-color: var(--partial); }
.tema.missing { border-left-color: var(--missing); }

.tema summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(80px, 220px) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
}
.tema-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-name .muted { font-weight: 400; }
.tema-count { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .tema summary { grid-template-columns: auto minmax(0, 1fr) auto; }
  .tema summary .cov-bar { grid-column: 2 / -1; grid-row: 2; }
}

/* 2px gaps between segments so neighbouring colours never read as one. */
.cov-bar { display: flex; gap: 2px; height: 10px; min-width: 0; }
.cov-part { flex-basis: 0; min-width: 4px; border-radius: 3px; }
.cov-part.complete { background: var(--complete); }
.cov-part.partial { background: var(--partial); }
.cov-part.missing { background: var(--missing); }

.lesson { padding: 4px 14px 12px; border-top: 1px solid var(--line); }
.lesson h3 { margin: 10px 0 6px; font-size: 14px; }

.concepts, .cov-rules { list-style: none; margin: 0; padding: 0; }
.concept { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.concept:last-child { border-bottom: 0; }
.concept-line { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.concept-line .badge { margin-left: auto; }

.cov-rules { margin: 4px 0 0 18px; }
.cov-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 4px 6px;
  cursor: pointer;
}
.cov-rule:hover { background: var(--page); }
.cov-rule .dot { width: 8px; height: 8px; }
.cov-rule-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === the rule form beside its simulator (D81) =========================== */

#rule-view { max-width: 1180px; }

.rule-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) 360px;
  gap: 24px;
  align-items: start;
}
.rule-main { min-width: 0; }

.rule-sim {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 1200px) {
  .rule-layout { grid-template-columns: minmax(0, 1fr); }
  /* On a narrow screen the phone comes first: it is what the rule looks like. */
  .rule-sim { position: static; order: -1; align-items: center; }
  .rule-sim > .sim-head, .rule-sim > .visual-list, .rule-sim > .sim-caption, .rule-sim > .sim-list-title {
    align-self: stretch;
  }
}

.sim-head { display: flex; align-items: baseline; gap: 8px; }
.sim-caption { margin: 0; min-height: 2.6em; }
.sim-list-title { margin: 8px 0 0; font-size: 14px; }

.sim-nav { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sim-nav > button { min-width: 40px; font-size: 18px; line-height: 1; }
.sim-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 220px; }
.sim-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
}
.sim-dot[aria-current='true'] { background: var(--accent); }

/* === the phone ============================================================ */

.phone {
  position: relative;
  width: 340px;
  height: 700px;
  padding: 12px;
  border-radius: 48px;
  background: #111;
  box-shadow: 0 0 0 2px #333, 0 12px 30px rgba(0, 0, 0, 0.25);
}
.phone:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.phone-notch {
  position: absolute;
  top: 20px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 26px;
  margin-left: -48px;
  border-radius: 14px;
  background: #111;
}
.phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #efa253;
}

/* What follows copies the app's Book (app/src/constants/theme.ts BookColors and BookFonts,
   components/book/concept-card.tsx): same colours, faces, sizes and radii. The road photo
   under the tint is the app's asset and stays there; the tint alone stands in for it. */
.app-page {
  --b-tint: #efa253;
  --b-heading-accent: #ffb002;
  --b-card: #f7f7f7;
  --b-ink: #000;
  --b-ink-soft: #5b5148;
  --b-quote: #fff4dc;
  --b-accent: #ffae02;
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--b-ink);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), transparent 30%), var(--b-tint);
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
}

.app-status {
  display: flex;
  justify-content: space-between;
  padding: 14px 26px 0;
  color: #fff;
  font: 600 13px/1 system-ui, sans-serif;
}

.app-header { display: flex; align-items: flex-start; gap: 10px; padding: 22px 16px 12px; }
.app-back {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font: 700 22px/1 system-ui, sans-serif;
}
.app-heading { min-width: 0; }
/* Outlined display type, as OutlinedText draws it. */
.app-eyebrow, .app-title {
  font-family: 'Darumadrop One', system-ui, sans-serif;
  color: #fff;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
}
.app-eyebrow { font-size: 15px; line-height: 20px; }
.app-eyebrow .accent { color: var(--b-heading-accent); }
.app-title { font-size: 24px; line-height: 28px; }

.app-body { flex: 1; overflow-y: auto; padding: 0 16px 24px; scrollbar-width: none; }
.app-body::-webkit-scrollbar { display: none; }

.app-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 3px solid #fff;
  border-radius: 24px;
  background: var(--b-card);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.36);
}
.app-concept { font-weight: 800; font-size: 19px; line-height: 23px; }
.app-rule { display: flex; flex-direction: column; gap: 8px; }
.app-rule-title { font-weight: 700; font-size: 16px; line-height: 21px; }
.app-hook { font-size: 15px; line-height: 21px; font-style: italic; }
.app-quote {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-left: 4px solid var(--b-accent);
  border-radius: 10px;
  background: var(--b-quote);
}
.app-quote-text { font-size: 15px; line-height: 22px; font-style: italic; }
.app-cite { color: var(--b-ink-soft); font-weight: 700; font-size: 12px; line-height: 16px; }
.app-explanation { font-size: 15px; line-height: 22px; white-space: pre-wrap; }
.app-report {
  color: var(--b-ink-soft);
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  text-decoration: underline;
}

/* A card's picture: the drawing slot of the concept card, 4:3 on the quote's cream. */
.app-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--b-quote);
  color: var(--b-ink-soft);
  font-weight: 700;
}
/* A broken image (a deleted or unreachable file) must not blow out these fixed-size boxes:
   some browsers size a failed <img>'s alt text to its own legibility rather than the CSS box,
   which escapes plain `overflow: hidden` on the parent. Pinning it absolutely removes the
   ambiguity — both parents are already `position: relative` with `overflow: hidden`. */
.app-visual img, .visual-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app-visual-none { border: 2px dashed #d9c9a8; font-size: 14px; }

.poster-placeholder { display: grid; place-items: center; width: 100%; height: 100%; font-size: 14px; }
.poster-play {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 16px;
}

/* === the rule's visuals, beside the phone ================================= */

.visual-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.visual-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
}
button.visual-item { cursor: pointer; }
button.visual-item:hover { border-color: var(--accent); }
.visual-item[aria-current='true'] { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.visual-item.brief { align-items: flex-start; }
.visual-item.unused { border-style: dashed; }
.visual-item.empty { justify-content: center; }
.visual-kind {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--partial-bg);
  color: var(--partial);
  font-size: 12px;
  font-weight: 600;
}
.visual-text { display: flex; flex-direction: column; min-width: 0; }
.visual-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.visual-thumb {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 56px;
  height: 42px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--page);
  color: var(--ink-soft);
  font-size: 11px;
}
.visual-thumb .poster-play { width: 20px; height: 20px; font-size: 9px; }
.visual-thumb.none { border: 1px dashed var(--line); font-weight: 700; }

/* === packages (D81) ======================================================= */

.packages-field .check { margin: 4px 0; font-weight: 400; color: var(--ink); }
.packages-field p { margin: 4px 0 0; }


/* === visuals (D83) ======================================================== */

.visual-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.visual-filters input[type='search'] { max-width: 360px; }
.visual-filters .check { margin: 0; }

.visuals-layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) { .visuals-layout { grid-template-columns: 1fr; } }

.visual-index {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.visual-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.visual-row:hover { background: var(--page); }
.visual-row[aria-current='true'] { background: var(--page); box-shadow: inset 3px 0 0 var(--accent); }

.visual-detail {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.visual-head { display: flex; align-items: center; gap: 12px; }
.visual-head h3 { margin: 0; font-size: 17px; }
.visual-head p { margin: 2px 0 0; }
.visual-thumb.big { width: 88px; height: 66px; }
.visual-thumb .sign-sketch { width: 90%; height: 90%; }
.visual-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1200px) { .visual-columns { grid-template-columns: 1fr; } .visual-columns .rule-sim { align-items: center; } }
.visual-columns h4 { margin: 14px 0 6px; font-size: 14px; }
.usage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.usage-row:hover { border-color: var(--accent); }
.usage-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sign-sketch { display: block; }
.app-visual .sign-sketch { width: 70%; height: 90%; }
.slot-empty { border: 2px dashed #d9c9a8; }
/* A placeholder label ("no drawing yet") that has to fit a thumbnail as small as 56×42: clamp
   to a few lines with an ellipsis rather than let it wrap past the box (found while checking
   the redesign, on Visuales — a long file name plus caption used to run past the row below). */
.slot-note {
  padding: 0 6px;
  color: #8a7a5c;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* The feed's question page (question-card.tsx, compact): the zebra's white, the card with its
   graded rim, Nunito Bold stem, grey options, green for the right one. */
.feed-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 16px;
  background: #fff;
  color: #000;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
}
.app-status.dark { color: #000; }
.feed-pills { display: flex; justify-content: center; gap: 8px; padding: 22px 0 8px; }
.feed-pill {
  padding: 4px 14px;
  border: 2px solid rgba(10, 10, 10, 0.35);
  border-radius: 999px;
  background: #cecece;
  color: #fff;
  font-family: 'Fugaz One', system-ui, sans-serif;
  font-size: 13px;
}
.feed-pill.on { background: #ffae02; }
.feed-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: auto 14px;
  padding: 14px 12px;
  border: 3px solid;
  border-color: #ededed #a0a0a0 #6f6f6f;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.feed-visual { display: grid; place-items: center; height: 115px; border-radius: 16px; }
.feed-visual .sign-sketch { height: 103px; width: 103px; }
.feed-visual.slot-empty { color: #8a7a5c; }
.feed-prompt { padding: 0 12px; font-weight: 700; font-size: 20px; line-height: 26px; }
.feed-options { display: flex; flex-direction: column; gap: 8px; }
.feed-option {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 15px 6px 17px;
  border-radius: 16px;
  background: #f3f3f3;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  font-size: 16px;
  line-height: 22px;
}
.feed-option.right { background: #abed65; font-weight: 700; }
/* Answers as pictures (D82): two side by side, three or four in a 2 × 2 grid. */
.feed-options.pictures { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feed-options.pictures .feed-option {
  position: relative;
  flex-direction: column;
  justify-content: center;
  aspect-ratio: 1;
  padding: 10px;
}
.feed-option-picture { display: grid; place-items: center; width: 100%; height: 100%; }
.feed-option-picture .sign-sketch { width: 86%; height: 86%; }
.feed-letter { position: absolute; top: 6px; left: 10px; font-weight: 800; font-size: 13px; color: #5b5148; }

/* === navigation and the fuller simulator (D86) ============================ */

/* Por tema / Por paquete: a smaller pair of pills above the pickers. */
.scope-tabs button { font-size: 12px; padding: 3px 10px; }

/* The dots tell the kinds apart: the Book, cards, clips and questions. */
.sim-dot.card { background: #b9a37a; }
.sim-dot.clip { background: #d97706; }
.sim-dot.question { background: #7c8aa0; }
.sim-dot[aria-current='true'] { background: var(--accent); transform: scale(1.3); }

/* A clip, as the feed plays it: the video full-bleed on black, the caption over its foot. */
.clip-page {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  background: #000;
  color: #fff;
}
.clip-page video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.clip-caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 70px;
  font-family: 'Darumadrop One', system-ui, sans-serif;
  font-size: 20px;
  line-height: 24px;
  color: #ffb002;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  pointer-events: none;
}
.clip-missing { padding: 24px; text-align: center; font-size: 14px; color: #ddd; }

.visual-item.question .visual-text strong { white-space: normal; }

.clip-link { display: inline-block; margin-top: 8px; color: #ffb002; font-weight: 700; }

.cards-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }

/* === Picture options (D82) =================================================
   The question form's per-answer drawing key: narrower than the answer, in monospace
   because it is a key, not prose. */
.option input.option-visual {
  flex: 0 0 11em;
  width: 11em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.option-visual-hint { margin: 0 0 8px; }

/* === a rule's page (D88) ================================================= */

/* The list: each rule coloured by what it has, and the three chips that say which. */
.list .title-line { display: flex; align-items: baseline; gap: 8px; }
.list .title-line .dot { transform: translateY(1px); }
.progress .cov-bar { display: flex; margin-top: 6px; }

.chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.chip.ok { background: var(--complete-bg); color: var(--complete); }
.chip.no { background: var(--missing-bg); color: var(--missing); }

.checklist {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
}
.checklist .verdict {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--archived-bg);
  color: var(--archived);
}
.checklist .verdict.complete { background: var(--complete-bg); color: var(--complete); }
.checklist .verdict.partial { background: var(--partial-bg); color: var(--partial); }
.checklist .verdict.missing { background: var(--missing-bg); color: var(--missing); }
.check-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.check-pill.ok strong { color: var(--complete); }
.check-pill.no strong { color: var(--missing); }
.check-pill span { color: var(--ink-soft); }

/* The section picker stays at hand while the cards scroll under it. */
#r-sections {
  position: sticky;
  top: 57px;
  z-index: 2;
  padding: 8px 0;
  margin-bottom: 4px;
  background: var(--page);
}
.section-title { margin: 18px 0 8px; font-size: 16px; }
.rule-section:first-of-type .section-title { margin-top: 4px; }

.edit-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-xs);
}
.edit-card label { margin-top: 10px; }
.edit-card .actions { margin: 14px 0 0; }
.edit-card.dirty { border-color: var(--partial); }
.edit-card.flash { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow 0.3s; }
#rule-form.dirty { border-color: var(--partial); }

.card-stack { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-head code { font-size: 12px; color: var(--ink-soft); }
.card-head .phone-button { margin-left: auto; }
.dirty-mark { display: none; font-size: 12px; font-weight: 600; color: var(--partial); }
.dirty > .card-head .dirty-mark { display: inline; }
.empty-note { margin: 0 0 8px; }

.concept-questions { margin-top: 12px; }
.concept-questions summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); }
.concept-questions[open] summary { margin-bottom: 10px; }

.clip-na { margin: 0 0 10px; color: var(--ink); }
.clip-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.clip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.clip-row .visual-text { flex: 1; min-width: 0; }
.clip-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.clip-add { display: flex; gap: 8px; align-items: center; }
.clip-add select { flex: 1; }

/* === the design flow of a drawing (D90) ================================== */

.design-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.visual-thumb .design-img { object-fit: cover; }
.design-panel { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 8px; }
.design-facts { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.design-facts dt { color: var(--ink-soft); font-weight: 600; }
.design-facts dd { margin: 0; }
.design-pictures { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.design-figure { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.design-figure > :first-child {
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 8px;
  background: #fff4dc;
  overflow: hidden;
}
.design-figure.wide > :first-child { aspect-ratio: 2 / 1; background: #f3f3f3; }
.design-empty { display: grid; place-items: center; border: 2px dashed var(--line); color: var(--ink-soft); font-size: 13px; }
.design-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.design-actions input[type='file'] { display: none; }
.design-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.design-actions .error { color: var(--danger); }

/* A clip's video (D141): what the app plays, the latest upload, and the encode to approve. */
.clip-panel h4 { margin: 0; }
.clip-panel progress { width: 220px; height: 10px; }
.clip-review { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.clip-preview { width: 100%; aspect-ratio: 9 / 16; background: #000; border-radius: 10px; }
.clip-review-about { display: flex; flex-direction: column; gap: 6px; }
.clip-review-about p { margin: 0; }
.clip-warning { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--draft-bg); color: var(--draft); font-size: 13px; }
.clip-note.error { color: var(--danger); }
@media (max-width: 640px) {
  .clip-review { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) { .design-facts { grid-template-columns: 1fr; } }

/* In the phone, the sketch sits where the drawing will go, tagged so nobody takes it for the app. */
.slot-lofi { position: relative; overflow: hidden; }
.feed-visual.slot-lofi { height: auto; aspect-ratio: 2 / 1; }
.lofi-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font: 700 10px/1.4 system-ui, sans-serif;
}
/* Alex's file shown to Pesi before the app has it (D103). */
.lofi-tag.pending { background: #a86b00; }

/* The library (D96): upload a visual once, link it to many cards and questions. */
.visual-new {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}
.visual-new h3 { margin: 0; font-size: 16px; }
.visual-new p { margin: 0; }
.visual-new .actions .error, .link-panel .error { color: var(--danger); }
.vn-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.link-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.link-panel h4 { margin: 0; }
.link-panel p { margin: 0; }
.link-panel select[size] { width: 100%; }

/* === templates (D97) ====================================================== */

/* Two pictures above the stem, as the feed draws them on a 360 × 800 phone (lib/pair-layout.ts):
   V2 two 111pt squares side by side, V3 two 160 × 80 tiles one over the other, each lettered. */
.feed-pair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.feed-pair.pair-v { flex-direction: column; }
.feed-pair-tile {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: #f3f3f3;
}
.feed-pair.pair-h .feed-pair-tile { width: 111px; height: 111px; }
.feed-pair.pair-v .feed-pair-tile { width: 160px; height: 80px; }
.feed-pair-picture { display: grid; place-items: center; width: 100%; height: 100%; }
/* A sign's sketch is square: 86 % of the tile's shorter side. */
.feed-pair.pair-h .feed-pair-picture .sign-sketch { width: 95px; height: 95px; }
.feed-pair.pair-v .feed-pair-picture .sign-sketch { width: 69px; height: 69px; }
.feed-pair-picture.slot-empty { color: #8a7a5c; font-size: 11px; font-weight: 700; }
.feed-pair-letter {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-weight: 800;
  font-size: 12px;
}
.feed-pair-note { flex-basis: 100%; color: #8a7a5c; font-size: 11px; font-weight: 700; text-align: center; }
.pair-note { margin: 4px 0 0; }

.templates { display: flex; flex-direction: column; gap: 16px; }
.template {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.template-head { display: flex; align-items: baseline; gap: 10px; }
.template-head h3 { margin: 0; font-size: 17px; }
.template-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 1000px) { .template-body { grid-template-columns: 1fr; } .template-sim { align-items: center; } }
.template-words p { margin: 4px 0; }
.template-words h4 { margin: 14px 0 6px; font-size: 14px; }
.template-sim { position: static; }
.template-answers button { font-size: 12px; padding: 3px 10px; }
.template-open p { margin: 6px 0 0; }

/* === the yes/no question (D111) =========================================== */
/* Alex's 402 x 874 game frame (app: yes-no-card.tsx, true-false-parts.tsx) at the phone's
   scale, 0.773: every position below is his, times that. The fur ground is a flat dark here. */
.feed-page.yesno {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #262626;
  color: #fff;
}
.feed-page.yesno .app-status { color: #fff; }
.yesno-rail {
  position: absolute;
  top: 44px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 20px;
  color: #fff;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
}
.yesno-sign {
  position: absolute;
  top: 25px;
  left: 87px;
  display: grid;
  place-items: center;
  width: 139px;
  height: 139px;
  overflow: hidden;
  border-radius: 50%;
}
.yesno-sign img, .yesno-sign svg, .yesno-picture img, .yesno-picture svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.yesno-sign.slot-empty { font-size: 11px; font-weight: 700; color: #ccc; }
/* Nunito Bold 24/33 at 0.773, white, a black outline and the 0/4/4 shadow. */
.yesno-statement {
  position: absolute;
  top: 181px;
  left: 39px;
  width: 233px;
  color: #fff;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18.5px;
  font-weight: 800;
  line-height: 25px;
  text-align: center;
  text-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
  -webkit-text-stroke: 1.5px #000;
  paint-order: stroke fill;
}
.yesno-statement.no-sign { top: 124px; }
/* The white card: 280pt tilted 15° while waiting, 210pt straight once answered. */
.yesno-card {
  position: absolute;
  top: 276px;
  left: 49px;
  box-sizing: border-box;
  width: 216px;
  height: 216px;
  padding: 9px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25);
  transform: rotate(-15deg);
}
.yesno-card.answered {
  top: 248px;
  left: 74px;
  width: 162px;
  height: 162px;
  transform: none;
}
.yesno-picture {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
.yesno-picture.slot-empty { background: #f3f3f3; color: #8a7a5c; font-size: 11px; font-weight: 700; }
.yesno-mark {
  position: absolute;
  top: 17px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.yesno-mark.yes { background: #577f0b; }
.yesno-mark.no { background: #e84545; }
.yesno-verdict {
  position: absolute;
  top: 441px;
  left: 20px;
  display: grid;
  gap: 6px;
  width: 153px;
}
.yesno-verdict-title { font-family: 'Fugaz One', system-ui, sans-serif; font-size: 18.5px; line-height: 26px; color: #a8fe05; }
.yesno-verdict-body { font-family: 'Nunito', system-ui, sans-serif; font-size: 12.4px; font-weight: 700; line-height: 17px; color: #fff; }
/* «Button Yellow» (220:1032): 68pt tall, a 24pt radius, both running off the screen at their outer end. */
.yesno-button {
  position: absolute;
  top: 540px;
  box-sizing: border-box;
  height: 52px;
  border: 2px solid rgba(10, 10, 10, 0.35);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), #444648;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2), 0 2px 3px rgba(0, 0, 0, 0.14);
}
.yesno-button.left { left: -25px; width: 176px; }
.yesno-button.right { left: 161px; width: 237px; }
.yesno-button span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 32px;
  display: grid;
  place-items: center;
  width: 130px;
  color: #fff;
  font-family: 'Fugaz One', system-ui, sans-serif;
  font-size: 20px;
  text-shadow: 0 2px 3px rgba(88, 88, 88, 0.46);
}
.yesno-nav {
  position: absolute;
  bottom: 23px;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  box-sizing: border-box;
  width: 117px;
  height: 40px;
  margin-left: -58px;
  border: 2px solid rgba(10, 10, 10, 0.35);
  border-radius: 20px;
  background: #1a1a1a;
  color: #534e4a;
  font-size: 14px;
}
.yesno-nav .on { color: #fff; }
/* The pair picker above a yes/no question's two answers. */
.yes-no-pair { margin-bottom: 8px; }

/* === topics: Pesi's review (D106, D129) ================================== */

/* Propuesta, a topic waiting for her review: a colour of its own, since Borrador's amber means
   «testers may see it» and a Propuesta nobody sees. Primer's «done» purple. */
:root {
  --proposed: #8250df;
  --proposed-bg: #fbefff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --proposed: #a371f7;
    --proposed-bg: #271052;
  }
}

:root[data-theme='dark'] {
  --proposed: #a371f7;
  --proposed-bg: #271052;
}

:root[data-theme='light'] {
  --proposed: #8250df;
  --proposed-bg: #fbefff;
}

.badge.proposed { background: var(--proposed-bg); color: var(--proposed); }
.badge.role { background: var(--card-inset); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.topic-chapter { width: auto; max-width: 360px; }
.topic-group {
  padding: 10px 10px 4px;
  border-bottom: 1px solid var(--line);
  background: var(--card-inset);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}
.topic-row { grid-template-columns: minmax(0, 1fr) auto; }
/* A topic's title is the learner's question: read whole, not cut. */
.topic-row .visual-text strong { white-space: normal; }
.topic-row-end { display: flex; align-items: center; gap: 6px; }
.note-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

.topic-title { margin: 0; font-size: 18px; }
.topic-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 0; }
.topic-decision { margin: 10px 0 0; font-size: 15px; }
.topic-actions {
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-inset);
}
.topic-actions p { margin: 0 0 8px; }
.topic-actions .note { margin: 8px 0 0; }
.topic-moves { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-moves button[aria-pressed='true'] { box-shadow: inset 0 0 0 2px currentColor; }
.note.good { color: var(--verified); }
.note-editor .actions { margin: 8px 0 0; }
.note-editor .note { margin: 6px 0 0; }
.note-editor.dirty textarea { border-color: var(--partial); }
.topic-section-head { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; }
.topic-section-head h4 { margin: 0; font-size: 15px; }

.topic-card,
.topic-case {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
.topic-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 18px; }
/* Open, the notes for the team sit beside the card on a wide screen: the card and the law it
   rests on, side by side. Closed, they wait under it. */
@media (min-width: 1100px) {
  .topic-card:has(> .team-notes[open]) { grid-template-columns: minmax(0, 1fr) minmax(240px, 42%); }
  .topic-card:has(> .team-notes[open]) > .team-notes { grid-column: 2; grid-row: 1; }
}
.topic-card-title { margin: 8px 0 4px; font-size: 15px; }
.topic-card-text { margin: 4px 0; white-space: pre-wrap; }
.topic-steps { margin: 6px 0; padding-left: 22px; }
.topic-steps li { margin: 2px 0; }
.topic-memory { margin: 8px 0 0; padding: 6px 10px; border-radius: 6px; background: var(--verified-bg); }
.topic-boundary { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--accent); border-radius: 6px; background: var(--card-inset); }
.topic-signs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.topic-signs li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}
.topic-signs code, .team-ref { font-size: 12px; color: var(--ink-soft); }
.topic-clip { margin: 8px 0 0; }
.topic-scene { margin: 8px 0 0; padding: 6px 10px; border: 1px dashed var(--line); border-radius: 6px; font-size: 14px; }
.topic-scene p { margin: 0; }
.topic-scene p + p { margin-top: 4px; }
.card-note { margin-top: 10px; font-size: 13px; }
.card-note summary, .team-notes summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.card-note .field label { margin-top: 6px; }
.team-notes[open] { align-self: start; padding: 8px 10px; border-radius: 6px; background: var(--card-inset); }
.team-notes[open] summary { margin-bottom: 8px; }
.team-facts { grid-template-columns: 120px minmax(0, 1fr); }
@media (max-width: 600px) { .team-facts { grid-template-columns: 1fr; } }
.team-ref { display: inline-block; margin: 0 6px 2px 0; }
.team-rules { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
.team-rules blockquote { margin: 4px 0; padding-left: 8px; border-left: 2px solid var(--line); font-style: italic; }
.team-rules button { display: block; margin-top: 4px; }

.topic-case-stem { margin: 8px 0; font-weight: 600; }
.topic-options { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.topic-options li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.topic-options li.right { border-color: var(--verified); background: var(--verified-bg); }
.topic-option { display: flex; align-items: baseline; gap: 8px; }
.topic-option-letter { font-weight: 700; color: var(--ink-soft); }
.topic-option .chip { margin-left: auto; }
.topic-feedback { margin: 2px 0 0 18px; }
.topic-case-meta { margin: 8px 0 0; }

/* === statistics (D131) ====================================================
   One hue for the data (the accent), status colours only where a signal says so, text in
   the ink tokens. The chart is one series, so it carries no legend; its title names it. */

.stats-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.stats-controls .check { margin-top: 0; }

.stats-block { margin-top: 22px; }
.stats-block h3 { margin: 0 0 8px; font-size: 15px; }
.stats-block .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stats-two { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 20px; }
@media (max-width: 900px) { .stats-two { grid-template-columns: 1fr; } }

.actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.action { width: 100%; box-sizing: border-box; text-align: left; }
.action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
}
.action.missing { border-left-color: var(--missing); }
.action.partial { border-left-color: var(--partial); }
.action.quiet, .action.none { color: var(--ink-soft); }
.action .dot { background: var(--ink-faint); }
.action .dot.missing { background: var(--missing); }
.action .dot.partial { background: var(--partial); }

.small-btn { padding: 3px 10px; font-size: 12px; white-space: nowrap; }

.tile.kpi { border-top-color: var(--accent); display: flex; flex-direction: column; gap: 2px; }
.tile.kpi strong { font-size: 24px; font-variant-numeric: normal; letter-spacing: -0.01em; }
.tile .kpi-label { font-size: 12px; color: var(--ink-soft); }
.tile .delta { font-size: 12px; color: var(--ink-faint); }
.tile .delta.good { color: var(--complete); }
.tile .delta.bad { color: var(--missing); }

.chart { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px 4px; }
.chart svg { display: block; width: 100%; height: auto; max-height: 190px; font-family: var(--font-sans); }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .tick { fill: var(--ink-faint); font-size: 10px; font-variant-numeric: tabular-nums; }
.chart .value { fill: var(--ink); font-size: 11px; font-weight: 600; }
.chart .bar path { fill: var(--accent); }
.chart .bar.empty path { fill: var(--line); }
.chart .bar .hit { fill: transparent; }
.chart .bar:hover path { fill: var(--accent-hover); }
.chart .bar.empty:hover path { fill: var(--ink-faint); }
.chart-table { margin-top: 6px; }
.chart-table summary { cursor: pointer; }

.funnel { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.funnel-row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 10px; font-size: 13px; }
.funnel-label { color: var(--ink-soft); }
.funnel-track { height: 14px; background: var(--line-subtle); border-radius: 4px; overflow: hidden; }
.funnel-bar { height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.funnel-figures { white-space: nowrap; font-variant-numeric: tabular-nums; }
.funnel-drop { color: var(--missing); font-size: 12px; }

.stats-table .table-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
table.stats { width: 100%; border-collapse: collapse; font-size: 13px; }
table.stats th, table.stats td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line-subtle); vertical-align: top; }
table.stats th { font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--card-inset); position: sticky; top: 0; white-space: nowrap; }
table.stats tr:last-child td { border-bottom: 0; }
table.stats .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.stats .cell-title { min-width: 220px; max-width: 420px; }
table.stats .cell-title .muted { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
table.stats .badge { vertical-align: middle; }
.badge.cov.quiet { background: var(--archived-bg); color: var(--archived); }

.report-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.report-list li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.report-list code { font-family: var(--font-mono); font-size: 12px; }

/* === the Book's map (D133): Libro's tree, its page, its phone ============== */

/* The tree: temas, their lessons, their situations, one flat list indented by level. */
.topic-tree .topic-group { padding: 0; background: transparent; }
.tree-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--card-inset);
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.tree-row:hover { background: var(--page); }
.tema-row .tree-label { font-weight: 600; }
.lesson-row { padding-left: 22px; background: transparent; color: var(--ink-soft); }
.tree-chev { color: var(--ink-soft); font-size: 11px; }
.tree-end { display: flex; align-items: center; gap: 6px; }
.tree-count { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.topic-leaf .topic-row { padding-left: 40px; }

/* The page: where the situation sits, its question, the phone's switch. */
.topic-crumb { margin: 0 0 6px; }
.topic-title-row { display: flex; align-items: flex-start; gap: 12px; }
.topic-title-row .topic-title { flex: 1; }
#t-sim-toggle { flex: none; }
#t-sim-toggle[aria-pressed='true'] { box-shadow: inset 0 0 0 2px var(--accent); }
.chip.package { background: var(--accent-bg, var(--card-inset)); color: var(--ink); }

/* With the phone open: tree | page | phone; narrower, the phone sits above the page. */
.topics-layout.with-sim {
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) 360px;
  grid-template-areas: 'tree page phone';
}
.topics-layout.with-sim > .topic-tree { grid-area: tree; }
.topics-layout.with-sim > .topic-detail { grid-area: page; }
.topics-layout.with-sim > .topic-sim { grid-area: phone; }
@media (max-width: 1350px) {
  .topics-layout.with-sim {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    grid-template-areas: 'tree phone' 'tree page';
  }
  .topics-layout.with-sim > .topic-sim { position: static; align-items: center; }
  .topic-sim > .sim-head, .topic-sim > .visual-list, .topic-sim > .sim-caption, .topic-sim > .sim-list-title {
    align-self: stretch;
  }
}
@media (max-width: 900px) {
  .topics-layout.with-sim { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'tree' 'phone' 'page'; }
  .topics-layout .topic-tree { max-height: 45vh; }
}
.topic-sim .sim-head { align-items: center; }
.topic-sim #t-sim-close { margin-left: auto; }
.topic-sim .phone { max-width: 100%; }
.sim-dot.book { background: #efa253; }

/* The app's Book card (components/book/topic-card.tsx), inside the phone. */
.tc-page { display: flex; flex-direction: column; gap: 12px; }
.tc-decision {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 3px solid #fff;
  border-radius: 20px;
  background: var(--b-quote);
  font-weight: 800;
  font-size: 16px;
  line-height: 22px;
}
.tc-decision-label {
  font-family: 'Fugaz One', system-ui, sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--b-ink-soft);
}
.app-card.tc { gap: 12px; }
.tc-chip { align-self: flex-start; padding: 2px 12px; border-radius: 999px; background: var(--b-accent); color: #000; font-weight: 800; font-size: 12px; line-height: 16px; }
.tc-chip.dist { background: #000; color: var(--b-card); }
.tc-chip.worked { background: var(--b-quote); }
.tc-title { font-weight: 800; font-size: 18px; line-height: 23px; }
.tc-signs { display: flex; flex-wrap: wrap; gap: 14px; }
.tc-sign { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 120px; }
.tc-sign-picture { display: grid; place-items: center; width: 56px; height: 56px; }
.tc-sign-picture .sign-sketch, .tc-sign-picture img { width: 56px; height: 56px; object-fit: contain; }
.tc-caption { font-weight: 700; font-size: 12px; line-height: 15px; text-align: center; color: var(--b-ink-soft); }
.tc-caption.alone { padding: 4px 8px; border-radius: 8px; background: var(--b-quote); color: var(--b-ink); }
.tc-steps { display: flex; flex-direction: column; gap: 8px; }
.tc-step { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 22px; }
.tc-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--b-accent); font-weight: 800; font-size: 13px; }
.tc-memory { padding: 8px 16px; border-left: 4px solid var(--b-accent); border-radius: 10px; background: var(--b-quote); font-weight: 800; font-size: 15px; line-height: 21px; }
.tc-boundary { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px dashed rgba(0, 0, 0, 0.12); }
.tc-reveal {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font: 700 15px/21px 'Nunito', system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.tc-dot { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--b-accent); font-weight: 800; }
.tc-clip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 22px;
  border: 0;
  border-radius: 24px;
  background: var(--b-accent);
  color: #fff;
  font-family: 'Fugaz One', system-ui, sans-serif;
  font-size: 16px;
  cursor: pointer;
}
.tc-play { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #fff; }

/* === App (D133): the app's switches, and the learners' open reports ======== */

#list-pane .settings-moved { margin: auto 0 0; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.app-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 16px; align-items: start; }
@media (max-width: 900px) { .app-layout { grid-template-columns: minmax(0, 1fr); } }
#app .settings,
.app-reports-box {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-xs);
}
#app .settings[open] { max-height: none; overflow: visible; }
#app .settings[open] .actions { bottom: 0; background: var(--card); }
#app .scope-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 14px; }
.app-reports-box h3 { margin: 0 0 6px; font-size: 15px; }
.app-reports { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-report-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.app-report-row code { font-size: 12px; word-break: break-all; }

/* === Stage 2 (D134): Revisión, what cites a legal source, a situation's package, games ====== */

.tab-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--proposed-bg);
  color: var(--proposed);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.review-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 760px; }
.review-tema { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 6px 0 4px; border-bottom: 1px solid var(--line); }
.review-lesson { margin: 8px 0 2px 4px; }
.review-list .topic-leaf { margin-left: 8px; }
.topic-back { margin-bottom: 6px; }
.topic-packages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; }
.topic-packages p { flex-basis: 100%; margin: 0; }
.topic-package-pick { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; }
.topic-package-pick select { width: auto; min-width: 180px; }
.cited-situation { display: flex; flex-direction: column; gap: 6px; }
.cited-situation .card-head { justify-content: space-between; }
.cited-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cited-cards li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.game-row .card-head { align-items: center; }

/* A game's round on the phone: the same card the feed draws, in words where the app draws a scene. */
.game-card { gap: 10px; }
.game-pill { align-self: flex-start; padding: 2px 10px; border-radius: 12px; background: #ffae02; font-weight: 800; font-size: 12px; }
.game-title { font-weight: 800; font-size: 18px; line-height: 23px; }
.game-heading { font-weight: 700; font-size: 15px; }
.game-instruction { font-size: 14px; color: #555; }
.game-tile { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border-radius: 14px; background: #f3f3f3; text-align: center; }
.game-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.game-side { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 14px; background: #f3f3f3; font-size: 14px; text-align: center; }
.game-side.right { background: #abed65; }
.game-vehicles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.game-vehicles li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 14px; background: #f3f3f3; font-size: 14px; line-height: 19px; }
.game-tag { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 10px; background: #d9d9d9; font-weight: 800; font-size: 12px; text-align: center; }
.game-tag.right { background: #abed65; }
.game-verdict { padding: 8px 12px; border-radius: 12px; background: #eaf8d6; font-size: 14px; line-height: 19px; font-weight: 700; }
.sim-dot.game:not([aria-current='true']) { background: #5aa469; }

/* === Editing the Book in place (D135) ======================================= */

.topic-title-tools, .topic-section-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#t-edit { margin: 10px 0; }
.topic-editor, .topic-card-editor { margin: 8px 0; }
.topic-editor .actions, .topic-card-editor .actions { flex-wrap: wrap; }
.sign-row input[type='text'] { min-width: 0; }
.sign-row input[data-field='sign-key'] { flex: 0 0 9em; }
.option-why {
  display: block;
  width: calc(100% - 34px);
  margin: -2px 0 10px 34px;
  padding: 6px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.legal-preview { margin: -6px 0 8px; }
.li-with-add, .topic-lesson.with-add { display: flex; align-items: center; gap: 4px; }
.topic-lesson.with-add .lesson-row { flex: 1 1 auto; min-width: 0; }
.tree-add { flex: none; padding: 0 8px; line-height: 24px; }
.edit-button { margin-left: auto; }

/* The sign-in screen (D147): PasaCebra's zebra fur behind one card with one Google button. The
   picture is the app's own feed backdrop, resized (editor/brand/fondo-cebra.webp). */
#gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: auto;
  place-items: center;
  padding: 24px 16px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.36), rgba(0, 0, 0, 0.58)),
    url('brand/fondo-cebra.webp') center / cover no-repeat,
    #111;
}
.gate-card {
  max-width: 360px;
  padding: 30px 26px 22px;
  text-align: center;
  border-radius: 18px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4);
  background: var(--card);
  background: color-mix(in srgb, var(--card) 95%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.gate-mark { font-size: 46px; line-height: 1; }
.gate-brand {
  margin: 6px 0 0;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
  background: linear-gradient(180deg, #f7c948 10%, #c98a08 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gate-sub { margin: 2px 0 22px; font-size: 14px; color: var(--ink-soft); }
.gate-hint { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 11px 16px;
  font: inherit;
  font-weight: 600;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.25);
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.google-btn:hover { background: #f8f9fa; box-shadow: 0 1px 4px rgba(60, 64, 67, 0.4); }
.google-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.google-btn:disabled { opacity: 0.65; cursor: progress; }
.google-btn .g-logo { flex: none; }
#sign-in-form .note { text-align: center; }
#sign-in-form .google-link { display: block; margin-top: 12px; color: var(--accent); }

/* The Editores tab (D147). */
.editors-pending { list-style: none; margin: 8px 0 0; padding: 0; }
.editors-pending li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line-subtle); }
.editors-pending input { width: 12em; }
.coverage-note.bad { border-left-color: var(--danger); }
#editors-status.bad { color: var(--danger); }