/* The daily learning layout: white surfaces, navy type, sky-blue actions.
   This layer shares the existing practice engine and responsive app shell. */
:root {
  color-scheme: light dark;
  --paper: #fff; --panel: #f8fbfd; --panel-2: #f0f5f9;
  --ink: #404b60; --ink-2: #5c6980; --ink-3: #6e7b91; --disabled: #d5dbe1;
  --line-1: #edf0f2; --line-2: #dce1e6; --lip: #d4dce0;
  --brand: #36bffa; --brand-lip: #0ba5ec; --brand-soft: #e0f2fe;
  --brand-soft-2: #b9e6fe; --brand-ink: #026aa2; --brand-line: #7cd4fd;
  --brand-tint: #b9e6fe; --brand-contrast: #071827; --on-brand: #fff;
  --m-l: var(--brand); --m-l-lip: var(--brand-lip);
  /* base.css redeclares its palette inside a dark-preference media query. A
     media query adds no specificity, so this unconditional block wins and the
     app is light-only — but only for the tokens it actually names. The three
     groups below are not restyled here; they simply repeat base.css's own
     light values, so nothing leaks a dark colour into this light UI. */
  --m-f: #ff5c8a; --m-f-lip: #d63c69; --m-v: #9b5cff; --m-v-lip: #7a3cd6;
  --green: #36bffa; --green-lip: #0ba5ec; --green-soft: #e0f2fe;
  --green-line: #7cd4fd; --green-ink: #026aa2;
  --wrong: #d93d42; --wrong-lip: #b52a2f; --wrong-soft: #fff0ee;
  --wrong-ink: #a82228; --wrong-line: #edb8b5;
  --amber: #fbbf24; --amber-lip: #d97706; --amber-text: #d97706;
  --amber-soft: #fef3c7; --amber-line: #fde68a; --amber-ink: #92400e;
  --info: #0ba5ec; --info-lip: #026aa2; --info-soft: #e0f2fe;
  --r: 16px; --r-lg: 20px;
}
/* The block above is unconditional, so it beat base.css's dark palette and made
   the whole app light-only — that was the decision, and this is the counterpart
   that undoes it. It restates exactly the tokens named above, and nothing else,
   so base.css keeps ownership of the three groups friendly.css never touches
   (--focus-ring, --brand-on, --countdown). Values follow base.css's dark theme,
   the landing page and the server-rendered pages, so the product has one dark
   ground rather than four. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d1520; --panel: #131e2b; --panel-2: #1b2837;
    --ink: #f0f5fa; --ink-2: #a3b0bf; --ink-3: #8b98a8; --disabled: #3a4756;
    --line-1: #1b2837; --line-2: #233242; --lip: #060b11;
    --brand: #36bffa; --brand-lip: #0086c9; --brand-soft: #0b3448;
    --brand-soft-2: #0b3049; --brand-ink: #7cd4fd; --brand-line: #065986;
    --brand-tint: #b9e6fe; --brand-contrast: #071827; --on-brand: #fff;
    --m-l: var(--brand); --m-l-lip: var(--brand-lip);
    /* This UI deliberately paints "correct" in brand blue rather than green;
       the dark values keep that decision. */
    --green: #36bffa; --green-lip: #0086c9; --green-soft: #0b3448;
    --green-line: #065986; --green-ink: #7cd4fd;
    --wrong: #f87171; --wrong-lip: #dc2626; --wrong-soft: #3a1a1c;
    --wrong-ink: #fda29b; --wrong-line: #6d2f31;
    --amber: #fbbf24; --amber-lip: #d97706; --amber-text: #fdb022;
    --amber-soft: #33270f; --amber-line: #6d5322; --amber-ink: #fcd34d;
    --info: #36bffa; --info-lip: #7cd4fd; --info-soft: #0b3448;
  }
}
button, .big, .ghost { font-weight: 800; }
.big { background: var(--brand); color: var(--on-brand); font-weight: 900; }
.big.caps { font-size: 1.15rem; font-weight: 900; }
.q { color: var(--ink); font-weight: 900; }

/* Today */
#today { position: fixed; inset: 0; z-index: 25; overflow-y: auto; background: var(--paper); display: none; padding: 18px 18px calc(96px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
#today.show { display: block; }
.today-inner { max-width: 540px; margin: auto; }
#today h1 { font-size: clamp(32px, 8.7vw, 43px); line-height: 1.07; letter-spacing: -1.2px; font-weight: 950; margin: 19px 0 18px; }

/* Reel navigation and controls */
#journeyHeader { border: 0; height: auto; padding: 0; background: transparent; top: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); left: 10px; right: 10px; width: auto; transform: none; }
#journeyHeader > :not(.reels-toolbar) { display: none !important; }
.reels-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 54px; padding: 5px 9px 5px 13px; background: color-mix(in srgb, var(--paper) 96%, transparent); border-radius: 14px; color: var(--ink); }
.reels-toolbar > b { font-size: 22px; font-weight: 950; letter-spacing: -.7px; }
.reels-switch { display: flex; padding: 2px; border-radius: 22px; background: var(--panel-2); }
.reels-switch button { font-size: 16px; min-height: 38px; padding: 6px 16px; border-radius: 20px; color: var(--ink-2); font-weight: 850; }
.reels-switch .selected { background: var(--brand); color: var(--on-brand); }
#reelsSearch { width: 40px; display: grid; place-items: center; }
#reelsSearch svg { width: 24px; height: 24px; }
body.journey-feed .vcap { top: calc(84px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))); left: 22px; right: 22px; bottom: auto; }
body.journey-feed .vcap .t { font-size: 25px; line-height: 1.14; font-weight: 950; letter-spacing: -.5px; }
body.journey-feed .vcap .f { display: none; }
body.first-run .lesson-eyebrow, .lesson-eyebrow { display: block; font-size: 13px; font-weight: 900; color: #fff; letter-spacing: 1px; }
.vscrim { background: linear-gradient(180deg, #091b3859 0, transparent 32%, transparent 55%, #091b38c9 100%); }
body.journey-feed .vmute, .reel-save { position: absolute; z-index: 3; left: auto; right: 13px; width: 51px; height: 66px; border: 0; box-shadow: none; border-radius: 24px; background: #13233dc9; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; }
body.journey-feed .vmute { top: 46%; bottom: auto; }
.reel-save { top: calc(46% - 75px); bottom: auto; }
.reel-save svg, .vmute svg { width: 25px; height: 25px; fill: currentColor; }
.reel-save span, .vmute span { font-size: 11px; font-weight: 800; }
.reel-save[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); }
.reel-check.big.caps { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(168px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); width: auto; min-width: 182px; min-height: 47px; padding: 10px 22px; border-radius: 28px; font-size: 20px; white-space: nowrap; box-shadow: 0 4px 0 var(--brand-lip); }
.reel-check.big.caps { display: flex; align-items: center; justify-content: center; gap: 8px; }
.reel-check svg { width: 24px; height: 24px; flex: none; fill: currentColor; }
.reel-check.big.caps:active { transform: translate(-50%, 3px); box-shadow: none; }
.reel-transport { position: absolute; z-index: 3; left: 14px; right: 18px; bottom: calc(111px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); min-height: 44px; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; color: #fff; }
.reel-toggle { display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; box-shadow: none; cursor: pointer; }
.reel-toggle:active { background: transparent; transform: scale(.94); }
.reel-toggle svg { width: 32px; height: 32px; fill: currentColor; filter: drop-shadow(0 1px 3px #0003); }
.reel-toggle[data-playing="true"] .reel-play-icon, .reel-toggle[data-playing="false"] .reel-pause-icon { display: none; }
.reel-transport input { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom; }
.reel-transport input::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--brand) 0 var(--reel-progress, 0%), #ffffff59 var(--reel-progress, 0%) 100%); }
.reel-transport input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0003; }
.reel-transport input::-moz-range-track { height: 6px; border-radius: 999px; background: #ffffff59; }
.reel-transport input::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--brand); }
.reel-transport input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0003; }
.reel-toggle:focus-visible, .reel-transport input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.reel-toggle:disabled, .reel-transport input:disabled { opacity: .45; cursor: default; }
.reel-time { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 3px #0005; }
.reel-swipe { position: absolute; left: 0; right: 0; bottom: calc(86px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); text-align: center; color: #fff; font-weight: 750; font-size: 14px; margin: 0; }
.reel-swipe span { padding: 0 10px; }

/* A quiz is one scrollable page. Feedback never covers its answers. */
body.journey-feed .vquiz { padding: calc(20px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 18px calc(24px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; }
.vquiz .inner { width: 100%; max-width: 560px; flex: none; overflow: visible; padding-bottom: 0; }
.vquiz .lesson-step { display: block; margin: 0 0 16px; }
.quiz-top { display: flex; gap: 19px; align-items: center; margin-bottom: 23px; }
.quiz-top .lesson-back { width: 36px; padding: 0; min-height: 38px; color: var(--ink); font-size: 39px; font-weight: 600; line-height: 1; }
.quiz-progress { flex: 1; height: 13px; background: var(--line-2); border-radius: 20px; overflow: hidden; }
.quiz-progress i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
body.first-run .vquiz .lesson-step .tag, .vquiz .lesson-step .tag { display: block; padding: 0; margin-bottom: 3px; border: 0; background: none; color: var(--brand-ink); font-size: 14px; font-weight: 950; letter-spacing: 1px; text-transform: uppercase; }
.vquiz .inner:has(.opts) > .q { display: block; min-height: 0; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; font-size: clamp(24px, 6.8vw, 32px); line-height: 1.15; font-weight: 950; letter-spacing: -.6px; text-wrap: pretty; }
.vquiz .inner:has(.opts) > .q::before, .vquiz .inner:has(.opts) > .q::after { display: none; }
.vquiz .inner > .sub { font-size: 13px; font-weight: 700; margin: 0 0 14px; }
.vquiz .opts { gap: 9px; }
.vquiz .opt { min-height: 58px; border: 2px solid var(--line-2); border-radius: 15px; padding: 12px 14px; box-shadow: none; font-size: 19px; font-weight: 900; gap: 12px; color: var(--ink); }
.vquiz .opt .l { display: none; }
.vquiz .opt > span:last-child { flex: 1; }
.vquiz .opt::after { content: ""; flex: none; width: 30px; height: 30px; border: 2px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 24px; line-height: 1; }
.vquiz .opt.right { border-color: var(--brand-ink); background: var(--brand-soft); animation: none; }
.vquiz .opt.right::after { content: "✓"; background: var(--brand-ink); border-color: var(--brand-ink); }
.vquiz .opt.wrong { background: var(--wrong-soft); border-color: var(--wrong); }
.vquiz .opt.wrong::after { content: "×"; background: var(--wrong); border-color: var(--wrong); }
.vquiz .opt.sel { border-color: var(--brand); background: var(--brand-soft); }
.vquiz .opt.sel::after { content: "•"; color: var(--brand); border-color: var(--brand); }
.vquiz .opt.dim { color: var(--ink); background: var(--paper); border-color: var(--line-2); }
.vquiz .sheet { position: static; flex: none; width: 100%; max-width: 560px; max-height: none; margin: 0 auto; padding: 0; overflow: visible; transform: none; background: transparent !important; display: none; }
.vquiz .sheet.show { display: block; }
.vquiz .sheet .in { max-width: none; }
.vquiz .sheet .more { margin: 12px 0 0; }
.vquiz .sheet .exp { font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.vquiz .sheet .ans { margin: 14px 0 0; font-size: 17px; }
.vquiz .lesson-continue { margin-top: 17px; min-height: 50px; font-size: 20px; font-weight: 950; text-transform: uppercase; }
.vquiz .hint { display: none; }
@media (max-height: 850px) {
  .quiz-top { margin-bottom: 18px; }
  .vquiz .opt { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
  .vquiz .lesson-step { margin-bottom: 12px; }
}

/* Search, topic and profile surfaces */
.search-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-heading button { min-width: 44px; font-size: 30px; }
#reelSearchModal label { display: block; font-size: 15px; font-weight: 800; margin: 12px 0 8px; }
#reelSearchInput { width: 100%; font: inherit; border: 2px solid var(--line-2); border-radius: 12px; padding: 12px; background: var(--paper); color: var(--ink); }
#reelSearchResults { margin-top: 14px; }
#reelSearchModal .saved-filter { display: flex; align-items: center; gap: 9px; min-height: 44px; }
#reelSavedOnly { width: 19px; height: 19px; accent-color: var(--brand); }
.search-reel { display: flex; gap: 12px; width: 100%; align-items: center; text-align: left; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
.search-reel img { width: 54px; height: 58px; object-fit: cover; border-radius: 10px; }
.search-reel > span:nth-child(2) { flex: 1; }
.search-reel b, .search-reel small { display: block; }
.search-reel b { font-size: 16px; font-weight: 900; }
.search-reel small { font-size: 13px; color: var(--ink-2); }
#practice h1, #home h1, #settings h1 { font-weight: 950; letter-spacing: -.8px; }

@media (min-width: 720px) and (max-width: 959px) {
  #journeyHeader { width: 520px; left: 50%; right: auto; transform: translateX(-50%); }
}
@media (max-width: 359px) {
  .reels-switch button { padding: 6px 11px; font-size: 14px; }
  .reels-toolbar > b { font-size: 20px; }
}
@media (min-width: 960px) {
  body { background: var(--paper); }
  body.journey-feed { --journey-stage-width: min(560px, 54dvh, calc(100vw - var(--desktop-rail) - 100px)); }
  body.watch-mode #reel { width: var(--journey-stage-width); border-color: var(--line-2); box-shadow: 0 12px 36px #15253617; }
  #journeyHeader { width: calc(var(--journey-stage-width) - 20px); left: calc(50% + var(--desktop-centre-shift)); top: calc(50% - var(--journey-stage-width) * 8 / 9 + 10px); transform: translateX(-50%); }
  body.journey-feed .vcard video { top: 0; height: 100%; object-fit: contain; }
  body.journey-feed .vcap { top: 83px; bottom: auto; }
  body.journey-feed .vmute { top: 46%; bottom: auto; }
  .reel-save { top: calc(46% - 75px); bottom: auto; }
  .reel-check.big.caps { bottom: 95px; }
  .reel-transport { bottom: 37px; }
  .reel-swipe { bottom: 16px; }
  body.journey-feed .vquiz { padding: 20px 18px 26px; }
  .vquiz .inner:has(.opts) > .q { font-size: 28px; }
  .vquiz .sheet { max-height: none; padding-bottom: 0; }
  .vquiz .opt { min-height: 54px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .quiz-progress i { transition: none; }
}

/* Illustrated navigation: colour lives in the artwork; a small, steady
   blue frame identifies the active destination. Only the artwork presses. */

/* Focused recall lessons (header and progress bar live in lesson-ui.css). */

/* A single readable question, spoken by our corgi. Both lesson types use
   the same layout; the mascot is decorative so the prompt is read once. */
.vquiz .corgi-question .q, #cards .guided-page .corgi-question h1 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-wrap: pretty; overflow-wrap: break-word; }

/* The answer list scrolls independently; its only primary action stays put. */
body.journey-feed .vquiz { padding: 0; overflow: hidden; border-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) solid var(--paper); }
.vquiz .quiz-scroll { flex: 1; min-height: 0; width: 100%; padding: 12px 14px 20px; overflow-y: auto; overscroll-behavior: contain; }
.vquiz .lesson-step { margin: 0; }
.vquiz .quiz-top { justify-content: space-between; margin: 0 0 20px; gap: 16px; }
.vquiz .quiz-count { font-size: 21px; font-weight: 700; color: var(--ink); }
.vquiz .lesson-back { display: grid; place-items: center; width: 38px; min-height: 44px; color: var(--ink); }
.vquiz .lesson-back svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vquiz .quiz-progress { height: 12px; background: var(--panel-2); }
.vquiz .corgi-question { border-bottom: 1px solid var(--line-1); }
.vquiz .opts { margin-top: 16px; gap: 14px; }
.vquiz .opt { min-height: 60px; padding: 16px; font-size: 18px; font-weight: 600; border: 2px solid var(--line-1); border-radius: 15px; box-shadow: 0 2px 0 var(--line-1); }
.vquiz .opt::after { display: none; }
.vquiz .opt.sel, .vquiz .opt.right { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft-2); box-shadow: 0 2px 0 var(--brand-soft-2); }
.vquiz .opt.wrong { color: var(--wrong-ink); background: var(--wrong-soft); border-color: var(--wrong-line); box-shadow: 0 2px 0 var(--wrong-line); }
.vquiz .opt.dim { border-color: var(--line-1); }
.quiz-action-bar { flex: none; width: 100%; padding: 12px 14px calc(18px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); border-top: 1px solid var(--line-1); background: var(--paper); }
.vquiz .quiz-action-bar .big { display: block; width: 100%; max-width: 560px; min-height: 56px; margin: 0 auto; border-radius: 15px; font-size: 18px; font-weight: 700; text-transform: none; color: #fff; }
.vquiz .quiz-action-bar .big:disabled { background: var(--panel-2); color: var(--ink-3); box-shadow: 0 3px 0 var(--line-2); opacity: 1; }
.vquiz .sheet[hidden] { display: none; }

/* End-of-lesson checks: four generous answer blocks, including on a phone. */

/* A lesson graphic explains the fact without adding another study step. */
.lesson-geography { margin: 20px auto 0; width: 100%; max-width: 460px; }
.lesson-map-switch { display: flex; gap: 4px; padding: 4px; max-width: 350px; margin: 0 auto; border-radius: 13px; background: var(--panel-2); }
.lesson-map-switch button { flex: 1; min-height: 43px; margin: 0; padding: 8px 10px; border: 0; border-radius: 10px; box-shadow: none; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 750; }
.lesson-map-switch button[aria-pressed="true"] { background: #2dbaf0; color: #fff; box-shadow: 0 2px 0 #12a1d7; }
.lesson-map-switch button:active { transform: scale(.97); }
.lesson-map-switch button:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 2px; }
.lesson-map { display: block; width: 100%; max-height: 285px; margin: 8px auto 0; overflow: visible; }
.map-country { stroke: #fff; stroke-width: 1.25; stroke-linejoin: round; fill-rule: evenodd; }
.map-label { font-size: 20px; font-weight: 750; fill: var(--ink); }
.map-label path { fill: none; stroke: #a8bacb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-label circle { stroke: #fff; stroke-width: 1; }
.map-scotland-label circle { fill: #9b82e8; }
.map-england-label circle { fill: #36b9ed; }
.map-wales-label circle { fill: #f18b95; }
.map-ni-label circle { fill: #f2b341; }
.map-northern-ireland, .map-ni-label { transition: fill .3s ease, opacity .3s ease; }
.lesson-geography[data-scope="gb"] .map-northern-ireland { fill: #dce5ec; } /* class is built dynamically in lesson-graphics.js */
.lesson-geography[data-scope="gb"] .map-ni-label { opacity: .4; }
.lesson-map-caption { text-align: center; color: var(--brand-ink); font-size: 16px; font-weight: 750; padding: 0 6px; }
.lesson-map-caption span { color: #99acbd; padding: 0 4px; }
.lesson-map-source { margin-top: 9px; text-align: center; font-size: 10px; color: #7b8d9e; }
.lesson-map-source summary { display: inline-block; cursor: pointer; padding: 2px 8px; }
.lesson-map-source p { margin: 6px 0; line-height: 1.5; }
@media (max-height: 760px) { .lesson-map { max-height: 225px; } .lesson-geography { margin-top: 14px; }   }
@media (prefers-reduced-motion: reduce) { .map-northern-ireland, .map-ni-label { transition: none; } .lesson-map-switch button:active { transform: none; }   }

/* Transparent, subject-specific teaching illustrations. */
.lesson-art { display: flex; justify-content: center; gap: 12px; width: 100%; max-width: 640px; margin: 20px auto 12px; }
.lesson-art figure { flex: 1; min-width: 0; margin: 0; }
/* The art is drawn 640px wide, so it fills the card up to that size and never
   past it; the viewport-height ceiling keeps it clear of the action button. */
.lesson-art img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 445; max-height: 44vh; object-fit: contain; }
.lesson-art figcaption { margin-top: 8px; text-align: center; font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--ink-2); }
.lesson-art-pair { gap: 16px; }
.guided-reading-screen .lesson-art { margin: 18px auto; max-width: 560px; }
.guided-reading-screen .lesson-art img { max-height: 36vh; }
@media (max-height: 760px) {
  .lesson-art { margin-top: 14px; }
  .lesson-art img { max-height: 34vh; }
  .guided-reading-screen .lesson-art img { max-height: 30vh; }
}