/* ==========================================================================
   UK Accent app skin. Loaded after uka-tokens.css on every UK Accent page
   (views/_uka-head.ejs), never on any other brand's page.
   1. the older page tokens (--u-*) as names for the design tokens
   2. the shell: top bar, mark, desktop nav, balance pill, bottom nav, footer
   3. shared page parts the views use (page title, list rows, info panels)
   4. the Reader's paper and ink on the design tokens
   ========================================================================== */

/* 1. Every UK Accent view was written on --u-*; they now point at the design
      tokens, so light, dark and contrast come from one place. --u-navy is
      navy used as TEXT (links, outlines); fills use --navy / --on-navy. */
:root {
  --u-bg: var(--bg); --u-card: var(--card); --u-ink: var(--text); --u-soft: var(--muted);
  --u-line: var(--line); --u-navy: var(--navy-ink); --u-red: var(--red); --u-ok: var(--ok);
  --u-onnavy: var(--on-navy);
  /* fixed names for scopes that redefine --navy / --red / --paper (the Reader's .pr) */
  --u-navyfill: var(--navy); --u-paper: var(--paper); --u-paper-edge: var(--paper-edge); --u-paper-ink: var(--paper-ink); --u-star: var(--star);
}

body.uka { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--t-m); line-height: var(--lh-m); padding-top: 0 !important; overflow-x: hidden; }
.uka a { color: var(--navy-ink); }
.uka h1, .uka h2, .uka h3 { font-family: var(--font); font-weight: var(--w-heavy); letter-spacing: -0.01em; }
.uka button, .uka input, .uka select, .uka textarea { font-family: inherit; }
.uka [hidden] { display: none !important; }

/* 2. Shell ---------------------------------------------------------------- */
.uka-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s-s);
  min-height: 56px; padding: 0 var(--gutter); max-width: 1120px; margin: 0 auto;
  background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.uka-brand { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); text-decoration: none; color: var(--text) !important; }
.uka-mark { width: 34px; height: 34px; flex: none; color: var(--navy); display: block; }
.uka-word { display: none; font-weight: var(--w-heavy); font-size: var(--t-l); letter-spacing: -0.01em; }
.uka-sp { flex: 1; }
.uka-nav { display: none; }
.uka-bal { text-decoration: none; color: var(--text) !important; }
.uka-bal svg { color: var(--navy-ink); }
.uka-out { font: inherit; font-size: var(--t-s); font-weight: var(--w-bold); color: var(--navy-ink); background: none; border: 0; min-height: var(--tap); padding: 0 4px; cursor: pointer; }
.uka-top .uka-out { display: none; }
/* the Learning / Speaking switch, for people who are both (the same on the speaking side) */
.uka-switch { display: inline-flex; flex: none; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--text) 8%, transparent); }
.uka-switch a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 11px; border-radius: var(--r-pill); font-size: 14px; font-weight: var(--w-bold); color: var(--muted) !important; text-decoration: none; white-space: nowrap; }
.uka-switch a[aria-current="page"] { background: var(--card); color: var(--text) !important; font-weight: var(--w-heavy); box-shadow: 0 1px 3px rgba(1, 33, 105, .18); }
@media (max-width: 520px) { .uka .uka-top--switch .uka-word { display: none; } }
/* a full-screen page (a call): a back arrow, no tabs */
.uka-back { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding-right: 6px; font-weight: var(--w-bold); color: var(--text) !important; text-decoration: none; }
body.uka:has(.uka-top--full) { padding-bottom: 0; }

/* bottom nav: fixed on a phone, the four places in the top bar from 900px */
.uka-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; }
.uka-bnav--3 { grid-template-columns: repeat(3, 1fr); }
body.uka { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  body.uka { padding-bottom: 0; }
  .uka-word { display: inline; }
  .uka-nav { display: flex; align-items: center; gap: 4px; margin-left: var(--s-m); flex-wrap: wrap; }
  .uka-nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-s); font-weight: var(--w-bold); color: var(--muted) !important; text-decoration: none; }
  .uka-nav a:hover { color: var(--navy-ink) !important; }
  .uka-nav a[aria-current="page"], .uka-nav a.on { color: var(--navy-ink) !important; background: var(--navy-soft); font-weight: var(--w-heavy); }
  .uka-top .uka-out { display: inline-flex; align-items: center; }
  .uka-top--full .uka-out { display: none; }
}
/* 900–1080px: every place stays in the bar (Ask, Lessons, Call packs, Plus too), smaller and tighter, wrapping
   inside the bar rather than overflowing it */
@media (min-width: 900px) and (max-width: 1080px) {
  .uka-top { flex-wrap: wrap; row-gap: 0; }
  .uka-nav { gap: 0; margin-left: var(--s-s); flex: 1 1 0; min-width: 0; }
  .uka-nav a { padding: 0 8px; font-size: 14px; white-space: nowrap; }
  .uka-top .uka-sp { flex: 0 0 0; }
}
/* signed out: one clear Sign in at the top right */
.uka-top .uka-signin { flex: none; min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--t-s); text-decoration: none; }

.uka-foot { border-top: 1px solid var(--line); margin-top: var(--s-l); padding: var(--s-l) var(--gutter) var(--s-xl); color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.uka-foot .in { max-width: 980px; margin: 0 auto; }
.uka-foot a { font-weight: var(--w-bold); }

/* 3. Shared page parts ------------------------------------------------------ */
.uka-page { max-width: 560px; margin: 0 auto; padding: var(--s-s) var(--gutter) var(--s-xl); display: flex; flex-direction: column; gap: var(--s-m); }
.uka-page h1 { font-size: var(--t-xl); line-height: var(--lh-xl); margin: var(--s-s) 0 0; }
.uka-page .lead { color: var(--muted); margin: 4px 0 0; }
.uka-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.uka-list a, .uka-list .li { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px var(--s-m); border-top: 1px solid var(--line); text-decoration: none; color: var(--text) !important; font-weight: var(--w-reg); }
.uka-list > :first-child { border-top: 0; }
.uka-list .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--navy-soft); color: var(--navy-ink); }
.uka-list .ic svg { width: 20px; height: 20px; }
.uka-list .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uka-list .tx b { font-weight: var(--w-heavy); }
.uka-list .tx span { color: var(--muted); font-size: var(--t-s); line-height: var(--lh-s); }
.uka-list .chev { flex: none; color: var(--muted); }
.uka-sec { font-size: var(--t-m); line-height: 23px; margin: var(--s-s) 0 -6px; }

/* the balance door on the Reader (the door partial): the app's navy, never another brand's accent */
.uka .prd-btn { min-height: var(--tap); padding: 0 var(--s-m); border-radius: var(--r-m); border: 1.5px solid var(--line); background: var(--card); color: var(--navy-ink); font-weight: var(--w-heavy); }
.uka .prd-btn.prd-y { background: var(--u-navyfill); border-color: var(--u-navyfill); color: var(--u-onnavy); }
.uka .prd-bal { font-variant-numeric: tabular-nums; }
.uka .prd-note.prd-err { color: var(--red-ink); }

/* 4. The Reader keeps the warm paper page (design: "The Reader keeps MEI's warm paper page and
      word bubble"); its controls take the app's navy and the one red. The Reader scope (.pr)
      redefines --navy, --red and --paper, so only the fixed --u-* names are used here. */
.uka .pr {
  --desk: var(--u-bg); --paper: var(--u-paper); --edge: var(--u-paper-edge); --ink: var(--u-paper-ink); --soft: var(--u-soft);
  --brown: var(--u-navy); --navy: var(--u-navy); --red: var(--u-red); --green: var(--u-ok); --amber: var(--u-star);
  --bubble: var(--u-paper); --on-brown: var(--u-onnavy);
  font-family: var(--font); min-height: 0; background: var(--u-bg); color: var(--u-ink);
}
.uka .pr-wrap { max-width: 560px; padding-top: 4px; }
.uka .pr-head .pr-app { font-family: var(--font); font-weight: var(--w-heavy); font-size: var(--t-xl); color: var(--u-ink); }
.uka .pr h1, .uka .pr h2, .uka .pr h3 { font-family: var(--font); font-weight: var(--w-heavy); letter-spacing: -0.01em; color: var(--u-ink); }
.uka .pr h1 { font-size: var(--t-xl); line-height: var(--lh-xl); }
.uka .pr h2 { font-size: var(--t-l); line-height: var(--lh-l); }
.uka .pr .pr-paper { border-radius: var(--r); box-shadow: var(--sh-1); color: var(--u-paper-ink); }
.uka .pr .pr-paper h1, .uka .pr .pr-paper h2 { color: var(--u-paper-ink); }
.uka .pr .pr-btn { border-radius: var(--r-btn); min-height: var(--tap); font-weight: var(--w-heavy); background: var(--u-navyfill); border-color: var(--u-navyfill); color: var(--u-onnavy) !important; }
.uka .pr .pr-btn.plain { background: var(--u-card); border: 1.5px solid var(--u-line); color: var(--u-navy) !important; }
.uka .pr .pr-btn.big, .uka .pr .pr-btn.uka-main { background: var(--u-red); border-color: var(--u-red); color: #fff !important; min-height: var(--btn-h); }
.uka .pr.night { --desk: #07122B; --paper: #2A2620; --edge: #4A4236; --ink: #F3EBDD; --soft: #A9B7CF; --brown: #A9C0FF; --navy: #A9C0FF; --red: #D6203B; --green: #5BD08F; --bubble: #2A2620; --on-brown: #07122B; }
.uka .pr-car { background: var(--u-navyfill); border-radius: var(--r); }
.uka .pr-car .cap { background: color-mix(in srgb, var(--u-navyfill) 88%, transparent); }

/* the bottom nav's links are muted until current (beats .uka a) */
.uka .bnav a { color: var(--muted); font-weight: var(--w-bold); }
.uka .bnav a[aria-current="page"] { color: var(--navy-ink); font-weight: var(--w-heavy); }

/* the Reader's head row: title, the balance door, My words; wraps on a phone */
.uka .pr-head { flex-wrap: wrap; row-gap: 6px; }
.uka #pr .pr-head a.pr-link { white-space: nowrap; min-height: var(--tap); display: inline-flex; align-items: center; }
/* #pr colours every link navy; the cards inside keep their own button colours */
.uka #pr .uka-mei a.btn.main { color: var(--on-navy) !important; }
.uka #pr .uka-mei a.btn { color: var(--navy-ink) !important; }
.uka #pr .uka-mei a.btn.main { color: #fff !important; }

/* the moderation desk (#pqRoot) is a work screen, not the Reader: plain cards, no paper */
.uka #pqRoot { --paper: var(--u-card); --edge: var(--u-line); --ink: var(--u-ink); --bubble: var(--u-card); }
.uka #pqRoot .pr-paper { color: var(--u-ink); }
.uka #pqRoot .pr-paper h1, .uka #pqRoot .pr-paper h2 { color: var(--u-ink); }
/* no capitals-only labels (design: type rules) */
.uka #pr [style*="uppercase"] { text-transform: none !important; letter-spacing: 0 !important; font-size: var(--t-xs) !important; }

/* the Reader's balance line (the door partial, mode 'uka'): Balance £4.60 · Add credit, and the
   welcome pound as a quiet note */
.uka .prd-uka { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px 10px 16px; background: var(--u-card); border: 1px solid var(--u-line); border-radius: var(--r); color: var(--u-ink); }
.uka .prd-uka[hidden] { display: none; }
.uka .prd-uka .prd-line { flex: 1; min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; }
.uka .prd-uka .prd-lab { color: var(--u-soft); font-size: var(--t-s); }
.uka .prd-uka .prd-bal { font-size: var(--t-l); font-weight: var(--w-heavy); }
.uka #pr .prd-uka a.prd-add { color: var(--on-red) !important; min-height: 40px; }
.uka .prd-uka .prd-free { flex-basis: 100%; color: var(--u-soft); font-size: var(--t-xs); line-height: var(--lh-xs); }
.uka .prd-uka .prd-freebtn { font: inherit; color: var(--u-navy); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.uka .prd-uka .prd-note:empty, .uka .prd-uka .prd-row:empty, .uka .prd-uka .prd-ts:empty { display: none; }
.uka .prd-uka .prd-note { flex-basis: 100%; font-size: var(--t-xs); }
/* the Reader's links to Ask and Lessons: rows, not navy text (#pr colours every link) */
.uka #pr .uka-list a { color: var(--u-ink) !important; }
.uka #pr .uka-list .ic { color: var(--u-navy); }

/* 5. The Add credit popup (public/js/uka-topup.js) and its page (/read/topup) ------------------- */
html.tu-lock, html.tu-lock body { overflow: hidden; }
.tu-veil {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(7, 18, 43, 0.62);   /* solid dim where blur is not supported */
}
.tu-veil[hidden] { display: none !important; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tu-veil { background: rgba(7, 18, 43, 0.38); -webkit-backdrop-filter: blur(8px) saturate(0.9); backdrop-filter: blur(8px) saturate(0.9); }
}
.tu-dialog {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 12px; outline: none;
  animation: tu-in .18s ease-out;
}
@keyframes tu-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tu-dialog { animation: none; } }
.tu-card { display: flex; flex-direction: column; gap: 12px; }
.tu-page { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 20px; margin-top: var(--s-m); }
.tu-head { display: flex; align-items: center; gap: 8px; }
.uka .tu-title { flex: 1; margin: 0; font-size: var(--t-l); line-height: var(--lh-l); }
.tu-x { flex: none; width: var(--tap); height: var(--tap); margin: -8px -8px -8px 0; display: grid; place-items: center; border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); cursor: pointer; }
.tu-x:hover { background: var(--navy-soft); color: var(--navy-ink); }
.tu-x:focus-visible { box-shadow: var(--focus-ring); }
.tu-bal { margin: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--navy-soft); }
.tu-bal span { color: var(--muted); font-size: var(--t-s); }
.tu-bal b { font-size: var(--t-l); font-weight: var(--w-heavy); font-variant-numeric: tabular-nums; }
.tu-amts { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.tu-amts legend { padding: 0; margin-bottom: 8px; font-weight: var(--w-heavy); font-size: var(--t-s); }
.tu-amt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r-m); background: var(--card); cursor: pointer; }
.tu-amt:has(input:checked) { border-color: var(--navy-ink); background: var(--navy-soft); }
.tu-amt input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--navy); }
.tu-amt-tx { display: flex; flex-direction: column; min-width: 0; }
.tu-amt-tx b { font-size: var(--t-l); line-height: 1.2; font-weight: var(--w-heavy); }
.tu-amt-tx small { color: var(--muted); font-size: var(--t-s); line-height: var(--lh-s); }
.tu-lead { margin: 0; }
.tu-soft { margin: 0; color: var(--muted); font-size: var(--t-s); line-height: var(--lh-s); }
.tu-msg { margin: 0; font-size: var(--t-s); color: var(--muted); }
.tu-msg:empty { display: none; }
.tu-msg.err { color: var(--red-ink); }
.tu-fine { margin: 0; color: var(--muted); font-size: var(--t-xs); line-height: var(--lh-xs); }
.tu-done { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--ok); font-weight: var(--w-heavy); }
.tu-done svg { flex: none; }
.tu-done span { color: var(--text); }
.tu-card .btn, .tu-dialog .btn { text-decoration: none; }
/* a phone: the pill keeps to the card balance so the mark and name fit on one line (the Reader line
   and the You page still show the welcome pound) */
@media (max-width: 440px) { .uka-bal [data-uka-bal-reader] { display: none !important; } }
/* a speaker on a phone: the mark, the Learning / Speaking switch and the balance share one line */
@media (max-width: 440px) {
  .uka-top--switch { gap: 6px; }
  .uka-top--switch .uka-switch a { padding: 0 9px; font-size: 13.5px; }
  .uka-top--switch .uka-bal { padding-left: 8px; padding-right: 10px; }
}
/* 900–1080px: room for every place in one row (the pill keeps to the card balance; a speaker's bar
   drops the written name beside the mark, as on a phone) */
@media (min-width: 900px) and (max-width: 1080px) {
  .uka-bal [data-uka-bal-reader] { display: none !important; }
  .uka-top--switch .uka-word { display: none; }
}