/* ==========================================================================
   UK Accent design tokens + shared components  ·  v2, 28 Oct 2026
   Visual language: "Clear Coach" from My English Interview, in the real
   Union Jack colours. Flag navy for structure and most actions. Flag red
   ONLY for the one main action on a screen, and for "live / listening".
   Phone first (390px), 16px gutters, 44px touch targets.

   v2: every piece the three screen groups reuse now lives here (status bar,
   portrait avatar, speaker row, price tag, segmented control, choice chip,
   accent map tile, inbox row, switch, banners and error card, sheet + scrim,
   link button). Mockup pages must not redefine them.
   ========================================================================== */

/* Nunito's metrics on Arial, so the swap from the fallback does not move the page */
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 101.5%; ascent-override: 99.6%; descent-override: 34.8%; line-gap-override: 0%; }

/* --------------------------------------------------------------------------
   1. Colour (light is the default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* surfaces */
  --bg: #F5F8FC;          /* page */
  --card: #FFFFFF;        /* cards, sheets, inputs */
  --soft: #EAF0F8;        /* quiet fills, tracks, skeletons */
  --line: #DCE4F0;        /* borders, dividers */
  --scrim: rgba(7, 18, 43, 0.45);   /* one scrim for every sheet */

  /* text */
  --text: #0B1B3A;        /* 16.6:1 on --bg */
  --muted: #4A5B78;       /* 6.6:1 on --bg, 7.0:1 on --card */

  /* flag navy: structure + most actions */
  --navy: #012169;        /* button fill, mark, selected chip */
  --on-navy: #FFFFFF;     /* 14.9:1 */
  --navy-ink: #012169;    /* navy used as TEXT (links, plain buttons) */
  --navy-soft: #E6ECF7;   /* navy tint: info panel, my own messages */

  /* flag red: ONE main action per screen + live/listening */
  --red: #C8102E;         /* 5.9:1 with white */
  --on-red: #FFFFFF;
  --red-ink: #A10D25;     /* red used as TEXT on light (7.3:1) */
  --red-soft: #FBE7EA;

  /* status */
  --ok: #1C7A45;          /* 5.3:1 on white */
  --ok-soft: #E7F4EC;
  --danger: #B42318;      /* ICON ONLY on error cards. Never body text, never a button. */
  --danger-soft: #FDECEA;
  --warn: #8A6200;        /* icon on "heads up" cards (low balance, slow internet) */
  --warn-soft: #FBF1D9;
  --star: #8A6200;        /* ratings only (5.3:1 on white) */
  --star-soft: #FBF1D9;

  /* the Reader's paper (from the MEI Book Reader). Reading text only. */
  --paper: #FFFAF0;
  --paper-ink: #1F1B16;
  --paper-edge: #E2D4B4;
  --paper-brown: #8A5A0B; /* translations and part of speech, never buttons */

  /* focus ring: blue outer, card-coloured inner, so it shows on any fill */
  --focus: #1D4ED8;
  --focus-ring: 0 0 0 2px var(--card), 0 0 0 4px var(--focus);
}

/* dark: follows the phone unless the user picked light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #07122B;
    --card: #0F1E3D;
    --soft: #182A4F;
    --line: #253A63;
    --scrim: rgba(0, 0, 0, 0.45);
    --text: #EEF2F9;        /* 15.6:1 on --bg */
    --muted: #A9B7CF;       /* 8.4:1 on --bg */
    --navy: #2E4FB0;        /* still reads as flag blue; 6.8:1 with white */
    --on-navy: #FFFFFF;
    --navy-ink: #A9C0FF;    /* navy as text on dark: 9.4:1 */
    --navy-soft: #1B2D57;
    --red: #D6203B;         /* 5.0:1 with white */
    --on-red: #FFFFFF;
    --red-ink: #FF8C9C;
    --red-soft: #3A1622;
    --ok: #5BD08F;
    --ok-soft: #12321F;
    --danger: #FF8A7A;
    --danger-soft: #2E1A1F;
    --warn: #E8B84A;
    --warn-soft: #2E2814;
    --star: #E8B84A;
    --star-soft: #33290F;
    --paper: #2A2620;       /* warm and lighter, so it still reads as a page */
    --paper-ink: #F3EBDD;   /* 12.6:1 on --paper */
    --paper-edge: #4A4236;
    --paper-brown: #D9B98A;
    --focus: #8FB0FF;
  }
}
:root[data-theme="dark"], .dk {
  color-scheme: dark;
  --bg: #07122B;
  --card: #0F1E3D;
  --soft: #182A4F;
  --line: #253A63;
  --scrim: rgba(0, 0, 0, 0.45);
  --text: #EEF2F9;
  --muted: #A9B7CF;
  --navy: #2E4FB0;
  --on-navy: #FFFFFF;
  --navy-ink: #A9C0FF;
  --navy-soft: #1B2D57;
  --red: #D6203B;
  --on-red: #FFFFFF;
  --red-ink: #FF8C9C;
  --red-soft: #3A1622;
  --ok: #5BD08F;
  --ok-soft: #12321F;
  --danger: #FF8A7A;
  --danger-soft: #2E1A1F;
  --warn: #E8B84A;
  --warn-soft: #2E2814;
  --star: #E8B84A;
  --star-soft: #33290F;
  --paper: #2A2620;
  --paper-ink: #F3EBDD;
  --paper-edge: #4A4236;
  --paper-brown: #D9B98A;
  --focus: #8FB0FF;
}

/* --------------------------------------------------------------------------
   2. Type, space, radius, shadow, motion
   -------------------------------------------------------------------------- */
:root {
  /* One font for all of UK Accent: Nunito (rounded), loaded once from Google Fonts in _uka-head.ejs
     (self-hosted for the speaker side, uka-traveller.css). Headings 800-900, body 400-600, buttons 800.
     Any new view uses var(--font); only the Reader's passage and word bubble use --font-read. */
  --font: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-read: Georgia, "Times New Roman", serif;   /* Reader page and word bubble only */

  /* type scale (px / line-height). Body is 17: learners read slowly.
     Use ONLY these sizes. The Reader's Georgia text uses the same steps
     (20 page, 24 bubble head, 30 tape line, 40 review card). */
  --t-xs: 13px;  --lh-xs: 18px;   /* captions, badges, nav labels */
  --t-s: 15px;   --lh-s: 21px;    /* meta, secondary, small buttons */
  --t-m: 17px;   --lh-m: 25px;    /* body, buttons, section headers */
  --t-l: 20px;   --lh-l: 27px;    /* card titles, Reader page */
  --t-xl: 24px;  --lh-xl: 30px;   /* screen titles */
  --t-2xl: 30px; --lh-2xl: 36px;  /* hero on phone, big money */
  --t-3xl: 40px; --lh-3xl: 46px;  /* hero on desktop, balance */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-heavy: 800;

  /* spacing (MEI scale) */
  --s-xs: 4px; --s-s: 8px; --s-m: 16px; --s-l: 24px; --s-xl: 32px; --s-2xl: 48px;
  --gutter: 16px;
  --tap: 44px;            /* minimum touch target, everywhere */
  --btn-h: 54px;          /* full-width action buttons (MEI Button) */
  --nav-h: 64px;

  /* avatars: four sizes only */
  --av-xs: 32px; --av-s: 40px; --av-m: 56px; --av-l: 96px;

  /* radius */
  --r-s: 10px;            /* chips inside cards, small tags */
  --r-m: 14px;            /* inputs, small buttons */
  --r: 18px;              /* cards, sheets, the default */
  --r-btn: 16px;
  --r-pill: 999px;

  /* shadows: navy-tinted, never grey-black */
  --sh-1: 0 1px 2px rgba(1, 33, 105, 0.06), 0 1px 1px rgba(1, 33, 105, 0.04);
  --sh-2: 0 4px 14px rgba(1, 33, 105, 0.08), 0 1px 3px rgba(1, 33, 105, 0.06);
  --sh-3: 0 14px 40px rgba(1, 33, 105, 0.18), 0 2px 8px rgba(1, 33, 105, 0.08);

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --d-fast: 120ms; --d: 200ms; --d-slow: 320ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
    --sh-3: 0 14px 40px rgba(0, 0, 0, 0.6);
  }
}
:root[data-theme="dark"], .dk {
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --sh-3: 0 14px 40px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d: 1ms; --d-slow: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   3. Base + type classes
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--t-m); line-height: var(--lh-m);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
.dk { background: var(--bg); color: var(--text); }
h1, h2, h3 { margin: 0; font-weight: var(--w-heavy); letter-spacing: -0.01em; }
.h1 { font-size: var(--t-xl); line-height: var(--lh-xl); font-weight: var(--w-heavy); }
.h2 { font-size: var(--t-l); line-height: var(--lh-l); font-weight: var(--w-heavy); }
.h3 { font-size: var(--t-m); line-height: 23px; font-weight: var(--w-heavy); }   /* section header inside a screen: sentence case, 17/800 */
.hero { font-size: var(--t-2xl); line-height: var(--lh-2xl); font-weight: var(--w-heavy); letter-spacing: -0.02em; }
@media (min-width: 900px) { .hero { font-size: var(--t-3xl); line-height: var(--lh-3xl); } }
.meta { font-size: var(--t-s); line-height: var(--lh-s); color: var(--muted); }
.cap { font-size: var(--t-xs); line-height: var(--lh-xs); color: var(--muted); }
/* eyebrow: a small label above a block. Sentence case, never uppercase (hard to read in a second language). */
.eyebrow { font-size: var(--t-xs); line-height: var(--lh-xs); font-weight: var(--w-bold); color: var(--muted); }
.t-xs { font-size: var(--t-xs); line-height: var(--lh-xs); }
.t-s { font-size: var(--t-s); line-height: var(--lh-s); }
.t-m { font-size: var(--t-m); line-height: var(--lh-m); }
.t-l { font-size: var(--t-l); line-height: var(--lh-l); }
.t-xl { font-size: var(--t-xl); line-height: var(--lh-xl); }
.t-2xl { font-size: var(--t-2xl); line-height: var(--lh-2xl); }
.t-3xl { font-size: var(--t-3xl); line-height: var(--lh-3xl); }
.num, .tnum { font-variant-numeric: tabular-nums; }
a { color: var(--navy-ink); font-weight: var(--w-bold); text-underline-offset: 3px; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-s); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.stack { display: flex; flex-direction: column; gap: var(--s-m); }
.row { display: flex; align-items: center; gap: var(--s-s); }
.grow { flex: 1; min-width: 0; }
.ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------------------
   4. Buttons
   .btn            flag navy, most actions
   .btn--main      flag red, THE one main action on a screen (max one visible)
   .btn--plain     white with a line, secondary
   .btn--quiet     text only, tertiary (still 44px tall)
   .linkbtn        an inline text link that acts like a button: 44px hit area
   modifiers: --s (44px), --block (full width), [aria-busy] shows progress
   -------------------------------------------------------------------------- */
.btn {
  --_bg: var(--navy); --_fg: var(--on-navy); --_bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-s);
  min-height: var(--btn-h); padding: 0 var(--s-l);
  font: inherit; font-size: var(--t-m); font-weight: var(--w-heavy); text-decoration: none;
  color: var(--_fg); background: var(--_bg); border: 1.5px solid var(--_bd); border-radius: var(--r-btn);
  cursor: pointer; position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
  transition: transform var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease), background var(--d) var(--ease);
}
.btn:active { transform: scale(0.98); opacity: 0.88; }
.btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--r-btn); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--main { --_bg: var(--red); --_fg: var(--on-red); --_bd: var(--red); }
.btn--plain { --_bg: var(--card); --_fg: var(--navy-ink); --_bd: var(--line); }
.btn--quiet { --_bg: transparent; --_fg: var(--navy-ink); --_bd: transparent; padding: 0 var(--s-m); }
.btn--s { min-height: var(--tap); font-size: var(--t-s); padding: 0 var(--s-m); border-radius: var(--r-m); }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: var(--tap); min-height: var(--tap); padding: 0; border-radius: var(--r-pill); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn[aria-busy="true"]::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--progress, 40%);
  background: rgba(255, 255, 255, 0.22); transition: width var(--d-slow) var(--ease);
}
.btn--plain[aria-busy="true"]::before { background: var(--soft); }
.btn > * { position: relative; }
.linkbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 4px;
  font: inherit; font-size: var(--t-s); font-weight: var(--w-heavy); color: var(--navy-ink);
  background: none; border: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-m); }
.card--raised { box-shadow: var(--sh-2); border-color: transparent; }
.card--link { display: block; color: inherit; text-decoration: none; font-weight: inherit; transition: transform var(--d-fast) var(--ease); }
.card--link:active { transform: scale(0.99); }
.card--feature { border: 2px solid var(--navy); }       /* MEI TomTile: navy outline for the human offer */
.card--paper { background: var(--paper); border-color: var(--paper-edge); color: var(--paper-ink); }
.card--info { background: var(--navy-soft); border-color: transparent; }
.card--ok { background: var(--ok-soft); border-color: transparent; }

/* --------------------------------------------------------------------------
   6. Choice chip (filters, options, amounts, accent tiles)
      ONE selected look everywhere: navy fill, white text, a tick.
      Unselected: card with a 1.5px line. Never colour alone.
   -------------------------------------------------------------------------- */
.chips { display: flex; gap: var(--s-s); overflow-x: auto; padding: 2px var(--gutter); margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
.chip {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 14px;
  font: inherit; font-size: var(--t-s); font-weight: var(--w-bold); color: var(--text);
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
}
.chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"] { color: var(--on-navy); background: var(--navy); border-color: var(--navy); }
.chip[aria-pressed="true"]::before, .chip[aria-selected="true"]::before, .chip[aria-checked="true"]::before { content: "✓"; font-weight: var(--w-heavy); }
.chip[aria-pressed="true"] *, .chip[aria-checked="true"] * { color: inherit; }
.chip:focus-visible { border-radius: var(--r-pill); }
.chip--box { border-radius: var(--r-m); min-height: 52px; font-size: var(--t-m); }   /* amounts, answers */
.chip--box:focus-visible { border-radius: var(--r-m); }

/* --------------------------------------------------------------------------
   7. Inputs
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .label { font-size: var(--t-s); font-weight: var(--w-bold); color: var(--text); }
.field .hint { font-size: var(--t-xs); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: inherit; font-size: var(--t-m); /* 16px+ stops iOS zoom */
  color: var(--text); background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-m);
  transition: border-color var(--d-fast) var(--ease);
}
.textarea { min-height: 110px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 0.8; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); border-radius: var(--r-m); }
.field--error .input, .field--error .textarea { border-color: var(--danger); }
/* field error: text stays --text; only the round "!" is the danger colour */
.field .error { display: flex; gap: 8px; font-size: var(--t-s); line-height: var(--lh-s); color: var(--text); font-weight: var(--w-semi); }
.field .error::before { content: "!"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--danger); color: var(--card); font-size: var(--t-xs); font-weight: 900; flex: none; margin-top: 1px; }

/* --------------------------------------------------------------------------
   8. Segmented control: ONE choice that switches the view or a setting
      (Received / Asked / Saved, Line / Page, Slower / Normal, 15 / 30 / 45 min).
      Soft track, white raised pill, navy-ink text. .tabs and .seg are the same.
   -------------------------------------------------------------------------- */
.tabs, .seg { display: flex; gap: 4px; padding: 4px; background: var(--soft); border-radius: var(--r-m); }
.tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent;
  font: inherit; font-size: var(--t-s); font-weight: var(--w-bold); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--card); color: var(--navy-ink); box-shadow: var(--sh-1); font-weight: var(--w-heavy); }
.seg--fit { display: inline-flex; }
.seg--fit .tab { flex: none; padding: 0 16px; }

/* --------------------------------------------------------------------------
   9. Bottom nav (phone). Icon + word always; current = navy bar + bold
   -------------------------------------------------------------------------- */
.bnav {
  position: sticky; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr);
  min-height: var(--nav-h); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.bnav a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--nav-h); font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--muted); text-decoration: none;
}
.bnav a svg { width: 24px; height: 24px; }
.bnav a[aria-current="page"] { color: var(--navy-ink); font-weight: var(--w-heavy); }
.bnav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--navy-ink); }
.bnav .count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--navy); color: var(--on-navy); font-size: var(--t-xs); font-weight: var(--w-heavy); line-height: 20px; text-align: center; }
@media (min-width: 900px) { .bnav { display: none; } }  /* desktop uses the top bar */

/* --------------------------------------------------------------------------
   10. Avatars: the speaker's real photo. Sizes 32 / 40 / 56 / 96.
       The accent badge is words, never only a colour. Initials are the
       fallback only (photo failed to load).
   -------------------------------------------------------------------------- */
.avatar { position: relative; flex: none; width: var(--av-m); height: var(--av-m); }
.avatar img, .avatar .ph, .avatar .initials { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--soft); color: var(--navy-ink); font-weight: var(--w-heavy); overflow: hidden; }
.avatar--xs { width: var(--av-xs); height: var(--av-xs); }
.avatar--s { width: var(--av-s); height: var(--av-s); }
.avatar--l { width: var(--av-l); height: var(--av-l); }
.avatar .initials { font-size: var(--t-s); }
.avatar--l .initials { font-size: var(--t-xl); }
.avatar .region {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%); white-space: nowrap;
  padding: 0 7px; border-radius: var(--r-pill); border: 2px solid var(--card);
  background: var(--navy); color: var(--on-navy); font-size: var(--t-xs); font-weight: var(--w-heavy); line-height: 18px;
}
.avatar .presence { position: absolute; right: 1px; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); border: 2px solid var(--card); }
.avatar--speaking .ph, .avatar--speaking img { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--red); }

/* Portrait placeholder (MOCKUPS ONLY: the build uses the speaker's own photo).
   Flat head-and-shoulders; one backdrop per person so faces are told apart. */
.ph { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--b1), var(--b2)); }
.ph > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p-jade   { --b1: #B4D0D3; --b2: #5B8790; --sk: #EBC6AA; --hr: #7A3B22; --cl: #F1ECE3; }
.p-callum { --b1: #C6D2A6; --b2: #6E8257; --sk: #E2B595; --hr: #3B2A20; --cl: #2F4858; }
.p-priya  { --b1: #E3CDB4; --b2: #9C7A5A; --sk: #B98463; --hr: #1E1512; --cl: #7C2F3A; }
.p-rhys   { --b1: #B5C5D6; --b2: #4E647D; --sk: #F0CDB3; --hr: #A4532A; --cl: #23395B; }
.p-fiona  { --b1: #DCC0C5; --b2: #8E6A72; --sk: #EFCFB8; --hr: #8C6A3E; --cl: #5B6E4F; }
.p-aaron  { --b1: #D3C29C; --b2: #7D6A44; --sk: #6E4A33; --hr: #161210; --cl: #D7CFC0; }
.p-rachel { --b1: #C9C3DE; --b2: #6C6590; --sk: #F2D2BC; --hr: #4A3224; --cl: #E3B23C; }
.p-sian   { --b1: #BFD9C3; --b2: #4F7D5A; --sk: #F1D0BA; --hr: #2C1D16; --cl: #B33A3A; }
.p-ollie  { --b1: #CFD7C0; --b2: #6F7F5C; --sk: #F0CCB0; --hr: #C08A4A; --cl: #3B5B7A; }
.p-me     { --b1: #D4CBBF; --b2: #8F8578; --sk: #C99A78; --hr: #2A1C14; --cl: #3D5A80; }
.p-minh   { --b1: #C8D3E3; --b2: #66789A; --sk: #E6C29E; --hr: #17110D; --cl: #C2553E; }
.p-kenji  { --b1: #D6D0C4; --b2: #7E766A; --sk: #EBC9A6; --hr: #15100C; --cl: #2E4A3A; }

/* --------------------------------------------------------------------------
   11. Price tag (lists). Amount bold, unit muted, unit ALWAYS written.
       On buttons, write the price after a dot instead: "Send · 20p".
   -------------------------------------------------------------------------- */
.price { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: var(--r-s); background: var(--soft); color: var(--text); font-weight: var(--w-heavy); font-size: var(--t-s); line-height: var(--lh-s); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price .per { font-weight: var(--w-semi); color: var(--muted); font-size: var(--t-xs); }
.price--free { background: var(--ok-soft); color: var(--ok); }
.prices { display: flex; flex-wrap: wrap; gap: 8px; }

/* --------------------------------------------------------------------------
   12. Live dot (red is allowed here: it means "live / listening")
   -------------------------------------------------------------------------- */
.live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: var(--w-heavy); color: var(--red-ink); }
.live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 60%, transparent); animation: live-pulse 1.6s var(--ease) infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.online { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--ok); }
.online::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.weak { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--muted); }
.weak::before { content: ""; width: 12px; height: 9px; background: linear-gradient(to right, var(--warn) 0 3px, transparent 3px 4.5px, var(--line) 4.5px 7.5px, transparent 7.5px 9px, var(--line) 9px 12px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }

/* --------------------------------------------------------------------------
   13. Toast (bottom, above the nav; role="status")
   -------------------------------------------------------------------------- */
.toast {
  display: flex; align-items: center; gap: var(--s-s); padding: 12px 14px 12px 16px; max-width: 420px;
  background: #0B1B3A; color: #FFFFFF; border-radius: var(--r-m); box-shadow: var(--sh-3);
  font-size: var(--t-s); line-height: var(--lh-s); font-weight: var(--w-semi);
  animation: toast-in var(--d-slow) var(--ease);
}
:root[data-theme="dark"] .toast, .dk .toast { background: #EEF2F9; color: #0B1B3A; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast { background: #EEF2F9; color: #0B1B3A; } }
.toast .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #1C7A45; color: #fff; font-size: var(--t-xs); font-weight: 900; }
.toast a, .toast button { margin-left: auto; background: none; border: 0; font: inherit; font-weight: var(--w-heavy); color: inherit; text-decoration: underline; min-height: var(--tap); cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   14. Sheet + scrim (bottom sheet on phone, centred dialog on desktop)
       One scrim token, never darker, so the face behind stays visible.
       While a sheet is open, the page behind loses its red: only the sheet
       may hold the one red action (or the live red).
   -------------------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; }
.sheet {
  background: var(--card); color: var(--text); border-radius: 24px 24px 0 0; box-shadow: var(--sh-3);
  padding: 10px var(--gutter) calc(var(--s-l) + env(safe-area-inset-bottom));
  animation: sheet-up var(--d-slow) var(--ease);
}
.sheet .grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto var(--s-m); }
@media (min-width: 900px) { .sheet { max-width: 440px; border-radius: 24px; margin: 0 auto; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.has-sheet .btn--main,
:is(.device, .phone, .phone-in):has(.sheet) .btn--main { --_bg: var(--soft); --_fg: var(--muted); --_bd: var(--soft); }
.has-sheet .sheet .btn--main,
:is(.device, .phone, .phone-in) .sheet .btn--main { --_bg: var(--red); --_fg: var(--on-red); --_bd: var(--red); }

/* --------------------------------------------------------------------------
   15. Banners and the error card
       info (navy-soft), off (soft), warn (amber icon), ok (green), err.
       Errors: soft danger fill, --text words, and ONLY the round "!" icon in
       the danger colour. Never danger-coloured text, never a red button
       inside or next to an error: the fix button is navy.
   -------------------------------------------------------------------------- */
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--navy-soft); color: var(--text); font-size: var(--t-s); line-height: var(--lh-s); }
.banner > svg, .banner > .ic, .banner > .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--navy-ink); }
.banner b { font-weight: var(--w-heavy); }
.banner .bi { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--t-xs); font-weight: 900; margin-top: 0; background: var(--navy); color: var(--on-navy); }
.banner--off { background: var(--soft); }
.banner--off > svg, .banner--off > .ic { color: var(--muted); }
.banner--off .bi { background: var(--muted); color: var(--card); }
.banner--warn { background: var(--warn-soft); }
.banner--warn > svg, .banner--warn > .ic { color: var(--warn); }
.banner--warn .bi { background: var(--warn); color: var(--card); }
.banner--ok { background: var(--ok-soft); }
.banner--ok .bi { background: var(--ok); color: var(--card); }
.banner--err, .errcard { background: var(--danger-soft); border-color: transparent; color: var(--text); }
.banner--err > svg, .banner--err > .ic { color: var(--danger); }
.banner--err .bi, .bang { background: var(--danger); color: var(--card); }
.bang { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: var(--t-xs); font-weight: 900; flex: none; }
.errcard .meta { color: var(--text); }

/* --------------------------------------------------------------------------
   16. Switch (role="switch"): knob moves AND a tick shows AND the row says On/Off
   -------------------------------------------------------------------------- */
.switch { flex: none; position: relative; width: 52px; height: 32px; border-radius: 16px; border: 0; background: var(--line); cursor: pointer; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--d) var(--ease); }
.switch[aria-checked="true"] { background: var(--navy); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.switch[aria-checked="true"]::before { content: "✓"; position: absolute; left: 9px; top: 6px; color: #fff; font-size: var(--t-xs); line-height: 1; font-weight: 900; }
.switch:focus-visible { border-radius: 16px; }
/* the switch always sits in a row at least 52px tall, and the whole row toggles it (44px+ target) */
.swrow { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; }
.swlab { font-size: var(--t-s); font-weight: var(--w-heavy); color: var(--muted); }

/* --------------------------------------------------------------------------
   17. Product pieces
   -------------------------------------------------------------------------- */
/* voice note */
.vnote { display: flex; align-items: center; gap: var(--s-s); padding: 8px 12px 8px 8px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.vnote .play { flex: none; width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--navy); color: var(--on-navy); display: grid; place-items: center; cursor: pointer; }
.vnote .play svg { width: 18px; height: 18px; }
.vnote .wave { flex: 1; height: 28px; display: flex; align-items: center; gap: 2px; }
.vnote .wave i { flex: 1; border-radius: 2px; background: var(--line); min-height: 4px; }
.vnote .wave i.on { background: var(--navy-ink); }
.vnote .len { font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.vnote--mine { background: var(--navy-soft); border-color: transparent; }

/* word bubble: paper and Georgia for the READING parts only; anything you tap is navy */
.wordbubble { background: var(--paper); color: var(--paper-ink); border: 1px solid var(--paper-edge); border-radius: 14px; padding: var(--s-m); box-shadow: 0 6px 16px rgba(58, 42, 16, 0.22); }
.wordbubble .head { font-family: var(--font-read); font-size: var(--t-xl); line-height: var(--lh-xl); }
.wordbubble .tr { color: var(--paper-brown); font-weight: var(--w-heavy); font-size: var(--t-l); line-height: var(--lh-l); }

/* balance pill: 36px to look at, 44px to tap */
.balance { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--card); border: 1.5px solid var(--line); font-weight: var(--w-heavy); font-size: var(--t-s); color: var(--text); font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.balance::after { content: ""; position: absolute; inset: -5px -4px; }
.balance .held { font-weight: var(--w-semi); color: var(--muted); font-size: var(--t-xs); }

/* top bar. In the app the mark stands alone at top left; the screen title is the H1 below.
   Mark + "UK Accent" wordmark only on the website, splash and sign-in. */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-s); min-height: 56px; padding: 0 var(--gutter); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.topbar .brand { font-weight: var(--w-heavy); font-size: var(--t-l); letter-spacing: -0.01em; }
.topbar .ttl { flex: 1; min-width: 0; font-weight: var(--w-heavy); font-size: var(--t-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark { width: 34px; height: 34px; flex: none; }

/* status bar (mockups): one look in every file */
.sbar { height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; font-size: var(--t-s); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; color: var(--text); }
.sbar svg { height: 12px; width: auto; }

/* section header inside a screen */
.sec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.sec-h .more { margin-left: auto; }

/* speaker row: photo (with hello button) left, name line, from/now line, prices that wrap */
.srow { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: inherit; text-decoration: none; font-weight: inherit; }
.srow .bd { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.srow .nm { font-size: var(--t-m); font-weight: var(--w-heavy); line-height: 23px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .wh { font-size: var(--t-s); line-height: var(--lh-s); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .prices { margin-top: 6px; }
.rate { display: inline-flex; align-items: center; gap: 3px; font-size: var(--t-s); font-weight: var(--w-heavy); color: var(--star); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate svg { width: 14px; height: 14px; }
.rate .c { color: var(--muted); font-weight: var(--w-semi); }
.mini-play { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--muted); font-variant-numeric: tabular-nums; }
.mini-play button { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--navy-ink); display: grid; place-items: center; cursor: pointer; }
.mini-play svg { width: 16px; height: 16px; }

/* accent tile + accent map: always the accent AND its city */
.map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; min-height: 56px; padding: 6px 10px; border-radius: var(--r-s); background: var(--card); border: 1.5px solid var(--line); font: inherit; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.mt .nm { font-size: var(--t-s); line-height: 19px; font-weight: var(--w-heavy); }
.mt .k { font-size: var(--t-xs); line-height: 17px; font-weight: var(--w-semi); color: var(--muted); font-variant-numeric: tabular-nums; }
.mt[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.mt[aria-pressed="true"] .k { color: var(--on-navy); }
.mt[aria-pressed="true"] .nm::before { content: "✓\00a0"; }

/* inbox row: same shape for read and unread. Unread = navy dot + the word "New" + bold line */
.trow { display: flex; gap: 12px; padding: 14px 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; color: inherit; font-weight: inherit; }
.trow .tr-b { flex: 1; min-width: 0; }
.trow .tr-h { display: flex; align-items: center; gap: 8px; }
.trow .tr-k { font-size: var(--t-s); line-height: var(--lh-s); color: var(--muted); margin-top: 2px; }
.trow .tr-q { font-size: var(--t-m); line-height: 23px; margin-top: 2px; }
.trow--new .tr-q { font-weight: var(--w-heavy); }
.newdot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-ink); flex: none; }
.badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--navy); color: var(--on-navy); font-size: var(--t-xs); font-weight: var(--w-heavy); }

/* --------------------------------------------------------------------------
   18. Mockup pages only (the folder of HTML mockups, not the product)
   -------------------------------------------------------------------------- */
.pg { max-width: 1288px; margin: 0 auto; padding: 0 24px 96px; }
.pg-head { display: flex; align-items: center; gap: 12px; padding: 20px 0 8px; flex-wrap: wrap; }
.pg-head .brand { font-size: var(--t-l); font-weight: var(--w-heavy); }
.pg-head .sp, .pg-head .spacer { flex: 1; }
.pg-intro { max-width: 720px; padding: 8px 0 16px; }
.pg-intro p { color: var(--muted); margin: 8px 0 0; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; }
.toc a { font-size: var(--t-s); padding: 0 14px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line); text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; }
@media (max-width: 600px) { .pg { padding: 0 var(--gutter) 64px; } }