/* ==========================================================================
   UK Accent · the learner's look (served at /read/css/learner.css by lib/ukaccent-look.js,
   loaded by views/_uka-head.ejs after tokens + app, on every page but the traveller's).

   For the person improving their English accent: calm, warm and unmistakably British, like
   My English Interview's Reader. Warm paper under everything, navy for structure, the one red
   for the one main action, the reading serif for titles, big friendly faces, and painted
   British scenes (Grok's paintings once made on the box, drawn scenes until then).

   1. palette (light and dark)          6. a speaker's page
   2. page, type, cards                 7. the Reader
   3. the painted hero                  8. lists, You, lessons, mock, plan
   4. accent region tiles               9. shell: top bar, bottom nav, footer
   5. speaker postcards                10. motion (reduced motion respected)
   ========================================================================== */

/* 1. Palette ----------------------------------------------------------------
   Light: warm linen paper instead of the cool blue-white; lines and quiet fills warmed to match.
   Navy, red, ok and the focus ring stay the design tokens'. Contrast (WCAG AA):
   --text #0B1B3A on --bg 16.2:1 · --muted #574F45 on --bg 7.6:1, on --card 8.2:1. */
:root {
  --bg: #FAF6EE;
  --soft: #F2ECE1;
  --line: #E7DDCC;
  --muted: #574F45;
  --navy-soft: #E8ECF6;
  --lk-paper: #FFFBF2;
  --lk-desk: #F3EBDC;
  --lk-gold: #B8860B;          /* the lit phrase's underline, the book tile's rim (never text) */
  --lk-gold-soft: #F7E6B8;
  --lk-lit: rgba(255, 205, 96, 0.42);
  --lk-shadow: 0 1px 2px rgba(58, 42, 16, 0.06), 0 6px 20px rgba(58, 42, 16, 0.07);
  --lk-shadow-lift: 0 2px 4px rgba(58, 42, 16, 0.08), 0 14px 34px rgba(58, 42, 16, 0.13);
  --font-display: var(--font);   /* titles are Nunito too (one font for all of UK Accent), at 800 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1328; --card: #111F3D; --soft: #1A2A4C; --line: #27395E; --muted: #B0BCD3;
    --lk-paper: #2A2620; --lk-desk: #0E1830; --lk-gold: #E2B74E; --lk-gold-soft: #3A3018; --lk-lit: rgba(226, 183, 78, 0.30);
    --lk-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --lk-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0A1328; --card: #111F3D; --soft: #1A2A4C; --line: #27395E; --muted: #B0BCD3;
  --lk-paper: #2A2620; --lk-desk: #0E1830; --lk-gold: #E2B74E; --lk-gold-soft: #3A3018; --lk-lit: rgba(226, 183, 78, 0.30);
  --lk-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --lk-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* 2. Page, type, cards ------------------------------------------------------ */
body.uka {
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--lk-gold-soft) 55%, transparent), transparent 60%),
    var(--bg);
  background-attachment: scroll;
}
/* titles: Nunito 800, the same one font as the controls */
.uka .lk-title, .uka .pr .lk-title,
.uka .ut h1, .uka .ua h1, .uka .um h1, .uka .up h1, .uka .ub h1, .uka .ul-main h1, .uka .uka-page h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em;
}
.uka .ut h1 em, .uka .ua h1 em { font-style: normal; font-weight: inherit; color: var(--navy-ink); }
.uka .ut .card, .uka .ua .card, .uka .um .card, .uka .up .card, .uka .ub .card, .uka .uka-list, .uka .ul-card, .uka .ul-box {
  border-color: var(--line); border-radius: 20px; box-shadow: var(--lk-shadow);
}
.uka .price { background: var(--soft); }

/* 3. The painted hero --------------------------------------------------------
   A picture with soft rounded corners and a place label, then the serif title below it (never
   text on the picture, so contrast never depends on the art). */
.lk-hero { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.lk-scene {
  position: relative; margin: 0; overflow: hidden; border-radius: 22px;
  aspect-ratio: 16 / 9; background: linear-gradient(170deg, #BFD0E2, #F3D9B5 70%, #E9D8BE);
  box-shadow: var(--lk-shadow); isolation: isolate;
}
.lk-hero--tall .lk-scene { aspect-ratio: 4 / 3; }
.lk-hero--wide .lk-scene { aspect-ratio: 21 / 9; }
.lk-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 60%; }
.lk-scene::after { /* a soft paper edge at the bottom of the picture */
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(to top, rgba(31, 27, 22, 0.28), transparent);
}
.lk-place {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: var(--r-pill); background: rgba(255, 251, 242, 0.94); color: #1F1B16;
  font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-heavy); box-shadow: 0 2px 8px rgba(31, 27, 22, 0.18);
}
.lk-place svg { color: #A10D25; flex: none; }
.lk-hero-tx { display: flex; flex-direction: column; gap: 6px; }
.lk-eyebrow { margin: 0; font-size: var(--t-s); line-height: var(--lh-s); font-weight: var(--w-heavy); color: var(--red-ink); }
.uka .lk-title, .uka .pr h1.lk-title { margin: 0; font-size: var(--t-2xl); line-height: var(--lh-2xl); color: var(--text); }
.uka .lk-title em { font-style: normal; font-weight: inherit; color: var(--navy-ink); }
.lk-lead { margin: 0; color: var(--muted); font-size: var(--t-m); line-height: 26px; }
@media (min-width: 900px) { .uka .lk-title { font-size: var(--t-3xl); line-height: var(--lh-3xl); } .lk-scene { aspect-ratio: 21 / 9; } }

/* 4. Accent region tiles: a small painted scene each, the accent's name under it -------- */
.uka .ut #utAccents.lk-regions { gap: 10px; padding: 4px var(--gutter) 8px; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
.uka .ut .pick.lk-region {
  position: relative; flex: none; width: 118px; min-height: 0; padding: 0; border-radius: 16px; overflow: hidden;
  flex-direction: column; align-items: stretch; gap: 0; background: var(--card); border: 2px solid var(--line);
  scroll-snap-align: start; box-shadow: var(--lk-shadow); white-space: normal; text-align: left;
  transition: transform var(--d-fast) var(--ease), border-color var(--d) var(--ease), box-shadow var(--d) var(--ease);
}
.uka .ut .pick.lk-region::before { display: none; }
.lk-region-art { display: block; position: relative; height: 70px; background: linear-gradient(170deg, #BFD0E2, #F3D9B5); }
.lk-region-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-region-any { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, #2E4FB0, #012169 70%); color: #fff; }
.lk-region-any svg { width: 40px; height: 40px; }
.lk-region-nm { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; font-size: 13.5px; line-height: 17px; font-weight: var(--w-heavy); color: var(--text); }
.uka .ut .pick.lk-region.on { border-color: var(--navy); background: var(--card); color: var(--text); box-shadow: 0 0 0 2px var(--navy), var(--lk-shadow); }
.uka .ut .pick.lk-region.on .lk-region-nm { color: var(--navy-ink); }
.uka .ut .pick.lk-region.on .lk-region-art::after {   /* the tick: never colour alone */
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 14px; font-weight: 900;
  box-shadow: 0 0 0 2px #fff;
}
@media (hover: hover) { .uka .ut .pick.lk-region:hover { transform: translateY(-2px); box-shadow: var(--lk-shadow-lift); } }

/* 5. Speaker postcards: their accent's scene across the top, a big friendly face over its edge -- */
.uka .ut .sp.lk-sp { position: relative; padding: 0 0 16px; gap: 10px; overflow: hidden; border-radius: 22px; box-shadow: var(--lk-shadow); transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease); }
.uka .ut .sp.lk-sp > :not(.lk-sp-art) { margin-left: 16px; margin-right: 16px; }
@media (hover: hover) { .uka .ut a.sp.lk-sp:hover { transform: translateY(-3px); box-shadow: var(--lk-shadow-lift); } }
.lk-sp-art { display: block; position: relative; height: 104px; background: linear-gradient(170deg, #BFD0E2, #F3D9B5); }
.lk-sp-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lk-sp-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, color-mix(in srgb, var(--card) 35%, transparent)); }
.lk-sp-art .lk-place { left: auto; right: 10px; bottom: auto; top: 10px; }
.uka .ut .sp.lk-sp .top { margin-top: -46px; position: relative; z-index: 1; align-items: flex-start; }
.uka .ut .av.lk-av {
  width: 92px; height: 92px; font-family: var(--font-display); font-size: 42px; font-weight: 800;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--lk-av, #012169) 70%, #fff), var(--lk-av, #012169) 70%);
  color: #fff; border: 4px solid var(--card); box-shadow: 0 6px 16px rgba(31, 27, 22, 0.22);
}
.uka .ut .av.lk-av .dot { width: 20px; height: 20px; right: 2px; top: 4px; border-width: 3px; }
.uka .ut .sp.lk-sp .top > div:last-child { padding-top: 52px; min-width: 0; }
.uka .ut .sp.lk-sp b { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; }
.uka .ut .sp.lk-sp .lk-play { align-self: flex-start; }
.uka .ut .lk-play, .uka .ut .ghost.lk-play {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px 0 5px; border-radius: var(--r-pill);
  border: 0; background: var(--navy-soft); color: var(--navy-ink); font-weight: var(--w-heavy);
}
.uka .ut .lk-play::before {
  content: ""; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.uka .ut .lk-play:disabled { opacity: 0.8; }
.uka .ut .lk-play:disabled::before { animation: lk-pulse 1.2s var(--ease) infinite; }
.uka .ut .tag { background: var(--navy-soft); }
.lk-nowin { white-space: nowrap; }
.uka .ut .sp.lk-sp .row:empty { display: none; }
.uka .ut .tag.on { background: var(--ok-soft); }
.uka .ut .lk-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 16px 22px; border-radius: 22px; background: var(--card); border: 1px dashed var(--line); }
.uka .ut .lk-empty img { width: 100%; max-width: 320px; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 16px; }
.uka .ut .lk-skel { height: 230px; border-radius: 22px; background: linear-gradient(100deg, var(--soft) 30%, var(--card) 50%, var(--soft) 70%) 0 0 / 300% 100%; animation: lk-shimmer 1.4s linear infinite; }
.uka .ut .ut-banner { background: var(--navy-soft); border-radius: 16px; padding: 14px 16px; }
.uka .ut .lk-promise { display: flex; gap: 10px; align-items: flex-start; }
.uka .ut .lk-promise svg { flex: none; color: var(--navy-ink); margin-top: 1px; }

/* 6. A speaker's page: a big postcard on top ---------------------------------------- */
.uka .ut .lk-card-hero { padding: 0 0 18px; overflow: hidden; gap: 14px; }
.uka .ut .lk-card-hero > :not(.lk-sp-art) { margin-left: 18px; margin-right: 18px; }
.uka .ut .lk-card-hero .lk-sp-art { height: 168px; }
.uka .ut .lk-card-hero .ut-hero { margin-top: -62px; position: relative; z-index: 1; align-items: flex-start; }
.uka .ut .lk-card-hero .ut-hero > div:last-child { padding-top: 68px; }
.uka .ut .lk-card-hero .ut-av-l.lk-av { width: 120px; height: 120px; font-size: 56px; border-width: 5px; }
.uka .ut .lk-card-hero h1 { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.uka .ut .lk-card-hero h1 .tag { font-family: var(--font); vertical-align: middle; }
.uka .ut .lk-card-hero .ut-play { min-height: 56px; font-size: var(--t-m); padding-right: 22px; }
.uka .ut .lk-card-hero .ut-play::before { width: 46px; height: 46px; background-size: 20px; }
.uka .ut #utCallCard h2, .uka .ut #utNoteCard h2, .uka .ut #utSignin h2 { display: flex; align-items: center; gap: 10px; }
.uka .ut .lk-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy-ink); }
.uka .ut .lk-ic svg { width: 20px; height: 20px; }
.uka .ut .pick { border-radius: 14px; min-height: var(--tap); }

/* 7. The Reader: a cream page lying on a warm desk, the phrase you are on lit like lamplight ---- */
.uka .pr { --desk: var(--lk-desk); background: transparent; }
.uka .pr .lk-hero { margin-bottom: 2px; }
.uka #pr .pr-head .pr-app { font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }
.uka .pr .pr-paper, .uka .pr .tp-root, .uka .pr .pr-page {
  background: var(--u-paper); border-color: var(--u-paper-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 2px 4px rgba(58, 42, 16, 0.06), 0 12px 28px rgba(58, 42, 16, 0.10);
}
.uka .pr .tp-root { border-radius: 20px; }
.uka .pr .pr-page { border-radius: 20px; padding: 20px 18px; }
/* the lit phrase: a warm glow behind the words you are on, the word itself underlined in gold */
.uka .pr .tp-w { border-radius: 8px; transition: background-color var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease), color var(--d) var(--ease); }
.uka .pr .tp-w.band { background: var(--lk-lit); }
.uka .pr .tp-w.now { background: color-mix(in srgb, var(--lk-lit) 100%, rgba(255, 190, 70, .2)); box-shadow: inset 0 -3px 0 var(--lk-gold), 0 0 18px rgba(255, 196, 80, 0.45); }
.uka .pr .tp-line::before, .uka .pr .tp-line::after { background: var(--lk-gold); }
.uka .pr .pr-page .w.now { background: var(--lk-lit); border-radius: 5px; box-shadow: 0 0 12px rgba(255, 196, 80, 0.4); text-decoration-color: var(--lk-gold); }
.uka .pr .pr-page .w.read { color: var(--u-ok); }
.uka .pr .pr-bub { border-radius: 18px; box-shadow: 0 10px 30px rgba(58, 42, 16, 0.25); animation: lk-pop var(--d-slow) var(--ease); }
.uka .pr .pr-seg { background: var(--u-card); border-color: var(--u-line); }
.uka .pr .pr-pill { background: var(--u-card); border-color: var(--u-line); min-height: var(--tap); min-width: var(--tap); }
.uka .pr .pr-pill.tiny { min-height: 40px; }
/* the sample book: lifted off the page with a gold rim and a small pop on arrival (MEI's BookTile) */
.uka .pr .pr-paper.lk-book { position: relative; display: flex; gap: 14px; align-items: flex-start; border: 2px solid var(--lk-gold); background: linear-gradient(160deg, var(--lk-paper), color-mix(in srgb, var(--lk-gold-soft) 60%, var(--lk-paper))); box-shadow: 0 6px 22px color-mix(in srgb, var(--lk-gold) 30%, transparent); animation: lk-book 900ms var(--ease) 400ms both; }
.lk-book-ic { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--lk-gold-soft); color: #7A5200; }
.lk-book-ic svg { width: 24px; height: 24px; }
.uka .pr .lk-book .lk-book-tx { flex: 1; min-width: 0; }
.uka .pr .lk-book h2 { font-family: var(--font-display); font-weight: 800; }
.uka .pr .pr-car { border-radius: 22px; box-shadow: var(--lk-shadow); }
.uka .pr .pr-car .cap { font-family: var(--font-display); font-weight: 800; }
.uka .pr .pr-shelf a.pg { border-radius: 16px; background: var(--u-paper); box-shadow: var(--lk-shadow); }
.uka .pr .lk-desk-note { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: var(--t-s); }

/* 8. Lists (You), lessons, mock, plan ------------------------------------------- */
.uka .uka-list a, .uka .uka-list .li { min-height: 68px; transition: background var(--d) var(--ease); }
@media (hover: hover) { .uka .uka-list a:hover { background: color-mix(in srgb, var(--navy-soft) 50%, var(--card)); } }
.uka .uka-list .ic { width: 44px; height: 44px; border-radius: 14px; }
.uka .uka-list a:nth-child(4n+2) .ic { background: #E7F1EA; color: #1C5E3A; }
.uka .uka-list a:nth-child(4n+3) .ic { background: #F6EBDA; color: #6E4A12; }
.uka .uka-list a:nth-child(4n+4) .ic { background: #EFE7F3; color: #54356A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uka .uka-list a:nth-child(4n+2) .ic { background: #12321F; color: #8FE0B1; }
  :root:not([data-theme="light"]) .uka .uka-list a:nth-child(4n+3) .ic { background: #33290F; color: #F0C870; }
  :root:not([data-theme="light"]) .uka .uka-list a:nth-child(4n+4) .ic { background: #2C1F3B; color: #D5B8F0; }
}
.uka .uka-sec { font-family: var(--font-display); font-weight: 800; font-size: var(--t-l); line-height: var(--lh-l); margin-top: var(--s-m); }
.uka .ul-card { transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease); }
@media (hover: hover) { .uka .ul-card:hover { transform: translateY(-2px); box-shadow: var(--lk-shadow-lift); } }
.uka .ul-card .t { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.uka .ul-box.next { border: 2px solid var(--navy); }
.uka .lk-quote { margin: 0; padding: 14px 16px; border-radius: 18px; background: var(--lk-paper); border: 1px solid var(--u-paper-edge, #E2D4B4); color: var(--u-paper-ink, #1F1B16); font-family: var(--font-display); font-size: var(--t-l); line-height: 28px; }
.uka .lk-quote small { display: block; margin-top: 6px; font-family: var(--font); font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--muted); font-weight: var(--w-bold); }
.uka .lk-err { gap: 14px; }

/* You: who you are first, then the balance as its own card with one filled Top up; the other
   section heads drop to small eyebrows so the page has one clear first action. */
.uka .uka-page > .uka-sec { font-family: var(--font); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-heavy); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: var(--s-m) 0 -4px; }
.lk-me { display: flex; align-items: center; gap: 14px; }
.lk-me-av { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 32px; font-weight: 800; color: #fff; background: radial-gradient(circle at 30% 25%, #3A55A0, #012169 70%); border: 3px solid var(--card); box-shadow: 0 4px 12px rgba(31, 27, 22, 0.18); }
.lk-me-tx { display: flex; flex-direction: column; min-width: 0; }
.lk-me-tx b { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 800; color: var(--text); overflow-wrap: anywhere; }
.lk-me-tx span { color: var(--muted); font-size: var(--t-s); line-height: var(--lh-s); }
.lk-bal { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px; border-radius: 22px; background: linear-gradient(160deg, var(--card), color-mix(in srgb, var(--lk-gold-soft) 45%, var(--card))); border: 1px solid var(--line); box-shadow: var(--lk-shadow); }
.lk-bal-tx { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uka .lk-bal h2.uka-sec { margin: 0; font-family: var(--font); font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-heavy); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lk-bal-amt { margin: 0; font-variant-numeric: lining-nums tabular-nums; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 800; color: var(--text); }
.lk-bal-sub { margin: 0; color: var(--muted); font-size: var(--t-s); line-height: var(--lh-s); }
.uka a.btn.lk-bal-btn { flex: none; min-height: 48px; padding: 0 26px; }

/* the dark picture: the daytime scenes are dimmed and given a navy edge so they never out-shine the page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lk-scene img, :root:not([data-theme="light"]) .lk-region-art > *, :root:not([data-theme="light"]) .lk-sp-art img, :root:not([data-theme="light"]) .uka .ut .lk-empty img, :root:not([data-theme="light"]) .uka .lk-empty-card img { filter: brightness(0.78) saturate(0.88); }
  :root:not([data-theme="light"]) .lk-scene::after { height: 45%; background: linear-gradient(to top, rgba(10, 19, 40, 0.62), transparent); }
}
:root[data-theme="dark"] .lk-scene img, :root[data-theme="dark"] .lk-region-art > *, :root[data-theme="dark"] .lk-sp-art img, :root[data-theme="dark"] .uka .ut .lk-empty img, :root[data-theme="dark"] .uka .lk-empty-card img { filter: brightness(0.78) saturate(0.88); }
:root[data-theme="dark"] .lk-scene::after { height: 45%; background: linear-gradient(to top, rgba(10, 19, 40, 0.62), transparent); }

/* the mark (lib/uka-brand.js) carries its own colours, red bubble and navy inset, light and dark alike;
   the name beside it */
.uka .uka-word { display: inline; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; color: var(--text); }

/* 9. Shell ----------------------------------------------------------------------- */
.uka .uka-top { background: color-mix(in srgb, var(--bg) 88%, transparent); }
.uka .uka-bnav { background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 -6px 20px rgba(58, 42, 16, 0.06); }
.uka .bnav a[aria-current="page"]::before { width: 34px; height: 4px; background: var(--red); }
.uka .bnav a[aria-current="page"] svg { transform: translateY(-1px); }
.uka .uka-foot { background: color-mix(in srgb, var(--soft) 55%, transparent); border-top-color: var(--line); }

/* 10. Motion: things rise gently into place; a picture drifts very slowly. All of it off under
       reduced motion (the tokens already shorten every duration; here it is switched off). */
@keyframes lk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lk-drift { from { transform: scale(1.06); } to { transform: scale(1); } }
@keyframes lk-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes lk-book { 0% { transform: scale(0.97); } 55% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes lk-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }
@keyframes lk-shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .lk-hero { animation: lk-rise 520ms var(--ease) both; }
  .lk-scene--hero img { animation: lk-drift 14s ease-out both; }
  .uka .ut .grid > .sp { animation: lk-rise 460ms var(--ease) both; }
  .uka .ut .grid > .sp:nth-child(2) { animation-delay: 60ms; }
  .uka .ut .grid > .sp:nth-child(3) { animation-delay: 120ms; }
  .uka .ut .grid > .sp:nth-child(n+4) { animation-delay: 180ms; }
  .uka .ut main > .card, .uka main.ut > .card, .uka .uka-page > .uka-list { animation: lk-rise 460ms var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .lk-hero, .lk-scene--hero img, .uka .ut .grid > .sp, .uka .pr .pr-paper.lk-book, .uka .pr .pr-bub, .uka .ut .lk-skel, .uka .ut .lk-play:disabled::before { animation: none !important; }
  .uka .ut .pick.lk-region, .uka .ut .sp.lk-sp, .uka .ul-card { transition: none; }
}

/* a link drawn as a button keeps the button's own colours (".uka a" would turn its words navy) */
.uka a.btn { color: var(--_fg); }
.uka a.btn--plain, .uka a.btn--quiet { color: var(--_fg); }

/* filled controls in the Reader always use the navy FILL with white words (in dark the Reader's
   --brown is the light navy used for text, which white words cannot sit on) */
.uka .pr .pr-pill.on, .uka .pr .pr-pill.tiny.on, .uka .pr .pr-seg button.on,
.uka .pr .pr-bub .save:not(.saved), .uka #pr .uka-mei a.btn.main {
  background: var(--u-navyfill); border-color: var(--u-navyfill); color: #fff !important;
}
.uka .pr .pr-wrap > h1, .uka .pr .pr-row > h1, .uka .pr #prTitle { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.uka .pr #prTitle { font-size: var(--t-l); line-height: var(--lh-l); }
.uka .lk-empty-card { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 16px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--lk-shadow); }
.uka .lk-empty-card img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 14px; display: block; }
.uka .lk-empty-card .ul-note { margin: 0 4px; }