/* Redesign fonts, self-hosted (SIL Open Font License 1.1; licences in app/assets/fonts/redesign/).
   Latin + latin-ext WOFF2 subsets as served by Google Fonts on 15 Oct 2026; no Google Fonts call in production.
   Atkinson Hyperlegible Next: variable, 400–700, all UI and reading text. Source Serif 4: 600, the page h1 only. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/redesign/atkinson-next-latin-ext-7dae0c6c66af1aec82e096186aeb1f0e6fa36ab8061ed65422f2b7daf4dd93f3.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/redesign/atkinson-next-latin-18b2a1a39a2fa298b0ba5390aca68462669826c90925656f1c1f6796e0e1bbaf.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/redesign/source-serif-4-600-latin-ext-ba70bfd7a5f52800fb9abedfe1926db2b1b614b10cb8ac1e5798a14fb06a02d4.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/redesign/source-serif-4-600-latin-f2b7e1cf1d277b7608231868135648f8ad8e2b58d8e97ca088bee15dc357bee7.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* "GC Plain Zero": only U+0030, Atkinson Hyperlegible Next's 0 without its slash (the two counter halves joined; same
   curves and weights; script/redesign_plain_zero_font.py). Put first in the stack where a slashed zero reads like code:
   prices and marketing numbers (redesign/rails.css). Everything else keeps the slashed zero. */
@font-face {
  font-family: "GC Plain Zero";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/redesign/atkinson-next-zero-7f6f19f3c477387a5d85061a0c391b4852f4224b4777955ea6f5b48b870863e8.woff2) format("woff2");
  unicode-range: U+0030;
}
/* GoConqr · site.css · the design system for the whole redesigned site (direction A "Biblioteca")
   A calm reference library: one slate accent, hairlines instead of boxes, Atkinson Hyperlegible Next
   for all UI and reading, Source Serif 4 (600) for the page h1 only. Plain CSS, no build step.
   Breakpoints: 640 (phones) · 900 (sidebar, header search, desktop actions) · 1100 (side columns).

    1 Tokens            6 Navigation          11 Layouts: marketing, app, focus, study, editor
    2 Base and type     7 Menus and overlays  12 Quiz player (desktop, A)
    3 Layout helpers    8 Content parts       13 Focus mode (phones, dark)
    4 Buttons, links    9 Header and search   14 Marked results (B, re-tokenised)
    5 Forms            10 Sidebar, footer     15 Feedback widget · 16 Dialog and form parts · 17 Motion and print
    18 Social proof: member quotes, press and award rows (data in content/social-proof.json)
    19 Marketing sections: bands, section headings, tool cards, list panels, link cards, closing call to action      */

/* 1 · Tokens ------------------------------------------------------------------ */

:root {
  /* Paper and ink (all ink steps AA on white) */
  --paper: #fff;
  --paper-2: #f5f7f8;
  --paper-3: #eaeef1;
  --ink: #15222b;
  --ink-2: #3f4e59;
  --ink-3: #5b6973;
  --rule: #e2e6e9;      /* hairlines */
  --rule-2: #c9d1d7;    /* section rules, card borders */
  --rule-3: #8796a1;    /* control borders: 3:1 on white (inputs, checkboxes, answer keys) */

  /* One accent: primary actions, selection, links. Evolved from today's header #3f6a80 */
  --accent: #2c6182;
  --accent-ink: #1f4a65;
  --accent-wash: #ebf2f6;
  --accent-rule: #a8c1d1;

  /* Status: always paired with an icon and a word */
  --ok: #17703a;   --ok-wash: #ecf6ef;   --ok-rule: #9fcdb0;
  --bad: #b3261e;  --bad-wash: #fcefed;  --bad-rule: #ebb3ac;
  --warn: #8a5300; --warn-wash: #fdf4e3; --warn-rule: #e3c58c;   /* also "partially correct" */

  /* Bookcloth: one colour per resource type. Only 3 px top edges, 8 px swatches and Create icons */
  --c-mindmap: #0f7668;
  --c-flashcards: #a2560c;
  --c-flowchart: #7a3f86;
  --c-quiz: #3f4fa6;
  --c-note: #4f7426;
  --c-slides: #b03a2e;
  --c-course: #6e4b2a;

  /* Focus mode: the phone quiz player, a deep slate derived from --ink (no purple, no glow) */
  --f-bg: #101b23;
  --f-2: #1a2832;
  --f-3: #22394a;
  --f-line: #364b5a;
  --f-ring: #8ea2b1;
  --f-text: #eef2f5;
  --f-muted: #a9b8c3;
  --f-accent: #9cc3dc;
  --f-ok: #63c78f;   --f-ok-bg: #12301f;
  --f-bad: #f2938a;  --f-bad-bg: #3b1b1a;
  --f-warn: #e6b65e; --f-warn-bg: #33270f;

  /* Type: one UI face; the serif is the page h1 only */
  --sans: "Atkinson Hyperlegible Next", "Segoe UI", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --fs-0: .75rem;                                    /* 12  tags and badges only */
  --fs-1: .875rem;                                   /* 14  meta, labels         */
  --fs-2: 1rem;                                      /* 16  body, UI             */
  --fs-3: 1.125rem;                                  /* 18  options, h2          */
  --fs-4: clamp(1.25rem, 1.12rem + .4vw, 1.375rem);  /* 20–22 questions, dialogs */
  --fs-5: clamp(1.625rem, 1.4rem + .8vw, 2rem);      /* 26–32 resource h1        */
  --fs-6: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem); /* 30–44 page h1, scores    */

  /* Space: 4-based */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* Shape and depth */
  --h: 44px; --h-sm: 36px; --h-lg: 52px;
  --r: 6px;        /* the one radius */
  --r-in: 4px;     /* only for parts nested inside an --r box (menu items, tags, kbd) */
  --shadow-1: 0 1px 2px rgb(21 34 43 / .06), 0 6px 16px rgb(21 34 43 / .08);  /* floating: menus, dialogs, tools */
  --shadow-2: 0 -6px 20px rgb(21 34 43 / .07);                                /* stuck bottom bars */
  --ring: 2px solid var(--accent);
  --scrim: rgb(21 34 43 / .45);
  --t: .15s;

  --sidebar: 232px;
  --gutter: 16px;
  --main-pad: var(--gutter);
  /* Layers (z-index), lowest to highest. Small local values (1–3) inside one component stay plain numbers. */
  --z-sticky: 10;   /* bottom bars: .stickybar, the quiz's phone action bar */
  --z-bar: 20;      /* header, editor bar */
  --z-panel: 30;    /* panels over the page: editor panel on phones, the quiz question grid */
  --z-pill: 35;     /* "Escríbenos" pill: under menus and the autocomplete (critique 16 Oct #11) */
  --z-menu: 40;     /* menus */
  --z-ac: 45;       /* search autocomplete */
  --z-scrim: 55;
  --z-drawer: 60;   /* drawers and the phone sidebar */
  --z-full: 80;     /* focus mode and the full-screen fallback (area pages go up to +5 for present modes) */
  --z-toast: 90;
  --z-skip: 100;    /* "Saltar al contenido" */
}
@media (pointer: coarse) { :root { --h: 48px; --h-sm: 44px; } }
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; --main-pad: 56px; } }

/* 2 · Base and type ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-2)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, fieldset, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s-5) 0; }
.num, .price, kbd, .n { font-variant-numeric: tabular-nums; }
:focus-visible { outline: var(--ring); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -64px; z-index: var(--z-skip); background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.i-sm { width: 16px; height: 16px; }

.h1 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-6); line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
.h1--res { font-size: var(--fs-5); line-height: 1.15; }
.h2 { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.h2--lg { font-size: var(--fs-4); }
.h3 { font-size: var(--fs-2); font-weight: 700; line-height: 1.35; }
.lead { font-size: var(--fs-3); color: var(--ink-2); line-height: 1.45; }
.meta { font-size: var(--fs-1); color: var(--ink-3); }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-1); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--fs-4); font-weight: 700; line-height: 1.3; margin-top: 1.75em; }
.prose h3 { font-size: var(--fs-3); font-weight: 700; line-height: 1.35; margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose a:not(.btn) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote { padding-left: 16px; border-left: 2px solid var(--rule-2); color: var(--ink-2); }
.prose code { font: .9em/1.4 ui-monospace, Consolas, monospace; background: var(--paper-2); padding: 1px 4px; border-radius: var(--r-in); }
.prose pre { background: var(--paper-2); padding: 12px 14px; border-radius: var(--r); overflow-x: auto; }
.prose pre code { padding: 0; background: none; }
.prose img { border-radius: var(--r); }

/* 3 · Layout helpers ---------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: calc(760px + 2 * var(--gutter)); }
/* Study and quiz pages (22 Oct, Dan: the full 1200 px player went "a bit too far"): a 1040 px column on wide screens,
   still ~14% wider than today's 911 px player */
@media (min-width: 1100px) { .wrap--study { max-width: calc(1040px + 2 * var(--gutter)); } }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-content: start; }
.stack.stack-sm { gap: var(--s-2); }
.stack.stack-lg { gap: var(--s-5); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

.sec { margin-top: 56px; }
.sec--first { margin-top: 32px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--rule-2); margin-bottom: 6px; }
.sec-head .more, .band-head .more, .list-panel-head .more { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px -6px; font-size: var(--fs-1); font-weight: 600; color: var(--accent); white-space: nowrap; }
.sec-head .more:hover, .band-head .more:hover, .list-panel-head .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.count { color: var(--ink-3); font-weight: 400; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 16px; }
@media (min-width: 640px) { .grid--2, .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* Main column + 320 px side column, divided by a hairline (results, sign-up nudges, plans) */
.split { display: grid; gap: 40px; }
.split > .side { padding-top: 24px; border-top: 1px solid var(--rule-2); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; -moz-column-gap: 72px; column-gap: 72px; align-items: start; }
  .split > .side { padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--rule-2); }
}
/* Main column + 300 px aside on wide screens (app home, lists) */
.cols { display: grid; gap: 0 56px; }
@media (min-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }

@media (min-width: 900px) { .only-sm { display: none !important; } }
@media (max-width: 899px) { .only-lg { display: none !important; } }
@media (max-width: 1099px) { .only-xl { display: none !important; } }

/* 4 · Buttons and links ------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative;
  height: var(--h); padding: 0 18px; border: 1px solid transparent; border-radius: var(--r); background: none;
  font-weight: 600; font-size: var(--fs-2); line-height: 1; white-space: nowrap; text-decoration: none;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.btn .i { width: 18px; height: 18px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--rule-2); }
.btn-secondary:hover { border-color: var(--ink-3); background: var(--paper-2); }
.btn-quiet { color: var(--ink-2); padding: 0 12px; }
.btn-quiet:hover { background: var(--paper-2); color: var(--ink); }
.btn-quiet .i { color: var(--ink-3); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger:hover { background: #8f1e17; }
.btn-sm { height: var(--h-sm); padding: 0 12px; gap: 6px; font-size: var(--fs-1); }
.btn-sm .i { width: 16px; height: 16px; }
.btn-lg { height: var(--h-lg); padding: 0 24px; font-size: var(--fs-3); }
.btn-block { width: 100%; }
/* Phones: a primary label longer than its box (a longer locale) wraps onto two lines instead of spilling out.
   flex-shrink: 0 keeps today's layouts (a primary button never shrank below its label); max-width caps it at its box. */
@media (max-width: 639px) {
  .btn-primary, .p-go { flex-shrink: 0; max-width: 100%; height: auto; min-height: var(--h); padding-block: 6px; white-space: normal; line-height: calc(1em + 4px); text-align: center; }
  .btn-primary.btn-sm { min-height: var(--h-sm); }
  .btn-primary.btn-lg { min-height: var(--h-lg); }
}
.btn:disabled, .btn[aria-disabled="true"] { background: var(--paper-3); border-color: transparent; color: var(--ink-3); cursor: not-allowed; }
.btn-quiet:disabled, .btn-quiet[aria-disabled="true"] { background: none; opacity: .55; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading::before { content: ""; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none; width: var(--h); height: var(--h); padding: 0; border: 0; border-radius: var(--r); background: transparent; color: var(--ink-2); }
.icon-btn:hover, .icon-btn[aria-expanded="true"], .icon-btn[aria-pressed="true"] { background: var(--paper-2); color: var(--ink); }
.icon-btn-sm { width: var(--h-sm); height: var(--h-sm); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; background: none; }

.link { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.link:hover { color: var(--accent-ink); text-decoration-thickness: 2px; }
.link-quiet { color: var(--ink-2); }
.link-quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
button.link, button.link-quiet { padding: 0; border: 0; background: none; font: inherit; }
.tap { display: inline-flex; align-items: center; min-height: 44px; }  /* a standalone text link with a 44 px target */

kbd { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: var(--r-in); background: var(--paper); font: 600 var(--fs-1)/1 var(--sans); color: var(--ink-3); }
.kbd-only { display: none !important; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .kbd-only:not([hidden]) { display: inline-grid !important; }
  p.kbd-only:not([hidden]) { display: block !important; }
}

/* 5 · Forms ------------------------------------------------------------------- */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.label { font-weight: 600; line-height: 1.35; }
.label-note { font-weight: 400; color: var(--ink-3); }
.help { font-size: var(--fs-1); color: var(--ink-3); }
.field-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-1); font-weight: 600; color: var(--bad); }
.field-error .i { width: 16px; height: 16px; margin-top: 1px; }
.input { width: 100%; height: var(--h); padding: 0 12px; border: 1px solid var(--rule-3); border-radius: var(--r); background: var(--paper); color: var(--ink); font-size: var(--fs-2); }
.input::-moz-placeholder { color: var(--ink-3); opacity: 1; }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { border-color: var(--ink-3); }
.input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input[aria-invalid="true"]:focus { outline-color: var(--bad); }
.input:disabled { background: var(--paper-2); border-color: var(--rule-2); color: var(--ink-3); cursor: not-allowed; }
textarea.input { height: auto; min-height: 112px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.input { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6973' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.field-search { position: relative; }
.field-search > .i, .hsearch > .i { position: absolute; left: 12px; top: 22px; translate: 0 -50%; color: var(--ink-3); pointer-events: none; }
.field-search input, .hsearch input { width: 100%; height: var(--h); padding: 0 12px 0 40px; border: 1px solid var(--rule-3); border-radius: var(--r); background: var(--paper); font-size: var(--fs-2); color: var(--ink); }
.field-search input::-moz-placeholder, .hsearch input::-moz-placeholder { color: var(--ink-3); opacity: 1; }
.field-search input::placeholder, .hsearch input::placeholder { color: var(--ink-3); opacity: 1; }
.field-search input:focus, .hsearch input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
@media (pointer: coarse) { .field-search > .i, .hsearch > .i { top: 24px; } }

.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset > legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; line-height: 1.4; cursor: pointer; }
.choice + .choice { border-top: 1px solid var(--rule); }
.cb, .rb { -webkit-appearance: none; -moz-appearance: none; appearance: none; flex: none; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--rule-3); background: var(--paper); cursor: pointer; transition: background-color var(--t), border-color var(--t); }
.cb { border-radius: var(--r-in); }
.rb { border-radius: 50%; }
.cb:hover, .rb:hover { border-color: var(--ink-2); }
.cb:checked { border-color: var(--accent); background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.rb:checked { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--paper); }
.cb:disabled, .rb:disabled { opacity: .45; cursor: not-allowed; }
.switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.switch input { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; flex: none; width: 40px; height: 24px; margin: 0; border-radius: 12px; background: var(--rule-3); cursor: pointer; transition: background-color var(--t); }
.switch input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(21 34 43 / .3); transition: transform var(--t); }
.switch input:checked { background: var(--accent); }
.switch input:checked::before { transform: translateX(16px); }
.switch input:disabled { opacity: .45; cursor: not-allowed; }
.divider { display: flex; align-items: center; gap: 12px; font-size: var(--fs-1); color: var(--ink-3); }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* 6 · Navigation -------------------------------------------------------------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(90deg, var(--paper) 40%, rgb(255 255 255 / 0)) left / 32px 100% no-repeat local, linear-gradient(270deg, var(--paper) 40%, rgb(255 255 255 / 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(21 34 43 / .16), rgb(21 34 43 / 0)) left / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(21 34 43 / .16), rgb(21 34 43 / 0)) right / 14px 100% no-repeat scroll; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: var(--h); padding: 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline-offset: -2px; }
.tabpanel { padding-top: var(--s-5); }
.tabpanel:focus-visible { outline-offset: 4px; }
/* The tab strip is already a rule: the first section in a panel doesn't draw another */
.tabpanel > .sec:first-child { margin-top: 0; }
.tabpanel > .sec:first-child > .sec-head:first-child, .tabpanel > .sec-head:first-child { padding-top: 0; border-top: 0; }

/* Segmented control: radios, one pressed */
.seg { position: relative; justify-self: start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--h); margin: 0; padding: 0; border: 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--rule-2); }
.seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seg label { position: relative; display: grid; padding: 4px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.seg label > span { display: grid; place-items: center; padding: 0 16px; border-radius: var(--r-in); white-space: nowrap; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg label:hover > span { color: var(--ink); }
.seg label:has(input:checked) > span { background: var(--ink); color: #fff; }
.seg label:has(input:focus-visible) { outline: var(--ring); outline-offset: 2px; border-radius: var(--r); }

.crumbs { padding-top: 4px; font-size: var(--fs-1); color: var(--ink-3); }
.crumbs ol { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; flex: none; }
.crumbs li:last-child { flex: 0 1 auto; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--rule-2); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); }
.crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { display: block; overflow: hidden; text-overflow: ellipsis; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--s-6); }
.pager ol { display: flex; align-items: center; gap: 4px; }
.pager-n { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: var(--r); color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
button.pager-n { border: 0; background: none; font: inherit; font-weight: 600; }
.pager-n:hover { background: var(--paper-2); color: var(--ink); }
.pager-n[aria-current="page"] { background: var(--ink); color: #fff; }
.pager-gap { display: inline-grid; place-items: center; min-width: 24px; color: var(--ink-3); }
.pager-of { display: none; white-space: nowrap; font-size: var(--fs-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .pager { gap: 8px; } .pager ol { display: none; } .pager-of { display: block; } .pager > .btn { padding: 0 12px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 639px) { .chips--scroll { contain: inline-size; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; scrollbar-width: none; } .chips--scroll::-webkit-scrollbar { display: none; } }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--h); padding: 0 14px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--paper); color: var(--ink); white-space: nowrap; }
.chip:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-wash); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip[aria-pressed="true"] .count { color: #c9d3da; }

/* 7 · Menus and overlays ------------------------------------------------------ */
.menu { position: relative; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: var(--z-menu); min-width: 240px; max-width: calc(100vw - 2 * var(--gutter)); padding: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); }
.menu-list--left { right: auto; left: 0; }
.menu-list--up { top: auto; bottom: calc(100% + 6px); }
.menu-list.is-static { position: static; }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-in); background: none; color: var(--ink); text-align: left; font-size: var(--fs-2); white-space: nowrap; }
.menu-item:hover, .menu-item:focus-visible { background: var(--paper-2); outline-offset: -2px; }
.menu-item .i { color: var(--ink-3); }
.menu-item .tag-premium, .menu-item .menu-end { margin-left: auto; }
.menu-item[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); }
.menu-item--danger, .menu-item--danger .i { color: var(--bad); }
.menu-item:disabled { color: var(--ink-3); cursor: not-allowed; background: none; }
.menu-text { display: grid; gap: 1px; white-space: normal; padding-block: 8px; }
.menu-sub { font-size: var(--fs-1); color: var(--ink-3); line-height: 1.35; }
.menu-sep { height: 1px; margin: 6px -6px; background: var(--rule); }
.menu-label { padding: 8px 12px 4px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); }
.menu-head { display: flex; align-items: center; gap: 12px; margin: -6px -6px 6px; padding: 14px 18px 12px; border-bottom: 1px solid var(--rule); line-height: 1.3; }
.menu-head b { display: block; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 6px 0 12px; color: var(--ink-2); }

/* Dialog: centred on desktop, a bottom sheet on phones (native <dialog>, opened with showModal) */
.dlg { width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 760px); padding: 0; border: 0; border-radius: var(--r); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-1); overflow: hidden; }
.dlg[open], .dlg.is-static { display: flex; flex-direction: column; }
.dlg.is-static { position: relative; inset: auto; width: 100%; max-width: 560px; margin: 0; border: 1px solid var(--rule); }
.dlg::backdrop { background: var(--scrim); }
.dlg--wide { width: min(800px, calc(100vw - 32px)); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 8px 24px; }
.dlg-title { font-size: var(--fs-4); font-weight: 700; line-height: 1.3; }
.dlg-body { padding: 4px 24px 24px; overflow-y: auto; }
.dlg-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--rule); }
@media (max-width: 639px) {
  .dlg:not(.is-static), .dlg--wide:not(.is-static) { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: var(--r) var(--r) 0 0; }
  .dlg-head { padding-left: 16px; }
  .dlg-body { padding: 4px 16px 16px; }
  .dlg-foot { flex-direction: column-reverse; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
  .dlg-foot .btn { width: 100%; }
}

/* Drawer (phones: logged-out menu; the app sidebar) and its scrim */
.drawer, .sidebar--drawer { position: fixed; top: 0; bottom: 0; z-index: var(--z-drawer); width: min(300px, 86vw); overflow-y: auto; padding: 12px; background: var(--paper); box-shadow: var(--shadow-1); visibility: hidden; transition: transform .18s ease-out, visibility 0s linear .18s; }
.drawer--right { right: 0; transform: translateX(100%); }
.drawer--left, .sidebar--drawer { left: 0; transform: translateX(-100%); }
.drawer.is-open, .sidebar.is-open { transform: none; visibility: visible; transition: transform .18s ease-out; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.drawer-acts { display: grid; gap: 8px; margin: 16px 0; }
.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); }
html.no-scroll { overflow: hidden; }

/* Toasts: bottom centre on desktop, under the header on phones (the bottom belongs to page bars) */
.toasts { position: fixed; z-index: var(--z-toast); left: 50%; bottom: 24px; translate: -50% 0; display: grid; gap: 8px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 899px) { .toasts { top: 68px; bottom: auto; } }
.toast { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 6px 6px 16px; border-radius: var(--r); background: var(--ink); color: #fff; box-shadow: var(--shadow-1); pointer-events: auto; animation: rise .16s ease-out; }
.toast > span { flex: 1; min-width: 0; }
.toast > .i { color: #c9d3da; }
.toast--ok > .i { color: #8fd6aa; }
.toast--bad > .i { color: #f4a49b; }
.toast .icon-btn { width: 36px; height: 36px; color: #c9d3da; }
.toast .icon-btn:hover { background: rgb(255 255 255 / .1); color: #fff; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Notices: inline status messages, a wash and an icon, never a card */
.notice { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r); background: var(--accent-wash); color: var(--ink); }
.notice > .i { width: 22px; height: 22px; color: var(--accent); }
.notice-title { font-weight: 700; }
.notice-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice > .icon-btn { margin: -10px -10px -10px 0; }
.notice--ok { background: var(--ok-wash); }
.notice--ok > .i { color: var(--ok); }
.notice--warn { background: var(--warn-wash); }
.notice--warn > .i { color: var(--warn); }
.notice--bad { background: var(--bad-wash); }
.notice--bad > .i { color: var(--bad); }

/* 8 · Content parts ----------------------------------------------------------- */
.t-mindmap { --c: var(--c-mindmap); } .t-flashcards { --c: var(--c-flashcards); } .t-flowchart { --c: var(--c-flowchart); }
.t-quiz { --c: var(--c-quiz); } .t-note { --c: var(--c-note); } .t-slides { --c: var(--c-slides); } .t-course { --c: var(--c-course); }

/* Type label: 8 px bookcloth swatch + name */
.type { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-1); font-weight: 600; color: var(--ink-2); line-height: 1.3; }
.type::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c, var(--ink-3)); flex: none; }
.tag-premium { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--accent-rule); border-radius: var(--r-in); font-size: var(--fs-0); font-weight: 700; letter-spacing: .01em; color: var(--accent); }
.status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); color: var(--ink-3); vertical-align: bottom; }
.status .i { width: 14px; height: 14px; }
.status--private { color: var(--ink-2); }
.status--draft { color: var(--warn); font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid var(--rule-2); border-radius: var(--r-in); font-size: var(--fs-0); font-weight: 700; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.badge--accent { color: var(--accent-ink); border-color: var(--accent-rule); }
.badge--ok { color: var(--ok); border-color: var(--ok-rule); }
.badge--bad { color: var(--bad); border-color: var(--bad-rule); }
.badge--warn { color: var(--warn); border-color: var(--warn-rule); }
.count-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #fff; font-size: var(--fs-0); font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--paper); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; line-height: 1; }
.avatar--lg { width: 64px; height: 64px; font-size: var(--fs-5); }
.avatar-btn { display: inline-grid; place-items: center; flex: none; width: var(--h); height: var(--h); padding: 0; border: 0; border-radius: 50%; background: none; }
.avatar-btn:hover .avatar, .avatar-btn[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--rule-2); }

/* Thumbnail plate: the real capture with a 3 px type-colour top edge */
.thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--c, var(--rule-2)); border-radius: var(--r); }
.thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.thumb--text { display: flex; padding: 12px 14px; }
.thumb-q { font-size: var(--fs-1); color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.thumb--icon { display: grid; place-items: center; background: var(--paper-2); }
.thumb--icon .i { width: 32px; height: 32px; color: var(--c); }

/* Resource cards (grid): the whole tile is the link */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; padding-top: 10px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 379px) { .tiles { grid-template-columns: minmax(0, 1fr); } }
.tile { display: grid; gap: 3px; align-content: start; border-radius: var(--r); }
.tile .thumb { margin-bottom: 9px; transition: border-color var(--t); }
.tile:hover .thumb { border-color: var(--rule-2); border-top-color: var(--c); }
.tile:hover .entry-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tile:focus-visible { outline-offset: 4px; }

/* Resource rows (list): one catalogue entry; the whole row is the link */
.entries > li + li { border-top: 1px solid var(--rule); }
.entry { display: grid; gap: 3px; padding: 14px 10px; margin-inline: -10px; border-radius: var(--r); transition: background-color var(--t); }
.entry:hover { background: var(--paper-2); }
.entry:hover .entry-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-title { font-weight: 600; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.entry-pre { font-size: var(--fs-1); color: var(--ink-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.entry-meta { font-size: var(--fs-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.entry--thumb { grid-template-columns: minmax(0, 1fr) 104px; -moz-column-gap: 16px; column-gap: 16px; align-items: start; }
.entry--thumb > :not(.thumb) { grid-column: 1; }
.entry--thumb .thumb { grid-column: 2; grid-row: 1 / span 4; }
/* Rows with their own ⋯ menu (Mis recursos, groups, reports) */
.entries--acts > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; -moz-column-gap: 4px; column-gap: 4px; }
.entries--acts .entry { margin-right: 0; }

/* Tables: stack into labelled rows on phones with .table--stack */
.table-wrap { overflow-x: auto; }
.table th { padding: 10px 12px; border-bottom: 1px solid var(--rule-2); text-align: left; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.table tbody th { border-bottom-color: var(--rule); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table--rows tbody tr:hover { background: var(--paper-2); }
@media (max-width: 639px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .table--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 0; border: 0; text-align: right; }
  .table--stack td::before { content: attr(data-label); margin-right: auto; font-size: var(--fs-1); color: var(--ink-3); text-align: left; }
  .table--stack td:first-child { display: block; text-align: left; font-weight: 600; }
  .table--stack td:first-child::before { content: none; }
}

/* Stat blocks: big tabular numbers separated by hairlines */
.stats { display: flex; flex-wrap: wrap; border-block: 1px solid var(--rule); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 18px 40px 16px 0; }
.stat + .stat { padding-left: 40px; border-left: 1px solid var(--rule); }
.stat dt { font-size: var(--fs-1); color: var(--ink-3); }
.stat dd { font-size: var(--fs-6); font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat dd small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.stats--sm .stat dd { font-size: var(--fs-5); }
@media (max-width: 559px) {
  .stats { display: grid; grid-template-columns: 1fr 1fr; }
  .stat, .stat + .stat { padding: 14px 12px 12px 0; border-left: 0; }
  .stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .stats:has(> .stat:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats:has(> .stat:nth-child(3):last-child) .stat:nth-child(3) { padding-left: 16px; border-top: 0; border-left: 1px solid var(--rule); }
  .stats:has(> .stat:nth-child(3):last-child) .stat dd { font-size: var(--fs-5); }
}
.progress { height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease-out; }
.progress--thin { height: 4px; }
.progress--ok > span { background: var(--ok); }

/* Charts: thin marks, recessive axes, text in ink (never in the series colour) */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--rule); stroke-width: 1; }
.chart .base { stroke: var(--rule-3); stroke-width: 1; }
.chart .bar { fill: var(--accent); }
.chart .bar--muted { fill: var(--rule-2); }
.chart .bar:hover { fill: var(--accent-ink); }
.chart text { font: 400 12px var(--sans); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.chart .val { fill: var(--ink-2); font-weight: 700; }
.pie { display: flex; align-items: center; gap: 20px; }
.pie svg { flex: none; width: 112px; height: 112px; rotate: -90deg; }
.pie circle { fill: none; stroke-width: 12; }
.pie .track { stroke: var(--rule); }
.pie .s-ok { stroke: var(--ok); } .pie .s-bad { stroke: var(--bad); } .pie .s-warn { stroke: var(--warn); } .pie .s-accent { stroke: var(--accent); }
.legend { display: grid; gap: 6px; font-size: var(--fs-1); color: var(--ink-2); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend .sw { width: 10px; height: 10px; flex: none; border-radius: 2px; background: var(--c, var(--accent)); }
.legend b { color: var(--ink); font-variant-numeric: tabular-nums; }

.empty { display: grid; justify-items: start; gap: 8px; max-width: 34em; padding: 32px 0; }
.empty > .i { width: 32px; height: 32px; margin-bottom: 4px; color: var(--ink-3); }
.empty-title { font-size: var(--fs-3); font-weight: 700; }
.empty p { color: var(--ink-2); }
.empty .btn { margin-top: 8px; }
.empty--center { justify-items: center; margin-inline: auto; text-align: center; }

.skel { display: block; border-radius: var(--r-in); background: var(--paper-3); animation: skel 1.4s ease-in-out infinite; }
.skel-line { height: 12px; margin: 8px 0; }
.skel-line--lg { height: 22px; }
.skel-thumb { aspect-ratio: 16 / 10; border-radius: var(--r); }
@keyframes skel { 50% { opacity: .5; } }

/* 9 · Header and search ------------------------------------------------------- */
[data-shell="header-out"], [data-shell="header-in"] { min-height: 69px; }
[data-shell="header-focus"] { min-height: 61px; }
@media (max-width: 899px) { [data-shell="header-out"], [data-shell="header-in"] { min-height: 61px; } }
.hdr { position: relative; z-index: var(--z-bar); background: var(--paper); border-bottom: 1px solid var(--rule); }
.hdr-in { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; flex: none; width: 132px; height: 44px; overflow: hidden; }
.logo img { width: 132px; height: 24px; max-width: none; filter: url(#logo-ink); }
.hnav { display: flex; gap: 4px; }
.hnav a { display: inline-flex; align-items: center; height: var(--h); padding: 0 10px; border-radius: var(--r); color: var(--ink-2); font-weight: 600; }
.hnav a:hover, .hnav a[aria-current="page"] { color: var(--ink); background: var(--paper-2); }
.hsearch { position: relative; flex: 1 1 auto; max-width: 420px; }
.hdr-end { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.hdr-upgrade { color: var(--accent); }
.hdr-upgrade .i { color: var(--accent); }
.hdr-upgrade:hover { color: var(--accent-ink); background: var(--accent-wash); }
.msearch { padding: 0 0 12px; }
.drawer-btn { display: none; }
@media (max-width: 899px) {
  .hdr-in { height: 60px; gap: 4px; }
  .hdr-end { gap: 2px; }
  .hdr-signin { border-color: transparent; padding: 0 10px; color: var(--accent); }
  .hdr-signin:hover { background: var(--accent-wash); border-color: transparent; }
  .hdr-signup-sm { height: 36px; min-height: 36px; padding: 0 12px; margin-right: 4px; font-size: var(--fs-1); white-space: nowrap; }
  .logo { width: 110px; }
  .logo img { width: 110px; height: 20px; }
  .drawer-btn { display: inline-flex; }
}
@media (max-width: 379px) { .hdr .logo { width: 44px; } .hdr .logo img { clip-path: inset(0 83.6% 0 0); } }
/* Logged-in header: search lines up with the main column */
.hdr--app .hdr-in { padding-inline: var(--gutter); }
.hdr--drawer .drawer-btn { display: inline-flex; margin-left: -10px; }
.hdr--drawer .hdr-in { max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; }  /* signed in on a page without the sidebar: the same column as the content */
@media (min-width: 900px) {
  .hdr--app:not(.hdr--drawer) .logo { width: calc(var(--sidebar) + var(--main-pad) - var(--gutter) - 24px); }
  .hdr--app .hsearch { flex-basis: 440px; max-width: 440px; }
}
@media (max-width: 899px) {
  .hdr--app .logo { width: 44px; }
  .hdr--app .logo img { clip-path: inset(0 83.6% 0 0); }
  .hdr-create { width: var(--h); padding: 0; }
  .hdr-create-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Grouped autocomplete */
.ac { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--z-ac); min-width: min(360px, calc(100vw - 2 * var(--gutter))); max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); }
.ac-group + .ac-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }
.ac-label { padding: 6px 10px 4px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); }
.ac-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border-radius: var(--r-in); color: var(--ink); }
.ac-item > .i { color: var(--ink-3); }
.ac-item[aria-selected="true"], .ac-item:hover { background: var(--paper-2); }
.ac-text { display: grid; min-width: 0; }
.ac-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
.ac-title mark { background: none; color: inherit; font-weight: 700; }
.ac-meta { font-size: var(--fs-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ac-all { margin-top: 6px; border-top: 1px solid var(--rule); border-radius: 0 0 var(--r-in) var(--r-in); color: var(--accent); font-weight: 600; }
.ac-all > .i { color: var(--accent); }
.ac-none { padding: 10px; color: var(--ink-2); }
/* Notifications panel */
.notif { width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 0; }
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 4px 6px 4px 16px; border-bottom: 1px solid var(--rule); }
.notif-list { max-height: 60vh; overflow-y: auto; }
.notif-list > li + li { border-top: 1px solid var(--rule); }
.notif-item { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; padding: 12px 16px; line-height: 1.4; }
a.notif-item:hover { background: var(--paper-2); }
.notif-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.notif-item:not(.is-unread) .notif-dot { visibility: hidden; }
.notif-when { display: block; font-size: var(--fs-1); color: var(--ink-3); }
.notif-foot { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--rule); color: var(--accent); font-weight: 600; }
.notif-foot:hover { text-decoration: underline; text-underline-offset: 3px; }
.notif .empty { padding: 28px 16px; }
/* Create menu: the type colour marks each icon */
.menu-create { min-width: 280px; }
.menu-create .menu-item .i { color: var(--c); }
.menu-item--lead { align-items: flex-start; }
.menu-item--lead > .i { margin-top: 10px; }

/* 10 · Sidebar and footer ----------------------------------------------------- */
.sidebar { padding: 16px 12px; border-right: 1px solid var(--rule); background: var(--paper); }
.sidebar ul { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--ink-2); font-weight: 600; text-align: left; }
.nav-item:hover { background: var(--paper-2); color: var(--ink); }
.nav-item .i { color: var(--ink-3); }
.nav-item[aria-current="page"] { background: var(--accent-wash); color: var(--accent-ink); }
.nav-item[aria-current="page"] .i { color: var(--accent); }
.nav-item .chev { margin-left: auto; transition: rotate var(--t); }
.nav-item[aria-expanded="true"] .chev { rotate: 180deg; }
.nav-sub { margin: 2px 0 4px 22px; padding-left: 9px; border-left: 1px solid var(--rule); }
.nav-sub .nav-item { font-weight: 400; }
.nav-sep { height: 1px; margin: 10px 12px; background: var(--rule); }
.sidebar-head { display: none; }
@media (min-width: 900px) { .sidebar:not(.sidebar--drawer) .sidebar-in { position: sticky; top: 16px; } }
@media (max-width: 899px) {
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); width: min(300px, 86vw); overflow-y: auto; border-right: 0; box-shadow: var(--shadow-1); transform: translateX(-100%); visibility: hidden; transition: transform .18s ease-out, visibility 0s linear .18s; }
}
@media (max-width: 899px) { .sidebar .sidebar-head { display: flex; } }
.sidebar--drawer .sidebar-head { display: flex; }
.drawer .sidebar-head, .sidebar-head { align-items: center; justify-content: space-between; padding: 0 0 10px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }

[data-shell="footer"] { min-height: 180px; }
.ftr { margin-top: 96px; padding-bottom: 72px; border-top: 1px solid var(--rule); background: var(--paper-2); }  /* bottom room for the fixed "Escríbenos" pill (48 px + 16 px + 8 px) */
.ftr-in { display: grid; gap: 16px; padding-block: 32px 24px; }
.ftr-nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; }
.ftr-nav a, .ftr-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: var(--fs-1); }
.ftr-nav a:hover, .ftr-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ftr-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ftr-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-1); color: var(--ink-3); }
.ftr-lang .i { width: 16px; height: 16px; margin-right: 4px; }
.ftr-lang button, .ftr-lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; border: 0; background: none; font-size: var(--fs-1); color: var(--ink-2); }
.ftr-lang [aria-pressed="true"] { color: var(--ink); font-weight: 700; }
.ftr-lang button:hover, .ftr-lang a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr-copy { font-size: var(--fs-1); color: var(--ink-3); }
.ftr-copy a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ftr-copy a:hover { color: var(--ink); }
@media (min-width: 900px) {
  .ftr-in { grid-template-columns: auto 1fr; -moz-column-gap: 48px; column-gap: 48px; align-items: center; }
  .ftr-nav ul { justify-content: flex-end; }
  .ftr-base { grid-column: 1 / -1; }
}
@media (max-width: 1199px) { .ftr-in { grid-template-columns: minmax(0, 1fr); } .ftr-nav ul { justify-content: flex-start; } }
.main > .ftr .ftr-in { grid-template-columns: minmax(0, 1fr); }
.main > .ftr .ftr-nav ul { justify-content: flex-start; }
@media (max-width: 639px) { .ftr-nav ul, .ftr-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } }
body:not(:has(.ftr)):not(.l-editor) { padding-bottom: 72px; }  /* pages without a footer keep the same room */
.ftr--min { margin-top: 64px; background: none; }
.ftr--min .ftr-base { border-top: 0; padding-block: 8px 16px; }
.ftr-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.ftr-links a, .ftr-links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: var(--fs-1); color: var(--ink-2); }

/* 11 · Layouts ---------------------------------------------------------------- */
/* Marketing (logged out) */
.page-head { padding-top: 48px; }
.page-head .lead { margin-top: 14px; max-width: 34em; }
@media (min-width: 900px) { .page-head { padding-top: 72px; } }

/* App (logged in): header + sidebar + main; the footer sits inside main */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .shell { grid-template-columns: var(--sidebar) minmax(0, 1fr); } }
.main { width: 100%; min-width: 0; padding: 32px var(--main-pad) 0; }
:where(.main) > :where(:not(.ftr)) { max-width: 1068px; }
.main > .ftr { margin-inline: calc(-1 * var(--main-pad)); }
.main > .ftr > .wrap { max-width: calc(1068px + 2 * var(--main-pad)); margin-inline: 0; padding-inline: var(--main-pad); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }

/* Focus (sign-up, sign-in, plans, checkout): minimal header, one narrow column */
.hdr--focus .hdr-in { height: 60px; }
body:has(> .focus-main) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(> .focus-main) > .focus-main { flex: 1 0 auto; }
.focus-main { width: 100%; max-width: calc(480px + 2 * var(--gutter)); margin-inline: auto; padding: 40px var(--gutter) 0; }
.focus-main--wide { max-width: calc(1040px + 2 * var(--gutter)); }
.focus-main .h1 { font-size: var(--fs-5); }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 24px; font-size: var(--fs-1); color: var(--ink-3); counter-reset: step; }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--rule-3); border-radius: 50%; font-size: var(--fs-0); font-weight: 700; }
.steps li:not(:last-child)::after { content: ""; width: 20px; height: 1px; margin-left: 2px; background: var(--rule-2); }
.steps li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.steps li[aria-current="step"]::before { border-color: var(--ink); background: var(--ink); color: #fff; }
.steps li.is-done::before { content: "✓"; border-color: var(--ok); color: var(--ok); }
/* Radio cards: plan terms, payment methods */
.choice-cards { display: grid; gap: 10px; }
.choice-card { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; -moz-column-gap: 14px; column-gap: 14px; padding: 16px 18px; border: 1px solid var(--rule-2); border-radius: var(--r); cursor: pointer; transition: border-color var(--t), background-color var(--t), box-shadow var(--t); }
.choice-card:hover { border-color: var(--ink-3); }
.choice-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice-dot { display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid var(--rule-3); border-radius: 50%; background: var(--paper); }
.choice-dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform var(--t); }
.choice-card:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-card:has(input:checked) .choice-dot { border-color: var(--accent); }
.choice-card:has(input:checked) .choice-dot::after { transform: scale(1); }
.choice-card:has(input:focus-visible) { outline: var(--ring); outline-offset: 2px; }
.choice-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-weight: 700; }
.choice-note { margin-top: 2px; font-size: var(--fs-1); color: var(--ink-3); }
.choice-end { font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; }
/* The one sticky phone bar on pages that have one (plans, checkout) */
.stickybar { display: none; }
@media (max-width: 899px) {
  .stickybar { display: flex; align-items: center; gap: 14px; position: sticky; bottom: 0; z-index: var(--z-sticky); margin: 32px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); box-shadow: var(--shadow-2); }
  .stickybar .btn { flex: 1; }
}

/* Study page: crumbs, compact header card, study surface, text content, related */
.res-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "type acts" "title title" "meta meta"; align-items: center; -moz-column-gap: 12px; column-gap: 12px; padding-top: 2px; }
.res-head .type { grid-area: type; }
.res-head .h1 { grid-area: title; margin-top: 4px; }
.res-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; margin-top: 8px; font-size: var(--fs-1); color: var(--ink-3); }
/* Separators lead each item; the one that starts a wrapped line falls in a clipped gutter, so no line starts or ends with "·" */
.res-meta { margin-left: -1.1em; clip-path: inset(-8px -8px -8px calc(1.1em - 2px)); }
.res-meta > span::before { content: "·"; display: inline-block; width: 1.1em; text-align: center; color: var(--ink-3); }
.res-meta > :is(.status, .stars)::before { margin-right: -4px; }
.res-meta a { color: var(--ink-2); }
.res-meta a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) { .res-meta .meta-lg { display: none; } }  /* less important items wait for wider screens */
.res-meta .stars { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); }
.res-meta .stars .i { width: 15px; height: 15px; fill: #a86a12; stroke: #a86a12; }
.res-acts { grid-area: acts; display: flex; align-items: center; gap: 2px; justify-self: end; margin-right: -10px; }
.res-acts .act { display: none; }
.res-acts .btn-primary { margin-right: 8px; }
/* Phones: "Copiar y editar" stays on the first screen next to ⋯ (one tap, as today's pencil; usability checks 21 Oct,
   item 4). The Premium tag waits for the dialog on small phones. */
@media (max-width: 899px) {
  .res-acts .act.act-keep { display: inline-flex; flex: none; }
  .res-acts .menu-item.act-keep { display: none; }
}
@media (max-width: 479px) { .res-acts .act.act-keep .tag-premium { display: none; } }
@media (min-width: 900px) {
  .res-head { grid-template-areas: "type ." "title title" "meta meta" "acts acts"; }
  .res-acts { justify-self: start; flex-wrap: wrap; margin: 14px 0 0 -12px; }
  .res-acts:has(> .btn-primary:first-child) { margin-left: 0; }
  .res-acts .act { display: inline-flex; }
  .res-acts .menu-item.act-dup { display: none; }
}
.study { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "surface" "text" "aside"; -moz-column-gap: 72px; column-gap: 72px; }
.study > .res-head { grid-area: head; }
.study > .player, .study > .surface, .study > .quiz-old { grid-area: surface; }
.study > .aside { grid-area: aside; }
.study > .study-text { grid-area: text; }
/* Wide screens (20 Oct, Dan: full-width player): the player spans the whole 1200 px column; the side column (sign-up
   box, Related, the owner's facts) moves below it, beside the text version and Información */
@media (min-width: 1100px) {
  .study { grid-template-columns: minmax(0, 1fr) 288px; grid-template-areas: "head head" "surface surface" "text aside"; align-items: start; }
  .study > .aside { padding-top: 0; }
  .study > .aside > .sec:first-child, .study > .aside > :first-child + .sec { margin-top: 56px; }   /* level with the text's first heading */
}
/* Compact header (.res-head--bar): the breadcrumbs open the header. From 1100 px they share the top row with the
   actions and the type label leads the meta line, so the player starts ~190 px down at 1366×768, not 292 (sizes fix 5).
   Same elements, links and text as before; only the rows change. */
.res-head > .crumbs { grid-area: crumbs; min-width: 0; }
.res-head--bar { grid-template-areas: "crumbs crumbs" "type acts" "title title" "meta meta"; }
/* Phones (usability checks 21 Oct, item 4): the action row (Copiar y editar … ⋯) has the row under the crumbs to itself,
   so long labels fit in every language; the type label leads the meta line, as on wide screens */
@media (max-width: 899px) {
  .res-head--bar { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "crumbs crumbs" "acts acts" "title title" "type meta"; -moz-column-gap: 0; column-gap: 0; }
  .res-head--bar > .res-acts { justify-self: stretch; margin: 0 -10px 6px 0; }
  .res-head--bar > .res-acts > .menu { margin-left: auto; }
  .res-head--bar > .res-acts > .act-keep { margin-left: -12px; }
  .res-head--bar > .type { align-self: start; margin-top: 8px; }
  .res-head--bar > .type::after { content: "·"; display: inline-block; width: 1.1em; margin-left: -7px; text-align: center; font-weight: 400; color: var(--ink-3); }
}
@media (min-width: 900px) { .res-head--bar { grid-template-areas: "crumbs crumbs" "type type" "title title" "meta meta" "acts acts"; } }
/* From 1100 px (22 Oct, Dan: the buttons looked squashed in the breadcrumb row): the breadcrumbs, the H1, the meta line
   (type label first) and the action row each have a row; the actions sit under the title. No "Next up" (27 Oct). */
@media (min-width: 1100px) {
  .res-head--bar { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "crumbs crumbs crumbs" "title title title" "type meta meta" "acts acts acts"; -moz-column-gap: 0; column-gap: 0; padding-top: 8px; }
  .res-head--bar > .crumbs { padding-top: 0; }
  .res-head--bar > .crumbs li { flex: 0 1 auto; }
  .res-head--bar > .crumbs li:first-child { flex: none; }
  .res-head--bar > .crumbs a { display: block; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 28px; }
  .res-head--bar .res-acts { gap: 4px; justify-self: start; margin: 12px 0 0 -12px; }
  .res-head--bar .res-acts .btn { height: 40px; }
  .res-head--bar .res-acts .icon-btn { width: 40px; height: 40px; }
  .res-head--bar .h1 { margin-top: 6px; }
  .res-head--bar > .type, .res-head--bar > .res-meta { margin-top: 4px; }
  .res-head--bar > .type { align-self: start; }   /* on the meta line's first line when a long meta line wraps beside "Next up" */
  .res-head--bar > .type::after { content: "·"; display: inline-block; width: 1.1em; margin-left: -7px; text-align: center; font-weight: 400; color: var(--ink-3); }
  .res-head--bar ~ .surface, .res-head--bar ~ .player, .res-head--bar ~ .quiz-old { margin-top: 16px; }
}
@media (min-width: 1100px) and (pointer: coarse) { .res-head--bar > .crumbs a { line-height: 44px; } .res-head--bar .res-acts .btn { height: var(--h); } .res-head--bar .res-acts .icon-btn { width: var(--h); height: var(--h); } }
/* Generic viewer frame for maps, flowcharts, slides, flashcards */
.surface { position: relative; margin-top: 24px; overflow: hidden; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--c, var(--rule-2)); border-radius: var(--r); }
.surface-canvas { overflow: auto; max-height: 72vh; overscroll-behavior: contain; }
.surface:fullscreen { border: 0; display: flex; flex-direction: column; justify-content: center; }
.surface-tools, .ed-tools { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); }
.tools-val { min-width: 56px; height: 44px; border: 0; border-radius: var(--r-in); background: none; font-size: var(--fs-1); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tools-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--rule); }
/* "Información" on every resource page: label–value rows, tags, then the report button */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); }
.facts > div { display: grid; gap: 2px 24px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: var(--fs-1); color: var(--ink-3); }
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 640px) { .facts > div { grid-template-columns: 11em minmax(0, 1fr); align-items: baseline; } }
@media (pointer: fine) { .facts dd .tap { min-height: 0; } }
.facts > div:has(.quiz-rate, .study-rate) { align-items: center; }
.tags { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tags a { display: inline-flex; align-items: center; min-height: 32px; color: var(--accent); }
.tags a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse) { .tags a { min-height: 44px; } }
.info-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
/* Text content under the surface: question list, map outline */
.ql > li { border-bottom: 1px solid var(--rule); }
.ql summary, .ql-row { display: grid; grid-template-columns: 2.25em minmax(0, 1fr) 24px; gap: 8px; align-items: start; padding: 14px 0; }
.ql summary { cursor: pointer; list-style: none; border-radius: var(--r); }
.ql summary::-webkit-details-marker { display: none; }
.ql summary:hover .ql-q { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--accent-rule); }
.ql-n { padding-top: 2px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); }
.ql summary .i { margin-top: 2px; color: var(--ink-3); transition: rotate var(--t); }
.ql details[open] summary .i { rotate: 180deg; }
.ql-opts { display: grid; gap: 6px; padding: 0 0 16px calc(2.25em + 8px); color: var(--ink-2); }
.ql-opts li { display: grid; grid-template-columns: 1.75em 1fr; }
.ql-opts li > span:first-child { padding-top: 2px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); }
.ql-more { margin-top: 20px; }
/* The author already numbered the questions ("1. ¿Qué es…"): no second number column */
.ql--own-n summary, .ql--own-n .ql-row { grid-template-columns: minmax(0, 1fr) 24px; }
.ql--own-n .ql-n { display: none; }
.ql--own-n .ql-opts { padding-left: 0; }
.outline > li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.outline > li:last-child { border-bottom: 0; }
.outline > li > p { font-weight: 700; }
.outline ul { display: grid; gap: 8px; margin-top: 8px; padding-left: 18px; border-left: 2px solid var(--rule); color: var(--ink-2); }
.nudge { display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.nudge p { color: var(--ink-2); }

/* Editor: a slim top bar over a full-bleed canvas */
.l-editor { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.edbar { position: relative; z-index: var(--z-bar); display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px 0 4px; background: var(--paper); border-bottom: 1px solid var(--rule); }
.ed-h1 { display: flex; flex: 0 1 360px; min-width: 0; margin: 0; font: inherit; }
@supports (field-sizing: content) and (not (-moz-appearance: none)) { .ed-h1 { flex: 0 1 auto; max-width: 360px; } .ed-h1 > .ed-title { field-sizing: content; min-width: 6ch; } }
.ed-h1 > .ed-title { flex: 1 1 auto; width: 100%; }
.edbar > :not(.ed-h1):not(.ed-title):not(.ed-spacer) { flex: none; }
.ed-title { flex: 0 1 360px; min-width: 0; height: 44px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r); background: none; font-size: var(--fs-3); font-weight: 700; text-overflow: ellipsis; }
.ed-title:hover { border-color: var(--rule-2); }
.ed-title:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ed-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: var(--fs-1); color: var(--ink-3); white-space: nowrap; }
.ed-status .i { width: 16px; height: 16px; }
.ed-sep { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--rule); }
.ed-spacer { flex: 1; }
.ed-main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; }
.ed-canvas { position: relative; overflow: auto; background: var(--paper-2); }
.ed-canvas--dots { background-image: radial-gradient(var(--rule-2) 1px, transparent 1px); background-size: 20px 20px; }
.ed-tools { right: auto; left: 12px; }
.ed-panel { width: 300px; overflow-y: auto; padding: 16px; background: var(--paper); border-left: 1px solid var(--rule); }
@media (max-width: 899px) {
  .edbar { height: 52px; }
  .ed-hide-sm { display: none !important; }
  .ed-sr-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }  /* hidden on phones, still read out */
  .edbar > .btn:has(> .ed-hide-sm, > .ed-sr-sm) { width: var(--h); padding: 0; }
  .ed-main { grid-template-columns: minmax(0, 1fr); }
  .ed-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-panel); width: auto; max-height: 50dvh; padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-left: 0; border-top: 1px solid var(--rule); border-radius: var(--r) var(--r) 0 0; box-shadow: var(--shadow-2); }
}

/* 12 · Quiz player: desktop lettered list (A) --------------------------------- */
/* Colours are --p-* variables so the same rules draw the light player and the dark phone focus mode */
.player { container: player / inline-size; margin-top: 28px; scroll-margin-top: 8px; }
.p-surface {
  --p-bg: var(--paper); --p-text: var(--ink); --p-text-2: var(--ink-2); --p-muted: var(--ink-3);
  --p-line: var(--rule); --p-line-2: var(--rule-3); --p-hover: var(--paper-2);
  --p-sel: var(--accent); --p-sel-wash: var(--accent-wash); --p-on: #fff;
  --p-ok: var(--ok); --p-ok-wash: var(--ok-wash); --p-bad: var(--bad); --p-bad-wash: var(--bad-wash);
  --p-warn: var(--warn); --p-warn-wash: var(--warn-wash);
  --p-track: var(--rule); --p-fill: var(--accent); --p-ring: var(--accent);
  display: flex; flex-direction: column; background: var(--p-bg); color: var(--p-text);
}
.p-surface :focus-visible { outline-color: var(--p-ring); }
.player:fullscreen { overflow: auto; padding: 48px max(24px, calc(50vw - 440px)); background: var(--paper); }
.p-top { position: relative; display: flex; align-items: center; gap: 14px; }
.p-count { min-width: 5ch; font-size: var(--fs-1); font-weight: 700; color: var(--p-text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-count span { font-weight: 400; color: var(--p-muted); }
.p-progress { flex: 1; display: flex; align-items: center; height: 44px; padding: 0; border: 0; border-radius: var(--r-in); background: none; }
.p-track { flex: 1; height: 4px; border-radius: 2px; background: var(--p-track); overflow: hidden; transition: height var(--t); }
.p-track > span { display: block; height: 100%; background: var(--p-fill); transition: width .2s ease-out; }
.p-progress:hover .p-track, .p-progress[aria-expanded="true"] .p-track { height: 8px; border-radius: 4px; }
.p-exit, .p-full { display: none !important; }
.p-surface .icon-btn { color: var(--p-muted); }
.p-surface .icon-btn:hover { background: var(--p-hover); color: var(--p-text); }
.p-jump { position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-panel); padding: 12px; background: var(--p-bg); border: 1px solid var(--p-line); border-radius: var(--r); box-shadow: var(--shadow-1); }
.p-jump-h { margin-bottom: 8px; font-size: var(--fs-1); font-weight: 700; color: var(--p-muted); }
.p-jump ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.p-jump-btn { width: 100%; min-width: 44px; height: 44px; border: 1px solid var(--p-line-2); border-radius: var(--r); background: none; color: var(--p-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.p-jump-btn:hover { background: var(--p-hover); }
.p-jump-btn.is-done { border-color: var(--p-sel); background: var(--p-sel-wash); }
.p-jump-btn[aria-current="step"] { box-shadow: inset 0 0 0 2px var(--p-sel); }

.p-main { flex: 1; display: flex; flex-direction: column; }
.p-form { flex: 1; display: flex; flex-direction: column; }
.p-body { flex: 1; }
.p-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.p-form legend { display: block; width: 100%; margin-top: 26px; padding: 0; }
.p-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.p-kind { font-size: var(--fs-1); font-weight: 600; color: var(--p-muted); }
.p-surface .badge { color: var(--p-text-2); border-color: var(--p-line-2); }
.p-surface .badge--bad { color: var(--p-bad); border-color: currentColor; }
.p-text { display: block; margin-top: 6px; font-size: var(--fs-4); font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.p-text:focus { outline: none; }
.p-img { display: block; width: auto; max-width: min(520px, 100%); max-height: min(340px, 35vh); -o-object-fit: contain; object-fit: contain; margin-top: 14px; border: 1px solid var(--p-line); border-radius: var(--r); background: #fff; }
.p-audio { margin-top: 12px; }
.p-text code, .opt-text code, .fb-expl code { font: .9em/1.4 ui-monospace, Consolas, monospace; padding: 1px 4px; border-radius: var(--r-in); background: var(--p-hover); }
.p-code { margin: 10px 0 0; padding: 10px 12px; overflow-x: auto; border-radius: var(--r); background: var(--p-hover); font: 400 .875rem/1.5 ui-monospace, Consolas, monospace; white-space: pre; }
.p-code code { padding: 0; background: none; }
.p-count-short, .p-more { display: none; }
.p-note { margin-top: 16px; }
.p-empty { padding-top: 26px; }
.is-empty .p-top { display: none; }
.p-opts { margin-top: 20px; border-top: 1px solid var(--p-line); }
.opt { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; -moz-column-gap: 14px; column-gap: 14px; min-height: 60px; padding: 12px; border-bottom: 1px solid var(--p-line); cursor: pointer; transition: background-color .12s, box-shadow .12s, border-color .12s; }
.opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.opt-key { display: grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--p-line-2); border-radius: 50%; font-size: var(--fs-1); font-weight: 700; color: var(--p-text-2); transition: background-color .12s, border-color .12s, color .12s; }
.p-opts--multi .opt-key { border-radius: 7px; }
.opt-key .i { width: 18px; height: 18px; }
.opt-text { font-size: var(--fs-3); line-height: 1.4; overflow-wrap: anywhere; }
.opt-end { display: inline-flex; align-items: center; gap: 10px; }
.opt-flag { font-size: var(--fs-1); font-weight: 700; white-space: nowrap; }
.opt:hover { background: var(--p-hover); }
.opt:has(input:focus-visible) { z-index: 1; outline: 2px solid var(--p-ring); outline-offset: -2px; }
.opt.is-sel { background: var(--p-sel-wash); box-shadow: inset 3px 0 0 var(--p-sel); }
.opt.is-sel .opt-key { background: var(--p-sel); border-color: var(--p-sel); color: var(--p-on); }
.opt.is-right { background: var(--p-ok-wash); box-shadow: inset 3px 0 0 var(--p-ok); }
.opt.is-right .opt-key { background: var(--p-ok); border-color: var(--p-ok); color: var(--p-on); }
.opt.is-right .opt-flag, .opt.is-missed .opt-flag { color: var(--p-ok); }
.opt.is-wrong { background: var(--p-bad-wash); box-shadow: inset 3px 0 0 var(--p-bad); }
.opt.is-wrong .opt-key { background: var(--p-bad); border-color: var(--p-bad); color: var(--p-on); }
.opt.is-wrong .opt-flag { color: var(--p-bad); }
.opt.is-missed .opt-key { border: 2px solid var(--p-ok); color: var(--p-ok); }
.opt.is-dim .opt-text { color: var(--p-muted); }   /* answers stay changeable after Comprobar: dim the text only, never the row (AA in focus mode) */
.opt-img { display: block; width: auto; max-width: 180px; max-height: 120px; margin-top: 8px; border: 1px solid var(--p-line); border-radius: var(--r-in); background: #fff; }
.p-opts li.has-audio { display: flex; align-items: center; gap: 8px; }
.p-opts li.has-audio > .opt { flex: 1; min-width: 0; }
.opt-audio { flex: none; }
.p-opts--tf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 0; }
.p-opts--tf .opt { min-height: 76px; border: 1px solid var(--p-line-2); border-radius: var(--r); }
.p-opts--tf .opt-text { font-weight: 600; }
.p-opts--tf .opt.is-sel { border-color: var(--p-sel); box-shadow: inset 0 0 0 1px var(--p-sel); }
.p-opts--tf .opt.is-right { border-color: var(--p-ok); box-shadow: inset 0 0 0 1px var(--p-ok); }
.p-opts--tf .opt.is-wrong { border-color: var(--p-bad); box-shadow: inset 0 0 0 1px var(--p-bad); }
.p-opts--tf .opt.is-missed { border-color: var(--p-ok); }
/* Action bar: Anterior · hint or feedback · Comprobar/Siguiente */
.p-actions { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "prev mid go"; align-items: center; gap: 12px 16px; margin-top: 20px; border-radius: var(--r); background: var(--p-bg); transition: background-color var(--t); }
.p-prev { grid-area: prev; }
.p-actions > .p-hint, .p-actions > .fb, .p-actions > .p-mid { grid-area: mid; }
.p-go { grid-area: go; min-width: 176px; }
.p-surface .btn-quiet { color: var(--p-text-2); }
.p-surface .btn-quiet .i { color: var(--p-muted); }
.p-surface .btn-quiet:hover { background: var(--p-hover); color: var(--p-text); }
.p-hint { font-size: var(--fs-1); color: var(--p-muted); }
.p-hint kbd { margin: 0 2px; }
.fb { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.fb > .i { width: 24px; height: 24px; margin-top: 1px; }
.fb-title { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.fb-ans { margin-top: 2px; color: var(--p-text); }
.fb-expl { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--p-line); color: var(--p-text-2); }
.fb-expl b { color: var(--p-text); }
.fb-enter { animation: rise .16s ease-out; }
.p-actions.is-ok, .p-actions.is-bad, .p-actions.is-part { padding: 14px 16px; align-items: start; }
.p-actions.is-ok { background: var(--p-ok-wash); }
.p-actions.is-bad { background: var(--p-bad-wash); }
.p-actions.is-part { background: var(--p-warn-wash); }
.is-ok > .fb { color: var(--p-ok); } .is-bad > .fb { color: var(--p-bad); } .is-part > .fb { color: var(--p-warn); }
.p-actions.is-ok .p-prev, .p-actions.is-bad .p-prev, .p-actions.is-part .p-prev, .p-actions.is-ok .p-go, .p-actions.is-bad .p-go, .p-actions.is-part .p-go { align-self: center; }
/* Check and then Next in the same place (Dan, 26 Oct; with the player's one window size): wider than a phone, the bar
   has the feedback panel's padding before "Comprobar" too, and its buttons sit at the bottom, so the button doesn't move
   when the verdict and the explanation appear above it */
@media (min-width: 641px) {
  .p-actions { padding: 14px 16px; }
  .p-actions.is-ok .p-prev, .p-actions.is-bad .p-prev, .p-actions.is-part .p-prev, .p-actions.is-ok .p-go, .p-actions.is-bad .p-go, .p-actions.is-part .p-go { align-self: end; }
}
.p-actions .p-go.is-skip { background: var(--p-bg); color: var(--p-text); border-color: var(--p-line-2); }  /* "Saltar" before an answer is chosen */
.p-actions .p-go.is-skip:hover { background: var(--p-hover); }
/* Submit step, loading */
.p-submit .p-body { padding-top: 26px; }
.p-left { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 14px; color: var(--p-text-2); }
.p-left .p-jump-btn { width: 44px; }
.p-submit .notice { margin-top: 18px; }
.p-skel { display: grid; gap: 10px; padding-top: 26px; }
.p-skel .skel { background: var(--p-line); }
.p-skel .skel-opt { height: 56px; border-radius: var(--r); }

/* 13 · Focus mode: the player on phones (≤640 px), dark, full screen once you start */
@container player (max-width: 640px) {
  .p-surface {
    --p-bg: var(--f-bg); --p-text: var(--f-text); --p-text-2: var(--f-text); --p-muted: var(--f-muted);
    --p-line: var(--f-line); --p-line-2: var(--f-ring); --p-hover: var(--f-2);
    --p-sel: var(--f-accent); --p-sel-wash: var(--f-3); --p-on: var(--f-bg);
    --p-ok: var(--f-ok); --p-ok-wash: var(--f-ok-bg); --p-bad: var(--f-bad); --p-bad-wash: var(--f-bad-bg);
    --p-warn: var(--f-warn); --p-warn-wash: var(--f-warn-bg);
    --p-track: var(--f-2); --p-fill: var(--f-accent); --p-ring: #fff;
    min-height: min(80svh, 720px); padding: 4px 16px 0;
  }
  .p-top { gap: 8px; margin-right: -8px; }
  .p-full { display: inline-flex !important; }
  .p-surface .kbd-only, .p-surface p.kbd-only { display: none !important; }
  .p-form legend { margin-top: 14px; }
  .p-text { font-size: 1.25rem; }
  .p-opts { display: grid; gap: 8px; margin-top: 16px; border-top: 0; }
  .opt { grid-template-columns: 30px minmax(0, 1fr) auto; -moz-column-gap: 12px; column-gap: 12px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--f-line); border-radius: var(--r); background: var(--f-2); }
  .opt:hover { border-color: var(--f-ring); background: var(--f-2); }
  .opt-key { width: 30px; height: 30px; }
  .opt-text { font-size: var(--fs-2); }
  .opt.is-sel { border-color: var(--f-accent); background: var(--f-3); box-shadow: inset 0 0 0 1px var(--f-accent); }
  .opt.is-right { border-color: var(--f-ok); box-shadow: inset 0 0 0 1px var(--f-ok); }
  .opt.is-wrong { border-color: var(--f-bad); box-shadow: inset 0 0 0 1px var(--f-bad); }
  .opt.is-missed { border-color: var(--f-ok); border-style: dashed; }
  .p-opts--tf .opt { min-height: 64px; }
  .p-actions { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mid mid" "prev go"; gap: 12px 8px; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 0; border-top: 1px solid var(--f-2); }
  .p-actions.is-ok, .p-actions.is-bad, .p-actions.is-part { padding: 14px 16px calc(12px + env(safe-area-inset-bottom)); }
  .p-actions.is-ok { border-top-color: var(--f-ok); }
  .p-actions.is-bad { border-top-color: var(--f-bad); }
  .p-actions.is-part { border-top-color: var(--f-warn); }
  .p-go { width: 100%; min-width: 0; height: 56px; font-size: var(--fs-3); background: var(--f-text); color: var(--f-bg); }
  .p-go:hover { background: #fff; }
  .p-go:disabled { background: var(--f-2); color: var(--f-muted); }
  .p-actions.is-ok .p-go { background: var(--f-ok); color: var(--f-bg); }
  .p-actions.is-bad .p-go { background: var(--f-bad); color: var(--f-bg); }
  .p-actions.is-part .p-go { background: var(--f-warn); color: var(--f-bg); }
  .p-prev { width: 56px; height: 56px; padding: 0; border: 1px solid var(--f-line); }
  .p-prev-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .p-prev:disabled { opacity: .4; }
  .fb > .i { width: 28px; height: 28px; }
  .fb-title { font-size: var(--fs-4); }
  .fb-expl { max-height: 28vh; overflow-y: auto; }
  .p-submit .p-body { padding-top: 18px; }
  .p-count-long { display: none; }
  .p-count-short { display: inline; }
  .p-more { display: block; }
  .p-more .menu-list { color: var(--ink); }
  .p-img { max-height: 28vh; margin-top: 10px; }
  .p-actions .p-go.is-skip { background: transparent; color: var(--f-text); border-color: var(--f-ring); }
  .p-actions .p-go.is-skip:hover { background: var(--f-2); }
}
@media (max-width: 640px) {
  .player { margin: 16px calc(-1 * var(--gutter)) 0; }
  .p-actions { position: sticky; bottom: 0; z-index: var(--z-sticky); }
}
/* Full screen once the student starts (player.js adds .is-focus on phones); × leaves it */
html.is-focus, html.is-focus body { overflow: hidden; }
.player.is-focus .p-surface { position: fixed; inset: 0; z-index: var(--z-full); height: 100vh; height: 100dvh; min-height: 0; padding-top: 0; overflow-y: auto; overscroll-behavior: contain; }
.player.is-focus .p-top { position: sticky; top: 0; z-index: 2; padding-top: 8px; background: var(--p-bg); }
.player.is-focus .p-exit { display: inline-flex !important; margin-left: -10px; }
.player.is-focus .p-full { display: none !important; }

/* 14 · Marked results (B's marked exam, re-tokenised to A) -------------------- */
.mark { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mark--tick, .mark--half { color: var(--ok); }
.mark--cross { color: var(--bad); }
.grade { --mark: var(--ok); display: inline-grid; justify-items: center; min-width: 136px; color: var(--mark); }
.grade--low { --mark: var(--bad); }
.grade-score { position: relative; display: block; padding: 18px 24px 14px; font-size: var(--fs-6); font-weight: 700; line-height: 1; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grade-score small { font-size: .5em; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.grade-ring { position: absolute; inset: -2px -8px; width: calc(100% + 16px); height: calc(100% + 4px); fill: none; stroke: var(--mark); stroke-width: 2.4; stroke-linecap: round; overflow: visible; }
.grade-pct { margin-top: 10px; font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; }
.result-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; }
.result-head .stats { grid-column: 1 / -1; margin-top: 16px; }
.review > li { display: grid; grid-template-columns: 60px minmax(0, 1fr); -moz-column-gap: 12px; column-gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.rv-margin { display: flex; align-items: flex-start; justify-content: space-between; }
.rv-n { padding-top: 3px; font-size: var(--fs-1); font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rv-margin .mark { width: 30px; height: 30px; margin-top: -4px; }
.rv-q { font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.rv-lines { display: grid; gap: 6px; margin-top: 10px; }
.rv-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.rv-lbl { min-width: 10em; font-size: var(--fs-1); color: var(--ink-3); }
@media (min-width: 480px) {
  .rv-line { display: block; padding-left: 178px; }
  .rv-line > .rv-lbl { display: inline-block; min-width: 0; width: 168px; margin: 0 10px 0 -178px; }
  .rv-line > :not(.rv-lbl) { margin-right: 10px; }
}
.rv-ans { font-weight: 600; }
s.rv-ans { font-weight: 400; color: var(--ink-2); text-decoration-color: var(--bad); text-decoration-thickness: 1.5px; }
.rv-fix .rv-ans { color: var(--ok); }
.rv-verdict { font-size: var(--fs-1); font-weight: 700; }
.rv-verdict--ok { color: var(--ok); } .rv-verdict--bad { color: var(--bad); } .rv-verdict--part { color: var(--warn); }
.rv-pts { font-size: var(--fs-1); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rv-expl { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--rule-2); color: var(--ink-2); }
.rv-expl b { display: block; font-size: var(--fs-1); color: var(--ink-3); }
@media (max-width: 479px) {
  .review > li { grid-template-columns: 40px minmax(0, 1fr); }
  .rv-margin { flex-direction: column; justify-content: flex-start; gap: 4px; }
  .rv-lbl { min-width: 0; flex-basis: 100%; }
}

/* 15 · Feedback widget ("Escríbenos") ------------------------------------------------ */
/* Cazoom's "Need Help?" size (Dan, 26 Oct: it was 120 x 36 px, 14 px, white): 48 px, 16 px, filled in the brand colour */
.fbk-pill { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-pill); display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px 0 16px; border: 1px solid var(--accent); border-radius: 24px; background: var(--accent); color: #fff; font-size: var(--fs-2); font-weight: 700; box-shadow: 0 4px 14px rgb(21 34 43 / .22); }
.fbk-pill::after { content: ""; position: absolute; inset: -5px; }
.fbk-pill:hover { border-color: var(--accent-ink); background: var(--accent-ink); color: #fff; }
.fbk-pill .i { width: 20px; height: 20px; }
/* Below 900 px the bottom of the screen belongs to the page's bar (player, .stickybar): no pill; "Escríbenos" is in the ⋯ menu and the footer.
   App pages (the sidebar) and focus pages (sign-in to checkout) too: there it covered fields, rows' ⋯ and text (critique 16 Oct #11);
   the footer and the avatar menu keep their "Escríbenos" links. */
@media (max-width: 899px) { body[data-player] .fbk-pill, body:has(.stickybar, [data-quiz-player], .sidebar:not(.sidebar--drawer), .hdr--focus) .fbk-pill { display: none; } }
@media (min-width: 900px) { .fbk-menu-item { display: none !important; } }
/* Study and quiz pages, 900–1319 px (usability checks 21 Oct, item 3): the player fills the column, so the pill sat on
   its bottom-right corner, over the player's full-screen icon. There "Escríbenos" moves into the ⋯ menu, as on phones;
   from 1320 px the pill fits in the margin beside the 1040 px study column. */
@media (min-width: 900px) and (max-width: 1319px) {
  body[data-player]:has(#player):has(.res-acts [data-overflow-menu]) .fbk-pill { display: none; }
  body[data-player]:has(#player):has(.res-acts [data-overflow-menu]) .res-acts .fbk-menu-item { display: flex !important; }
  body[data-player]:has(#player):has(.res-acts [data-overflow-menu]) .res-acts .menu-sep.fbk-menu-item { display: block !important; }
  /* the course module page has no ⋯ menu; the pill sat on its player's full-screen corner too (placement check, 26 Oct):
     the footer and the account menu keep "Escríbenos" */
  body:has(main[data-study="course-module"] #player) .fbk-pill { display: none; }
}
/* App pages on a tablet in landscape (900–1099 px, placement check 26 Oct): the list fills the width, so the pill sat on
   rows' ⋯, as below 900 (critique 16 Oct #11); the account menu and the footer keep "Escríbenos" */
@media (min-width: 900px) and (max-width: 1099px) { body:has(.sidebar:not(.sidebar--drawer)) .fbk-pill { display: none; } }
/* From 1320 px every action fits in the row and "Escríbenos" is the pill again, so a ⋯ with nothing left in it goes
   (launch run A, 23 Oct: an empty menu on flashcards, flowcharts, notes and slides) */
@media (min-width: 1320px) { .res-acts > .menu:not(:has(.menu-item:not(.act-dup, .fbk-menu-item))) { display: none; } }
/* Logged-out home and marketing pages on phones (item 8; 23 Oct: also the Features intro): the pill covered "Continuar con
   Google / Microsoft" and the start of the text; the footer keeps the link */
@media (max-width: 479px) { body:not([data-logged-in]):has(main[data-account="home"], main.bands[data-account]) .fbk-pill { display: none; } }
/* Editors: the canvas fills the screen at every width, so "Escríbenos" lives in the editor's ⋯ menu (and the pill goes) */
.l-editor .fbk-pill { display: none; }
.l-editor .fbk-menu-item { display: flex !important; }
.l-editor .menu-sep.fbk-menu-item { display: block !important; }
/* "GoConqr has a new look" banner (shell/_newlook_banner, Dan 26 Oct; Cazoom's top banner): above the header, scrolls away
   with it; × hides it in this browser (.rd-nb-off, set in shell/_head before the first paint) */
.nb { background: linear-gradient(90deg, var(--accent), var(--accent-ink)); color: #fff; }
.rd-nb-off .nb { display: none; }
.nb-in { display: flex; align-items: center; justify-content: center; gap: 8px 16px; min-height: 60px; padding-block: 6px; }
.nb-text { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0; font-size: var(--fs-3); line-height: 1.35; } /* 18 px (Dan, 27 Oct: a bit larger) */
.nb-text > .i { flex: none; width: 22px; height: 22px; }
.nb-sub { color: rgb(255 255 255 / .9); }
.nb-btn { flex: none; height: 40px; padding: 0 18px; border-color: #fff; background: #fff; color: var(--accent-ink); font-size: var(--fs-2); font-weight: 700; }
.nb-btn:hover { background: var(--paper-2); }
.nb-x { flex: none; color: #fff; }
.nb-x:hover { background: rgb(255 255 255 / .15); color: #fff; }
/* phones: the title and the button on one line; the second sentence goes */
@media (max-width: 639px) { .nb-in { justify-content: space-between; gap: 8px; min-height: 52px; padding-inline: 12px 4px; } .nb-sub, .nb-text > .i { display: none; } .nb-text { font-size: .9375rem; } .nb-btn { height: 36px; padding: 0 14px; font-size: var(--fs-1); } }
@media print { .nb { display: none !important; } }
.fbk { position: fixed; inset: auto 16px 64px auto; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 96px); margin: 0; padding: 0; overflow: auto; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow-1); }
.fbk::backdrop { background: rgb(21 34 43 / .12); }
.fbk.is-static { position: relative; inset: auto; display: block; width: 100%; max-width: 360px; }
.fbk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 0 16px; }
.fbk-h { font-size: var(--fs-3); font-weight: 700; }
.fbk-step { display: grid; gap: 14px; padding: 2px 16px 16px; }
.fbk-lead { color: var(--ink-2); }
.fbk-cats > li + li { border-top: 1px solid var(--rule); }
.fbk-cat { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 4px 0 0; border: 0; background: none; font-weight: 600; text-align: left; }
.fbk-cat .i { color: var(--ink-3); }
.fbk-cat:hover { color: var(--accent-ink); }
.fbk-cat:hover .i { color: var(--accent); }
.fbk-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: -8px 0 -6px -8px; padding: 0 8px; border: 0; border-radius: var(--r); background: none; color: var(--accent); font-weight: 600; text-align: left; }
.fbk-back:hover { background: var(--accent-wash); }
.fbk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fbk-done { justify-items: start; padding-top: 8px; }
.fbk-done > .i { width: 32px; height: 32px; color: var(--ok); }
/* the new-look banner's dialog (#nlf): a standard centred .dlg; the thanks step */
.nlf-done { display: grid; justify-items: center; gap: 12px; padding-block: 20px 28px; text-align: center; font-size: var(--fs-3); }
.nlf-done > .i { width: 40px; height: 40px; color: var(--ok); }
.fbk-thanks { font-size: var(--fs-3); font-weight: 700; }
.fbk-ref { color: var(--ink-2); font-variant-numeric: tabular-nums; }
body[data-logged-in] .fbk-email { display: none; }
@media (max-width: 639px) {
  .fbk:not(.is-static) { inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-bottom: 0; border-radius: var(--r) var(--r) 0 0; }
  .fbk::backdrop { background: var(--scrim); }
  .fbk-step { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* Full-screen fallback where the browser has no element full screen (iPhone Safari): js/shell.js, study/study.js */
.is-full { inset: 0; z-index: var(--z-full); overflow: auto; background: var(--paper); }
.is-full:not(#\#) { position: fixed; width: auto; max-width: none; height: auto; max-height: none; margin: 0; border-radius: 0; }
body.has-full { overflow: hidden; }
.surface.is-full { display: flex; flex-direction: column; justify-content: center; border: 0; }  /* as the real full screen (.surface:fullscreen) */

/* 16 · Dialog and form parts (js/dialogs.js and pages) ---------------------------- */
.dlg-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.dlg-ctx { margin: -4px 0 12px; color: var(--ink-2); overflow-wrap: anywhere; }   /* what the dialog is about */
.dlg-tabs .tabs { margin: 0 -4px; }
.dlg-panel { padding-top: 20px; }
.dlg-edit-form { margin-right: -12px; }
.dlg-privacy > legend { margin-bottom: 4px; }
.dlg-foot-start { margin-right: auto; }
.dlg-foot-part { display: contents; }
.dlg-foot-part[hidden] { display: none; }
.dlg-subject-acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -12px; }
.dlg-formsum { padding: 12px 0; border-block: 1px solid var(--rule); }
/* A value with its Copy button (links, embed code); long URLs wrap */
.copy-field { display: flex; gap: 8px; align-items: flex-start; }
.copy-field > .input { flex: 1 1 auto; min-width: 0; }
.copy-field > .btn { flex: none; }
.code-field { min-height: 96px; font: var(--fs-1)/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; resize: none; word-break: break-all; background: var(--paper-2); }
.url-field { display: block; height: auto; min-height: var(--h); padding: 10px 12px; line-height: 1.4; background: var(--paper-2); border-color: var(--rule-2); overflow-wrap: anywhere; word-break: break-all; -webkit-user-select: all; -moz-user-select: all; user-select: all; cursor: text; }
.share-links { display: flex; flex-wrap: wrap; gap: 8px; }
.share-links .i { width: 14px; height: 14px; color: var(--ink-3); }
.pick-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.pick-row > .field { flex: 1 1 220px; }
.pick-row > .btn { flex: none; }
/* Settings row: a switch, an optional Premium tag, an optional note under it */
.switch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; -moz-column-gap: 12px; column-gap: 12px; padding: 6px 0; }
.switch-row + .switch-row { border-top: 1px solid var(--rule); }
.switch-row .switch { line-height: 1.35; }
.switch-row-note { grid-column: 1 / -1; margin: -6px 0 4px 52px; }
/* Editable list of topics (subject dialog) */
.topic-fields { display: grid; gap: 8px; margin: 4px 0 8px; }
.topic-field { display: flex; gap: 4px; align-items: center; }
.topic-field > .input { flex: 1 1 auto; min-width: 0; }
.topic-add { margin-left: -12px; }
/* Pick a resource type: radio cards with the type's colour edge (Create, SmartLink) */
.type-cards { display: grid; gap: 8px; margin-top: 4px; }
.type-card { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--rule-2); border-top: 3px solid var(--c); border-radius: var(--r); cursor: pointer; }
.type-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.type-card > .i { width: 24px; height: 24px; color: var(--c); }
.type-card-name { display: block; font-weight: 700; }
.type-card-note { display: block; font-size: var(--fs-1); color: var(--ink-2); }
.type-card:hover { border-color: var(--ink-3); border-top-color: var(--c); }
.type-card:has(input:checked) { background: var(--accent-wash); box-shadow: inset 0 0 0 1px var(--accent); border-color: var(--accent); border-top-color: var(--c); }
.type-card:has(input:focus-visible) { outline: var(--ring); outline-offset: 2px; }
/* Label–value rows (form fields received, plan summary) */
.kv-list { margin: 6px 0; max-width: 640px; }
.kv-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; }
.kv-list li + li { border-top: 1px solid var(--rule); }
.ta-center { text-align: center; }
.text-bad, .text-bad .i { color: var(--bad); }
@media (min-width: 641px) { .type-cards { grid-template-columns: 1fr 1fr; } .type-cards li:first-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .copy-field { flex-direction: column; align-items: stretch; } .dlg-foot-start { margin-right: 0; } }

/* 17 · Motion and print -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .hdr, .ftr, .sidebar, .drawer, .scrim, .skip, .res-acts, .player, .surface, .aside, .surface-tools, .crumbs, .fbk-pill, .fbk, .toasts, .edbar, .ed-tools, .ed-panel, .stickybar, [data-shell] { display: none !important; }
  body { color: #000; font-size: 11pt; }
  .shell { display: block; }
  .main, .wrap { max-width: none; padding: 0; }
  .sec-head, .entries > li + li, .ql > li { border-color: #999; }
  .entry, .tile, .ql > li, .review > li, .outline > li { -moz-column-break-inside: avoid; break-inside: avoid; }
  .ql details > :not(summary) { display: grid !important; }
  * { box-shadow: none !important; }
}
/* Phones: buttons in a results/hero action row share each row evenly instead of stacking at ragged widths */
@media (max-width: 479px) { .quiz-res-acts > .btn, .study-res-acts > .btn, .account-acts > .btn { flex: 1 1 auto; } }

/* 18 · Social proof: member quotes, press and award rows ------------------------
   Real items only, from content/social-proof.json, rendered into the pages by content/build-social.mjs (never type them by hand).
   A quote is a figure under a hairline, never a box (V3): photo, name and "role · country" first, then the words in quote marks.
   In rows and grids the captions and the words sit on shared lines (subgrid), so a two-line role never knocks the row out of line.
   .quotes--row  sideways row with scroll-snap (home): 1 + a peek on phones, 2 on tablets, 3 on desktop; js/quotes.js adds ‹ ›
   .quotes--grid three side by side from 900 px, stacked below (teachers, students) · .quotes--cols two flowing columns (About) */
.quotes { display: grid; gap: 32px 40px; }
.quotes:lang(es) { quotes: "«" "»" "“" "”"; }
.quotes:lang(en) { quotes: "“" "”" "‘" "’"; }
.quote { display: flex; flex-direction: column; min-width: 0; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.quote-fig { display: flex; flex-direction: column; gap: 14px; }
.quote-by { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; align-self: start; }
.quote-photo { width: 48px; height: 48px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; background: var(--paper-3); }
.quote-who { display: grid; gap: 2px; line-height: 1.35; }
.quote-name { font-weight: 700; }
.quote-meta { font-size: var(--fs-1); color: var(--ink-3); }
.quote-text { max-width: 62ch; font-size: var(--fs-2); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.quote-text p::before { content: open-quote; }
.quote-text p::after { content: close-quote; }
.social-scale { max-width: 60ch; margin-top: 4px; color: var(--ink-2); }
.social-scale + .quotes-row, .social-scale + .quotes { margin-top: 24px; }

.quotes--row { position: relative; grid-auto-flow: column; grid-auto-columns: 84%; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.quotes--row::-webkit-scrollbar { display: none; }
.quotes--row > .quote { scroll-snap-align: start; }
.quotes--row:focus-visible { outline-offset: 4px; }
@media (max-width: 899px) {   /* the row runs to the screen edges, so the next quote peeks in */
  .quotes--row { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
}
@media (min-width: 640px) { .quotes--row { grid-auto-columns: calc((100% - 24px) / 2); } }
@media (min-width: 900px) { .quotes--row { grid-auto-columns: calc((100% - 80px) / 3); -moz-column-gap: 40px; column-gap: 40px; } }
@media (min-width: 900px) { .quotes--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@supports (grid-template-rows: subgrid) {
  .quotes--row { grid-template-rows: auto auto; row-gap: 14px; }
  .quotes--row > .quote, .quotes--row .quote-fig { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  @media (min-width: 900px) {
    .quotes--grid { grid-template-rows: auto auto; row-gap: 14px; }
    .quotes--grid > .quote, .quotes--grid .quote-fig { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  }
}
.quotes-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 20px; }
.quotes-nav { display: flex; gap: 8px; }
.quotes-nav .icon-btn { border: 1px solid var(--rule-2); background: var(--paper); }
.quotes-nav .icon-btn:hover:not(:disabled) { border-color: var(--ink-3); background: var(--paper-2); }
[data-quote-fits] .quotes-nav { display: none; }

.quotes--grid { padding-top: 6px; }
.quotes--cols { display: block; -moz-columns: 2 300px; columns: 2 300px; -moz-column-gap: 40px; column-gap: 40px; padding-top: 6px; }
.quotes--cols > .quote { -moz-column-break-inside: avoid; break-inside: avoid; margin-bottom: 32px; }

/* Press and award rows: quiet, left-aligned logos. A press logo links to its article (new tab) when the store has the URL;
   logo heights are set by eye in the store so the marks look equally heavy */
.press-wrap { container-type: inline-size; }   /* columns follow the space the row has: 2, 4, or all 7 in one line */
.press { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; justify-items: start; gap: 4px 24px; padding-top: 12px; }
@container (min-width: 600px) { .press { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1000px) { .press { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.press-link, .press-logo { display: flex; align-items: center; max-width: 100%; min-height: 56px; min-width: 44px; border-radius: var(--r); }
.press img { max-width: 100%; height: auto; opacity: .72; transition: opacity var(--t); }
.press-link:hover img, .press-link:focus-visible img { opacity: 1; }
.awards { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-top: 12px; }
.awards img { max-width: 100%; height: auto; }
@media (max-width: 639px) { .awards { -moz-column-gap: 24px; column-gap: 24px; } }

/* 19 · Marketing sections (logged-out pages) --------------------------------------
   The page is a stack of full-bleed bands: <main class="bands"> > <section class="band [band--alt|band--accent]"><div class="wrap">.
   A section starts at its band, never at a hairline. Bands alternate paper and paper-2; the closing call to action sits on
   the accent wash; the last band before the footer is never paper-2 (the footer is). Section headings (.band-title) use the
   h1's serif at 24–32 px: one clear step under the page h1 and one above item headings (UI font, 18 px).
   Boxes only for clickable things (V3): tool cards and link cards are whole-card links; list panels hold links.            */
.bands { display: block; }
.bands + .ftr { margin-top: 0; }
.band { padding-block: 52px; }
.band--alt { background: var(--paper-2); }
.band--accent { background: var(--accent-wash); }
.band--hero { padding-top: 0; }   /* the hero or page head brings its own top space */
@media (min-width: 640px) { .band { padding-block: 64px; } .band--hero { padding-top: 0; } }
@media (min-width: 900px) { .band { padding-block: 88px; } .band--hero { padding-top: 0; padding-bottom: 80px; } }
.band-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 24px; }
.band-head > div { min-width: 0; max-width: 62ch; }
@media (min-width: 900px) { .band-head { margin-bottom: 32px; } }
.band-title { font-family: var(--serif); font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.band-intro, .band-head .social-scale { margin-top: 10px; color: var(--ink-2); text-wrap: pretty; }
.band--alt .entry:hover { background: var(--paper); }
.band-cta { display: grid; gap: 20px 48px; align-items: center; justify-items: start; }
.band-cta p { max-width: 62ch; margin-top: 10px; color: var(--ink-2); }
@media (min-width: 900px) { .band-cta { grid-template-columns: minmax(0, 1fr) auto; } }

/* Tool cards: six equal cards; the name links to the tool page and the whole card follows it. Each card: the type colour as
   a 4 px top edge, the icon in a tinted circle, the name, one line, a real preview (linked to the example) and the example.
   Cards in a row share their lines (subgrid), so names, lines, previews and examples sit level whatever wraps. */
.tool-cards { --tc-gap: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tc-gap); }
@media (min-width: 700px) { .tool-cards { --tc-gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tool-cards { --tc-gap: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 20px; background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--c, var(--rule-3)); border-radius: var(--r); transition: border-color var(--t), box-shadow var(--t); }
@supports (grid-template-rows: subgrid) {
  .tool-card { display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; }   /* its own gap inside; the grid's gap between cards */
}
.tool-card:hover { border-color: var(--rule-3); border-top-color: var(--c, var(--rule-3)); box-shadow: var(--shadow-1); }
.tool-card:has(.tool-card-link:focus-visible) { outline: var(--ring); outline-offset: 2px; }
.tool-card-name { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.tool-card-link { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); }
.tool-card-link::after { content: ""; position: absolute; inset: -4px -1px -1px; border-radius: var(--r); }   /* the whole card follows the tool link */
.tool-card-link:focus-visible { outline: none; }
.tool-card:hover .tool-card-link > span:last-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tool-card-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--paper)); color: var(--c, var(--accent)); }
.tool-card-icon .i { width: 22px; height: 22px; }
.tool-card-text { color: var(--ink-2); text-wrap: pretty; }
/* Preview plate: a real capture, or a small preview drawn from the example's real content, 16:10 at least (container units,
   so no engine has to size an aspect-ratio box inside the subgrid). It grows with its content: nothing is clipped. */
.tool-card-preview { position: relative; z-index: 1; display: grid; justify-self: stretch; align-self: stretch; min-width: 0; container-type: inline-size; border: 1px solid var(--rule); border-radius: var(--r-in); background: var(--paper-2); }
.tool-card-preview > * { min-width: 0; min-height: 62.5cqw; }
.tool-card-preview > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; border-radius: calc(var(--r-in) - 1px); }
.tool-card-preview--fit > img { -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; }   /* a slide: whole, on its own background colour */
.tool-card-ex { position: relative; z-index: 1; justify-self: start; font-size: var(--fs-1); color: var(--ink-3); }
.tool-card-ex a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.tool-card-ex a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.tool-card-ex > span:last-child { white-space: nowrap; }
/* Small previews: user content (data-content); where they show the author's own colours, data-author-style */
.mini-quiz { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 16px; background: var(--paper); border-radius: inherit; }
.mini-quiz-q { font-size: .8125rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.mini-quiz-opts > span { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid var(--rule); font-size: .8125rem; line-height: 1.3; color: var(--ink-2); }
.mini-quiz-opts b { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--rule-3); border-radius: 50%; font-size: .625rem; color: var(--ink-3); }
.mini-quiz-opts .is-sel { color: var(--ink); font-weight: 700; }
.mini-quiz-opts .is-sel b { border-color: var(--accent); background: var(--accent); color: #fff; }
.mini-card-wrap { display: grid; place-items: center; padding: 14px 24px 22px 16px; }
.mini-card { position: relative; isolation: isolate; display: grid; grid-template-columns: 44% minmax(0, 1fr); align-items: center; gap: 10px; width: min(100%, 300px); padding: 10px; border-radius: var(--r-in); background: var(--card-bg, var(--paper)); color: var(--card-ink, var(--ink)); box-shadow: 0 1px 3px rgb(21 34 43 / .18); }
.mini-card::before { content: ""; position: absolute; z-index: -1; inset: 8px -8px -8px 8px; border-radius: var(--r-in); background: var(--card-bg, var(--paper)); opacity: .55; }
.mini-card::after { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: inherit; }
.mini-card img { width: 100%; height: auto; border-radius: 3px; background: #fff; }
.mini-card-text { font-size: .875rem; font-weight: 700; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
.mini-doc { display: flex; flex-direction: column; gap: 8px; margin: 12px 14px 0; padding: 12px 14px 12px; background: var(--paper); border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--r-in) var(--r-in) 0 0; }
.tool-card-preview > .mini-doc { min-height: calc(62.5cqw - 12px); }   /* the page fills the plate; its image takes what is left */
.mini-doc-title { font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.mini-doc img { flex: 1 1 0; width: 100%; min-height: 0; -o-object-fit: contain; object-fit: contain; -o-object-position: left top; object-position: left top; }
.mini-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 14px; background: var(--paper); border-radius: inherit; }
.mini-flow-box, .mini-flow-node { max-width: 100%; padding: 6px 12px; border-radius: var(--r-in); font-size: .6875rem; font-weight: 700; line-height: 1.3; text-align: center; color: #000; overflow-wrap: anywhere; }
.mini-flow-box { max-width: 240px; color: #fff; }
.mini-flow-node { padding-inline: 16px; border-radius: 999px; font-weight: 600; }
.mini-flow-line { flex: none; width: 2px; height: 14px; background: var(--ink-3); }

/* List panels: catalogue rows (or a row of tiles) under a type-coloured top rule, on a light panel */
.list-panels { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .list-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; } }
.list-panel { min-width: 0; padding: 14px 20px 8px; background: var(--paper-2); border-top: 3px solid var(--c, var(--rule-3)); border-radius: var(--r); }
/* A thumbnail inside a panel that already carries the type colour: no second coloured rule (critique 16 Oct P3, "bookcloth" edge once) */
.list-panel .thumb { border-top: 1px solid var(--rule); }
.list-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); }
.list-panel-title { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.list-panel .entry:hover { background: var(--paper); }
.list-panel .tiles { padding: 16px 0 14px; }

/* Link cards: an icon in a tinted circle, a title, a sentence and one link shown as a secondary button; the whole card follows it */
.link-cards { display: grid; gap: 16px; }
@media (min-width: 640px) { .link-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 900px) { .link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .link-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; padding: 22px 22px 24px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); transition: border-color var(--t), box-shadow var(--t); }
.link-card:hover { border-color: var(--rule-3); box-shadow: var(--shadow-1); }
.link-card-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); }
.link-card-icon .i { width: 22px; height: 22px; }
.link-card-title { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.link-card p { margin-bottom: 8px; color: var(--ink-2); text-wrap: pretty; }
.link-card .link-card-link { position: static; margin-top: auto; }
.link-card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }

/* Reports: each attempt behind a student's score (feedback GC-1006, 27 Oct) */
.rep-att > summary { cursor: pointer; list-style: none; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; text-underline-offset: 3px; }
.rep-att > summary::-webkit-details-marker { display: none; }
.rep-att-list { margin: 6px 0 2px; padding: 0; list-style: none; font-size: var(--fs-1); color: var(--ink-2); }
.rep-att-list li { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; white-space: nowrap; }
.rep-att-list b { color: var(--ink); }
/* Rails port adjustments (only what the static mock's markup can't express; site.css stays a verbatim copy).
   Uses site.css tokens. Keep this file small; report anything bigger back to the design system. */

/* Footer language links: the language is a link to the page in that language (the mock used buttons + aria-pressed). */

.ftr-lang [aria-current="true"] { color: var(--ink); font-weight: 700; }

/* Menu items that submit a form (Create, Log out): the form must not add a box of its own. */
.menu-form { display: contents; }

/* Consent manager (InMobi Choice): the footer's "Gestionar consentimiento" reopens it, so hide its floating link, as today. */
#qc-cmp2-persistent-link { display: none !important; }

/* Long menus (the admin cog: today's full admin menu) scroll inside the window. */
.menu-list--tall { max-height: calc(100vh - 72px); overflow-y: auto; }

/* The bell's "Ver más" loads the next batch (today's infinite scroll); a button styled as the panel's footer link. */
button.notif-foot { width: 100%; background: none; border: 0; border-top: 1px solid var(--rule); cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.notif-item b { font-weight: 700; }

/* Plain zero (critique 16 Oct P3): Atkinson's slashed zero read like code in prices ("1,Ø8 £") and marketing numbers
   ("2Ø12"). Prices everywhere, the marketing pages (body.l-marketing), the plans page and the end-of-sign-up offer put
   "GC Plain Zero" (U+0030 only) first. */
.price, .l-marketing main, main[data-account="plans"], .account-ob-offer { font-family: "GC Plain Zero", var(--sans); }

/* Google/Microsoft start forms (redesign/shell/_oauth_buttons, the sign-in dialog): the form adds no box of its own */
.account-provider { display: contents; }
.dlg .account-terms a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* Pager on the narrowest phones (gate, 16 Oct): "Anterior" + "Página 1 de 13" + "Siguiente" needed ~350 px and pushed
   the Library subject page 6 px sideways at 360 px. Below 400 px the two buttons show only their chevrons (the words stay
   for screen readers). */
@media (max-width: 399px) {
  .pager > .btn { padding: 0; min-width: 44px; justify-content: center; }
  .pager > .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Help: a question URL leads with that question and its answer (gate 16 Oct, SEO) */
.rdm-faq-lead { margin-top: var(--s-6); }
.rdm-faq-lead .h1 { margin-bottom: 16px; }
/*
 * Redesign: the design system for every redesigned page (used ONLY by layouts/redesign/*).
 * redesign/site.css is the mock-up's css/site.css, copied verbatim from goconqr-design/full-site
 * (keep it in sync from there; don't hand-edit here). Compressed by RedesignCssCompressor
 * (config/initializers/redesign.rb), not SassC, which can't parse modern CSS.
 *



 */