/* Shared Plum & cherry theme. Noto Sans includes the Igbo proof characters. */
@font-face {
  font-family: 'Noto Sans';
  src: url('font/NotoSans-Latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --paper: #241f2a;
  --card: #322b3b;
  --ink: #ece4dc;
  --muted: #c3b7c8;
  --line: #504556;
  --accent: #bb3349;
  --warm: #deb36d;
  --link: #f08d99;
  --hover: #403649;
  --latin-font: 'Noto Sans', sans-serif;
  color-scheme: dark;
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--latin-font);
}
a { color: var(--link); }
button, select, input, textarea { font-family: var(--latin-font); }
button, .button, select, input, textarea, kbd {
  background-color: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
button:hover, .button:hover { border-color: var(--warm); }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--warm);
  outline-offset: 3px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox], input[type=range] { accent-color: var(--accent); }
::selection { background: var(--accent); color: #fff; }
footer, .footer {
  background: var(--paper);
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.site-ad { background: var(--card); color: var(--muted); border-color: var(--line); }
.site-ad-label, .site-ad-preview { font-family: var(--latin-font); color: var(--muted); }
.site-ad-preview { border-color: var(--line); }

/* Script reference pages */
.script-page .top { background: var(--paper); border-color: var(--line); }
.script-page .brand { color: var(--ink); }
.script-page .hero .intro, .script-page .hero-art p { color: var(--muted); }
.script-page .eyebrow, .script-page .hero .eyebrow { color: var(--warm); }
.script-page .hero-art, .script-page .composition {
  background: var(--card);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
.script-page .primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.script-page .primary:hover { background: #a62c40; border-color: var(--link); }
.script-page .filters button { background: transparent; color: var(--muted); border-color: var(--line); }
.script-page .filters button:hover { background: var(--hover); color: var(--ink); }
.script-page .filters button[aria-pressed=true] {
  background: #422b2b;
  border-color: var(--accent);
  color: var(--link);
}
.script-page .glyph-card, .script-page dialog { background: var(--card); border-color: var(--line); }
.script-page .glyph-card svg { color: var(--ink); }
.script-page .glyph-card:hover { background: var(--hover); border-color: var(--warm); }
.script-page .text-button { color: var(--link); }
.script-page .toast { background: var(--card); color: var(--ink); border-color: var(--warm); }
.script-page footer { background: var(--paper); color: var(--muted); border-color: var(--line); }

/* Typing page: Latin UI and Ndebe glyphs keep separate font families. */
.typing-page .info, .typing-page .typing { background: var(--paper); color: var(--ink); }
.typing-page .typing { background: var(--card); }
.typing-page h1, .typing-page .footer,
.typing-page .typing-controls, .typing-page .input-label,
.typing-page .input-help, .typing-page #typing-help, .typing-page #input-status,
.typing-page .extra-palette, .typing-page .extra-palette p,
.typing-page #math-tools > p, .typing-page #math-tools > summary,
.typing-page #math-tools > label, .typing-page #math-tools h3,
.typing-page .math-controls, .typing-page #math-status, .typing-page .math-note {
  font-family: var(--latin-font);
}
.typing-page .vowel-chart, .typing-page .consonant-chart,
.typing-page #ndebe-h, .typing-page #ndebe-p {
  font-family: var(--latin-font), var(--ndebe-font);
}
.typing-page #ndebe-h {
  color: var(--warm);
  font-family: NdebeRounded2026, sans-serif;
  font-size: clamp(2.25rem, 3vw, 2.5rem);
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
}
.typing-page .typing-controls button, .typing-page .typing-controls select,
.typing-page .math-controls select, .typing-page .upload-label,
.typing-page .palette-nav button, .typing-page .support-buttons button {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line);
  font-family: var(--latin-font);
}
/* Preserve the approved keyboard palette independently of the site theme. */
.typing-page .simple-keyboard {
  --paper: #20261e;
  --card: #2d3529;
  --ink: #ebe8cf;
  --muted: #bbc2aa;
  --line: #49523e;
  --warm: #c9b77b;
  --hover: #35402f;
  background: var(--paper);
}
.typing-page .nd-key, .typing-page .symbol-buttons button, .typing-page .flag-buttons button {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.typing-page .nd-key.utility-key { font-family: var(--latin-font); }
.typing-page .nd-key:active, .typing-page .shifted .nd-key[data-token="{shift}"] {
  background: var(--accent); color: #fff;
}
.typing-page .input, .typing-page #math-tools input[data-ndebe] {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
}
/* Long-press alternatives: quiet, compact controls with comfortable touch targets. */
.typing-page .key-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 14px #0002;
}
.typing-page .key-choices[hidden] { display: none; }
.typing-page .key-choices button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: none;
  font: 400 14px/1.4 var(--latin-font);
  cursor: pointer;
}
.typing-page .key-choices button:hover { background: var(--hover); }
.typing-page .key-choices .choice-glyph { font: 24px/1 var(--ndebe-font); }
.typing-page .key-choices .choice-cancel { background: transparent; color: var(--muted); border-color: transparent; }
.typing-page .extra-palette, .typing-page #math-tools { border-color: var(--line); }
.typing-page .footer a { color: var(--link); }

/* Arithmetic lessons, including the embedded lesson view. */
.math-page .topbar, .math-page .hero, .math-page .footer { background: var(--paper); color: var(--ink); }
.math-page .topbar .brand a, .math-page .topbar .ext a { color: var(--ink); }
.math-page .topbar .nd-brand, .math-page .hero .nd-big,
.math-page .card .cn, .math-page h3 { color: var(--warm); }
.math-page .pagenav { background: var(--card); border-color: var(--accent); }
.math-page .pagenav a { color: var(--muted); }
.math-page .pagenav a:hover { background: var(--hover); color: var(--ink); }
.math-page .pagenav a.current { background: var(--accent); color: #fff; }
.math-page h2 { border-color: var(--accent); }
.math-page .nd { color: var(--ink); }
.math-page th { background: var(--card); color: var(--ink); }
.math-page th, .math-page td, .math-page hr, .math-page .prevnext,
.math-page table.codeblock, .math-page table.codeblock td.g { border-color: var(--line); }
.math-page table.codeblock, .math-page .keyfig, .math-page .tocbox,
.math-page .card, .math-page code { background: var(--card); color: var(--ink); border-color: var(--line); }
.math-page .card { border-top-color: var(--accent); }
.math-page .card:hover { background: var(--hover); }
.math-page .kl, .math-page .keycap, .math-page .card .cd, .math-page s { color: var(--muted); }
.math-page .footer a { color: var(--link); }

.script-page .brand span { color: var(--warm); }
.math-page code { white-space: normal; overflow-wrap: anywhere; }

/* Character groups: identical on desktop, Shift and touch layouts. */
.typing-page .nd-key { background: var(--key-bg, var(--card)); color: var(--key-ink, var(--ink)); }
.typing-page .vowel-0 { --key-bg: #42694e; --key-ink: #ebe8cf; }
.typing-page .vowel-1 { --key-bg: #3c6e71; --key-ink: #ebe8cf; }
.typing-page .vowel-2 { --key-bg: #44355b; --key-ink: #ebe8cf; }
.typing-page .nasal-0 { --key-bg: #875533; --key-ink: #ebe8cf; }
.typing-page .nasal-1 { --key-bg: #365a7a; --key-ink: #ebe8cf; }
.typing-page .nasal-2 { --key-bg: #565075; --key-ink: #ebe8cf; }
.typing-page .stem-key { --key-bg: #35402f; --key-ink: #ebe8cf; }
.typing-page .radical-key { --key-bg: #322b3b; --key-ink: #ece4dc; }
.typing-page .number-key { --key-bg: #344956; --key-ink: #ebe8cf; }
.typing-page .nd-key:hover { border-color: var(--warm); box-shadow: inset 0 0 0 1px var(--warm); }
.typing-page .nd-key:active { background: var(--key-bg, var(--card)); color: var(--key-ink, var(--ink)); filter: brightness(1.15); }
.typing-page .key-colours { margin: 12px 0; font: 12px/1.6 var(--latin-font); }
.typing-page .key-colours summary { cursor: pointer; padding: 8px 0; }
.typing-page .key-colour-list { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; }
.typing-page .key-colour-list span { display: inline-flex; align-items: center; gap: 6px; }
.typing-page .key-colour-list i { width: 15px; height: 15px; border: 1px solid var(--line); border-radius: 4px; background: var(--key-bg); }

/* Balance the two palette icons within their keys. */
.typing-page .nd-key[data-token="{teaching}"] { font-size: 32px; }
.typing-page .nd-key[data-token="{math}"] svg { width: 32px; height: 32px; }

.script-page .hero-art .script-name { display: block; width: 100%; text-align: center; font: 400 14px/1.5 var(--latin-font); color: var(--muted); margin-top: 8px; }

/* Numeral anatomy is a reference; procedures live in Arithmetic. */
.script-page .numeral-structure { margin-top: 40px; }
.script-page .numeral-structure h3 { margin: 24px 0 16px; }
.script-page .numeral-structure ul { padding-left: 24px; }
.script-page .numeral-structure li { margin: 12px 0; }
.script-page .numeral-table { overflow-x: auto; margin: 24px 0; }
.script-page .numeral-table table { width: 100%; border-collapse: collapse; }
.script-page .numeral-table th, .script-page .numeral-table td { padding: 12px 16px; border: 1px solid var(--line); text-align: left; }
.script-page .numeral-table th { background: var(--card); }
.script-page .numeral-table .ndebe { font-size: 36px; }

/* Keep the script-name caption close to its glyph and description. */
.script-page .hero-art { min-height: 318px; padding-top: 55px; padding-bottom: 0; align-content: center; row-gap: 12px; }
.script-page .hero-art .script-name,
.script-page .hero-art p { margin-top: 0; }
.script-page .hero-art .script-name { margin-top: -10px; }

@media (max-width: 800px) {
  .script-page .hero-art { min-height: 215px; padding-bottom: 15px; }
}
@media (max-width: 480px) {
  .script-page .hero-art { padding-top: 45px; }
}