/* The course bridge inside Struktūrų atlasas (see course-bridge.js). Uses the atlas's own palette. */

/* A lesson opened by its link (#tema-1-03) starts right below the sticky lesson bar. The atlas adds both the
   page's scroll padding and each lesson's own scroll margin, which leaves the end of the lesson before it in
   view; here there is one offset, measured from the bar by course-bridge.js (the fallbacks are its heights). */
html { scroll-padding-top: var(--fs-land, 158px) !important; }
.lesson, .level-gate, .sheet, .lesson-part-heading { scroll-margin-top: 0 !important; }
@media (max-width: 760px) {
  html { scroll-padding-top: var(--fs-land, 140px) !important; }
}

/* Back to the songs: first in the row of level tabs, in their style. */
.topic-bar-continuous .level-tabs.fs-has-back { grid-template-columns: auto repeat(3, minmax(0, 1fr)) !important; }
.topic-bar .fs-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px;
  padding: 0 16px 0 12px; border: 1px solid #ffffff24; border-radius: 15px; background: #ffffff0e;
  color: #e7f1ed; font-size: 13px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.topic-bar .fs-back span { /* not one of the bar's round number badges */
  display: inline; width: auto; height: auto; border-radius: 0; background: none; font: inherit;
}
.topic-bar .fs-back svg {
  width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.topic-bar .fs-back:hover, .topic-bar .fs-back:focus-visible {
  background: var(--course-orange, #ff9e3c); color: #fff; outline: none;
}
.topic-bar .fs-back:focus-visible { outline: 2px solid #fffaf0; outline-offset: 2px; }

/* Accessibility (roadmap 3.2): every link and button shows the same ring when the keyboard is on it; the atlas gave a
   few their own and left the rest (the contents, the lesson rail, the examples) to the browser. Where it has its
   own (the bars above, the song buttons), the atlas' rule is more specific and stays. The ring is dark on the
   sheets; --at-ring comes from the theme. */
:root { --at-ring: #173d50; }
:where(a, button, summary, [tabindex="0"]):focus-visible { outline: 3px solid var(--at-ring); outline-offset: 2px; }
.song-example-actions button:focus-visible { outline: 3px solid var(--at-ring); outline-offset: 2px; }
.topic-bar :where(a, button):focus-visible { outline: 3px solid #fffaf0; outline-offset: 2px; } /* the bar is dark */
html[data-fs-theme="glass"] { --at-ring: #1554cf; }
html[data-fs-theme="code"] { --at-ring: #f9a04a; }
html[data-fs-theme="ink"] { --at-ring: #26463e; }

@media (max-width: 680px) {
  .topic-bar .fs-back { padding: 0; width: 44px; border-radius: 12px; }
  .topic-bar .fs-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print {
  .topic-bar .fs-back { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-bar .fs-back { transition: none; }
}

/* Lessons 10 and 12 begin with the topic of their song (scripts/songs/atlas_additions.json); the lesson's
   own content follows under this divider. */
.fs-extra {
  display: flex; align-items: center; gap: 14px; margin: 56px 0 28px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: #527775;
}
.fs-extra::before, .fs-extra::after { content: ""; flex: 1; height: 1px; background: #dfd3bb; }
.fs-note {
  margin: 22px 0 0; padding: 14px 18px; border-radius: 14px; background: #fff6e6; border: 1px solid #ecdcb9;
  color: #3b4f5c; font-size: 15px; line-height: 1.5;
}
.fs-note a { color: var(--course-blue, #223d81); font-weight: 700; }

/* Cards side by side are equally tall. The atlas's later styles come after this file, hence the ".lesson"
   in front. Picture cards: the cards of a row share its grid rows (subgrid), so each card's number,
   sentence, IPA and translation start on the same line as its neighbours' and the spare space falls under
   the shorter lines, not in a block at the bottom. Form cards: the rows of the shorter card share its extra
   height, each one centred. On a phone there is one card per row, so nothing changes there. */
.lesson .examples { align-items: stretch; }
@supports (grid-template-rows: subgrid) {
  .lesson .examples > .example-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .lesson .examples > .example-card > .scene { grid-row: 1; }
  .lesson .examples > .example-card > .example-copy {
    display: grid; grid-row: 2 / span 4; grid-template-rows: subgrid; row-gap: 0;
  }
  .lesson .examples > .example-card > .example-copy > * { align-self: start; }
  .lesson .examples > .example-card > .example-copy > small { justify-self: start; }
}
.lesson .forms-grid { align-items: stretch; }
.lesson .forms-grid > .form-card { display: flex; flex-direction: column; }
.lesson .forms-grid > .form-card > .form-row { flex: 1 1 auto; }

/* ==========================================================================================================
   The app's themes. The script in <head> (scripts/static_theme.py) puts the learner's choice from Nustatymai
   on <html> as data-fs-theme="pastel|glass|code|ink" before the first paint and follows changes made in
   another tab. Without it, or with "pastel", none of the rules below apply: the atlas is as it was authored.

   The atlas paints almost everything with fixed colours, in three layers: the page and its sticky bar, cream
   "paper" sheets with tinted panels on them, and saturated blocks (form cards, table heads, gates) with light
   type. Each theme sets the tokens below; the shared rules that follow repaint the three layers with them.
   ========================================================================================================== */

/* "Mažiau judesio" in Nustatymai, and the operating system's setting: no animation, no smooth scrolling. */
html[data-fs-motion="reduced"] { scroll-behavior: auto !important; }
html[data-fs-motion="reduced"] *, html[data-fs-motion="reduced"] *::before, html[data-fs-motion="reduced"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* On paper the atlas stays as authored: everything below is for screens. */
@media screen {

/* ------------------------------------------------------------------------------------------ tokens: code */
/* "Anglų kodas": dark. */
html[data-fs-theme="code"] {
  color-scheme: dark;
  --paper: var(--at-sheet); --shadow: var(--at-sheet-shadow);
  --ink: #efece6; --coral: #ff9f86; --gold: #f0cf8e; --line: rgba(255, 255, 255, 0.1);

  --at-page: #0b0e15;
  --at-glow: radial-gradient(1100px 520px at 50% -14%, rgba(38, 58, 105, 0.5), transparent 70%),
    radial-gradient(640px 320px at 88% -6%, rgba(249, 160, 74, 0.1), transparent 70%);
  --at-select: rgba(249, 160, 74, 0.35);
  --at-sheet: #12161d; --at-sheet-inset: #12161d; --at-sheet-edge: rgba(255, 255, 255, 0.09); --at-sheet-shadow: 0 26px 80px rgba(0, 0, 0, 0.5);
  --at-deco: rgba(255, 255, 255, 0.035);
  --at-sage: #161f1f; --at-sage-2: #1c2928; --at-warm: #201d19; --at-warm-2: #2a251c;
  --at-well: #1b2029; --at-well-2: rgba(255, 255, 255, 0.055); --at-scene: #181d26;
  --at-ink: #efece6; --at-ink-2: #c5ccd6; --at-ink-3: #a5aeba;
  --at-coral: #ff9f86; --at-gold: #f0cf8e; --at-link: #ffbd76; --at-focus: #fffaf0;
  --at-line: rgba(255, 255, 255, 0.1); --at-line-2: rgba(255, 255, 255, 0.18); --at-card-shadow: none;
  --at-block: #1c3946; --at-block-2: #2a4540; --at-head: #213f4d; --at-block-edge: rgba(255, 255, 255, 0.1);
  --at-gate-1: linear-gradient(135deg, #16303b, #1f4a52 62%, #35665f);
  --at-gate-15: linear-gradient(135deg, #3a2a2c, #6b3f36 57%, #8a5a45);
  --at-gate-2: linear-gradient(135deg, #16283a, #1f3f5a 56%, #2f5d74);
  --at-part: linear-gradient(135deg, #16303b, #1f4a52); --at-part-alt: linear-gradient(135deg, #3a2a2c, #6b3f36);
  --at-btn: #f9a04a; --at-btn-fg: #160d07; --at-btn-hover: #ffbd76;
  --at-coral-fill: #f09a82; --at-coral-fill-fg: #2b130c; --at-gold-fill: #e7b55c; --at-gold-fill-fg: #2a1c05;
  --at-badge: #2f6f86; --at-badge-2: #3f7d6f;
  --at-input: #0f131a; --at-tools: rgba(18, 22, 29, 0.94);

  --at-bar: rgba(11, 14, 21, 0.9); --at-bar-edge: rgba(255, 255, 255, 0.12); --at-bar-shadow: 0 12px 38px rgba(0, 0, 0, 0.55); --at-bar-blur: blur(20px);
  --at-rail: rgba(255, 255, 255, 0.04); --at-rail-edge: rgba(255, 255, 255, 0.1); --at-rail-fade: rgba(14, 17, 24, 0.97);
  --at-tab: rgba(255, 255, 255, 0.07); --at-tab-edge: rgba(255, 255, 255, 0.14); --at-tab-fg: #e7e3da;
  --at-tab-on: #f9a04a; --at-tab-on-fg: #160d07; --at-tab-on-edge: #f9a04a; --at-tab-on-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
  --at-badge-bg: rgba(255, 255, 255, 0.14); --at-badge-fg: #ffffff; --at-badge-on-bg: #160d07; --at-badge-on-fg: #f9a04a;
  --at-up-bg: #ebe7df; --at-up-fg: #0b0e15;
}

/* ---------------------------------------------------------------------------------------- tokens: glass */
/* "Skystas stiklas": the atlas' teal type on frosted white over the app's aurora, blue gel where it was dark. */
html[data-fs-theme="glass"] {
  color-scheme: light;
  --paper: var(--at-sheet); --shadow: var(--at-sheet-shadow);
  --ink: #183247; --coral: #c4573f; --line: rgba(24, 33, 53, 0.12);

  --at-page: #eef4fc;
  --at-glow: radial-gradient(60vmax 60vmax at -6% -8%, rgba(134, 195, 255, 0.7), transparent 62%),
    radial-gradient(52vmax 52vmax at 106% -4%, rgba(218, 186, 255, 0.62), transparent 62%),
    radial-gradient(48vmax 48vmax at 4% 108%, rgba(255, 207, 154, 0.66), transparent 62%),
    radial-gradient(44vmax 44vmax at 104% 106%, rgba(162, 237, 216, 0.58), transparent 62%);
  --at-select: rgba(30, 89, 205, 0.22);
  --at-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
  --at-sheet: linear-gradient(160deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  --at-sheet-inset: rgba(255, 255, 255, 0.8); --at-sheet-edge: rgba(255, 255, 255, 0.92);
  --at-sheet-shadow: var(--at-rim), 0 26px 70px -28px rgba(40, 56, 110, 0.35);
  --at-deco: rgba(134, 195, 255, 0.2);
  --at-sage: rgba(214, 235, 229, 0.6); --at-sage-2: rgba(200, 228, 221, 0.75);
  --at-warm: rgba(255, 238, 218, 0.7); --at-warm-2: rgba(255, 228, 196, 0.85);
  --at-well: rgba(255, 255, 255, 0.78); --at-well-2: rgba(255, 255, 255, 0.6); --at-scene: rgba(255, 255, 255, 0.55);
  --at-ink: #173d50; --at-ink-2: #2b5362; --at-ink-3: #3d545d;
  --at-coral: #a93d27; --at-gold: #f0cf8e; --at-link: #1554cf; --at-focus: #1554cf;
  --at-line: rgba(24, 50, 71, 0.14); --at-line-2: rgba(24, 50, 71, 0.24); --at-card-shadow: var(--at-rim), 0 10px 26px -16px rgba(40, 56, 110, 0.28);
  --at-block: linear-gradient(145deg, #1a4fbf, #2b3fb0); --at-block-2: linear-gradient(145deg, #2b3fb0, #45309a);
  --at-head: #1b47b0; --at-block-edge: rgba(255, 255, 255, 0.35);
  --at-gate-1: linear-gradient(135deg, #1245ae, #2b3fb0 58%, #3f58c8);
  --at-gate-15: linear-gradient(135deg, #8f3412, #a9481c 57%, #b85a26);
  --at-gate-2: linear-gradient(135deg, #2b3fb0, #45309a 56%, #5c44b0);
  --at-part: linear-gradient(135deg, #1245ae, #2b3fb0); --at-part-alt: linear-gradient(135deg, #8f3412, #a9481c);
  --at-btn: linear-gradient(180deg, #297cef, #1554cf); --at-btn-fg: #ffffff; --at-btn-hover: linear-gradient(180deg, #e2620f, #c4530a);
  --at-coral-fill: #b94a33; --at-coral-fill-fg: #ffffff; --at-gold-fill: #e7b55c; --at-gold-fill-fg: #173d50;
  --at-badge: #1e59cd; --at-badge-2: #2b7f73;
  --at-input: rgba(255, 255, 255, 0.85); --at-tools: rgba(255, 255, 255, 0.78);

  --at-bar: rgba(255, 255, 255, 0.8); --at-bar-edge: rgba(255, 255, 255, 0.85);
  --at-bar-shadow: var(--at-rim), 0 12px 34px -14px rgba(40, 56, 110, 0.4); --at-bar-blur: blur(28px) saturate(185%);
  --at-rail: rgba(255, 255, 255, 0.5); --at-rail-edge: rgba(255, 255, 255, 0.85); --at-rail-fade: rgba(238, 244, 252, 0.95);
  --at-tab: rgba(255, 255, 255, 0.6); --at-tab-edge: rgba(255, 255, 255, 0.9); --at-tab-fg: #183247;
  --at-tab-on: linear-gradient(180deg, #2563de, #1554cf); --at-tab-on-fg: #ffffff; --at-tab-on-edge: rgba(21, 84, 207, 0.6);
  --at-tab-on-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 8px 18px -8px rgba(21, 84, 207, 0.7);
  --at-badge-bg: rgba(24, 50, 71, 0.1); --at-badge-fg: #183247; --at-badge-on-bg: #ffffff; --at-badge-on-fg: #1554cf;
  --at-up-bg: #ffffff; --at-up-fg: #1554cf;
}

/* ------------------------------------------------------------------------------------------ tokens: ink */
/* "Rašalo knyga": warm paper, deep green ink, copper. The atlas' own teal, sage and cream already sit close to it. */
html[data-fs-theme="ink"] {
  color-scheme: light;
  --course-blue: #26463e; --course-blue-deep: #182f28; --course-blue-bright: #365c4e; --course-orange: #ad734c;
  --navy: #26463e; --blue: #365c4e; --ink: #292e2a; --coral: #95462f;
  --paper: var(--at-sheet); --shadow: var(--at-sheet-shadow);

  --at-page: #e9e4d7;
  --at-glow: repeating-linear-gradient(0deg, transparent 0 3px, rgba(65, 56, 40, 0.015) 3px 4px),
    radial-gradient(42rem 30rem at -5% 3%, rgba(151, 112, 72, 0.12), transparent 70%),
    radial-gradient(36rem 28rem at 105% 90%, rgba(88, 123, 96, 0.1), transparent 72%);
  --at-select: rgba(38, 70, 62, 0.22);
  --at-sheet: #fdfaf3; --at-sheet-inset: #fdfaf3; --at-sheet-edge: #d5ccbc; --at-sheet-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 18px 44px -24px rgba(47, 42, 28, 0.4);
  --at-deco: rgba(183, 211, 194, 0.4);
  --at-sage: #e8eee4; --at-sage-2: #e3ebe1; --at-warm: #f3ead8; --at-warm-2: #f1dfb8;
  --at-well: #fffaf3; --at-well-2: rgba(255, 255, 255, 0.6); --at-scene: #dce8df;
  --at-input: #ffffff; --at-tools: rgba(247, 239, 225, 0.94);
  --at-ink: #203e35; --at-ink-2: #3f5048; --at-ink-3: #575c53;
  --at-coral: #95462f; --at-gold: #f0cf8e; --at-link: #95462f; --at-focus: #fffaf0;
  --at-line: #d8cbb5; --at-line-2: #b9ad97; --at-card-shadow: 0 13px 36px -22px rgba(47, 42, 28, 0.3);
  --at-block: #26463e; --at-block-2: #2f5646; --at-head: #26463e; --at-block-edge: rgba(222, 230, 215, 0.25);
  --at-gate-1: linear-gradient(135deg, #27483e, #203b33 58%, #3d5a48);
  --at-gate-15: linear-gradient(135deg, #6b3f2c, #95462f 57%, #9a5a3a);
  --at-gate-2: linear-gradient(135deg, #203b33, #2f5446 56%, #486b58);
  --at-part: linear-gradient(135deg, #27483e, #3a6652); --at-part-alt: linear-gradient(135deg, #6b3f2c, #95462f);
  --at-btn: #26463e; --at-btn-fg: #fffdf7; --at-btn-hover: #95462f;
  --at-coral-fill: #95462f; --at-coral-fill-fg: #fffdf7; --at-gold-fill: #e7cfaa; --at-gold-fill-fg: #203e35;
  --at-badge: #365c4e; --at-badge-2: #2f5646;

  --at-bar: rgba(32, 59, 51, 0.98); --at-bar-edge: rgba(222, 230, 215, 0.25); --at-bar-shadow: 0 12px 34px -14px rgba(31, 52, 42, 0.6); --at-bar-blur: blur(12px);
  --at-rail: rgba(15, 31, 26, 0.45); --at-rail-edge: rgba(222, 230, 215, 0.18); --at-rail-fade: rgba(28, 52, 44, 0.97);
  --at-tab: rgba(255, 255, 255, 0.08); --at-tab-edge: rgba(222, 230, 215, 0.22); --at-tab-fg: #eef2e8;
  --at-tab-on: #f5e4bf; --at-tab-on-fg: #203e35; --at-tab-on-edge: #fff5da; --at-tab-on-shadow: 0 7px 18px rgba(10, 24, 19, 0.4);
  --at-badge-bg: rgba(255, 255, 255, 0.14); --at-badge-fg: #ffffff; --at-badge-on-bg: #26463e; --at-badge-on-fg: #ffffff;
  --at-up-bg: #fffdf7; --at-up-fg: #26463e;
}

/* --------------------------------------------------------------------------- shared by glass, code and ink */
/* Every selector starts with :root[data-fs-theme]:not([data-fs-theme="pastel"]), three classes' worth, so that
   the lists in :where() (which add nothing) beat the atlas' own rules; the few of those with more than that
   are repeated in full after it. Where two rules reach the same element, the later one wins. */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) { background: var(--at-page); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) ::selection { background: var(--at-select); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) body { background: transparent; color: var(--at-ink); }
/* the theme's ambient light, behind everything (fixed; nothing moves) */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--at-glow);
}

/* ---- the sticky bar: level tabs, the rail of lessons, the way back */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar.topic-bar-continuous {
  background: var(--at-bar); border-color: var(--at-bar-edge); box-shadow: var(--at-bar-shadow);
  -webkit-backdrop-filter: var(--at-bar-blur); backdrop-filter: var(--at-bar-blur);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar :where(.level-tab, .fs-back) {
  background: var(--at-tab); border-color: var(--at-tab-edge); color: var(--at-tab-fg);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar :where(.level-tab.active, .level-tab.active:hover, .fs-back:hover, .fs-back:focus-visible) {
  background: var(--at-tab-on); border-color: var(--at-tab-on-edge); color: var(--at-tab-on-fg);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar :where(.level-tab.active) { box-shadow: var(--at-tab-on-shadow); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar-continuous .level-tab.active {
  background: var(--at-tab-on); border-color: var(--at-tab-on-edge); color: var(--at-tab-on-fg); box-shadow: var(--at-tab-on-shadow);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lesson-rail-shell { background: var(--at-rail); border-color: var(--at-rail-edge); box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lesson-rail-shell::before { background: linear-gradient(90deg, var(--at-rail-fade), transparent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lesson-rail-shell::after { background: linear-gradient(270deg, var(--at-rail-fade), transparent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a { color: var(--at-tab-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a > span { background: var(--at-badge-bg); color: var(--at-badge-fg); box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a.active {
  background: var(--at-tab-on); border-color: var(--at-tab-on-edge); color: var(--at-tab-on-fg); box-shadow: var(--at-tab-on-shadow);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a.active > span,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a.active[data-level="1-5"] > span,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a.active[data-level="2"] > span { background: var(--at-badge-on-bg); color: var(--at-badge-on-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail a.level-start:not(:first-child)::before { background: var(--at-tab-on); opacity: 0.4; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .atlas-top-link { background: var(--at-up-bg); color: var(--at-up-fg); border-color: var(--at-tab-edge); box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .atlas-top-link:hover,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .atlas-top-link:focus-visible { background: var(--at-tab-on); color: var(--at-tab-on-fg); outline-color: var(--at-tab-on-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar :where(.fs-back, .atlas-top-link, .level-tab, .lesson-rail a):focus-visible { outline: 2px solid var(--at-focus); outline-offset: 2px; }

/* the small captions of the tabs and of the lesson in the rail are faded by the atlas; full strength reads better */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .lesson-rail .nav-copy small,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .level-tab small,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar-continuous .level-tab small,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .topic-bar .level-tab.active small { opacity: 0.95; }

/* ---- sheets: the paper the lessons are printed on */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.sheet, .lesson) { border: 1px solid var(--at-sheet-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.sheet, .lesson)::before { background: var(--at-deco); }

/* ---- type */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(h1, .lesson h2, .en, .index-groups a, .lesson-chapters a,
  .formula-panel-translated .formula-line b, .formula-panel-translated li b, .verb-guide-head > strong, .irregular-basics h3,
  .verb-reference-search input, .verb-reference-group .verb-form, .song-examples-toggle, .song-example-head h3, .atlas-tools button,
  .ipa-toggle, .overview-head h3, .structure-table tbody th, .structure-table td:nth-child(2), .atlas-comparison h3,
  .form-symbol-legend h3, .grammar-token, .grammar-legend .token-word, .have-to-grammar, .have-to-formulas code, .tense-formula,
  .key b, .verb-group td:first-child, .verb-group td:nth-child(2), .verb-group td:nth-child(3), .decode-card p, .formula-panel li,
  .notation-items span, .cover-stats span) { color: var(--at-ink); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.cover p, .contents > p, .atlas-head p, .axis-key span, .tense-card > header em,
  .tense-lt, .microkeys small, .decoder > p, .subtitle, .section-label, .lt, .key span, .closing p, .index-groups .index-level h3 > small,
  .formula-panel-translated .formula-line span, .formula-panel-translated li span, .notation-items small, .verb-guide-head p,
  .verb-note, .irregular-basics p, .verb-reference-search span, .verb-reference-notes p, .song-example-head p, .song-examples-status,
  .comparison-grid p span, .ipa, .form-symbol-legend-item, .grammar-token small, .have-to-contrast, .song-example-note) { color: var(--at-ink-3); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.eyebrow, .kicker, .index-groups h3 small, .tense-card > header span, .tense-forms small,
  .decode-card > small, .one-rule b, .index-groups .index-level h3 em, .notation-items b, .verb-guide-head > span, .verb-group th,
  .irregular-sentence small, .verb-reference-search label, .song-example-head span, .lesson-check b, .word-stack i,
  .index-groups a b small, .verb-reference-group th, .song-media-error) { color: var(--at-coral); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .section-label::after { background: var(--at-line-2); }

/* ---- tinted panels on the paper */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.cover-stats span, .index-groups section, .index-groups .index-level-1,
  .index-groups .index-level-2, .axis-key article, .microkeys span, .keywords, .lesson-chapters a, .verb-guide, .irregular-basics article,
  .verb-reference-notes p, .atlas-comparison, .form-symbol-legend-item, .have-to-formulas p, .lesson-part-heading-alt > span) { background: var(--at-sage); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.structure-table tbody th, .lesson-check > div, .axis-key article:nth-child(4)) { background: var(--at-sage-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.tense-card, .example-card, .formula-panel, .irregular-scene-card, .song-example-card,
  .axis-key article:nth-child(2), .axis-key article:nth-child(3), .index-groups .index-level-1-5, .irregular-basics article:nth-child(2),
  .irregular-basics article:nth-child(3), .notation-key, .grammar-legend, .supplement-link, .formula-panel.formula-panel-translated) { background: var(--at-warm); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.decoder, .one-rule, .lesson-check > div:last-child, .song-example-note, .verb-reference-group th) { background: var(--at-warm-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.scene, .song-example-card .scene) { background: var(--at-scene); }

/* ---- lighter cards inside the panels */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.index-groups a, .word-stack span, .index-groups .index-level h3 > small,
  .formula-panel-translated .formula-line, .notation-items > div, .verb-group, .verb-reference-group, .atlas-structure-overview,
  .structure-table, .comparison-grid p, .form-symbol-legend, .grammar-token, .grammar-legend .token-word, .have-to-grammar,
  .song-examples-toggle) { background: var(--at-well); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.tense-formula, .tense-forms p, .decode-card, .formula-panel li, .key) { background: var(--at-well-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.atlas-tools button, .ipa-toggle) { background: var(--at-well); border-color: var(--at-line-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .atlas-tools { background: var(--at-tools); border-color: var(--at-line-2); box-shadow: var(--at-card-shadow); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .verb-reference-search { background: var(--at-tools); border-color: var(--at-line); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .verb-reference-search input { background: var(--at-input); border-color: var(--at-line-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.song-examples-toggle:hover, .song-examples-toggle:focus-visible) { background: var(--at-warm-2); }

/* ---- borders, rules and shadows of the panels */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.index-groups a, .index-groups .index-level, .lesson-chapters a, .formula-panel-translated .formula-line,
  .verb-guide, .verb-group, .irregular-sentence, .song-karaoke-slot, .form-symbol-legend, .grammar-legend, .grammar-token,
  .grammar-legend .token-word, .have-to-grammar, .tense-card, .example-card, .notation-key, .notation-items > div, .irregular-basics article,
  .irregular-scene-card, .verb-reference-group, .song-examples-shell, .song-example-group + .song-example-group, .song-example-card,
  .song-examples-toggle, .key, .structure-table-scroll, .structure-table th, .structure-table td, .atlas-structure-overview,
  .verb-group th, .verb-group td, .verb-reference-group th, .verb-reference-group td, .supplement-link) { border-color: var(--at-line); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.tense-card, .example-card, .irregular-scene-card, .song-example-card, .notation-key,
  .verb-reference-search, .form-symbol-legend, .grammar-token, .atlas-structure-overview, .formula-panel-translated .formula-line) { box-shadow: var(--at-card-shadow); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.formula-panel, .formula-panel.formula-panel-translated) {
  border-color: var(--at-line-2); box-shadow: inset 0 0 0 7px var(--at-sheet-inset);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .atlas-comparison { border-left-color: var(--at-coral-fill); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-row { border-top-color: rgba(255, 255, 255, 0.16); }

/* ---- saturated blocks (their light type stays) */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.form-card, .irregular-usage-map > div, .verb-reference-group header, .listen-all) { background: var(--at-block); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.form-card:nth-child(even), .verb-reference-group:nth-child(even) header) { background: var(--at-block-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.structure-table thead th, .verb-group h4, .notation-title,
  .formula-panel-translated .formula-label, .grammar-legend-copy, .closing a) { background: var(--at-head); color: #ffffff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .listen-all[aria-pressed="true"] { background: var(--at-coral-fill); color: var(--at-coral-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lesson-part-heading { background: var(--at-part); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lesson-part-heading-alt { background: var(--at-part-alt); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .level-gate-1 { background: var(--at-gate-1); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .level-gate-1-5 { background: var(--at-gate-15); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .level-gate-2 { background: var(--at-gate-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.level-gate, .lesson-part-heading, .notation-title, .grammar-legend-copy) { box-shadow: inset 0 0 0 1px var(--at-block-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .sentence-formula { background: rgba(0, 0, 0, 0.18); border-color: rgba(255, 255, 255, 0.2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.level-gate a, .lesson-part-heading > span) { background: var(--at-gold-fill); color: var(--at-gold-fill-fg); }
/* type on those blocks: the broad type rules above reach .en, .lt and .ipa inside the form cards */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-row .en { color: #ffffff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-row .lt { color: #e2ece7; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-row .ipa { color: #d4e6df; }

/* ---- buttons and badges */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .speaker { background: var(--at-btn); color: var(--at-btn-fg); box-shadow: var(--at-card-shadow); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.speaker:hover, .speaker:focus-visible) { background: var(--at-btn-hover); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .speaker.is-playing { background: var(--at-coral-fill); color: var(--at-coral-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-card .speaker { background: rgba(255, 255, 255, 0.18); color: #ffffff; box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-card .speaker:hover,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .form-card .speaker:focus-visible { background: var(--at-btn); color: var(--at-btn-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.song-example-actions a, .song-example-actions button) { background: var(--at-badge); color: #ffffff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.song-example-actions a:last-child, .song-example-actions button:last-child) { background: var(--at-coral-fill); color: var(--at-coral-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.song-example-actions a:hover, .song-example-actions button:hover,
  .song-example-actions button:focus-visible, .song-example-actions button.is-playing) { background: var(--at-gold-fill); color: var(--at-gold-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.index-groups a span, .example-copy > small, .formula-panel-dual li b, .lesson-chapters a span,
  .irregular-character, .song-example-type, .form-kind-icon[data-symbol="−"], .form-kind-icon[data-symbol="!"]) { background: var(--at-coral-fill); color: var(--at-coral-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.key i, .form-kind-icon[data-symbol="?"]) { background: var(--at-gold-fill); color: var(--at-gold-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.irregular-basics article > span, .form-kind-icon, .form-kind-icon[data-symbol="—"]) { background: var(--at-badge); color: #ffffff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.lesson-chapters a:last-child span, .form-kind-icon[data-symbol="+"], .form-kind-icon[data-symbol="✓"], .token-verb .token-shape) { background: var(--at-badge-2); color: #ffffff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.form-kind-icon[data-symbol="−"], .form-kind-icon[data-symbol="!"]) { background: var(--at-coral-fill); color: var(--at-coral-fill-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .token-subject .token-shape::before,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .token-subject .token-shape::after { background: var(--at-coral-fill); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .token-object .token-shape { background: var(--at-well); border-color: var(--at-badge); }

/* ---- what the atlas marks !important, and the parts course-bridge.js adds to lessons 8, 10, 12 and 17 */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .supplement-link { background: var(--at-warm) !important; border-color: var(--at-line-2) !important; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .fs-extra { color: var(--at-ink-3); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .fs-extra::before,
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .fs-extra::after { background: var(--at-line-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .fs-note { background: var(--at-warm); border-color: var(--at-line); color: var(--at-ink-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .fs-note a { color: var(--at-link); }

/* ---- mobile tables (one card per row) */
@media (max-width: 700px) {
  :root[data-fs-theme]:not([data-fs-theme="pastel"]) .structure-table tr { border-bottom-color: var(--at-sage-2); }
  :root[data-fs-theme]:not([data-fs-theme="pastel"]) .structure-table :where(th, td) { border-bottom-color: var(--at-line); }
  :root[data-fs-theme]:not([data-fs-theme="pastel"]) .structure-table :where(th, td)::before { color: var(--at-coral); }
}

/* ---- focus */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :where(.example-card, .form-row, .structure-table tr):focus-within { outline-color: var(--at-gold-fill); }

/* ---------------------------------------------------------------------------------- what only one theme has */
/* glass: the gold captions on the blue blocks go a shade lighter, for type that small */
:root[data-fs-theme="glass"] :where(.form-row > span, .formula-plus, .formula-punctuation, .irregular-usage-map b, .irregular-usage-map em,
  .level-gate-eyebrow, .lesson-part-heading small, .notation-title > span, .notation-title i, .formula-panel-translated .formula-label span) { color: #ffe6b8; }
}

/* ==========================================================================================================
   Pastel (the atlas as authored) and reading contrast (roadmap 3.2). The atlas' greys, teals and corals are for
   large type, borders and fills; as small text on its cream sheets they come to 2:1 to 4.4:1. Here that text, and
   only that text, takes a deeper shade of the same hue (4.5:1 on every sheet), the coral badges and the sage
   panels go a step deeper under their white type, and the types on the sage panels turn white. The other themes
   have their own shades above.
   ========================================================================================================== */
@media screen {
html[data-fs-theme="pastel"] { --coral: #a8493a; }
/* the small print in teal-grey */
html[data-fs-theme="pastel"] :is(.contents > p, .atlas-head p, .example-copy .lt, .irregular-sentence .lt, .tense-lt,
  .verb-reference-search span, .song-example-head p, .song-examples-status, .subtitle, .closing p) { color: #4a5f62; }
html[data-fs-theme="pastel"] :is(.axis-key span, .irregular-basics p, .verb-reference-notes p) { color: #475b5e; }
html[data-fs-theme="pastel"] :is(.example-copy .ipa, .irregular-sentence .ipa) { color: #3f6663; }
html[data-fs-theme="pastel"] .tense-card > header em { color: #3f6d69; }
html[data-fs-theme="pastel"] .key span { color: #4a605c; }
html[data-fs-theme="pastel"] .notation-items small { color: #51625f; }
html[data-fs-theme="pastel"] .grammar-token small { color: #4f605d; }
html[data-fs-theme="pastel"] .microkeys small { color: #4f5f5b; }
html[data-fs-theme="pastel"] .decoder > p { color: #5e4d46; }
/* the small print in coral and clay */
html[data-fs-theme="pastel"] :is(.tense-forms small, .decode-card > small, .one-rule b, .irregular-sentence small,
  .verb-reference-search label, .song-example-head span, .tense-card > header span, .word-stack i, .lesson-check b,
  .index-groups h3 small, .index-groups .index-level h3 em, .index-groups a b small) { color: #96432f; }
/* white type on the coral badges and the sage panels needs a deeper ground */
html[data-fs-theme="pastel"] :is(.index-groups a span, .example-copy > small, .lesson-chapters a span, .irregular-character,
  .song-example-type, .form-kind-icon[data-symbol="−"]) { background: #b4543e; }
html[data-fs-theme="pastel"] :is(.form-card:nth-child(even), .verb-reference-group:nth-child(even) header,
  .form-kind-icon[data-symbol="✓"]) { background: #3f6b5b; }
html[data-fs-theme="pastel"] .form-card:nth-child(even) :is(.form-row .ipa, .form-row .lt),
html[data-fs-theme="pastel"] .verb-reference-group:nth-child(even) header p { color: #fff; }
html[data-fs-theme="pastel"] .form-card:nth-child(even) .form-row > span { color: #fff2cc; }
html[data-fs-theme="pastel"] .key i { color: #5a3d0a; }
html[data-fs-theme="pastel"] .lesson > .section-label { color: #3f6663; }
}