/* Polyglot stylesheet: one file for the whole site. Theme tokens (light, then dark via prefers-color-scheme and data-theme) come first,
   then base elements, header, hero, vocabulary/verb tables, the world map and country guide, then one block per feature page
   (calculator, ranking, book, flashcards, history, trip sheet, search, pair, progress, methods, drills, industry packs).
   Later sections override earlier ones on purpose (Refresh, Garden and Pastels restyle the originals), so DO NOT reorder rules. */
/* "Garden": earthy sand / espresso grounds, leaf green as the signature, mustard banners, brick-red highlights, blue oceans. */
:root {
  --h: 186;                      /* set per language by app.js; no longer drives the palette */
  --bg: #f7efe2; --surface: #fdf7ee; --ink: #2a1f16; --muted: #6f5f4c; --line: #e6d8c3;
  --accent: #2f6b3a;             /* leaf green, readable as text */
  --accent-ink: #ffffff; --accent-soft: #e2eed7; --accent-2: #4f9a55; --ice: #4f9a55;
  --stamp: #c2452d;              /* brick red: small highlights */
  --stamp-soft: #f8e0d6; --moss: #2f6b3a; --moss-soft: #e2eed7;
  --hero-bg: #f5d77f;            /* mustard yellow banners */
  --hero-ink: #2a1f16; --hero-muted: #5e4a2c; --hero-accent: #b23a24;
  --hero-card: rgba(255,255,255,.45); --hero-line: rgba(42,31,22,.12);
  --land: #eadcc4; --land-hover: #d9c6a6; --ocean: #cfe5f1;
  --blank: #fffaf2;
  --radius: 18px;
  --serif: "Syne", "Avenir Next", system-ui, sans-serif;                  /* display */
  --sans: "Figtree", "Noto Serif Tibetan", system-ui, -apple-system, sans-serif;                /* body */
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;           /* labels & numbers */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #2a1d13; --surface: #36271b; --ink: #f6ecdf; --muted: #c2ae96; --line: #4b3828;
    --accent: #9fd68f; --accent-ink: #11200e; --accent-soft: #263321; --accent-2: #7cc26f; --ice: #7cc26f;
    --stamp: #ff8a6b; --stamp-soft: #3b1f16; --moss: #9fd68f; --moss-soft: #263321;
    --hero-bg: #3d2a14; --hero-ink: #f6ecdf; --hero-muted: #dcc4a0; --hero-accent: #f5c451;
    --hero-card: rgba(245,196,81,.08); --hero-line: rgba(245,196,81,.2);
    --land: #d8bf6a; --land-hover: #e9d79a; --ocean: #9fcfee; --blank: #2f2117;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2a1d13; --surface: #36271b; --ink: #f6ecdf; --muted: #c2ae96; --line: #4b3828;
  --accent: #9fd68f; --accent-ink: #11200e; --accent-soft: #263321; --accent-2: #7cc26f; --ice: #7cc26f;
  --stamp: #ff8a6b; --stamp-soft: #3b1f16; --moss: #9fd68f; --moss-soft: #263321;
  --hero-bg: #3d2a14; --hero-ink: #f6ecdf; --hero-muted: #dcc4a0; --hero-accent: #f5c451;
  --hero-card: rgba(245,196,81,.08); --hero-line: rgba(245,196,81,.2);
  --land: #d8bf6a; --land-hover: #e9d79a; --ocean: #9fcfee; --blank: #2f2117;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  transition: background .4s;
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
a { color: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* Only the top row stays pinned; section links and level tabs scroll away with the page (design review 2026-09-27). */
.sub-header { border-bottom: 1px solid var(--line); padding-top: 10px; }
/* Level tabs only on the four lesson pages. */
:root:not([data-level="tourist"]):not([data-level="traveler"]):not([data-level="expat"]):not([data-level="native"]) #level-nav { display: none; }
/* Phones and tablets (any touch screen, whatever width the app reports): nothing pinned, so the header never covers the rows under it. */
@media (max-width: 640px), (pointer: coarse) { .site-header { position: relative; } }
/* Phones: tap targets at least 36 px tall (accessibility pass, 13 Oct 2026); the look is unchanged on desktop. */
@media (max-width: 640px) {
  .chip, .top-link, .guide-link, .theme-btn, .family-btn, .profile-btn, .nat-chip, .level-tab, .link-btn, .linklike { min-height: 36px; }
  .chip, .top-link, .guide-link, .theme-btn, .family-btn, .nat-chip, .link-btn, .linklike { display: inline-flex; align-items: center; }
  .link-btn, .linklike { padding: 6px 0; }
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 10px; }
.brand { font: italic 400 27px var(--serif); letter-spacing: -.01em; color: var(--ink); text-decoration: none; }
.lang-field { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lang-field input {
  width: 160px; padding: 7px 10px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.lang-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Tappable language suggestions on touch screens (app.js showLangSuggest). */
.lang-field { position: relative; }
.lang-suggest {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60; width: min(320px, 100%);
  margin: 0; padding: 4px; list-style: none; max-height: 50vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.lang-suggest button {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; text-align: start;
  font: inherit; font-size: 16px; color: var(--ink); background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.lang-suggest button small { color: var(--muted); font-size: 14px; margin-inline-start: 6px; }
.lang-suggest button:active, .lang-suggest button:hover { background: var(--accent-soft); }

.levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-bottom: 12px; }
.level-tab {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; color: var(--ink); text-decoration: none;
  border: 1px solid transparent;
}
.level-tab:hover { background: var(--surface); }
.level-tab.active { background: var(--surface); border-color: var(--line); }
.step {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--line); color: var(--muted);
}
.level-tab.active .step { background: var(--accent); color: var(--accent-ink); }
.level-tab .step { background: transparent; border: 1.5px solid var(--line); color: var(--muted); font-family: var(--mono); }
.level-tab.active { border-color: var(--line); box-shadow: inset 0 -3px 0 var(--accent); }
.tab-text { display: flex; flex-direction: column; line-height: 1.2; }
.tab-text small { color: var(--muted); font-size: 12px; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 48px 28px 24px; margin-top: 20px; border-radius: 20px; overflow: hidden; color: #fff;
  color: var(--hero-ink); background-color: var(--hero-bg);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--hero-ink) 14%, transparent) 1px, transparent 0);
  background-size: 22px 22px; }   /* faint map-grid dots */
.hero::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 26%, transparent), transparent 65%); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: -10%; bottom: -60%; width: 45%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--stamp) 16%, transparent), transparent 65%); pointer-events: none; }
.hero > * { position: relative; }
.hero .eyebrow { color: var(--hero-accent); }
.hero h1 { font-style: italic; font-weight: 500; letter-spacing: -.02em; }
.hero .tagline { color: var(--hero-muted); }
.hero .facts div { background: var(--hero-card); border-color: var(--hero-line); backdrop-filter: blur(6px); }
.hero .facts dt { color: var(--hero-accent); }
.hero .facts dd { color: var(--hero-ink); }
.eyebrow { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.hero h1 { font-size: clamp(44px, 8vw, 76px); line-height: 1.0; }
.tagline { font-size: 19px; color: var(--muted); margin: 8px 0 24px; }
.facts { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin: 0; }
.facts div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.facts dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.facts dd { margin: 4px 0 0; }

/* ---------- Sections ---------- */
.section { padding-top: 40px; }
.section h2 { font-size: 26px; display: flex; align-items: center; gap: 12px; }
.sec-num {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font: 600 14px var(--mono);
}
.section-lede { color: var(--muted); margin: 6px 0 18px; max-width: 70ch; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent); opacity: 0; transition: opacity .2s; }
.card h3 { font-size: 18px; }
.card h3 small { font: 400 13px var(--sans); color: var(--muted); }
.card p { margin: 8px 0 0; }
.mt { margin-top: 20px; }

.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tags span { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.tags.verbs span { font-size: 13px; }

/* ---------- Vocabulary tables ---------- */
.vocab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.count { font: 600 20px var(--mono); color: var(--accent); font-variant-numeric: tabular-nums; }
h3 .count { font-size: 18px; margin-left: 6px; }
.baseline { font-size: 12px; color: var(--muted); margin-top: 2px !important; }

.word-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.word-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 0 0 6px; }
.word-table td { padding: 5px 0; border-top: 1px solid var(--line); width: 50%; }
.word-table td.blank, .conj-table td.blank { background: var(--blank); }
.word-table td.blank { border-left: 8px solid var(--surface); }

.themes { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.theme-row { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.num { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* ---------- Verbs ---------- */
.verb-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.tenses { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.tenses strong { display: block; }
.tenses span { color: var(--muted); font-size: 14px; }

.review { font-size: 14px; background: var(--accent-soft); border-radius: 8px; padding: 8px 12px; margin-top: 10px !important; }
.review span { font-weight: 600; color: var(--accent); }

.grammar { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.grammar h3 { font-size: 18px; }
.grammar .section-lede { margin-bottom: 12px; }
.grammar-list { margin: 0; padding-left: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.grammar-list strong { display: block; }
.grammar-list span { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .grammar-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grammar-list { grid-template-columns: 1fr; } }

.grid-scroll { overflow-x: auto; margin-top: 12px; }
.conj-table { border-collapse: collapse; min-width: 100%; font-size: 14px; }
.conj-table th, .conj-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.conj-table th { font-size: 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.conj-table td:first-child { white-space: nowrap; }
.conj-table td.blank { min-width: 110px; }
.phrase { color: var(--muted); font-size: 14px; }
.phrase span { font-weight: 600; color: var(--ink); margin-right: 6px; }

/* ---------- World map ---------- */
.map-section { padding-top: 24px; }
.map-section h2 { font-size: 22px; }
.map-lede { margin: 0; }
.map-box { position: relative; margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.world { display: block; width: 100%; height: auto; }
/* Before map.js draws the SVG, hold the space it will take (same 900 × 440.7 ratio as the world map) so the page does not jump. */
#map:empty::before { content: ""; display: block; aspect-ratio: 900 / 440.70631074413296; }
.world path { fill: var(--land); stroke: var(--bg); stroke-width: .6; transition: fill .15s; cursor: pointer; outline: none; }
.world path:hover, .world path:focus-visible { fill: var(--land-hover); }
.world path.speaks { fill: var(--accent); }
.world path.speaks:hover, .world path.speaks:focus-visible { fill: var(--stamp); }
.map-box { background: var(--surface); }
.flag { font-size: 28px; line-height: 1; margin-right: 8px; vertical-align: -3px; }
.map-tip strong { display: flex; align-items: center; gap: 6px; }
.map-tip .flag { font-size: 30px; }
.panel-head h2 .flag { font-size: 34px; }
.map-tip { position: absolute; z-index: 5; max-width: 260px; background: var(--surface); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); font-size: 13px; pointer-events: auto; }
.map-tip strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .world path { transition: none; } }

.map-tip .about { display: block; margin-top: 8px; }

/* ---------- Country panel ---------- */
.panel-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(20, 18, 15, .45); display: flex; justify-content: flex-end; }
.panel-inner { width: min(560px, 100%); height: 100%; overflow-y: auto; color: var(--ink);
  background: var(--bg);
  padding: 20px 20px 40px; box-shadow: -8px 0 30px rgba(0,0,0,.2); padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
body.panel-open { overflow: hidden; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.panel-head h2 { font-size: 32px; line-height: 1.1; margin: 2px 0 8px; }
.close { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 16px 0 0; }
.facts-grid div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.facts-grid dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.facts-grid dd { margin: 2px 0 0; font-size: 14px; }
.panel-sec { margin-top: 22px; }
.panel-sec h3 { font-size: 19px; margin-bottom: 6px; }
.panel-sec p { margin: 6px 0 0; font-size: 15px; }
.known, .apps { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.known li, .apps li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.known strong, .apps strong { display: block; }
.known span, .apps > li > span { color: var(--muted); }
.app-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cat { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.songs { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.songs li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.songs strong { display: block; }
.song-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.song-artist { display: block; color: var(--accent); font-weight: 600; font-size: 13px; }
.songs > li > span:not(.cat):not(.song-artist) { color: var(--muted); }
.song-links { display: flex; gap: 8px; margin-top: 6px; }
.song-links a { font: 600 12px var(--sans); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--blank); }
.song-links a:hover { border-color: var(--accent); color: var(--accent); }
.panel-empty { color: var(--muted); margin-top: 16px; }
@media (max-width: 640px) { .facts-grid { grid-template-columns: 1fr 1fr; } .panel-head h2 { font-size: 26px; } }

/* ---------- Fill-in bar and ready list ---------- */
.fill-bar { padding-top: 16px; }
.fill-bar:empty { display: none; }
.fill-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.fill-row > div:first-child { flex: 1; min-width: 200px; }
.fill-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fill-count { color: var(--muted); font-size: 13px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.progress { height: 4px; background: var(--line); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.fill-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.ready .chip.has { background: var(--moss-soft); color: var(--moss); }
.header-row { flex-wrap: wrap; }
.header-row .brand { margin-right: auto; }
/* Globe beside the name (owner, 1 Oct): the whole brand link goes back to the home page. */
.brand { display: inline-flex; align-items: center; gap: .3em; }
.brand-globe { width: .85em; height: .85em; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.link-row code { font-size: 12px; background: var(--blank); border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; color: var(--ink); word-break: break-all; }
.link-box { font: 12px var(--sans); width: 100%; padding: 6px 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--ink); }
.book-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.book-langs select { font: 13px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; }
.chip-x { border: 0; background: transparent; color: inherit; font-size: 14px; line-height: 1; padding: 0 0 0 4px; cursor: pointer; }
.ready { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--muted); }
.btn { font: 600 14px var(--sans); padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.btn:focus-visible, .gen:focus-visible, .chip:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gen { font: 600 13px var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); cursor: pointer; white-space: nowrap; }
.gen:hover { background: var(--accent-soft); }
.gen.redo { border-color: var(--line); color: var(--muted); font-weight: 500; }
.gen.busy { border-style: dashed; cursor: default; animation: pulse 1.4s ease-in-out infinite; display: inline-block; }
@keyframes pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .gen.busy { animation: none; } .progress span { transition: none; } }
.gen-error { color: #b4442f; font-size: 13px; }
.gen-row { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card-head .gen { flex: none; }

.focus { color: var(--muted); font-size: 13px; }
.card p + p { margin-top: 8px; }
.t { font-weight: 600; }
.r { display: block; color: var(--muted); font-size: 12px; font-style: italic; }
.note { display: block; color: var(--muted); font-size: 12px; }
.word-table td.filled { border-left: 8px solid var(--surface); }
.examples { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.examples li { background: var(--blank); border-radius: 8px; padding: 8px 10px; font-size: 14px; }
.examples .e { display: block; color: var(--muted); font-size: 13px; }
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 12px; }
.char { background: var(--blank); border: 1px solid var(--line); border-radius: 8px; padding: 6px; text-align: center; display: flex; flex-direction: column; }
.char .c { font-size: 22px; line-height: 1.3; }
.char .cr { font-size: 12px; font-weight: 600; color: var(--accent); }
.char .cn { font-size: 11px; color: var(--muted); line-height: 1.3; }
.g-text p { margin: 4px 0 0; font-size: 14px; }
.note-line { color: var(--muted); font-size: 13px; }

details summary { list-style: none; cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details summary .theme-row span:first-child::after { content: " ▸"; color: var(--muted); font-size: 11px; }
details[open] summary .theme-row span:first-child::after { content: " ▾"; }
.theme-body { padding: 4px 0 8px; }
.theme-body .word-table { margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { font: 13px var(--sans); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.chip.has { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.chip .t, .chip .r { display: inline; font-style: normal; font-size: inherit; color: inherit; }
.conj-table td.filled { font-size: 14px; }
.card-head h3 small { font: 400 13px var(--sans); color: var(--muted); }

.pager { display: flex; justify-content: space-between; padding: 40px 0 8px; font-weight: 600; }
.pager a { text-decoration: none; }
.site-footer { color: var(--muted); font-size: 13px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--line); margin-top: 24px; }

@media (max-width: 900px) {
  .intro-grid, .vocab-grid { grid-template-columns: 1fr 1fr; }
  .verb-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .header-row { flex-wrap: wrap; }
  .lang-field { width: 100%; }
  .lang-field input { flex: 1; width: auto; }
  .levels { grid-template-columns: repeat(2, 1fr); }
  .intro-grid, .vocab-grid, .facts { grid-template-columns: 1fr; }
  .hero { padding-top: 28px; }
}

/* ---------- "How long will it take?" guide (#proficiency) ---------- */
.guide-link { font: 600 14px var(--sans); color: var(--accent); text-decoration: none; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); }
.guide-link:hover { border-color: var(--accent); }
.facts:has(> div:nth-child(4)) { grid-template-columns: 2fr 1fr 1fr 1fr; }
.hero-btn { display: inline-block; margin-top: 16px; text-decoration: none; background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.hero-btn:hover { background: rgba(255,255,255,.28); }
.hero-btn .btn-icon { vertical-align: -3px; margin-right: 6px; }   /* Flashcards button in the level hero */
.calc::before { opacity: 1; background: var(--accent); }
.calc-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 150px; gap: 12px; }
.calc-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.calc-fields input, .calc-fields select { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; text-transform: none; letter-spacing: 0; }
.calc-fields input:focus, .calc-fields select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-answer { margin: 20px 0 12px; }
.calc-lede { margin: 0; color: var(--muted); }
.calc-big { font: 400 60px/1 var(--serif); letter-spacing: -.02em; margin: 6px 0; color: var(--accent); font-variant-numeric: tabular-nums; }
.calc-day { margin: 0; font-size: 17px; }
.calc-msg { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); }
.calc-table, .guide-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.calc-table th, .calc-table td, .guide-table th, .guide-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.calc-table thead th, .guide-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.calc-table tr.on td { background: var(--accent-soft); font-weight: 600; }
.guide-table tbody th { font-weight: 600; }
.table-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.cefr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cefr-code { display: inline-block; min-width: 38px; padding: 2px 8px; margin-right: 4px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font: 650 16px var(--sans); text-align: center; }
.cefr-topics { color: var(--muted); font-size: 14px; }
.guide-list { margin: 10px 0 0; padding-left: 18px; }
.guide-list li { margin: 4px 0; }
@media (max-width: 900px) { .calc-fields, .cefr-grid { grid-template-columns: 1fr 1fr; } .facts:has(> div:nth-child(4)) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .calc-fields, .cefr-grid, .facts:has(> div:nth-child(4)) { grid-template-columns: 1fr; } .calc-big { font-size: 32px; } .calc-table { font-size: 13px; } .calc-table th, .calc-table td { padding: 6px; } }

/* ---------- Refresh: labels, stamps, boarding pass, theme switch ---------- */
.eyebrow, .facts dt, .calc-fields label, .calc-table thead th, .guide-table thead th, .word-table th, .conj-table th, .fill-count, .baseline, .num {
  font-family: var(--mono); letter-spacing: .06em; }
.eyebrow { color: var(--stamp); }
.hero { padding: 44px 28px 26px; border-radius: 22px; }
.hero h1 { font-style: normal; font-weight: 400; letter-spacing: -.025em; line-height: .95; }
.hero-num { position: absolute; right: 24px; top: 4px; font: italic 400 clamp(100px, 18vw, 210px)/1 var(--serif); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--hero-ink) 30%, transparent); pointer-events: none; user-select: none; }
.card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: 0 10px 28px -18px color-mix(in srgb, var(--accent) 60%, transparent); }
.card:hover::before { opacity: 1; }
.calc:hover { transform: none; }
.sec-num { border-radius: 8px; }
.btn, .gen, .guide-link, .hero-btn { transition: background .15s, color .15s, border-color .15s, transform .15s; }
.btn:hover, .guide-link:hover, .hero-btn:hover { transform: translateY(-1px); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.guide-link { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; }
.guide-link::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 2px var(--accent); }
.theme-btn { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.theme-btn:hover { color: var(--ink); border-color: var(--ink); }
.theme-btn:focus-visible, .guide-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Calculator as a boarding pass: a perforated tear line with punched notches. */
.calc { padding: 22px; }
#calc-result { position: relative; margin-top: 22px; padding-top: 6px; border-top: 2px dashed var(--line); }
#calc-result::before, #calc-result::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--line); }
#calc-result::before { left: -35px; }
#calc-result::after { right: -35px; }
.calc-big { display: inline-block; background: linear-gradient(transparent 70%, color-mix(in srgb, var(--ice) 45%, transparent) 0); padding-right: 8px; }
.calc-msg { background: var(--stamp-soft); border-left: 3px solid var(--stamp); }

/* CEFR codes look like passport stamps. */
.cefr-code { background: transparent; color: var(--stamp); border: 2px solid var(--stamp); border-radius: 6px; font-family: var(--mono);
  transform: rotate(-4deg); }
.card:hover .cefr-code { transform: rotate(0); transition: transform .2s; }

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .gen, .guide-link, .hero-btn, .cefr-code { transition: none; }
  .card:hover, .btn:hover, .guide-link:hover, .hero-btn:hover { transform: none; }
}
@media (max-width: 640px) { .hero-num { font-size: 84px; right: 12px; } .calc { padding: 18px; } #calc-result::before { left: -31px; } #calc-result::after { right: -31px; } }

/* Glacier & Rust details: double rules under section heads, italic accents in headings, hero on glacier. */
.section h2 { font-size: 34px; padding-bottom: 10px; border-bottom: 3px double var(--line); }
.section h2 em, .hero h1 em { font-style: italic; color: var(--accent); }
.hero h1 em { color: var(--hero-accent); }
.hero .facts dt { color: var(--hero-muted); }
.hero-btn { background: var(--hero-ink); border-color: transparent; color: var(--hero-bg); }
.hero-btn:hover { background: var(--hero-ink); opacity: .9; }
.card h3 { font-size: 22px; }
.card-head h3 small, .card h3 small { font-family: var(--sans); }
.panel-head h2 { font-size: 36px; }
.calc-table tr.on td { background: color-mix(in srgb, var(--ice) 30%, transparent); }
.chip.has { background: var(--moss-soft); color: var(--moss); }
.world path.speaks { fill: var(--accent); }

/* Calculator: extra languages (up to five), each a row under "I want to learn". */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.calc-more { display: grid; gap: 8px; margin-top: 8px; }
.calc-more:empty { display: none; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr 1fr 150px; gap: 12px; align-items: center; }
.calc-row > label { display: block; }
.calc-row select { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; width: 100%; }
.calc-row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-and { justify-self: end; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.calc-add { grid-column: 2 / 4; text-align: left; font: 500 15px var(--sans); color: var(--muted); background: transparent;
  border: 1.5px dashed var(--line); border-radius: 8px; padding: 9px 12px; cursor: pointer; opacity: .75; transition: opacity .15s, color .15s, border-color .15s; }
.calc-add small { font-size: 12px; }
.calc-add:hover, .calc-add:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); outline: none; }
.calc-remove { justify-self: start; font: 500 13px var(--sans); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.calc-remove:hover, .calc-remove:focus-visible { color: var(--stamp); border-color: var(--stamp); outline: none; }
@media (max-width: 900px) { .calc-row { grid-template-columns: 1fr 1fr; } .calc-and { display: none; } .calc-add { grid-column: 1 / -1; } }
@media (max-width: 640px) { .calc-row { grid-template-columns: 1fr; padding-top: 8px; border-top: 1px solid var(--line); } .calc-remove { justify-self: end; } }

/* ---------- Garden: Syne lettering, rounded friendly shapes ---------- */
h1, h2, h3 { font-weight: 700; letter-spacing: -.03em; }
.brand { font: 800 25px var(--serif); font-style: normal; letter-spacing: -.04em; text-transform: lowercase; color: var(--accent); }
.hero { border-radius: 26px; }
.hero h1 { font-weight: 800; letter-spacing: -.045em; line-height: .95; }
.hero h1 em { font-style: normal; color: var(--hero-accent); }
.hero-num { font-style: normal; font-weight: 800; }
.section h2 { font-size: 30px; border-bottom: 0; padding-bottom: 0; }
.level-tab.active .step, .sec-num { background: var(--accent-2); color: #fff; }
.sec-num { border-radius: 50%; }
.guide-link::before { background: var(--stamp); box-shadow: none; }
.btn, .gen, .chip, .guide-link, .theme-btn, .calc-add, .calc-remove { border-radius: 999px; }
.calc-fields input, .calc-fields select, .calc-row select { border-radius: 12px; }
.btn.primary { background: var(--accent-2); color: #fff; }
.btn.primary:hover { background: var(--accent); }
.calc-big { font-weight: 800; letter-spacing: -.045em; color: var(--accent);
  background: linear-gradient(transparent 66%, color-mix(in srgb, var(--hero-bg) 80%, transparent) 0); }
.cefr-code { border-radius: 999px; border: 0; background: var(--stamp-soft); color: var(--stamp); transform: rotate(-3deg); }
.card { border-radius: 18px; }
.card:hover { box-shadow: 0 12px 30px -20px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.world path.speaks { fill: var(--accent-2); }
.world path.speaks:hover { fill: var(--stamp); }

.map-box { background: var(--ocean); }
.world path { stroke: var(--ocean); }
.world path.speaks { fill: var(--accent-2); }
.world path.speaks:hover, .world path.speaks:focus-visible { fill: var(--stamp); }

/* Plugs & power in the country guide: drawings of each plug type. */
.plugs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-top: 10px; }
.plug { margin: 0; display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.plug-art { flex: none; width: 76px; height: 76px; }
.plug-svg { display: block; width: 100%; height: 100%; }
.plug-face { fill: var(--blank); stroke: var(--muted); stroke-width: 1.5; }
.plug-pin { fill: var(--ink); }
.plug-hole { fill: var(--blank); stroke: var(--ink); stroke-width: 1.5; }
.plug figcaption { display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: var(--muted); }
.plug figcaption strong { font-size: 14px; color: var(--ink); }
.volts { margin: 6px 0 0; font-size: 15px; }

/* Families menu: a two-column pop-out (families | languages). */
.family-menu { position: relative; }
.family-btn { font: 500 14px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.family-btn:hover, .family-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.family-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.family-pop { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: 250px 230px; max-height: min(70vh, 560px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px -20px rgba(0,0,0,.45); overflow: hidden; }
.family-pop[hidden] { display: none; }
.fam-list, .fam-langs-list { list-style: none; margin: 0; padding: 6px; }
.fam-list { overflow-y: auto; border-right: 1px solid var(--line); }
.fam-langs { overflow-y: auto; }
.fam, .fam-lang { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; font: 15px var(--sans);
  color: var(--ink); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.fam span { color: var(--muted); }
.fam.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.fam.on span { color: var(--accent); }
.fam-lang:hover, .fam-lang:focus-visible, .fam:focus-visible { background: var(--accent-soft); outline: none; }
.fam-title { margin: 0; padding: 12px 16px 4px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ready-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); }
@media (max-width: 640px) { .family-pop { position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 120px); grid-template-columns: 1fr 1fr; } }

/* ---------- Pastels: per-level banners, a political-style map, colored card edges ---------- */
:root {
  --p-yellow: #f8e08e; --p-blue: #bfdcf2; --p-pink: #f4c9da; --p-coral: #f4b9a6; --p-sage: #d3e6c0; --p-lilac: #dcd0f0; --p-peach: #f8d2ae;
  --m0: #ffbf85; --m1: #b99af2; --m2: #f58a80; --m3: #7fb0f2; --m4: #8fe0c0; --m5: #ee9fdc;
  --speaks: #2f7d3b; --map-stroke: #fffaf2;
  --hero-tourist: #f8e08e; --hero-traveler: #bfdcf2; --hero-expat: #f4c9da; --hero-native: #f4b9a6; --hero-guide: #d3e6c0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m0: #eaa262; --m1: #9c80e6; --m2: #e36f66; --m3: #5d93e6; --m4: #56c49d; --m5: #cf78c7;
    --speaks: #2e6b2c; --map-stroke: #4b3828;
    --hero-tourist: #4d3a17; --hero-traveler: #1f3b52; --hero-expat: #4d2639; --hero-native: #542c20; --hero-guide: #2c3d22;
  }
}
:root[data-theme="dark"] {
  --m0: #eaa262; --m1: #9c80e6; --m2: #e36f66; --m3: #5d93e6; --m4: #56c49d; --m5: #cf78c7;
  --speaks: #2e6b2c; --map-stroke: #4b3828;
  --hero-tourist: #4d3a17; --hero-traveler: #1f3b52; --hero-expat: #4d2639; --hero-native: #542c20; --hero-guide: #2c3d22;
}
:root[data-level="tourist"] .hero { background-color: var(--hero-tourist); }
:root[data-level="traveler"] .hero { background-color: var(--hero-traveler); }
:root[data-level="expat"] .hero { background-color: var(--hero-expat); }
:root[data-level="native"] .hero { background-color: var(--hero-native); }
:root[data-level="guide"] .hero { background-color: var(--hero-guide); }

.world path { stroke: var(--map-stroke); stroke-width: .7; }
.world path[data-c="0"] { fill: var(--m0); } .world path[data-c="1"] { fill: var(--m1); } .world path[data-c="2"] { fill: var(--m2); }
.world path[data-c="3"] { fill: var(--m3); } .world path[data-c="4"] { fill: var(--m4); } .world path[data-c="5"] { fill: var(--m5); }
.world path:hover, .world path:focus-visible { fill: var(--land-hover); filter: brightness(.92); }
.world path.speaks { fill: var(--speaks); }
/* Neighbouring speaker countries get different greens (data-g set in map.js), so they don't merge into one blob. */
:root { --speaks-1: #174f23; --speaks-2: #5aa64a; --speaks-3: #8cc46e; --speaks-4: #1d6f63; --speaks-5: #6d7f16; --speaks-edge: #fffaf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --speaks-1: #1a4418; --speaks-2: #5a9f4b; --speaks-3: #6fc04a; --speaks-4: #2b8a7a; --speaks-5: #8c9a26; --speaks-edge: #e6f2dc; } }
:root[data-theme="dark"] { --speaks-1: #1a4418; --speaks-2: #5a9f4b; --speaks-3: #6fc04a; --speaks-4: #2b8a7a; --speaks-5: #8c9a26; --speaks-edge: #e6f2dc; }
.world path.speaks[data-g="1"] { fill: var(--speaks-1); }
.world path.speaks[data-g="2"] { fill: var(--speaks-2); }
.world path.speaks[data-g="3"] { fill: var(--speaks-3); }
.world path.speaks[data-g="4"] { fill: var(--speaks-4); }
.world path.speaks[data-g="5"] { fill: var(--speaks-5); }
.world path.speaks[data-g]:is(:hover, :focus-visible) { fill: var(--stamp); }
.world path.speaks:hover, .world path.speaks:focus-visible { fill: var(--stamp); filter: none; }

.intro-grid > .card::before, .vocab-grid > .card::before, .cefr-grid > .card::before { opacity: 1; height: 4px; }
.intro-grid > .card:nth-child(4n+1)::before, .vocab-grid > .card:nth-child(4n+1)::before, .cefr-grid > .card:nth-child(4n+1)::before { background: var(--p-yellow); }
.intro-grid > .card:nth-child(4n+2)::before, .vocab-grid > .card:nth-child(4n+2)::before, .cefr-grid > .card:nth-child(4n+2)::before { background: var(--p-blue); }
.intro-grid > .card:nth-child(4n+3)::before, .vocab-grid > .card:nth-child(4n+3)::before, .cefr-grid > .card:nth-child(4n+3)::before { background: var(--p-pink); }
.intro-grid > .card:nth-child(4n+4)::before, .vocab-grid > .card:nth-child(4n+4)::before, .cefr-grid > .card:nth-child(4n+4)::before { background: var(--p-coral); }

.book-btn { display: inline-flex; align-items: center; gap: 8px; }
.btn-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Big hour figures: Syne's display digits are hard to read, so numbers use the body face. */
.calc-big { font-family: var(--sans) !important; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }

.film-by { display: block; font-size: 13px; color: var(--muted); }
.book-en { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); font-style: italic; }   /* js/books.js */

/* ---------- Welcome / settings dialog ---------- */
.pf-backdrop { align-items: center; justify-content: center; padding: 16px; }
.pf-card { width: min(520px, 100%); max-height: 100%; overflow-y: auto; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); display: grid; gap: 16px; }
.pf-card h2 { font-size: 30px; }
.pf-lede { margin: 0; color: var(--muted); }
.pf-field { display: grid; gap: 6px; }
.pf-field > span { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pf-field small { color: var(--muted); font-size: 12px; }
.pf-field select { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.pf-rows { display: grid; gap: 8px; }
.pf-row { display: flex; gap: 8px; align-items: center; }
.pf-add { justify-self: start; }
.pf-actions { display: flex; justify-content: flex-end; gap: 8px; }
.profile-btn { font: 500 13px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.profile-btn:hover { border-color: var(--accent); }

/* ---------- Entry & visa, Health ---------- */
.visa-grid { display: grid; gap: 8px; margin-top: 8px; }
.visa-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.visa-who { margin: 0; font-weight: 600; }
.visa-status { margin: 0; justify-self: start; font-weight: 600; font-size: 14px; padding: 4px 10px; border-radius: 999px; }
.visa-status.ok { background: var(--p-sage); color: #1f3a17; }
.visa-status.warn { background: var(--p-yellow); color: #3d2f0c; }
.visa-status.stop { background: var(--p-coral); color: #4a1a0d; }
.visa-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0; }
.visa-facts div { background: var(--blank); border-radius: 8px; padding: 6px 8px; }
.visa-facts dt { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.visa-facts dd { margin: 2px 0 0; font-size: 13px; }
.visa-note { margin: 0; font-size: 13px; color: var(--muted); }
.checked-line { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.checked-line a { color: inherit; }
/* Rows not yet checked against an official page (owner, 14 Oct 2026): plain, a dotted mark instead of the checked look. */
.checked-line.unchecked { font-style: italic; }
.checked-line.unchecked::before { content: "○ "; font-style: normal; }
.checked-line.unchecked a { font-style: normal; font-weight: 600; }
/* Residence / other-visa rules on a visa card (`alt` rows). */
.visa-alt { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.visa-alt p { margin: 0 0 4px; font-size: 13px; }
.visa-alt.applies { border-top-style: solid; }
.visa-alt .visa-status { display: inline; font-size: 12px; padding: 2px 8px; }
.pf-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.pf-checks label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.visa-links, .visa-link { display: flex; gap: 12px; margin: 0; font-size: 13px; font-weight: 600; }
.health-facts { margin-top: 8px; }
@media (max-width: 640px) { .visa-facts { grid-template-columns: 1fr; } }

/* Cost of travel, Best time to visit, Cultural customs, Safety & scams */
.cost-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.cost-table th, .cost-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cost-table thead th { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--blank); }
.cost-table tbody th { font-weight: 500; }
.cost-table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-table tr:last-child > * { border-bottom: 0; }
.cost-table + .visa-note { margin-top: 6px; }
@media (max-width: 480px) { .cost-table th, .cost-table td { padding: 6px 7px; } .cost-table td { white-space: normal; } }

.month-strip { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin-top: 10px; }
.month { display: grid; justify-items: center; gap: 1px; min-height: 48px; padding: 6px 0 4px; border: 1px solid transparent; border-radius: 8px; font: 500 11px var(--mono); letter-spacing: .02em; cursor: pointer; }
.month .m { text-transform: uppercase; }
.month .sym { font-size: 14px; line-height: 1; }
.month:hover, .month[aria-pressed="true"] { border-color: var(--ink); }
.month:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.r-best { background: #9ccf85; color: #152b0e; }
.r-good { background: var(--p-sage); color: #1f3a17; }
.r-mixed { background: var(--p-yellow); color: #3d2f0c; }
.r-avoid { background: repeating-linear-gradient(135deg, var(--p-coral) 0 5px, #eeab96 5px 8px); color: #4a1a0d; }
.month-note { min-height: 1.4em; font-size: 14px; }
.month-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; font-size: 12px; color: var(--muted); }
.month-legend li { display: flex; align-items: center; gap: 5px; }
.month-key { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; line-height: 1; vertical-align: -3px; }
.month-list { margin-top: 8px; font-size: 14px; }
.month-list summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.month-list dl { display: grid; gap: 4px; margin: 6px 0 0; }
.month-list dl div { display: grid; grid-template-columns: 11em 1fr; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.month-list dt { font-weight: 600; }
.month-list .rating { font-weight: 400; color: var(--muted); font-size: 12px; }
.month-list dd { margin: 0; color: var(--muted); }
@media (max-width: 520px) {
  .month-strip { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .month-list dl div { grid-template-columns: 1fr; gap: 0; }
}

/* Weather (js/weather.js): the 12-month strip is the best-time strip with temperature bands; the symbol row carries ☂ for rainy months. */
.wx-strip .month { min-height: 56px; cursor: default; }
.wx-strip .month.now { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wx-strip .deg { font-size: 11px; }
.w-hot { background: #f4b9a6; color: #4a1a0d; }
.w-warm { background: var(--p-yellow); color: #3d2f0c; }
.w-mild { background: var(--p-sage); color: #1f3a17; }
.w-cold { background: #bfdcf2; color: #10304a; }
.w-rain { background: var(--surface); border: 1px solid var(--line); }
.wx-pack { margin-top: 10px; }
.wx-city { color: var(--muted); font-weight: 400; }

.customs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.customs li { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--p-lilac); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.customs strong { display: block; }
.customs span { color: var(--muted); }
@media (max-width: 640px) { .customs { grid-template-columns: 1fr; } }

.safety-rows { display: grid; gap: 6px; margin: 10px 0 0; }
.safety-rows > div { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.safety-rows dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.safety-rows dd { margin: 3px 0 0; font-size: 14px; }
.safety-rows > div.serious { border: 2px solid #b3261e; background: var(--stamp-soft); }
.lgbt-badge { font: 700 12px var(--sans); letter-spacing: 0; text-transform: capitalize; padding: 2px 9px; border-radius: 999px; }
.lgbt-badge.ok { background: var(--p-sage); color: #1f3a17; }
.lgbt-badge.warn { background: var(--p-yellow); color: #3d2f0c; }
.lgbt-badge.stop { background: #b3261e; color: #fff; }
.lgbt-badge.grave { background: #5c0b0b; color: #fff; box-shadow: 0 0 0 2px #e0463a; }
.advisories a { font-weight: 600; }
.pf-row select { flex: 1; min-width: 0; }

.foods { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.foods li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.foods li:nth-child(4n+1) { border-top: 3px solid var(--p-yellow); } .foods li:nth-child(4n+2) { border-top: 3px solid var(--p-coral); }
.foods li:nth-child(4n+3) { border-top: 3px solid var(--p-sage); } .foods li:nth-child(4n+4) { border-top: 3px solid var(--p-pink); }
.foods li > span:last-child, .foods li > span:not(.food-local):not(.r) { display: block; color: var(--muted); margin-top: 2px; }
.food-local { color: var(--accent); font-weight: 600; }
.foods .r { display: inline; }
@media (max-width: 640px) { .foods { grid-template-columns: 1fr; } }

/* ---------- Most spoken languages (#ranking) ---------- */
.top-link { font: 600 14px var(--sans); color: var(--ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.top-link:hover { border-color: var(--accent); color: var(--accent); }
:root { --hero-ranking: #dcd0f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-ranking: #33294a; } }
:root[data-theme="dark"] { --hero-ranking: #33294a; }
:root[data-level="ranking"] .hero { background-color: var(--hero-ranking); }
.rank-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; margin-top: 24px; align-items: start; }
.rank-map { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 150px); }
.rank-map .map-box { margin-top: 8px; }
.rank-map-label { margin: 0; font-size: 15px; min-height: 1.5em; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rank-item { display: flex; align-items: stretch; gap: 6px; }
.rank-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 34px 1fr auto; grid-template-areas: "n name num" "n bar bar" "n native native"; column-gap: 10px; row-gap: 3px;
  text-align: left; font: 15px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.rank-row:hover, .rank-row.on, .rank-row:focus-visible { border-color: var(--accent); outline: none; background: var(--accent-soft); }
.rank-n { grid-area: n; align-self: center; font: 600 13px var(--mono); color: var(--muted); text-align: right; }
.rank-name { grid-area: name; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rank-num { grid-area: num; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; }
.rank-bar { grid-area: bar; height: 5px; background: var(--line); border-radius: 3px; overflow: hidden; }
.rank-bar span { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; }
.rank-item:nth-child(4n+2) .rank-bar span { background: var(--p-blue); } .rank-item:nth-child(4n+3) .rank-bar span { background: var(--p-coral); } .rank-item:nth-child(4n+4) .rank-bar span { background: var(--p-yellow); }
.rank-native { grid-area: native; font-size: 12px; color: var(--muted); }
.rank-learn { align-self: center; font: 600 13px var(--sans); color: var(--accent); text-decoration: none; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.rank-learn:hover { border-color: var(--accent); }
@media (max-width: 900px) {
  .rank-layout { grid-template-columns: 1fr; }
  .rank-map { order: -1; top: calc(env(safe-area-inset-top, 0px) + 8px); z-index: 4; background: var(--bg); padding-bottom: 6px; }
}

/* Map zoom: + / − / reset in the top-right corner; drag to move once zoomed. */
.map-box { position: relative; overflow: hidden; }
.map-zoom { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; z-index: 3; }
.map-zoom button { width: 34px; height: 34px; display: grid; place-items: center; font: 600 20px/1 var(--sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.map-zoom button[data-zoom="reset"] { font-size: 16px; }
.map-zoom button:hover, .map-zoom button:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.map-box.zoomed .world { cursor: grab; touch-action: none; }
.map-box.zoomed .world:active { cursor: grabbing; }
.world path { vector-effect: non-scaling-stroke; }

/* Circles around tiny countries (and a permanent one around Hawaii). */
.map-rings circle { fill: none; stroke: #2f86c4; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-rings .ring-fixed { stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .75; }

/* ---------- Easiest for you (#easiest) ---------- */
:root { --hero-easiest: #f8d2ae; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-easiest: #4d3220; } }
:root[data-theme="dark"] { --hero-easiest: #4d3220; }
:root[data-level="easiest"] .hero { background-color: var(--hero-easiest); }
.easy-link[hidden] { display: none; }
.easy-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 14px; }
.easy-controls > span { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.easy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.easy-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.easy-main { display: grid; gap: 5px; min-width: 0; }
.easy-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.easy-head strong { font-size: 17px; }
.easy-head .visa-status { font-size: 12px; padding: 2px 9px; }
.easy-hours { font-size: 14px; color: var(--muted); }
.easy-hours strong { color: var(--ink); }

/* ---------- Build your textbook (#book) ---------- */
:root { --hero-book: #bfdcf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-book: #1f3b52; } }
:root[data-theme="dark"] { --hero-book: #1f3b52; }
:root[data-level="book"] .hero { background-color: var(--hero-book); }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.book-card { display: grid; gap: 8px; }
.book-card input[type="text"] { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.book-check { display: flex; align-items: baseline; gap: 8px; font-size: 15px; cursor: pointer; }
.book-check input { accent-color: var(--accent); width: 16px; height: 16px; flex: none; transform: translateY(2px); }
.book-sub { margin: 8px 0 0 !important; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.book-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.book-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.book-summary { margin: 0; flex-basis: 100%; color: var(--muted); }
.book-go .btn { font-size: 16px; padding: 12px 20px; }
.book-back { font-weight: 600; text-decoration: none; }
a.book-btn { text-decoration: none; }
@media (max-width: 900px) { .book-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .book-cols { grid-template-columns: 1fr; } }

.fam-legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 4px 16px 10px; font-size: 12px; color: var(--muted); }
.fam-legend .ready-dot { display: inline-block; }

/* Country guide: languages first */
.panel-langs { margin-top: 14px; }
.lang-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 8px; }
.lang-card { display: grid; gap: 4px; text-align: left; font: 15px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.lang-card strong { font-size: 17px; }
.lang-card > span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
.lang-card:hover, .lang-card:focus-visible { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); outline: none; }
.world path { cursor: pointer; }
/* The easiest-list reuses ranking pieces; reset their ranking-grid placement. */
.easy-item .rank-n, .easy-main .rank-bar { grid-area: auto; }
.easy-main { grid-template-columns: minmax(0, 1fr); }
.easy-item .rank-learn { justify-self: end; }
@media (max-width: 640px) { .easy-item { grid-template-columns: 28px minmax(0, 1fr); } .easy-item .rank-learn { grid-column: 2; justify-self: start; } }
/* Header buttons: one consistent pill style. */
.guide-link, .top-link, .profile-btn, .theme-btn, .family-btn {
  font: 500 14px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; line-height: 1.2;
}
.guide-link { color: var(--accent); font-weight: 600; }
.theme-btn::before { content: "☾ "; }
:root[data-theme="dark"] .theme-btn::before { content: "☀ "; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn::before { content: "☀ "; } }
.guide-link:hover, .top-link:hover, .profile-btn:hover, .theme-btn:hover, .family-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Title Case on the header buttons, in every site language (asked 2026-09-26). */
.guide-link, .top-link, .theme-btn, .family-btn { text-transform: capitalize; }

/* "How long" matches the other header buttons; profile block with language + nationalities. */
.guide-link { color: var(--ink); font-weight: 500; }
.guide-link::before { display: none; }
.profile-box { display: grid; gap: 4px; justify-items: start; }
.profile-btn { display: inline-flex; align-items: baseline; gap: 6px; }
.pb-label { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.pb-nats { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nat-chip { font: 13px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.nat-chip:hover, .nat-chip:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
/* Headings are in Title Case in every site language: see the h1–h4 rule below (owner, 13 Oct 2026). */

.hist-h { margin: 12px 0 2px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }

/* World population ticker beside the map */
.map-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 12px; }
.map-row .map-box { margin-top: 0; }
.pop-ticker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 6px; }
.pop-ticker p { margin: 0; }
.pt-label { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pt-num { font: 700 22px/1.15 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: -.01em; }
.pt-sub { font-size: 13px; color: var(--muted); }
.pt-sub strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pt-note { font-size: 11px; color: var(--muted); }
@media (max-width: 900px) { .map-row { grid-template-columns: 1fr; } .pop-ticker { grid-template-columns: 1fr 1fr; } .pt-label, .pt-num, .pt-note { grid-column: 1 / -1; } }

/* Ticker: narrower and compact, top-aligned with the map */
.map-row { grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: start; }
.pop-ticker { padding: 12px; gap: 4px; }
.pt-num { font-size: 17px; }
.pt-sub { font-size: 12px; line-height: 1.35; }
.pt-note { font-size: 10px; }

@media (max-width: 560px) { .map-row { grid-template-columns: 1fr; } .map-row .pop-ticker { order: 2; } }   /* phones: map first, stats under it */

.sports { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.sports li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 14px; }
.sports li > span:last-child { display: block; color: var(--muted); }

/* Day and night shading on the map */
.map-night path { pointer-events: none; fill: rgba(16, 28, 58, .038); stroke: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .map-night path { fill: rgba(0, 0, 0, .045); } }
:root[data-theme="dark"] .map-night path { fill: rgba(0, 0, 0, .045); }

.pt-rule { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
/* Title Case (owner, 13 Oct 2026): the first letter of EVERY word, small words too, on headings, buttons, tabs and
   level names, in every site language (the browser uses <html lang> for Turkish İ and Dutch IJ). Field labels, hints,
   sentences and lesson content are not touched: words in the language being learned keep their own spelling. */
h1, h2, h3, h4 { text-transform: capitalize; }
button, .btn, .gen, .chip, .book-btn, .hero-btn, .start-learn, .trip-link, .link-btn, .linklike, .ready-more, .level-tab, .place-link, [role="tab"], summary { text-transform: capitalize; }
:is(h1, h2, h3, h4, button, .btn, .gen, .chip, .level-tab, summary) :is(.t, .r, small, [dir="auto"], [data-no-translate]),
:is(button, .chip)[data-no-translate], .pair-verbs .chip, .dr-verb, .fc-word, .gen.busy, input, select, textarea { text-transform: none; }

.fact-note { display: block; font-size: 12px; opacity: .8; }

/* ---------- Flashcards (#flashcards) ---------- */
.fc-setup { display: grid; gap: 12px; }
.fc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fc-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 64px; }
.fc-row .chip small { opacity: .7; margin-left: 2px; font-variant-numeric: tabular-nums; }
.fc-row .chip:disabled { opacity: .4; cursor: default; }
.fc-go { display: grid; gap: 12px; }
.fc-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fc-go .fc-actions { justify-content: flex-start; }
.fc-go .btn { display: inline-flex; align-items: center; gap: 8px; }
.fc-study { display: grid; gap: 16px; justify-items: center; }
.fc-progress { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fc-bar { display: inline-block; width: 120px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fc-bar span { display: block; height: 100%; background: var(--accent); }
.fc-card { position: relative; width: min(100%, 460px); min-height: 260px; padding: 40px 24px 28px; border-radius: 18px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, .08); cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; transition: transform .15s; }
.fc-card:hover { transform: translateY(-2px); }
.fc-card.flipped { background: var(--accent-soft); }
.fc-tag { position: absolute; top: 12px; left: 16px; right: 16px; text-align: left; font-size: 12px; color: var(--muted); }
.fc-face { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fc-word { font-size: clamp(28px, 7vw, 42px); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; text-wrap: balance; }   /* balance: no lone character on the last line (e.g. ありがとうございま / す) */
.fc-word.fc-en { font-size: clamp(22px, 5vw, 30px); }
.fc-rom { font-size: 17px; font-style: italic; color: var(--accent); }
.fc-note { font-size: 14px; color: var(--muted); max-width: 36ch; line-height: 1.45; }
.fc-hint { font-size: 12px; color: var(--muted); position: absolute; bottom: 12px; }
.fc-actions small { opacity: .6; }
.fc-foot { margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.fc-done { text-align: center; display: grid; gap: 10px; }
.fc-done h2 { margin: 0; }
.fc-done p { margin: 0; color: var(--muted); }
.fc-also { font-size: 22px; font-weight: 500; }
.fc-script-hint { font-size: 17px; line-height: 1.4; max-width: 34ch; }
.fc-script .fc-word { font-size: clamp(48px, 12vw, 72px); line-height: 1.3; }   /* letter cards: one character, shown large */
/* Script letter charts (Tibetan consonant chart, Japanese gojūon) at the top of the Script flashcards */
.script-charts { display: grid; gap: 12px; }
.script-chart { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 10px 14px; }
.script-chart summary { cursor: pointer; font-weight: 600; }
.sc-scroll { overflow-x: auto; margin-top: 10px; }
.script-chart table { border-collapse: collapse; margin: 0 auto; }
.script-chart th { font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 6px; text-align: center; vertical-align: bottom; max-width: 9em; }
.script-chart tbody th { text-align: start; vertical-align: middle; }
.script-chart td { border: 1px solid var(--line); text-align: center; padding: 4px 8px; min-width: 2.6em; background: var(--blank); }
.script-chart td.sc-empty { background: transparent; }
.sc-char { display: block; font-size: 24px; line-height: 1.35; }
.sc-rom { display: block; font-size: 11px; color: var(--accent); font-style: italic; }
@media (max-width: 640px) { .script-chart { padding: 8px; } .script-chart td { padding: 3px 4px; min-width: 2.2em; } .sc-char { font-size: 20px; } .script-chart th { font-size: 11px; padding: 3px; } }
.fc-svg { display: block; }
.fc-svg svg { width: clamp(140px, 36vw, 200px); height: auto; display: block; margin: 0 auto; }   /* handshape drawings (sign-language cards) */

/* Conjugation tables: headings wrap so every tense fits without sideways scrolling (Native has 6 tense columns). */
.conj-table th { white-space: normal; vertical-align: bottom; min-width: 7em; }
.conj-table th:first-child { min-width: 0; }

/* Native verb charts: target-language names first, English beside them. */
.pr-t, .tn-t { display: block; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 14px; }
.pr-en, .tn-en { display: block; font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 400; }
.tenses .tn-t, .tenses .tn-en { display: inline; }
.tenses .tn-en::before { content: " · "; }
.mood-table tbody th { text-align: left; font-weight: 400; vertical-align: top; min-width: 11em; }
.mood-table td.span { text-align: center; }
.mood-card h3 small { font-weight: 400; color: var(--muted); font-size: .7em; }

.phrases-section .word-table td:first-child { width: 42%; }
.situations-section .situation-head { margin: 22px 0 8px; font-size: 1.05rem; }
.situations-section .situation-head:first-of-type { margin-top: 6px; }
.sn-why { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin: 0 0 18px; max-width: 75ch; }
.sn-why h3 { margin: 0 0 6px; font-size: 1rem; }
.sn-why ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 4px; font-size: 14px; }
.sn-topic { margin: 6px 0; }
.sn-topic summary h3 { display: inline; margin: 0; font-size: 1.05rem; }
.sn-topic summary h3::after { content: " ▸"; color: var(--muted); font-size: 11px; }
.sn-topic[open] summary h3::after { content: " ▾"; }
.sn-topic summary h3 small { font: 400 12px var(--mono); color: var(--muted); }
.sn-topic summary { padding: 10px 0 4px; }
.sn-en { display: block; }
.sn-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 3px; }
.sn-gram { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.sn-hint { font-size: 12px; color: var(--muted); }
.sentences-section .word-table td { padding-inline-end: 10px; vertical-align: top; }

/* "Hello around the world" (left of the map) */
.pt-hello { display: grid; gap: 2px; text-decoration: none; color: inherit; border-radius: 8px; margin: 0 -6px; padding: 2px 6px; }
.pt-hello, .pt-hello:hover { text-decoration: none; }
.pt-hello-word { font-size: 24px; overflow-wrap: anywhere; }
.pt-hello-rom { font-size: 13px; font-style: italic; color: var(--accent); min-height: 1em; }
.pt-hello.in > * { animation: pt-hello-in .45s ease both; }
@keyframes pt-hello-in { from { opacity: .15; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Its own colour (gold), so it also shows on countries already coloured for the target language. */
.world path.hello, .world path.speaks.hello { fill: var(--hello); fill-opacity: 1; stroke: var(--hello-edge); stroke-width: .9; filter: none; transition: fill .3s; }
.map-rings .ring-hello { stroke: var(--hello-edge); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) { .pt-hello.in > * { animation: none; } }

/* Three boxes beside the map: keep them compact, and let the map stretch to the column's height (extra space is ocean). */
@media (min-width: 561px) {
  .map-row { align-items: stretch; }
  .map-row .map-box { display: flex; flex-direction: column; justify-content: center; }
}
.pop-ticker { gap: 3px; }
.pt-rule { margin: 4px 0; }
.pt-hello-word { font-size: 20px; }
.pt-hello-rom { font-size: 12px; }

/* "Ready now": one calm color, level dots, "See all" */
.ready .chip.has { background: var(--surface); color: var(--ink); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; }
.ready .chip.has:hover { border-color: var(--accent); }
.lv-dots { font-size: 7px; letter-spacing: 1px; color: var(--accent); line-height: 1; }
.lv-dots i { font-style: normal; color: var(--line); }
/* Language picker (readyRow): search box + the 15 most spoken languages. */
.ready.pick { display: grid; gap: 8px; }
.pick-search { width: min(100%, 360px); padding: 9px 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.pick-search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-none { color: var(--muted); font-size: 13px; }
.ready-more { background: none; border: 0; color: var(--accent); font: 600 13px var(--sans); cursor: pointer; padding: 4px 6px; }
.ready.open .chip.has { font-size: 12px; padding: 2px 8px; }
.ready-regions { display: grid; gap: 12px; margin-top: 10px; }
.ready-region h4 { margin: 0 0 6px; font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ready-region h4 small { color: var(--accent); margin-left: 4px; }
.ready-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ready-chips .chip.has { background: var(--surface); color: var(--ink); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 2px 8px; }
.ready-chips .chip.has:hover { border-color: var(--accent); }
.pt-hello-rom { min-height: 0; }
.pt-hello-rom:empty { display: none; }
.draft-note { max-width: 62ch; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--stamp-soft, #f6e0d8); color: var(--ink); font-size: 14px; line-height: 1.45; border-left: 3px solid var(--stamp); }

/* ---------- Flashcard progress (spaced repetition) ---------- */
.fc-chip { display: inline-flex; flex-direction: column; align-items: stretch; gap: 3px; padding-bottom: 5px; }
.fc-mini { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: hidden; }
.fc-mini span { display: block; height: 100%; background: var(--accent); }
.chip.on .fc-mini span { background: currentColor; }
.fc-srs { display: grid; gap: 6px; }
.fc-counts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-counts strong { color: var(--ink); font-size: 18px; margin-right: 3px; }
.fc-counts .fc-due strong { color: var(--stamp); }
.fc-counts .fc-learned strong { color: var(--accent); }
.fc-reset-row { margin: 0; font-size: 14px; }
.fc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--stamp-soft); font-size: 14px; }
.fc-confirm span { margin-right: 4px; }
.btn.danger { background: var(--stamp); border-color: transparent; color: var(--surface); }
.btn.danger:hover { background: color-mix(in srgb, var(--stamp) 85%, var(--ink)); }
.fc-card-wrap { position: relative; width: min(100%, 460px); display: flex; justify-content: center; }
.fc-tag { right: auto; max-width: calc(100% - 120px); }
.fc-badge { position: absolute; top: 10px; right: 14px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.fc-card.flipped .fc-badge { background: var(--surface); }
.fc-card-wrap > .listen { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; }
.fc-card-wrap > .listen svg { width: 18px; height: 18px; }

/* ---------- Listen buttons (browser speech) ---------- */
.listen { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0 0 0 6px; vertical-align: -5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--accent); cursor: pointer; transition: background .15s, color .15s; }
.listen:hover { background: var(--accent-soft); }
.listen:active { transform: scale(.94); }
.listen:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- History of languages (#history), prototype ---------- */
.family-pop { grid-template-rows: minmax(0, 1fr) auto; }
.fam-history { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-top: 1px solid var(--line);
  font: 600 14px var(--sans); color: var(--accent); text-decoration: none; }
.fam-history:hover, .fam-history:focus-visible { background: var(--accent-soft); outline: none; }
.proto-badge { display: inline-block; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px;
  background: var(--stamp-soft); color: var(--stamp); border: 1px solid color-mix(in srgb, var(--stamp) 35%, transparent); vertical-align: middle; }
.hero .proto-badge { margin-left: 6px; }
:root {
  --hero-history: #f4d9c6;
  --hist-land: #e4d7c2; --hist-edge: #fdf7ee;
  --hl-ie: #8a9be0; --hl-romance: #b862b6; --hl-germanic: #3c6cb8; --hl-slavic: #7c5fcf;
  --hl-afro: #d7a247; --hl-arabic: #b0702a; --hl-sino: #d44a42; --hl-austro: #23a095; --hl-bantu: #5a9c46;
  --hl-turkic: #e27aa0; --hl-uralic: #3cb1cb; --hl-dravidian: #97ab24; --hl-quechua: #edc21a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hero-history: #4a2b22; --hist-land: #4f3b2a; --hist-edge: #2a1d13;
    --hl-ie: #9aa9ee; --hl-germanic: #5d8ad6; --hl-slavic: #9a80e6; --hl-arabic: #cf8a3c; --hl-romance: #d07fce; }
}
:root[data-theme="dark"] { --hero-history: #4a2b22; --hist-land: #4f3b2a; --hist-edge: #2a1d13;
  --hl-ie: #9aa9ee; --hl-germanic: #5d8ad6; --hl-slavic: #9a80e6; --hl-arabic: #cf8a3c; --hl-romance: #d07fce; }
:root[data-level="history"] .hero { background-color: var(--hero-history); }
[data-layer="ie"] { --hl: var(--hl-ie); } [data-layer="romance"] { --hl: var(--hl-romance); } [data-layer="germanic"] { --hl: var(--hl-germanic); }
[data-layer="slavic"] { --hl: var(--hl-slavic); } [data-layer="afro"] { --hl: var(--hl-afro); } [data-layer="arabic"] { --hl: var(--hl-arabic); }
[data-layer="sino"] { --hl: var(--hl-sino); } [data-layer="austro"] { --hl: var(--hl-austro); } [data-layer="bantu"] { --hl: var(--hl-bantu); }
[data-layer="turkic"] { --hl: var(--hl-turkic); } [data-layer="uralic"] { --hl: var(--hl-uralic); } [data-layer="dravidian"] { --hl: var(--hl-dravidian); }
[data-layer="quechua"] { --hl: var(--hl-quechua); }

.hist-warn { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--stamp) 45%, var(--line)); background: var(--surface); font-size: 14px; color: var(--muted); }
.hist-warn strong { color: var(--stamp); }
.hist-map-wrap { margin-top: 24px; scroll-margin-top: 160px; }
.hist-controls { display: flex; align-items: center; gap: 14px; }
.hist-play { min-width: 84px; }
#hist-range { flex: 1; min-width: 0; accent-color: var(--accent); height: 28px; }
.hist-year { font: 500 20px var(--mono); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: right; color: var(--ink); }
.hist-caption { margin: 12px 0 0; min-height: 3.1em; font-size: 17px; }
.era-y { font: 500 12px var(--mono); letter-spacing: .04em; color: var(--stamp); margin-right: 6px; white-space: nowrap; }
.hist-map { padding: 6px; }
.hist-world { display: block; width: 100%; height: auto; }
.hist-sea { fill: var(--ocean); }
.hist-countries path { fill: var(--hist-land); stroke: var(--hist-edge); stroke-width: .5; transition: fill .45s, opacity .3s; }
.hist-countries path[data-layer] { fill: var(--hl); }
.hist-countries path:hover { stroke: var(--ink); stroke-width: .9; }
.hist-blobs circle { fill: var(--hl); fill-opacity: .72; stroke: none; transition: opacity .3s; pointer-events: none; }
.hist-world.focusing [data-layer]:not(.f) { opacity: .18; }
.hist-status { margin: 8px 0 0; font-size: 14px; min-height: 1.5em; color: var(--muted); }
.hist-status strong { color: var(--ink); }
.hist-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; margin-top: 14px; }
.hl-title { margin: 0 0 4px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hl-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: 14px var(--sans); color: var(--ink); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; cursor: pointer; }
.hl-item:hover, .hl-item:focus-visible { border-color: var(--line); background: var(--surface); outline: none; }
.hl-item[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.hl-swatch { flex: none; display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--hl); }

.hist-eras, .hist-tree { margin-top: 40px; }
.era-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; border-left: 2px solid var(--line); }
.era { display: grid; grid-template-columns: 96px 1fr; gap: 12px; width: 100%; text-align: left; font: 15px/1.45 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 0 10px 10px 0; padding: 8px 12px; cursor: pointer; margin-left: -2px; }
.era:hover, .era:focus-visible { background: var(--surface); outline: none; }
.era.on { border-left-color: var(--stamp); background: var(--stamp-soft); }
.era .era-y { margin: 0; padding-top: 2px; }

.ht-tools { margin: 0 0 12px; }
.ht-root, .ht-root ul { list-style: none; margin: 0; padding: 0; }
.ht-root { display: grid; gap: 6px; }
.ht-root > .ht-node > details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 4px 12px; }
.ht-root details > ul { margin-left: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.ht-root summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
.ht-root summary::-webkit-details-marker { display: none; }
.ht-root summary::before { content: "›"; flex: none; width: 12px; font: 600 16px/1 var(--sans); color: var(--muted); transition: transform .15s; }
.ht-root details[open] > summary::before { transform: rotate(90deg); }
.ht-root > .ht-node > details > summary { font: 600 17px var(--serif); }
.ht-count { font: 500 11px var(--mono); color: var(--muted); background: var(--bg); border-radius: 999px; padding: 2px 7px; }
.ht-leaf { padding: 3px 0; display: flex; align-items: center; gap: 6px; }
.ht-leaf::before { content: ""; width: 10px; border-top: 1px solid var(--line); margin-left: -14px; }
.ht-leaf a { color: var(--accent); text-decoration: none; }
.ht-leaf a:hover { text-decoration: underline; }
.ht-leaf.extinct span { color: var(--muted); font-style: italic; }
.hist-tree .fam-legend { padding-left: 0; }

@media (max-width: 640px) {
  .hist-controls { flex-wrap: wrap; gap: 10px; }
  #hist-range { order: 3; flex-basis: 100%; }
  .hist-year { font-size: 18px; margin-left: auto; }
  .hist-caption { font-size: 15px; }
  .era { grid-template-columns: 1fr; gap: 2px; }
  .hist-map-wrap { scroll-margin-top: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .hist-countries path, .hist-blobs circle, .ht-root summary::before { transition: none; }
}

/* ---------- Trip sheet (#trip-<CODE>): options, download, and a preview of the printable sheet ---------- */
:root { --hero-trip: #d3e6c0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-trip: #2c3d22; } }
:root[data-theme="dark"] { --hero-trip: #2c3d22; }
:root[data-level="trip"] .hero { background-color: var(--hero-trip); }
.hero h1 .flag { font-style: normal; }
.panel-head .trip-link { margin-bottom: 4px; }
.trip-bar { display: grid; gap: 12px; }
.trip-opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.trip-who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trip-who .nat-chip { cursor: default; }
.trip-field { display: flex; align-items: center; gap: 8px; }
.trip-field > span { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.trip-field select { font: 14px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; }
/* "Where Are You Staying?" (js/stay.js) */
.trip-stay { display: grid; gap: 4px; }
.trip-stay-f { flex-wrap: wrap; }
.trip-stay-f input { flex: 1 1 260px; min-width: 0; font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; }
.trip-stay-f input::placeholder { text-transform: capitalize; color: var(--muted); }
.trip-stay .fill-note { margin: 0; }
.trip-arrive-f input { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; min-height: var(--ctl-h); }   /* First 48 Hours date (js/first48-site.js) */
.trip-tick { display: inline-flex; align-items: center; gap: 8px; min-height: var(--chip-h); font-size: 15px; text-transform: capitalize; }   /* If Something Goes Wrong tick (js/sos-site.js) */
.trip-tick input { width: 18px; height: 18px; accent-color: var(--accent); }
.trip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.trip-actions .btn { font-size: 16px; padding: 12px 20px; }
.trip-back { background: none; border: 0; padding: 0; font: 600 15px var(--sans); color: var(--accent); cursor: pointer; }
.trip-frame { display: block; width: 100%; height: 1400px; border: 1px solid var(--line); border-radius: 14px; background: #e8e6e2; }

/* ---------- Search every language (#search) ---------- */
:root { --hero-search: #cfe8d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-search: #1f3a2b; } }
:root[data-theme="dark"] { --hero-search: #1f3a2b; }
:root[data-level="search"] .hero { background-color: var(--hero-search); }
.sr-form { margin: 0 0 14px; max-width: 720px; }
.sr-label { display: block; margin-bottom: 6px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sr-input { width: 100%; font: 400 24px var(--sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 14px 22px; }
.sr-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.sr-input::placeholder { color: var(--muted); opacity: .8; }
.sr-langs { margin: 0; }
.sr-langs select { max-width: 220px; }
.sr-status { color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sr-status .chip { cursor: pointer; background: var(--surface); color: var(--ink); }
.sr-status .chip:hover { border-color: var(--accent); color: var(--accent); }
.sr-block + .sr-block { margin-top: 28px; }
.sr-head { font-size: 24px; margin-bottom: 12px; }
.sr-head .sr-q { text-transform: none; color: var(--accent); }
.sr-head small { text-transform: none; font: 500 13px var(--mono); color: var(--muted); margin-left: 6px; }
.sr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sr-lang { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.sr-lang h3 { font: 600 16px var(--sans); margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.sr-lang h3 a { color: var(--ink); text-decoration: none; }
.sr-lang h3 a:hover { color: var(--accent); }
.sr-lang h3 small { font: 400 12px var(--sans); color: var(--muted); }
.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sr-row { display: grid; gap: 1px; padding-top: 6px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.sr-row:first-child { border-top: 0; padding-top: 0; }
.sr-word .t { font-size: 18px; }
.sr-word .r { display: inline; }
.sr-for, .sr-en { color: var(--muted); font-size: 14px; }
.sr-eq { color: var(--muted); margin: 0 2px; }
.sr-near .sr-word .t { font-size: 15px; }
.sr-src { font-size: 12px; font-weight: 600; text-decoration: none; }
.sr-src:hover { text-decoration: underline; }
/* Phones: the Search link sits beside Families instead of adding a row to the header. */
@media (max-width: 640px) { .header-row .search-link { order: 1; } .header-row .lang-field { order: 2; } }
@media (max-width: 640px) { .sr-input { font-size: 19px; padding: 12px 16px; } .sr-head { font-size: 20px; } .sr-grid { grid-template-columns: 1fr; } }

/* ---------- Learn multiple languages (#pair): two or three languages side by side ---------- */
:root { --hero-pair: #f3d3c4; --sim-same: #2f6b3a; --sim-alike: #6aa856; --sim-diff: #c2452d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-pair: #4a2a20; --sim-same: #9fd68f; --sim-alike: #6f9e62; --sim-diff: #ff8a6b; } }
:root[data-theme="dark"] { --hero-pair: #4a2a20; --sim-same: #9fd68f; --sim-alike: #6f9e62; --sim-diff: #ff8a6b; }
:root[data-level="pair"] .hero { background-color: var(--hero-pair); }
:root[data-level="pair"] .hero h1 { font-size: clamp(30px, 6vw, 60px); line-height: 1.05; overflow-wrap: break-word; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-actions .hero-btn { margin-top: 16px; }
.pair-pickers { display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 12px; align-items: end; max-width: 860px; }
.pair-pickers .pf-field > span { color: var(--hero-muted); }
.pair-pickers select { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; }
.pair-pickers select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pair-swap { font-size: 18px; padding: 8px 12px; margin-bottom: 2px; background: var(--surface); color: var(--ink); }
.pair-hint { margin: 12px 0 0; color: var(--hero-muted); font-size: 14px; }
.pair-hint a { color: var(--hero-ink); font-weight: 600; }
.pair-summary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.pair-pct { margin: 0 0 12px; font-size: 18px; }
.pair-pct strong { font: 700 44px/1 var(--serif); color: var(--accent); display: block; margin-bottom: 4px; }
.pair-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line); }
.pair-bar span.sim-same { background: var(--sim-same); }
.pair-bar span.sim-alike { background: var(--sim-alike); }
.pair-bar span.sim-diff { background: var(--sim-diff); }
.pair-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 14px; font-size: 14px; color: var(--muted); }
.sim-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.sim-dot.sim-same { background: var(--sim-same); }
.sim-dot.sim-alike { background: var(--sim-alike); }
.sim-dot.sim-diff { background: var(--sim-diff); }
.pair-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pair-filter > span { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.pair-filter .chip { cursor: pointer; background: var(--surface); color: var(--ink); }
.pair-filter .chip.on { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.pair-filter .chip small { font: 500 12px var(--mono); opacity: .8; }
.pair-tips h3 { font-size: 20px; margin-bottom: 8px; }
.pair-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; }
.pair-grid { display: grid; gap: 12px; }
.pair-card { margin-bottom: 12px; }
.pair-counts { font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; }
.pair-table td { width: auto; vertical-align: top; padding-right: 10px; overflow-wrap: anywhere; }
.pair-table td.pair-en { width: 30%; padding-left: 8px; }
.pair-table td.filled, .pair-table td.blank { width: 35%; }
.pair-table tr.sim-diff td.pair-en { box-shadow: inset 3px 0 0 var(--sim-diff); }
.pair-table tr.sim-same td.pair-en, .pair-table tr.sim-alike td.pair-en { box-shadow: inset 3px 0 0 var(--sim-alike); }
.sim-tag { white-space: nowrap; display: block; width: fit-content; margin-top: 3px; font: 500 10px var(--mono); letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.sim-tag.sim-same, .sim-tag.sim-alike { background: var(--moss-soft); color: var(--moss); }
.sim-tag.sim-diff { background: var(--stamp-soft); color: var(--sim-diff); }
.pair-tense { font: 600 15px var(--sans); margin: 18px 0 0; }
.pair-tense small { color: var(--muted); font-weight: 400; }
.pair-verbs { margin-bottom: 12px; }
.pair-verbs .chip { cursor: pointer; }
.pair-missing p { margin: 0 0 8px; }
.pair-pickers.has-third { grid-template-columns: 1fr auto 1fr 1fr 1fr; max-width: 1100px; }
.pair-third { margin: 12px 0 0; }
.pair-add { cursor: pointer; background: var(--surface); color: var(--ink); }
.pair-rule { margin: -4px 0 14px; font-size: 13px; color: var(--muted); }
.pair-table.n3 td.pair-en { width: 22%; }
.pair-table.n3 td.filled, .pair-table.n3 td.blank { width: 26%; }
.pair-pager { flex-wrap: wrap; gap: 12px 24px; }
/* The filter hides rows (and whole lists with nothing to show) without re-rendering. */
.pair-body[data-filter="alike"] tr.sim-diff, .pair-body[data-filter="alike"] tr.sim-none,
.pair-body[data-filter="diff"] tr.sim-same, .pair-body[data-filter="diff"] tr.sim-alike, .pair-body[data-filter="diff"] tr.sim-none { display: none; }
.pair-body[data-filter="alike"] .pair-card[data-alike="0"], .pair-body[data-filter="diff"] .pair-card[data-diff="0"] { display: none; }
@media (max-width: 900px) { .pair-summary { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pair-pickers { grid-template-columns: 1fr auto 1fr; }
  .pair-pickers > .pf-field:last-child { grid-column: 1 / -1; }
  .pair-pickers.has-third { grid-template-columns: 1fr auto 1fr; }
  .pair-pickers > .pair-third-field { grid-column: 1 / -1; }
  .pair-table.n3 { min-width: 460px; }   /* three columns scroll inside their own box on phones */
  .pair-table { font-size: 13px; }
  .pair-pct strong { font-size: 36px; }
  .pair-card .card-head { flex-wrap: wrap; }
}

/* ---------- My progress (#progress): PROTOTYPE dashboard, per visitor (js/progress.js) ---------- */
:root { --hero-progress: #f4d6c2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-progress: #432a1d; } }
:root[data-theme="dark"] { --hero-progress: #432a1d; }
:root[data-level="progress"] .hero { background-color: var(--hero-progress); }
.pg-proto { display: inline-block; padding: 2px 8px; margin-right: 6px; border-radius: 999px; background: var(--stamp); color: var(--surface); letter-spacing: .06em; }
.pg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }   /* 3 tiles since the streak tile was removed (owner, 14 Oct) */
.pg-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 2px; align-content: start; }
.pg-tile-n { font: 400 44px/1 var(--serif); letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pg-tile.hot .pg-tile-n { color: var(--stamp); }
.pg-tile-l { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pg-tile-s { font-size: 13px; color: var(--muted); }
.pg-welcome { background: var(--accent-soft); border-radius: var(--radius); padding: 22px 24px; }
.pg-welcome h2 { font-size: 26px; }
.pg-welcome > p { margin: 6px 0 0; color: var(--muted); }
.pg-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.pg-steps li { display: flex; gap: 12px; align-items: flex-start; }
.pg-steps p { margin: 2px 0 0; font-size: 14px; color: var(--muted); }
.pg-step { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font: 500 13px var(--mono); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.pg-actions .btn, .pg-empty .btn { text-decoration: none; }
.pg-empty { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.pg-empty p { margin: 0; max-width: 60ch; }
/* Calendar heatmap: 12 weeks, Monday at the top of each column */
.pg-heat-wrap { overflow-x: auto; }
.pg-heat { display: flex; gap: 6px; width: max-content; }
.pg-days { display: grid; grid-template-rows: 12px repeat(7, 14px); row-gap: 4px; font: 500 10px/14px var(--mono); color: var(--muted); }
.pg-grid { display: grid; gap: 4px; }
.pg-months, .pg-weeks { display: grid; grid-template-columns: repeat(12, 14px); column-gap: 4px; }
.pg-months span { font: 500 10px/12px var(--mono); color: var(--muted); white-space: nowrap; height: 12px; }
.pg-week { display: grid; grid-template-rows: repeat(7, 14px); row-gap: 4px; }
.pg-cell { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--line) 70%, var(--surface)); }
.pg-cell.l1 { background: color-mix(in srgb, var(--accent-2) 35%, var(--surface)); }
.pg-cell.l2 { background: color-mix(in srgb, var(--accent-2) 60%, var(--surface)); }
.pg-cell.l3 { background: color-mix(in srgb, var(--accent-2) 85%, var(--surface)); }
.pg-cell.l4 { background: var(--accent); }
.pg-cell.today { outline: 2px solid var(--stamp); outline-offset: 1px; }
.pg-cell.future { background: transparent; }
@media (min-width: 700px) {
  .pg-days { grid-template-rows: 12px repeat(7, 22px); line-height: 22px; }
  .pg-months, .pg-weeks { grid-template-columns: repeat(12, 22px); }
  .pg-week { grid-template-rows: repeat(7, 22px); }
  .pg-heat .pg-cell { width: 22px; height: 22px; border-radius: 6px; }
}
.pg-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.pg-legend .pg-cell { width: 12px; height: 12px; }
.pg-legend-n { margin-left: 12px; }
/* Flashcard table */
.pg-table-wrap { overflow-x: auto; }
.pg-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.pg-table td.due { color: var(--stamp); font-weight: 600; }
.pg-table td { vertical-align: middle; }
.pg-table tfoot td { font-weight: 600; border-bottom: 0; }
.pg-bar-col { width: 22%; min-width: 90px; }
.pg-bar { display: flex; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pg-bar .lrn { background: var(--accent); }
.pg-bar .prg { background: color-mix(in srgb, var(--accent-2) 40%, var(--surface)); }
/* Study time + goal */
.pg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pg-card { display: grid; gap: 12px; align-content: start; }
.pg-card::before { display: none; }
.pg-card:hover { transform: none; box-shadow: none; }
.pg-card h3 { font-size: 20px; }
.pg-card .fill-note { margin: 0; }
.pg-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-quick .chip { cursor: pointer; background: var(--surface); color: var(--ink); }
.pg-quick .chip:hover { border-color: var(--accent); color: var(--accent); }
.pg-log { display: grid; gap: 10px; }
.pg-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.pg-fields label { display: grid; gap: 4px; font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: 1 1 130px; }
.pg-fields input, .pg-fields select { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; text-transform: none; letter-spacing: 0; min-height: 40px; }
.pg-fields input:focus, .pg-fields select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pg-fields .btn { min-height: 40px; }
.pg-recent { list-style: none; margin: 0; padding: 0; display: grid; }
.pg-recent li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pg-recent li span { flex: 1; color: var(--muted); }
.pg-recent .chip-x { color: var(--muted); font-size: 18px; padding: 0 4px; }
.pg-recent .chip-x:hover { color: var(--stamp); }
.pg-sum { margin: 0; font-size: 14px; color: var(--muted); }
.pg-sum strong { color: var(--ink); }
.pg-goal-big { margin: 0; font-size: 16px; color: var(--muted); }
.pg-goal-big strong { font: 400 34px/1 var(--serif); color: var(--accent); margin-right: 4px; }
.pg-meter { position: relative; height: 12px; border-radius: 6px; background: var(--line); }
.pg-meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--accent); min-width: 2px; }
.pg-meter .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--stamp); border-radius: 1px; }
.pg-small { font-size: 12px; }
/* Trip countdown */
.pg-trip-body { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.pg-count { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 18px 12px; border-radius: var(--radius); background: var(--accent-soft); }
.pg-count.soon { background: var(--stamp-soft); }
.pg-count-flag { font-size: 30px; line-height: 1; }
.pg-count-n { font: 400 64px/1 var(--serif); letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.pg-count.soon .pg-count-n { color: var(--stamp); }
.pg-count > span:nth-child(3) { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.pg-count-where { font-size: 13px; color: var(--muted); margin-top: 6px; }
.pg-trip-plan h3 small { font: 400 13px var(--sans); color: var(--muted); }
.pg-trip-budget { margin: 8px 0 0; }
.pg-todo { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.pg-todo a, .pg-todo .linklike { text-decoration: none; }
.pg-todo a:hover, .pg-todo .linklike:hover { text-decoration: underline; }
.pg-reset { padding-bottom: 20px; }
.pg-reset .linklike:disabled { color: var(--muted); cursor: default; text-decoration: none; opacity: .6; }
.pg-msg { color: var(--accent); font-weight: 600; margin-right: 8px; }
@media (max-width: 520px) { .pg-tiles { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .pg-two { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .pg-tile-n { font-size: 34px; }
  .pg-steps { grid-template-columns: 1fr; }
  .pg-trip-body { grid-template-columns: 1fr; }
  .pg-bar-col { display: none; }
  .pg-table { font-size: 13px; }
}

/* ---------- Polyglot methods (#methods): famous polyglots, techniques, several languages at once, how many is realistic ---------- */
:root { --hero-methods: #e6dcf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-methods: #342a44; } }
:root[data-theme="dark"] { --hero-methods: #342a44; }
:root[data-level="methods"] .hero { background-color: var(--hero-methods); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 16px 0 0; }
.hero-actions .hero-btn { margin-top: 0; }
.method-tip { font: 500 14px var(--sans); color: var(--hero-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--hero-ink) 40%, transparent); }
.method-tip:hover { text-decoration-color: currentColor; }
.method-tip-k { display: inline-block; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; margin-right: 4px; border-radius: 999px; background: var(--hero-card); border: 1px solid var(--hero-line); color: var(--hero-accent); }
.m-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.m-jump a { font: 600 14px var(--sans); color: var(--hero-ink); text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--hero-card); border: 1px solid var(--hero-line); }
.m-jump a:hover, .m-jump a:focus-visible { border-color: var(--hero-accent); color: var(--hero-accent); outline: none; }
.m-people, .m-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.m-person h3, .m-tech h3 { font-size: 20px; margin: 0; }
.m-meta { margin: 2px 0 10px; color: var(--muted); font-size: 13px; }
.m-claim { margin: 0 0 12px; font-weight: 600; }
.m-claim span, .m-tool span, .m-dl dt { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.m-dl { margin: 0; display: grid; gap: 10px; }
.m-dl div { padding-left: 10px; border-left: 3px solid var(--line); }
.m-dl .m-doc { border-left-color: var(--accent-2); }
.m-dl .m-leg { border-left-color: var(--stamp); }
.m-dl .m-doc dt { color: var(--accent); }
.m-dl .m-leg dt { color: var(--stamp); }
.m-dl dd { margin: 2px 0 0; font-size: 15px; }
.m-tech h4 { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 0 4px; }
.m-tech p, .m-tech li { font-size: 15px; }
.m-tech ol { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.m-tool { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); }
.m-tool span { color: var(--accent); }
.m-sources { margin-top: 16px; color: var(--muted); font-size: 14px; }
.m-sources summary { cursor: pointer; font: 600 14px var(--sans); color: var(--ink); }
.m-sources ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.m-sources a { overflow-wrap: anywhere; }
.m-note { max-width: 75ch; margin: 16px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 12px 12px 0; }
.m-proscons, .m-real { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m-proscons h3, .m-real h3 { font-size: 19px; margin: 0 0 8px; }
.m-proscons ul { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.m-pros::before { background: var(--accent-2); }
.m-cons::before { background: var(--stamp); }
.m-sub { font-size: 20px; margin: 24px 0 8px; }
.m-rules { margin: 0; padding-left: 22px; display: grid; gap: 8px; max-width: 75ch; }
.m-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.m-links .btn { text-decoration: none; color: var(--ink); background: var(--surface); }
.m-links .btn:hover { border-color: var(--accent); color: var(--accent); }
.m-table-wrap { overflow-x: auto; }
.m-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.m-table th, .m-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.m-table th { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.m-table td:nth-child(3), .m-table td:nth-child(4) { white-space: nowrap; font-family: var(--mono); }
@media (max-width: 760px) { .m-proscons, .m-real { grid-template-columns: 1fr; } .m-people, .m-techs { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .m-table { font-size: 13px; } .m-table th, .m-table td { padding: 6px 4px; } }

/* ---------- Verb drill (#drill) and placement test (#placement) ---------- */
.dr-moods { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.dr-mood { margin: 0; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); display: grid; gap: 4px; align-content: start; min-width: 0; }
.dr-mood legend { padding: 0 6px; font-weight: 600; }
.dr-mood legend small, .dr-check small { color: var(--muted); font-weight: 400; }
.dr-all { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.dr-check { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.35; cursor: pointer; }
.dr-check input { flex: none; accent-color: var(--accent); width: 16px; height: 16px; margin: 0; transform: translateY(2px); }
.dr-go { justify-content: flex-start; align-items: center; }
.dr-go .fill-note { margin: 0; }
.dr-card { width: min(100%, 560px); padding: 26px 22px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08); display: grid; gap: 8px; text-align: center; }
.dr-card p { margin: 0; }
.dr-prompt { font-size: 15px; color: var(--muted); }
.dr-verb { font-size: clamp(26px, 6vw, 36px); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.dr-rom { font-style: italic; color: var(--accent); }
.dr-tense .dr-tn { font-weight: 600; }
.dr-tense small, .dr-person small { color: var(--muted); }
.dr-person strong { font-size: 18px; }
.dr-form { display: flex; gap: 8px; margin-top: 6px; }
.dr-input { flex: 1; min-width: 0; font: 500 20px var(--sans); padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--blank); color: var(--ink); text-align: center; }
.dr-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.dr-input.right { border-color: var(--accent-2); background: var(--accent-soft); }
.dr-input.wrong, .dr-input.accents { border-color: var(--stamp); background: var(--stamp-soft); }
.dr-fb { font-weight: 600; }
.dr-fb.ok { color: var(--accent); }
.dr-fb.bad { color: var(--stamp); }
.dr-fb strong { color: var(--ink); }
.dr-row { margin: 4px auto 0; font-size: 14px; min-width: 0; width: auto; }
.pl-result:focus { outline: none; }
:root[data-level="drill"] .hero h1, :root[data-level="placement"] .hero h1 { font-size: clamp(34px, 8vw, 76px); overflow-wrap: anywhere; }
.dr-row th { text-align: left; font-weight: 400; padding: 4px 10px 4px 0; }
.dr-row td { padding: 4px 0; text-align: left; }
.dr-row tr.dr-hit td { font-weight: 700; color: var(--accent); }
.dr-missed { width: min(100%, 560px); }
.dr-missed h3 { font-size: 18px; }
.dr-missed ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; font-size: 14px; }
.pl-how { margin: 8px 0; padding-left: 18px; display: grid; gap: 4px; }
.pl-go { justify-content: flex-start; margin-top: 12px; }
.pl-tag { font-size: 12px; color: var(--muted); text-align: left; }
.pl-ask { font-weight: 600; }
.pl-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.pl-opt { display: flex; align-items: center; gap: 10px; text-align: left; font: 15px var(--sans); color: var(--ink); background: var(--blank);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer; min-height: 48px; overflow-wrap: anywhere; }
.pl-opt:hover:not(:disabled) { border-color: var(--accent); }
.pl-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pl-opt:disabled { cursor: default; }
.pl-opt.ok { border-color: var(--accent-2); background: var(--accent-soft); font-weight: 600; }
.pl-opt.bad { border-color: var(--stamp); background: var(--stamp-soft); }
.pl-opt.dim { opacity: .55; }
.pl-key { flex: none; font: 500 11px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 5px; }
.pl-result .card { display: grid; gap: 10px; }
.pl-result p { margin: 0; }
.pl-head { font-size: clamp(26px, 5vw, 36px); }
.pl-head em { font-style: italic; color: var(--accent); }
.pl-levels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.pl-levels span { color: var(--muted); }
.pl-levels .pl-pass { color: var(--accent); font-weight: 600; }
.pl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pl-cols h3 { font-size: 18px; }
.pl-lists { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 640px) {
  .pl-opts, .pl-cols { grid-template-columns: 1fr; }
  .dr-card { padding: 22px 14px 16px; }
  .dr-form { flex-direction: column; }
}

/* ---------- Vocabulary for your job (#industry, #industry~<id>): industry packs, js/industry-page.js ---------- */
:root { --hero-industry: #d3e6c0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hero-industry: #2c3b22; } }
:root[data-theme="dark"] { --hero-industry: #2c3b22; }
:root[data-level="industry"] .hero { background-color: var(--hero-industry); }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin-top: 14px; }
.ind-tile { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }
.ind-tile strong { font-size: 15px; line-height: 1.3; }
.ind-tile small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ind-tile .ready-dot { display: inline-block; vertical-align: 1px; }
.ind-tile:hover, .ind-tile:focus-visible { border-color: var(--accent); outline: none; background: var(--accent-soft); }
.ind-tile.on { border-color: var(--accent); background: var(--accent-soft); }
.ind-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 24px; }
.ind-select { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 0; }
.ind-select select { font: 15px var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; max-width: 100%; min-width: 0; }
.ind-select select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ind-all { font-weight: 600; text-decoration: none; }
.ind-n { font: 500 15px var(--mono); color: var(--muted); }
.ind-parts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; margin-top: 14px; }
.ind-parts > .card::before { opacity: 1; height: 4px; }
.ind-parts > .card:nth-child(4n+1)::before { background: var(--p-yellow); }
.ind-parts > .card:nth-child(4n+2)::before { background: var(--p-blue); }
.ind-parts > .card:nth-child(4n+3)::before { background: var(--p-pink); }
.ind-parts > .card:nth-child(4n+4)::before { background: var(--p-coral); }
.ind-part .baseline { overflow-wrap: anywhere; }
.ind-empty { color: var(--muted); font-size: 14px; }
.ind-plug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; padding: 14px 18px; border-radius: 14px; border: 1px dashed var(--accent-2); background: var(--accent-soft); color: var(--ink); text-decoration: none; }
.ind-plug:hover, .ind-plug:focus-visible { border-style: solid; outline: none; }
.ind-plug-k { font: 700 16px var(--serif); color: var(--accent); }
.ind-plug > span:nth-child(2) { flex: 1 1 240px; font-size: 14px; color: var(--muted); }
.ind-plug-go { font-size: 22px; line-height: 1; color: var(--accent); }

/* Words You Already Know (js/cognates.js): shared words with the visitor's language + false friends, Tourist page */
.cog-count { margin: 6px 0 4px; font: 600 20px var(--serif); color: var(--ink); }
.cog-count strong { font-size: 30px; color: var(--accent); }
.cog-table td { width: auto; vertical-align: top; padding-right: 12px; }
.cog-r { color: var(--muted); font-size: 13px; }
.cog-note { display: block; font-size: 12px; color: var(--muted); }
.cog-more { margin: 12px 0 0; }
.cog-ff { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid #d9822b; border-radius: 12px; background: var(--surface); }
.cog-ff h3 { margin: 0 0 4px; }
.cog-ff-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; }
.cog-ff-list li { min-width: 0; overflow-wrap: anywhere; }
.cog-ff-pair { margin: 0; font-size: 16px; }
.cog-ne { color: #c0392b; font-weight: 700; padding: 0 4px; }
.cog-ff-means { margin: 2px 0 0; font-size: 14px; }
.cog-src { font-size: 12px; color: var(--muted); }
.cog-method { margin-top: 14px; color: var(--muted); }

/* Real Listening shelf (js/listening.js): linked programmes per level, one card each */
.listen-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.listen-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.listen-title { font: 700 16px var(--serif); color: var(--accent); text-decoration: none; overflow-wrap: anywhere; }
.listen-title:hover, .listen-title:focus-visible { text-decoration: underline; }
.listen-by { font-size: 13px; color: var(--muted); }
.listen-about { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.listen-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.listen-tags span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--ink); }
.listen-checked { margin-top: auto; padding-top: 6px; }
.listen-more { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .ind-parts { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ind-grid { grid-template-columns: 1fr 1fr; } .ind-tile { padding: 10px 11px; } .ind-tile small { font-size: 12px; } .ind-select { flex: 1 1 100%; } .ind-select select { flex: 1; } }

/* Flashcards: word cards / verb drill tabs; placement link under the level tabs */
.fc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.fc-tabs .chip { text-decoration: none; }
.place-link { grid-column: 1 / -1; justify-self: end; font-size: 13px; color: var(--muted); text-decoration: none; }
.place-link strong { color: var(--accent, var(--ink)); font-weight: 600; }
.place-link:hover strong { text-decoration: underline; }

/* "Hello around the world" highlight colour */
:root { --hello: #ffd21f; --hello-edge: #6b4f00; }   /* vivid lemon yellow (owner, 2026-09-27): much brighter than the pastel map yellow */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hello: #ffe43a; --hello-edge: #fff6c2; } }
:root[data-theme="dark"] { --hello: #ffe43a; --hello-edge: #fff6c2; }
.pt-hello:hover .pt-hello-word, .pt-hello:focus-visible .pt-hello-word { color: var(--hello-edge); }

/* Section links: one row under the brand/controls row, never wrapping (asked 2026-09-26).
   Narrow screens scroll the row sideways instead of dropping links to a second line. */
.header-row { padding-bottom: 8px; }
.section-nav { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav > a, .section-nav > button { flex: none; white-space: nowrap; }
/* "More" menu (owner, 20 Oct 2026): secondary pages in a pop-up placed under the More button by js/app.js. */
.section-nav, .more-wrap { position: relative; }
.more-btn { font: 600 14px var(--sans); cursor: pointer; gap: 4px; }
.more-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.more-btn:focus-visible, .more-pop a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-pop { position: absolute; z-index: 30; top: -6px; left: 0; display: flex; flex-direction: column; min-width: 240px; max-width: calc(100vw - 32px); padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); }
.more-pop[hidden] { display: none; }
.more-pop a { font: 500 14.5px var(--sans); color: var(--ink); text-decoration: none; padding: 9px 12px; border-radius: 9px; text-transform: capitalize; white-space: nowrap; }
.more-pop a[hidden] { display: none; }
.more-pop a:hover, .more-pop a:focus-visible { background: var(--bg); color: var(--accent); }
.more-pop .proto-badge { margin-inline-start: 6px; }
@media (max-width: 640px) { .more-pop { left: 16px !important; right: 16px; min-width: 0; max-height: 70vh; overflow-y: auto; } .more-pop a { white-space: normal; } }
@media (max-width: 400px) { .section-nav { gap: 6px; } .section-nav > a, .section-nav > button { padding: 6px 10px; } }
@media (max-width: 1120px) { .section-nav > a { padding: 6px 11px; font-size: 13.5px; } }
@media (max-width: 1000px) { .section-nav { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } }   /* hint that the row scrolls */

/* Sentences in the mono face read badly (DM Mono's lowercase f looks like ƒ): mono stays for uppercase labels and numbers. */
.fill-count, .baseline { font-family: var(--sans); letter-spacing: 0; }
/* Six map colours (neighbours and near-neighbours always differ, js/map-colors.js); a light edge between speaker greens. */
.world path.speaks { stroke: var(--speaks-edge); }
/* Country-guide language cards show only the language name (owner, 2026-09-28); the ready dot sits after it. */
.lang-card strong .ready-dot { display: inline-block; vertical-align: middle; margin-left: 6px; }
/* "Trip Sheet" / "Start Learning" in Title Case (the translation keys stay "Trip sheet" / "Start learning"). */
:is(.trip-link, #trip-download) span, .start-learn { text-transform: capitalize; }
/* Lesson pages: a globe button before the level tabs, as tall as a tab, back to the world map. */
.levels:has(.globe-btn) { grid-template-columns: auto repeat(4, 1fr); }
.globe-btn { display: grid; place-items: center; aspect-ratio: 1; min-width: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--accent); text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.globe-btn svg { width: 26px; height: 26px; }
.globe-btn:hover, .globe-btn:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
@media (max-width: 640px) { .levels:has(.globe-btn) { grid-template-columns: auto 1fr 1fr; } .globe-btn { grid-row: span 2; aspect-ratio: auto; } }

/* Numbers 0–10 (Tourist) and Counting to any number (Traveler), top of Vocabulary */
.numbers-block { margin: 18px 0 26px; }
.numbers-block h3 { margin: 0; }
.numbers-block h4 { margin: 18px 0 2px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.numbers-table { max-width: 640px; }
.numbers-table td { width: auto; padding: 5px 10px 5px 0; }
.numbers-table td.filled { border-left: 0; font-size: 1.05em; }
[dir=rtl] .numbers-table td { padding: 5px 0 5px 10px; }
.numbers-table td:first-child { width: 22%; font-variant-numeric: tabular-nums; }
.numbers-table td.r-cell { color: var(--muted); font-style: italic; }
.counting-text p { margin: 8px 0; max-width: 70ch; }
@media (max-width: 640px) { .numbers-table { font-size: 13px; } }

/* ---------- Opening animation (js/intro.js): spinning Earth, greetings flying off, dissolves into the page ---------- */
html.intro-on, html.intro-on body { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; cursor: pointer;
  background: #000;
  transition: opacity .9s ease, transform .9s ease, filter .9s ease;
}
.intro canvas { position: absolute; inset: 0; }
.intro.out { opacity: 0; transform: scale(1.08); filter: blur(6px); pointer-events: none; }
.intro-words { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.intro-word {
  position: absolute; left: 0; top: 0; white-space: nowrap; pointer-events: none;
  font: 700 clamp(20px, 3.6vw, 38px)/1.1 var(--sans); color: #fff; text-shadow: 0 0 12px rgba(255,255,255,.35);
  animation: intro-fly var(--d) cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes intro-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(var(--x0), var(--y0)) scale(calc(var(--s) * .4)); }
  18% { opacity: 1; }
  75% { opacity: .9; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--x1), var(--y1)) scale(var(--s)); }
}
.intro-skip {
  position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  font: 600 13px var(--sans); color: rgba(255,246,230,.75); background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: 8px 16px; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- Native-speaker review (js/reviewer.js): the #review page (per-row OK / Fix / Not Sure, sticky progress bar,
   corrections panel), the "Suggest A Correction" link + dialog under lesson sections, and the reviewed badge in the level hero. ---------- */
.rv-hero h1 { font-size: clamp(32px, 6vw, 56px); }
.rv-card { margin-top: 16px; }
.rv-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.rv-tips { margin: 8px 0 0; padding-inline-start: 1.2em; display: grid; gap: 6px; font-size: 14px; }
.rv-who { display: grid; gap: 10px; margin-top: 10px; }
.rv-who label, .rv-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.rv-who input, .rv-who select, .rv-form input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; width: 100%; }
.rv-who input:focus, .rv-who select:focus, .rv-form input:focus, .rv-json:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rv-who .btn { justify-self: start; }
.rv-who-line { margin-top: 8px; }
.link-btn { border: 0; background: none; color: var(--accent); font: inherit; padding: 0; cursor: pointer; text-decoration: underline; }
.rv-bar { position: sticky; top: 0; z-index: 9; margin: 16px 0 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.rv-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-count { font-size: 14px; }
.rv-bar .progress { margin-top: 8px; }
.rv-secs { margin-top: 8px; }
.rv-sec { margin: 8px 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.rv-sec summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-family: var(--serif); font-size: 17px; list-style: none; }
.rv-sec summary::-webkit-details-marker { display: none; }
.rv-sec summary::before { content: "▸"; color: var(--muted); font-size: 12px; }
.rv-sec[open] summary::before { content: "▾"; }
.rv-sec-name { flex: 1; }
.rv-sec-n { font: 500 12px var(--mono); color: var(--muted); white-space: nowrap; }
.rv-sec.done .rv-sec-n { color: var(--accent); }
.rv-sec.skipped .rv-sec-n { color: var(--stamp); }
.rv-sec-body { padding: 0 16px 12px; }
.rv-sec-tools { display: flex; justify-content: flex-end; padding: 4px 0 8px; }
.rv-row { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 6px 14px; align-items: start; padding: 8px 6px; border-top: 1px solid var(--line); border-radius: 8px; }
.rv-row.s-ok { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); }
.rv-row.s-fix { background: color-mix(in srgb, var(--hero-bg) 35%, transparent); }
.rv-row.s-unsure { background: color-mix(in srgb, var(--stamp-soft) 70%, transparent); }
.rv-en { font-size: 14px; }
.rv-t .t { font-size: 16px; }
.rv-t .r, .rv-t .note { display: block; }
.rv-new { margin-top: 4px; font-size: 13px; display: grid; gap: 2px; }
.rv-new-label { font-weight: 600; color: var(--accent); }
.rv-new small { color: var(--muted); margin-inline-end: 4px; }
.rv-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rv-btn { font: 600 13px var(--sans); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-transform: capitalize; }
.rv-btn:hover { border-color: var(--accent); }
.rv-btn.on.ok { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rv-btn.on.fix { background: var(--hero-accent); border-color: var(--hero-accent); color: #fff; }
.rv-btn.on.unsure { background: var(--stamp); border-color: var(--stamp); color: #fff; }
.rv-form { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 8px 0 4px; }
.rv-form-act { grid-column: 1 / -1; display: flex; gap: 8px; }
.rv-sent-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rv-sent-act .btn { text-decoration: none; }
.rv-sent code { font: 12px var(--mono); }
.rv-json { width: 100%; margin-top: 10px; font: 12px var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; resize: vertical; }
.rv-suggest { margin: 10px 0 0; font-size: 13px; text-align: end; }
.rv-suggest-btn { text-decoration: none; color: var(--muted); }
.rv-suggest-btn:hover { color: var(--accent); text-decoration: underline; }
.rv-dialog { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.rv-dbox { width: min(640px, 100%); max-height: 90vh; overflow: auto; }
.rv-dhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rv-dlist { display: grid; gap: 4px; margin-top: 10px; max-height: 55vh; overflow: auto; }
.rv-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: start; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.rv-pick:hover { border-color: var(--accent); }
.rv-dialog .rv-row { grid-template-columns: 1fr 1fr; margin-top: 10px; border-top: 0; background: var(--bg); }
.rv-saved { margin-top: 10px; }
.rv-langs .chip.on { background: var(--accent); color: var(--accent-ink); }
.reviewed-badge { display: inline-block; margin: 10px 0 0; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 13px; }
.rv-bar .btn, .rv-form .btn, .rv-sent-act .btn, .rv-sec-tools .btn, .rv-who .btn, .rv-dialog .btn, .rv-hero .btn, .rv-sec-name, .rv-dhead h3, .rv-card h3 { text-transform: capitalize; }
@media (max-width: 640px) {
  .rv-top { grid-template-columns: 1fr; }
  .rv-row { grid-template-columns: 1fr; gap: 4px; }
  .rv-act { justify-content: flex-start; }
  .rv-form { grid-template-columns: 1fr; }
  .rv-pick { grid-template-columns: 1fr; gap: 2px; }
  .rv-dialog { padding: 8px; align-items: flex-end; }
}

/* ---------- Core 500 (js/core.js) ---------- */
.core-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.core-band { margin: 26px 0 0; font-size: 18px; }
.core-table td { width: auto; vertical-align: top; padding: 7px 8px 7px 0; }
.core-table td.core-n { width: 3ch; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 9px; }
.core-table .t { font-weight: 600; } .core-table .r { color: var(--muted); font-style: italic; margin-left: 4px; }
.core-table .core-pos, .core-table .core-ex, .core-table .core-note { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.core-table .core-pos::first-letter { text-transform: uppercase; }
.core-table tr.core-fw td.core-n { color: var(--accent); font-weight: 700; }
.core-licence ul { padding-left: 20px; margin: 6px 0 10px; } .core-licence li { margin: 4px 0; }
@media (max-width: 640px) { .core-table thead { display: none; } .core-table tr { display: grid; grid-template-columns: 3ch 1fr; border-top: 1px solid var(--line); padding: 6px 0; } .core-table td { border-top: 0; padding: 2px 0; } .core-table td:nth-child(n+3) { grid-column: 2; } .core-table td.core-n { grid-row: 1 / span 3; } }

/* Official travel advice (js/advisory.js, 14 Oct 2026): one row per government, level pill, date + link, attributions */
.adv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adv-list li { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 2px 12px; align-items: baseline; }
.adv-who { font-weight: 600; }
.adv-lv { justify-self: start; padding: 1px 8px; border-radius: 999px; font-size: 13px; background: var(--accent-soft); }
.adv-lv.adv-care { background: #fbe9c8; color: #6b4a06; }
.adv-lv.adv-stop { background: #f7d4cc; color: #7a1f0e; }
.adv-when { grid-column: 2; font-size: 13px; color: var(--muted); }
.adv-credits { list-style: none; padding: 0; display: grid; gap: 2px; }
@media (max-width: 480px) { .adv-list li { grid-template-columns: 1fr; } .adv-when { grid-column: 1; } }
:root[data-theme="dark"] .adv-lv.adv-care { background: #4a3a14; color: #ffe2a3; }
:root[data-theme="dark"] .adv-lv.adv-stop { background: #4b1f17; color: #ffc2b4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .adv-lv.adv-care { background: #4a3a14; color: #ffe2a3; } :root:not([data-theme="light"]) .adv-lv.adv-stop { background: #4b1f17; color: #ffc2b4; } }

/* ---------- My Words (js/mywords.js, 14 Oct 2026): the notebook on #flashcards and the "+" buttons ---------- */
.mw-add { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-inline-start: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); font: 600 15px/1 var(--sans); cursor: pointer; vertical-align: middle; }
.mw-add:hover { border-color: var(--accent); }
.mw-add.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mw-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-card-wrap .mw-add { width: 36px; height: 36px; font-size: 18px; }
.mw-panel { display: grid; gap: 12px; }
.mw-panel h2 { margin: 0; }
.mw-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mw-field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.mw-field small { font-size: 12px; }
.mw-field input { font: 16px var(--sans); padding: 9px 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.mw-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mw-wide, .mw-sug, .mw-form .fc-actions, .mw-msg { grid-column: 1 / -1; }
.mw-form .fc-actions { justify-content: flex-start; }
.mw-msg:empty { display: none; }
.mw-sug { display: grid; gap: 6px; }
.mw-sug:empty { display: none; }
.mw-s { text-align: start; font: 15px var(--sans); color: var(--ink); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--accent-soft); cursor: pointer; }
.mw-s .r { font-style: italic; color: var(--accent); }
.mw-s-en { color: var(--muted); }
.mw-s small { color: var(--muted); }
.mw-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.mw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mw-w { display: grid; }
.mw-w .t { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.mw-w .r { font-style: italic; color: var(--accent); font-size: 14px; }
.mw-en { display: grid; gap: 2px; overflow-wrap: anywhere; }
.mw-note { font-size: 13px; color: var(--muted); }
.mw-own { font-size: 12px; color: var(--muted); }
.mw-miss { color: var(--muted); }
.mw-del { font-size: 16px; color: var(--muted); padding: 4px 8px; }
.mw-del-ask { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.mw-io { justify-content: flex-start; }
.mw-import { cursor: pointer; }
@media (max-width: 640px) {
  .mw-form { grid-template-columns: 1fr; }
  .mw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mw-en { grid-column: 1; }
  .mw-row > .mw-del, .mw-row > .mw-del-ask { grid-row: 1 / span 2; grid-column: 2; }
}

/* Sources line at the end of a lesson (js/credits.js) */
.sources-note p { font-size: 14px; color: var(--muted); max-width: 70ch; }
.sources-note a { color: inherit; text-decoration: underline; }
/* Romanizations: capital I gets serifs so "Iie" (Japanese "no") never reads as "lie" (Figtree's I and l are both plain
   bars and it has no alternate I). Only U+0049 comes from a serif face already on the device; nothing is downloaded. */
@font-face { font-family: "Rom I"; src: local("Georgia"), local("NotoSerif-Regular"), local("Noto Serif"), local("Times New Roman"), local("DejaVu Serif"); unicode-range: U+0049; }
@font-face { font-family: "Rom I"; font-style: italic; src: local("Georgia Italic"), local("Georgia-Italic"), local("NotoSerif-Italic"), local("Noto Serif Italic"), local("Times New Roman Italic"), local("DejaVu Serif Italic"); unicode-range: U+0049; }
.r, .fc-rom, .sc-rom, .dr-rom { font-family: "Rom I", var(--sans); }
/* "Sounds Like: ee-eh" under a romanization (the `s` field, English-reader respelling; soundsLike() in flashcards.js) */
.sl, .fc-sl { display: block; color: var(--muted); font-size: 12px; font-style: normal; }
.fc-sl { font-size: 15px; }
.sl-k { font-weight: 600; text-transform: capitalize; } .sl-k::after { content: ":"; }

/* =====================================================================================================================
   REDESIGN, 23 Oct 2026 (owner's overnight brief, phase 3): sleeker, aligned, roomier; same Garden brand (BRAND.md).
   Appended last so it wins over the older layers above. Three rules: (1) every control is one of TWO sizes (a 40 px
   button, a 32 px chip; 44/36 on phones), same font, same radius, content centred; (2) buttons sit in rows with one gap
   (.tool-row, .gen-row, .fill-actions, .trip-actions, .link-row); (3) desktop gets a wider column, larger type and more
   air; 390 px phones keep 16 px side gutters and a compact header.
   ===================================================================================================================== */
:root { --ctl-h: 40px; --chip-h: 32px; --gap: 10px; --space: 28px; }
@media (max-width: 640px) { :root { --ctl-h: 44px; --chip-h: 36px; --space: 22px; } }

/* (1) controls */
.btn, .gen, .top-link, .theme-btn, .family-btn, .profile-btn, .guide-link, .hero-btn, .book-back, .more-btn, .trip-actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ctl-h); padding: 0 18px; box-sizing: border-box;
  font: 600 14.5px/1.1 var(--sans); letter-spacing: 0; text-transform: capitalize;   /* Title Case (owner rule) */
  border-radius: 999px; white-space: nowrap; text-decoration: none; vertical-align: middle;
}
.btn { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); color: var(--accent-ink); }
.gen { border: 1px solid var(--accent); color: var(--accent); background: transparent; }
.theme-btn { color: var(--ink); border: 1px solid var(--line); background: var(--surface); }
.book-back { background: transparent; border: 1px solid transparent; color: var(--accent); padding: 0 6px; }
.chip, .nat-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--chip-h); padding: 0 14px; font: 500 14px/1.1 var(--sans); border-radius: 999px; box-sizing: border-box; }
.btn-icon { width: 18px; height: 18px; }
.profile-btn { text-transform: none; }
@media (min-width: 641px) { .profile-box { display: flex; align-items: center; gap: 8px; } }
@media (max-width: 640px) { .btn, .gen, .top-link, .theme-btn, .family-btn, .profile-btn, .guide-link, .hero-btn, .more-btn { white-space: normal; text-align: center; } }

/* (2) rows of buttons: one gap, wrapping as whole buttons, aligned on their centre line */
.tool-row, .gen-row, .fill-actions, .trip-actions, .link-row, .section-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); }
.tool-row { margin: 12px 0 4px; }
.fill-bar .fill-note { margin: 0; font-size: 15px; }
.link-row { margin-top: 14px; }
.link-row code { min-height: var(--chip-h); display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; }
.section-nav { flex-wrap: nowrap; }
.fill-row { gap: 20px; }

/* (3) layout: wider, bigger, more air on desktop */
@media (min-width: 900px) {
  body { font-size: 16.5px; line-height: 1.6; }
  .wrap { max-width: 1240px; padding: 0 32px; }
  .header-row { padding-top: 18px; padding-bottom: 14px; gap: 20px; }
  .sub-header { padding-top: 14px; }
  .levels { gap: 10px; padding-bottom: 16px; }
  .level-tab { padding: 12px 16px; border-radius: 14px; }
  .tab-text strong { font-size: 16px; }
  .fill-bar { padding-top: 24px; }
  .section-head h2, main h2 { font-size: clamp(28px, 2.6vw, 36px); }
  .hero { padding: 64px 48px 40px; margin-top: 28px; border-radius: 28px; }
  .tagline { font-size: 21px; }
  .facts { gap: 16px; } .facts div { padding: 18px 20px; }
  .map-section { margin-top: 36px; }
  main section + section, .section { margin-top: var(--space); }
  .lang-field input { width: 220px; min-height: var(--ctl-h); border-radius: 999px; padding: 0 16px; }
}
/* level tabs: one line each, the step number in a circle, the name only (Basic, Beginner, Intermediate, Advanced) */
.level-tab { min-height: 52px; align-items: center; }
.tab-text strong { font-weight: 600; }

/* phone header (390 px): brand + light/dark on one line, then the profile pills, then Families + the language box */
@media (max-width: 640px) {
  .header-row { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; padding-top: 12px; }
  .header-row .brand { grid-column: 1; }
  .header-row .theme-btn { grid-column: 2; grid-row: 1; padding: 0 14px; }
  .header-row .profile-box { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .header-row .family-menu { grid-column: 1; }
  .header-row .lang-field { grid-column: 1 / -1; }
  .lang-field { display: grid; grid-template-columns: auto 1fr; }
  .lang-field input { width: 100%; min-height: var(--ctl-h); border-radius: 999px; padding: 0 16px; font-size: 16px; }
  .levels, .levels:has(.globe-btn) { grid-template-columns: 1fr 1fr; gap: 8px; }
  .levels .globe-btn { grid-column: 1 / -1; justify-self: start; }
  .level-tab { min-height: 48px; padding: 8px 12px; }
  .hero { padding: 36px 20px 22px; }
}
/* the pinned header on one line on wide screens: the language box's label as small as the profile pills' labels */
@media (min-width: 641px) {
  .header-row { flex-wrap: wrap; row-gap: 10px; }
  .lang-field > span { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .lang-field input { width: 200px; min-height: var(--ctl-h); border-radius: 999px; padding: 0 16px; }
  .header-row .brand { flex: none; }
}
/* the light/dark switch as a round icon button on wider screens (its words stay for screen readers) */
@media (min-width: 641px) {
  .header-row { gap: 14px; }
  .lang-field input { width: 170px; }
  .theme-btn { font-size: 0; width: var(--ctl-h); padding: 0; }
  .theme-btn::before { font-size: 17px; margin: 0; content: "☾"; }
  :root[data-theme="dark"] .theme-btn::before { content: "☀"; }
}
@media (min-width: 641px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn::before { content: "☀"; } }
/* phone header, tighter (390 px check): brand + round light/dark icon, the profile pills, then Families beside the language box */
@media (max-width: 640px) {
  .header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .header-row .brand { flex: 1 1 auto; font-size: 24px; white-space: nowrap; order: 1; }
  .header-row .profile-box { order: 3; } .header-row .family-menu { order: 4; } .header-row .lang-field { order: 5; }
  .header-row .theme-btn { font-size: 0; width: var(--ctl-h); padding: 0; flex: none; order: 2; }
  .header-row .theme-btn::before { font-size: 18px; margin: 0; content: "☾"; }
  :root[data-theme="dark"] .header-row .theme-btn::before { content: "☀"; }
  .header-row .profile-box { flex: 1 1 100%; }
  .header-row .family-menu { flex: none; }
  .header-row .lang-field { flex: 1 1 160px; display: flex; gap: 8px; }
  .lang-field > span { font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  .lang-field input { flex: 1; min-width: 0; width: auto; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .header-row .theme-btn::before { content: "☀"; } }

/* Write It on the website (js/writeit-site.js + the app's prototypes/app/writeit.js): the app's writeit.css, shared rules */
.wi-intro h3 { margin: 4px 0 2px; }
.wi-card { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 12px 12px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); }
.wi-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; margin: 0; }
.wi-top .fc-tag { position: static; max-width: none; }
.wi-left { font: 500 .7rem/1.3 var(--mono); color: var(--muted); white-space: nowrap; }
.wi-sound { margin: 4px 0 0; font: 700 2rem/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.wi-hint { margin: 0; max-width: 32em; }
.wi-card .fc-mw { margin: 0; }
.wi-pad { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.wi-pad > svg:not(.wi-grid) { position: relative; display: block; }
.wi-grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wi-grid path { stroke: var(--line); stroke-width: .5; stroke-dasharray: 2 2; fill: none; }
.wi-msg { margin: 2px 0 0; min-height: 1.4em; font-weight: 600; color: var(--ink); }
.wi-msg.slip { color: var(--stamp); }
.wi-card.done .wi-msg { color: var(--accent); }
.wi-note { margin: 0; }
.wi-tools { justify-content: center; gap: 8px; }
.wi-tools .btn { flex: 0 1 auto; min-width: 0; padding-inline: 16px; }
.wi-credit { margin-top: 10px; }
/* Tibetan free drawing (wiFreeMount) */
.wi-free { position: relative; }
.wi-free .wi-cv { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.wi-ref { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wi-ref.trace path { fill: var(--line); }
.wi-ref.over path { fill: var(--accent); opacity: .45; }
.wi-free-card.miss .wi-ref.over path { fill: var(--stamp); }
.wi-ex { display: grid; justify-items: center; gap: 4px; }
.wi-expad { width: 120px; height: 120px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.wi-sound.wi-big { font-size: 3rem; margin-top: 8px; }
.wi-site { border-top: 1px solid var(--line); padding-top: 18px; }
.wi-site .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wi-site .row { display: flex; flex-wrap: wrap; gap: var(--gap); justify-content: center; }
.wi-site .wi-card { max-width: 420px; margin: 0 auto; }
.wi-site .fc-counts { display: flex; gap: 16px; } .wi-site .link { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.wi-site .btn.ghost { background: transparent; } .wi-site .small { font-size: 13px; } .wi-site .sub { color: var(--muted); }
.wi-foot { justify-content: center; margin-top: 12px; }
/* Draw The Letter: Trace / Draw side by side at the top (same as prototypes/app/writeit.css) */
.wi-modes { display: inline-flex; gap: 2px; padding: 3px; margin: 6px 0 4px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); }
.wi-card > .wi-modes { justify-self: center; margin: 0 0 4px; }
.wi-mode { border: 0; background: none; color: var(--muted); font-family: inherit; font-weight: 600; font-size: .92rem; line-height: 1; padding: 9px 18px; border-radius: 999px; min-height: 36px; cursor: pointer; }
.wi-mode[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.wi-intro .wi-modes { display: flex; width: fit-content; }
/* 24 Oct (owner #96 #83 #85 #35, same rules as prototypes/app/writeit.css): three modes on one row, learned-pack mark, pack name case */
.wi-mode { padding: 9px 13px; font-size: .88rem; white-space: nowrap; }
.wi-modehint { margin: 0 0 6px; }
.wi-chip .wi-done { color: var(--muted); font-weight: 700; }
.fc-count .wi-packname { text-transform: capitalize; }
.wi-practice { margin: 8px 0 12px; }
/* REDESIGN, the last odd controls (audit of every page, 23 Oct): small selects = chip height, field-like boxes = button height. */
.book-langs select { min-height: var(--chip-h); padding: 0 12px; }
.pick-search { min-height: var(--ctl-h); padding: 0 14px; }
.calc-add { min-height: var(--ctl-h); }
/* Phone header, one row shorter (23 Oct): Families + the target-language box share a row; the box's placeholder
   ("Any Language, E.g. Spanish") says what it is, so its small label is kept for screen readers only. */
@media (max-width: 640px) {
  .header-row { grid-template-columns: auto 1fr auto; }
  .header-row .brand { grid-column: 1 / 3; }
  .header-row .theme-btn { grid-column: 3; }
  .header-row .profile-box { grid-column: 1 / -1; }
  .header-row .family-menu { grid-column: 1; }
  .header-row .lang-field { grid-column: 2 / -1; grid-template-columns: 1fr; }
  .header-row .lang-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ===== Eating + Medical Cards on the website (23 Oct 2026, js/cards-site.js): the app's own CSS (prototypes/app/showit.css,
   eating.css, mycards.css and sos.css's .medcard dialog), copied as is minus its PDF/wallet rules. Keep in step with the app. ===== */
.showit, .medcard { --paper: #fffdf8; --paper-ink: #2a1f16; --body: var(--sans); }
.showit [data-eat="pdf"], .showit [data-med="pdf"] { display: none; }   /* no PDF library on the website: print the trip sheet instead */
.medcard .label { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.medcard .sub { color: var(--muted); } .medcard .link { background: none; border: 0; color: var(--accent); padding: 0; font: inherit; cursor: pointer; }
.medcard input, .medcard select { font: 15px var(--sans); color: var(--ink); background: var(--blank); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: var(--ctl-h); }
.medcard .eat-tick input { min-height: 0; }
.medcard .btn.ghost { background: transparent; }
/* Show-It Cards (showit.js): a phrase in big type to show someone. Always paper-white with dark ink, in light and dark mode,
   so it reads like a sign held up to a driver or a pharmacist. */
.showit { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--paper, #fffdf8); color: var(--paper-ink, #2a1f16);
  padding: max(16px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom)); font-family: var(--body, system-ui, sans-serif); }
.showit .si-card { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; text-align: center; padding: 8px 4px; }
.showit .si-card > :first-child { margin-top: auto; } .showit .si-card > :last-child { margin-bottom: auto; }   /* centred, but scrolls from the top when long */
.showit p { margin: 0; overflow-wrap: anywhere; }
.showit .si-t { font-weight: 700; line-height: 1.2; }
.showit .si-addr { font-size: 24px; font-weight: 600; line-height: 1.3; border: 2px solid currentColor; border-radius: 10px; padding: 8px 10px; }
.showit .si-r { font-size: 20px; font-style: italic; color: #4a3d30; }
.showit .si-en { font-size: 18px; color: #4a3d30; }
.showit .si-hint { font-size: 14px; color: #6f5f4c; }
.showit .si-slot { display: grid; gap: 4px; text-align: start; font-size: 14px; color: #4a3d30; margin-top: 8px; }
.showit .si-slot input { font: inherit; font-size: 18px; padding: 10px 12px; border: 1.5px solid #c9b89f; border-radius: 10px; background: #fff; color: #2a1f16; }
.showit .si-note { font-size: 12px; color: #6f5f4c; text-align: start; }
.showit .si-bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 10px; border-top: 1px solid #e6d8c3; }
.showit .si-btn { min-width: 48px; min-height: 48px; border-radius: 24px; border: 1.5px solid #c9b89f; background: #fff; color: #2a1f16; font: 600 22px/1 var(--body, system-ui, sans-serif); padding: 0 14px; }
.showit .si-btn:disabled { opacity: .35; }
.showit .si-close { font-size: 16px; text-transform: capitalize; margin-inline-start: auto; }
.showit .si-n { font-size: 14px; color: #6f5f4c; min-width: 48px; text-align: center; }
.showit .listen { min-width: 48px; min-height: 48px; }
.showit .si-replies { text-align: start; border-top: 1px solid #e6d8c3; padding-top: 10px; display: grid; gap: 6px; }
.showit .si-rh { font: 700 13px var(--body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em; color: #2f6b3a; }
.showit .si-rep { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: center; }
.showit .si-rt { font-size: 22px; font-weight: 600; }
.showit .si-rr { grid-column: 1; font-size: 15px; font-style: italic; color: #4a3d30; }
.showit .si-re { grid-column: 1; font-size: 14px; color: #6f5f4c; }
.showit .si-rep .listen { grid-row: 1 / span 3; grid-column: 2; }
.showit .si-pbe { text-align: start; border-top: 1px solid #e6d8c3; padding-top: 10px; display: grid; gap: 6px; }
.showit .si-pbe-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.showit .si-pbe-row .listen { width: auto; font-size: 15px; }
.showit .si-pbe input { flex: 1; min-width: 90px; font: inherit; font-size: 20px; padding: 10px 12px; border: 1.5px solid #c9b89f; border-radius: 10px; background: #fff; color: #2a1f16; }
.showit .si-pbe .si-btn { font-size: 15px; }
.showit .si-pbe-res { font-size: 18px; font-weight: 600; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* "My Eating Card" (eating.js): the screen card (paper-white like Show-It, light and dark mode), the setup dialog
   (Medical Card style, sos.css) and the kit's PDF page (scoped like SHEET_CSS in app.js). */
.eatc .eat-card { text-align: start; gap: 14px; }
.eatc .eat-title { font: 700 14px var(--body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em; color: #2f6b3a; border-bottom: 2px solid #2a1f16; padding-bottom: 6px; }
.eatc .eat-loc { display: grid; gap: .45em; font-weight: 600; line-height: 1.3; }
.eatc .eat-loc p, .eatc .eat-loc li { margin: 0; overflow-wrap: anywhere; }
.eatc .eat-loc i, .eatc .eat-list i { display: block; font-size: .6em; font-weight: 400; color: #4a3d30; margin-top: 2px; }
.eatc .eat-loc .eat-strong { font-weight: 800; }
.eatc .eat-list { margin: 0; padding-inline-start: 1.2em; display: grid; gap: .2em; font-weight: 800; }
.eatc .eat-en { display: grid; gap: 4px; font-size: 15px; line-height: 1.35; color: #4a3d30; border-top: 1px solid #c9b89f; padding-top: 10px; }
.eatc .eat-en p { margin: 0; } .eatc .eat-en .eat-list { font-weight: 600; }
.eatc .eat-enh { font: 700 11px var(--body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em; color: #6f5f4c; }
.eatc .si-hint { text-align: start; }
.eatc .eat-pick { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #4a3d30; }
.eatc .eat-pick select { font: inherit; font-size: 16px; padding: 6px 8px; border: 1.5px solid #c9b89f; border-radius: 8px; background: #fff; color: #2a1f16; }
.eatc .si-btn.eat-small { font-size: 15px; text-transform: capitalize; }
.eat-setup .eat-set { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.eat-setup .eat-set legend { grid-column: 1 / -1; margin-bottom: 4px; text-transform: capitalize; }
.eat-setup .eat-set > .small { grid-column: 1 / -1; margin: 2px 0 0; }
.eat-setup .eat-tick { display: flex; gap: 8px; align-items: center; min-height: 40px; font-size: 15px; text-transform: capitalize; }
.eat-setup .eat-tick input { width: 22px; height: 22px; flex: none; margin: 0; }
.eat-setup .link { justify-self: start; }
@media (max-width: 360px) { .eat-setup .eat-set { grid-template-columns: 1fr; } }
/* the kit's PDF page */
/* the button on Show-It Cards' food phrases (showit.js) */
.showit .si-eat { align-self: center; font-size: 16px; text-transform: capitalize; }
/* a food allergy typed by the traveller: the note under the allergen list (eating.js eatTypedNote) */
.eatc .eat-typed, #pdf-stage .sheet.eatp .eat-typed { margin: 0; font-size: 12px; font-weight: 500; color: #6f5f4c; }

/* mycards.js: the Medical Card on screen (paper-white like the Eating Card, eating.css .eatc), its setup (sos.css .medcard +
   eating.css .eat-setup) and "My Cards" in the profile. */
/* the Medical Card as a form (owner, 19 Oct night): question (local + English) then the answer(s); sizes in em so the PDF can shrink them */
.medc .mc-help { font-size: 17px; font-weight: 700; display: grid; gap: 2px; margin: 0; }
.medc .mc-form, .medp .mc-form { font-size: 18px; display: grid; }
.mc-row { display: grid; gap: .2em; border-top: 1px solid #e6d8c3; padding: .5em 0; }
.mc-q { margin: 0; display: grid; gap: .05em; }
.mc-ql { font-size: .78em; font-weight: 700; color: #2f6b3a; }
.mc-qe { font-size: .62em; font-weight: 600; color: #6f5f4c; text-transform: none; }
.mc-a { margin: 0; padding: 0; list-style: none; display: grid; gap: .3em; }
.mc-a li { display: grid; gap: .05em; padding-inline-start: .6em; border-inline-start: 3px solid #e6d8c3; }
.mc-l { font-size: 1.1em; font-weight: 700; line-height: 1.25; color: #2a1f16; overflow-wrap: anywhere; }
.mc-l i { display: block; font-size: .65em; font-weight: 400; color: #4a3d30; }
.mc-e { font-size: .66em; font-weight: 500; color: #6f5f4c; }
.mc-typed { font-weight: 600; }
.mc-typed a.tel { color: #2f6b3a; }
.medc .mc-help .mc-l { font-size: 17px; }
.medc .mc-help .mc-e { font-size: 13px; }
.eat-setup .mc-field { display: grid; gap: 4px; }
.eat-setup .mc-field .label { text-transform: capitalize; }
.eat-setup .mc-field select { width: 100%; }
/* the profile */
.mycards .mc-sum { display: grid; gap: 4px; border: 1px solid var(--line, #e6d8c3); border-radius: 12px; padding: 10px 12px; }
.mycards .mc-sum .label { text-transform: capitalize; }
.mycards .mc-sum p { margin: 0; }
.mycards .mc-sum-act { display: flex; gap: 8px; flex-wrap: wrap; }
.mycards .mc-sum-act .chip { text-transform: capitalize; }
/* The setup sheets are tall: keep them clear of the iPhone's status bar / camera and home bar (safe areas). */
.medcard.eat-setup { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.medcard.eat-setup .medcard-box { max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))); }
/* the Medical Card's PDF page (cardPdf: scoped like SHEET_CSS in app.js) */
.setup-note.mc-food, .eat-setup .mc-food { margin: 0; }
.eatc .mc-roman { justify-self: start; align-self: start; font-size: 14px; color: #2f6b3a; text-transform: capitalize; padding: 0; }

.medcard { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; padding: 16px; background: rgba(0,0,0,.4); }
.medcard-box { width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 8px; padding: 18px; border-radius: 18px; background: var(--bg); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.medcard-box h3 { text-transform: capitalize; margin: 0; }
.medcard-box input { width: 100%; box-sizing: border-box; }
.medcard-box .big { font-size: 1.5rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; margin: 0; }
.medcard-box.show p { margin: 0; }
.medcard-act { display: flex; gap: 8px; margin-top: 6px; }
.medcard-act .btn { flex: 1; }

/* "Now At languagetrip.app" note, shown only off languagetrip.app (index.html, owner #48) */
.moved-note { margin: 0; padding: 6px 16px; text-align: center; font-size: 14px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.moved-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
.moved-note a:hover, .moved-note a:focus-visible { text-decoration: underline; }

/* Website header line (owner, 23 Oct 2026): one quiet line in the brand's display face, above the section links. */
.site-line { margin: 0 auto; padding-top: 14px; font: 700 clamp(17px, 2vw, 22px)/1.25 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
@media (max-width: 640px) { .site-line { padding-top: 10px; font-size: 17px; } }

/* Phones (cards review, 23 Oct 2026): a one-word page title ("Flashcards") was 374 px wide in a 318 px hero at 390 px. */
@media (max-width: 520px) { .hero h1 { font-size: clamp(32px, 9vw, 44px); } }