/* One stylesheet for every page, built on the tokens in DESIGN.md.
   The idea: a set of highlighters. Every part of the app has its own highlighter colour,
   used the same way in the nav, the page header and inside the page:
     yellow = Today and today's skill (and the evidence in my text)
     blue   = writing (Free write, my task, the main buttons)
     violet = words (Word bank, phrase chips, word upgrades)
     pink   = not yet and my mistakes (My ledger)
     green  = met and progress (Progress)
     orange = Warm-up
   Colours are variables, so a change of look happens in one place (the tokens in section 2).

   Sections, in order (search for the number):
     1. Fonts          2. Tokens (colours, radii, spacing, type)   3. Page colours
     4. Base           5. Header: top bar, tab bar (<= 900px) and left sidebar (>= 901px)
     6. Page header and cards     7. Buttons     8. Tabs and rows (shared, new)
     9. Forms          10. The composer (writing card)
     11. Page sections: Free write, Today, Word bank, My ledger, Progress, Warm-up, Settings, ...
   Look: same colours, cleaner and bolder, like a tidy language app (see DESIGN.md). */

/* ---- 1. Fonts (self-hosted: Google Fonts is often blocked or slow in mainland China) ---- */
@font-face {
  font-family: "Literata";
  src: url("fonts/literata.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---- 2. Tokens ---- */
:root {
  --paper: #f4f2ee;   /* page background: a desk of warm paper, not app grey */
  --sheet: #fffefc;   /* cards, the writing paper */
  --ink: #1b1d24;     /* text */
  --pencil: #5d5a55;  /* secondary text */
  --rule: #e3dfd7;    /* lines, borders */
  --pen: #1c48b0;     /* blue-black ink: the main button, links, focus ring */
  --pen-hover: #153a92;
  --pen-on: #ffffff;  /* text on --pen */

  /* The highlighters: hl = the pen itself (marks, bars), tint = a soft card background,
     strong = text and icons in that colour (WCAG AA on white, paper and the tint). */
  --y-hl: #ffd84d;  --y-tint: #fff6d1;  --y-strong: #7a5700;
  --b-hl: #94bfff;  --b-tint: #e8f0ff;  --b-strong: #2945c9;
  --v-hl: #c0aaff;  --v-tint: #f1ecff;  --v-strong: #6541d1;
  --p-hl: #ff94bb;  --p-tint: #ffeaf2;  --p-strong: #b0245a;
  --g-hl: #7fdcaa;  --g-tint: #e3f7ec;  --g-strong: #13744a;
  --o-hl: #ffb478;  --o-tint: #fff1e4;  --o-strong: #a5520f;

  /* A highlighter stroke under words (the topic, a title): full colour on light paper. */
  --y-under: var(--y-hl);
  --b-under: var(--b-hl);
  --v-under: #dccfff;
  --p-under: var(--p-hl);
  --g-under: var(--g-hl);
  --o-under: var(--o-hl);

  --marker: var(--y-hl);                    /* the evidence highlighter */
  --marker-soft: rgba(255, 216, 77, 0.55);  /* highlighter behind text */
  --met: var(--g-strong);
  --met-soft: var(--g-tint);
  --notyet: var(--p-strong);
  --notyet-soft: var(--p-tint);

  /* Sheets lie flat on the desk: a hairline, not a floating shadow. */
  --shadow: 0 1px 0 rgba(27, 29, 36, 0.04);
  --shadow-lift: 0 2px 10px rgba(27, 29, 36, 0.07);
  --line: 36px;       /* the composer's line height, and the gap between its ruled lines */
  --text: "Literata", "Iowan Old Style", Georgia, serif;
  --ui: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --nav-h: 64px;      /* the bottom tab bar on phones and tablets */
  --sidebar-w: 208px; /* the left sidebar from 901px wide */

  /* Shape and space (shared by every page; no dark copy needed). */
  --r-card: 16px;  --r-btn: 12px;  --r-chip: 8px;  --r-tag: 6px;
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --fs-title: 28px;  --fs-h2: 20px;  --fs-h3: 17px;  --fs-small: 13px;
  --display: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif; /* headings: bold sans. The writing stays in --text (Literata). */

  /* Icons (simple line icons, drawn as CSS masks so they take any colour). */
  --i-today: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  --i-write: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  --i-warmup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  --i-words: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
  --i-learn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5z'/%3E%3C/svg%3E");
  --i-ledger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M12 11h4M12 16h4M8 11h.01M8 16h.01'/%3E%3C/svg%3E");
  --i-progress: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 7 13.5 15.5 8.5 10.5 2 17'/%3E%3Cpath d='M16 7h6v6'/%3E%3C/svg%3E");
  --i-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E");
  --i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6M10 22h4'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
  --i-shuffle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 18h1.4c1.3 0 2.5-.6 3.3-1.7l6.1-8.6c.7-1.1 2-1.7 3.3-1.7H22'/%3E%3Cpath d='m18 2 4 4-4 4'/%3E%3Cpath d='M2 6h1.9c1.5 0 2.9.9 3.6 2.2'/%3E%3Cpath d='M22 18h-5.9c-1.3 0-2.6-.7-3.3-1.8l-.5-.8'/%3E%3Cpath d='m18 14 4 4-4 4'/%3E%3C/svg%3E");
  --i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
  --i-type: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7V4h16v3M9 20h6M12 4v16'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-again: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
  --i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
  --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7M19 12H5'/%3E%3C/svg%3E");
  --i-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7M12 19V5'/%3E%3C/svg%3E");
  --i-sound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7M19 5a10 10 0 0 1 0 14'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---- 3. Page colours ---- Each page has its own highlighter: the nav marks it, and the page header uses it. */
.pg-today, .n-today       { --c-hl: var(--y-hl); --c-tint: var(--y-tint); --c-strong: var(--y-strong); --c-under: var(--y-under); --icon: var(--i-today); }
.pg-write, .n-write       { --c-hl: var(--b-hl); --c-tint: var(--b-tint); --c-strong: var(--b-strong); --c-under: var(--b-under); --icon: var(--i-write); }
.pg-warmup, .n-warmup     { --c-hl: var(--o-hl); --c-tint: var(--o-tint); --c-strong: var(--o-strong); --c-under: var(--o-under); --icon: var(--i-warmup); }
.pg-words, .n-words       { --c-hl: var(--v-hl); --c-tint: var(--v-tint); --c-strong: var(--v-strong); --c-under: var(--v-under); --icon: var(--i-words); }
.pg-learn, .n-learn       { --c-hl: var(--v-hl); --c-tint: var(--v-tint); --c-strong: var(--v-strong); --c-under: var(--v-under); --icon: var(--i-learn); }
.pg-practice, .n-practice { --c-hl: var(--p-hl); --c-tint: var(--p-tint); --c-strong: var(--p-strong); --c-under: var(--p-under); --icon: var(--i-target); --band-ink: #4a0f28; }
.pg-ledger, .n-ledger     { --c-hl: var(--p-hl); --c-tint: var(--p-tint); --c-strong: var(--p-strong); --c-under: var(--p-under); --icon: var(--i-ledger); }
.pg-progress, .n-progress { --c-hl: var(--g-hl); --c-tint: var(--g-tint); --c-strong: var(--g-strong); --c-under: var(--g-under); --icon: var(--i-progress); }
.pg-settings, .pg-setup { --c-hl: var(--b-hl); --c-tint: var(--b-tint); --c-strong: var(--b-strong); --c-under: var(--b-under); --c-under: var(--b-under); --icon: var(--i-settings); }
.pg-setup { --icon: var(--i-write); }

/* ---- 4. Base ---- */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.25;
  margin: 0 0 var(--s-2);
}

h3 {
  font-size: var(--fs-h3);
  margin: var(--s-4) 0 var(--s-2);
}

@media (max-width: 560px) {
  :root { --fs-title: 24px; }
}

/* The signature: a stroke of highlighter across the lower half of a few words (page
   titles, section labels, the verdict), the same mark as the topic in a task. --mark picks
   the colour. The current nav item gets the thinner stroke of a highlighter underline. */
main.page > h1,
.group > .label,
.did-well > .label,
.changed > .label,
.c1-version > h2,
.c1-version > .c1-panel > h2,
.fix-offer > h2,
.start-card > h2,
section.where > h2,
section.your-words > h2,
.verdict-word {
  width: fit-content;
  padding-inline: 4px;
  margin-left: -4px;
  line-height: 1.25;
  background: linear-gradient(transparent 56%, var(--mark, var(--c-under, var(--y-under))) 56%, var(--mark, var(--c-under, var(--y-under))) 94%, transparent 94%);
}
.nav a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-color: var(--c-under);
  text-decoration-thickness: 0.36em;
  text-underline-offset: -0.08em;
  text-decoration-skip-ink: none;
}

/* The parts of the browser nobody draws still carry the look. */
::selection { background: var(--marker-soft); color: inherit; }
textarea, input { caret-color: var(--pen); }
html { scrollbar-color: color-mix(in srgb, var(--pencil) 45%, transparent) transparent; }

a {
  color: var(--pen);
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--pen);
  outline-offset: 2px;
  border-radius: var(--r-tag);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.lead {
  color: var(--pencil);
  margin: 0 0 var(--s-4);
}

ul {
  padding-left: 20px;
}

/* An icon from the set at the top (a CSS mask, so it takes the text colour). */
.ic,
.nav a::before,
.settings-link::before {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* The one column every page uses: at most 720px wide, 16px side gutters. */
.col {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: 16px;
}

/* =====================================================================
   5. Header, shared by all pages: the logo, the nav and Settings.
   901px and up: a left sidebar (`.site-header.sidebar`): logo, "Practise" and "Review"
   groups, Settings at the bottom. The pages without a nav (setup, placement) keep the plain
   top bar below.
   900px and under: the logo and Settings stay at the top; the nav is a tab bar at the bottom.
   ===================================================================== */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header .col {
  max-width: 1120px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}

/* The logo: the blue tile with the white "B" and the yellow highlighter underline (logo.svg), then the name. */
.logo {
  display: inline-block;
  flex: none;
  width: 30px;
  height: 30px;
  background: url("logo.svg") center / contain no-repeat;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  margin-left: auto;
  font-size: 14px;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: var(--r-chip);
  color: var(--pencil);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.nav a::before {
  content: "";
  color: var(--c-strong);
}
.nav a:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--rule) 55%, transparent);
}
.nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* The label of a nav group ("Practise", "Review"): only the sidebar and the top bar show it
   in some form; the tab bar hides it. */
.nav-group {
  display: none;
  padding: var(--s-3) 12px var(--s-1);
  font-size: 12px;
  font-weight: 700;
  color: var(--pencil);
}

.settings-link {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--pencil);
  --icon: var(--i-settings);
}
.settings-link::before { content: ""; width: 20px; height: 20px; }
.settings-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.settings-link:hover { color: var(--ink); background: color-mix(in srgb, var(--rule) 55%, transparent); }
.settings-link[aria-current="page"] { color: var(--b-strong); background: var(--b-tint); }

/* Phones and tablets: the logo and Settings stay at the top; the nav is a tab bar at the
   bottom, with the icon above the name. */
@media (max-width: 900px) {
  .site-header .col { min-height: 56px; justify-content: space-between; }
  .nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--sheet);
    border-top: 1px solid var(--rule);
    font-size: 11px;
    justify-content: space-around;
  }
  /* 7 tabs: on the narrowest phones the labels get a little smaller so none runs into the next. */
  @media (max-width: 420px) { .nav { font-size: 10px; } }
  .nav a {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 4px 2px;
    border-radius: var(--r-chip);
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
  }
  .nav a::before {
    width: 46px;
    height: 26px;
    -webkit-mask-size: 20px;
    mask-size: 20px;
  }
  .nav a:hover { background: none; }
  /* The active tab: bold, and its icon sits on a pill of its highlighter (::after, behind
     the icon; the fixed tab bar is its own layer, so z-index -1 stays above its background). */
  .nav a { position: relative; }
  .nav a[aria-current="page"] {
    color: var(--c-strong);
    font-weight: 700;
    background: none;
    text-decoration: none;
  }
  .nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 46px;
    height: 26px;
    margin-left: -23px;
    border-radius: 999px;
    background: var(--c-tint);
    z-index: -1;
  }
  .nav-group { display: none; }
  body { padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
  /* Eight tabs (Practice is the eighth): "Free write", "Word bank" and "My ledger" use two lines. */
  :root { --nav-h: 80px; }
  .nav { align-items: flex-start; }
  .nav a.n-write, .nav a.n-words, .nav a.n-ledger { white-space: normal; }
}

/* From 901px: the header is a fixed, full-height column on the left (the page is pushed
   right by --sidebar-w). The current item sits on a tinted pill in its page's colour. */
@media (min-width: 901px) {
  body:has(> .site-header.sidebar) { padding-left: var(--sidebar-w); }
  /* The page column sits close to the sidebar, not centred in a wide empty space. */
  body:not(.pg-today):not(.pg-write) > main.page.col { margin-left: clamp(16px, 4vw, 56px); margin-right: auto; }
  .site-header.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    width: var(--sidebar-w);
    overflow-y: auto;
    background: var(--sheet);
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .sidebar .col {
    max-width: none;
    min-height: 100%;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-3) var(--s-4);
  }
  .sidebar .brand { padding: 0 var(--s-2) var(--s-3); font-size: 21px; }
  .sidebar .nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    font-size: 15px;
  }
  .nav-group { display: block; }
  .nav-group:first-child { padding-top: var(--s-1); }
  .sidebar .nav a {
    gap: var(--s-3);
    padding: 10px 12px;
    border-radius: var(--r-btn);
    color: var(--ink);
    font-weight: 600;
  }
  .sidebar .nav a[aria-current="page"] {
    background: var(--c-tint);
    color: var(--c-strong);
    font-weight: 700;
    text-decoration: none;
  }
  .sidebar .settings-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    width: auto;
    height: auto;
    margin-top: auto;
    padding: 10px 12px;
    border-radius: var(--r-btn);
    color: var(--ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
  }
  .sidebar .settings-link span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
  .sidebar .settings-link::before { width: 18px; height: 18px; color: var(--b-strong); }
}

/* On a touch screen, while I type, the tab bar steps aside, so the on-screen keyboard
   does not push it up over my text. */
@media (max-width: 900px) and (pointer: coarse) {
  body:has(textarea:focus, input:not([type]):focus, input[type="text"]:focus) .nav { display: none; }
}

/* =====================================================================
   Pages other than Today: the page header (the page's icon on its highlighter, the title,
   the lead), then cards.
   ===================================================================== */
main.page {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding-block: var(--s-5) 48px;
}
main.page > * { margin-block: 0; min-width: 0; }

/* The page title: big, in Literata, with a stroke of the page's highlighter (the nav item
   of the page is marked the same way). No icon tile. */
main.page > h1 {
  margin: var(--s-1) 0 0 -4px;
}
main.page > h1 + .lead { margin: -8px 0 0; max-width: 60ch; font-size: 15px; }

/* A card: a flat sheet of paper on the desk (hairline border, barely any shadow). */
.card,
main.page > section,
.before,
#result,
.pattern,
.backup,
#profile-form,
.core-group {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--s-5);
  min-width: 0;
}
main.page > section h2:first-child,
.card > h2:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .card,
  main.page > section,
  .before,
  #result,
  .pattern,
  .backup,
  #profile-form,
  .core-group { padding: var(--s-4); border-radius: var(--r-card); }
}

/* ---- Buttons: primary (pen blue, round, one per screen) and quiet (outline) ---- */
button,
.btn {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: var(--r-btn);
  min-height: 48px;
  padding: 0 var(--s-6);
  background: var(--pen);
  color: var(--pen-on);
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
  transition: background-color 0.15s, box-shadow 0.15s;
}
button:hover,
.btn:hover {
  background: var(--pen-hover);
}

button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.btn.quiet,
button.secondary {
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}

.btn.quiet:hover,
button.secondary:hover {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--pencil);
}

button.secondary {
  padding: 0 var(--s-4);
  min-height: 40px;
  font-size: 14px;
}

/* The next step once a task is closed ("Try it on a new topic"): green, because green means
   progress. It sits in the writing card's foot, where Check was. */
.btn.go {
  background: var(--g-strong);
  color: var(--sheet);
}
.btn.go:hover {
  background: color-mix(in srgb, var(--g-strong) 85%, var(--ink));
}
.closed-note {
  margin: 0;
  padding: 0 0 var(--s-4);
  font-size: var(--fs-small);
  color: var(--pencil);
}

/* A small pill with an icon: Different topic, My own topic, Words for this topic. */
.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: 6px 12px;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
}
.linkbtn::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: var(--b-strong);
  -webkit-mask: var(--icon, var(--i-plus)) center / contain no-repeat;
  mask: var(--icon, var(--i-plus)) center / contain no-repeat;
}
.linkbtn:hover {
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--b-strong);
}
.linkbtn[aria-expanded="true"] {
  background: var(--b-tint);
  box-shadow: inset 0 0 0 1px var(--b-strong);
  color: var(--b-strong);
}
#swap, #fw-swap { --icon: var(--i-shuffle); }
#topic-menu { --icon: var(--i-shuffle); }
/* Wide screens show "Different topic" and "My own topic" directly; phones fold them behind
   "Change topic", so the writing box shows above the tab bar. */
@media (min-width: 561px) {
  #topic-menu { display: none; }
}
@media (max-width: 560px) {
  #topic-row:not(.topic-open) #swap,
  #topic-row:not(.topic-open) #own-open { display: none; }
}
#own-open, #fw-own-open { --icon: var(--i-pencil); }
#words-open { --icon: var(--i-type); }
#words-open::before { background: var(--v-strong); }
#words-open[aria-expanded="true"] { background: var(--v-tint); box-shadow: inset 0 0 0 1px var(--v-strong); color: var(--v-strong); }

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Full-width buttons on phones. */
@media (max-width: 560px) {
  .btns {
    width: 100%;
  }
  .btns .btn,
  .composer-foot button {
    flex: 1 1 100%;
  }
}

/* ---- Form fields ---- */
textarea,
input[type="text"],
input:not([type]) {
  font: inherit;
  color: var(--ink);
  background: var(--sheet);
  border: 1.5px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
}
textarea:focus,
input[type="text"]:focus,
input:not([type]):focus {
  outline: none;
  border-color: var(--pen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 18%, transparent);
}

textarea {
  width: 100%;
  font-family: var(--text);
  font-size: var(--fs-h3);
  line-height: 1.6;
  resize: vertical;
}

input[type="file"] {
  max-width: 100%;
  color: var(--ink);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--pen);
  width: 17px;
  height: 17px;
}

/* Messages under a button. The scripts set the class to "warning" or "ok". */
#message.warning,
.form-message {
  margin: 12px 0 0;
  color: var(--notyet);
}

#message.ok {
  color: var(--met);
}

#message:empty {
  display: none;
}

/* =====================================================================
   The composer: the writing card, lined paper. A label at the top, ruled lines behind
   the text (one every 36px, the same as the line height), and a foot with the word
   count and the button.
   ===================================================================== */
.composer {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--s-6) 0;
  min-width: 0;
}

/* A pen-blue frame while I am typing in it. */
.composer:has(textarea:focus) {
  border-color: var(--pen);
  box-shadow: 0 0 0 1px var(--pen), var(--shadow-lift);
}

.composer-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--pencil);
  margin: 0 0 6px;
}

.composer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0 18px; /* the last ruled line above is the separator */
}

.count,
#word-count {
  font-size: var(--fs-small);
  color: var(--pencil);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.count b {
  color: var(--ink);
  font-weight: 700;
}

.count-try {
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: var(--r-tag);
  background: var(--p-tint);
  color: var(--p-strong);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .composer {
    padding: var(--s-3) var(--s-4) 0;
  }
}

/* =====================================================================
   8. Tabs and rows (shared parts; Phases 2-3 use them, no page does yet)
   .tabs: filter buttons with a count. From 561px they are stat tiles in a row; on phones
   one row of pills that scrolls sideways inside itself (the page never scrolls sideways).
     <div class="tabs" role="tablist"><button role="tab" aria-selected="true">
       <span class="tab-count">4</span><span class="tab-label">Learning</span></button>...</div>
   .row: a short details/summary list row with a chevron.
     <details class="row"><summary>Title <span class="row-meta">note</span></summary>...</details>
   ===================================================================== */
.tabs {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button,
.tabs .tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font-size: var(--fs-small);
  font-weight: 600;
}
.tabs button:hover,
.tabs .tab:hover { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--pencil); }
.tabs [aria-selected="true"],
.tabs [aria-pressed="true"] {
  background: var(--c-tint, var(--b-tint));
  color: var(--c-strong, var(--b-strong));
  box-shadow: inset 0 0 0 1.5px var(--c-hl, var(--b-hl));
}
.tabs .tab-count { font-variant-numeric: tabular-nums; font-weight: 800; }
@media (min-width: 561px) {
  .tabs { overflow: visible; }
  .tabs button,
  .tabs .tab {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-card);
    text-align: left;
  }
  .tabs .tab-count { order: -1; font-family: var(--display); font-size: var(--fs-title); line-height: 1.1; }
}

.row {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  min-width: 0;
}
.row > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.row > summary::-webkit-details-marker { display: none; }
.row > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--pencil);
  border-bottom: 2px solid var(--pencil);
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.row[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .row > summary::after { transition: none; } }
.row > :not(summary) { padding: 0 var(--s-4) var(--s-4); }

/* ---- Free write page: the essay in a composer. Quiet warnings: the textarea sits on
   top of a "backdrop" holding the same text; the backdrop draws the underlines. ---- */
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--pencil);
  font-size: 14px;
}

.editor {
  position: relative;
}

#essay,
#backdrop {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--text);
  font-size: 21px;
  line-height: var(--line);
  border: 0;
  border-radius: 0;
  overflow-y: scroll;
  scrollbar-width: thin;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

#essay {
  position: relative;
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px));
  background-size: 100% var(--line);
  background-attachment: local; /* the lines scroll with the text */
  resize: none;
  height: calc(var(--line) * 12);
}

#essay:focus {
  outline: none;
  box-shadow: none;
}

#essay::placeholder {
  color: var(--pencil);
  opacity: 0.7;
}

#backdrop {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  color: transparent;
  pointer-events: none;
}

#backdrop mark {
  background: transparent;
  color: transparent;
  /* Quick tips are dotted and blue; real mistakes in the result are wavy and pink. */
  text-decoration: underline dotted 2px var(--pen);
  text-underline-offset: 6px;
}

/* After a check, the mistakes are marked in the box itself (wavy pink, like Today), each with
   a small number pill on the top edge of its first word. The pill is absolutely placed, so it
   takes no room and the marks stay exactly under the words of the textarea. It is anchored at
   the start of the marked words: words that wrap onto two lines keep it on the first line, and
   it sits low enough not to cover the line above. */
#backdrop mark.bad {
  position: relative;
  border-radius: 3px;
  background: var(--notyet-soft);
  text-decoration: underline wavy var(--notyet);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
#backdrop mark.bad.focus { background: var(--p-under); }
#backdrop mark.bad::after {
  content: attr(data-n);
  position: absolute;
  left: -6px;
  top: -0.5em;
  min-width: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--p-strong);
  color: var(--sheet);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

/* The note whose words the caret is in. */
.note.lit .note-quote span { background: var(--p-under); }
.find-btn { font-family: var(--ui); font-size: 14px; }
.note-changed { color: var(--met); }
.result-from { margin: 0 0 4px; font-weight: 700; color: var(--b-strong); }

#warning-notes {
  color: var(--pen);
  font-size: 14px;
  margin: 8px 0 0;
}

#warning-notes:empty {
  display: none;
}

@media (max-width: 560px) {
  #essay,
  #backdrop {
    font-size: 19px;
  }
  #essay {
    height: calc(var(--line) * 10);
  }
}

/* The Free write result is a "marked page": the band on a blue banner (blue = writing; a band
   is not pass or fail, so never green or pink), my writing again on a white sheet with numbered
   marks on the words that need work, the notes in the order they come in my text, and what
   worked. The marks are the same wavy pink underlines and number pills as on Today. */
/* The result itself is not a card here (the shared card rule above): its parts are the cards. */
#ledger-note { display: block; margin: 0; }

.pg-write #result {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.pg-write #result:not([hidden]) {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.verdict-box.band-box { background: var(--b-tint); --mark: var(--b-under); }
#result #band { margin: 0; }
#result #band:focus-visible { outline: 2px solid var(--pen); outline-offset: 4px; }
#band-evidence { font-family: var(--text); font-size: var(--fs-h3); }

/* The marked page: a white sheet with my text on it, read-only. */
.notes,
.worked,
.moves,
.plan-result,
.history {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow);
  padding: 18px 28px;
  min-width: 0;
}
.notes > .label,
.moves > .label,
.history > .label,
.plan-result > .label,
.worked > .label {
  --mark: var(--b-under);
  width: fit-content;
  margin: 0 0 12px -4px;
  padding-inline: 4px;
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.25;
  background: linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
}
.notes > .label { --mark: var(--p-under); }

/* Check my plan: one row per step of the plan, with a tag (green Done, pink Too thin or Missing),
   my words and what to add. A card like the notes; the card itself takes the keyboard. */
.plan-result { scroll-margin-top: 16px; }
.plan-result:focus { outline: none; }
.plan-result:focus-visible { outline: 2px solid var(--pen); outline-offset: 4px; }
.plan-lead { margin: 0 0 14px; }
.plan-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.plan-step { display: grid; gap: 4px; min-width: 0; }
.plan-step + .plan-step { border-top: 1px solid var(--rule); padding-top: 14px; }
.plan-step > p { margin: 0; overflow-wrap: anywhere; }
.plan-step.done .plan-note { color: var(--pencil); }
.need.good { background: var(--g-tint); color: var(--g-strong); }
/* Under the word count: how long a developed C1 paragraph is (only under 150 words). */
.length-note { margin: 0; font-size: var(--fs-small); color: var(--pencil); }
.length-note:empty { display: none; }
.worked > .label { --mark: var(--g-under); }
.pg-write #marked-note { margin: 0; }

/* What moved in your ledger: one row per kind of mistake this text touched. The kind, a tag
   (green Moved up / Right again, pink Moved down / Again, blue New), the status, then the next
   step on its own line. Green stroke: this card is about progress. */
.moves > .label { --mark: var(--g-under); }
.moves-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.moves-list li { display: grid; gap: 2px; min-width: 0; }
.moves-list li + li { border-top: 1px solid var(--rule); padding-top: 12px; }
.moves-list p { margin: 0; overflow-wrap: anywhere; }
.move-status { font-size: 14px; color: var(--pencil); white-space: nowrap; }
.move-next { font-size: 15px; }
.note-title .need { margin-left: 2px; vertical-align: 1px; white-space: nowrap; }

.mission-report > .label { --mark: var(--y-under); }

/* Your past writing: one row per past check, newest first. A row is a quiet button: the date,
   band, size and notes on a small line, then the first words in the writing font. */
.history-list { list-style: none; margin: 0; padding: 0; display: grid; }
.history-list li + li { border-top: 1px solid var(--rule); }
.history-row {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 10px 4px;
  border: 0;
  border-radius: var(--r-tag);
  background: none;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.history-row:hover { background: var(--b-tint); }
.history-meta { font-size: var(--fs-small); color: var(--pencil); }
.history-preview { font-family: var(--text); font-size: 16px; overflow-wrap: anywhere; }
.history .linkbtn { margin-top: 8px; }
.history .quiet-note:empty { display: none; }

/* The notes: a number that matches the mark in the text, then the plain words. */
.notes-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  scroll-margin-top: 80px;
}
.note:focus-visible { outline: 2px solid var(--pen); outline-offset: 6px; border-radius: 4px; }
.note-num {
  grid-row: 1 / span 4;
  min-width: 1.5em;
  height: 1.5em;
  border-radius: 999px;
  background: var(--p-strong);
  color: var(--sheet);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
}
.note > :not(.note-num) { grid-column: 2; min-width: 0; margin: 0; }
.note-title { font-weight: 700; }
.note-quote { font-family: var(--text); font-size: var(--fs-h3); }
.note-quote span {
  padding-inline: 2px;
  background: var(--marker-soft);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.note .guided-fix { margin-top: 4px; }

/* What worked: a short green-dotted list. */
.worked-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.worked-list li { position: relative; padding-left: 20px; }
.worked-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-strong);
}

@media (max-width: 560px) {
  .notes,
  .worked,
  .moves,
  .history { padding: 16px 18px; }
}

/* Start here (Free write): the side panel's help card, in the yellow of "read this first" on
   Today. A yellow band (the same .skill-band, .step-lead and .step-badge as the Today skill
   card), then a bar of three tabs: 1 Ideas, 2 Plan, 3 Words. Only the selected step shows, so
   all three tabs are in view without scrolling. The numbers are a CSS counter, so a tab that is
   hidden (no ideas) never leaves a gap. The topic and the question are not here: they are the
   blue band of the writing card. */
.pg-write .start-here {
  --band-ink: #3a2a00;
  --card-bg: color-mix(in srgb, var(--y-hl) 16%, var(--sheet));
  --row-hover-border: color-mix(in srgb, var(--y-hl) 60%, #7a5700);
  padding: 0;
  overflow: hidden; /* so the band follows the card's rounded corners */
  flex-shrink: 0;   /* in the side panel the card keeps its height; the panel scrolls, not the card */
  background: var(--card-bg);
  border: 2px solid var(--y-hl);
  border-radius: var(--r-card);
}
/* The badge on the band holds a light bulb ("get ready"), not a number: the rows are 1, 2, 3
   and the writing is 4. */
.start-here .step-badge::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--i-bulb) center / contain no-repeat;
  mask: var(--i-bulb) center / contain no-repeat;
}
.start-here h2 { margin: 0; padding: 0; background: none; font: inherit; color: inherit; }
.start-kicker {
  margin: 0 0 0 38px; /* badge (28px) + gap (10px): under the text when it wraps */
  white-space: nowrap;
  font: 600 13px/1.25 var(--ui);
  color: color-mix(in srgb, var(--band-ink) 85%, transparent);
}
/* The 1-2-3 stepper (the tab bar of Start here), the panels and the "Next" buttons are in the
   Free write studio block at the end of this file. */
/* Phones: a tighter top, so the top of the writing box shows above the tab bar. */
@media (max-width: 560px) {
  .pg-write main.page { gap: 12px; padding-top: 10px; }
}
.plan-words:empty { display: none; }
.before .plan-words { margin: 8px 0 0; }
.start-panel .plan-words { margin-top: 0; }
/* My writing and its result, under "Before you write" (beside it on wide screens). */
.write-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Wide screens (1200px and up): my writing card is the left column, the side panel (the help
   before a check; the result and the plan check after one) is the right column. The panel is
   sticky and scrolls inside itself when its content is long (accepted trade-off), so the notes
   stay beside the marks. Under 1200px the panel stacks after the writing card. */
.write-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.write-side > * { margin: 0; }
@media (min-width: 1200px) {
  .pg-write main.page {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    column-gap: 20px;
    row-gap: 16px;
    align-items: start;
  }
  .pg-write main.page > .fw-head,
  .pg-write main.page > .budget-note,
  .pg-write main.page > .write-band { grid-column: 1 / -1; }
  .pg-write .write-main { grid-column: 1; }
  .pg-write .write-side {
    grid-column: 2;
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
}

/* The blue prompt card above the writing and the panel: today's topic and the question
   (the Free write studio block at the end of this file styles it). */
.write-band .label { font-size: var(--fs-small); font-weight: 600; color: var(--b-strong); margin: 0 0 6px; }
.write-band .before-question { margin-bottom: 0; }

/* "Stuck? Start here": 1 Ideas, 2 Plan, 3 Words. Only under 1200px, where the side panel is
   below the writing; each opens its row of "Start here". Numbered by CSS like the rows, so a
   hidden "Ideas" button renumbers the others. */
.help-wrap { margin: 0 0 var(--s-3); }
.group-label { margin: 0 0 var(--s-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--pencil); }
.help-btns { display: flex; gap: var(--s-2); margin: 0; counter-reset: help-step; }
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  counter-increment: help-step;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 4px 14px;
  min-height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--sheet);
  color: var(--b-strong);
  box-shadow: none;
  cursor: pointer;
}
.help-btn[hidden] { display: none; }
.help-btn::before {
  content: counter(help-step);
  content: counter(help-step) / "";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--b-strong);
  color: var(--sheet);
  font: 700 12px/1 var(--ui);
}
.help-btn:hover { background: var(--b-tint); }
@media (max-width: 560px), (pointer: coarse) {
  .help-btn { min-height: 44px; flex: 1; }
}
@media (min-width: 1200px) {
  .help-wrap { display: none; }
}

/* Past writing: a button in the page header opens the list as a popover
   (native: no open or close code), centred on the screen. */
#history.history[popover] {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(440px, calc(100vw - 32px));
  max-height: min(70dvh, 560px);
  overflow-y: auto;
  box-shadow: var(--shadow-lift, var(--shadow));
}
#history.history:not(:popover-open) { display: none; }

/* "Check my plan" is a quick look before the real check: a quiet link next to "Check my
   writing", never a second button of the same weight. */
#plan-check { --icon: var(--i-check); }
.pg-write .composer-foot .btns { align-items: center; }

/* On a Free write note, "Fix it step by step" is the one real action. The Helpful / Not helpful
   votes (report-wrong.js) come last, as small text links, so a note reads as one thing to do. */
.pg-write .fb-btn,
.pg-write .fb-btn:hover {
  min-height: 28px;
  padding: 3px 6px;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.pg-write .fb-btn:hover { color: var(--ink); text-decoration-color: currentColor; }
.pg-write .fb-btn[aria-pressed="true"] { background: var(--paper); text-decoration: none; }
.pg-write .note .fb { margin-top: 6px; }
/* "Rate this note": the one link that opens the two votes on a Free write note. */
.fb-open,
.fb-open:hover {
  min-height: 28px;
  padding: 3px 0;
  background: transparent;
  box-shadow: none;
  color: var(--pencil);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.fb-open:hover { color: var(--ink); text-decoration-color: currentColor; }
.fb-open[hidden], .fb-row[hidden] { display: none; }

/* The guided fix opens inside its note: a 1px rule on the left, not another tinted box. */
.pg-write .fix-panel { padding: 4px 0 4px 14px; border-radius: 0; background: none; border-left: 1px solid var(--rule); }

/* The band box: the target line in ink (grey on blue was faint), then what to do next. */
.band-box #target-feedback { color: var(--ink); font-size: 14px; }
.next-step { margin: 10px 0 0; font-weight: 600; color: var(--b-strong); }
.pg-write .fb-row { gap: 4px; }

/* Phones and touch screens: every tap target on Free write is at least 44px high. */
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .task-tools .linkbtn,
  .pg-write #plan-check,
  .pg-write .chip,
  .pg-write .fb-btn,
  .pg-write .fb-open,
  .pg-write .find-btn,
  .pg-write .guided-fix > button { min-height: 44px; }
  .pg-write .toggle { min-height: 44px; }
}
.before .label { font-size: var(--fs-small); font-weight: 600; color: var(--pencil); margin: 0 0 6px; }
.before .small { font-size: var(--fs-small); color: var(--pencil); margin: 4px 0 0; overflow-wrap: anywhere; }
.before-topic {
  display: inline-block;
  font-family: var(--text);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 0 4px;
  background: linear-gradient(transparent 58%, var(--topic-under, var(--y-under)) 58%);
  overflow-wrap: anywhere;
}
.before-question {
  font-family: var(--text);
  font-size: 19px;
  line-height: 1.45;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-hl) 60%, transparent);
  overflow-wrap: anywhere;
}
.before-question:empty { display: none; }
/* No question yet: a quiet line, so it does not look like a real question. */
.before-question.none { font-size: 15px; color: var(--pencil); background: transparent; box-shadow: none; padding: 0; }
.before-ideas { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.before-ideas li { overflow-wrap: anywhere; }
.before-ideas li::marker { color: var(--b-strong); }
/* Skills from Today: one white slip per skill with a yellow edge (the card around is yellow). */
.before-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.before-skills li {
  padding: 10px 14px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--y-hl) 70%, transparent);
  overflow-wrap: anywhere;
}
.before-skills b { font-weight: 700; color: var(--y-strong); }
.before-skills p { margin: 2px 0 0; }
.before-plan { counter-reset: plan; list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 14px; }
.before-plan li {
  counter-increment: plan;
  position: relative;
  padding-left: 40px;
}
.before-plan li::before {
  content: counter(plan);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--b-tint);
  color: var(--b-strong);
  font-size: var(--fs-small);
  font-weight: 700;
}
.before-plan b { font-weight: 700; }
.before-plan .plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0; }
.plan-size { font-size: 12px; font-weight: 600; color: var(--b-strong); white-space: nowrap; }
.before-plan p { margin: 2px 0 0; overflow-wrap: anywhere; }
.before-plan .frame {
  font-family: var(--text);
  font-size: 16px;
  display: inline-block;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: var(--r-tag);
  background: var(--sheet); /* a white slip: the card around it is yellow */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--y-hl) 70%, transparent);
}
#fw-watch {
  margin: 4px 24px 0;
  padding: 14px 16px !important;
  border-radius: var(--r-chip);
  border-top: 0;
  background: var(--p-tint);
}
#fw-watch:last-child { margin-bottom: 20px; }
@media (max-width: 560px) {
  #fw-watch { margin-inline: 18px; }
}

/* Pre-writing blueprint (Free write page, parked) */
.blueprint {
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.blueprint h2 { margin-top: 0; }
.blueprint-focus { font-weight: 600; }
.blueprint-topic { font-family: var(--text); font-size: var(--fs-h3); }
.blueprint-slip { color: var(--pencil); }
.blueprint summary { cursor: pointer; margin-top: 16px; color: var(--pencil); }

/* Guided fix (under each of the top 2 issues) */
.guided-fix {
  margin-top: 8px;
}

.fix-panel {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--r-chip);
  background: var(--y-tint);
}

.fix-panel textarea {
  margin: 8px 0;
  font-size: 16px;
}

.hint {
  margin-bottom: 8px;
}

.hint p {
  margin: 2px 0;
}

.attempt-result[data-outcome="correct"] {
  color: var(--met);
}

/* "Show me the right sentence": my sentence and the right one, only the changed words marked
   (pink strike for what goes, green highlighter for what comes), then why, on a green sheet. */
.answer-btn { margin-top: 10px; }
.fix-answer {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  border: 1px solid var(--g-hl);
}
.fix-answer p { margin: 0 0 8px; overflow-wrap: anywhere; }
.fix-was, .fix-now { font-family: var(--text); font-size: 16px; line-height: 1.6; }
.fix-label { display: block; font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--pencil); }
.fix-now .fix-label { color: var(--g-strong); }
.fix-was del { color: var(--pencil); text-decoration: line-through; text-decoration-color: var(--p-strong); }
.fix-now ins { text-decoration: none; background: var(--g-under); border-radius: 3px; padding: 0 2px; }
.fix-why { font-size: 15px; }
.put-note { font-size: 14px; color: var(--met); }

/* "Still not clear? Ask the coach": a quiet fold under the guided fix. */
.coach { margin-top: 12px; }
.coach summary { cursor: pointer; font-weight: 600; color: var(--b-strong); }
.coach-log { display: grid; gap: 8px; margin-top: 8px; }
.coach-log:empty { display: none; }
.coach-pair p { margin: 0; overflow-wrap: anywhere; }
.coach-q { font-weight: 600; }
.coach-q::before { content: "You: "; color: var(--pencil); font-weight: 400; }
.coach-a { padding: 8px 10px; margin-top: 4px !important; border-radius: var(--r-chip); background: var(--b-tint); }
.coach-form { display: grid; gap: 8px; justify-items: start; margin-top: 8px; }
.coach-form textarea { width: 100%; font-size: 16px; }

/* ---- Ledger and Warm-up: one card per pattern ---- */
.pattern {
  margin-top: 14px;
  overflow-wrap: anywhere;
}
#patterns > .pattern:first-child,
#items > .pattern:first-child { margin-top: 0; }

.pattern h3 {
  margin: 0 0 6px;
  text-transform: capitalize;
}

.pattern p {
  margin: 4px 0;
}

.pattern ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-family: var(--text);
}
.pattern li { margin-bottom: 4px; }
.pattern li::marker { color: var(--p-strong); }

/* A warm-up answer is written in a small composer. */
.pattern textarea {
  margin-top: 10px;
  padding: 12px 16px;
  font-size: 19px;
  line-height: 1.6;
  border-radius: var(--r-chip);
  resize: none;
}

/* The status of a pattern: a coloured pill. */
.status {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-tag);
}

.status.learning {
  color: var(--p-strong);
  background: var(--p-tint);
}

.status.improving {
  color: var(--y-strong);
  background: var(--y-tint);
}

.status.retired {
  color: var(--g-strong);
  background: var(--g-tint);
}

/* ---- My ledger: one card per pattern, the one to work on first at the top ---- */
.pg-ledger #patterns { display: grid; gap: 16px; }
.pg-ledger #patterns > .pattern { margin-top: 0; }

/* Filter tabs (shared .tabs, built by tabs.js): the picked one is pink here. */
.pg-ledger .ledger-counts { margin: 0; }
.pg-ledger .ledger-counts[hidden] { display: none; }
.pg-ledger .ledger-card[hidden] { display: none; }

/* Nothing saved yet: one pink card with the way to get started. */
.pg-ledger #empty[hidden] { display: none; }
.pg-ledger #empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 22px 24px;
  background: var(--p-tint);
  color: var(--ink);
}
.pg-ledger #empty p { margin: 0; max-width: 56ch; }
.pg-ledger #empty .nothing-lead { font-family: var(--text); font-size: 19px; font-weight: 600; }
.pg-ledger #empty .btn { margin-top: 10px; text-decoration: none; }

/* A failed load is news, not a mistake of mine: the soft blue panel, like Free write. */
.pg-ledger #message.warning {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--r-btn);
  background: var(--b-tint);
  color: var(--ink);
}
.pg-ledger #message.warning::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
.pg-ledger #message.warning .message-text { flex: 1 1 16rem; }
.pg-ledger #message.warning button { padding: 6px 14px; font-size: 14px; }

.ledger-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ledger-card h3 { margin: 0; text-transform: none; font-size: var(--fs-h3); }
.ledger-meta { color: var(--pencil); font-size: var(--fs-small); font-weight: 400; white-space: nowrap; }
.ledger-card.first { padding: var(--s-5) var(--s-6); }
.ledger-card.first > .ledger-meta { display: block; margin: 6px 0 var(--s-3) !important; }
.ledger-card.first > .ledger-examples { margin-top: 0; }
/* A row: the card holds one details; the title, status and count sit on one line. */
.ledger-card:has(> .row) { padding: 0; }
.ledger-card > .row { background: none; border: 0; border-radius: 0; }
.ledger-card > .row > summary { flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); }
.ledger-card > .row > summary h3 { flex: 1 1 12rem; min-width: 0; }
.ledger-card > .row > summary .status { margin-top: 0; }
.ledger-card > .row > summary::after { margin-left: 0; }
.ledger-card > .row > summary:hover h3 { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.ledger-body > :first-child { margin-top: 0 !important; }
/* The pattern to work on first: a small pink tag, and its title marked with the highlighter. */
.ledger-first {
  display: inline-block;
  margin: 0 0 6px !important;
  padding: 2px 8px;
  border-radius: var(--r-tag);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--p-strong);
  background: var(--p-tint);
}
.ledger-card.first h3 { font-size: var(--fs-title); font-family: var(--display); }
.ledger-card.first h3 span {
  padding-inline: 4px;
  margin-left: -4px;
  background: linear-gradient(transparent 56%, var(--c-under) 56%, var(--c-under) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.ledger-card .status { flex: none; margin-top: 2px; }
.ledger-summary { color: var(--ink); margin: 8px 0 0 !important; }
.ledger-status-note { margin: 2px 0 0 !important; font-size: 14px; color: var(--pencil); }
.ledger-label {
  margin: 16px 0 6px !important;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--pencil);
}
/* My sentences: slips of paper, pink-tinted for a mistake, green-tinted where I got it right. */
.pattern ul.ledger-examples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ledger-examples li {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--p-tint);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
}
.ledger-examples.right li { background: var(--g-tint); }
/* The exact wrong words in a mistake: pink wavy underline, like the pink marks in a checked text. */
.ledger-examples mark {
  color: inherit;
  background-color: transparent; /* the browser's own yellow mark colour must not show */
  background-image: linear-gradient(var(--notyet-soft), var(--notyet-soft));
  border-radius: 3px;
  text-decoration: underline wavy var(--notyet);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}
/* Underlined words that open the right words: a plain inline button, so it reads as text. */
button.ledger-wrong,
button.ledger-wrong:hover {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  box-shadow: none;
  cursor: pointer;
}
.ledger-wrong:hover mark { text-decoration-thickness: 2.5px; }
.ledger-wrong:focus-visible { outline: 2px solid var(--notyet); outline-offset: 2px; border-radius: 3px; }
/* The same sentence with the right words in place, in green, under the mistake. */
.ledger-tap-note { margin: -2px 0 8px !important; font-size: var(--fs-small); color: var(--pencil); }
.ledger-right {
  margin: 8px 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}
.ledger-right-label { font-family: var(--ui); font-size: var(--fs-small); font-weight: 600; color: var(--g-strong); }
.ledger-repeat { display: block; margin-top: 4px; font-family: var(--ui); font-size: var(--fs-small); color: var(--pencil); }
.ledger-examples .ledger-right mark {
  background-image: linear-gradient(var(--g-under), var(--g-under));
  text-decoration: none;
}
.ledger-note { margin-top: 12px !important; font-size: 14px; color: var(--pencil); }
/* "Other mistakes" is quieter: it has no lesson and goes last. */
.ledger-card.other h3 { color: var(--pencil); }
/* Lesson and practice: a quiet outline button with a chevron, so pink stays for the mistakes. */
.ledger-card .practice { margin-top: 16px; }
.ledger-card .practice > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  width: fit-content;
  padding: 8px 14px;
  border-radius: var(--r-chip);
  font-size: 14px;
  color: var(--ink);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--rule);
}
.ledger-card .practice > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border: solid var(--p-strong);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ledger-card .practice[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.ledger-card .practice > summary:hover { box-shadow: inset 0 0 0 1.5px var(--pencil); }
.ledger-card .practice > summary::-webkit-details-marker { display: none; }
.ledger-card .practice[open] > summary { margin-bottom: 12px; }
/* The lesson inside: a paper-coloured panel. Its own title repeats the card's, so it is hidden. */
.ledger-card .practice > div {
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--paper);
  font-size: 15px;
}
.ledger-card .practice > div > h4:first-child { display: none; }
.ledger-card .practice > div p { margin: 0 0 8px; }
.ledger-card .practice > div ul { margin: 0 0 12px; padding-left: 20px; }
.ledger-card .practice > div button { margin-top: 4px; }
@media (max-width: 560px) {
  .ledger-card .practice > div { padding: 14px; }
  .ledger-card .practice > div button { width: 100%; }
}

/* ---- Settings: Backup. The file input is hidden inside a button-like label. ---- */
.backup-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.backup-btns .btn { padding: 0 var(--s-4); font-size: 14px; text-decoration: none; }
.file-btn { position: relative; display: inline-block; }
.file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  cursor: pointer;
}
.file-btn:focus-within { outline: 2px solid var(--pen); outline-offset: 2px; }
#backup-message { margin-top: 12px; }
#backup-message.ok { color: var(--met); }

/* Lesson and quiz on the ledger page (parked) */
.practice {
  margin-top: 12px;
}
.practice summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pen);
}
.practice input[type="text"],
.practice input:not([type]),
.practice textarea {
  width: 100%;
  margin-bottom: 8px;
}

/* ---- Warm-up page ----
   Orange is the page's highlighter: the stroke under each pattern title, the "nothing due"
   card and the mixed result. The sentence with the mistake is a pink slip (like My ledger),
   my fix is written in the blue-framed box, the verdict is green or pink under it. */
.pg-warmup #items { display: grid; gap: 16px; margin-bottom: 20px; }
.pg-warmup #items > .pattern { margin-top: 0; }
.pg-warmup .pattern { padding: var(--s-4) var(--s-5); }
.pg-warmup .pattern h3 { margin: 0 0 var(--s-3); text-transform: none; font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.5; }
.pg-warmup .pattern h3 span {
  padding-inline: 4px;
  margin-left: -4px;
  background: linear-gradient(transparent 56%, var(--c-under) 56%, var(--c-under) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.pg-warmup .wu-original {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--p-tint);
  font-family: var(--text);
  font-size: var(--fs-h3);
  line-height: 1.6;
}
.pg-warmup .wu-label { display: block; margin: 14px 0 6px; font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
.pg-warmup .pattern textarea { margin-top: 0; }
/* Once checked, my fix stays easy to read: no focus frame, no typing caret. */
.pg-warmup .pattern textarea[readonly] { cursor: default; }
.pg-warmup .pattern textarea[readonly]:focus { border-color: var(--rule); box-shadow: none; }
.pg-warmup .is-right textarea[readonly] { border-color: var(--g-strong); }
.pg-warmup .is-wrong textarea[readonly] { border-color: var(--p-strong); }

.pg-warmup .verdict { margin: 12px 0 0; font-weight: 500; line-height: 1.5; }
.pg-warmup .verdict:empty { display: none; }
.pg-warmup .verdict strong { font-weight: 700; }
.pg-warmup .verdict.ok,
.pg-warmup .verdict.warning { padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); }
.pg-warmup .verdict.ok { color: var(--g-strong); background: var(--g-tint); }
.pg-warmup .verdict.warning { color: var(--p-strong); background: var(--p-tint); }

/* The news above the cards: the result (green when all are right, orange otherwise), a
   check that did not finish or a hint (blue, like Free write: it is news, not a mistake). */
.pg-warmup #message:empty { display: none; }
.pg-warmup #message:not(:empty) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-card);
  background: var(--b-tint);
  color: var(--ink);
  scroll-margin-top: 16px;
}
.pg-warmup #message:not(:empty)::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
.pg-warmup #message.ok { background: var(--g-tint); }
.pg-warmup #message.ok::before { background: var(--g-strong); -webkit-mask-image: var(--i-check); mask-image: var(--i-check); }
.pg-warmup #message.mixed { background: var(--o-tint); }
.pg-warmup #message.mixed::before { background: var(--o-strong); }
.pg-warmup #message:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }

/* The button, and the screen-reader line for the wait (the capsule replaces the button, see .wait). */
.pg-warmup .wait-note:empty { display: none; }
.pg-warmup .wait-note { margin: 10px 0 0; }
@media (max-width: 560px) {
  .pg-warmup #submit { width: 100%; }
  .pg-warmup .pattern { padding: var(--s-4); }
}

/* Nothing due: the page's orange card with the next date and the way back to Today. */
.pg-warmup #nothing[hidden] { display: none; }
.pg-warmup #nothing {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: var(--s-5);
  background: var(--o-tint);
  color: var(--ink);
}
.pg-warmup #nothing p { margin: 0; max-width: 56ch; }
.pg-warmup #nothing .nothing-lead { font-family: var(--display); font-size: var(--fs-h2); font-weight: 700; }
.pg-warmup #nothing .btn { margin-top: 10px; text-decoration: none; }

/* ---- Progress page: one bar per essay ---- */
.band-list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.band-list li {
  display: grid;
  grid-template-columns: 6.5rem 4.5rem 1fr;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
}
.band-date { color: var(--pencil); font-variant-numeric: tabular-nums; }
.band-name { font-weight: 700; }
.band-track {
  display: block;
  height: 10px;
  background: var(--g-tint);
  border-radius: var(--r-tag);
}
.band-bar {
  display: block;
  height: 100%;
  background: var(--g-hl);
  border-radius: var(--r-tag);
}
@media (max-width: 480px) {
  .band-list li { grid-template-columns: 5.5rem 1fr; }
  .band-track { grid-column: 1 / -1; }
}
#pattern-counts { font-weight: 600; }

/* ---- Progress page: "Where you are", the summary at the top (green = progress) ---- */
section.where { --mark: var(--g-under); }
section.where > h2 { width: fit-content; }
.where-ladder { font-size: var(--fs-small); color: var(--pencil); }
.where-ladder .progress-line { margin-bottom: 2px; }
.where-skill { margin: 0 0 var(--s-3); font-family: var(--text); font-size: var(--fs-h3); color: var(--ink); }
.where-ladder .bar { gap: 6px; }
.where-ladder .bar .tick { height: 8px; }
.where-patterns { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.where-label { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--pencil); }
.where-counts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
/* Stat tiles, like the .tabs tiles: the number big on top, the label under it. */
.where-counts li {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-card);
  font-size: var(--fs-small);
  font-weight: 600;
}
.where-counts strong { font-family: var(--display); font-size: var(--fs-title); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.where-counts .learning { background: var(--p-tint); color: var(--p-strong); }
.where-counts .improving { background: var(--y-tint); color: var(--y-strong); }
.where-counts .retired { background: var(--g-tint); color: var(--g-strong); }
/* Your words: the same stat tiles, in the Learn colours (violet practising, green learned, green and stronger owned). */
section.your-words { --mark: var(--v-under); }
section.your-words > h2 { width: fit-content; }
.words-counts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.words-counts li { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); font-size: var(--fs-small); font-weight: 600; }
.words-counts strong { font-family: var(--display); font-size: var(--fs-title); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.words-counts .practising { background: var(--v-tint); color: var(--v-strong); }
.words-counts .learned { background: var(--g-tint); color: var(--g-strong); }
.words-counts .owned { background: var(--g-strong); color: var(--sheet); }
.words-newest { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.words-newest li { display: grid; gap: 2px; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.words-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.words-head strong { font-family: var(--display); font-size: var(--fs-h3); color: var(--v-strong); overflow-wrap: anywhere; }
.words-date { margin-left: auto; font-size: var(--fs-small); color: var(--pencil); }
.words-meaning { font-size: var(--fs-small); color: var(--pencil); }
section.your-words .btns { margin: var(--s-4) 0 0; }
.where-first { margin: 12px 0 0; }
.where-first span { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--p-strong); }
.where-first a { font-family: var(--display); font-size: var(--fs-h3); font-weight: 700; color: var(--ink); }
.where-empty { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); background: var(--g-tint); color: var(--ink); }
.where .btns { margin: var(--s-4) 0 0; }
#retired { padding-left: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
#retired li {
  padding: 3px 9px;
  border-radius: var(--r-tag);
  background: var(--g-tint);
  color: var(--g-strong);
  font-weight: 600;
  text-transform: capitalize;
}

/* ---- Setup and Settings (target level and goal): each choice is a pill ---- */
.choices {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choices legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  font-weight: 700;
}

.choices label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* easy to tap on a phone */
  padding: 0 var(--s-4) 0 var(--s-3);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  cursor: pointer;
}
.choices label:hover { box-shadow: inset 0 0 0 1.5px var(--pencil); }
.choices label:has(input:checked) {
  background: var(--b-tint);
  color: var(--b-strong);
  font-weight: 600;
  box-shadow: inset 0 0 0 1.5px var(--b-strong);
}

/* ---- Settings: AI cost ---- */
.costs { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }
.costs > div { flex: 1 1 140px; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--paper); }
.costs dt { font-size: var(--fs-small); color: var(--pencil); }
.costs dd { margin: 0; font-family: var(--display); font-size: var(--fs-h2); font-weight: 800; font-variant-numeric: tabular-nums; }
.cost-note { font-size: var(--fs-small); color: var(--pencil); margin: 10px 0 0; max-width: 70ch; }
.reset-btns { margin-top: 14px; }
#reset-button { color: var(--p-strong); }

/* =====================================================================
   Today page: one column, the same order on every screen:
   my journey, the skill (yellow card), the task and my writing (one card), the feedback.
   ===================================================================== */
.page-message {
  color: var(--notyet);
  background: var(--p-tint);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  margin: var(--s-5) 0 0;
}

/* "Checks are paused": one calm note when this month's AI budget is used (budget-banner.js).
   A soft blue panel with the info icon: it is news, not a mistake, so it is not pink.
   The reason sits next to the switched-off check button. */
.budget-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--s-5) 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--b-tint);
  color: var(--ink);
  border-radius: var(--r-chip);
}
.budget-note[hidden], .budget-reason[hidden] { display: none; }
.budget-note::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
.budget-reason { margin: 0 0 12px; font-size: 14px; color: var(--pencil); }

/* My journey: where I am, and one segment per skill grouped by stage, with the stage
   names under it on wider screens (done = green, the skill on screen = yellow). */
.progress {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  font-size: var(--fs-small);
  color: var(--pencil);
}
.progress-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  font-family: var(--display);
  font-size: 14px;
}
.progress-line > span:first-child { color: var(--ink); font-weight: 700; }
.progress b,
.where-ladder b {
  display: inline-block;
  margin-right: 6px;
  padding: 1px var(--s-2);
  border-radius: var(--r-tag);
  background: var(--pen);
  color: var(--pen-on);
  font-size: 12px;
  font-weight: 700;
}
.bar { display: flex; gap: var(--s-2); }
.bar .st { flex: var(--n); min-width: 0; display: grid; gap: 6px; }
.st-ticks { display: flex; gap: 3px; }
.bar .tick { flex: 1; height: 10px; border-radius: var(--s-1); background: var(--rule); }
.bar .tick.done { background: var(--g-hl); }
.bar .tick.now { background: var(--y-hl); box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--y-strong); }
.st-name {
  font-size: 12px;
  line-height: 1.3;
  color: var(--pencil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st.current .st-name { color: var(--ink); font-weight: 700; }
.st.done .st-name { color: var(--g-strong); }
@media (max-width: 640px) {
  .st-name { display: none; }
}

/* Each segment of the journey bar is a button: pointing at it shows the skill in a tip; a
   passed skill opens as practice. */
.progress { position: relative; }
.bar .tick {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0; /* not the 48px of a normal button */
  padding: 0;
  border: 0;
  box-shadow: none;
  cursor: default;
  font: inherit;
}
.bar .tick::before { content: ""; position: absolute; inset: -12px 0; } /* a taller target than the 10px stripe */
.bar .tick.can-open { cursor: pointer; }
.bar button.tick:hover:not(.now), .bar button.tick:focus-visible:not(.now) { filter: brightness(0.92); }
.bar .tick:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.tick-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, 12px); /* under the segment: above it the page's top could cut it off */
  width: max-content;
  min-width: 190px;
  max-width: min(280px, calc(100% - 16px));
  padding: var(--s-3) var(--s-4);
  display: grid;
  gap: 6px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(27, 29, 36, 0.14);
  font-size: 13px;
  line-height: 1.4;
  pointer-events: none;
}
/* The little arrow that points at the segment. */
.tick-tip::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--arrow-x, 50%);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  transform: rotate(45deg);
  background: var(--sheet);
  border: solid var(--rule);
  border-width: 1px 0 0 1px;
}
.tick-tip[hidden] { display: none; }
.tick-tip b { display: block; margin: 0; padding: 0; background: none; color: var(--ink); font-family: var(--display); font-size: 15px; line-height: 1.3; }
.tick-tip-status { display: flex; align-items: center; gap: 8px; color: var(--pencil); }
.tick-tip-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.tick-tip-status[data-state="secure"] i { background: var(--g-strong); }
.tick-tip-status[data-state="passed"] i { background: var(--g-hl); }
.tick-tip-status[data-state="now"] i { background: var(--y-hl); box-shadow: 0 0 0 2px var(--y-tint); }
.tick-tip-count { color: var(--pencil); }
.tick-tip-go {
  margin-top: 2px;
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
  color: var(--pen);
  font-weight: 700;
}
.tick-tip-go::after { content: " \2192"; }
/* On a phone the row is a real button (today.js): as wide as the tip and 44px tall, with none of the usual button look. */
.tick-tip button.tick-tip-go {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 2px 0 0;
  padding: var(--s-2) 0 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.tick-tip button.tick-tip-go:hover, .tick-tip button.tick-tip-go:active { background: none; text-decoration: underline; }
/* The tip lets the pointer through (it must never block what is under it while I point with a mouse), but on a phone
   it is something to tap: with "pointer-events: none" a tap on its blue row went straight through to the card under
   it, and "Tap again to practise it" did nothing (2026-10-25). */
@media (hover: none) {
  .tick-tip { pointer-events: auto; }
}

/* The arrows either side of "Skill 3 of 19": the skill before and after this one. */
.skill-steps { display: inline-flex; align-items: center; gap: var(--s-2); }
/* "Review" on top of the bar segment of a review that comes before the next skill: a small
   tint-and-amber tag with a little arrow that points down at its segment. */
.bar .tick .tick-flag {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 2px 7px 1px;
  border: 1px solid color-mix(in srgb, var(--y-hl) 70%, transparent);
  border-radius: 6px;
  background: var(--y-tint);
  color: var(--y-strong);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.bar .tick .tick-flag::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  transform: rotate(45deg);
  background: var(--y-tint);
  border: solid color-mix(in srgb, var(--y-hl) 70%, transparent);
  border-width: 0 1px 1px 0;
}
/* room for the tag between the stage line and the bar */
.progress:has(.tick-flag) .bar { margin-top: 18px; }
.step-btn {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
}
.step-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--i-chev) center / 16px no-repeat;
  mask: var(--i-chev) center / 16px no-repeat;
}
.step-btn.step-prev::before { transform: scaleX(-1); }
.step-btn:hover:not(:disabled) { border-color: var(--pen); color: var(--pen); }
.step-btn:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.step-btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: none) {
  .step-btn { width: 40px; height: 40px; }
}
/* My correct writing under a passed skill. */
.history-fold { margin-top: 8px; }
.history-fold > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--g-strong);
}
.skill-history {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-4);
}
.skill-history .history-fold { margin-top: 0; }
.skill-history .history-list li { padding: var(--s-2) var(--s-3); border-radius: var(--r-chip); background: var(--g-tint); }
.history-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.history-text { margin: 0; font-size: 15px; overflow-wrap: anywhere; white-space: pre-wrap; }
.history-meta { margin: 4px 0 0; font-size: var(--fs-small); color: var(--pencil); }
.history-list li > .btn { margin-top: 8px; }
.history-list .c1-version { margin-top: 10px; }
.practice-back {
  margin: var(--s-4) 0 0;
  font-size: 14px;
  text-align: left;
}
.practice-back:not([hidden]) + .progress { margin-top: var(--s-3); }
.practice-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--s-4) 6px var(--s-3);
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.practice-back a::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--i-back) center / contain no-repeat;
  mask: var(--i-back) center / contain no-repeat;
}

.today {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-5) 64px;
  min-width: 0;
}
.today > * { min-width: 0; }

/* Under 1200px the two wrappers vanish and the order is: skill, task and writing, feedback,
   my passed writing. From 1200px (the same shape as Free write): my writing and what belongs to
   it are the left column; the right column is a sticky panel with the feedback on top (once
   there is one) and the skill card under it. The panel scrolls inside itself when it is long. */
.today-main, .today-side { display: contents; }
.today-side > .skill { order: 1; }
.today-main > .write-step { order: 2; }
.today-side > .feedback { order: 3; }
.today-main > .skill-history { order: 4; }
@media (min-width: 1200px) {
  .pg-today > .col { max-width: 1120px; }
  .pg-today > .col > :not(#ladder):not(.practice-back):not(.budget-note):not(.daily-warmup):not(.todo):not(.today) { max-width: 688px; margin-inline: auto; }
  .today {
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    column-gap: var(--s-6);
    align-items: start;
  }
  .today-main {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
  .today-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    position: sticky;
    top: var(--s-4);
    align-self: start;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
  }
  .today-main > *, .today-side > * { order: 0; margin: 0; min-width: 0; }
  .today-side > .feedback { order: -1; }
  .today-side > .feedback:empty { display: none; }
  /* The panel is narrow: the two C1 texts sit one above the other. */
  .today-side .compare { grid-template-columns: minmax(0, 1fr); }
  .today h1 { font-size: 26px; }
}

.today .label {
  font-size: var(--fs-small);
  color: var(--pencil);
  margin: 0 0 4px;
}
.today .small {
  font-size: var(--fs-small);
  color: var(--pencil);
  margin: 0;
}

/* The heading of a task step: its icon in the step's colour, then its name. No tile. On Today
   the "2" badge below replaces the icon. */
#task-meta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: var(--fs-small);
  font-weight: 700;
}
#task-meta::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* 1. The skill: a yellow card with a strong yellow band on top ("1  Read this before you
   write"), so it is clear that this comes first. The task below has the blue "2". */
.skill {
  --card-bg: color-mix(in srgb, var(--y-hl) 22%, var(--sheet));
  --band-ink: #3a2a00;
  --title-stroke: var(--y-hl);
  --fold-border-hover: color-mix(in srgb, var(--y-hl) 60%, #7a5700);
  position: relative;
  padding: 0;
  overflow: hidden; /* so the band follows the card's rounded corners */
  flex-shrink: 0;   /* in the side panel the card keeps its height; the panel scrolls, not the card */
  border-radius: var(--r-card);
  background: var(--card-bg);
  border: 2px solid var(--y-hl);
}

/* The round step badge, the same size for step 1 (a real element) and step 2 (task-meta::before). */
.step-badge,
.pg-today #task-meta::before {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font: 700 15px/1 var(--ui);
}

/* The band. Badge and text on the left, the kind of skill ("Today's skill") on the right.
   space-between puts the kind on the right when it fits and at the left, under the text,
   when it wraps; its left margin lines it up with the text, not with the badge. */
.skill-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 10px;
  padding: 10px var(--s-5);
  background: var(--y-hl);
  color: var(--band-ink);
}
.step-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 17px/1.25 var(--ui);
}
.step-badge { background: var(--band-ink); color: var(--y-hl); }
.skill-band #kicker {
  margin: 0 0 0 38px; /* badge (28px) + gap (10px) */
  font: 600 13px/1.25 var(--ui);
  color: color-mix(in srgb, var(--band-ink) 85%, transparent);
}
.skill-body { padding: var(--s-5); }

.today h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.2;
}
/* The skill title has the yellow highlighter stroke. Inline, so the stroke hugs the words even
   when the title wraps; padding on the right only, so nothing sticks out to the left of the
   first letter. */
.today .skill h1 {
  display: inline;
  font-size: 26px;
  line-height: 1.4;
  padding: 0 4px 0 0;
  background: linear-gradient(transparent 56%, var(--title-stroke) 56%, var(--title-stroke) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 560px) {
  .today h1 { font-size: 24px; }
}
.cando {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  margin: 8px 0 0;
}
.skill .cando { margin-top: 12px; }
.skill .cando::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--y-strong);
  -webkit-mask: var(--i-target) center / contain no-repeat;
  mask: var(--i-target) center / contain no-repeat;
}
/* "When to use it": a white strip at the top of "When to use it, example and tips", so the
   moment to use the skill is easy to spot. */
.skill .when {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--sheet);
  font-size: 15px;
}
.skill .when b {
  display: block;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--y-strong);
}
.skill .when:has(span:empty) { display: none; }
details.more {
  margin-top: var(--s-4);
}
details.more summary {
  cursor: pointer;
  width: fit-content;
  font-size: 14px;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--s-4) 6px var(--s-2);
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
}
details.more summary:hover { box-shadow: inset 0 0 0 1px var(--pencil); }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
/* ">" so a closed fold inside an open one (the plan inside the help) keeps its "+". */
details.more[open] > summary::before { content: "\2212"; }

/* The skill card's fold: a full-width button row with a chevron on the right that turns over
   when it is open. Only this fold; the others (Free write, Word bank) keep the "+" look. */
.skill details.more { margin-top: var(--s-4); }
.skill details.more > summary {
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--s-4);
  border: 2px solid var(--y-hl);
  border-radius: var(--r-btn);
  background: var(--sheet);
  box-shadow: none;
  color: var(--ink);
  font: 600 15px/1.3 var(--ui);
}
.skill details.more > summary:hover { border-color: var(--fold-border-hover); background: var(--y-tint); }
.skill details.more > summary:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 2px; }
.skill details.more > summary::before,
.skill details.more[open] > summary::before { content: none; display: none; } /* the "+" */
.skill details.more > summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: -4px 4px 0 0;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s, margin 0.15s;
}
.skill details.more[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
/* Two labels in the button, swapped by CSS only. */
.skill details.more:not([open]) .when-open,
.skill details.more[open] .when-closed { display: none; }
.more-body {
  display: grid;
  gap: var(--s-4);
  padding-top: var(--s-4);
}
/* The model: a white slip inside the yellow card, its key words highlighted. */
.model {
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.65;
  margin: 0;
  padding: var(--s-4);
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: var(--shadow);
  white-space: pre-line; /* essay models keep their paragraphs */
  overflow-wrap: anywhere;
}
.model mark {
  background: var(--marker-soft);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.more-body > .small { margin-top: -6px; padding-left: 4px; }
.tip {
  display: flex;
  gap: 10px;
  margin: 0;
}
.tip::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--y-strong);
  -webkit-mask: var(--i-bulb) center / contain no-repeat;
  mask: var(--i-bulb) center / contain no-repeat;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 2. The task and my writing: one card, the task on a blue band, then the lined paper. */
.write-step {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-width: 0;
}
.write-step:has(textarea:focus) {
  border-color: var(--pen);
  box-shadow: 0 0 0 1px var(--pen), var(--shadow-lift);
}
.task-block {
  padding: var(--s-5);
  background: var(--b-tint);
  border-bottom: 1px solid color-mix(in srgb, var(--b-hl) 45%, transparent);
}
#task-meta { color: var(--b-strong); --icon: var(--i-write); }
/* On Today the task heading starts with the blue "2" badge (the same size as the "1"), not an
   icon. The number is decoration; the text of the heading is unchanged. */
.pg-today #task-meta {
  gap: 10px;
  margin: 0 0 12px;
  font: 700 15px/1.25 var(--ui);
}
.pg-today #task-meta::before {
  content: "2";
  content: "2" / "";
  background: var(--b-strong);
  color: var(--sheet);
  -webkit-mask: none;
  mask: none;
}

.task {
  font-family: var(--text);
  font-size: var(--fs-h2);
  line-height: 1.5;
  margin: 0 0 var(--s-4);
  overflow-wrap: anywhere;
}
.task em {
  font-style: normal;
  font-weight: 600;
  padding: 0 2px;
  background: linear-gradient(transparent 55%, var(--y-under) 55%);
}
.task-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* The topic buttons sit on the pale blue task band, so a hairline made them look like labels.
   A firm coloured outline, bolder text and a taller shape make them read as buttons. */
.task-tools .linkbtn {
  min-height: 40px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--b-strong);
}
.task-tools .linkbtn:hover {
  background: var(--b-tint);
}
.task-tools .linkbtn:focus-visible {
  outline: 2px solid var(--b-strong);
  outline-offset: 2px;
}
.task-tools #words-open { box-shadow: inset 0 0 0 1.5px var(--v-strong); }
.task-tools #words-open:hover { background: var(--v-tint); }
.own {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.own input {
  flex: 1 1 220px;
  min-width: 0;
  font-family: var(--text);
  font-size: 16px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-btn);
}
.own .btn { padding: var(--s-2) var(--s-5); }

/* The composer inside the write card: no card of its own. */
.write-step .composer {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.write-step .composer:has(textarea:focus) { box-shadow: none; }
@media (max-width: 560px) {
  .task-block { padding: var(--s-4); }
  .task { font-size: 19px; }
}

/* On a phone the writing box should be on the first screen, above the tab bar. The skill
   card, the task and the gaps are a little tighter here to make room (2026-10-13). */
@media (max-width: 560px) {
  .pg-today .progress { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); }
  .pg-today .progress-line { margin-bottom: var(--s-2); }
  /* The ladder as three tidy rows: the stage on one line, the bar, then a pager
     ("<  Skill 8 of 19  >") instead of squeezing all three side by side. */
  .pg-today .progress:not([hidden]) { display: flex; flex-direction: column; }
  .pg-today .progress-line { display: contents; }
  .pg-today .progress-line > span:first-child { order: 1; margin-bottom: var(--s-3); font-size: 15px; line-height: 1.3; }
  .pg-today .progress .bar { order: 2; gap: 10px; }
  .pg-today .progress .bar .tick { height: 12px; }
  .pg-today .progress-line > span:last-child { order: 3; margin-top: var(--s-3); white-space: nowrap; color: var(--pencil); }
  .pg-today .progress .skill-steps { justify-content: space-between; width: 100%; }
  .today { gap: var(--s-3); padding-block: var(--s-3) 56px; }
  .skill-band { padding: 8px var(--s-4); gap: 2px 8px; }
  .step-lead { gap: 8px; font-size: 16px; }
  .skill-band #kicker { margin-left: 36px; font-size: 12px; } /* badge (28px) + gap (8px) */
  .skill-body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .today h1 { font-size: 22px; line-height: 1.2; }
  .today .skill h1 { font-size: 22px; line-height: 1.35; }
  .skill .cando { margin-top: 8px; font-size: 15px; line-height: 1.45; }
  .skill details.more { margin-top: 12px; }
  .skill details.more > summary { min-height: 44px; font-size: 14px; }
  .task-block { padding: var(--s-3) var(--s-4); }
  #task-meta { margin-bottom: 6px; } /* Placement and Level check */
  .pg-today #task-meta { gap: 8px; margin-bottom: 8px; font-size: 14px; } /* one line, so the writing box rises */
  .task { font-size: var(--fs-h3); line-height: 1.45; margin-bottom: 10px; }
}

/* Words for this topic: a two-column list (one column on phones), each phrase with its
   save chip and its meaning, on a white slip. Try to use: up to 2 phrases from my bank. */
.topic-words {
  margin-top: var(--s-4);
  padding: var(--s-4);
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.word-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--s-5);
}
.word-list li { display: grid; justify-items: start; gap: 3px; }
.word-list .meaning { font-size: var(--fs-small); color: var(--pencil); padding-left: 4px; }
/* On a phone the list is a slim column of rows (Today and Free write): a small phrase chip with
   its meaning right under it, rows split by a hairline, so six words are no longer a screen tall. */
@media (max-width: 560px) {
  .topic-words { margin-top: var(--s-3); padding: var(--s-1) var(--s-3); }
  .word-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .word-list li { gap: 2px; padding: 8px 0; border-top: 1px solid var(--rule); }
  .word-list li:first-child { border-top: 0; }
  .word-list .chip,
  .pg-write .word-list .chip { min-height: 32px; padding: 2px 8px; font-size: var(--fs-small); gap: 4px; }
  .word-list .meaning { font-size: 13px; line-height: 1.35; padding-left: 2px; }
}
/* "More words" under the word list (Today and Free write): the shape of the topic buttons, in
   violet (words). On the last set it reads "Back to the first words" with a back arrow. */
.more-words {
  --icon: var(--i-plus);
  margin-top: var(--s-3);
  min-height: 40px;
  padding: 8px 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px var(--v-strong);
}
.more-words::before { background: var(--v-strong); }
.more-words:hover { background: var(--v-tint); box-shadow: inset 0 0 0 1.5px var(--v-strong); }
.more-words:focus-visible { outline: 2px solid var(--v-strong); outline-offset: 2px; }
.more-words.back { --icon: var(--i-back); }
.more-words[aria-busy="true"] { cursor: progress; }
@media (max-width: 560px), (pointer: coarse) {
  .more-words { min-height: 44px; }
}
.try-use { margin-top: var(--s-4); }
.try-use .label { font-weight: 600; }

/* My writing in the composer. The textarea and the checked copy look exactly the same. */
.today .writing {
  background-image: linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px));
  background-size: 100% var(--line);
}
.today textarea#draft,
.annotated {
  display: block;
  width: 100%;
  min-height: calc(var(--line) * 4);
  font-family: var(--text);
  font-size: 21px;
  line-height: var(--line);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0;
  resize: none;
  overflow: hidden;
  overflow-wrap: anywhere;
}
body[data-stage="3"] textarea#draft,
body[data-stage="4"] textarea#draft,
body[data-stage="5"] textarea#draft,
body[data-stage="3"] .annotated,
body[data-stage="4"] .annotated,
body[data-stage="5"] .annotated {
  min-height: calc(var(--line) * 8);
}
.today textarea#draft:focus { outline: none; box-shadow: none; }
.today textarea#draft::placeholder { color: var(--pencil); opacity: 0.7; }
.annotated { white-space: pre-wrap; cursor: default; }
@media (max-width: 560px) {
  .today textarea#draft,
  .annotated { font-size: 19px; }
}

/* The evidence in my text: not yet = pink wavy underline, other issues = dotted blue.
   Hovering or focusing a feedback item fills its words with yellow highlighter. */
.annotated mark {
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 3px;
}
.annotated mark.bad {
  background-image: linear-gradient(var(--notyet-soft), var(--notyet-soft));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-decoration: underline wavy var(--notyet);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  animation: sweep 0.55s ease-out both;
}
.annotated mark.flag {
  text-decoration: underline dotted var(--b-strong);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
/* Each underline is a button: it opens its item in "What to fix" (today.js, openItem). */
.annotated mark[data-n] { cursor: pointer; }
.annotated mark[data-n]:focus-visible { outline-offset: 3px; }
/* The number of the "What to fix" item a mark belongs to, in a small dot after the words
   (pink = needed to pass, blue = good to fix). Drawn by CSS, so it is not part of my text. */
.annotated mark[data-n]::after {
  content: attr(data-n);
  display: inline-block;
  min-width: 1.5em;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5em;
  text-align: center;
  vertical-align: super;
  text-decoration: none;
}
.annotated mark.bad[data-n]::after { background: var(--p-strong); color: var(--sheet); }
.annotated mark.flag[data-n]::after { background: var(--b-tint); color: var(--b-strong); }
.annotated mark.focus {
  background-image: none;
  background-color: var(--marker-soft);
}
@keyframes sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }

.form-message { margin: 0 0 16px; }
.form-message:empty { display: none; }

/* While a check runs (Today, Free write, Warm-up): the Check button turns into a capsule of the
   same height, in the same place, so nothing jumps. Its blue tint fills from left to right and
   the step is written inside it. wait-bar.js puts the class "is-waiting" on the button row
   and the button hides. The fill is scaled (transform), not resized, so it moves smoothly. */
.wait {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex: 0 1 380px;
  min-width: 0;
  min-height: 48px;
  padding: 0 var(--s-4);
  background: var(--b-tint);
  color: var(--b-strong);
  border-radius: var(--r-btn);
  overflow: hidden;
}
.wait[hidden] { display: none; }
.is-waiting > :not(.wait) { display: none; }
.wait-step {
  position: relative;
  font-weight: 700;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wait-time {
  position: relative;
  flex-shrink: 0;
  font-size: var(--fs-small);
  opacity: 0.8;
  white-space: nowrap;
}
/* On phones the capsule is as wide as the button was; the time would not fit. */
@media (max-width: 560px) {
  .wait { flex: 1 1 100%; }
  .wait-time { display: none; }
}
.wait-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.wait-fill {
  position: relative;
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--b-strong) 20%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s linear;
  overflow: hidden;
}
/* A soft light moving along the fill, so it never looks stuck while the AI is still working. */
.wait-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.35), transparent);
  transform: translateX(-100%);
  animation: wait-shine 1.6s ease-in-out infinite;
}
@keyframes wait-shine { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .wait-fill { transition: none; }
  .wait-fill::after { animation: none; display: none; }
}

/* 3. The feedback, directly under my writing */
.feedback {
  display: grid;
  gap: var(--s-4);
}
.feedback:empty { display: none; }
.feedback h2 { margin: 0; }

/* The verdict: the word itself, marked with a stroke of its highlighter (pink = not yet,
   green = meets C1), on a soft tint of the same colour. No icon badge. */
.verdict-box {
  position: relative;
  display: grid;
  gap: 6px;
  padding: var(--s-5);
  border-radius: var(--r-card);
  scroll-margin-top: 80px;
}
.verdict-box.notyet { background: var(--p-tint); --mark: var(--p-under); }
.verdict-box.met { background: var(--g-tint); --mark: var(--g-under); }
.verdict-word {
  width: fit-content;
  font-family: var(--text);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.verdict-box p { margin: 0; max-width: 62ch; }
.verdict-box .small { margin-top: 4px; color: var(--ink); opacity: 0.8; }
/* The one sentence that says how much is right and what to fix first. */
.verdict-box .verdict-lead { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--ink); }
/* After the last try the fix list is folded under the C1 version. */
.fix-fold > summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.fix-fold[open] > summary { padding-bottom: 8px; }
@media (max-width: 560px) {
  .verdict-box { padding: var(--s-4); }
  .verdict-word { font-size: 29px; }
}

/* "Fix these first" (pink) and "Also check" (blue): white cards, numbered items. */
.group {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--s-5) var(--s-1);
  --mark: var(--p-under);
}
/* "What to fix": one numbered list. Pink numbers stop the pass, blue numbers are good to fix. */
.group-lead { margin: 0 0 4px; font-size: 14px; color: var(--pencil); }
.item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.need {
  font-size: 12px;
  font-weight: 700;
  padding: 2px var(--s-2);
  border-radius: var(--r-tag);
}
.need.bad { background: var(--p-tint); color: var(--p-strong); }
.need.flag { background: var(--b-tint); color: var(--b-strong); }
.item-shows { display: flex; flex-wrap: wrap; }
/* Items 2 and up are one line until I tap the title (a button inside the heading). */
.item-toggle,
.item-toggle:hover {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  border-radius: var(--r-tag);
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.item-toggle::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--pencil);
  border-bottom: 2px solid var(--pencil);
  transform: rotate(45deg) translateY(-2px);
}
/* The whole title row is the button: the chevron sits at the far right edge. */
.item-head h3:has(> .item-toggle) { flex: 1 1 100%; min-width: 0; }
.item-toggle { width: 100%; }
.item-toggle::after { margin-left: auto; }
.item-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
@media (pointer: coarse) { .item-toggle { min-height: 44px; } }
.item-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.item-rest[hidden] { display: none; }
.item .example[hidden] { display: none; }
.group > .label, .did-well > .label, .changed > .label {
  font-family: var(--display);
  font-size: var(--fs-h2) !important;
  font-weight: 700;
  color: var(--ink) !important;
  margin: 0 0 6px -4px !important;
}
.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  counter-reset: item;
}
.item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  align-items: start;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  counter-increment: item;
  border-radius: var(--r-tag);
}
.item:first-child { border-top: 0; padding-top: var(--s-3); }
/* A closed item reads like a short row: at least 48px tall, its title and chevron centred. */
.item:has(> div > .item-rest[hidden]) { align-items: center; min-height: 48px; padding-block: var(--s-2); }
.item:has(> div > .item-rest[hidden]) .dot { margin-top: 0; }
.item:focus-visible { outline-offset: 4px; }
.item h3 {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0;
}
.item p { margin: 4px 0 0; overflow-wrap: anywhere; }
.today .dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: -2px;
  font-size: var(--fs-small);
  font-weight: 700;
}
.today .dot.bad { background: var(--p-strong); color: var(--sheet); }
.today .dot.bad::before { content: counter(item); }
.today .dot.flag { background: var(--b-tint); color: var(--b-strong); }
.today .dot.flag::before { content: counter(item); }
.item .fix {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--g-tint);
}
.item .fix b { font-weight: 700; color: var(--g-strong); }
/* "Ask yourself:" the thinking questions (ask-yourself.js): blue (writing), open at once. One look
   for a Today item, a Free write note, the target feedback and a plan step. */
.ask {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--b-tint);
}
.ask b { font-weight: 700; color: var(--b-strong); }
.ask ul { margin: 4px 0 0; padding-left: 20px; }
.ask li { margin: 2px 0; overflow-wrap: anywhere; }
.item .example {
  margin-top: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.item .example span { display: block; font-size: 12px; font-weight: 600; color: var(--pencil); }
.item .example q { font-family: var(--text); font-size: 16px; quotes: none; }
/* My own words the item is about, and the right words (shown when I ask). */
.item .yours, .item .right-words { margin-top: 6px; }
.item .yours span, .item .right-words span { font-size: var(--fs-small); color: var(--pencil); }
.item .yours q, .item .right-words q { font-family: var(--text); font-size: 16px; quotes: none; }
.item .yours q { background: var(--marker-soft); border-radius: 3px; padding: 0 3px; }
.item .right-words { margin-top: 10px; }
.item .right-words q { background: var(--g-tint); color: var(--g-strong); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.item .right-words s { color: var(--pencil); text-decoration-color: var(--p-strong); }
.item .right-words[hidden] { display: none; }
.item .right-slot:empty { display: none; }
.quiet-note {
  display: flex;
  gap: 8px;
  font-size: var(--fs-small);
  color: var(--pencil);
  margin: 0 0 12px 42px;
}
.quiet-note::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
.feedback > .quiet-note { margin: 0; padding: 0 4px; }
/* Free write: "Your draft is back." under the writing, above the word count. */
.composer > .draft-note { margin: 8px 0 0; }

/* Free write while a check runs: the word count, and under it the wait line in pen blue.
   Empty, the wait line takes no space, but stays on the page as a live region. */
.foot-info { min-width: 0; }
.wait-note { margin: 0; font-size: var(--fs-small); font-weight: 500; color: var(--b-strong); }
.wait-note:not(:empty) { margin-top: 2px; }

/* Free write: a hint or a failed check, a soft blue panel with the info icon at the foot of
   the writing card. Blue, not pink: it is news, not a mistake of mine (like the budget note).
   Empty, it takes no space but stays on the page (not display: none), so a screen reader
   hears the text when it comes. */
.composer > #message,
.composer > #message:empty {
  display: block;
  margin: 0;
}
.composer > #message:not(:empty) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--b-tint);
  color: var(--ink);
}
.composer > #message:not(:empty)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}

/* The result's heading takes the keyboard when the result arrives (script.js); a little room
   above it when the page scrolls there. */
#result { scroll-margin-top: 16px; }

/* The hint ladder under the first item: one rung at a time, when I ask. */
.today .hints { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.today .hints:empty { display: none; }
.today .hints li {
  font-size: 14px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--y-tint);
  overflow-wrap: anywhere;
}
.hint-label { display: block; font-size: 12px; font-weight: 700; color: var(--y-strong); }
/* While I revise: the last check's fixes, short, under the writing box. */
.revise-fixes .item { padding: 10px 0; }
.revise-fixes .item .fix { margin-top: 6px; padding: 6px 12px; }
.hint-btn, .words-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-right: 8px;
  padding: 6px 14px 6px 10px;
  font-size: var(--fs-small);
  box-shadow: none;
}
.hint-btn {
  background: var(--y-tint);
  color: var(--y-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--y-strong) 35%, transparent);
}
.hint-btn:hover { background: var(--y-tint); box-shadow: inset 0 0 0 1px var(--y-strong); }
.words-btn {
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.words-btn:hover { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--pencil); }
.hint-btn::before,
.words-btn::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: var(--i-bulb) center / contain no-repeat;
  mask: var(--i-bulb) center / contain no-repeat;
}
.words-btn::before {
  -webkit-mask-image: var(--i-eye);
  mask-image: var(--i-eye);
}
.hint-status, .reveal-status { margin: 6px 0 0; font-size: var(--fs-small); color: var(--pencil); }
.hint-status:empty, .reveal-status:empty { display: none; }

/* "What you changed since try 1" (blue) and "What you did well" (green): open cards
   above "What to fix". */
.changed, .did-well {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--s-5) var(--s-3);
  --mark: var(--b-under);
}
.did-well { --mark: var(--g-under); }
.did-well .met-list { margin-top: 8px; }
.changed-list { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 8px; }
.changed-list li { overflow-wrap: anywhere; }
.changed-list q { font-family: var(--text); }
.changed-mark {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px;
  border-radius: var(--r-tag);
  font-size: 12px;
  font-weight: 700;
}
.changed-list .ok .changed-mark { background: var(--g-tint); color: var(--g-strong); }
.changed-list .still .changed-mark { background: var(--p-tint); color: var(--p-strong); }
.met-line { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; }

/* The met points, folded into one row: a green card. */
.met-row {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 0 var(--s-4);
}
.met-row[open] { padding-bottom: var(--s-2); }
.met-row summary {
  min-height: 48px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}
.met-row summary::-webkit-details-marker { display: none; }
.tick-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g-strong);
  color: var(--sheet);
  font-size: var(--fs-small);
  font-weight: 700;
}
.met-row .chev {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-tag);
  background: var(--g-tint);
  color: var(--g-strong);
  font-size: var(--fs-small);
  font-weight: 600;
}
.met-list { list-style: none; margin: 12px 0 4px; padding: 0 0 0 34px; display: grid; gap: 8px; }
.met-list li { position: relative; }
.met-list li::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--g-hl);
}
.met-list b { font-weight: 700; }

/* Buttons at the end of the feedback, and the try line */
.next { display: grid; gap: 12px; padding-top: 4px; }
.next p { margin: 0; }

/* The C1 version: mine and the C1 one side by side (stacked on phones), then the changes. */
.c1-version {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-5);
  --mark: var(--g-under);
}
.c1-version > .label {
  color: var(--g-strong) !important;
  font-weight: 700;
}
.feedback .c1-version > h2,
.feedback .c1-version > .c1-panel > h2 { margin: 2px 0 0 -4px; }
/* After a pass the card has two tabs: "Optional polish" and the one-step-up version (task-stepup.js).
   They are real buttons in a tab list: 44px tall, the open one green like the card, a clear focus ring.
   Only the open panel shows. The one-step-up panel starts with where my text stands (a green line), then
   the same side-by-side and changes as the C1 version; its changes have a "save to word bank" chip. */
.c1-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-3); }
button.c1-tab,
button.c1-tab:hover {
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--pencil);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font: 700 14px/1.2 var(--ui);
}
button.c1-tab:hover { background: var(--g-tint); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--g-strong); }
button.c1-tab[aria-selected="true"],
button.c1-tab[aria-selected="true"]:hover { background: var(--g-tint); color: var(--g-strong); box-shadow: inset 0 0 0 2px var(--g-strong); }
button.c1-tab:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 2px; }
.c1-panel[hidden] { display: none; }
.stepup-band { margin: 0 0 4px; font: 600 15px/1.5 var(--ui); color: var(--g-strong); }
.stepup-why { margin: 0 0 var(--s-3); }
.changes .stepup-chip { grid-column: 2; margin-top: 4px; }
.changes .stepup-chip:empty { display: none; }
.changes .stepup-chip .chip-status { margin-top: 4px; }
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 640px) {
  .compare { grid-template-columns: minmax(0, 1fr); }
}
.version {
  padding: var(--s-4);
  border-radius: var(--r-chip);
  min-width: 0;
}
.version.mine { background: var(--paper); }
.version.c1 { background: var(--g-tint); }
.version .small { margin-bottom: 6px; font-weight: 700; }
.version.c1 .small { color: var(--g-strong); }
.version .t {
  font-family: var(--text);
  font-size: var(--fs-h3);
  line-height: 1.65;
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.version.mine del { text-decoration: line-through; text-decoration-color: var(--p-strong); color: var(--pencil); }
.version.c1 ins { text-decoration: none; background: var(--marker-soft); border-radius: 3px; padding: 0 2px; }
sup.n { font-family: var(--ui); font-size: 10px; font-weight: 700; color: var(--pen); margin-left: 1px; }
.changes { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.changes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; }
.changes .num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--b-tint);
  color: var(--b-strong);
  font-size: 12px;
  font-weight: 700;
}
.changes .ft { font-family: var(--text); font-size: 16px; overflow-wrap: anywhere; padding-top: 1px; }
.changes .ft s { color: var(--pencil); text-decoration-color: var(--p-strong); }
.changes .ft ins { text-decoration: none; background: var(--marker-soft); border-radius: 3px; padding: 0 2px; }
.changes p { margin: 2px 0 0; grid-column: 2; }
/* A change I have put into my rewrite: its number becomes a green tick. */
.changes li.done .num { background: var(--g-strong); color: var(--sheet); font-size: 0; }
.changes li.done .num::after { content: "✓"; font-size: var(--fs-small); }

/* Rewrite it yourself: a small composer under the changes. */
.rewrite { margin-top: 18px; display: grid; gap: 10px; justify-items: start; }
.rewrite-area { width: 100%; }
.rewrite-area { display: grid; gap: 10px; }
.rewrite-area[hidden] { display: none; }
.rewrite-area .small { margin: 0; }
.rewrite textarea {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
}
.rewrite-status { margin: 0; }
.rewrite-status:empty { display: none; }
/* The two short lines about my rewrite. */
.rewrite-feedback { display: grid; gap: 6px; }
.rewrite-feedback:empty { display: none; }
.rewrite-feedback p { margin: 0; overflow-wrap: anywhere; }
.rewrite-feedback b { font-weight: 700; }

/* After the last try: the model again, to compare (a yellow card, like the skill). */
.model-again {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--y-tint);
}
.model-again .label { margin: 0; font-weight: 700; color: var(--y-strong) !important; }

/* Done for today, or nothing left: a calm card with a big green tick.
   The circle is ::before, the tick (a mask) is ::after on top of it. */
.rest {
  position: relative;
  margin: var(--s-5) 0 64px;
  padding: 116px var(--s-6) var(--s-8);
  border-radius: var(--r-card);
  background: var(--sheet);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow);
  text-align: center;
}
.rest::before,
.rest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 36px;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
}
.rest::before { background: var(--g-tint); }
.rest::after {
  background: var(--g-strong);
  -webkit-mask: var(--i-check) center / 30px no-repeat;
  mask: var(--i-check) center / 30px no-repeat;
}
.rest h1 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; }
.rest .cando { justify-content: center; color: var(--pencil); }

@media (prefers-reduced-motion: reduce) {
  .annotated mark.bad { animation: none; }
  button, .btn { transition: none; }
}

/* =====================================================================
   Word bank: phrase chips (Today, Free write and Word bank pages), the word upgrade,
   and the Word bank page. Everything about words is violet.
   ===================================================================== */

/* A phrase chip: a violet word card, the phrase in Literata. A savable chip has a small "+";
   once saved it is filled, with a tick. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  padding: 4px 10px;
  border-radius: var(--r-chip);
  background: var(--v-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-strong) 25%, transparent);
  text-align: left;
  overflow-wrap: anywhere;
}
button.chip { cursor: pointer; }
button.chip:hover { background: var(--v-tint); box-shadow: inset 0 0 0 1px var(--v-strong); }
.chip-mark {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--v-strong);
}
.chip.saved,
button.chip.saved:hover {
  background: var(--v-strong);
  color: var(--sheet);
  box-shadow: none;
  cursor: default;
}
.chip.saved .chip-mark { color: var(--sheet); }
.chip-status { margin: 6px 0 0; font-size: var(--fs-small); color: var(--pencil); font-weight: 500; }
.chip-status:empty { display: none; }

/* The word upgrade: a violet slip at the end of the verdict box. */
.upgrade {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-hl) 70%, transparent);
  display: grid;
  justify-items: start;
  gap: 4px;
}
/* More than one word upgrade: a small heading, then the slips one under the other. */
.upgrade-group { margin-top: 14px; display: grid; gap: 8px; }
.upgrade-group .upgrade { margin-top: 0; }
.upgrade-heading { margin: 0; font-size: var(--fs-small); font-weight: 700; color: var(--v-strong); }
.upgrade-words { font-family: var(--text); font-size: var(--fs-h3); overflow-wrap: anywhere; }
.upgrade-words .label-inline { font-family: var(--ui); font-size: var(--fs-small); font-weight: 700; color: var(--v-strong); }
.upgrade-words s { color: var(--pencil); }
.upgrade-words b { font-weight: 700; color: var(--v-strong); }
.btn.slim { padding: 6px 14px; font-size: 14px; margin-top: 6px; }
.upgrade .btn.quiet { color: var(--v-strong); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-strong) 40%, transparent); }
.btn[aria-disabled="true"] { cursor: default; color: var(--pencil); }
/* "Goes with" (the word upgrade here and the Word bank below): the phrase a stronger word is normally
   used in, because a word is learned best with its usual partners. Small and quiet: a violet label
   (words), the phrase in Literata like the other English examples. */
.upgrade .upgrade-goes { font-size: var(--fs-small); color: var(--pencil); }
.goes-label { font-family: var(--ui); font-weight: 700; color: var(--v-strong); }
.goes-phrase { display: inline-block; max-width: 100%; font-family: var(--text); font-size: 14px; color: var(--ink); } /* a phrase is not split across two lines unless it is longer than one */

/* The Word bank page. Each phrase is one card: the phrase (highlighted in violet), its
   status, what it means, an example, then what moves it on and my own sentences with it.
   Saved, Tried and Owned are one path: the counts above the list are its legend. */
.pg-words main.page > section { padding: 0; background: none; border: 0; box-shadow: none; }
.pg-words main.page { gap: 32px; }
.pg-words main.page > section > h2 { margin-bottom: 4px; }
.pg-words main.page > section > .lead { margin-bottom: 14px; }

/* A failed load is news, not a mistake: the same soft blue panel as Warm-up and Free write. */
.pg-words .page-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--r-btn);
  background: var(--b-tint);
  color: var(--ink);
}
.pg-words .page-message[hidden] { display: none; }
.pg-words .page-message::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}

/* The switch at the top ("My phrases" / "Phrases to learn", two tiles) and, under it in My phrases,
   the status filter (All, Saved, Tried, Owned): the shared .tabs, the filter as small pills. */
.pg-words #part-switch { margin: 0; }
.pg-words #part-switch[hidden] { display: none; }
.pg-words .part-switch { max-width: 460px; }
.bank-counts { margin: 0 0 var(--s-4); }
.bank-counts[hidden] { display: none; }
@media (min-width: 561px) {
  .bank-counts .tabs { flex-wrap: wrap; }
  .pg-words .bank-counts .tabs button {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: var(--s-2);
    min-height: 40px;
    padding: 0 var(--s-4);
    border-radius: 999px;
  }
  .pg-words .bank-counts .tabs .tab-count { order: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
  .pg-words .bank-counts .tabs .tab-label { order: -1; }
}
@media (pointer: coarse) { .pg-words .tabs button { min-height: 44px; } }

/* A saved phrase is a folded row (the shared .row): phrase, status and two dots on one line, the
   meaning under it; opened, the example, the status line, where it came from and my sentences. */
.bank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.bank-list > li[hidden] { display: none; }
.bank-row { box-shadow: none; }
.bank-row > summary { flex-wrap: wrap; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); }
.bank-row > summary:hover .bank-phrase span { background-image: linear-gradient(transparent 55%, var(--v-under) 55%); }
.bank-phrase { flex: 1 1 8rem; min-width: 0; margin: 0; font-family: var(--text); font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
/* The stroke sits on an inline span, so a phrase that wraps is marked line by line. */
.bank-phrase span {
  background: linear-gradient(transparent 60%, var(--v-under) 60%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bank-row > summary::after { margin-left: 0; }
.bank-meaning { order: 1; flex: 0 0 100%; font-size: var(--fs-small); font-weight: 400; color: var(--pencil); overflow-wrap: anywhere; }
.bank-body { display: grid; gap: 6px; }
.bank-row p { margin: 0; overflow-wrap: anywhere; }
.bank-example { font-family: var(--text); font-size: 15px; line-height: 1.55; color: var(--ink); }
/* What moves the phrase on: the one thing to act on, so it is not small grey print. */
.bank-progress { font-size: 14px; font-weight: 500; }
.pips { flex: none; display: inline-flex; gap: 4px; }
.pip { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--v-strong); }
.pip.on { background: var(--v-strong); }
.owned .pip { box-shadow: inset 0 0 0 2px var(--g-strong); }
.owned .pip.on { background: var(--g-strong); }
.bank-more { justify-self: start; margin-top: 4px; }
.bank-row .bank-from { font-size: var(--fs-small); color: var(--pencil); }
.bank-row .bank-learn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--pencil); }
.bank-row .bank-partners { font-size: var(--fs-small); color: var(--pencil); }
.status-pill {
  flex: none;
  white-space: nowrap;
  font-size: var(--fs-small);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-tag);
  background: var(--paper);
  color: var(--pencil);
}
/* The word journey tag (public/word-journey.js): New grey, Practising violet, Learned green,
   Owned green and stronger with a check. The same on Learn, Word bank and Progress. */
.jtag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--r-tag);
  background: var(--paper);
  color: var(--pencil);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--ui);
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.4;
}
.jtag.practising { background: var(--v-tint); color: var(--v-strong); box-shadow: none; }
.jtag.learned { background: var(--g-tint); color: var(--g-strong); box-shadow: none; }
.jtag.owned { background: var(--g-strong); color: var(--sheet); box-shadow: none; }
.jtag.owned::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.status-pill.tried { color: var(--v-strong); background: var(--v-tint); }
.status-pill.owned { color: var(--g-strong); background: var(--g-tint); }
/* Owned phrases are last; a thin label with a rule shows where they start. */
.bank-divider[hidden] { display: none; }
.bank-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--g-strong);
}
.bank-divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
/* My sentences with a phrase: the mark is about the phrase only, so only the phrase is
   highlighted (violet: words); the rest of the sentence is quieter. */
.bank-row .bank-uses-title {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--pencil);
}
.bank-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bank-uses li {
  display: grid;
  gap: 4px;
  overflow-wrap: anywhere;
}
.use-mark { font-family: var(--ui); font-size: var(--fs-small); font-weight: 700; }
.use-mark.ok { color: var(--met); }
.use-mark.notyet { color: var(--notyet); }
.use-sentence {
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.6;
  color: var(--pencil);
}
.use-sentence mark {
  color: var(--ink);
  background: var(--v-tint);
  box-shadow: inset 0 -2px 0 var(--v-under);
  padding: 0 2px;
  border-radius: 3px;
}
#mine-empty {
  padding: 18px 20px;
  border-radius: var(--r-btn);
  background: var(--v-tint);
}
#mine-empty[hidden] { display: none; }
#mine-empty p { margin: 0 0 12px; max-width: 56ch; }
#mine-empty .btn { color: var(--v-strong); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-strong) 40%, transparent); }

/* The core list: one folded card per group, the phrases in it separated by thin rules.
   A phrase I can still save shows "+ Save" in an outlined chip; a saved one is a quiet tick. */
#core { display: grid; gap: 10px; }
.core-group { padding: 14px 18px; }
.core-group details.more { margin-top: 0; }
.core-group details.more summary { background: none; box-shadow: none; padding: 2px 0; }
.core-group details.more summary::before { background: var(--v-tint); color: var(--v-strong); }
.core-list { list-style: none; margin: 0; padding: 14px 0 4px; display: grid; gap: 14px; }
.core-list li { display: grid; justify-items: start; gap: 4px; }
.core-list li + li { padding-top: 14px; border-top: 1px solid var(--rule); }
.core-list p { margin: 0; overflow-wrap: anywhere; }
.core-list .meaning { font-size: 14px; color: var(--pencil); }
.core-list .example { font-family: var(--text); font-size: 15px; }
.pg-words button.chip:not(.saved) { background: var(--sheet); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--v-strong) 55%, transparent); }
.pg-words button.chip:not(.saved):hover { background: var(--v-tint); box-shadow: inset 0 0 0 1.5px var(--v-strong); }
.pg-words .chip.saved,
.pg-words button.chip.saved:hover {
  background: var(--v-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-strong) 25%, transparent);
}
.pg-words .chip.saved .chip-mark { color: var(--v-strong); }
.pg-words .chip-mark::after { font-size: var(--fs-small); }
.pg-words button.chip:not(.saved) .chip-mark::after { content: " Save"; }
.pg-words .chip.saved .chip-mark::after { content: " Saved"; }
@media (pointer: coarse) { .pg-words button.chip { min-height: 40px; } }

/* =====================================================================
   Grammar fixes (build step 8): the offer on the Today page and the fix page (fix.html).
   A grammar fix is about my mistakes, so it is pink, with the ledger's clipboard icon.
   ===================================================================== */
.pg-fix { --c-hl: var(--p-hl); --c-tint: var(--p-tint); --c-strong: var(--p-strong); --c-under: var(--p-under); --icon: var(--i-ledger); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* The offer: a white card with a pink top edge, like "Fix these first". Optional, so its
   button is the quiet one. */
.fix-offer {
  margin-top: 20px;
  padding: var(--s-4) var(--s-5);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  --mark: var(--p-under);
}
.fix-offer .label,
.fix-lesson .label,
.quiz .quiz-step {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--p-strong);
}
.fix-offer h2 { margin: 4px 0 6px -4px; }
.fix-offer p { margin: 0 0 14px; }
.fix-offer p.label { margin: 0; }
#rest-fix .fix-offer { margin: -44px 0 64px; } /* sits under the rest card, which has a big bottom margin */
@media (max-width: 560px) {
  .fix-offer { padding: var(--s-4); }
}

/* The fix page: the lesson card, then the quiz card. */
.pg-fix .page-message { margin: 0; }
.fix-lesson h2 { margin: 4px 0 8px; }
.fix-lesson > p:not(.label) { margin: 0 0 16px; }
.fix-lesson > .label { margin-bottom: 6px; }
.fix-rule,
.fix-traps {
  margin: 0 0 16px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
}
.fix-rule { background: var(--y-tint); }
.fix-rule .label { color: var(--y-strong); }
.fix-rule p:last-child { margin: 4px 0 0; }
.fix-traps { background: var(--p-tint); }
.fix-traps ul { margin: 4px 0 0; padding-left: 18px; }
.fix-traps li { margin-bottom: 4px; }
.fix-traps li::marker { color: var(--p-strong); }
.fix-examples {
  margin: 0 0 16px;
  padding-left: 20px;
  font-family: var(--text);
  font-size: var(--fs-h3);
}
.fix-examples li { margin-bottom: 4px; }
.fix-examples li::marker { color: var(--g-strong); }
.fix-lesson .btns { margin-top: 4px; }

.quiz { overflow-wrap: anywhere; }
.quiz > :first-child { margin-top: 0; }
.quiz .quiz-prompt {
  margin: 6px 0 var(--s-3);
  font-family: var(--text);
  font-size: 19px;
}
.quiz textarea,
.quiz input:not([type="radio"]) { width: 100%; margin: 0 0 12px; }
.quiz button { margin: 0 10px 0 0; }
.quiz p.ok,
.quiz p.warning {
  margin: var(--s-3) 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  font-weight: 600;
}
.quiz p.ok { color: var(--g-strong); background: var(--g-tint); }
.quiz p.warning { color: var(--p-strong); background: var(--p-tint); }
@media (max-width: 560px) {
  .quiz button { width: 100%; margin: 0 0 10px; }
}

/* The answer choices (pick the correct sentence), here and on the ledger page: one rounded
   row per sentence with its radio button; the chosen one is blue, like the Setup choices. */
.quiz-options { display: grid; gap: 8px; margin: 0 0 14px; }
.quiz-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* easy to tap on a phone */
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font-family: var(--text);
  font-size: var(--fs-h3);
  cursor: pointer;
}
.quiz-options label:hover { box-shadow: inset 0 0 0 1.5px var(--pencil); }
.quiz-options label:has(input:checked) {
  background: var(--b-tint);
  color: var(--b-strong);
  box-shadow: inset 0 0 0 1.5px var(--b-strong);
}
.quiz-options input { flex: none; margin: 0; accent-color: var(--pen); }

/* =====================================================================
   The daily warm-up on Today (public/daily-warmup.js): fix my own old slips, about 2 minutes, one
   sentence at a time, right after the journey card. Orange = Warm-up. The sentence with the slip is
   a pink slip (like My ledger), my answer goes in the usual box, the result is green or pink. Folded,
   it is one line.
   ===================================================================== */
.daily-warmup {
  --mark: var(--o-under);
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--o-tint);
  border: 1px solid color-mix(in srgb, var(--o-hl) 60%, transparent);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  min-width: 0;
}
.daily-warmup.is-folded { padding: var(--s-3) var(--s-4); }
.daily-warmup .dw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
}
.daily-warmup .dw-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 700 var(--fs-small)/1.3 var(--ui);
  color: var(--o-strong);
}
.daily-warmup .dw-label::before,
.daily-warmup .dw-folded::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--i-warmup) center / contain no-repeat;
  mask: var(--i-warmup) center / contain no-repeat;
}
/* "Skip today" is a quiet text link, not a button. */
.daily-warmup .dw-skip {
  min-height: 0;
  padding: 4px 2px;
  border: 0;
  border-radius: var(--r-tag);
  background: none;
  box-shadow: none;
  color: var(--pencil);
  font: 500 var(--fs-small)/1.4 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.daily-warmup .dw-skip:hover { background: none; color: var(--ink); }
.daily-warmup .dw-skip:disabled { cursor: progress; }
.daily-warmup .dw-title {
  width: fit-content;
  max-width: 100%;
  margin: var(--s-2) 0 var(--s-1) -4px;
  padding-inline: 4px;
  font-size: var(--fs-h2);
  background: linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
}
.daily-warmup .dw-rule { max-width: 70ch; margin: 0 0 var(--s-1); }
.daily-warmup .dw-lesson { display: inline-block; margin-bottom: var(--s-3); font-size: var(--fs-small); font-weight: 600; color: var(--o-strong); }
.daily-warmup .dw-item {
  max-width: 720px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid color-mix(in srgb, var(--o-hl) 45%, transparent);
}
.daily-warmup .dw-step { margin: 0 0 var(--s-2); font: 700 var(--fs-small)/1.3 var(--ui); color: var(--pencil); }
.daily-warmup .dw-sentence,
.daily-warmup .dw-right {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  font: 400 var(--fs-h3)/1.6 var(--text);
  overflow-wrap: anywhere;
}
.daily-warmup .dw-sentence { background: var(--p-tint); }
.daily-warmup mark.dw-wrong {
  background: none;
  color: inherit;
  text-decoration: underline wavy var(--p-strong);
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}
.daily-warmup .dw-fixline { margin: var(--s-2) 0 0; font-size: 15px; }
.daily-warmup .dw-fixline b,
.daily-warmup mark.dw-fixed {
  padding: 0 4px;
  border-radius: 4px;
  background: var(--g-tint);
  color: var(--g-strong);
  font-family: var(--text);
  font-weight: 600;
}
.daily-warmup mark.dw-fixed { background: var(--g-under); color: inherit; padding: 0 2px; }
.daily-warmup .dw-lead { margin: 0 0 var(--s-2); font-size: 15px; }
.daily-warmup .dw-prompt { margin: 0; font: 400 var(--fs-h3)/1.6 var(--text); }
.daily-warmup .dw-ask { display: block; margin: var(--s-3) 0 6px; font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
.daily-warmup .dw-answer { display: block; margin: 0; }
.daily-warmup .dw-actions { margin-top: var(--s-3); }
.daily-warmup .dw-check { background: var(--o-strong); color: var(--sheet); }
.daily-warmup .dw-check:hover { background: color-mix(in srgb, var(--o-strong) 85%, var(--ink)); }
.daily-warmup .dw-status { margin: var(--s-2) 0 0; font-size: 14px; color: var(--p-strong); }
.daily-warmup .dw-status:empty { display: none; }
.daily-warmup .dw-verdict { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); font-weight: 500; line-height: 1.5; }
.daily-warmup .dw-verdict b { font-weight: 700; }
.daily-warmup .dw-verdict.ok { background: var(--g-tint); color: var(--g-strong); }
.daily-warmup .dw-verdict.warn { background: var(--p-tint); color: var(--p-strong); }
.daily-warmup .dw-yours { margin: var(--s-2) 0 0; font-size: 14px; color: var(--pencil); overflow-wrap: anywhere; }
.daily-warmup .dw-right-label { margin: var(--s-3) 0 6px; font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
/* A quiet line under the right version: the sentence has another slip that no right words were saved for. */
.daily-warmup .dw-more { margin: var(--s-2) 0 0; font-size: 14px; color: var(--pencil); }
.daily-warmup .dw-right { background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-strong) 35%, transparent); }
/* Folded: one line. */
.daily-warmup .dw-folded {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
  margin: 0;
  font: 600 15px/1.4 var(--ui);
  color: var(--ink);
}
.daily-warmup[data-state="done"] .dw-folded::before {
  -webkit-mask-image: var(--i-check);
  mask-image: var(--i-check);
  color: var(--g-strong);
}
.daily-warmup[data-state="skipped"] .dw-folded { font-weight: 500; color: var(--pencil); }
@media (pointer: coarse) {
  .daily-warmup .dw-skip { min-height: 44px; padding-inline: var(--s-2); }
  .daily-warmup .dw-lesson { padding-block: 10px; }
}
@media (max-width: 560px) {
  .daily-warmup { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); }
  .daily-warmup .dw-sentence,
  .daily-warmup .dw-right { padding: var(--s-3); font-size: 17px; }
}

/* =====================================================================
   The day's to-do on Today (public/todo.js; rules in todo.js; approved sketch design/todo-sketch.html):
   the coach's short list of what to do today, right after the journey card and as wide as it. A white
   card: "Your to-do today" with a yellow stroke, one small bar per line (green when done), the coach's
   line, then one boxed row per line in the colour of the part of the app it opens (orange warm-up, pink
   practice and grammar fix, yellow today's skill, violet words and Learn, blue Free write, green level
   check): a ring, the icon and the name, why it is there, the time. The next line has a 2px border and
   its tint, and says "Start". A done line has a green tick and says what happened; a line put aside or
   skipped has a dashed ring. Folded, the card is one line; all done, it shows what moved today.
   ===================================================================== */
.todo {
  margin-top: var(--s-4);
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  min-width: 0;
}
.todo-item.k-warmup   { --k-hl: var(--o-hl); --k-tint: var(--o-tint); --k-strong: var(--o-strong); --k-icon: var(--i-warmup); }
.todo-item.k-practice { --k-hl: var(--p-hl); --k-tint: var(--p-tint); --k-strong: var(--p-strong); --k-icon: var(--i-target); }
.todo-item.k-task     { --k-hl: var(--y-hl); --k-tint: var(--y-tint); --k-strong: var(--y-strong); --k-icon: var(--i-today); }
.todo-item.k-word     { --k-hl: var(--v-hl); --k-tint: var(--v-tint); --k-strong: var(--v-strong); --k-icon: var(--i-words); }
.todo-item.k-learn    { --k-hl: var(--v-hl); --k-tint: var(--v-tint); --k-strong: var(--v-strong); --k-icon: var(--i-learn); }
.todo-item.k-write    { --k-hl: var(--b-hl); --k-tint: var(--b-tint); --k-strong: var(--b-strong); --k-icon: var(--i-write); }
.todo-item.k-fix      { --k-hl: var(--p-hl); --k-tint: var(--p-tint); --k-strong: var(--p-strong); --k-icon: var(--i-ledger); }
.todo-item.k-level    { --k-hl: var(--g-hl); --k-tint: var(--g-tint); --k-strong: var(--g-strong); --k-icon: var(--i-progress); }

.todo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.todo-title { margin: 0 auto 0 0; font: 700 var(--fs-h2)/1.3 var(--display); }
.todo-title span,
.todo-fold-label span { padding: 0 3px; background: linear-gradient(transparent 52%, var(--y-under) 52%, var(--y-under) 92%, transparent 92%); }
.todo-meta { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1.3 var(--ui); color: var(--pencil); font-variant-numeric: tabular-nums; }
.todo-pips { display: inline-flex; gap: 3px; }
.todo-pips i { width: 18px; height: 6px; border-radius: 3px; background: var(--rule); }
.todo-pips i.on { background: var(--g-hl); }
button.todo-hide,
button.todo-skip {
  min-height: 32px;
  padding: 0 6px;
  background: none;
  box-shadow: none;
  color: var(--pencil);
  font: 600 13px/1 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.todo-hide:hover,
button.todo-skip:hover { background: none; color: var(--ink); }
button.todo-skip { min-height: 40px; padding: 0 10px; }
.todo-head button.todo-hide { margin-left: auto; } /* on a phone the head wraps: Hide stays on the right */

.todo-coach { display: flex; gap: 10px; max-width: 62ch; margin: var(--s-2) 0 var(--s-4); font: 400 15px/1.5 var(--ui); color: var(--ink); }
.todo-coach::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--y-hl); box-shadow: 0 0 0 3px var(--y-tint); }
.todo-q { font-family: var(--text); }

.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
a.todo-row {
  flex: 1 1 320px;
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--sheet);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--rule);
  border-radius: 12px;
}
a.todo-row:hover { background: var(--k-tint); border-color: var(--k-hl); color: var(--ink); }
a.todo-row:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 2px; }
.todo-item.is-next a.todo-row { padding: 7px 11px; border: 2px solid var(--k-hl); background: var(--k-tint); }
.todo-state { box-sizing: border-box; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--k-hl); }
.todo-item.is-done .todo-state { position: relative; border-color: var(--g-strong); background: var(--g-strong); }
.todo-item.is-done .todo-state::after { content: ""; position: absolute; inset: 3px; background: var(--sheet); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.todo-item.is-off .todo-state { border: 2px dashed var(--rule); }
.todo-text { display: grid; min-width: 0; }
.todo-name { font: 700 16px/1.3 var(--display); }
.todo-name::before { content: ""; display: inline-block; vertical-align: -2px; width: 16px; height: 16px; margin-right: 8px; background: var(--k-strong); -webkit-mask: var(--k-icon) center / contain no-repeat; mask: var(--k-icon) center / contain no-repeat; }
.todo-why { margin-top: 2px; font: 400 14px/1.4 var(--ui); color: var(--pencil); }
.todo-item.is-done .todo-name,
.todo-item.is-off .todo-name { color: var(--pencil); }
.todo-item.is-done .todo-why { color: var(--g-strong); font-weight: 600; }
.todo-side { display: inline-flex; align-items: center; gap: 8px; }
.todo-min { padding: 3px 7px; border-radius: var(--r-tag); background: var(--k-tint); color: var(--k-strong); font: 700 12px/1.2 var(--ui); white-space: nowrap; }
.todo-item.is-done .todo-min,
.todo-item.is-off .todo-min { display: none; }
.todo-go { font: 700 14px/1 var(--ui); color: var(--pen); white-space: nowrap; }
.todo-chev { width: 16px; height: 16px; background: var(--pencil); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; }
.todo-sub { margin: var(--s-4) 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.todo-note { margin: var(--s-3) 0 0; font: 400 14px/1.4 var(--ui); color: var(--pencil); }

/* Folded: one line, the whole line is the button that opens the list. */
.todo.is-folded { padding: 0; overflow: hidden; }
button.todo-fold {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--ink);
  font: 700 15px/1.3 var(--display);
  text-align: left;
}
button.todo-fold:hover { background: var(--y-tint); color: var(--ink); }
button.todo-fold:focus-visible { outline: 3px solid var(--b-strong); outline-offset: -3px; }
.todo-fold-next { flex: 1; min-width: 0; font: 500 14px/1.3 var(--ui); color: var(--pencil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-fold-next b { color: var(--ink); }

/* All done: what moved today, then "Want more?". */
.todo.is-all-done { padding: var(--s-6) var(--s-5); text-align: center; }
.todo-tick { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto var(--s-3); border-radius: 50%; background: var(--g-tint); }
.todo-tick::after { content: ""; width: 26px; height: 26px; background: var(--g-strong); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.todo-done-title { margin: 0; font: 700 24px/1.3 var(--display); }
.todo-done-title span { padding: 0 3px; background: linear-gradient(transparent 52%, var(--g-under) 52%, var(--g-under) 92%, transparent 92%); }
.todo-lead { margin: 4px 0 0; font: 400 15px/1.5 var(--ui); color: var(--pencil); }
.todo-moved { max-width: 520px; margin: var(--s-5) auto 0; text-align: left; }
.todo-moved h3 { margin: 0 0 var(--s-2); font: 700 var(--fs-h3)/1.3 var(--display); }
.todo-moved ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.todo-moved li { display: flex; gap: 10px; font: 400 15px/1.45 var(--ui); }
.todo-moved li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--g-strong); }
.todo-more { max-width: 520px; margin: var(--s-5) auto 0; padding-top: var(--s-4); border-top: 1px solid var(--rule); text-align: left; }
.todo-more > p { margin: 0 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.todo-more .todo-list { gap: 6px; }

/* "Next on your to-do" (public/todo-next.js) at the end of an activity: a quiet line ("Next on your to-do · 3 of
   5 done" and "See the whole list"), then the next line as the same row as on Today, marked as next. When the list
   is done, one quiet line with a link. Under a rule, so it reads as the way on, not as part of the result. */
.todo-next { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); text-align: left; }
.todo-next[hidden] { display: none; }
.todo-next-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.todo-next-head a,
.todo-next-done a { font-weight: 600; color: var(--pen); }
.todo-next-done { margin: 0; font: 400 14px/1.45 var(--ui); color: var(--pencil); }
.daily-warmup .todo-next { border-top-color: color-mix(in srgb, var(--o-hl) 60%, transparent); }

/* The to-do on every page (public/todo-nav.js): one button, placed by the header. From 901px a small white block right
   under the menu in the sidebar ("To-do" with its yellow stroke and "2/5", the bars, "Next: ..."); on phones a pill in
   the top bar before Settings ("2/5", and the word "To-do" from 420px). It opens the whole list in a pop-up. */
.site-header .todo-nav {
  display: grid;
  gap: 6px;
  min-height: 0;
  padding: 10px 12px;
  border-radius: var(--r-btn);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  font: 600 13px/1.3 var(--ui);
  text-align: left;
}
.site-header .todo-nav:hover { background: var(--y-tint); color: var(--ink); box-shadow: inset 0 0 0 2px var(--y-hl); }
.site-header .todo-nav:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 2px; }
.todo-nav[hidden] { display: none; }
.todo-nav-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.todo-nav-word { padding: 0 3px; font: 700 15px/1.3 var(--display); background: linear-gradient(transparent 52%, var(--y-under) 52%, var(--y-under) 92%, transparent 92%); }
.todo-nav-count { color: var(--pencil); font-variant-numeric: tabular-nums; }
.todo-nav-next { color: var(--pencil); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.todo-nav.is-all-done .todo-nav-word { background: linear-gradient(transparent 52%, var(--g-under) 52%, var(--g-under) 92%, transparent 92%); }
.todo-nav.is-all-done .todo-nav-next { color: var(--g-strong); font-weight: 700; }
@media (min-width: 901px) {
  .sidebar .todo-nav { width: 100%; margin-top: var(--s-3); }
}
@media (max-width: 900px) {
  .site-header .todo-nav { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-right: 6px; padding: 4px 10px; flex: none; }
  .site-header .todo-nav .todo-pips,
  .site-header .todo-nav .todo-nav-next { display: none; }
  .site-header .todo-nav-head { gap: 6px; }
  .site-header .todo-nav-count { color: var(--ink); font-weight: 700; }
}
@media (max-width: 479px) {
  /* Room for the to-do button in a narrow top bar, so the profile name still shows: the logo keeps its "B" mark and
     the word "BetterWrite" stays for screen readers only (has-todo is set by todo-nav.js while the button shows). */
  .site-header.has-todo .brand { font-size: 0; gap: 0; }
  .site-header .todo-nav-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-header .todo-nav::before { content: ""; width: 16px; height: 16px; background: var(--y-strong); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
}

/* The pop-up with the whole list (like the profile menu: a native popover, centred). */
.todo-pop[popover] {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(460px, calc(100vw - 32px));
  max-height: 85dvh;
  overflow-y: auto;
  padding: var(--s-5);
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift, var(--shadow));
}
.todo-pop:not(:popover-open) { display: none; }
.todo-pop::backdrop { background: rgba(20, 22, 30, 0.35); }
.todo-pop-title { margin: 0; font: 700 var(--fs-h2)/1.3 var(--display); }
.todo-pop-title span { padding: 0 3px; background: linear-gradient(transparent 52%, var(--y-under) 52%, var(--y-under) 92%, transparent 92%); }
.todo-pop.is-all-done .todo-pop-title span { background: linear-gradient(transparent 52%, var(--g-under) 52%, var(--g-under) 92%, transparent 92%); }
.todo-pop-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 4px 0 var(--s-3); font: 600 13px/1.3 var(--ui); color: var(--pencil); }
.todo-pop .todo-coach { margin-top: 0; }
.todo-pop-moved { display: grid; gap: 8px; margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.todo-pop-moved li { display: flex; gap: 10px; font: 400 15px/1.45 var(--ui); }
.todo-pop-moved li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--g-strong); }
.todo-pop-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-4); }
@media (max-width: 560px) { .todo-pop-foot .btn { flex: 1 1 auto; } }

@media (pointer: coarse) {
  button.todo-hide,
  button.todo-skip { min-height: 44px; }
  .todo-next-head a,
  .todo-next-done a { display: inline-block; padding-block: 12px; }
}
@media (max-width: 560px) {
  .todo { margin-top: var(--s-3); padding: var(--s-4); }
  a.todo-row { flex-basis: 100%; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .todo-state { margin-top: 1px; }
  .todo-side { grid-column: 2; justify-self: start; margin-top: 6px; }
  .todo-chev,
  .todo-go-arrow { display: none; }
  .todo-item:has(.todo-skip) { justify-content: flex-end; }
  .todo-fold .todo-pips { display: none; }
  .todo.is-all-done { padding: var(--s-5) var(--s-4); }
}

/* =====================================================================
   The placement check (placement.html) and the C1 level check (level.html), build step 9.
   Placement is about where I start on the skill ladder: yellow, with the target icon.
   The level check is about my progress: green, with the rising line icon.
   Both reuse the Today pieces: the write card (task band + lined paper), the verdict
   banner and the feedback cards.
   ===================================================================== */
.pg-placement { --c-hl: var(--y-hl); --c-tint: var(--y-tint); --c-strong: var(--y-strong); --c-under: var(--y-under); --icon: var(--i-target); }
.pg-level { --c-hl: var(--g-hl); --c-tint: var(--g-tint); --c-strong: var(--g-strong); --c-under: var(--g-under); --icon: var(--i-progress); }

.check-steps { display: grid; gap: 20px; min-width: 0; }
.check-steps[hidden] { display: none; }
.check-steps > section {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: var(--s-4) var(--s-5);
}
.check-steps > section h2 { margin-top: 0; }
.pg-placement .label,
.pg-level .label { font-size: var(--fs-small); color: var(--pencil); margin: 0 0 4px; }
.pg-placement .small,
.pg-level .small { font-size: var(--fs-small); color: var(--pencil); margin: 0; }

/* The 3 placement questions: one choice per row, the question in Literata. */
.choices.questions { flex-direction: column; margin: 0; }
.choices.questions label {
  align-items: flex-start;
  padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-btn);
  font-family: var(--text);
  font-size: var(--fs-h3);
  line-height: 1.4;
}
.choices.questions input { margin-top: 5px; accent-color: var(--pen); }

/* The lined paper for a paragraph or an essay: 10 lines, scrolls with its lines. */
textarea.paper {
  display: block;
  width: 100%;
  height: calc(var(--line) * 10);
  margin: 0;
  padding: 0;
  font-family: var(--text);
  font-size: 21px;
  line-height: var(--line);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  resize: none;
  background-color: transparent;
  background-image: linear-gradient(to bottom, transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px));
  background-size: 100% var(--line);
  background-attachment: local;
  overflow-y: auto;
  scrollbar-width: thin;
}
textarea.paper:focus { outline: none; box-shadow: none; }
textarea.paper::placeholder { color: var(--pencil); opacity: 0.7; }
@media (max-width: 560px) {
  textarea.paper { font-size: 19px; }
}

/* The band banner: green, like "Meets C1", with the band as the big word. */
.band-box .label { color: var(--g-strong); font-weight: 700; margin: 0; }

.group-foot { margin: 0 0 16px !important; }
.pg-placement .dot,
.pg-level .dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-top: -2px;
  font-size: var(--fs-small);
  font-weight: 700;
}
.pg-placement .dot::before,
.pg-level .dot::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--dot-icon) center / contain no-repeat;
  mask: var(--dot-icon) center / contain no-repeat;
}
.dot.met { background: var(--g-tint); color: var(--g-strong); --dot-icon: var(--i-check); }
.pg-placement .dot.flag,
.pg-level .dot.flag { background: var(--b-tint); color: var(--b-strong); --dot-icon: var(--i-info); }
.pg-placement .dot.bad,
.pg-level .dot.bad { background: var(--p-strong); color: var(--sheet); }
.pg-placement .dot.bad::before,
.pg-level .dot.bad::before { content: counter(item); width: auto; height: auto; background: none; -webkit-mask: none; mask: none; }

/* Where I start (placement) and "Saved" (level check): a white card with a green top edge. */
.start-card {
  padding: var(--s-4) var(--s-5);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  --mark: var(--g-under);
}
.start-card h2 { margin: 4px 0 6px -4px; }
.start-card > p:not(.label, .btns) { margin: 0 0 14px; }
.start-card .btns { margin: 0; }
@media (max-width: 560px) {
  .start-card { padding: var(--s-4); }
}

/* A calm note instead of the placement form (skipped, or already started). */
.feedback > .rest { margin: 0; padding-top: 116px; }
.feedback > .rest h2 { margin: 0 0 6px; }
.feedback > .rest p { color: var(--pencil); margin: 0 0 18px; }
.feedback > .rest .btns { justify-content: center; margin: 0; }

/* Level check: "you finished the ladder" and my last band. */
.level-done {
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--g-tint);
  color: var(--g-strong);
  font-weight: 600;
}
.level-last { padding: 0 4px; }

/* The ways in: Today (ladder done), Free write ("Band check") and Progress. */
#band-check { --icon: var(--i-progress); text-decoration: none; }
main.page > .band-check { margin: 4px 0 0; } /* the last thing on the page */
.rest-actions { margin: 20px 0 0; justify-content: center; }

/* Progress: the level checks have a fourth column naming where the band came from. */
.level-list li { grid-template-columns: 6.5rem 4.5rem 1fr 6rem; }
.band-kind { font-size: var(--fs-small); color: var(--pencil); }
@media (max-width: 480px) {
  .level-list li { grid-template-columns: 5.5rem 1fr auto; }
  .level-list .band-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- "Helpful" / "Not helpful" under a piece of feedback (public/report-wrong.js) ----
   Deliberately quiet: small outlined buttons in pencil grey, so the feedback itself stays the
   loudest thing. A vote is neutral (no green or pink: those mean met / not yet). The box that
   opens under "Not helpful" is a white slip with a 1px rule, in the page, not a pop-up. */
.fb { margin-top: 10px; font-size: var(--fs-small); color: var(--pencil); min-width: 0; }
.fb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fb-btn,
.fb-btn:hover {
  min-height: 28px;
  padding: 3px 10px;
  border-radius: var(--r-chip);
  background: transparent;
  color: var(--pencil);
  font-size: var(--fs-small);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--rule);
}
.fb-btn:hover { box-shadow: inset 0 0 0 1px var(--pencil); color: var(--ink); }
.fb-btn[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--pencil);
}
.fb-status { flex: 1 1 14em; min-width: 0; }
.fb-status:empty { display: none; }
.fb-box {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.fb-box[hidden] { display: none; }
.fb-box .choices { margin: 0 0 10px; flex-direction: column; gap: 6px; }
.fb-box .choices legend { font-size: var(--fs-small); margin-bottom: 6px; }
.fb-box .choices label { min-height: 36px; font-size: 14px; font-weight: 400; }
.fb-note-label { display: block; font-size: var(--fs-small); color: var(--pencil); }
.fb-note { display: block; margin-top: 4px; font-family: inherit; font-size: 14px; line-height: 1.5; }
.fb-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fb-actions .btn.slim { margin-top: 0; }
.fb-problem { margin: 8px 0 0; font-size: var(--fs-small); color: var(--pencil); }
.fb-problem:empty { display: none; }
/* Inside the places that lay their children out in a grid or reset their margins. */
.changes li > .fb { grid-column: 2; }
.note .fb { margin-top: 8px; }
.met-list .fb { margin-top: 6px; }
.hints .fb { margin-top: 8px; }
@media (max-width: 560px) {
  .fb-btn { min-height: 34px; padding: 4px 12px; }
  .fb-actions .btn.slim { flex: 1 1 0; }
}

/* =====================================================================
   Problem log (problems.html): the private page behind Settings > Improve the coach.
   Pink, because it is about what went wrong. White sheets, rule-separated rows, no tables,
   so it reads on a phone. See DESIGN.md.
   ===================================================================== */
.pg-problems { --c-hl: var(--p-hl); --c-tint: var(--p-tint); --c-strong: var(--p-strong); --c-under: var(--p-under); --icon: var(--i-ledger); }

.pl-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; }
.pl-controls .choices { margin: 0; }
.pl-controls .btn { text-decoration: none; padding: 0 var(--s-4); font-size: 14px; }
@media (max-width: 560px) {
  .pl-controls .btn { flex: 1 1 100%; text-align: center; }
}

#pl-status { margin: 0; font-size: 14px; color: var(--pencil); }
#pl-status:empty { display: none; }
#pl-status.pl-error {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-card);
  background: var(--b-tint);
  color: var(--ink);
  font-size: 15px;
}
#pl-status.pl-error::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
#pl-status.pl-error .message-text { flex: 1 1 16rem; }
#pl-status.pl-error button { padding: 6px 14px; font-size: 14px; }

/* Nothing in the log: one pink card with the way to get started (like My ledger). */
#pl-empty[hidden] { display: none; }
#pl-empty {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: var(--s-5);
  border-radius: var(--r-card);
  background: var(--p-tint);
  color: var(--ink);
}
#pl-empty p { margin: 0; max-width: 56ch; }
#pl-empty .nothing-lead { font-family: var(--display); font-size: var(--fs-h2); font-weight: 700; }
#pl-empty .btn { margin-top: 10px; text-decoration: none; }

#pl-sections { display: flex; flex-direction: column; gap: 20px; }
#pl-sections h2 { margin-bottom: 10px; }
#pl-sections h3 { margin: var(--s-5) 0 4px; font-family: var(--display); font-size: var(--fs-h3); font-weight: 700; }

.pl-list,
.pl-entries { list-style: none; margin: 0; padding: 0; }
.pl-list > li,
.pl-entries > li { padding: 10px 0; border-top: 1px solid var(--rule); min-width: 0; }
.pl-list > li:first-child,
.pl-entries > li:first-child { border-top: 0; padding-top: 0; }
.pl-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.pl-name,
.pl-entry-title { font-weight: 600; overflow-wrap: anywhere; }
.pl-nums { font-size: 14px; color: var(--pencil); }
.pl-detail { margin: 2px 0 0; font-size: var(--fs-small); color: var(--pencil); overflow-wrap: anywhere; }
.pl-entry > .pl-entry-title { margin: 0; }
.pl-line { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.pl-line b { color: var(--pencil); font-weight: 600; }
.pl-example { margin: 4px 0 0; font-size: 14px; color: var(--pencil); overflow-wrap: anywhere; }
.pl-quiet { margin: 0; color: var(--pencil); }

/* A "Not helpful" vote is a slip of paper with what the coach said and what I said about it. */
#pl-feedback .pl-entries > li { margin-top: 10px; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-chip); background: var(--paper); }
#pl-feedback .pl-entries > li:first-child { padding-top: 12px; }

/* =====================================================================
   Free write result: the band card with a meter, tiles (To fix / What worked / Ledger),
   one note at a time. The meter only draws the band word; it is not a score. The meter, the
   strip above the paper and the tiles are drawn in the Free write studio block at the end of
   this file.
   ===================================================================== */
.band-meter[hidden] { display: none; }
.notes[hidden], .worked[hidden], .ledger-part[hidden], .note-body[hidden], .note-nav[hidden] { display: none; }
.ledger-part { display: grid; gap: var(--s-4); min-width: 0; }
.ledger-part > * { margin: 0; }

/* One note at a time. */
.note-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); }
.note-nav #note-pos { font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
.note-nav .linkbtn:disabled { opacity: 0.4; cursor: default; }
.pg-write .notes { padding: var(--s-4) var(--s-5); }
.pg-write .notes-list { gap: 0; }
.pg-write .note { padding: var(--s-2) 0; border-top: 1px solid var(--rule); }
.pg-write .note:first-child { border-top: 0; }
.pg-write .note.current { padding-block: var(--s-3); }
.note-head { margin: 0; font-size: inherit; font-family: inherit; letter-spacing: 0; }
.note-head .item-toggle { width: 100%; min-height: 32px; justify-content: space-between; }
.note-toggle[aria-expanded="false"] .note-title { font-weight: 600; }
.note-body { display: grid; gap: 4px; min-width: 0; }
.note-body > * { margin: 0; }
.note.current .note-num { background: var(--p-strong); }
.note:not(.current) .note-num { background: var(--p-tint); color: var(--p-strong); }
@media (pointer: coarse) { .note-head .item-toggle { min-height: 44px; } .note-nav .linkbtn { min-height: 44px; } }

/* Small fix from the 4a review: air above the question. */
.write-band > div[aria-live] { margin-top: var(--s-4); }

/* a compact band card (the reason is in a quiet fold), small arrow buttons
   for the notes. */
.band-box .why-band { margin: var(--s-2) 0 0; }
.band-box .why-band > summary { padding: 2px 0; font-size: var(--fs-small); color: var(--b-strong); background: none; box-shadow: none; min-height: 0; }
.band-box .why-band p { margin: var(--s-2) 0 0; }
.band-box .next-step { margin-top: var(--s-2); }
/* The questions sit on a white slip on the blue band card, and a little apart inside a note. */
.band-box .ask { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; }
.note-body > .ask { margin-top: var(--s-2); }
#band-evidence { font-size: 16px; }
.note-nav .note-step {
  min-height: 28px;
  min-width: 36px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: var(--r-chip);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: none;
  font-size: 15px;
  line-height: 1;
}
.note-nav .note-step:hover:not(:disabled) { background: var(--paper); border-color: var(--pencil); }
.note-nav .note-step:disabled { opacity: 0.4; cursor: default; }
@media (pointer: coarse) { .note-nav .note-step { min-height: 44px; min-width: 44px; } }

/* Skill card, opened: four labelled parts in one order (When to use it, Example, Tip, Useful
   language), each starting with the same small yellow label and a hairline rule, so it reads as
   one index card and not as loose boxes. The example is the only white slip: it is the paper.
   Last in the file so it wins over the first version of these rules above. */
.skill .more-body {
  --skill-rule: color-mix(in srgb, var(--y-hl) 70%, transparent);
  gap: var(--s-4);
}
.skill .more-body > * { min-width: 0; }
.skill .when {
  order: 1;
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: 15px;
}
.skill .when b { margin-bottom: 2px; }
.skill .more-body > .small,
.skill .tip::before,
.skill .chips::before {
  font-family: var(--ui);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--y-strong);
}
.skill .more-body > .small {
  order: 2;
  margin: 0 0 calc(-1 * var(--s-3));
  padding: var(--s-4) 0 0;
  border-top: 1px solid var(--skill-rule);
}
.skill .model { order: 3; box-shadow: none; border: 1px solid var(--skill-rule); font-size: 17px; }
.skill .tip {
  order: 4;
  display: block;
  padding-top: var(--s-4);
  border-top: 1px solid var(--skill-rule);
  font-size: 15px;
}
.skill .tip::before {
  content: "Tip";
  display: block;
  width: auto;
  height: auto;
  margin: 0 0 2px;
  background: none;
  -webkit-mask: none;
  mask: none;
}
.skill .chips {
  order: 5;
  padding-top: var(--s-4);
  border-top: 1px solid var(--skill-rule);
}
.skill .chips::before {
  content: "Useful language (tap to save)";
  flex: 0 0 100%;
}
.skill .chip-status { order: 6; margin: calc(-1 * var(--s-2)) 0 0; }

/* After a "not yet" a tap in my checked text starts revising (today.js), so show the text cursor. */
.annotated.can-edit { cursor: text; }
.annotated.can-edit mark[data-n] { cursor: text; }
.revise-hint { margin-left: auto; font-size: var(--fs-small); color: var(--pencil); font-weight: 500; }
.annotated.can-edit:focus { outline: 2px solid var(--b-strong); outline-offset: 4px; border-radius: 4px; }

/* ---- Learn words (violet: words) ----
   The home is one daily practice: five words (the C1 word big, where it comes from, its step) and
   one button. Then my words with three plain counts, then "Free play" as a closed fold with the
   ten games. A practice or a game replaces the home in the same place, in one frame: a way out,
   the title and count, and a slim bar. Flat sheets with a hairline border, violet for words;
   right is green and not yet is pink, always with words too. Motion is 200ms or less. */
.pg-learn main.page { gap: var(--s-6); }
.pg-learn #intro { display: grid; gap: var(--s-2); }
.pg-learn #intro > h1 {
  width: fit-content;
  margin: var(--s-1) 0 0 -4px;
  padding-inline: 4px;
  line-height: 1.25;
  background: linear-gradient(transparent 56%, var(--c-under) 56%, var(--c-under) 94%, transparent 94%);
}
.pg-learn #intro > .lead { margin: 0; max-width: 56ch; }
.pg-learn .page-message {
  background: var(--b-tint);
  color: var(--ink);
  border-radius: var(--r-btn);
  padding: var(--s-3) var(--s-4);
  margin: 0;
}
.pg-learn .page-message[hidden] { display: none; }

/* The path in one line: See it, Remember it, Use it. */
.learn-steps { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: var(--s-3) 0 0; padding: 0; font-family: var(--display); font-weight: 600; font-size: 14px; }
.learn-steps li { display: inline-flex; align-items: center; gap: var(--s-2); }
.learn-steps li:not(:last-child)::after { content: "→"; margin-left: var(--s-1); color: var(--pencil); font-weight: 400; }
.learn-steps .num, .step-tag .num { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--v-tint); color: var(--v-strong); font-size: 12px; font-weight: 700; line-height: 1; }

.learn-home { display: flex; flex-direction: column; gap: var(--s-5); }
.pg-learn .learn-sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  padding: var(--s-6);
  box-shadow: var(--shadow);
}
.pg-learn .learn-sheet h2 { margin: 0; }
.learn-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-4); }
.learn-sub { margin: 0; color: var(--pencil); font-size: 14px; }

/* Today's practice: five rows. The words are the loudest thing on the page. */
.round-words { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.round-row { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.round-main { display: grid; gap: 2px; min-width: 0; }
.round-c1 { font-family: var(--display); font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: var(--v-strong); overflow-wrap: anywhere; }
.round-quiet { color: var(--pencil); font-size: 14px; }
.round-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--pencil); }
/* My own words are the heart of Learn: their source line is a small violet label with a pencil. */
.round-source.writing { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-tag); background: var(--v-tint); color: var(--v-strong); font-weight: 600; }
.round-source.writing::before { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: var(--i-pencil) center / contain no-repeat; mask: var(--i-pencil) center / contain no-repeat; }
.learn-kind { font-size: 12px; font-weight: 700; color: var(--pencil); }
.learn-kind.review { color: var(--g-strong); }
.learn-kind.again { color: var(--v-strong); }
.step-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); font-family: var(--display); font-size: 12px; font-weight: 700; white-space: nowrap; }
.step-tag .num { width: 18px; height: 18px; font-size: 11px; }
.learn-start { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin-bottom: var(--s-5); }
.learn-start .btn { min-width: 260px; font-size: 16px; }
.learn-hint { margin: 0; color: var(--pencil); font-size: var(--fs-small); }
.learn-empty { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-btn); background: var(--v-tint); }
.learn-empty p { margin: 0; }
.learn-empty[hidden] { display: none; }

/* Your words: three plain counts, then the words with their day dots. */
.learn-stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0 var(--s-5); padding: 0; }
.learn-stat { display: grid; align-content: start; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-btn); background: var(--paper); }
.learn-stat strong { font-family: var(--display); font-size: var(--fs-title); line-height: 1.1; }
.learn-stat span { font-size: var(--fs-small); color: var(--pencil); line-height: 1.3; }
/* The same colours as the word journey tags and the Progress tiles: violet practising, green learned, solid green owned. */
.learn-stat strong { font-variant-numeric: tabular-nums; }
.learn-stat.practising { background: var(--v-tint); }
.learn-stat.practising strong, .learn-stat.practising span { color: var(--v-strong); }
.learn-stat.learned { background: var(--g-tint); }
.learn-stat.learned strong, .learn-stat.learned span { color: var(--g-strong); }
.learn-stat.owned { background: var(--g-strong); }
.learn-stat.owned strong, .learn-stat.owned span { color: var(--sheet); }
.learn-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.learn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.learn-pair { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.learn-pair strong { font-family: var(--display); font-size: var(--fs-h3); color: var(--v-strong); }
.learn-weak { color: var(--pencil); font-size: var(--fs-small); }
.learn-meaning-small { grid-column: 1; color: var(--pencil); font-size: var(--fs-small); }
.learn-row .pips { grid-column: 2; grid-row: 1; justify-self: end; }
.learn-state { grid-column: 2; grid-row: 2; justify-self: end; }
.learn-row.learned .pip, .learn-row.owned .pip { box-shadow: inset 0 0 0 2px var(--g-strong); }
.learn-row.learned .pip.on, .learn-row.owned .pip.on { background: var(--g-strong); }
.learn-owned { margin: var(--s-4) 0 0; color: var(--pencil); font-size: var(--fs-small); max-width: 60ch; }

/* Free play: one closed row, then the games as clean rows in three steps. */
.pg-learn .learn-free { padding: 0; }
.learn-more > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 64px; padding: var(--s-3) var(--s-6); font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); cursor: pointer; list-style: none; border-radius: var(--r-card); }
.learn-more > summary::-webkit-details-marker { display: none; }
.learn-more > summary small { display: block; font-family: var(--ui); font-weight: 400; font-size: var(--fs-small); color: var(--pencil); }
.learn-more > summary::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--pencil); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; transform: rotate(90deg); transition: transform 0.15s; }
.learn-more[open] > summary::after { transform: rotate(-90deg); }
.learn-more > summary:hover { color: var(--v-strong); }
.learn-more > summary:focus-visible { outline-offset: -2px; }
.learn-games { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-6); padding: var(--s-5) var(--s-6) var(--s-6); border-top: 1px solid var(--rule); }
.learn-all { align-self: flex-start; }
.learn-group h3 { margin: 0; font-size: var(--fs-h3); }
.learn-group-about { color: var(--pencil); font-size: var(--fs-small); margin: 2px 0 var(--s-3); max-width: 60ch; }
.learn-rows { border-top: 1px solid var(--rule); }
.learn-game {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  width: 100%;
  min-height: 56px;
  padding: var(--s-3) var(--s-2);
  background: none;
  color: var(--ink);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.learn-game:hover { background: var(--v-tint); }
.learn-game-text { display: grid; gap: 1px; min-width: 0; }
.learn-game strong { font-family: var(--display); font-size: 16px; }
.learn-about { font-size: var(--fs-small); color: var(--pencil); }
.learn-num { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--v-tint); color: var(--v-strong); font-size: var(--fs-small); font-weight: 700; }
.learn-game:hover .learn-num { background: var(--sheet); }
.learn-game-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-1) var(--s-3); }
/* The level of a game: four dots and a word. More dots = harder. */
.learn-level { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); white-space: nowrap; }
.learn-dots { display: inline-flex; gap: 3px; }
.learn-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.learn-dots .dot.on { background: var(--v-strong); }
.learn-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); font-weight: 600; color: var(--g-strong); }
.learn-tag::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }

/* Inside a practice or a game: the frame. A way out, the title and count, a slim bar. */
.pg-learn .learn-stage { padding: var(--s-5) var(--s-6) var(--s-6); }
.learn-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.learn-path { margin: 0; text-align: right; font-size: var(--fs-small); color: var(--pencil); }
.learn-leave { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 var(--s-2) 0 0; background: none; border: 0; box-shadow: none; color: var(--pencil); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; }
.learn-leave::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-back) center / contain no-repeat; mask: var(--i-back) center / contain no-repeat; }
.learn-leave:hover { background: none; color: var(--ink); }
.learn-step { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-3); }
.learn-name { font-family: var(--display); font-weight: 700; font-size: var(--fs-h3); color: var(--v-strong); }
.learn-count { font-size: var(--fs-small); color: var(--pencil); white-space: nowrap; }
.learn-bar { height: 6px; margin-bottom: var(--s-6); border-radius: 3px; background: var(--rule); overflow: hidden; }
.learn-bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--v-strong); transition: width 0.2s ease-out; }

.learn-prompt { margin: 0 0 var(--s-4); font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: pretty; }
.learn-meaning { margin: 0 0 var(--s-3); }
.learn-stage > p.learn-meaning { margin-bottom: var(--s-4); color: var(--pencil); }
.learn-label { font-weight: 700; font-family: var(--display); font-size: var(--fs-small); color: var(--pencil); }
/* A sentence on a paper slip: the one place the learner reads language, so it is in the reading font. */
.learn-slip { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-chip); background: var(--paper); }
.learn-slip-label { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--pencil); }
.learn-sentence { margin: 0 0 var(--s-4); font-family: var(--text); font-size: 20px; line-height: 1.6; }
.learn-slip .learn-sentence { margin: 0; }
.learn-sentence.small { margin: 0; font-size: 16px; color: var(--pencil); }
.learn-sentence mark { background: var(--marker-soft); color: inherit; padding: 0 2px; border-radius: 3px; }
.learn-card { margin-bottom: var(--s-5); padding: var(--s-6); border-radius: var(--r-btn); background: var(--v-tint); }
.learn-word { margin: 0 0 var(--s-3); font-size: var(--fs-title); line-height: 1.2; }
.learn-word .weak { color: var(--pencil); text-decoration: line-through; text-decoration-thickness: 1px; }
.learn-word .strong { color: var(--v-strong); }
/* "Goes with: a substantial increase · a substantial amount": the whole phrases a word lives in, on the
   meet card and under every answer (only for a word that has partners). Violet is the colour of words;
   the phrases are language, so they are in the reading font. */
.learn-goes { margin: 0; font-size: 15px; line-height: 1.5; color: var(--pencil); }
.learn-goes .learn-label { margin-right: 2px; }
/* A phrase wraps to the next line as one piece; only a phrase longer than the line breaks inside. */
.learn-partner { display: inline-block; max-width: 100%; font-family: var(--text); font-weight: 600; color: var(--v-strong); vertical-align: top; }
.learn-match-note .learn-goes { display: block; margin-top: var(--s-1); }

/* Choices: 48px buttons in a tidy grid. A flat edge at the bottom makes them feel like keys. */
.learn-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin-bottom: var(--s-5); }
.learn-option, .learn-tile {
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule), inset 0 -2px 0 var(--rule);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.learn-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-btn);
  font-weight: 600;
  text-align: left;
}
.learn-option.small { font-weight: 400; font-size: 15px; }
.learn-option:hover:not(:disabled), .learn-tile:hover:not(:disabled) { background: var(--v-tint); box-shadow: inset 0 0 0 1px var(--v-hl), inset 0 -2px 0 var(--v-hl); }
.learn-option.picked { background: var(--v-tint); box-shadow: inset 0 0 0 2px var(--v-strong); }
.learn-option.right { background: var(--g-tint); box-shadow: inset 0 0 0 1.5px var(--g-hl); }
.learn-option.wrong { background: var(--p-tint); box-shadow: inset 0 0 0 1.5px var(--p-hl); }
.learn-option.right::after, .learn-option.wrong::after { content: ""; flex: none; width: 16px; height: 16px; background: var(--g-strong); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.learn-option.wrong::after { background: var(--p-strong); -webkit-mask-image: var(--i-again); mask-image: var(--i-again); }
.learn-option:disabled, .learn-tile:disabled { cursor: default; opacity: 1; }

/* After an answer: right or not yet, in words and colour, then the meaning and the example. */
.learn-feedback { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-btn); animation: learn-in 0.16s ease-out; }
.learn-feedback.right { background: var(--g-tint); }
.learn-feedback.wrong { background: var(--p-tint); }
.learn-fb-head { margin: 0; }
.learn-fb-head strong { display: inline-flex; align-items: center; gap: 6px; }
.learn-fb-head strong::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.learn-feedback.right .learn-fb-head strong { color: var(--g-strong); }
.learn-feedback.wrong .learn-fb-head strong { color: var(--p-strong); }
.learn-feedback.wrong .learn-fb-head strong::before { -webkit-mask-image: var(--i-again); mask-image: var(--i-again); }
.learn-feedback-slot:empty { display: none; }
.learn-win { margin: var(--s-3) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-btn); background: var(--g-tint); font-weight: 600; }
.learn-note { margin: var(--s-3) 0; color: var(--pencil); }
.learn-feedback .learn-win, .learn-feedback .learn-note { margin: 0; padding: 0; background: none; }
/* What the answer did to the word: a calm highlighted line when it is learned now, then the tag and one line. */
.learn-status { display: grid; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.learn-feedback .learn-status .learn-win { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-chip); background: var(--sheet); color: var(--g-strong); font-weight: 700; }
.learn-feedback .learn-status .learn-win::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.learn-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; font-size: var(--fs-small); color: var(--pencil); }
.learn-wordstate { margin: calc(var(--s-1) * -1) 0 var(--s-3); }
.learn-wordstate[hidden] { display: none; }
@keyframes learn-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Typed answers: large and calm, with a clear Check button. */
.learn-gap { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-5); }
.learn-gap input { flex: 1 1 220px; min-height: 56px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-btn); background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); font-family: var(--text); font-size: 20px; }
.learn-gap input::placeholder, .learn-write textarea::placeholder { color: var(--pencil); opacity: 0.8; font-family: var(--ui); font-size: 16px; }
.learn-gap input:focus { box-shadow: inset 0 0 0 2px var(--v-strong); }
.learn-gap input.right { background: var(--g-tint); box-shadow: inset 0 0 0 1.5px var(--g-hl); }
.learn-gap input.wrong { background: var(--p-tint); box-shadow: inset 0 0 0 1.5px var(--p-hl); }
.learn-gap .btn { min-height: 56px; }
.learn-write { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
.learn-write textarea { width: 100%; min-height: 112px; padding: var(--s-3) var(--s-4); border: 0; border-radius: var(--r-btn); background: var(--sheet); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule); font-family: var(--text); font-size: 18px; line-height: 1.6; resize: vertical; }
.learn-write textarea:focus { box-shadow: inset 0 0 0 2px var(--v-strong); }
.learn-write textarea.right { background: var(--g-tint); box-shadow: inset 0 0 0 1.5px var(--g-hl); }
.learn-write textarea.wrong { background: var(--p-tint); box-shadow: inset 0 0 0 1.5px var(--p-hl); }
.learn-write .btn { align-self: flex-start; }
.learn-write .btn, .learn-stage > .btn { min-width: 160px; }

/* Spot the weak word: every word of the sentence is a button. */
.learn-token {
  min-height: 0;
  padding: 3px 2px;
  background: none;
  color: inherit;
  border: 0;
  border-bottom: 2px dotted var(--v-hl);
  border-radius: 3px;
  box-shadow: none;
  font: inherit;
  font-weight: 400;
  line-height: 1.9;
  cursor: pointer;
}
.learn-token:hover:not(:disabled) { background: var(--v-tint); border-bottom-color: var(--v-strong); }
.learn-token.right { background: var(--g-tint); border-bottom: 2px solid var(--g-hl); }
.learn-token.wrong { background: var(--p-tint); border-bottom: 2px solid var(--p-hl); }
.learn-token:disabled { cursor: default; color: inherit; opacity: 1; background: none; }
.learn-token.right:disabled { background: var(--g-tint); }
.learn-token.wrong:disabled { background: var(--p-tint); }

/* Build the sentence: tiles you tap in order. A tile in the sentence is violet. */
.learn-built, .learn-tiles { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.learn-built { align-items: center; min-height: 64px; margin-bottom: var(--s-3); padding: var(--s-3); border: 1.5px dashed var(--v-hl); border-radius: var(--r-btn); }
.learn-built.filled { border-style: solid; }
.learn-built.right { background: var(--g-tint); border: 1.5px solid var(--g-hl); }
.learn-built.wrong { background: var(--p-tint); border: 1.5px solid var(--p-hl); }
.learn-built-empty { color: var(--pencil); font-size: var(--fs-small); }
.learn-tiles { margin-bottom: var(--s-5); }
.learn-tile { min-height: 44px; padding: var(--s-1) var(--s-3); border: 0; border-radius: var(--r-btn); font-family: var(--text); font-size: 17px; font-weight: 400; cursor: pointer; }
.learn-built .learn-tile { background: var(--v-tint); box-shadow: inset 0 0 0 1.5px var(--v-strong); }
.learn-built.right .learn-tile, .learn-built.wrong .learn-tile { box-shadow: none; background: var(--sheet); }

/* Match pairs: a word, then its meaning. */
.learn-match { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-bottom: var(--s-3); }
.learn-col { display: flex; flex-direction: column; gap: var(--s-2); }
.learn-match-note { min-height: 1.55em; margin: var(--s-3) 0 var(--s-5); }

/* The end: what moved, then use the words soon. */
.pg-learn .learn-sheet .learn-end-title { margin: 0 0 var(--s-2); font-size: var(--fs-title); }
.learn-end-title:focus { outline: none; }
.learn-result { margin: 0 0 var(--s-3); color: var(--ink); }
.learn-moved { margin: 0 0 var(--s-2); font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.3; }
/* The end list: each word of the round with where it stands after today. */
.learn-sum { list-style: none; margin: var(--s-4) 0; padding: 0; border-top: 1px solid var(--rule); }
.learn-sum-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.learn-sum-word { font-family: var(--display); font-size: var(--fs-h3); color: var(--v-strong); flex: 1 1 140px; overflow-wrap: anywhere; }
.learn-sum-note { font-size: var(--fs-small); color: var(--pencil); }
.learn-sum-note.miss { color: var(--p-strong); font-weight: 600; }
.learn-use-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.learn-use { display: grid; justify-items: start; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); padding: var(--s-5); border-radius: var(--r-btn); background: var(--v-tint); }
.learn-use h3 { margin: 0; font-size: var(--fs-h3); }
.learn-use p { margin: 0; }
.learn-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.learn-chips li { padding: 4px 12px; border-radius: var(--r-chip); background: var(--sheet); color: var(--v-strong); font-family: var(--text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .learn-feedback { animation: none; }
  .learn-bar-fill, .learn-more > summary::after, .learn-option, .learn-tile { transition: none; }
}
@media (max-width: 560px) {
  .learn-steps li::after { display: none; }
  /* The three steps as three equal columns (number above, text under), not a ragged 2 + 1. */
  .learn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); align-items: start; font-size: 13px; }
  .learn-steps li { flex-direction: column; justify-content: flex-start; text-align: center; gap: 6px; }
  /* Today's practice: the word with its step on the right, then what it replaces, then where
     it comes from. Each word takes three short lines instead of five. */
  .round-row { padding: var(--s-3) 0; }
  .round-main, .round-meta { display: contents; }
  .round-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px var(--s-3); }
  .round-c1 { grid-column: 1; grid-row: 1; }
  .round-row .step-tag { grid-column: 2; grid-row: 1; }
  .round-quiet { grid-column: 1; grid-row: 2; }
  .round-source { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: var(--s-2); max-width: 100%; }
  .round-row .learn-kind { grid-column: 2; grid-row: 2; justify-self: end; }
  /* Your words: the word and its meaning on top, the day dots and status on one line under. */
  .learn-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); }
  .learn-pair { grid-column: 1 / -1; grid-row: 1; }
  .learn-meaning-small { grid-column: 1 / -1; grid-row: 2; }
  .learn-state { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--s-1); }
  .learn-row .pips { grid-column: 2; grid-row: 3; justify-self: end; }
  .pg-learn .learn-sheet, .pg-learn .learn-stage { padding: var(--s-4); }
  .learn-start .btn, .learn-stage .btn, .learn-empty .btn, .learn-all { width: 100%; }
  .learn-gap input { flex-basis: 100%; }
  .learn-write .btn { align-self: stretch; }
  .round-c1 { font-size: 22px; }
  .learn-stats { gap: var(--s-2); }
  .learn-stat { padding: var(--s-3); }
  .learn-stat strong { font-size: 24px; }
  .learn-more > summary { padding: var(--s-3) var(--s-4); }
  .learn-games { padding: var(--s-4); }
  .learn-game { grid-template-columns: auto minmax(0, 1fr); }
  .learn-game-meta { grid-column: 2; justify-content: flex-start; }
  .learn-leave { min-height: 44px; }
  .learn-slip { padding: var(--s-3) var(--s-4); }
  .learn-card { padding: var(--s-5); }
}
@media (max-width: 480px) { .learn-match { gap: var(--s-2); } .learn-option { padding: var(--s-2) var(--s-3); } }

/* The blue underline on a weak word I already know a stronger word for (Free write and Today). */
.upgrade-tip {
  position: fixed;
  z-index: 50;
  max-width: 260px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-btn);
  padding: 8px 12px;
  font-size: var(--fs-small);
  line-height: 1.4;
  box-shadow: var(--shadow-lift);
  pointer-events: none;
}
.upgrade-tip[hidden] { display: none; }
/* The layer behind Today's textarea: same text, same type, so the marks sit under the words. */
.today .writing { position: relative; }
.upgrade-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-family: var(--text);
  font-size: 21px;
  line-height: var(--line);
  color: transparent;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  pointer-events: none;
}
@media (max-width: 560px) { .upgrade-layer { font-size: 19px; } }
.today textarea#draft { position: relative; z-index: 1; }
/* The blue underline itself: a soft blue under the weak word (solid, so it is not a quick tip). */
mark.up,
#backdrop mark.up {
  background: var(--b-tint);
  color: transparent;
  border-radius: 3px;
  text-decoration: underline solid 2px var(--pen);
  text-underline-offset: 6px;
}
.upgrade-tip strong { color: var(--b-hl); }

/* ---- Learn: the quiet rating (report-wrong.js) ----
   "Rate this game" under the last screen of a game and "Rate this page" at the foot of the page:
   one small underlined link each, like the Free write notes. The two votes appear only when it
   is opened, as text links, not buttons. */
.learn-rate { margin-top: var(--s-4); }
.learn-rate:empty, .learn-rate[hidden] { display: none; }
.pg-learn .learn-stage .learn-rate { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
.pg-learn .fb { margin-top: 0; }
.pg-learn .fb-row { gap: 4px; }
.pg-learn .fb-btn,
.pg-learn .fb-btn:hover {
  min-height: 28px;
  padding: 3px 6px;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
}
.pg-learn .fb-btn:hover { color: var(--ink); text-decoration-color: currentColor; }
.pg-learn .fb-btn[aria-pressed="true"] { background: var(--paper); text-decoration: none; }
@media (max-width: 560px), (pointer: coarse) {
  .pg-learn .fb-btn, .pg-learn .fb-open { min-height: 44px; }
}

/* ---- Profiles: the block under the logo (a pill in the top bar on phones) and its menu ---- */
/* The colour says whose profile it is: blue = AYB, orange = Guest, violet = a friend. */
[data-kind="ayb"] { --who-tint: var(--b-tint); --who-strong: var(--b-strong); --who-hl: var(--b-hl); }
[data-kind="guest"] { --who-tint: var(--o-tint); --who-strong: var(--o-strong); --who-hl: var(--o-hl); }
[data-kind="friend"] { --who-tint: var(--v-tint); --who-strong: var(--v-strong); --who-hl: var(--v-hl); }

.profile-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--who-tint);
  color: var(--who-strong);
  box-shadow: inset 0 0 0 1.5px var(--who-hl);
  font-weight: 700;
  font-size: 15px;
}

.site-header .profile-btn {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: var(--r-btn);
  background: var(--who-tint, var(--paper));
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--who-hl, var(--rule));
  text-align: left;
}
.site-header .profile-btn:hover { background: var(--who-tint, var(--paper)); box-shadow: inset 0 0 0 2px var(--who-strong, var(--pencil)); }
.profile-btn[hidden] { display: none; }
.profile-btn::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--who-strong, var(--pencil));
  border-bottom: 2px solid var(--who-strong, var(--pencil));
  transform: rotate(45deg) translate(-2px, -2px);
}
.profile-words { display: grid; min-width: 0; line-height: 1.2; }
.profile-label { font-size: 12px; color: var(--who-strong, var(--pencil)); }
.profile-name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 901px) {
  .sidebar .profile-btn { width: 100%; margin-bottom: var(--s-2); }
}
@media (max-width: 900px) {
  .site-header .profile-btn { min-height: 40px; padding: 4px 10px 4px 6px; max-width: 46vw; margin-inline: 8px auto; }
  .profile-btn .profile-avatar { width: 28px; height: 28px; font-size: 14px; }
  .profile-label { display: none; }
  .profile-btn::after { display: none; }
}

.profile-menu[popover] {
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  width: min(400px, calc(100vw - 32px));
  max-height: 85dvh;
  overflow-y: auto;
  padding: var(--s-5);
  background: var(--sheet);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift, var(--shadow));
}
.profile-menu:not(:popover-open) { display: none; }
.profile-menu::backdrop { background: rgba(20, 22, 30, 0.35); }
.profile-menu-title { margin: 0 0 var(--s-3); font-size: var(--fs-h3); }
.profile-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.profile-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 48px;
  padding: 6px 12px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  text-align: left;
}
.profile-item:hover { background: var(--who-tint); box-shadow: inset 0 0 0 1.5px var(--who-hl); }
.profile-item[aria-current="true"] { background: var(--who-tint); box-shadow: inset 0 0 0 2px var(--who-strong); }
.profile-item-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-active { margin-left: auto; font-size: var(--fs-small); font-weight: 700; color: var(--who-strong); }
.profile-guest { width: 100%; --who-tint: var(--o-tint); }
.profile-note { margin: var(--s-2) 0 var(--s-4); font-size: var(--fs-small); color: var(--pencil); }
.profile-add { display: grid; gap: var(--s-2); border-top: 1px solid var(--rule); padding-top: var(--s-4); }
.profile-add-label { display: grid; gap: 6px; font-weight: 600; }
.profile-message:empty { display: none; }
/* The account menu (Clerk sign-in on, 2026-10-24): the name and email, then two buttons side by side. */
.profile-email { margin: 0 0 var(--s-4); overflow-wrap: anywhere; }
.profile-account-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.profile-account-buttons button { min-height: 44px; padding: 0 var(--s-3); font-size: 14px; }

/* Today "What to fix" item: Helpful / Not helpful sit at the right edge, away from the actions. */
.item-rest > .fb .fb-row { justify-content: flex-end; }

/* Free write and the ladder: skills this text showed. A line in the band box, a list under
   "What worked", and a dot on the ladder segment of a skill I have used in free writing. */
.skills-line { margin: var(--s-2) 0 0; font-weight: 600; color: var(--g-strong); }
.skills-line .linkbtn {
  display: inline;
  min-height: 0;
  padding: 0;
  margin-left: 4px;
  background: none;
  box-shadow: none;
  color: var(--pen);
  font-weight: 600;
  text-decoration: underline;
}
.skills-line .linkbtn::before { display: none; }
.skills-line .linkbtn:hover { background: none; box-shadow: none; color: var(--pen-hover); }
.skill-uses { margin-top: var(--s-4); }
.skill-uses .quiet-note { display: block; margin: var(--s-3) 0 0; }
.skill-uses .quiet-note::before { display: none; }
.skill-quote {
  padding-inline: 2px;
  background: var(--g-under);
  font-family: var(--text);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.bar .tick.free::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--g-strong);
}
.bar .tick.free.now::after { background: #4a3d00; }
.tick-tip-free { color: var(--g-strong); font-weight: 600; }

/* ---- Today: the side panel as tabs, and Think first (pilot skills; think-first.js) ----
   A skill with a "think" field gets three tabs in the side panel: "1 The skill" (yellow),
   "2 Think first" (orange: the highlighter of warming up, here warming up the thinking) and, after
   a check, "Feedback" (green when it meets C1, pink when not yet). The open tab is joined to its
   card: the same colour, no border between. The closed tabs are quiet. From 1200px the panel is
   on the right, beside my writing. Under 1200px the tabs sit above the writing card, folded at
   first, so the tabs and the top of the writing box fit on a phone screen. Every other skill
   keeps the page as it was (the tabs stay hidden and the old rules apply). */
#today-side.tabs-on { --tc: var(--o-hl); --tb: var(--o-tint); }
#today-side.tabs-on[data-tab="skill"],
#today-side.tabs-on[data-tab="focus"] { --tc: var(--y-hl); --tb: var(--y-tint); }
#today-side.tabs-on[data-tab="feedback"][data-fb="met"] { --tc: var(--g-hl); --tb: var(--g-tint); }
#today-side.tabs-on[data-tab="feedback"][data-fb="notyet"] { --tc: var(--p-hl); --tb: var(--p-tint); }

.side-tabs { display: flex; gap: 6px; order: 0; position: relative; z-index: 1; }
.side-tabs[hidden] { display: none; }
.stab {
  --c: var(--y-hl); --t: var(--y-tint);
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 64px;
  padding: 8px 12px;
  text-align: left;
  border: 2px solid var(--rule);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: transparent;
  color: var(--pencil);
  box-shadow: none;
  font: 600 15px/1.25 var(--ui);
  cursor: pointer;
}
.stab-think { --c: var(--o-hl); --t: var(--o-tint); }
#today-side[data-fb="met"] .stab-feedback { --c: var(--g-hl); --t: var(--g-tint); }
#today-side[data-fb="notyet"] .stab-feedback { --c: var(--p-hl); --t: var(--p-tint); }
.stab:hover { background: var(--t); color: var(--ink); }
.stab-top { display: flex; align-items: center; gap: 8px; font: 700 16px/1.2 var(--display); }
.stab-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font: 700 14px/1 var(--ui);
  background: color-mix(in srgb, var(--c) 55%, var(--sheet));
  color: #3a2a00;
}
.stab-think .stab-badge { color: #3b1d00; }
.stab-status { padding-left: 34px; font: 600 13px/1.3 var(--ui); color: var(--pencil); }
.stab-feedback .stab-status { padding-left: 0; }
.stab-status.ok { color: var(--g-strong); font-weight: 700; }
.stab-status.bad { color: var(--p-strong); font-weight: 700; }
/* The open tab: its card colour, joined to the card below. */
.stab[aria-selected="true"] {
  background: var(--t);
  border-color: var(--c);
  border-bottom-color: var(--t);
  margin-bottom: -2px;
  padding-bottom: 10px;
  color: var(--ink);
}
.stab[aria-selected="true"] .stab-badge { background: #3a2a00; color: var(--y-hl); }
.stab-think[aria-selected="true"] .stab-badge { background: #3b1d00; color: var(--o-hl); }
.stab:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 2px; }
/* Nothing open (a phone, folded): the tabs are two quiet buttons. */
#today-side[data-tab="none"] .stab { border-radius: var(--r-btn); }

/* The three panels share the card look of the open tab. */
#today-side.tabs-on > #skill,
#today-side.tabs-on > #think-panel,
#today-side.tabs-on > #focus-panel,
#today-side.tabs-on > #verdict {
  order: 1;
  margin: 0;
  padding: var(--s-4);
  overflow: visible;
  background: var(--tb);
  border: 2px solid var(--tc);
  border-radius: 0 0 var(--r-card) var(--r-card);
}
#today-side.tabs-on > #verdict:empty { display: none; }
#today-side.tabs-on[data-tab="skill"] > #skill { border-top-right-radius: var(--r-card); }
#today-side.tabs-on[data-tab="think"] > #think-panel { border-top-left-radius: var(--r-card); }
#today-side.tabs-on[data-tab="think"][data-tabs="3"] > #think-panel { border-top-right-radius: var(--r-card); }
#today-side.tabs-on[data-tab="feedback"] > #verdict { border-top-left-radius: var(--r-card); }
/* The skill card inside its tab: the tab already says "1 The skill", so no band, and the
   example and tips are always open. */
#today-side.tabs-on > #skill .skill-band { display: none; }
#today-side.tabs-on > #skill .skill-body { padding: 0; }
#today-side.tabs-on > #skill details.more > summary { display: none; }
#today-side.tabs-on > #skill details.more { margin-top: var(--s-3); }
#today-side.tabs-on > #skill details.more .more-body { padding-top: 0; }
/* "How the writer thought about it": right under the example it explains (order 4, between the
   example and the Tip), with the same small yellow label as the other parts. Each step is a
   numbered row: the bold label, the thought, and the writer's question in grey under it. */
.skill .model-thinking { order: 4; margin-top: calc(-1 * var(--s-2)); }
.skill .tip { order: 5; }
.skill .chips { order: 6; }
.skill .chip-status { order: 7; }
.model-thinking-label {
  margin: 0 0 var(--s-2);
  font-family: var(--ui);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--y-strong);
}
.model-notes {
  counter-reset: note;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.45;
}
.model-notes li {
  counter-increment: note;
  position: relative;
  padding: 0 0 0 30px;
}
.model-notes li + li { margin-top: var(--s-3); }
.model-notes li::before {
  content: counter(note);
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--y-hl);
  color: var(--ink);
  font: 700 12px/20px var(--ui);
  text-align: center;
}
/* A line between the steps' circles, so the four read as one path. */
.model-notes li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 9.5px;
  top: 22px;
  bottom: calc(-1 * var(--s-3) + 2px);
  width: 1px;
  background: var(--skill-rule, var(--y-hl));
}
.model-notes b { display: block; font-family: var(--ui); font-size: 13px; }
.model-notes .note-thought { display: block; color: var(--ink); }
.model-notes .note-ask { display: block; margin-top: 2px; font-size: 13px; color: var(--pencil); }
/* The writing card says "Your task" only: no step number on it. */
body.think-pilot #task-meta::before { display: none; }
@media (min-width: 1200px) {
  #today-side.tabs-on { gap: 0; }
  #today-side.tabs-on > .side-tabs { position: sticky; top: 0; background: var(--paper); z-index: 2; }
  #today-side.tabs-on > #verdict { order: 1; }
}
@media (max-width: 1199px) {
  #today-side.tabs-on > .side-tabs { order: 0; }
}

/* ---- The Think first card ---- */
/* What to do and the topic, above the steps (2026-10-21: the card confused a learner without it). */
.think-panel .t-intro { margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid color-mix(in srgb, var(--o-hl) 45%, transparent); }
.think-panel .t-intro p { margin: 0; }
.think-panel .t-intro-title { font: 700 17px/1.3 var(--display); color: var(--ink); }
.think-panel .t-intro-topic { margin-top: 4px !important; font: 500 15px/1.4 var(--ui); color: var(--ink); }
.think-panel .t-intro-topic b { font-weight: 700; }
.think-panel .t-intro-note { margin-top: 4px !important; font: 400 13px/1.45 var(--ui); color: var(--pencil); }
/* One step: a round number and the question (the label of the box), the example, the box. */
.think-panel .t-row { display: block; }
.think-panel .t-row .t-label { display: flex; align-items: flex-start; gap: 8px; }
.think-panel .t-row .t-num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--o-strong);
  color: var(--sheet);
  font: 700 13px/1 var(--ui);
}
.think-panel .t-row .t-q { padding-top: 2px; font: 700 15px/1.35 var(--ui); color: var(--ink); }
.think-panel .t-row .t-eg { margin: 3px 0 0 32px; font: 400 13px/1.4 var(--ui); color: var(--pencil); }
.think-panel .t-row .t-eg-k { font-weight: 600; }
/* The numbers make a column on the left: the box, the result and the arrow line up with it. */
.think-panel .t-row textarea { margin-left: 32px; width: calc(100% - 32px) !important; }
.think-panel .t-rows > .t-result { margin-left: 32px; }
.think-panel .t-rows > .t-arrow { padding-left: 7px; }
.think-panel .t-row textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1.5px solid var(--rule);
  border-radius: var(--r-btn);
  background: var(--sheet);
  color: var(--ink);
  font: 500 15px/1.35 var(--ui);
  resize: none;
  overflow-y: auto;
}
.think-panel .t-row textarea::placeholder { color: var(--pencil); opacity: 0.8; }
.think-panel .t-row textarea:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 1px; }
.think-panel .t-row.ok textarea { border-color: var(--g-strong); }
.think-panel .t-row.flag textarea { border-color: var(--p-strong); background: var(--p-tint); }
.think-panel .t-reason { margin: 2px 0 6px 0; font-size: 14px; color: var(--p-strong); }
.think-panel .t-arrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0;
  min-height: 24px;
  font-size: 13px;
  color: var(--pencil);
}
.think-panel .t-a { font: 700 16px/1 var(--ui); color: var(--o-strong); }
.think-panel .t-tag { padding: 1px 8px; border-radius: var(--r-tag); font: 700 13px/1.5 var(--ui); }
.think-panel .t-tag:empty { display: none; }
.think-panel .t-tag.ok { background: var(--g-tint); color: var(--g-strong); }
.think-panel .t-tag.bad { background: var(--p-tint); color: var(--p-strong); }
/* The verdict on one note, right under its box: a green "✓ This step works", or the fault's
   name, one plain sentence and "Ask yourself". */
.think-panel .t-result { margin: 6px 0 2px; }
.think-panel .t-result[hidden] { display: none; }
.think-panel .t-says { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.think-panel .t-says .t-tag { margin-right: 4px; }
.think-panel .t-result .ask { margin: 6px 0 4px; }
.think-panel .t-result .t-reason { margin: 4px 0 0; }
.think-panel .t-add {
  display: inline-block;
  margin: 0;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--o-strong);
  font: 600 14px/1 var(--ui);
  cursor: pointer;
}
.think-panel .t-add:hover { text-decoration: underline; text-underline-offset: 3px; }
.think-panel .t-tests { margin-top: var(--s-2); }
.think-panel .t-tests > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font: 600 14px/1.2 var(--ui);
  color: var(--pencil);
}
.think-panel .t-tests > summary::-webkit-details-marker { display: none; }
.think-panel .t-tests > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.think-panel .t-tests[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.think-panel .tests-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.think-panel .tests-list li b { color: var(--o-strong); }
.think-panel .t-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin-top: var(--s-2); }
.think-panel .btn-think {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-btn);
  background: #3b1d00;
  color: #ffe2c6;
  box-shadow: none;
  font: 700 16px/1 var(--ui);
  cursor: pointer;
}
.think-panel .btn-think:disabled { opacity: 0.7; cursor: default; }
.think-panel .t-skip {
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--pencil);
  font: 500 14px/1 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.think-panel .t-wait, .think-panel .t-error { margin: 8px 0 0; font-size: 14px; }
.think-panel .t-wait { color: var(--o-strong); }
.think-panel .t-wait:empty, .think-panel .t-error:empty { display: none; }
.think-panel .t-error { color: var(--p-strong); }
.think-panel .t-skipped p { margin: 0 0 8px; }

/* The plan, once the thinking is ready: every step, with the linking words on the arrows. */
.think-panel .plan-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); }
.think-panel .plan-title { font: 700 16px/1.2 var(--display); }
.think-panel .plan-ok { font: 700 13px/1 var(--ui); color: var(--g-strong); }
.think-panel .t-edit {
  margin-left: auto;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--o-strong);
  font: 700 14px/1 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.think-panel .plan-list { margin: 0; padding: 0; list-style: none; }
.think-panel .p-step { display: block; padding: 8px 12px; background: var(--sheet); border: 1.5px solid var(--g-hl); border-radius: var(--r-chip); font: 600 15px/1.35 var(--ui); }
.think-panel .p-arrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 30px; padding-left: 10px; }
.think-panel .lw { padding: 2px 8px; background: var(--v-tint); color: var(--v-strong); border-radius: var(--r-tag); font: 600 13px/1.4 var(--ui); }

@media (max-width: 1199px) {
  .stab { min-height: 56px; padding: 6px 10px; border-radius: var(--r-btn); }
  .stab[aria-selected="true"] { border-radius: var(--r-btn) var(--r-btn) 0 0; }
  .stab-top { font-size: 15px; }
  .stab-status { padding-left: 34px; font-size: 12px; }
  .stab-feedback .stab-status { padding-left: 0; }
}
@media (max-width: 560px) {
  .think-panel .btn-think { width: 100%; }
  .stab-top { font-size: 14px; gap: 6px; }
  .stab-status { padding-left: 32px; }
}

/* =====================================================================
   Your focus: my main thinking habit from my last tries (focus.js, focus-card.js). On Today one
   line at the foot of the journey card (a button) opens it: the "Your focus" tab on a skill with
   tabs, otherwise a card under the skill card. On Progress it is part of "Where you are". Today's
   yellow highlighter on the habit sentence.
   ===================================================================== */
/* The line is one quiet button: a rule above it, the text in ink, a blue arrow. */
button.focus-line {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 40px;
  margin: var(--s-3) 0 0;
  padding: var(--s-2) 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 600 14px/1.3 var(--display);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
button.focus-line:hover { background: none; color: var(--pen); }
button.focus-line:focus-visible { outline: 3px solid var(--b-strong); outline-offset: 2px; }
/* Always one line: a long habit is cut with "…" rather than adding a line on phones. */
.focus-line-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focus-arrow { flex: none; color: var(--pen); font-weight: 700; }
/* On phones the journey card is a column with its own order: the focus line stays last, and it uses
   the short habit and count ("Focus: the exact change · 16 of 19 tries"), so it fits on one line. */
.pg-today .progress .focus-line { order: 4; }
.focus-narrow { display: none; }
@media (max-width: 560px) {
  .focus-wide { display: none; }
  .focus-narrow { display: inline; }
}
/* On Progress the focus is part of "Where you are": a rule above it, no card of its own. */
.where-focus.focus-card { margin-top: var(--s-4); padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; background: none; }
/* Without tabs (a skill with no Think first) the focus opens under the skill card. With tabs it is
   one of the tab panels (the panel rules of #today-side.tabs-on). */
.today-side > .focus-panel { order: 1; }
.focus-card {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  --mark: var(--y-under);
}
.focus-card .label { margin: 0; font-family: var(--display); font-size: var(--fs-small); font-weight: 700; color: var(--y-strong); }
.focus-card > h2 { margin: var(--s-1) 0 var(--s-2); font-family: var(--display); font-size: var(--fs-h3); line-height: 1.35; }
/* The highlighter stroke on an inline span, so a name that wraps gets a stroke on each line. */
.focus-card > h2 span {
  padding-inline: 4px;
  margin-left: -4px;
  background: linear-gradient(transparent 56%, var(--y-under) 56%, var(--y-under) 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.focus-count { margin: 0 0 var(--s-3); }
/* "You wrote: improved his life → C1: a sense of closeness": one short row each. My words are
   struck in pink, the C1 words green, like the two sides of the C1 version. */
.focus-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: var(--s-2); }
.focus-list li { padding: var(--s-2) var(--s-3); border-radius: var(--r-chip); background: var(--sheet); border: 1px solid var(--rule); line-height: 1.6; }
.focus-tag { font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--pencil); }
.focus-list q { quotes: none; font-family: var(--text); font-size: 15px; }
.focus-mine { text-decoration: line-through; text-decoration-color: var(--p-strong); }
.focus-c1 { color: var(--g-strong); font-weight: 600; }
.focus-test { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-chip); background: var(--y-tint); }
.focus-grammar { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--pencil); }
@media (max-width: 560px) {
  .focus-card { padding: var(--s-4); }
}
/* In its tab the focus has the tab's yellow card look (#today-side.tabs-on panel rules), not a white card. */
#today-side.tabs-on > .focus-card { box-shadow: none; }

/* The parts of a check that come a moment later (task-fix.js, the C1 version call): a quiet line
   in the place they will fill, never a spinner over the page. */
.fix-loading,
.c1-loading { margin: var(--s-2) 0; font-size: var(--fs-small); color: var(--pencil); }
.c1-waiting .label { margin: 0; }

/* ---- Fix it together (coach mode: public/coach.js, design/coach-mode-sketch.html) ----
   After a "not yet" the feedback is a short dialogue, one point at a time: numbered dots, then
   turns. A coach turn is a white card with a small label; my turn is blue (the writing colour);
   a confirmed answer has a green border; a frame is a yellow chip with an underlined gap. */
.coach { display: grid; gap: var(--s-3); }
.coach .steps-row { display: flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--ui); color: var(--pencil); }
.coach .steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.coach .steps i { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-style: normal; border: 2px solid var(--rule); flex: none; }
.coach .steps i.now { background: var(--p-strong); color: #fff; border-color: var(--p-strong); }
.coach .steps i.ok { background: var(--g-strong); color: #fff; border-color: var(--g-strong); }
.coach .steps-name { color: var(--ink); }
.coach .steps-count { margin-left: auto; white-space: nowrap; }
.coach .turn { padding: var(--s-4); border-radius: var(--r-card); border: 1px solid var(--rule); background: var(--sheet); display: grid; gap: 8px; }
.coach .turn .who { font: 700 12px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--pencil); }
.coach .turn p { margin: 0; font: 400 16px/1.55 var(--ui); color: var(--ink); }
.coach .turn q { font-style: normal; quotes: "‘" "’"; background: var(--p-tint); padding: 0 3px; border-radius: 3px; }
.coach .turn .q { font: 600 17px/1.45 var(--display); }
.coach .turn .rung { font: 700 12px/1.2 var(--ui); color: var(--b-strong); }
.coach .turn .small { font: 500 13px/1.4 var(--ui); color: var(--pencil); }
.coach .turn.me { background: var(--b-tint); border-color: transparent; }
.coach .turn.me.plain { background: transparent; border-color: var(--rule); }
.coach .turn.me .answer { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--b-strong); border-radius: var(--r-chip); background: var(--sheet); font: 400 16px/1.5 var(--ui); color: var(--ink); }
.coach .turn.me .hint { font: 500 13px/1.4 var(--ui); color: var(--pencil); }
.coach .turn.good { border-color: var(--g-strong); }
.coach .turn.good .who { color: var(--g-strong); }
.coach .frames { display: flex; flex-wrap: wrap; gap: 8px; }
/* "Keep ‘my words’, and replace ‘my words’ with:" — my kept words in Literata, as my own text. */
.coach .turn .anchor .mine { font-family: var(--text); }
.coach .frame { white-space: nowrap; max-width: 100%; box-sizing: border-box; font: 700 20px/1.3 var(--display); color: var(--ink); background: var(--y-tint); padding: 10px 14px; border-radius: var(--r-chip); display: inline-block; }
.coach .frame .gap { display: inline-block; min-width: 120px; border-bottom: 3px solid var(--ink); margin: 0 2px; vertical-align: baseline; height: 1em; }
.coach .coach-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.coach .coach-row .btn, .coach .coach-chip { min-height: 44px; }
.coach .coach-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.coach .coach-chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--b-strong); background: var(--sheet); color: var(--b-strong); font: 600 15px/1.2 var(--ui); cursor: pointer; box-shadow: none; }
.coach .coach-chip:hover { background: var(--b-tint); }
.coach .coach-note, .coach-foot-note { margin: 0; font: 400 14px/1.5 var(--ui); color: var(--pencil); }
.coach-foot-note { padding: 0 var(--s-4) var(--s-3); }
.coach .coach-status { margin: 0; font: 500 14px/1.4 var(--ui); color: var(--pencil); }
.coach .coach-status:empty { display: none; }
.coach .quiet-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; }
/* Quiet text links ("I don't understand", "Show me a C1 version"), not buttons: the plain button look is reset. */
.coach button.coach-link,
.coach button.coach-link:hover { min-height: 44px; padding: 0; background: none; box-shadow: none; border-radius: 0; color: var(--b-strong); font: 600 14px/1.4 var(--ui); justify-self: start; }
.coach button.coach-link:hover { text-decoration: underline; }
.coach button.coach-link.p { color: var(--pencil); }
/* A word inside a sentence that takes me to the other half of the screen on a phone: "Edit the sentence below, then"
   (the coach) and "the coach is above" (under my writing). Plain inline link, a generous tap area, an arrow. */
button.jump-link,
button.jump-link:hover { display: inline; min-height: 0; padding: 10px 2px; margin: 0; background: none; box-shadow: none; border: 0; border-radius: 4px; color: var(--b-strong); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.jump-link::after { content: "\2193"; margin-left: 4px; text-decoration: none; display: inline-block; }
.coach-foot-note button.jump-link::after { content: "\2191"; }
button.jump-link:hover { background: var(--b-tint); }
.coach .delta { font: 400 16px/1.6 var(--ui); color: var(--ink); }
.coach .delta s { color: var(--p-strong); text-decoration-color: var(--p-strong); }
.coach .delta ins { text-decoration: none; background: var(--g-tint); color: var(--g-strong); font-weight: 600; padding: 0 2px; }
/* After a pass that followed the dialogue: "You got here yourself; the C1 version only changes 6 words." */
.c1-version .got-here { margin: 0 0 var(--s-3); font: 600 15px/1.5 var(--ui); color: var(--g-strong); }
@media (max-width: 560px) {
  .coach .turn { padding: var(--s-3); }
  .coach .frame { font-size: 18px; }
  .coach .frame { white-space: normal; }
  .coach .frame .gap { min-width: 90px; }
}

/* The coach card of an idea point (a fixed template: coach.js cardOf()): the item, ✓ / ✗ rows with my
   own words, "See it done" (two examples, the job in bold, the shape), one coach line, the frame. */
.coach .turn.card { gap: 10px; }
.coach .card-title { font: 700 16px/1.35 var(--display) !important; }
.coach .card-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 400 15px/1.45 var(--ui); }
.coach .card-parts li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.coach .card-parts .mark { width: 20px; flex: none; font-weight: 700; }
.coach .card-parts li.ok .mark { color: var(--g-strong); }
.coach .card-parts li.no .mark, .coach .card-parts .missing { color: var(--p-strong); }
.coach .see-it { border-top: 1px solid var(--rule); padding-top: 8px; display: grid; gap: 6px; }
.coach .see-it > summary { font: 700 13px/1.3 var(--ui); color: var(--y-strong); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.coach .see-it > p { margin: 0; font: 400 15px/1.5 var(--text); }
.coach .see-it > p b { background: var(--y-tint); font-weight: 700; padding: 0 2px; }
.coach .see-it .shape { font: 600 14px/1.4 var(--ui) !important; color: var(--pencil); }
.coach .card-line { border-top: 1px solid var(--rule); padding-top: 8px; }
.coach .card-line.yes { color: var(--g-strong); }
.coach .card-line b { font-family: var(--display); }
.coach .q-label { font-weight: 700; color: var(--pencil); }
.coach .coach-habit { margin: 0; font: 500 13px/1.4 var(--ui); color: var(--pencil); }
/* The card never grows wider than the panel: a long frame chip wraps (the gap stays an underline). */
.coach, .coach .turn, .coach .see-it, .coach .frames { min-width: 0; }
.coach .frame { white-space: normal; overflow-wrap: anywhere; }

/* ---- Fix it together as a chat (public/coach.js) ----
   Coach bubbles on the left (sheet, hairline border, a small pink dot + "Coach"); my side on the right
   (blue tint, "You"). The newest coach bubble is full strength with a soft pink left edge; older
   bubbles stay at 70%. The end of my sentence: my words in Literata, the new words in bold, the gap
   as a thick underline. */
.coach .coach-head { margin: 0; font: 600 14px/1.4 var(--ui); color: var(--ink); }
.coach .chat { display: grid; gap: 10px; min-width: 0; }
.coach .bubble { max-width: 94%; min-width: 0; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; display: grid; gap: 6px; }
.coach .bubble .who { display: flex; align-items: center; gap: 6px; font: 700 12px/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--pencil); }
.coach .bubble .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-strong); font-style: normal; }
.coach .bubble p { margin: 0; font: 400 16px/1.5 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.coach .bubble q { font-style: normal; quotes: "‘" "’"; background: var(--p-tint); padding: 0 3px; border-radius: 3px; }
.coach .bubble .small { font: 500 13px/1.4 var(--ui); color: var(--pencil); }
.coach .bubble.coach-says { justify-self: start; background: var(--sheet); border: 1px solid var(--rule); opacity: .7; }
.coach .bubble.coach-says.newest { opacity: 1; border-left: 4px solid var(--p-hl); }
.coach .bubble.you-say { justify-self: end; background: var(--b-tint); }
.coach .bubble.you-say .who { justify-content: flex-end; }
.coach .bubble.you-act { justify-self: stretch; max-width: 100%; }
.coach .bubble .act-text { font: 500 14px/1.4 var(--ui); color: var(--ink); }
.coach .bubble .answer { width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--b-strong); border-radius: var(--r-chip); background: var(--sheet); font: 400 16px/1.5 var(--ui); color: var(--ink); }
.coach .ending-label { font: 600 13px/1.4 var(--ui) !important; color: var(--pencil) !important; }
.coach .ending { font: 400 17px/1.6 var(--text) !important; padding: 8px 10px; background: var(--y-tint); border-radius: var(--r-chip); }
.coach .ending .added { font-family: var(--display); font-weight: 700; }
.coach .ending .replaced { color: var(--p-strong); text-decoration-color: var(--p-strong); }
.coach .ending .gap { display: inline-block; min-width: 90px; height: 1em; border-bottom: 3px solid var(--ink); vertical-align: baseline; margin-left: 2px; }
.coach .bubble-links { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 18px; }
.coach .see-example > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font: 600 14px/1.4 var(--ui); color: var(--b-strong); list-style: none; }
.coach .see-example > summary::-webkit-details-marker { display: none; }
.coach .see-example[open] { flex-basis: 100%; display: grid; gap: 6px; }
.coach .see-example > p { font: 400 15px/1.5 var(--text) !important; }
.coach .see-example > p b { background: var(--y-tint); padding: 0 2px; }
.coach .see-example .shape { font: 600 14px/1.4 var(--ui) !important; color: var(--pencil) !important; }
.coach .bubble .delta { font: 400 15px/1.6 var(--ui); }
.coach .ending .nobreak { white-space: nowrap; }
/* The small slips: one point, a short row per slip (my words, then what is wrong). */
.coach .slip-list { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font: 400 15px/1.5 var(--ui); color: var(--ink); }
.coach .slip-list li { overflow-wrap: anywhere; }
.coach .slip-list li::marker { color: var(--p-strong); }
/* "Show me the answer": the sentence, in the writing font, on the yellow of a model. */
.coach .bubble .answer-text { font: 400 17px/1.6 var(--text); padding: 8px 10px; background: var(--y-tint); border-radius: var(--r-chip); }
/* The words that are not in my own sentence: bold, like the new words of an ending line. */
.coach .bubble .answer-text b { font-family: var(--display); font-weight: 700; }

/* ---- Coaching check, 2026-10-22 (COACHING-CHECK.md) ---- */

/* "What the check looks at" (M1): the fourth part of the opened skill card, after the Tip and before the
   Useful language, with the same small yellow label and hairline rule as the other parts. A folded
   details element: closed on phones (today.js drawCheckLooks()), open from 560px. */
.skill .more-body > .check-looks {
  order: 6;
  padding-top: var(--s-4);
  border-top: 1px solid var(--skill-rule);
  font-size: 15px;
}
.skill .chips { order: 7; }
.skill .chip-status { order: 8; }
.skill .check-looks > .check-looks-toggle {
  display: flex;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 28px;
  cursor: pointer;
  font-family: var(--ui);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--y-strong);
}
.skill .check-looks > .check-looks-toggle:hover { background: none; box-shadow: none; text-decoration: underline; }
.skill .check-looks > .check-looks-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s;
}
.skill .check-looks > .check-looks-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
.skill .check-looks ul { margin: var(--s-2) 0 0; padding-left: 18px; }
.skill .check-looks ul[hidden] { display: none; }
.skill .check-looks li { margin: 2px 0; }
.skill .check-looks li::marker { color: var(--y-strong); }
@media (pointer: coarse) { .skill .check-looks > .check-looks-toggle { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .skill .check-looks > .check-looks-toggle::after { transition: none; } }

/* "I don't understand" replies (M3): a slip like the example, with the label "Another way" and the
   folded Helpful / Not helpful vote under it. */
.item .explain-replies { display: grid; gap: var(--s-2); }
.item .explain-replies:empty { display: none; }
.item .explain-reply {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow-wrap: anywhere;
}
.item .explain-reply > span { display: block; font-size: 12px; font-weight: 600; color: var(--pencil); }
.item .explain-reply:focus { outline: 2px solid var(--pen); outline-offset: 2px; }
.item .explain-status { margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--pencil); }
.item .explain-status:empty { display: none; }

/* "Words that could do this job" (S4): up to 3 violet chips under a vocabulary point. */
.item .item-words { margin-top: var(--s-3); }
.item .item-words[hidden] { display: none; }
.item .item-words > .label { margin: 0 0 var(--s-1); color: var(--v-strong); }

/* A change in the C1 version that adds an idea I never wrote (S12): a small tag under the words. */
.changes .new-idea {
  grid-column: 2;
  justify-self: start;
  padding: 1px 8px;
  border-radius: var(--r-tag);
  background: var(--b-tint);
  color: var(--b-strong);
  font: 600 12px/1.5 var(--ui);
}

/* The extras that never stop a pass, in "Fix it together" (M5): a quiet list under the chat. */
.coach .coach-optional {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  font: 400 14px/1.5 var(--ui);
  color: var(--pencil);
}
.coach .coach-optional-title { margin: 0 0 var(--s-1); font-weight: 700; color: var(--b-strong); }
.coach .coach-optional ul { margin: 0; padding-left: 18px; }
.coach .coach-optional li { margin: 2px 0; overflow-wrap: anywhere; }
.coach .coach-optional q { quotes: none; font-family: var(--text); color: var(--ink); background: var(--marker-soft); border-radius: 3px; padding: 0 3px; }

/* The right words for a slip (from the records): after its row, or one line under the list for the rest. */
.coach .right-inline:empty { display: none; }
.coach .right-inline { color: var(--pencil); font-size: 14px; }
.coach p.right-rest { margin: 6px 0 0 18px; }
.coach .right-inline s { color: var(--pencil); text-decoration-color: var(--p-strong); }
.coach .right-inline q.right, .coach .coach-optional q.right { quotes: none; font-family: var(--text); background: var(--g-tint); color: var(--g-strong); border-radius: 3px; padding: 0 3px; font-weight: 600; }

/* The folded vote on a coach line and on a Think first result (M4, F6): quiet, after the text. */
.coach .bubble .fb { margin-top: var(--s-2); }
.think-panel .t-vote { margin-top: var(--s-3); }
.think-panel .t-vote[hidden] { display: none; }

/* ==== Practice (the thinking moves) ==== The Practice page (practice.html, practice-page.js) and the coach's offer
   on a stuck point (public/coach.js). Pink = the habit, like My ledger. Built from design/practice-sketch.html. */
/* The coach's offer: the newest bubble of a stuck point, two actions. */
.pr-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; }
.pr-offer .btn { padding-inline: 18px; }
@media (max-width: 560px) { .pr-offer .btn { width: 100%; } }

/* The offer in the "What to fix" list of a skill without Fix it together (public/today.js, drawPractice()): under a
   stuck item one quiet line and the button; "Carry on your practice" when one was started; after a Ready practice
   the line says what to do now. A hairline above, no box: the item is the card.
   The same offer sits under a Free write note (public/practice-offer.js, a `.note`). */
:is(.item, .note) .pr-today { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--rule); }
:is(.item, .note) .pr-today[hidden] { display: none; }
:is(.item, .note) .pr-today-line { flex: 1 1 15em; margin: 0; font-size: var(--fs-small); color: var(--pencil); }
:is(.item, .note) .pr-today.is-after .pr-today-line { color: var(--ink); font-weight: 600; }
:is(.item, .note) .pr-today .btn { flex: none; padding-inline: 18px; }
:is(.item, .note) .pr-today-status { flex: 1 0 100%; margin: 0; font-size: var(--fs-small); color: var(--pencil); }
:is(.item, .note) .pr-today-status:empty { display: none; }
:is(.item, .note) .pr-today-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 14px/1.4 var(--ui); color: var(--b-strong); }
:is(.item, .note) .pr-today-link:hover { text-decoration: underline; }
@media (max-width: 560px) { :is(.item, .note) .pr-today .btn { width: 100%; } }

/* ---- The Practice page: Made for you, the other moves, my past practice ---- */
main.page > section.pr-made { padding: 0; overflow: hidden; background: var(--c-tint); border: 2px solid var(--c-hl); }
.pr-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 12px; padding: 10px var(--s-5); background: var(--c-hl); color: var(--band-ink); }
.pr-band-label { display: inline-flex; align-items: center; gap: 10px; font: 700 17px/1.25 var(--ui); }
.pr-band-label::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i-target) center / contain no-repeat; mask: var(--i-target) center / contain no-repeat; }
.pr-band-meta { font: 600 13px/1.25 var(--ui); }
.pr-made-body { display: grid; justify-items: start; gap: var(--s-3); padding: var(--s-5); }
.pr-made h2 { margin: 0; font-size: 26px; line-height: 1.4; }
.pr-made h2 span { padding: 0 4px 0 0; background: linear-gradient(transparent 56%, var(--c-under) 56%, var(--c-under) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pr-why { margin: 0; max-width: 52ch; font-size: 16px; color: var(--ink); }
.pr-path { width: 100%; margin: var(--s-2) 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pr-path li { display: grid; justify-items: center; gap: 6px; text-align: center; font: 600 13px/1.25 var(--display); color: var(--ink); }
.pr-path .num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sheet); color: var(--c-strong); font: 700 12px/1 var(--ui); box-shadow: inset 0 0 0 1.5px var(--c-hl); }
.pr-sub { margin: var(--s-3) 0 calc(-1 * var(--s-2)); font-size: var(--fs-h3); }
.pr-title { flex: 1 1 auto; min-width: 0; }
.pr-tag { flex: none; padding: 2px 8px; border-radius: var(--r-tag); font: 700 13px/1.4 var(--ui); }
.pr-tag.practising { background: var(--y-tint); color: var(--y-strong); }
.pr-tag.ready { background: var(--g-tint); color: var(--g-strong); }
.pr-meta { flex: none; font: 500 13px/1.4 var(--ui); color: var(--pencil); }
.pr-row-body { display: grid; justify-items: start; gap: var(--s-3); }
.pr-row-body p { margin: 0; }
.pr-past { width: 100%; margin: 0; padding: 0; list-style: none; display: grid; }
.pr-past li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: var(--s-2) 0; border-top: 1px solid var(--rule); }
.pr-past span { color: var(--pencil); font-size: var(--fs-small); }
@media (max-width: 560px) {
  .pr-made-body .btn, .pr-row-body .btn { width: 100%; }
  .pr-made h2 { font-size: 24px; }
  .pr-band { padding: 10px var(--s-4); }
  .pr-made-body { padding: var(--s-4); }
}
@media (max-width: 420px) {
  .pr-path { gap: 2px; }
  .pr-path li { font-size: 12px; }
}

/* ---- The five steps (Learn's frame, in the page colour) ---- */
main.page > section.pr-stage { padding: var(--s-5) var(--s-6) var(--s-6); }
.pr-stage .learn-top { margin-bottom: var(--s-4); }
.pr-bar { margin: 0 0 var(--s-3); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pr-bar li { display: grid; gap: 6px; min-width: 0; font: 600 12px/1.3 var(--ui); color: var(--pencil); }
.pr-bar li::before { content: ""; height: 8px; border-radius: 4px; background: var(--rule); }
.pr-bar li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-bar li.done { color: var(--g-strong); }
.pr-bar li.done::before { background: var(--g-hl); }
.pr-bar li.now { color: var(--ink); font-weight: 700; }
.pr-bar li.now::before { background: var(--c-hl); box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--c-strong); }
.pr-count { margin: 0 0 var(--s-5); font: 700 14px/1.3 var(--display); color: var(--c-strong); }
.pr-count.done { color: var(--g-strong); }
.is-ready .learn-leave { display: none; }
.is-ready .learn-path { text-align: left; }
.pr-stage h2.learn-prompt { margin-bottom: var(--s-3); }
.pr-stage .learn-meaning { color: var(--pencil); margin-bottom: var(--s-4); }
.pr-stage .learn-slip { margin-bottom: var(--s-4); }
.pr-stage .learn-slip-label + .pr-text + .learn-slip-label { margin-top: var(--s-2); }
.pr-stage .learn-slip .pr-text + .pr-text { padding-top: var(--s-2); border-top: 1px solid var(--rule); }
.pr-text { margin: 0; font: 400 17px/1.6 var(--text); overflow-wrap: anywhere; }
.pr-text b, .pr-text .new { padding: 0 2px; border-radius: 3px; background: var(--y-tint); font-weight: 700; }
.pr-shape { margin: calc(-1 * var(--s-2)) 0 var(--s-5); font: 500 14px/1.5 var(--ui); color: var(--pencil); }
.pr-shape b { color: var(--ink); }
.pr-pair { display: grid; gap: var(--s-2); margin: 0 0 var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.pr-pair-row { display: grid; gap: 4px; padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.pr-pair-row.fix { background: var(--g-tint); box-shadow: none; }
.pr-pair-row.fix .learn-slip-label { color: var(--g-strong); }
.pr-pair-note { margin: var(--s-1) 0 0; font: 500 14px/1.5 var(--ui); color: var(--pencil); }
.pr-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-2); }
/* The C1 (or B2) version of my own Practice sentence: a quiet link under the coach's bubble, then a card. */
.pr-c1 { margin-top: var(--s-2); display: grid; justify-items: start; gap: 6px; }
.pr-c1-card { width: 100%; padding: var(--s-3) var(--s-4); border-radius: var(--r-card); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--g-hl); display: grid; gap: var(--s-2); }
.pr-c1-card .label { margin: 0; font-weight: 700; color: var(--g-strong); }
.pr-c1-card .changes { margin-top: 0; }
.pr-actions[hidden] { display: none; }
@media (max-width: 560px) {
  main.page > section.pr-stage { padding: var(--s-4); }
  .pr-stage .btn { width: 100%; }
  .pr-text { font-size: 16px; }
}
/* My own colour on what is chrome (hover, picked); right stays green and not yet stays pink. */
.pr-stage .learn-option:hover:not(:disabled) { background: var(--c-tint); box-shadow: inset 0 0 0 1px var(--c-hl), inset 0 -2px 0 var(--c-hl); }
.pr-options { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin-bottom: var(--s-4); }
.pr-option { align-items: flex-start; padding-block: 12px; font-family: var(--text); font-weight: 400; font-size: 16px; line-height: 1.55; text-align: left; }
.pr-option.right::after, .pr-option.wrong::after { margin-top: 5px; }
.pr-stage .learn-feedback { margin-bottom: var(--s-4); }
.pr-stage .learn-feedback p { margin: 0; }

/* Finish it: the start of the sentence is fixed, I type the rest in the same paragraph. */
.pr-finish { margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--rule); border-radius: var(--r-btn); background: var(--sheet); cursor: text; }
.pr-finish:focus-within { border-color: var(--pen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 18%, transparent); }
.pr-sentence { margin: 0; font: 400 18px/1.7 var(--text); overflow-wrap: anywhere; }
.pr-prefix { font-weight: 700; }
.pr-fill { outline: none; }
.pr-fill:empty::before { content: attr(data-ph); color: var(--pencil); opacity: .8; font: 400 16px/1.7 var(--ui); }
.pr-nudge { margin: var(--s-3) 0 0; font: 500 14px/1.4 var(--ui); color: var(--pencil); }
.pr-nudge[hidden] { display: none; }
.pr-coach { margin-bottom: var(--s-4); }
.pr-coach .bubble { max-width: 100%; }
/* The coach's answer in a writing step: a right answer is green with a check ("Right!", same as the Spot it
   feedback), a not-yet is the calm pink tint. No thick side stripe: a hairline border all round. */
.pr-coach .bubble.coach-says.newest { border: 1.5px solid var(--rule); }
.pr-coach .pr-lead { display: inline-flex; align-items: center; gap: 6px; font: 800 17px/1.4 var(--display); }
.pr-coach .pr-lead::before { content: ""; width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.pr-coach .pr-after { font: 500 14px/1.45 var(--ui); color: var(--ink); opacity: .8; }
.pr-coach.pr-right .bubble.coach-says.newest { background: var(--g-tint); border-color: var(--g-hl); }
.pr-coach.pr-right .bubble .dot { background: var(--g-strong); }
.pr-coach.pr-right .bubble .who { color: var(--g-strong); }
.pr-coach.pr-right .pr-lead { color: var(--g-strong); }
.pr-coach.pr-notyet .bubble.coach-says.newest { background: var(--p-tint); border-color: var(--p-hl); }
.pr-coach.pr-notyet .pr-lead { color: var(--p-strong); }
.pr-coach.pr-notyet .pr-lead::before { -webkit-mask-image: var(--i-again); mask-image: var(--i-again); }
.pr-stage .learn-write textarea:focus { box-shadow: inset 0 0 0 2px var(--pen); }
.pr-stage .learn-write { margin-bottom: 0; }
.pr-write-label { font: 700 14px/1.3 var(--display); color: var(--ink); }
.pr-slip-weak { background: var(--p-tint); }
.pr-slip-weak .learn-slip-label { color: var(--p-strong); }
.pr-hint-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.pr-hint-row .hint-btn { margin: 0; }
.pr-hints { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pr-hints li { padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); background: var(--y-tint); font-size: 15px; overflow-wrap: anywhere; }
.pr-hints[hidden] { display: none; }

/* Ready: like the "Done for today" card, with my three right answers in my own words. */
.pr-ready { display: grid; justify-items: start; gap: var(--s-3); }
.pr-tick { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--g-tint); }
.pr-tick::before { content: ""; width: 28px; height: 28px; background: var(--g-strong); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.pr-ready-title { margin: 0; font-size: var(--fs-title); line-height: 1.25; }
.pr-ready-title span { padding: 0 4px 0 0; background: linear-gradient(transparent 56%, var(--g-under) 56%, var(--g-under) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pr-ready-line { margin: 0; max-width: 56ch; }
.pr-proof { width: 100%; margin: var(--s-2) 0; padding: 0; list-style: none; display: grid; border-top: 1px solid var(--rule); }
.pr-proof li { display: grid; gap: 2px; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.pr-proof-k { display: inline-flex; align-items: center; gap: 6px; font: 700 13px/1.4 var(--ui); color: var(--g-strong); }
.pr-proof-k::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.pr-proof q { quotes: "‘" "’"; font: 400 16px/1.6 var(--text); }
.pr-ready .btn { padding-block: 10px; line-height: 1.3; }
@media (max-width: 560px) { .pr-ready .btn { width: 100%; } }

/* The home parts (title, Made for you, other moves, past practice) give way to a practice on screen. */
main.page.in-stage [data-home] { display: none !important; }
#others { display: contents; } /* the move rows are flex items of the page, like cards */

/* =====================================================================
   Moments (public/moments.js, DESIGN.md "Moments"): what I see when I really move forward. Five sizes:
   tiny (a right answer pops), small (a green highlighter sweeps over my new words), medium (the stroke
   draws itself and highlighter strokes burst out), big (a bigger burst), none (while I write, and at
   "not yet"). The sounds are in moments.js. Reduce motion: no drawing and no flying strokes.
   ===================================================================== */
/* The element's own stroke draws itself (a verdict word, a title): its background grows from the left. */
.moment-draw {
  background-repeat: no-repeat !important;
  animation: moment-draw 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes moment-draw { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
/* A green highlighter sweeps over words that had none, and stays. */
.moment-swipe {
  background-image: linear-gradient(transparent 56%, var(--g-under) 56%, var(--g-under) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
  animation: moment-draw 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .moment-draw, .moment-swipe { animation: none; }
}
/* The short strokes that burst out (drawn by moments.js into this layer, removed when they land). */
.moment-fx { position: fixed; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
.moment-fx i { position: absolute; display: block; border-radius: 3px; will-change: transform, opacity; }

/* Today: the line under "Meets C1!" (how close "secure" is, or "Secure!"), then the stage (or the whole ladder) done. */
.verdict-box .verdict-next { color: var(--ink); font-weight: 600; }
.verdict-news { margin: var(--s-2) 0 0; font: 700 16px/1.45 var(--display); color: var(--ink); }
/* The warm-up: the coach's second sentence after "Right!" or "Not yet.", quieter than the verdict. */
.daily-warmup .dw-verdict .dw-after { font-weight: 500; }
/* Free write: a kind of mistake retired by this text, on the band card. */
.retired-news { margin: var(--s-2) 0 0; font: 500 15px/1.45 var(--ui); color: var(--ink); }
.retired-news span { font: 700 16px/1.45 var(--display); }
/* The day's to-do, folded: "Day done!" in bold. */
.todo-day-done { font-weight: 700; color: var(--ink); }
.todo-next-done b { color: var(--ink); }


/* =====================================================================
   Session (public/session.js, SESSION-PLAN.md slice 3a; approved sketch design/session-sketch.html): Today as a
   coached session. A start screen ("Your session today": the coach's line, the steps, one Start button), one
   screen per step with a slim bar (pause, the route, the sound switch) and one button at the bottom, and a
   "Day done!" screen. Slice 3a only shows and hides the parts of the long page; every rule that touches an
   existing part is under body.session-on, so with the switch off nothing here applies. Each step takes the
   highlighter of the page it belongs to (orange warm-up, pink practice, yellow the skill, violet the word).
   ===================================================================== */
:root {
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  --i-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H2v6h4l5 4z'/%3E%3Cpath d='m22 9-6 6M16 9l6 6'/%3E%3C/svg%3E");
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* The part of the day a stop or a route segment stands for. */
.session-stop.k-warmup,   .session-route li.k-warmup   { --k-hl: var(--o-hl); --k-tint: var(--o-tint); --k-strong: var(--o-strong); --k-icon: var(--i-warmup); }
.session-stop.k-practice, .session-route li.k-practice { --k-hl: var(--p-hl); --k-tint: var(--p-tint); --k-strong: var(--p-strong); --k-icon: var(--i-target); }
.session-stop.k-task,     .session-route li.k-task     { --k-hl: var(--y-hl); --k-tint: var(--y-tint); --k-strong: var(--y-strong); --k-icon: var(--i-today); }
.session-stop.k-word,     .session-route li.k-word     { --k-hl: var(--v-hl); --k-tint: var(--v-tint); --k-strong: var(--v-strong); --k-icon: var(--i-words); }
.session-stop.k-level,    .session-route li.k-level    { --k-hl: var(--g-hl); --k-tint: var(--g-tint); --k-strong: var(--g-strong); --k-icon: var(--i-progress); }

/* ---- What shows on which screen. These only hide: a part that hides itself (the hidden attribute) stays hidden. ---- */
/* The long page's to-do card is not part of a session; "See the whole list" brings it back on the start screen. */
body.session-on #todo { display: none; }
body.session-on.s-start.show-todo #todo { display: block; }
body.session-on.s-start #daily-warmup,
body.session-on.s-start #grid,
body.session-on.s-start #rest,
body.session-on.s-start #rest-fix,
body.session-on.s-done #daily-warmup,
body.session-on.s-done #grid,
body.session-on.s-done #rest,
body.session-on.s-done #rest-fix,
body.session-on.s-warmup #ladder,
body.session-on.s-warmup #grid,
body.session-on.s-warmup #rest,
body.session-on.s-warmup #rest-fix,
body.session-on.s-task #ladder,
body.session-on.s-task #daily-warmup { display: none; }
/* A step is full focus: no sidebar, no tab bar. The start and Day done screens keep them. */
body.session-on.s-step > .site-header { display: none; }
body.session-on.s-step { padding-left: 0; padding-bottom: 0; }
/* The screens that are not the task are one centred column. */
body.session-on.s-start .session,
body.session-on.s-start #ladder,
body.session-on.s-start .session-after,
body.session-on.s-done .session-done,
body.session-on.s-done #ladder,
body.session-on.s-done .session-after { max-width: 688px; margin-inline: auto; }
body.session-on.s-warmup .daily-warmup { max-width: 640px; margin-inline: auto; }
/* In a session the button at the bottom says what comes next; the warm-up's own "Next on your to-do" row is not needed. */
body.session-on .daily-warmup .todo-next { display: none; }

/* ---- The slim bar: pause, the route of today's steps, the sound switch ---- */
.session-bar { position: sticky; top: 0; z-index: 15; background: var(--paper); border-bottom: 1px solid var(--rule); }
.session-bar-in { max-width: 760px; margin: 0 auto; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--s-3); padding: 8px 12px 4px; }
.session-ibtn { display: grid; place-items: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; background: transparent; color: var(--pencil); box-shadow: none; }
.session-ibtn::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.session-ibtn.is-pause { --icon: var(--i-x); }
.session-ibtn.is-sound { --icon: var(--i-sound); }
.session-ibtn.is-sound.is-muted { --icon: var(--i-mute); color: var(--p-strong); }
.session-ibtn:hover { background: color-mix(in srgb, var(--rule) 60%, transparent); color: var(--ink); }
.session-ibtn:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; }
.session-route { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.session-route li { display: grid; gap: 5px; min-width: 0; }
.session-route .bar { position: relative; height: 8px; border-radius: 4px; background: var(--rule); overflow: hidden; transition: background-color 300ms; }
.session-route .bar i { position: absolute; inset: 0; background: var(--g-hl); transform: scaleX(0); transform-origin: left center; transition: transform 560ms cubic-bezier(0.16, 1, 0.3, 1); }
.session-route li.now .bar { background: var(--k-hl); }
.session-route li.done .bar i { transform: scaleX(1); }
.session-route li.missed .bar { background: color-mix(in srgb, var(--rule) 70%, var(--pencil)); }
.session-route .lab { display: flex; justify-content: center; align-items: center; gap: 4px; font: 600 12px/1.3 var(--ui); color: var(--pencil); white-space: nowrap; }
.session-route li.now .lab { color: var(--k-strong); font-weight: 700; }
.session-route li.done .lab { color: var(--g-strong); }
.session-route li.done .lab::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.session-note { margin: 0; padding: 0 16px 8px; text-align: center; font: 400 13px/1.4 var(--ui); color: var(--pencil); }
/* Narrow phones: the bars carry the route, and the note line names the step. */
@media (max-width: 479px) {
  .session-route .lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .session-route .bar, .session-route .bar i { transition: none; }
}

/* ---- The start screen ---- */
.session { margin-top: var(--s-4); padding: 24px 24px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.session-title, .session-done-title { margin: 0 0 var(--s-2); width: fit-content; max-width: 100%; font: 700 30px/1.15 var(--display); letter-spacing: -0.02em; }
.session-title:focus, .session-done-title:focus { outline: none; }
.session-title span { padding: 0 3px; background: linear-gradient(transparent 52%, var(--y-under) 52%, var(--y-under) 92%, transparent 92%); }
.session-coach { display: flex; gap: 10px; align-items: baseline; max-width: 58ch; margin: 0 0 var(--s-5); font: 400 16px/1.5 var(--ui); }
.session-coach::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--y-hl); box-shadow: 0 0 0 3px var(--y-tint); transform: translateY(-1px); }
.session-stops { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; }
.session-stop { position: relative; display: grid; grid-template-columns: 36px 1fr auto; gap: 14px; align-items: start; padding: 10px 0; }
/* The line that joins one stop to the next, from under its circle to the next circle. */
.session-stop:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 50px; bottom: -6px; width: 2px; border-radius: 1px; background: var(--rule); }
.stop-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--k-tint); box-shadow: inset 0 0 0 1.5px var(--k-hl); }
.stop-ic::before { content: ""; width: 18px; height: 18px; background: var(--k-strong); -webkit-mask: var(--k-icon) center / contain no-repeat; mask: var(--k-icon) center / contain no-repeat; }
.session-stop.is-next .stop-ic { box-shadow: inset 0 0 0 3px var(--k-hl); }
.session-stop.is-done .stop-ic { background: var(--g-strong); box-shadow: none; }
.session-stop.is-done .stop-ic::before { background: var(--sheet); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.session-stop.is-off .stop-ic { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--rule); }
.session-stop.is-off .stop-ic::before { background: var(--pencil); }
.stop-text { display: grid; min-width: 0; }
.stop-name { font: 700 16px/1.3 var(--display); }
.stop-why { margin-top: 2px; font: 400 14px/1.4 var(--ui); color: var(--pencil); }
.session-stop.is-done .stop-name, .session-stop.is-off .stop-name { color: var(--pencil); }
.session-stop.is-done .stop-why { color: var(--g-strong); font-weight: 600; }
.stop-min { margin-top: 3px; padding: 2px 8px; border-radius: var(--r-tag); background: var(--k-tint); color: var(--k-strong); font: 700 12px/1.4 var(--ui); white-space: nowrap; }
.session-stop.is-done .stop-min, .session-stop.is-off .stop-min { display: none; }
.session-startbtn { width: 100%; min-height: 56px; font-size: 17px; }
.session-dim { font-weight: 500; opacity: 0.85; }
@media (max-width: 560px) {
  .session { padding: 18px 16px 16px; }
  .session-title, .session-done-title { font-size: 25px; }
  .session-stop { grid-template-columns: 36px 1fr; }
  .stop-min { grid-column: 2; justify-self: start; margin-top: 0; }
}

/* Under the journey card: the extras, the way to the whole list or the whole page, and the Day done buttons. */
.session-after { margin-top: var(--s-4); }
/* The extras are a white card like the one above, with the same rows as the to-do (todoParts.row). */
.session-extras { margin: 0; padding: 20px 24px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.session-extras-title { margin: 0 0 var(--s-3); font: 700 var(--fs-h2)/1.3 var(--display); }
.session-foot { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); }
.session-foot .session-link { flex: 1 1 180px; }
@media (max-width: 560px) { .session-extras { padding: 16px; } }
.session-see { margin: 0; font: 600 16px/1.5 var(--ui); color: var(--g-strong); }
.session-done-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--s-5); }
@media (max-width: 560px) { .session-done-btns .btn { flex: 1 1 100%; } }

/* ---- The one button at the bottom of a step ---- */
.session-act { display: flex; max-width: 640px; margin: 0 auto; padding: var(--s-4) 0 var(--s-8); }
.session-act .btn { flex: 1 1 auto; }
.session-arrow::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; }
@media (max-width: 900px) {
  .session-act { position: sticky; bottom: 0; z-index: 12; margin-inline: -16px; padding: var(--s-3) 16px calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--rule); }
}

/* ---- The Day done screen ---- */
.session-done { margin-top: var(--s-6); }
.session-done-title { font-size: clamp(36px, 7vw, 52px); line-height: 1.05; letter-spacing: -0.035em; }
.session-done-title span { padding: 0 3px; background: linear-gradient(transparent 52%, var(--g-under) 52%, var(--g-under) 92%, transparent 92%); }
.session-done-sub { margin: 0 0 var(--s-5); font: 400 17px/1.5 var(--ui); }
.session-moved { margin: 0 0 var(--s-4); padding: 16px 20px; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.session-moved h2 { margin: 0 0 var(--s-2); font: 700 var(--fs-h3)/1.3 var(--display); }
.session-moved ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.session-moved li { display: flex; gap: 10px; font: 400 15px/1.45 var(--ui); }
.session-moved li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--g-hl); }
/* "Then and now" (public/then-now.js, DESIGN.md "Then and now"): my old sentence next to the one I wrote today for
   the same point, in my own words. A white card with a green highlighter title; the old sentence in pencil grey,
   today's in ink with its new words on the green stroke. Up to 560px the label sits above its sentence. */
.then-now {
  margin: var(--s-4) 0;
  padding: 18px var(--s-5);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  text-align: left;
}
.then-now-title {
  width: fit-content;
  margin: 0 0 var(--s-4) -4px;
  padding-inline: 4px;
  font: 700 var(--fs-h2)/1.25 var(--display);
  color: var(--ink);
  background: linear-gradient(transparent 56%, var(--g-under) 56%, var(--g-under) 94%, transparent 94%);
}
.then-now h3.then-now-title { font-size: var(--fs-h3); }
.tn-row { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: baseline; }
.tn-when { font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.tn-now .tn-when { color: var(--g-strong); }
.tn-row p { margin: 0; font: 400 18px/1.55 var(--text); overflow-wrap: anywhere; }
.tn-then p { color: var(--pencil); }
.tn-now p { color: var(--ink); }
.tn-new {
  padding-inline: 2px;
  margin-inline: -1px;
  background-image: linear-gradient(transparent 56%, var(--g-under) 56%, var(--g-under) 94%, transparent 94%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: slice;
  box-decoration-break: slice;
}
.tn-arrow { width: 18px; height: 18px; margin: 6px 0 6px 76px; background: var(--rule); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; transform: rotate(90deg); }
.tn-note { margin: var(--s-4) 0 0; font: 400 14px/1.5 var(--ui); color: var(--pencil); }
.todo .then-now { max-width: 520px; margin: var(--s-5) auto 0; }
@media (max-width: 560px) {
  .then-now { padding: var(--s-4); }
  .tn-row { grid-template-columns: 1fr; gap: 2px; }
  .tn-arrow { margin-left: 0; }
}

/* ---- The task step has two screens (slice 3b): the skill, then my writing ---- */
/* The two buttons of the long page that the button at the bottom of the step (and Day done) replace. */
body.session-on .session-hide { display: none; }
/* Learn: the skill card alone, in one column (a coached skill keeps its tabs there: The skill, Think first). */
body.session-on.t-learn .today-main,
body.session-on.t-learn .today-side > .feedback { display: none; }
body.session-on.t-learn .today { grid-template-columns: minmax(0, 1fr); max-width: 688px; margin-inline: auto; }
body.session-on.t-learn .today-side { position: static; max-height: none; overflow: visible; grid-column: 1; }
/* Write: no skill card and no tabs, only my writing. The feedback column is there once there is feedback: above my
   writing on a phone (so the verdict is the first thing seen), beside it from 1200px. */
body.session-on.t-write .today-side > #skill,
body.session-on.t-write .today-side > .side-tabs,
body.session-on.t-write .today-side > .think-panel,
body.session-on.t-write .today-side > .focus-card { display: none; }
body.session-on.t-write:not(.has-rail) .today { grid-template-columns: minmax(0, 1fr); max-width: 688px; margin-inline: auto; }
body.session-on.t-write:not(.has-rail) .today-side { display: none; }
@media (max-width: 1199px) {
  body.session-on.t-write .today-side > .feedback { order: 1; }
  body.session-on.t-write .today-main > .write-step { order: 2; }
  body.session-on.t-write .today-main > .skill-history { order: 3; }
}
/* The skill kit on the session's writing screen (session.js): the skill's title on a yellow band, then segmented tabs
   for what I need while I write: Useful language (violet, words), Example, Tip and My plan (orange, Think first).
   One flat sheet, like the other cards. Under 960px it sits above my writing; from 960px it is the right-hand panel
   next to it ("The right-hand panel", below). */
.session-strip { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.strip-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 8px 6px 16px; background: var(--y-tint); border-bottom: 1px solid color-mix(in srgb, var(--y-hl) 55%, transparent); }
.session-strip.is-folded .strip-row { border-bottom: 0; }
.strip-ic { flex: none; width: 20px; height: 20px; background: var(--y-strong); -webkit-mask: var(--i-today) center / contain no-repeat; mask: var(--i-today) center / contain no-repeat; }
.strip-head { flex: 1; min-width: 0; display: grid; gap: 1px; }
.strip-eyebrow { display: none; font: 700 12px/1.3 var(--ui); color: var(--y-strong); }
.strip-title { margin: 0; font: 700 16px/1.3 var(--display); overflow-wrap: anywhere; }
.session-strip .strip-toggle { flex: none; min-height: 40px; padding: 0 12px; background: transparent; border: 0; box-shadow: none; border-radius: var(--r-btn); color: var(--pen); font: 600 var(--fs-small)/1 var(--ui); cursor: pointer; }
.session-strip .strip-toggle:hover { background: var(--sheet); color: var(--pen-hover); box-shadow: none; }
.strip-body { padding: var(--s-3) var(--s-4) var(--s-4); }
/* The tabs are one segmented control: a pale track, the chosen tab a raised sheet with a stroke in its own colour. */
.kit-tabs { display: flex; gap: 2px; padding: 3px; margin: 0 0 var(--s-3); overflow-x: auto; scrollbar-width: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.kit-tabs::-webkit-scrollbar { display: none; }
.session-strip .kit-tab { flex: 1 0 auto; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--pencil); font: 600 var(--fs-small)/1 var(--ui); white-space: nowrap; cursor: pointer; --tab-c: var(--y-hl); }
.session-strip .kit-tab.is-phrases { --tab-c: var(--v-hl); }
.session-strip .kit-tab.is-think { --tab-c: var(--o-hl); }
.session-strip .kit-tab:hover { background: color-mix(in srgb, var(--sheet) 60%, transparent); color: var(--ink); box-shadow: none; }
.session-strip .kit-tab[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(27, 29, 36, 0.1), inset 0 -2px 0 var(--tab-c); }
.kit-panel { display: grid; gap: var(--s-3); }
.kit-panel:focus-visible { outline: 2px solid var(--pen); outline-offset: 4px; border-radius: 6px; }
.kit-panel > * { margin: 0; }
.kit-panel .model { padding: 12px 14px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; }
.kit-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.kit-hint { font-size: var(--fs-small); color: var(--pencil); }
/* The Think first card inside the kit is flat: the kit is already the sheet (the card look of the side panel is only for a direct child of it). */
.kit-panel > .think-panel { padding: 0; background: none; border: 0; }
.strip-body .chip-status { margin-top: var(--s-2); }
@media (hover: none) { .session-strip .kit-tab, .session-strip .strip-toggle { min-height: 44px; } }
/* Four tabs on a skill with Think first: a little tighter on a small phone so all four show without a swipe. */
@media (max-width: 400px) { .session-strip .kit-tab { padding: 0 5px; font-size: 13px; } }
/* On a phone the phrases are one row I swipe, so my writing stays near the top of the screen. */
@media (max-width: 560px) {
  .kit-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--s-4)); padding: 2px var(--s-4); }
  .kit-chips::-webkit-scrollbar { display: none; }
  .kit-chips > li { flex: none; }
}
/* A tab's content arrives with a small fade. */
@media (prefers-reduced-motion: no-preference) {
  .kit-panel > * { animation: kit-in 200ms ease both; }
}
@keyframes kit-in { from { opacity: 0; transform: translateY(4px); } }

/* ---- The right-hand panel of the writing screen (from 960px wide; the session step has no sidebar) ----
   My writing is the left column. The right column is one sticky panel under the slim bar: the skill kit, and once
   there is feedback a switch above it picks Help or Feedback, so I never scroll up and down between them (session.js
   sets has-rail, rail-both and rail-feedback). The same numbers are in side-by-side.js. Under 960px the kit sits
   above my writing and the feedback stays above it as before. */
.rail-switch { display: flex; gap: 2px; padding: 3px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 12px; }
.rail-switch .rail-btn { flex: 1; min-height: 38px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; color: var(--pencil); font: 600 14px/1 var(--ui); cursor: pointer; --rail-c: var(--y-hl); }
.rail-switch .rail-btn.is-feedback { --rail-c: var(--b-hl); }
.rail-switch .rail-btn:hover { background: var(--paper); color: var(--ink); box-shadow: none; }
.rail-switch .rail-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 -2px 0 var(--rail-c); }
@media (hover: none) { .rail-switch .rail-btn { min-height: 44px; } }
/* Help or Feedback, one at a time, once both exist: the kit and the coach are never stacked above my writing, on a
   phone as on a wide screen (together they took more than a screen before the first word of my text). */
body.session-on.t-write.rail-both:not(.rail-feedback) .today-side > .feedback,
body.session-on.t-write.rail-both.rail-feedback .today-side > .session-strip { display: none; }
@keyframes rail-in { from { opacity: 0; transform: translateX(10px); } }
@media (min-width: 960px) {
  body.session-on.t-write.has-rail > .col { max-width: 1120px; }
  body.session-on.t-write > .col > .page-message,
  body.session-on.t-write > .col > .budget-note { max-width: 688px; margin-inline: auto; }
  body.session-on.t-write.has-rail .today { grid-template-columns: minmax(0, 1fr) clamp(352px, 34vw, 440px); column-gap: var(--s-6); align-items: start; max-width: none; margin-inline: 0; }
  body.session-on.t-write.has-rail .today-main { display: flex; flex-direction: column; gap: var(--s-4); grid-column: 1; grid-row: 1; min-width: 0; }
  body.session-on.t-write.has-rail .today-side {
    display: flex; flex-direction: column; gap: var(--s-4); grid-column: 2; grid-row: 1; min-width: 0;
    position: sticky; top: calc(var(--session-bar-h, 0px) + var(--s-4)); align-self: start;
    max-height: calc(100dvh - var(--session-bar-h, 0px) - var(--s-8)); overflow-y: auto;
  }
  body.session-on.t-write.has-rail .today-main > *,
  body.session-on.t-write.has-rail .today-side > * { order: 0; margin: 0; min-width: 0; }
  body.session-on.t-write.has-rail #today-side.tabs-on { gap: var(--s-4); } /* a coached skill's tab rules would set it to 0 */
  body.session-on.t-write.has-rail .today-side > .feedback:empty { display: none; }
  body.session-on.t-write.has-rail .today-side .compare { grid-template-columns: minmax(0, 1fr); }
  /* The panel scrolls inside itself (the coach's newest line is brought into view there): the switch stays at its top,
     and what the panel scrolls to never lands under it. */
  body.session-on .rail-switch { position: sticky; top: 0; z-index: 3; box-shadow: 0 12px 0 var(--paper); } /* not Free write's own switch */
  body.session-on.t-write.has-rail .today-side { scroll-padding-top: calc(46px + var(--s-4)); }
  .strip-eyebrow { display: block; }
  .strip-row { padding-block: 12px; }
  .strip-title { font-size: 17px; }
  .strip-body { padding-top: var(--s-4); }
  /* The phrases are a list I scan and tap, one per row, with the save button on the right. */
  .kit-chips { display: grid; gap: 6px; }
  .kit-chips .chip { width: 100%; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 8px 8px 14px; font-size: 16px; border-radius: 10px; }
  .kit-chips .chip-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sheet); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v-strong) 30%, transparent); font-size: 16px; line-height: 1; }
  .kit-chips .chip.saved .chip-mark { background: color-mix(in srgb, var(--sheet) 22%, transparent); box-shadow: none; }
}
@media (min-width: 960px) and (hover: none) {
  body.session-on.t-write.has-rail .today-side { scroll-padding-top: calc(52px + var(--s-4)); }
}
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  body.session-on.t-write .session-strip,
  body.session-on.t-write.rail-both .today-side > .feedback { animation: rail-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both; }
}
/* On the skill screen the example and tips are the screen, not something to open: no button to fold them. */
body.session-on.t-learn #skill-more > summary { display: none; }

/* ---- Slice 3c ---- */
/* The pages a step opens (Practice, the level check) wear the session bar instead of the menu (session-frame.js). */
body.session-frame > .site-header { display: none; }
body.session-frame { padding-left: 0 !important; padding-bottom: 0 !important; } /* beats the sidebar and tab bar padding */
body.session-frame > main.page.col { margin-inline: auto !important; }
a.session-ibtn { text-decoration: none; }
/* A coached skill's feedback on the writing screen has no tab above it: a plain card all round. */
body.session-on.t-write #today-side.tabs-on > #verdict { border-radius: var(--r-card); }

/* ---- Slice 3d: Day done in full, and the session as the default ---- */
:root {
  --i-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
/* The skills I passed today light up on the journey card, one after the other, ending green. */
.bar .tick.lit { animation: tick-lit 1000ms cubic-bezier(0.16, 1, 0.3, 1) var(--lit-delay, 0ms) both; }
@keyframes tick-lit {
  0% { transform: scaleY(1); background: var(--rule); }
  40% { transform: scaleY(2.2); background: var(--g-hl); }
  100% { transform: scaleY(1); background: var(--g-hl); }
}
@media (prefers-reduced-motion: reduce) { .bar .tick.lit { animation: none; } }
/* "Then and now" on the Day done screen: the whole width of the column, like the cards around it. */
.session-after .then-now { max-width: none; margin: var(--s-4) 0 0; }
.session-tomorrow { display: flex; gap: 10px; align-items: flex-start; margin: var(--s-4) 0 var(--s-2); font: 400 15px/1.5 var(--ui); }
.stm-ic { flex: none; width: 18px; height: 18px; margin-top: 3px; background: var(--y-strong); -webkit-mask: var(--i-cal) center / contain no-repeat; mask: var(--i-cal) center / contain no-repeat; }

/* ---- The landing page (welcome.html, 2026-10-24; sketches design/landing-a-sketch.html and landing-b-sketch.html; for both ladders and with motion 2026-10-25) ----
   A visitor who is not signed in sees it at "/". The owner chose sketch A's opening (a sentence with the coach's
   mark, the question and the fixed sentence), then sketch B's ladder, a day, "Then and now", the three rules and
   the last call. It speaks to both ladders, B1 to B2 and B2 to C1. No sidebar and no tab bar: one wide column
   (max 1120px). Every colour is a token. Each part takes the highlighter of the part of the
   app it shows. Two things to know:
   - The level switch is pure CSS: the radios named "lp-level" and :has() on <main> show the B2 version of every part
     with data-for="b2" until the C1 option is checked, then the C1 version. It works without any script.
   - Motion lives only under html.lp-motion, which welcome.js adds when the device does not ask for reduced motion.
     Without that class the page is static and complete (no hidden sheet, every stroke drawn). */
body.pg-landing { --lp-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.lp-wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* The level switch: the version that is not chosen is gone. */
.pg-landing main:not(:has(input[name="lp-level"][value="c1"]:checked)) [data-for="c1"],
.pg-landing main:has(input[name="lp-level"][value="c1"]:checked) [data-for="b2"] { display: none; }

.lp-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 72px; }
.lp-top .brand { min-height: 44px; }
.lp-top-actions { display: flex; align-items: center; gap: var(--s-2); }
.lp-signin { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1 var(--ui); color: var(--ink); text-decoration: none; padding: 0 10px; border-radius: var(--r-chip); }
.lp-signin:hover { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
a.btn.lp-top-cta { min-height: 44px; padding: 0 var(--s-5); font-size: 15px; }
@media (max-width: 480px) { a.btn.lp-top-cta:not(.lp-top-open) { display: none; } }

/* The highlighter stroke, in any colour (--mark), also across a line break. */
.lp-hl {
  padding: 0 4px;
  margin: 0 -2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background: linear-gradient(transparent 58%, var(--mark, var(--y-under)) 58%, var(--mark, var(--y-under)) 94%, transparent 94%);
}
.lp-split h2 .lp-hl { --mark: var(--g-under); }

/* The opening: the words on the left, the level switch and the marked page on the right (stacked under 960px). */
.lp-hero { display: grid; gap: var(--s-8); align-items: center; padding: var(--s-7) 0 var(--s-8); }
@media (min-width: 960px) { .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 56px 0 72px; } }
.lp-hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 var(--s-5); max-width: 16ch; }
.lp-lead { font-size: 18px; line-height: 1.6; max-width: 46ch; margin: 0 0 var(--s-6); }
.lp-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.lp-cta a.btn { min-height: 52px; padding: 0 var(--s-6); font-size: 16px; }
.lp-cta-note { margin: var(--s-4) 0 0; font-size: 14px; color: var(--pencil); }
.lp-auth-note { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); background: var(--b-tint); color: var(--ink); font-size: 14px; max-width: 46ch; }
@media (max-width: 560px) { .lp-cta a.btn { width: 100%; } }

/* The level switch: two native radios drawn as one segmented control (the arrow keys work as they do for any radios). */
.lp-demo-col { display: grid; gap: var(--s-3); min-width: 0; max-width: 640px; }
@media (min-width: 960px) { .lp-demo-col { max-width: none; } }
.lp-level { margin: 0; padding: 0; border: 0; min-width: 0; }
.lp-level legend { padding: 0 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.lp-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--sheet); border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px var(--rule); }
.lp-opt { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-chip); font: 700 15px/1.2 var(--ui); color: var(--ink); cursor: pointer; transition: background-color 0.15s, color 0.15s, box-shadow 0.15s; }
.lp-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lp-opt:hover { box-shadow: inset 0 0 0 1.5px var(--rule); }
.lp-opt:has(input:checked) { background: var(--b-tint); color: var(--b-strong); box-shadow: inset 0 0 0 1.5px var(--b-hl); }
.lp-opt:has(input:focus-visible) { outline: 2px solid var(--pen); outline-offset: 2px; }

/* The marked page: three flat sheets, drawn the way the app shows them. */
.lp-demo { display: grid; gap: var(--s-3); margin: 0; }
.lp-version { display: grid; gap: var(--s-3); }
.lp-sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.lp-paper { padding: var(--s-4) var(--s-5) var(--s-5); }
.lp-paper-label { display: flex; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.lp-paper-label .lp-try { color: var(--p-strong); }
.lp-lines { margin: 0; font: 400 19px/34px var(--text); background: repeating-linear-gradient(transparent 0 33px, var(--rule) 33px 34px); }
.lp-mark { padding: 1px 2px; background-image: linear-gradient(var(--p-tint), var(--p-tint)); background-repeat: no-repeat; background-size: 100% 100%; text-decoration: underline wavy var(--p-strong); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.lp-pill {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 9px;
  vertical-align: 2px;
  background: var(--p-strong);
  color: var(--sheet);
  font: 700 11px/1 var(--ui);
}
.lp-coach { padding: var(--s-4) var(--s-5); }
.lp-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 var(--s-3); }
.lp-verdict b { font: 700 26px/1.2 var(--text); --mark: var(--p-under); }
.lp-verdict span { font-size: 15px; }
.lp-bubble { margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.lp-bubble small { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font: 700 11px/1 var(--ui); letter-spacing: 0.06em; color: var(--pencil); }
.lp-bubble small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p-hl); }
.lp-bubble p { margin: 0; font-size: 16px; }
.lp-bubble q { font-family: var(--text); quotes: "\2018" "\2019"; }
.lp-met { padding: var(--s-4) var(--s-5); background: var(--g-tint); border-color: color-mix(in srgb, var(--g-hl) 70%, var(--rule)); }
.lp-met .lp-word { display: inline-block; margin-bottom: var(--s-2); font: 700 26px/1.2 var(--text); --mark: var(--g-under); }
.lp-met p { margin: 0; font: 400 18px/1.6 var(--text); }
.lp-new { padding: 0 2px; background: linear-gradient(transparent 55%, var(--g-under) 55%, var(--g-under) 95%, transparent 95%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* From 960px the coach's reply is indented; the two writing sheets (the learner's and the "Meets" one) line up. */
@media (min-width: 960px) {
  .lp-coach { margin-left: var(--s-7); }
}
.lp-demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin: 0; font-size: 13px; color: var(--pencil); }
.lp-again { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-4); font-size: 14px; }
.lp-again::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-again) center / contain no-repeat; mask: var(--i-again) center / contain no-repeat; }

/* The ladder: one wide sheet, a column per stage (a row per stage under 900px). */
.lp-journey { margin: 0 0 var(--s-8); padding: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
@media (min-width: 960px) { .lp-journey { padding: var(--s-6) var(--s-7) var(--s-7); } }
.lp-journey-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 var(--s-5); }
.lp-journey-head h2 { margin: 0; font-size: var(--fs-h2); }
.lp-journey-head span { font: 600 14px/1.3 var(--ui); color: var(--pencil); }
.lp-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .lp-stages { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; } }
.lp-stage-no { display: block; margin-bottom: 6px; font: 700 13px/1 var(--ui); color: var(--pencil); }
.lp-stage h3 { margin: 0 0 2px; font-size: 18px; line-height: 1.25; }
.lp-shape { display: block; margin-bottom: var(--s-3); font-size: 13px; color: var(--pencil); }
.lp-segs { display: flex; gap: 3px; margin-bottom: var(--s-3); }
.lp-segs i { flex: 1; height: 12px; border-radius: 6px; background: var(--rule); }
.lp-segs i.start { background: var(--y-hl); box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--y-strong); }
.lp-start-tag { display: inline-block; margin: -4px 0 var(--s-3); padding: 3px 7px; border-radius: var(--r-tag); background: var(--y-tint); color: var(--y-strong); font: 700 12px/1.2 var(--ui); box-shadow: inset 0 0 0 1px var(--y-hl); }
.lp-skills { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-skills li { font: 400 14px/1.45 var(--text); }
.lp-skills li.more { font: 600 13px/1.4 var(--ui); color: var(--pencil); }
@media (max-width: 899px) {
  .lp-stage + .lp-stage { padding-top: var(--s-4); border-top: 1px solid var(--rule); }
}
.lp-goal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-chip); background: var(--g-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-hl) 70%, var(--rule)); }
.lp-goal h3 { margin: 0; font-size: 17px; --mark: var(--g-under); }
.lp-goal p { margin: 0; font-size: 15px; }

/* The sections after the ladder: a heading on the left, the content on the right (stacked under 960px). */
.lp-section { padding: var(--s-8) 0; border-top: 1px solid var(--rule); }
@media (min-width: 960px) { .lp-section { padding: 72px 0; } }
.lp-split { display: grid; gap: var(--s-6); }
@media (min-width: 960px) { .lp-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; } }
.lp-split > div:first-child h2 { font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 var(--s-3); max-width: 18ch; }
.lp-sub { margin: 0; font-size: 17px; color: var(--pencil); max-width: 44ch; }

/* A day: the session's stops, each in the colour of its part of the app. */
.lp-day { list-style: none; margin: 0; padding: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
.lp-day li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 14px; padding: 0 0 var(--s-5); }
.lp-day li:last-child { padding-bottom: 0; }
.lp-day li:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 42px; bottom: 4px; width: 2px; background: var(--rule); }
.lp-dot { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k-tint); box-shadow: inset 0 0 0 2px var(--k-hl); }
.lp-dot::before { content: ""; width: 18px; height: 18px; background: var(--k-strong); -webkit-mask: var(--k-icon) center / contain no-repeat; mask: var(--k-icon) center / contain no-repeat; }
.lp-day h3 { margin: 6px 0 0; font-size: 17px; }
.lp-day p { grid-column: 2 / -1; margin: 0; font-size: 15px; color: var(--pencil); }
.lp-time { align-self: start; margin-top: 6px; padding: 3px 8px; border-radius: var(--r-tag); background: var(--k-tint); color: var(--k-strong); font: 700 12px/1.3 var(--ui); white-space: nowrap; }
@media (max-width: 480px) {
  .lp-day li { grid-template-columns: 40px minmax(0, 1fr); }
  .lp-time { grid-column: 2; justify-self: start; margin: 4px 0 2px; }
}
.lp-day .k-o { --k-hl: var(--o-hl); --k-tint: var(--o-tint); --k-strong: var(--o-strong); --k-icon: var(--i-warmup); }
.lp-day .k-y { --k-hl: var(--y-hl); --k-tint: var(--y-tint); --k-strong: var(--y-strong); --k-icon: var(--i-today); }
.lp-day .k-p { --k-hl: var(--p-hl); --k-tint: var(--p-tint); --k-strong: var(--p-strong); --k-icon: var(--i-again); }
.lp-day .k-v { --k-hl: var(--v-hl); --k-tint: var(--v-tint); --k-strong: var(--v-strong); --k-icon: var(--i-words); }
.lp-day .k-g { --k-hl: var(--g-hl); --k-tint: var(--g-tint); --k-strong: var(--g-strong); --k-icon: var(--i-check); }

/* Then and now: the app's own card (then-now.js), with a made-up example. */
.lp-then { padding: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
.lp-then h3 { margin: 0 0 var(--s-4); font-size: var(--fs-h2); --mark: var(--g-under); }
.lp-then dl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: baseline; }
.lp-then dt { font: 700 13px/1.3 var(--ui); color: var(--pencil); }
.lp-then dt.now { color: var(--g-strong); }
.lp-then dd { margin: 0; font: 400 19px/1.55 var(--text); }
.lp-then dd.old { color: var(--pencil); }
.lp-then-note { margin: var(--s-4) 0 0; font-size: 14px; color: var(--pencil); }
@media (max-width: 560px) {
  .lp-then dl { grid-template-columns: 1fr; gap: 2px; }
  .lp-then dd { margin-bottom: var(--s-3); }
}

/* Three rules: big numbers in the writing font. */
.lp-rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.lp-rules li { counter-increment: rule; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px var(--s-4); padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.lp-rules li:first-child { border-top: 0; padding-top: 0; }
.lp-rules li::before { content: counter(rule); grid-row: span 2; font: 700 44px/1 var(--text); color: var(--b-strong); }
.lp-rules h3 { margin: 4px 0 0; font-size: 19px; }
.lp-rules p { margin: 0; font-size: 16px; color: var(--pencil); }
.lp-faq { list-style: none; margin: 0; padding: 0; }
.lp-faq li { padding: var(--s-5) 0; border-top: 1px solid var(--rule); }
.lp-faq li:first-child { border-top: 0; padding-top: 0; }
.lp-faq h3 { margin: 0 0 4px; font-size: 19px; }
.lp-faq p { margin: 0; font-size: 16px; color: var(--pencil); }

/* The last call, and the foot. */
.lp-final { margin: 0 0 var(--s-8); padding: var(--s-8) var(--s-5); text-align: center; border-top: 1px solid var(--rule); }
.lp-final h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 auto var(--s-3); max-width: 18ch; }
.lp-final > p { margin: 0 auto var(--s-6); font-size: 17px; max-width: 46ch; color: var(--pencil); }
.lp-final .lp-cta { justify-content: center; }
.lp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0 var(--s-5); border-top: 1px solid var(--rule); font-size: 13px; color: var(--pencil); }
.lp-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-3); margin-right: calc(var(--s-3) * -1); color: var(--pencil); }
.lp-foot-links { display: inline-flex; flex-wrap: wrap; align-items: center; }
.lp-foot .lp-foot-btn { min-height: 44px; padding: 0 var(--s-3); border: 0; background: none; box-shadow: none; font: inherit; color: var(--pencil); text-decoration: underline; cursor: pointer; }
.lp-foot .lp-foot-btn:hover { background: none; color: var(--ink); }

/* The analytics question (public/analytics.js): a small sheet at the bottom of the landing page. */
.analytics-banner { position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 50; max-width: 560px; margin: 0 auto; padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); }
.analytics-banner p { margin: 0 0 var(--s-3); font-size: 14px; line-height: 1.5; color: var(--ink); }
.analytics-btns { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.analytics-btns .btn { flex: 1 1 140px; }

/* Motion (only with html.lp-motion, added by welcome.js). The title's stroke starts undrawn; the demo's coach and
   "Meets" sheets wait until it plays; its marks, "1", sweep and "Meets" stroke are drawn one after another by
   state: figure[data-state] is "idle" (before a play), "playing" or "done" (welcome.js, about 5 seconds in all). */
.lp-motion .lp-hero h1 .lp-hl:not(.is-drawn) { background-size: 0% 100%; background-repeat: no-repeat; }
.lp-motion .lp-demo .lp-coach,
.lp-motion .lp-demo .lp-met { opacity: 0; transform: translateY(10px); }
.lp-motion .lp-demo .lp-mark { background-size: 0% 100%; text-decoration-color: transparent; }
.lp-motion .lp-demo .lp-pill { transform: scale(0); }
.lp-motion .lp-demo .lp-new { background-size: 0% 100%; background-repeat: no-repeat; }
.lp-motion .lp-demo:not(.lp-stroke) .lp-word { background-size: 0% 100%; background-repeat: no-repeat; }
.lp-motion .lp-demo-foot { min-height: 44px; }
.lp-motion .lp-demo[data-state="playing"] .lp-mark { animation: lp-mark 600ms var(--lp-ease) both; }
.lp-motion .lp-demo[data-state="playing"] .lp-pill { animation: lp-pop 360ms var(--lp-ease) 500ms both; }
.lp-motion .lp-demo[data-state="playing"] .lp-coach { animation: lp-rise 400ms var(--lp-ease) 900ms both; }
.lp-motion .lp-demo[data-state="playing"] .lp-met { animation: lp-rise 400ms var(--lp-ease) 2600ms both; }
.lp-motion .lp-demo[data-state="playing"] .lp-new { animation: moment-draw 700ms var(--lp-ease) 2900ms both; }
.lp-motion .lp-demo[data-state="done"] .lp-coach,
.lp-motion .lp-demo[data-state="done"] .lp-met { opacity: 1; transform: none; }
.lp-motion .lp-demo[data-state="done"] .lp-mark { background-size: 100% 100%; text-decoration-color: var(--p-strong); }
.lp-motion .lp-demo[data-state="done"] .lp-pill { transform: none; }
.lp-motion .lp-demo[data-state="done"] .lp-new { background-size: 100% 100%; }
@keyframes lp-mark {
  0% { background-size: 0% 100%; text-decoration-color: transparent; }
  70% { background-size: 100% 100%; text-decoration-color: transparent; }
  100% { background-size: 100% 100%; text-decoration-color: var(--p-strong); }
}
@keyframes lp-pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The ladder lights up: the first time it is on screen, the skills turn green one after another (--i is each
   skill's number, set by welcome.js). The first skill stays yellow and "You start here" stays. */
.lp-motion .lp-journey.is-climbing .lp-segs i:not(.start) { animation: lp-skill 560ms var(--lp-ease) calc(var(--i, 0) * 45ms) both; }
@keyframes lp-skill {
  0% { background-color: var(--rule); transform: scaleY(1); }
  45% { transform: scaleY(1.7); }
  100% { background-color: var(--g-hl); transform: scaleY(1); }
}

/* Settings: the sound test under the sound switch (2026-10-25). */
.look-test { margin: 0 0 var(--s-4); display: grid; justify-items: start; gap: var(--s-2); }
.look-test .cost-note { margin: 0; }
.look-test .cost-note:empty { display: none; }
#sound-test { --icon: var(--i-sound); }


/* ============================================================================
   The placement page (public/placement.html, placement.js; sketch design/placement-sketch.html, 2026-10-25).
   One screen at a time: welcome, choose a question, write, checking, your start. Yellow = placement, green = the skills
   I already show. Flat sheets with a hairline, no side stripes, the highlighter as the one signature.
   ============================================================================ */
/* ---- the page ---- */
.pg-placement .pl { max-width: 720px; margin: 0 auto; padding-bottom: var(--s-8); }
/* the page's own rule turns every top-level section into a white card; here each screen sits on the paper instead,
   so the cards inside it (the ladder, the questions, the paper) are the only cards (no cards inside a card). */
.pg-placement main.pl > .pl-screen { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
.pg-placement main.pl > * { margin-block: 0; }
/* first launch has no sidebar, so the column sits in the middle of a wide screen */
.pg-placement main.col.page.pl { margin-left: auto !important; margin-right: auto !important; max-width: 720px; }
.pg-placement .site-header .col { margin-inline: auto; max-width: 720px; }
.pg-placement .pl h1 { margin: 0 0 var(--s-3); font: 800 clamp(30px, 7vw, 44px)/1.1 var(--display); letter-spacing: -0.01em; background: none; padding: 0; }
.pg-placement .pl h2 { font-family: var(--display); }
.pl-kicker { margin: var(--s-5) 0 var(--s-2); font: 700 13px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--y-strong); }
.pl-lead { margin: 0 0 var(--s-5); max-width: 56ch; font: 400 17px/1.55 var(--ui); color: var(--pencil); }
.pl-mark { background: linear-gradient(transparent 60%, var(--y-under) 60%); padding: 0 .06em; }
.pl-mark.g { background: linear-gradient(transparent 60%, var(--g-under) 60%); }

/* the three steps: one bar, so I always know where I am */
.pl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.pl-steps li { display: grid; gap: 6px; font: 600 13px/1.2 var(--ui); color: var(--pencil); }
.pl-steps li::before { content: ""; height: 8px; border-radius: 4px; background: var(--rule); }
.pl-steps li.done { color: var(--g-strong); }
.pl-steps li.done::before { background: var(--g-hl); }
.pl-steps li.now { color: var(--ink); }
.pl-steps li.now::before { background: var(--y-hl); }
.pl-steps[hidden] { display: none; }

/* big buttons and the quiet skip */
.pl-actions { display: grid; gap: var(--s-3); justify-items: stretch; margin-top: var(--s-6); }
.pg-placement .btn.big { min-height: 56px; font-size: 18px; border-radius: 14px; }
.pl-skip { justify-self: center; min-height: 44px; padding: 0 var(--s-3); border: 0; background: none; box-shadow: none; color: var(--pencil); font: 500 15px/1.3 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pl-skip:hover { background: none; color: var(--ink); }

/* ---- A: welcome ---- */
.pl-facts { display: grid; gap: var(--s-3); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.pl-facts li { display: flex; align-items: center; gap: var(--s-3); font: 500 16px/1.4 var(--ui); color: var(--ink); }
.pl-facts li > span { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--y-tint); }
.pl-facts li > span::before { content: ""; width: 18px; height: 18px; background: var(--y-strong); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.pl-facts li b { font-weight: 700; }

/* the ladder: 21 skills in 5 stages, the real bar made bigger */
.pl-ladder { position: relative; margin: var(--s-6) 0 0; padding: 44px var(--s-4) var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow); }
.pl-ladder .bar { gap: var(--s-2); }
.pl-ladder .bar .tick { height: 16px; transition: background .25s ease, transform .25s ease; }
.pl-ladder .bar .tick.done { background: var(--g-hl); transform: scaleY(1.25); }
.pl-ladder .bar .tick.now { background: var(--y-hl); box-shadow: 0 0 0 2px var(--sheet), 0 0 0 4px var(--y-strong); }
.pl-ladder .st-name { display: block; text-align: left; }
.pl-ladder figcaption { margin-top: var(--s-3); font: 400 14px/1.45 var(--ui); color: var(--pencil); }
.pl-pin { position: absolute; top: 8px; left: 0; display: none; width: max-content; max-width: 160px; transform: translateX(-50%); padding: 5px 10px; border-radius: var(--r-chip); background: var(--y-hl); color: #3a2a00; font: 700 13px/1.2 var(--ui); white-space: nowrap; }
.pl-pin::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--y-hl); }
.pl-pin.on { display: block; animation: pl-drop .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pl-drop { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 640px) { .pl-ladder .st-name { font-size: 0; } .pl-ladder .st-name::before { content: attr(data-n); font-size: 12px; } }

/* ---- B: choose ---- */
.pl-cards { display: grid; gap: var(--s-3); margin: var(--s-5) 0 0; }
.pl-card { position: relative; display: grid; grid-template-columns: 36px 1fr 28px; align-items: start; gap: var(--s-3); padding: var(--s-4); border: 1.5px solid var(--rule); border-radius: var(--r-card); background: var(--sheet); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.pl-card:hover { border-color: var(--pencil); }
.pl-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pl-card:focus-within { outline: 2px solid var(--pen); outline-offset: 2px; }
.pl-num { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--y-tint); color: var(--y-strong); font: 800 16px/1 var(--display); }
.pl-q { font: 500 19px/1.4 var(--text); color: var(--ink); }
.pl-tick { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--rule); display: grid; place-items: center; }
.pl-card:has(input:checked) { border-color: var(--y-hl); background: var(--y-tint); transform: translateY(-1px); }
.pl-card:has(input:checked) .pl-num { background: var(--y-hl); color: #3a2a00; }
.pl-card:has(input:checked) .pl-tick { border-color: var(--y-strong); background: var(--y-strong); }
.pl-card:has(input:checked) .pl-tick::before { content: ""; width: 16px; height: 16px; background: var(--sheet); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.pl-hint { margin: var(--s-4) 0 0; font: 400 14px/1.45 var(--ui); color: var(--pencil); }

/* ---- C and D: write ---- */
.pl-task { position: sticky; top: 0; z-index: 6; margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-5) var(--s-3); background: var(--b-tint); border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: 0 1px 0 var(--rule); }
.pl-task-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font: 700 13px/1.3 var(--ui); color: var(--b-strong); }
.pl-task-top button { min-height: 36px; padding: 0 var(--s-2); border: 0; background: none; box-shadow: none; color: var(--b-strong); font: 600 13px/1 var(--ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pl-task-top button:hover { background: none; }
.pl-task p { margin: 0; font: 500 20px/1.4 var(--text); color: var(--ink); }
.pl-task em { font-style: normal; font-weight: 700; background: linear-gradient(transparent 55%, var(--y-under) 55%); padding: 0 2px; }
.pl-task .pl-task-sub { margin-top: var(--s-1); font: 400 13px/1.4 var(--ui); color: var(--pencil); }
.pl-paper { padding: var(--s-4) var(--s-5) var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); box-shadow: var(--shadow); }
.pl-paper textarea.paper { height: calc(var(--line) * 8); }
.pl-meter { margin-top: var(--s-3); display: grid; gap: 6px; }
.pl-meter-bar { position: relative; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--b-hl) 40%, var(--sheet)); overflow: hidden; }
.pl-meter-zone { position: absolute; top: 0; bottom: 0; background: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-hl); border-radius: 5px; }
.pl-meter-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 5px; background: var(--y-hl); transition: width .25s ease, background .25s ease; }
.pl-meter.good .pl-meter-fill { background: var(--g-hl); }
.pl-meter.long .pl-meter-fill { background: var(--o-hl); }
.pl-meter-row { display: flex; justify-content: space-between; gap: var(--s-3); font: 500 13px/1.3 var(--ui); color: var(--pencil); }
.pl-meter-row b { color: var(--ink); font-weight: 700; font-size: 15px; }
.pl-coach { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--paper, var(--sheet)); font: 400 15px/1.5 var(--ui); color: var(--ink); }
.pl-coach::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--y-strong); }
.pl-coach.good { background: var(--g-tint); border-color: var(--g-hl); }
.pl-coach.good::before { background: var(--g-strong); }
@media (max-width: 560px) { .pl-task { padding: var(--s-2) var(--s-4) var(--s-3); } .pl-task p { font-size: 17px; } .pl-task .pl-task-sub { display: none; } .pl-paper { padding: var(--s-3) var(--s-4); } }
.pl-help { margin-top: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--sheet); }
.pl-help summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4); cursor: pointer; font: 600 15px/1.3 var(--ui); list-style: none; }
.pl-help summary::-webkit-details-marker { display: none; }
.pl-help summary::before { content: ""; width: 18px; height: 18px; background: var(--y-strong); -webkit-mask: var(--i-bulb) center / contain no-repeat; mask: var(--i-bulb) center / contain no-repeat; }
.pl-help[open] summary { border-bottom: 1px solid var(--rule); }
.pl-help-body { padding: var(--s-4); display: grid; gap: var(--s-3); font: 400 15px/1.5 var(--ui); }
.pl-help ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.pl-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pl-chip { min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--rule); border-radius: 20px; background: var(--y-tint); box-shadow: none; color: var(--ink); font: 500 14px/1 var(--text); cursor: pointer; }
.pl-chip:hover { background: var(--y-hl); }
.pl-bar { position: sticky; bottom: 0; z-index: 5; margin: var(--s-4) calc(var(--s-4) * -1) 0; padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper, #f4f2ee) 94%, transparent); border-top: 1px solid var(--rule); display: grid; gap: var(--s-1); }
.pl-skip-low { display: block; margin: var(--s-3) auto 0; }
.pl-bar .form-message { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-chip); background: var(--b-tint); color: var(--ink); font: 500 14px/1.4 var(--ui); text-align: center; }
.pl-bar .budget-reason { margin: 0; text-align: center; }
/* on a wide screen the bar is as wide as the column; on a phone it reaches the edges of the screen */
@media (min-width: 761px) { .pl-bar { margin-inline: 0; padding-inline: 0; } }

/* ---- E: checking ---- */
.pl-wait { text-align: center; padding-top: var(--s-7); }
.pl-lines { display: grid; gap: 14px; width: min(320px, 80%); margin: 0 auto var(--s-6); }
.pl-lines i { position: relative; display: block; height: 14px; border-radius: 7px; background: var(--rule); overflow: hidden; }
.pl-lines i::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--y-hl); border-radius: 7px; animation: pl-sweep 2.4s ease-in-out infinite; }
.pl-lines i:nth-child(2)::after { animation-delay: .5s; }
.pl-lines i:nth-child(3)::after { animation-delay: 1s; }
.pl-lines i:nth-child(3) { width: 70%; }
@keyframes pl-sweep { 0% { width: 0; } 55% { width: 100%; } 100% { width: 100%; opacity: 0; } }
.pl-wait-steps { display: inline-grid; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); padding: 0; list-style: none; text-align: left; font: 500 17px/1.3 var(--ui); color: var(--pencil); }
.pl-wait-steps li { display: flex; align-items: center; gap: var(--s-3); }
.pl-wait-steps li::before { content: ""; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--rule); box-sizing: border-box; }
.pl-wait-steps li.on { color: var(--ink); font-weight: 700; }
.pl-wait-steps li.on::before { border-color: var(--y-strong); background: var(--y-hl); }
.pl-wait-steps li.done { color: var(--g-strong); }
.pl-wait-steps li.done::before { border-color: var(--g-strong); background: var(--g-strong) var(--i-check) center / 14px no-repeat; }

/* ---- F: your start ---- */
.pl-band { margin: var(--s-4) 0 0; padding: var(--s-5); background: var(--g-tint); border: 1px solid var(--g-hl); border-radius: var(--r-card); }
.pl-band small { display: block; font: 700 13px/1.3 var(--ui); color: var(--g-strong); }
.pl-band-word { display: inline-block; margin: var(--s-2) 0; font: 700 clamp(38px, 11vw, 56px)/1.05 var(--text); color: var(--ink); background: linear-gradient(transparent 62%, var(--g-under) 62%); padding: 0 .06em; }
.pl-band p { margin: 0; font: 400 16px/1.5 var(--ui); }
.pl-count { display: flex; align-items: baseline; gap: var(--s-3); margin: var(--s-6) 0 0; font: 600 18px/1.3 var(--ui); }
.pl-count b { font: 800 clamp(44px, 12vw, 64px)/1 var(--display); color: var(--g-strong); }
.pl-after { margin: var(--s-3) 0 0; font: 400 15px/1.5 var(--ui); color: var(--pencil); }
.pl-evidence { margin-top: var(--s-5); display: grid; gap: var(--s-2); }
.pl-ev { border: 1px solid var(--rule); border-radius: var(--r-btn); background: var(--sheet); }
.pl-ev summary { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-4); cursor: pointer; list-style: none; font: 700 16px/1.3 var(--display); }
.pl-ev summary::-webkit-details-marker { display: none; }
.pl-ev summary::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--g-tint) var(--i-check) center / 16px no-repeat; }
.pl-ev summary::after { content: ""; margin-left: auto; width: 16px; height: 16px; background: var(--pencil); -webkit-mask: var(--i-chev) center / contain no-repeat; mask: var(--i-chev) center / contain no-repeat; transform: rotate(90deg); transition: transform .15s; }
.pl-ev[open] summary::after { transform: rotate(-90deg); }
.pl-ev-body { padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 28px + var(--s-3)); font: 400 15px/1.5 var(--ui); }
.pl-ev-body q { quotes: none; font: 500 16px/1.5 var(--text); background: var(--y-tint); box-shadow: 0 0 0 3px var(--y-tint); border-radius: 3px; }
.pl-ev-body p { margin: var(--s-2) 0 0; }
.pl-start { margin-top: var(--s-6); padding: var(--s-5); background: var(--y-tint); border: 1px solid var(--y-hl); border-radius: var(--r-card); }
.pl-start .label { margin: 0; font: 700 13px/1.3 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--y-strong); }
.pl-start h2 { margin: var(--s-2) 0 var(--s-2); font: 800 clamp(24px, 6vw, 32px)/1.15 var(--display); }
.pl-start p.small { margin: 0 0 var(--s-4); font: 400 15px/1.5 var(--ui); color: var(--ink); opacity: .85; }
.pl-start .btn { width: 100%; text-align: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .pl-ladder .bar .tick, .pl-card, .pl-meter-fill { transition: none; }
  .pl-pin.on { animation: none; }
  .pl-lines i::after { animation: none; width: 60%; }
}

/* the real page: a fieldset holds the question cards, a hidden screen stays hidden, a saved draft says so */
.pg-placement .pl-screen[hidden] { display: none; }
.pg-placement fieldset.pl-cards { border: 0; padding: 0; min-width: 0; margin: var(--s-5) 0 0; }
.pg-placement .pl-draft-note { margin: var(--s-2) 0 0; font: 500 13px/1.4 var(--ui); color: var(--pencil); }
.pg-placement .pl-draft-note[hidden] { display: none; }
.pg-placement .pl-evidence .yours { margin: 0; font: 400 14px/1.5 var(--ui); color: var(--pencil); }
.pg-placement .pl-ev-body .yours + p { margin-top: var(--s-2); }
.pg-placement .pl-band small.label, .pg-placement .pl-start p.label { margin: 0; }
.pg-placement .pl-band .small { margin-top: var(--s-2); font: 400 14px/1.5 var(--ui); color: var(--pencil); }
.pg-placement .pl-start a.btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* A band under the ladder's start: a warm card with the way down one ladder, and the headline when no skill was shown. */
.pg-placement .pl-switch { margin: var(--s-4) 0 0; padding: var(--s-5); background: var(--y-tint); border: 1px solid var(--y-hl); border-radius: var(--r-card); }
.pg-placement .pl-switch[hidden] { display: none; }
.pg-placement .pl-switch h2 { margin: 0 0 var(--s-2); font: 800 clamp(20px, 5vw, 26px)/1.2 var(--display); }
.pg-placement .pl-switch p { margin: 0; font: 400 16px/1.5 var(--ui); }
.pg-placement .pl-switch .btns { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-4) 0 0; }
.pg-placement .pl-switch .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pg-placement .pl-nonezero { margin: var(--s-5) 0 0; font: 700 clamp(20px, 5vw, 24px)/1.3 var(--display); }

.pg-placement .pl-step-focus:focus { outline: none; }
.pg-placement .pl [tabindex="-1"]:focus { outline: none; }
.pg-placement .pl .quiet-note { margin: var(--s-3) 0 0; }

/* Accounts (users.html): the admin's list of accounts, one card each; facts as a small grid, no horizontal scroll. */
.pg-users { --c-hl: var(--b-hl); --c-tint: var(--b-tint); --c-strong: var(--b-strong); --c-under: var(--b-under); --icon: var(--i-progress); }
.us-summary { margin: 0 0 var(--s-4); font-weight: 600; }
.us-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.us-item { padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
.us-item h2 { margin: 0; font-size: 18px; }
.us-email { margin: var(--s-1) 0 var(--s-3); font-size: 14px; color: var(--pencil); overflow-wrap: anywhere; }
.us-item dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-3) var(--s-4); margin: 0; }
.us-item dt { font-size: 12px; color: var(--pencil); }
.us-item dd { margin: 0; font-size: 15px; font-weight: 600; }

/* The Contact us page (contact.html): the landing page's frame with one short column. */
.lp-contact { max-width: 620px; padding: var(--s-8) 0; }
.lp-contact h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 var(--s-3); }
.lp-contact .lp-lead { margin: 0 0 var(--s-5); }

/* ---- Settings: AI limits for other people (admin only) ---- */
.limit-pause { margin-top: var(--s-4); }
.form-message.limit-ok { color: var(--met); }
.limit-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3) var(--s-4); margin-top: var(--s-3); }
.limit-label { display: grid; gap: var(--s-1); font-size: var(--fs-small); color: var(--pencil); }
.limit-input { width: 100%; max-width: 160px; font-variant-numeric: tabular-nums; }
.limit-heading { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-h3); }
.limit-people { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.limit-person { padding: var(--s-3) var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
.limit-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.limit-email { font-size: var(--fs-small); color: var(--pencil); overflow-wrap: anywhere; }
.limit-spent { margin: var(--s-1) 0 var(--s-3); }
.limit-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.limit-row .btn { min-height: 44px; }
@media (max-width: 560px) {
  .limit-input { max-width: none; }
  .limit-row .limit-label { flex: 1 1 100%; }
}

/* The Contact us form (contact.html) and the messages on the Accounts page (users.html). */
.lp-form { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.lp-form label { font-weight: 600; font-size: 15px; margin-top: var(--s-2); }
.lp-form .lp-opt { font-weight: 400; color: var(--pencil); font-size: 13px; }
.lp-form input, .lp-form textarea { width: 100%; padding: var(--s-3); font: inherit; font-size: 16px; color: var(--ink); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-btn); }
.lp-form textarea { resize: vertical; min-height: 140px; }
.lp-form .btn { justify-self: start; margin-top: var(--s-3); }
.lp-form-status { min-height: 1.5em; margin: 0; font-size: 15px; color: var(--ink); }
.lp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.us-msg-title { margin: var(--s-6) 0 var(--s-3); font-size: 20px; }
.us-item h3 { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.us-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }

/* =====================================================================
   Setup and Settings (2026-10-26): choice cards for the target level and the writing goal, switch rows,
   the profile hero, the jump bar, and the owner tools. Same highlighters and tokens as the rest (blue is the
   colour of both pages); no new colour. DESIGN.md "Setup and Settings".
   ===================================================================== */

/* ---- Choice cards (public/profile-form.js reads the radio buttons inside) ---- */
fieldset.opts { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.opts + fieldset.opts { margin-top: var(--s-7); }
.opts legend { padding: 0; margin: 0 0 var(--s-3); }
.opts-q { display: block; font-family: var(--display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.25; letter-spacing: -0.015em; }
.opts-hint { display: block; margin-top: var(--s-1); font-size: 14px; font-weight: 400; color: var(--pencil); }
.opt-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .opt-grid.levels { grid-template-columns: 1fr; } }

/* A card is a paper slip with a radio button over the whole of it, so a tap anywhere chooses. */
.opt {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-4);
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}
.opt:hover { border-color: var(--pencil); }
.opt input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none; /* a native radio is only tappable inside its round shape; this one covers the whole card */
  border-radius: 0;
}
.opt:has(input:checked) { background: var(--b-tint); border-color: var(--pen); }
.opt:has(input:focus-visible) { outline: 2px solid var(--pen); outline-offset: 2px; }
.opt-name { grid-column: 1; font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; cursor: pointer; }
.opt-tick {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--pencil);
  background: var(--sheet);
}
.opt:has(input:checked) .opt-tick { background: var(--pen); border-color: var(--pen); }
.opt:has(input:checked) .opt-tick::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--pen-on);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
  animation: opt-pop 0.25s ease-out;
}
@keyframes opt-pop { from { transform: scale(0.4); } 60% { transform: scale(1.2); } to { transform: scale(1); } }
.opt-desc { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; color: var(--pencil); }

/* A level card: the level big (with the highlighter stroke once chosen), where it leads, the ladder it climbs. */
.opt.level { gap: var(--s-2) var(--s-3); padding: var(--s-5); }
.opt.level .opt-name { width: fit-content; padding-inline: 4px; margin-left: -4px; font-size: 40px; line-height: 1.1; }
.opt.level:has(input:checked) .opt-name {
  background: linear-gradient(transparent 56%, var(--b-under) 56%, var(--b-under) 94%, transparent 94%);
}
.opt-sub { grid-column: 1 / -1; font-weight: 700; font-size: 16px; }
.opt-ladder { grid-column: 1 / -1; display: flex; gap: 6px; margin: var(--s-1) 0; }
.opt-ladder .g { display: flex; gap: 2px; min-width: 0; }
.opt-ladder i {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--pencil) 30%, transparent);
  transition: background-color 0.2s ease;
  transition-delay: calc(var(--i, 0) * 28ms);
}
.opt:has(input:checked) .opt-ladder i { background: var(--b-hl); }

/* A goal card: a round icon, the goal, one line about it. */
.opt.goal { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.opt.goal .opt-ic {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sheet);
  color: var(--b-strong);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.opt.goal:has(input:checked) .opt-ic { background: var(--b-strong); color: var(--sheet); box-shadow: none; }
.opt.goal .opt-ic::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.opt.goal .opt-name { grid-column: 2; grid-row: 1; font-size: 17px; line-height: 1.2; align-self: end; }
.opt.goal .opt-tick { grid-column: 3; grid-row: 1 / span 2; }
.opt.goal .opt-desc { grid-column: 2; grid-row: 2; align-self: start; }
.g-general { --icon: var(--i-write); }
.g-academic { --icon: var(--i-words); }
.g-professional { --icon: var(--i-ledger); }
.g-exam { --icon: var(--i-target); }
@media (max-width: 520px) {
  .opt.goal { grid-template-columns: 36px minmax(0, 1fr) auto; padding: var(--s-3); column-gap: var(--s-2); }
  .opt.goal .opt-ic { width: 36px; height: 36px; }
  .opt-grid.goals { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .opt, .opt-ladder i { transition: none; }
  .opt:has(input:checked) .opt-tick::after { animation: none; }
}

/* ---- Setup (first launch): a short, friendly start before the first paragraph ---- */
.su-page { gap: var(--s-4); }
.su-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); }
.su-steps li { flex: 1; min-width: 0; padding-top: var(--s-2); border-top: 4px solid var(--rule); font-size: 13px; font-weight: 700; color: var(--pencil); }
.su-steps li.now { border-top-color: var(--y-hl); color: var(--ink); }
.su-page #profile-form { padding: var(--s-5); }
.su-bar { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
/* Phones: the button stays at the bottom of the screen while I choose. */
@media (max-width: 560px) {
  .su-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: var(--s-5) calc(-1 * var(--s-4)) calc(-1 * var(--s-4));
    padding: var(--s-3) var(--s-4);
    background: color-mix(in srgb, var(--sheet) 94%, transparent);
    border-top: 1px solid var(--rule);
    border-radius: 0 0 var(--r-card) var(--r-card);
  }
}
/* First launch has no sidebar, so the column sits in the middle (the rule for the other pages leaves it near the sidebar). */
.pg-setup main.page.col { margin-left: auto !important; margin-right: auto !important; }
.su-bar #message { margin: 0; text-align: center; font-size: 14px; }
.su-bar button[type="submit"] { width: 100%; min-height: 56px; font-size: 17px; }
.su-next { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-5) 0 0; padding: var(--s-3) var(--s-4); background: var(--y-tint); border-radius: var(--r-chip); font-size: 14px; }
.su-next::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--y-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
.su-fine { margin: var(--s-3) 0 0; text-align: center; font-size: var(--fs-small); color: var(--pencil); }
@media (max-width: 560px) {
  .su-page #profile-form { padding: var(--s-4); }
}

/* ---- Settings ---- */
.set-page { gap: var(--s-4); }
main.page > section.set-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); background: var(--b-tint); border-color: var(--b-hl); }
.set-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--b-strong);
  color: var(--sheet);
  font: 800 24px/1 var(--display);
}
.set-who { flex: 1 1 200px; min-width: 0; }
.set-name { margin: 0; font: 800 22px/1.2 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.set-email { margin: 2px 0 0; font-size: 14px; color: var(--pencil); overflow-wrap: anywhere; }
.set-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.set-chip { padding: 4px 10px; border-radius: var(--r-tag); background: var(--sheet); border: 1px solid var(--rule); font-size: 13px; font-weight: 700; }
.set-chip.owner { background: var(--y-tint); border-color: var(--y-hl); }
.set-chip:empty { display: none; }

/* The jump bar: one pill per part of the page; the part in view is marked. It stays at the top while I scroll. */
.set-jump {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  margin-inline: calc(-1 * var(--s-4));
  padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  scrollbar-width: none;
}
.set-jump::-webkit-scrollbar { display: none; }
.set-jump a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  border-radius: 999px;
  background: var(--sheet);
  box-shadow: inset 0 0 0 1.5px var(--rule);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}
.set-jump a:hover { box-shadow: inset 0 0 0 1.5px var(--pencil); }
.set-jump a[aria-current="true"] { background: var(--b-tint); color: var(--b-strong); box-shadow: inset 0 0 0 1.5px var(--b-strong); }
html:has(body.pg-settings) { scroll-behavior: smooth; } /* only this page glides to a part; the others jump as before */
@media (prefers-reduced-motion: reduce) { html:has(body.pg-settings) { scroll-behavior: auto; } }
.pg-settings main.page > section, .pg-settings main.page > form, .set-group { scroll-margin-top: 64px; }

.set-sub { margin: 0 0 var(--s-4); color: var(--pencil); font-size: 14px; }
.set-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.set-save #message { flex: 1 1 200px; margin: 0; order: -1; font-size: 14px; }
.set-state { flex: 1 1 140px; font-size: 14px; color: var(--pencil); }
.set-state.dirty { color: var(--b-strong); font-weight: 700; }
.set-save button[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }
.set-keep { margin: var(--s-3) 0 0; font-size: 13px; color: var(--pencil); }

/* Switch rows: an icon, what it does, a switch. The radio-style input covers the switch, so it is the tap target. */
.set-rows { display: grid; margin-top: var(--s-2); }
.set-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--rule); }
.set-row:first-child { border-top: 0; padding-top: var(--s-2); }
.set-row-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--b-tint);
  color: var(--b-strong);
}
.set-row-ic::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.set-row-text { flex: 1; min-width: 0; }
.set-row-title { display: block; font: 700 16px/1.3 var(--display); cursor: pointer; }
.set-row-desc { margin: 2px 0 0; max-width: 52ch; font-size: 14px; color: var(--pencil); }
.set-row-extra { margin: var(--s-2) 0 0; display: grid; justify-items: start; gap: var(--s-2); }
.set-row-extra .cost-note { margin: 0; }
.set-row-extra .cost-note:empty { display: none; }
.r-sound { --icon: var(--i-sound); }
.r-session { --icon: var(--i-today); }
.r-reminder { --icon: var(--i-cal); }
.set-row[hidden] { display: none; }
.r-pause { --icon: var(--i-warmup); }

.switch { position: relative; flex: none; width: 52px; height: 32px; }
.switch input { position: absolute; inset: -8px; width: calc(100% + 16px); height: calc(100% + 16px); margin: 0; opacity: 0; cursor: pointer; z-index: 1; appearance: none; border-radius: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--rule); transition: background-color 0.2s; }
.switch-track::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pencil);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.2s;
}
.switch input:checked + .switch-track { background: var(--pen); }
.switch input:checked + .switch-track::after { transform: translateX(20px); background: var(--pen-on); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--pen); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }

/* Backup: two quiet buttons. Start fresh: a pink-tint zone, clearly apart. */
.set-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
.set-actions .btn { text-decoration: none; display: inline-flex; align-items: center; }
main.page > section.set-danger { background: var(--p-tint); border-color: var(--p-hl); }
.set-danger #reset-button { background: var(--sheet); color: var(--p-strong); box-shadow: inset 0 0 0 1.5px var(--p-strong); }
.set-danger #reset-button:hover:not(:disabled) { background: var(--p-strong); color: var(--sheet); }

/* Owner tools (the admin only). */
.set-group h2 { width: fit-content; margin: var(--s-4) 0 var(--s-1); padding-inline: 4px; margin-left: -4px; background: linear-gradient(transparent 56%, var(--y-under) 56%, var(--y-under) 94%, transparent 94%); }
.set-group p { margin: 0; color: var(--pencil); font-size: 14px; }
.costs > div { background: var(--b-tint); }
.costs dt { color: var(--b-strong); font-weight: 600; }
.limit-person { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-3); align-items: center; background: var(--paper); }
.limit-avatar {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--b-tint);
  color: var(--b-strong);
  font: 800 17px/1 var(--display);
}
.limit-person .limit-who, .limit-person .limit-spent { grid-column: 2; margin: 0; }
.limit-person .limit-meter, .limit-person .limit-row, .limit-person .del { grid-column: 1 / -1; }
.limit-meter { height: 6px; margin-top: var(--s-2); border-radius: 3px; background: var(--rule); overflow: hidden; }
.limit-meter span { display: block; height: 100%; border-radius: 3px; background: var(--b-hl); }
.limit-meter.near span { background: var(--o-hl); }
.limit-meter.full span { background: var(--p-hl); }
.limit-row { margin-top: var(--s-2); }
.us-item .del { margin-top: var(--s-4); }
.us-item h2 { overflow-wrap: anywhere; }

/* Delete a person (public/delete-user.js): a quiet button, then a pink slip that says exactly what goes. */
.del { margin-top: var(--s-3); }
button.del-open { min-height: 40px; padding: 0 var(--s-4); background: var(--sheet); color: var(--p-strong); font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--rule); }
button.del-open:hover { background: var(--p-tint); box-shadow: inset 0 0 0 1.5px var(--p-strong); }
.del-confirm { padding: var(--s-4); border-radius: var(--r-chip); background: var(--p-tint); border: 1px solid var(--p-hl); }
.del-confirm p { margin: 0 0 var(--s-3); font-size: 14px; }
.del-confirm strong { overflow-wrap: anywhere; }
.del-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
button.del-yes { min-height: 44px; padding: 0 var(--s-4); background: var(--p-strong); color: var(--sheet); font-size: 14px; }
button.del-yes:hover:not(:disabled) { background: color-mix(in srgb, var(--p-strong) 82%, var(--ink)); }
button.del-no { min-height: 44px; padding: 0 var(--s-4); background: var(--sheet); color: var(--ink); font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--rule); }
button.del-no:hover { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--pencil); }
.del-error { margin: var(--s-2) 0 0; font-size: 14px; color: var(--notyet); }
@media (max-width: 560px) {
  .del-actions > button { flex: 1 1 100%; }
}

/* Free write, "Before you write": while the question and ideas are on their way (before-write.js).
   Grey lines where the text will be, and a thin bar that fills fast, slows down and never reaches the
   end before the answer comes (the same honest fill as the wait capsule, drawn by CSS). They only show
   while the AI writes something new: a topic that is already saved never flashes them. */
.skeleton { display: grid; gap: var(--s-2); }
.skeleton[hidden] { display: none; }
.skeleton span {
  display: block;
  height: 14px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ink) 9%, transparent);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton span:nth-child(2) { width: 82%; }
.skeleton span:nth-child(3) { width: 64%; }
.skeleton-question {
  margin: 0 0 var(--s-4);
  padding: 14px 16px;
  border-radius: var(--r-chip);
  background: var(--sheet);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b-hl) 60%, transparent);
}
.skeleton-question span { height: 18px; }
#fw-ideas-loading { margin-top: var(--s-2); }
.load-bar {
  height: 6px;
  margin: 0 0 var(--s-2);
  border-radius: 3px;
  background: color-mix(in srgb, var(--b-strong) 14%, transparent);
  overflow: hidden;
}
.load-bar[hidden] { display: none; }
.load-bar span {
  display: block;
  height: 100%;
  background: var(--b-strong);
  transform: scaleX(0);
  transform-origin: left center;
  animation: load-fill 16s cubic-bezier(0.1, 0.6, 0.3, 1) forwards;
}
@keyframes load-fill { to { transform: scaleX(0.92); } }
@keyframes skeleton-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton span { animation: none; }
  .load-bar span { animation-timing-function: steps(32, end); }
}

/* =====================================================================
   The Free write studio (2026-10-26; approved sketch design/free-write-studio-sketch.html).
   Same colours, same fonts, flat cards; no new feature. What changes on the page:
   - the header has the title on the left and "Past writing" and the level check on the right;
   - the topic and the question are a blue prompt card above both columns;
   - my paper has a live length bar in its head and a foot that stays in view while I write;
   - the rail beside the writing has one switch: "Get ready" (Start here) or "Your result";
   - the result opens with a big band and its meter, then three tiles (To fix, What worked, Ledger).
   Everything is scoped to .pg-write and sits last, so it wins over the older Free write rules above.
   ===================================================================== */

/* ---- 1. The header ---- */
.pg-write .fw-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-3) var(--s-4);
}
.pg-write .fw-title { flex: 1 1 280px; min-width: 0; }
.pg-write .fw-head h1 {
  width: fit-content;
  margin: 0 0 0 -4px;
  padding-inline: 4px;
  line-height: 1.25;
  background: linear-gradient(transparent 56%, var(--c-under) 56%, var(--c-under) 94%, transparent 94%);
}
.pg-write .fw-head .lead { margin: 6px 0 0; max-width: 60ch; font-size: 14px; }
.pg-write .head-tools { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pg-write .tool-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--r-btn);
  background: var(--sheet);
  color: var(--ink);
  box-shadow: none;
  font: 600 14px/1.2 var(--ui);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.pg-write .tool-btn::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--b-strong);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.pg-write .tool-btn:hover { background: var(--paper); border-color: var(--pencil); box-shadow: none; }
#history-open { --icon: var(--i-again); }
#band-check { --icon: var(--i-target); }
.pg-write .tool-btn .count {
  padding: 3px 6px;
  border-radius: var(--r-tag);
  background: var(--paper);
  color: var(--pencil);
  font: 700 12px/1 var(--ui);
}
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .tool-btn { min-height: 44px; }
}
@media (max-width: 560px) {
  /* Phones: tighter, so the top of the paper still shows above the tab bar. */
  .pg-write main.page { gap: 10px; padding-top: 8px; }
  .pg-write .fw-head { gap: 8px 16px; }
  .pg-write .fw-head .lead { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  .pg-write .head-tools { width: 100%; }
}

/* ---- 2. The prompt card: the topic big, the question as a quote ---- */
.pg-write main.page > .write-band {
  margin: 0;
  padding: 18px 20px 20px;
  background: var(--b-tint);
  border: 0;
  border-radius: var(--r-card);
  box-shadow: none;
}
@media (min-width: 1200px) {
  .pg-write main.page > .write-band { padding: 22px 26px 24px; }
}
.pg-write .prompt-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); }
.pg-write .write-band .kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 700 13px/1.3 var(--ui);
  color: var(--b-strong);
}
.pg-write .write-band .kicker::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--i-write) center / contain no-repeat;
  mask: var(--i-write) center / contain no-repeat;
}
.pg-write .task-tools { flex-wrap: wrap; gap: var(--s-2); }
.pg-write .task-tools .linkbtn {
  min-height: 36px;
  padding: 0 12px;
  background: transparent;
  color: var(--b-strong);
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--b-strong);
}
.pg-write .task-tools .linkbtn:hover,
.pg-write .task-tools .linkbtn[aria-expanded="true"] { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--b-strong); }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .task-tools .linkbtn { min-height: 44px; }
}
.pg-write .before-topic {
  display: block;
  margin: 10px 0 12px;
  padding: 0;
  background: none;
  font: 800 30px/1.3 var(--ui);
  letter-spacing: -0.01em;
}
.pg-write .before-topic:empty { display: none; }
.pg-write .before-topic span {
  padding: 0 3px;
  background-image: linear-gradient(var(--topic-under, var(--y-hl)), var(--topic-under, var(--y-hl)));
  background-repeat: no-repeat;
  background-size: 100% 38%;
  background-position: 0 88%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: fw-topic-in 0.7s 0.15s ease-out both;
}
@keyframes fw-topic-in { from { background-size: 0% 38%; } }
.pg-write .before-question {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: 400 19px/1.5 var(--text);
}
.pg-write .before-question:empty { display: none; }
.pg-write .before-question:not(:empty)::before {
  content: "\201C";
  content: "\201C" / "";
  flex: none;
  margin-top: 4px;
  font: 700 46px/0.8 var(--text);
  color: var(--b-strong);
}
.pg-write .before-question.none { display: block; font-size: 15px; color: var(--pencil); }
.pg-write .before-question.none::before { content: none; }
.pg-write .write-band > div[aria-live] { margin-top: 0; }
.pg-write .skeleton-question { margin: 0 0 var(--s-2); padding: 0; background: transparent; box-shadow: none; }
.pg-write .write-band .chip-status { margin-top: var(--s-2); }
.pg-write .write-band .own input { background: var(--sheet); }
@media (max-width: 560px) {
  .pg-write main.page > .write-band { padding: 12px 14px 14px; }
  .pg-write .prompt-top { gap: 8px; }
  .pg-write .before-topic { margin: 6px 0 8px; font-size: 24px; }
  .pg-write .before-question { font-size: 17px; line-height: 1.45; }
  .pg-write .help-wrap { margin-top: 10px; padding-top: 10px; }
  .pg-write .group-label { margin-bottom: 6px; }
}

/* Under 1200px: the helpers 1 Ideas, 2 Plan, 3 Words, as numbered chips at the foot of the prompt card. */
.pg-write .help-wrap { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--b-strong) 18%, transparent); }
.pg-write .group-label { margin: 0 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--b-strong); }
.pg-write .help-btns { gap: var(--s-2); }
.pg-write .help-btn {
  flex: 1 1 0;
  justify-content: flex-start;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 6px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--sheet);
  color: var(--ink);
  font: 700 14px/1.2 var(--ui);
}
.pg-write .help-btn::before { width: 26px; height: 26px; background: var(--y-hl); color: #1b1d24; font: 800 13px/1 var(--ui); }
.pg-write .help-btn:hover { background: var(--paper); }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .help-btn { min-height: 44px; }
}

/* ---- 3. The paper card: a live length bar in its head, a foot that stays in view ---- */
.pg-write .composer { padding: 0; }
.pg-write .composer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px 18px;
  margin: 0;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--rule);
}
.pg-write .composer-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font: 700 15px/1.25 var(--ui);
  color: var(--ink);
}
.pg-write .composer-label::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--b-strong);
  -webkit-mask: var(--i-write) center / contain no-repeat;
  mask: var(--i-write) center / contain no-repeat;
}
.pg-write .draft-note {
  display: inline-block;
  margin: 0;
  padding: 4px 8px;
  border-radius: var(--r-tag);
  background: var(--b-tint);
  color: var(--b-strong);
  font: 600 12px/1.3 var(--ui);
}
.pg-write .draft-note::before { display: none; }
.pg-write .meter { flex: 1 1 220px; min-width: 200px; display: grid; gap: 6px; }
.pg-write .meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.pg-write #word-count { flex: none; white-space: nowrap; font: 700 13px/1.3 var(--ui); color: var(--ink); }
.pg-write .length-note { margin: 0; text-align: right; font: 600 13px/1.3 var(--ui); color: var(--pencil); }
.pg-write .length-note:empty { display: none; }
.pg-write .length-note.in { display: inline-flex; align-items: center; gap: 4px; color: var(--g-strong); }
.pg-write .length-note.in::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
/* Under 480px the goal line goes under the count, on its own line and to the left, so it never wraps to a lone word. */
@media (max-width: 479px) {
  .pg-write .meter-top { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pg-write .length-note { text-align: left; }
}
.pg-write .meter-bar { position: relative; height: 10px; }
.pg-write .meter-zone {
  position: absolute;
  top: -3px;
  bottom: -3px;
  border-radius: 6px;
  background: var(--g-tint);
  box-shadow: inset 0 0 0 1.5px var(--g-hl);
}
.pg-write .meter-track { position: absolute; inset: 0; border-radius: 999px; background: color-mix(in srgb, var(--rule) 70%, transparent); }
.pg-write .meter-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: var(--b-strong);
  transition: width 0.25s ease-out, background-color 0.25s;
}
.pg-write .meter-fill.in { background: var(--g-strong); }
.pg-write .meter-ticks { position: relative; height: 14px; font: 600 11px/1 var(--ui); color: var(--pencil); }
.pg-write .meter-ticks span { position: absolute; transform: translateX(-50%); }

/* The writing box keeps its font, size and line height (the marks are drawn in #backdrop behind the same
   words); only the room around it changes. */
.pg-write .editor { margin: 10px 24px 8px; }

/* The foot: the quick-tips switch, Check my plan, Check my writing. It stays at the bottom of the screen while the
   card is on it (on phones and tablets above the tab bar). A hint or a failed check shows in it too, so it is
   never out of sight. */
.pg-write .composer-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 12px 20px;
  border-top: 1px solid var(--rule);
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--sheet);
}
.pg-write .foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pg-write .composer-foot .btns { flex-wrap: nowrap; align-items: center; margin-left: auto; }
.pg-write .composer-foot .budget-reason { margin: 0 0 10px; }
.pg-write .composer-foot #warning-notes { margin: 0 0 8px; font-size: 13px; line-height: 1.4; }
.pg-write .composer-foot #message,
.pg-write .composer-foot #message:empty { display: block; margin: 0; }
.pg-write .composer-foot #message:not(:empty) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-chip);
  background: var(--b-tint);
  color: var(--ink);
}
.pg-write .composer-foot #message:not(:empty)::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--b-strong);
  -webkit-mask: var(--i-info) center / contain no-repeat;
  mask: var(--i-info) center / contain no-repeat;
}
/* Check my plan: a quiet link with an icon, never a second button of the same weight. */
.pg-write .composer-foot #plan-check {
  min-height: 40px;
  padding: 0 4px;
  background: none;
  box-shadow: none;
  color: var(--b-strong);
  font: 700 14px/1.2 var(--ui);
}
.pg-write .composer-foot #plan-check:hover { background: none; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }

/* The quick-tips switch: a real checkbox drawn as a small switch (the knob is a gradient, so it works in every browser). */
.pg-write .tips-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  color: var(--pencil);
  font: 600 13px/1.3 var(--ui);
  cursor: pointer;
}
.pg-write .tips-switch input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 36px;
  height: 22px;
  margin: 0;
  border-radius: 999px;
  background-color: var(--rule);
  background-image: radial-gradient(circle at 11px 11px, var(--sheet) 0 8px, transparent 8.5px);
  background-repeat: no-repeat;
  background-size: 22px 22px;
  background-position: 0 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pencil) 45%, transparent);
  cursor: pointer;
  transition: background-position 0.15s ease-out, background-color 0.15s;
}
.pg-write .tips-switch input:checked { background-color: var(--pen); background-position: 14px 0; box-shadow: none; }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .tips-switch { min-height: 44px; }
  .pg-write .composer-foot #plan-check { min-height: 44px; }
}

/* The foot is a container: when its row is too narrow for the switch's whole label next to the two buttons (about 555px
   of room), the label is just "Quick tips", so the foot stays one row from 600px wide (the two-column laptop widths
   from 1200px too, where the writing card is narrower than the page). */
.pg-write .composer-foot { container-type: inline-size; }
@container (max-width: 555px) {
  .pg-write .tips-switch .sw-long { display: none; }
}

/* Phones and tablets: the tab bar is fixed at the bottom, so the foot sits just above it. While I type on a touch
   screen the tab bar steps aside, and the foot goes to the bottom. */
@media (max-width: 900px) {
  /* --foot-bottom is the real height of the tab bar (script.js); --nav-h is the guess before it is measured. */
  .pg-write .composer-foot { bottom: var(--foot-bottom, var(--nav-h)); }
}
@media (max-width: 900px) and (pointer: coarse) {
  .pg-write:has(#essay:focus) .composer-foot { bottom: 0; }
}
/* Under 600px the foot does not stick: it would be two rows tall and cover too much of the paper. It sits at the end of
   the paper card, as before the studio. From 600px it is one row and sticks. */
@media (max-width: 599px) {
  .pg-write .composer-foot { position: static; }
}
@media (max-width: 560px) {
  .pg-write .composer-head { padding: 12px 16px 10px; }
  .pg-write .editor { margin: 8px 16px 6px; }
  .pg-write .composer-foot { padding: 8px 16px; }
  .pg-write .foot-row { gap: 6px 14px; }
  /* The buttons take their places in the foot's row: the switch and "Check my plan" on one line, the big button under them. */
  .pg-write .composer-foot .btns { display: contents; }
  .pg-write .composer-foot .btns .btn { flex: 1 1 100%; }
  .pg-write .composer-foot .btns .wait { flex: 1 1 100%; }
  .pg-write .composer-foot #plan-check { flex: none; }
}

/* ---- The band strip on top of the paper (under 1200px, where the result is below the writing) ---- */
.pg-write .band-strip {
  display: none;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--b-tint);
}
.pg-write .band-strip:focus-visible { outline: 2px solid var(--pen); outline-offset: -3px; }
.pg-write .band-strip .strip-label { font: 700 12px/1.3 var(--ui); color: var(--b-strong); white-space: nowrap; }
.pg-write .band-strip strong { font: 600 22px/1 var(--text); white-space: nowrap; }
@media (max-width: 400px) {
  /* No room for the small label next to the band, the meter and the chip: it stays for a screen reader. */
  .pg-write .band-strip .strip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pg-write .band-strip { gap: 8px; padding-inline: 12px; }
}
.pg-write .band-strip .band-meter { display: flex; gap: 4px; margin: 0; }
.pg-write .band-strip .band-group { display: flex; }
.pg-write .band-strip .band-segs { display: flex; gap: 2px; }
.pg-write .band-strip .band-segs .seg { width: 8px; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--b-strong) 18%, transparent); }
.pg-write .band-strip .band-segs .seg.on { background: var(--b-strong); }
.pg-write .band-strip .band-level { display: none; }
.pg-write .strip-fix {
  margin-left: auto;
  padding: 5px 9px;
  border-radius: var(--r-chip);
  background: var(--p-tint);
  color: var(--p-strong);
  font: 700 13px/1.2 var(--ui);
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .pg-write .band-strip:not([hidden]) { display: flex; }
}

/* ---- 4. The rail: one switch, "Get ready" or "Your result" ---- */
.pg-write .write-side { gap: var(--s-3); }
.pg-write .write-side > * { flex-shrink: 0; }
.pg-write .rail-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--sheet);
}
@media (min-width: 1200px) {
  /* The panel scrolls inside itself; the switch stays at its top. */
  .pg-write .rail-switch { position: sticky; top: 0; z-index: 3; box-shadow: 0 12px 0 var(--paper); }
}
.pg-write .rail-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 42px;
  padding: 0 8px;
  border-radius: 10px;
  background: transparent;
  color: var(--pencil);
  box-shadow: none;
  font: 700 14px/1.2 var(--ui);
}
.pg-write .rail-tab::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.pg-write .r-ready { --icon: var(--i-bulb); }
.pg-write .r-result { --icon: var(--i-target); }
.pg-write .rail-tab:hover:not(:disabled):not([aria-selected="true"]) { background: var(--paper); color: var(--ink); }
.pg-write .rail-tab[aria-selected="true"].r-ready,
.pg-write .rail-tab[aria-selected="true"].r-ready:hover { background: var(--y-tint); color: var(--y-strong); box-shadow: inset 0 0 0 1.5px var(--y-hl); }
.pg-write .rail-tab[aria-selected="true"].r-result,
.pg-write .rail-tab[aria-selected="true"].r-result:hover { background: var(--b-tint); color: var(--b-strong); box-shadow: inset 0 0 0 1.5px var(--b-hl); }
.pg-write .rail-tab:disabled { cursor: default; opacity: 0.6; font-weight: 600; }
.pg-write .rail-tab .s-band { font: 600 15px/1.2 var(--text); }
.pg-write .rail-panel { display: grid; gap: var(--s-4); min-width: 0; }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .rail-tab { min-height: 44px; }
}

/* ---- 5. Get ready: Start here, with a 1-2-3 stepper ---- */
.pg-write .start-here { background: var(--sheet); border: 2px solid var(--y-hl); border-radius: var(--r-card); }
.pg-write .start-here .skill-band { padding: 12px 16px; }
.pg-write .start-here .step-lead { font: 800 16px/1.25 var(--ui); }
.pg-write .start-here .step-lead h2 { font: inherit; letter-spacing: 0; }
.pg-write .start-kicker { margin: 0; font: 600 12px/1.25 var(--ui); }
.pg-write .start-tabs {
  counter-reset: start-step;
  position: relative;
  display: flex;
  gap: 0;
  padding: 14px 10px 4px;
}
.pg-write .start-tabs::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 17%;
  right: 17%;
  height: 2px;
  background: var(--rule);
}
.pg-write .start-tabs:has(.start-tab[hidden])::before { left: 25%; right: 25%; }
.pg-write .start-tab {
  counter-increment: start-step;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-height: 0;
  padding: 0 0 10px;
  border: 0;
  border-radius: var(--r-chip);
  background: none;
  color: var(--pencil);
  box-shadow: none;
  font: 700 13px/1.3 var(--ui);
}
.pg-write .start-tab:hover { background: none; color: var(--ink); }
/* The step's number. The second "content" line is for browsers that know the empty alt text. */
.pg-write .start-tab::before {
  content: counter(start-step);
  content: counter(start-step) / "";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--rule);
  border-radius: 50%;
  background: var(--sheet);
  color: var(--pencil);
  font: 800 14px/1 var(--ui);
}
.pg-write .start-tab:hover::before { border-color: var(--y-hl); }
.pg-write .start-tab.seen::before { border-color: var(--y-hl); color: var(--y-strong); }
.pg-write .start-tab[aria-selected="true"] { color: var(--ink); }
.pg-write .start-tab[aria-selected="true"]::before { border-color: var(--y-strong); background: var(--y-hl); color: #1b1d24; }
.pg-write .start-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 30%;
  right: 30%;
  height: 3px;
  border-radius: 3px;
  background: var(--y-hl);
}
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .start-tab { min-height: 44px; }
}
.pg-write .start-panel { display: grid; gap: 14px; padding: 8px 16px 16px; }
.pg-write .start-panel > .before-part { min-width: 0; padding: 0; }
.pg-write .start-panel .label { margin: 0 0 var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--y-strong); }
.pg-write .start-panel .label.words-label { color: var(--v-strong); }
.pg-write .start-panel .plan-words { margin: 0; font-size: 13px; color: var(--pencil); }
.pg-write .start-next {
  justify-self: start;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: 0 14px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--rule);
  font: 700 14px/1.2 var(--ui);
}
.pg-write .start-next:hover { box-shadow: inset 0 0 0 1px var(--pencil); }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .start-next { min-height: 44px; }
}
/* Ideas: yellow rows with a bulb. */
.pg-write .before-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pg-write .before-ideas li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--y-tint);
  font: 400 15px/1.45 var(--text);
}
.pg-write .before-ideas li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--y-strong);
  -webkit-mask: var(--i-bulb) center / contain no-repeat;
  mask: var(--i-bulb) center / contain no-repeat;
}
/* Skills from Today: outlined rows. */
.pg-write .before-skills { gap: var(--s-2); }
.pg-write .before-skills li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: none; box-shadow: none; }
.pg-write .before-skills b { font: 700 14px/1.3 var(--ui); color: var(--ink); }
.pg-write .before-skills p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--pencil); }
/* Plan: a vertical timeline, one numbered step after the other. */
.pg-write .before-plan { gap: 0; padding: 0; }
.pg-write .before-plan li { padding: 0 0 16px 38px; }
.pg-write .before-plan li:last-child { padding-bottom: 0; }
.pg-write .before-plan li::before {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--y-hl);
  background: var(--y-tint);
  color: var(--y-strong);
  font: 800 12px/1 var(--ui);
}
.pg-write .before-plan li::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 30px;
  bottom: 4px;
  width: 2px;
  background: var(--rule);
}
.pg-write .before-plan li:last-child::after { display: none; }
.pg-write .before-plan .plan-head { gap: 4px 8px; }
.pg-write .before-plan .plan-head b { font: 700 14px/1.3 var(--ui); }
.pg-write .plan-size { padding: 2px 6px; border-radius: var(--r-tag); background: var(--paper); color: var(--pencil); font: 600 11px/1.3 var(--ui); }
.pg-write .before-plan p { font-size: 13px; line-height: 1.45; color: var(--pencil); }
.pg-write .before-plan .plan-head { color: var(--ink); }
.pg-write .before-plan .frame {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: var(--r-chip);
  background: var(--y-tint);
  box-shadow: none;
  color: var(--ink);
  font: italic 400 14px/1.4 var(--text);
}
/* Words: a violet grid. */
.pg-write .word-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.pg-write .word-list li { gap: 3px; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--v-tint); }
.pg-write .word-list li:first-child { border-top: 0; }
.pg-write .word-list li:has(.chip.saved) { box-shadow: inset 0 0 0 1.5px var(--v-strong); }
.pg-write .word-list .chip,
.pg-write .word-list .chip.saved,
.pg-write .word-list button.chip.saved:hover {
  width: 100%;
  min-height: 0;
  justify-content: space-between;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--v-strong);
  font: 700 14px/1.3 var(--ui);
}
.pg-write .word-list .chip.saved .chip-mark { color: var(--v-strong); }
.pg-write .word-list li > strong { font: 700 14px/1.3 var(--ui); color: var(--v-strong); }
.pg-write .word-list .meaning { padding: 0; font-size: 12px; line-height: 1.35; color: var(--pencil); }
.pg-write .more-words {
  justify-self: start;
  min-height: 40px;
  margin-top: var(--s-3);
  padding: 0 12px;
  background: transparent;
  color: var(--v-strong);
  font-weight: 700;
}
.pg-write .more-words:hover { background: var(--v-tint); }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .more-words { min-height: 44px; }
}

/* ---- 6. Your result ---- */
.pg-write #plan-result { scroll-margin-top: 72px; }
.pg-write .plan-result,
.pg-write .notes,
.pg-write .worked,
.pg-write .ledger-part {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: var(--r-card);
  background: var(--sheet);
  box-shadow: none;
}
.pg-write .plan-result > .label,
.pg-write .worked > .label,
.pg-write .skill-uses > .label,
.pg-write .moves > .label {
  width: auto;
  margin: 0 0 var(--s-2);
  padding: 0;
  background: none;
  font: 800 15px/1.3 var(--ui);
}
.pg-write .ledger-part { display: grid; gap: var(--s-3); }
.pg-write .ledger-part .moves { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }

/* The band hero: a blue card with the band big, a meter that fills, what to do next. */
.pg-write .verdict-box.band-box { gap: 0; padding: 16px 18px 18px; background: var(--b-tint); }
.pg-write .bh-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); font: 700 13px/1.3 var(--ui); color: var(--b-strong); }
.pg-write .result-from { margin: 0; color: var(--pencil); font: 600 12px/1.3 var(--ui); }
.pg-write #band {
  width: fit-content;
  margin: 8px 0 4px;
  padding: 0 4px;
  background: none;
  background-image: linear-gradient(var(--b-under), var(--b-under));
  background-repeat: no-repeat;
  background-size: 100% 34%;
  background-position: 0 86%;
  font: 600 48px/1.05 var(--text);
  letter-spacing: 0;
  color: var(--ink);
}
@media (max-width: 560px) {
  .pg-write #band { font-size: 40px; }
}
/* The big meter (the strip above the paper has its own small one). */
.pg-write #band-meter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 10px 0 0; }
.pg-write #band-meter .band-group { display: grid; gap: 6px; justify-items: stretch; }
.pg-write #band-meter .band-segs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.pg-write #band-meter .band-segs .seg { width: auto; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--b-strong) 16%, transparent); transform-origin: left; }
.pg-write #band-meter .band-segs .seg.on { background: var(--b-strong); }
.pg-write #band-meter .band-segs .seg.you { box-shadow: 0 0 0 2px var(--b-tint), 0 0 0 4px var(--b-strong); }
.pg-write #band-meter .band-level { font: 700 12px/1.3 var(--ui); letter-spacing: 0; color: var(--pencil); }
.pg-write #band-meter .band-group.here .band-level { color: var(--b-strong); }
/* A new result: the stroke draws itself and the segments fill from left to right. */
.pg-write #result.play #band { animation: fw-stroke-in 0.7s 0.1s ease-out both; }
.pg-write #result.play #band-meter .seg.on { animation: fw-seg-in 0.22s ease-out both; animation-delay: calc(var(--k) * 70ms + 200ms); }
@keyframes fw-stroke-in { from { background-size: 0% 34%; } }
@keyframes fw-seg-in { from { transform: scaleX(0); } }
.pg-write .band-box .next-step {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  margin: 14px 0 0;
  color: var(--ink);
  font: 600 15px/1.45 var(--ui);
}
.pg-write .band-box .next-step::before {
  content: "1";
  content: "1" / "";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--p-strong);
  color: var(--sheet);
  font: 800 12px/1 var(--ui);
}
.pg-write .band-box .retired-news { margin-top: 14px; }
.pg-write .band-box .skills-line { margin-top: var(--s-3); }
.pg-write .band-box .quiet-note { margin: var(--s-3) 0 0; }
.pg-write .band-box .why-band {
  margin: var(--s-3) 0 0;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--b-strong) 18%, transparent);
}
.pg-write .band-box .why-band > summary {
  width: auto;
  min-height: 0;
  padding: 0;
  gap: 6px;
  background: none;
  box-shadow: none;
  color: var(--b-strong);
  font: 700 14px/1.3 var(--ui);
}
.pg-write .band-box .why-band > summary::before,
.pg-write .band-box .why-band[open] > summary::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: currentColor;
  -webkit-mask: var(--i-chev) center / contain no-repeat;
  mask: var(--i-chev) center / contain no-repeat;
  transition: transform 0.15s;
}
.pg-write .band-box .why-band[open] > summary::before { transform: rotate(90deg); }
.pg-write #band-evidence { font: 400 14px/1.5 var(--ui); }

/* The three tiles: To fix (pink), What worked (green), Ledger (blue). */
.pg-write .res-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--s-2); overflow: visible; }
.pg-write .res-tabs .tile {
  display: grid;
  gap: 4px;
  justify-items: start;
  align-content: start;
  min-height: 0;
  padding: 12px 10px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--sheet);
  color: var(--ink);
  box-shadow: none;
  font: inherit;
  text-align: left;
}
.pg-write .res-tabs .tile:hover { background: var(--paper); box-shadow: none; }
.pg-write .res-tabs .tile .tab-count { font: 800 26px/1 var(--ui); font-variant-numeric: tabular-nums; }
.pg-write .res-tabs .tile .tile-label { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px/1.25 var(--ui); color: var(--pencil); }
.pg-write .res-tabs .tile .tile-label .ic { width: 14px; height: 14px; }
.pg-write .res-tabs .t-fix .tab-count,
.pg-write .res-tabs .t-fix .tile-label { color: var(--p-strong); }
.pg-write .res-tabs .t-ok .tab-count,
.pg-write .res-tabs .t-ok .tile-label { color: var(--g-strong); }
.pg-write .res-tabs .t-led .tab-count,
.pg-write .res-tabs .t-led .tile-label { color: var(--b-strong); }
.pg-write .res-tabs .t-fix[aria-selected="true"],
.pg-write .res-tabs .t-fix[aria-selected="true"]:hover { background: var(--p-tint); border-color: transparent; box-shadow: inset 0 0 0 2px var(--p-hl); }
.pg-write .res-tabs .t-ok[aria-selected="true"],
.pg-write .res-tabs .t-ok[aria-selected="true"]:hover { background: var(--g-tint); border-color: transparent; box-shadow: inset 0 0 0 2px var(--g-hl); }
.pg-write .res-tabs .t-led[aria-selected="true"],
.pg-write .res-tabs .t-led[aria-selected="true"]:hover { background: var(--b-tint); border-color: transparent; box-shadow: inset 0 0 0 2px var(--b-hl); }

/* One note at a time: the open note has its number, its title and the arrows ("2 of 3") in one head row. */
.pg-write .notes-lead { margin: 0 0 var(--s-2); }
.pg-write .notes-list { gap: 0; }
.pg-write .note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  padding: 10px 0;
}
.pg-write .note.current { padding-block: var(--s-3) 0; }
.pg-write .note > .note-num {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  min-width: 24px;
  height: 24px;
  font: 800 12px/24px var(--ui);
}
.pg-write .note > .note-head { grid-column: 2; grid-row: 1; }
.pg-write .note > .note-nav { grid-column: 3; grid-row: 1; margin: 0; gap: 4px; justify-content: flex-end; }
.pg-write .note > .note-body { grid-column: 1 / -1; grid-row: 2; gap: var(--s-3); padding: var(--s-3) 0 var(--s-1); }
.pg-write .note.current .note-title { font: 800 17px/1.3 var(--display); }
.pg-write .note.current .note-toggle::after { display: none; }
.pg-write .note-nav #note-pos { font: 600 13px/1 var(--ui); color: var(--pencil); }
.pg-write .note-nav .note-step { min-width: 32px; min-height: 32px; padding: 0; border-radius: 9px; font-size: 15px; }
@media (pointer: coarse) {
  .pg-write .note-nav .note-step { min-width: 44px; min-height: 44px; }
}
.pg-write .note-quote span { background: color-mix(in srgb, var(--p-hl) 32%, transparent); }
.pg-write .note.lit .note-quote span { background: var(--p-under); }
.pg-write .note-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.pg-write .note-actions .find-btn { --icon: var(--i-target); min-height: 40px; padding: 0 14px; border-radius: 10px; font: 700 14px/1.2 var(--ui); box-shadow: inset 0 0 0 1px var(--rule); }
.pg-write .note-actions .find-btn::before { width: 15px; height: 15px; }
.pg-write .note-actions .fb { margin: 0; }
.pg-write .note-actions:has(.fb-row:not([hidden]), .fb-box:not([hidden])) .fb { flex: 1 1 100%; }
@media (max-width: 560px), (pointer: coarse) {
  .pg-write .note-actions .find-btn { min-height: 44px; }
}

/* What worked: green ticks. */
.pg-write .worked-list { gap: 10px; }
.pg-write .worked-list li { padding-left: 28px; font-size: 15px; line-height: 1.45; }
.pg-write .worked-list li::before {
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--g-strong);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.pg-write .skill-uses { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); }

/* "Next on your to-do" is the last thing in the result: a dashed card. */
.pg-write #fw-todo-next .todo-next {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--rule);
  border-radius: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .pg-write .before-topic span,
  .pg-write #result.play #band,
  .pg-write #result.play #band-meter .seg.on { animation: none; }
  .pg-write .meter-fill,
  .pg-write .tips-switch input { transition: none; }
}
/* ---- The shape of a coach line (28 Oct): a tag for the KIND of line, my words on the highlighter, the one thing to
   do in bold. The same in the Fix it together bubbles and in the "What to fix" items. DESIGN.md "The shape of a line". ---- */
.coach .bubble .bubble-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex-wrap: nowrap; }
.coach .bubble .tag-kind {
  flex: none;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: var(--r-tag, 6px);
  font: 700 11px/1 var(--ui);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.coach .bubble .tag-kind.bad { background: var(--p-tint); color: var(--p-strong); }
.coach .bubble .tag-kind.good { background: var(--g-tint); color: var(--g-strong); }
.coach .bubble .tag-kind.info { background: var(--b-tint); color: var(--b-strong); }
.coach .bubble .tag-kind.shown { background: var(--v-tint); color: var(--v-strong); }
/* The newest line has the colour of its kind on a thin edge, and its dot: no thick stripe on one side. */
.coach .bubble.coach-says.newest { border: 1px solid var(--rule); border-left-width: 1px; }
.coach .bubble.coach-says.newest.kind-bad { border-color: var(--p-hl); }
.coach .bubble.coach-says.newest.kind-good { border-color: var(--g-hl); }
.coach .bubble.coach-says.newest.kind-info { border-color: var(--b-hl); }
.coach .bubble.coach-says.newest.kind-shown { border-color: var(--v-hl); }
.coach .bubble.kind-good .dot { background: var(--g-strong); }
.coach .bubble.kind-info .dot { background: var(--b-strong); }
.coach .bubble.kind-shown .dot { background: var(--v-strong); }
/* My words: on the yellow highlighter. The quote marks are only for a screen reader. */
.coach .bubble q,
.coach .bubble mark.my-words,
.coach .coach-optional q,
.item .why mark.my-words {
  quotes: none;
  font-style: normal;
  color: var(--ink);
  background: var(--marker-soft);
  border-radius: 3px;
  padding: 0 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.coach mark.my-words .qc, .item mark.my-words .qc { display: none; }
.coach .bubble q.right, .coach .coach-optional q.right { background: var(--g-tint); color: var(--g-strong); font-weight: 600; }
/* The one thing to do: bold, on its own line. */
.coach .bubble .say .ask { display: block; margin-top: var(--s-1); font-weight: 700; }
.coach .bubble p.action { font-weight: 700; }
.coach .bubble .ending-label { font: 700 14px/1.4 var(--ui) !important; color: var(--ink) !important; }
.coach .ending .added { color: var(--ink); font-weight: 800; }
.coach .ending .mine { font-weight: 400; color: var(--pencil); }
.coach .bubble .example-line { font: 400 16px/1.5 var(--text); padding: 8px 10px; background: var(--b-tint); border-radius: var(--r-chip); }
.coach .bubble .example-line b { font-weight: 800; background: var(--y-tint); padding: 0 2px; }
/* The "What to fix" items: my words marked, the action in bold. */
.item .yours q { background: var(--marker-soft); color: var(--ink); padding: 1px 4px; border-radius: 3px; font-weight: 500; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.item .fix { font-weight: 600; }
.item .fix b { font-weight: 800; }

/* ==== Public writing guides (make-guides.js, 2026-10-28) ====
   Static pages for search engines and learners who are not signed in: /guides/*.html. They reuse the landing page's
   header, footer and wrap (.lp-top, .lp-foot, .lp-wrap) and add the article parts below. One column, 16px gutters,
   a 720px reading width. Yellow is the highlighter of the skill; the model text uses the same <mark> as the skill card. */
body.pg-guide .guide { width: min(720px, 100%); margin-inline: auto; padding: var(--s-4) 0 var(--s-8); }
body.pg-guide .guide-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); list-style: none; margin: 0 0 var(--s-5); padding: 0; font-size: var(--fs-small); color: var(--pencil); }
body.pg-guide .guide-crumbs li + li::before { content: "›"; margin-right: var(--s-2); color: var(--pencil); }
body.pg-guide .guide-crumbs a { color: var(--pencil); text-decoration: underline; text-underline-offset: 3px; }
body.pg-guide .guide-head { margin-bottom: var(--s-6); }
body.pg-guide .guide-tag { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
body.pg-guide .guide-tag span { padding: 2px 8px; border-radius: var(--r-tag); background: var(--y-tint); color: var(--y-strong); font-weight: 800; }
body.pg-guide h1 { margin: 0 0 var(--s-3); font: 800 var(--fs-title)/1.15 var(--display); color: var(--ink); }
body.pg-guide .guide-lead { margin: 0; font: 400 18px/1.55 var(--text); color: var(--ink); }
body.pg-guide .guide section { margin-top: var(--s-7); }
body.pg-guide .guide h2 { margin: 0 0 var(--s-3); font: 800 var(--fs-h2)/1.25 var(--display); color: var(--ink); }
body.pg-guide .guide section > p, body.pg-guide .guide .guide-more { font: 400 16px/1.65 var(--text); }
body.pg-guide .guide a { color: var(--b-strong); text-underline-offset: 3px; }
body.pg-guide .guide .btn { display: inline-flex; align-items: center; color: var(--pen-on); text-decoration: none; }
body.pg-guide .guide-topic { margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--pencil); }
body.pg-guide .guide-phrases { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
body.pg-guide .guide-phrases li { padding: 6px 12px; border-radius: var(--r-chip); background: var(--v-tint, var(--sheet)); box-shadow: inset 0 0 0 1px var(--rule); font: 500 15px/1.4 var(--text); }
body.pg-guide .guide-model { margin: 0; padding: var(--s-5); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
body.pg-guide .guide-model p { margin: 0; font: 400 17px/1.7 var(--text); }
body.pg-guide .guide-model mark { background: var(--marker-soft); color: var(--ink); padding: 0 2px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
body.pg-guide .guide-task { padding: var(--s-4); margin: 0; background: var(--b-tint); border-radius: var(--r-card); font: 500 17px/1.55 var(--text); }
body.pg-guide .guide-cta { margin-top: var(--s-8); padding: var(--s-6); background: var(--y-tint); border: 1px solid var(--rule); border-radius: var(--r-card); }
body.pg-guide .guide-cta h2 { margin-bottom: var(--s-2); }
body.pg-guide .guide-cta p { margin: 0 0 var(--s-4); font: 400 16px/1.55 var(--text); }
body.pg-guide .guide-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
body.pg-guide .guide-pager a { display: block; padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); color: var(--ink); text-decoration: none; font-weight: 600; min-height: 48px; }
body.pg-guide .guide-pager a:hover { border-color: var(--b-hl); }
body.pg-guide .guide-pager small { display: block; margin-bottom: var(--s-1); font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
body.pg-guide .guide-next { text-align: right; grid-column: 2; }
body.pg-guide .guide-prev { grid-column: 1; }
body.pg-guide .guide-more { margin-top: var(--s-5); text-align: center; }
body.pg-guide .guide-stage h2 { font-size: var(--fs-h3); }
body.pg-guide .guide-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: var(--s-2); }
body.pg-guide .guide-list li { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-chip); }
body.pg-guide .guide-list a { font-weight: 700; }
body.pg-guide .guide-list span { font-size: 14px; color: var(--pencil); }
body.pg-guide .guide-level { margin-top: var(--s-8); }
@media (max-width: 480px) {
  body.pg-guide h1 { font-size: 24px; }
  body.pg-guide .guide-pager { grid-template-columns: 1fr; }
  body.pg-guide .guide-next, body.pg-guide .guide-prev { grid-column: 1; text-align: left; }
  body.pg-guide .lp-top-cta { display: inline-flex; }
}

/* The landing page's pointer to the public guides (2026-10-28): one card. */
.lp-guides-card { padding: var(--s-6); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); display: grid; gap: var(--s-3); justify-items: start; }
.lp-guides-card h2 { margin: 0; }
.lp-guides-card p { margin: 0; max-width: 60ch; font: 400 16px/1.55 var(--text); color: var(--pencil); }

/* The common-mistake guides (make-guides.js, 2026-10-28): wrong words struck on pink, right words on the green stroke. */
body.pg-guide .guide-pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
body.pg-guide .guide-pairs li { padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); display: grid; gap: var(--s-2); }
body.pg-guide .guide-pairs p { margin: 0; font: 400 17px/1.6 var(--text); }
body.pg-guide .guide-pairs b { display: inline-block; min-width: 3.5em; margin-right: var(--s-2); font: 800 12px/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
body.pg-guide .guide-wrong b { color: var(--p-strong, var(--ink)); }
body.pg-guide .guide-right b { color: var(--g-strong); }
body.pg-guide .guide-pairs del { text-decoration: line-through; text-decoration-color: var(--p-strong, currentColor); background: var(--p-tint, transparent); padding: 0 2px; border-radius: 3px; }
body.pg-guide .guide-pairs ins { text-decoration: none; padding: 0 2px; background: linear-gradient(transparent 58%, var(--g-under) 58%, var(--g-under) 94%, transparent 94%); }
body.pg-guide .guide-hint { font-size: var(--fs-small); font-weight: 600; color: var(--pencil); }
body.pg-guide .guide-sub { margin: var(--s-5) 0 var(--s-2); font: 800 var(--fs-h3)/1.3 var(--display); }
body.pg-guide .guide-examples, body.pg-guide .guide-traps { margin: 0; padding-left: var(--s-6); display: grid; gap: var(--s-2); font: 400 16px/1.6 var(--text); }
body.pg-guide .guide-pattern { padding: var(--s-3) var(--s-4); background: var(--y-tint); border-radius: var(--r-chip); }
body.pg-guide .guide-touches { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font: 400 16px/1.5 var(--text); }
body.pg-guide .guide-level-tag { display: inline-block; margin-left: var(--s-2); padding: 1px 6px; border-radius: var(--r-tag); background: var(--y-tint); color: var(--y-strong); font: 800 12px/1.4 var(--display); }

/* The "Updated" line of a guide (make-guides.js, 2026-10-29). */
body.pg-guide .guide-updated { margin: calc(var(--s-3) * -1) 0 var(--s-4); font-size: var(--fs-small); color: var(--pencil); }

/* Guide pages, SEO pass (2026-10-29): the searchable name under the H1, the "who is it for" line, and Related guides. */
body.pg-guide .guide-name { margin: calc(var(--s-1) * -1) 0 var(--s-3); font: 600 15px/1.4 var(--display); color: var(--pencil); }
body.pg-guide .guide-for { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--pencil); }
body.pg-guide .guide-related { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font: 400 16px/1.5 var(--text); }

/* Settings: "Where visitors come from" (public/traffic.js, owner only). Plain bars made of divs. */
.traffic-days { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0; }
.traffic-day { min-height: 44px; }
.traffic-day[aria-pressed="true"] { background: var(--pen); color: var(--pen-on); border-color: var(--pen); }
.traffic-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.traffic-bar { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); font-size: var(--fs-small); }
.traffic-bar-label { overflow-wrap: anywhere; }
.traffic-bar-track { height: 14px; background: var(--rule); border-radius: 7px; overflow: hidden; }
.traffic-bar-fill { display: block; height: 100%; background: var(--pen); border-radius: 7px; min-width: 2px; }
.traffic-bar-count { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--pencil); }
.traffic-spark { display: flex; align-items: flex-end; gap: 2px; height: 64px; }
.traffic-spark span { flex: 1 1 0; min-width: 1px; background: var(--pen); border-radius: 2px 2px 0 0; }
.traffic-spark span.zero { background: var(--rule); }
.traffic-daylist { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--fs-small); }
.traffic-dayrow { display: grid; grid-template-columns: 8.5em 6.5em minmax(0, 1fr); gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-top: 1px solid var(--rule); }
.traffic-dayrow:first-child { border-top: 0; }
.traffic-daycount { font-variant-numeric: tabular-nums; }
.traffic-dayfrom { color: var(--pencil); overflow-wrap: anywhere; }
@media (max-width: 480px) { .traffic-dayrow { grid-template-columns: 1fr auto; } .traffic-dayfrom { grid-column: 1 / -1; } }
.traffic-list { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-1); font-size: var(--fs-small); }
.traffic-list li { overflow-wrap: anywhere; }
.traffic-list .traffic-n { color: var(--pencil); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .traffic-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .traffic-bar-track { grid-column: 1 / -1; grid-row: 2; }
}


/* "BetterWrite is updating" (public/server-retry.js, 2026-10-29): a calm note at the bottom while the app restarts
   and a request is being sent again. Blue (writing), above the phone tab bar. */
.update-note {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + 64px);
  transform: translateX(-50%);
  z-index: 1000;
  max-width: calc(100vw - 32px);
  padding: var(--s-3) var(--s-4);
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--pen);
  border-radius: var(--r-btn);
  box-shadow: 0 6px 24px rgba(20, 30, 60, 0.12);
  font-size: var(--fs-small);
  text-align: center;
}
@media (min-width: 901px) { .update-note { bottom: var(--s-5); } }

/* The reminder email question (reminder-optin.js): a small white card on the Day done screen and the all-done card. */
.reminder-ask { margin: var(--s-5) 0 0; padding: var(--s-4); background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-card); }
.reminder-ask h3 { margin: 0 0 var(--s-2); font: 700 17px/1.3 var(--display); }
.reminder-ask .reminder-note { margin: 0 0 var(--s-3); font: 400 14px/1.5 var(--ui); color: var(--pencil); }
.reminder-ask .btns { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.reminder-ask .btn { min-height: 48px; }
.reminder-ask .reminder-status { margin: var(--s-2) 0 0; font: 500 15px/1.4 var(--ui); color: var(--g-strong); }
.reminder-ask .reminder-status:empty { display: none; }
@media (max-width: 480px) { .reminder-ask .btn { flex: 1 1 100%; } }