/* LexiGlobal UI prototype — shared layout, materials and controls. Colours come only from tokens.css. */

@font-face { font-family: "Kantumruy Pro"; src: url("../fonts/kantumruy-pro-khmer-wght-normal.woff2") format("woff2"); font-weight: 100 700; font-display: swap; unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; }

/* ============================================================ base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: var(--root-size, 100%); background: var(--page-bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-padding-top: 12px; scroll-padding-bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }
body { margin: 0; background: var(--page-bg); color: var(--text); font: 400 1rem/var(--lh) var(--sans); }
[lang="km"] { font-family: var(--khmer); line-height: 1.6; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--nav-b); color: var(--nav-ink); font-weight: 600; }
.skip:focus { top: 10px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus, main:focus-visible, [tabindex="-1"]:focus { outline: none; }
p { margin: 0 0 var(--para); }
p:last-child { margin-bottom: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ic { width: 20px; height: 20px; flex: none; }
.ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 40% at 15% 0%, var(--ambient-1), transparent 70%), radial-gradient(ellipse 80% 45% at 90% 55%, var(--ambient-2), transparent 70%), var(--page-bg); }
.app { position: relative; max-width: var(--app-max); margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  padding: env(safe-area-inset-top, 0px) max(var(--page-x), env(safe-area-inset-right)) calc(var(--nav-h) + var(--safe-b) + 8px) max(var(--page-x), env(safe-area-inset-left)); }
.view { display: grid; gap: var(--section); padding-top: 8px; }
.view > * { min-width: 0; }

/* ============================================================ type helpers */
.serif { font-family: var(--serif); }
.h-page, .h-card, .wm-name, .shortcut .t, .continue .title-btn, .word-head h1, .dlg-title, .profile .name { font-variant-numeric: lining-nums; }
.h-page { margin: 0; font: 700 1.75rem/1.1 var(--serif); color: var(--head); }
.h-card { margin: 0; font: 700 1.1875rem/1.2 var(--serif); color: var(--head); }
.muted { color: var(--text-2); }
.small { font-size: .8125rem; line-height: 1.4; }
.label-caps { font: 700 .75rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font: 600 .75rem/1.3 var(--sans); color: var(--text-2); background: var(--chip-bg); border: 1px solid var(--hairline); white-space: nowrap; }
.status-line { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--text-2); }
.status-line:empty { display: none; }
.status-line.error { color: var(--error); }

/* ============================================================ materials: buttons (fine bevel, inner highlight, small depth, clear pressed state) */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px;
  font: 600 1rem/1.2 var(--sans); border-radius: 999px; text-decoration: none; text-align: center;
  transition: transform var(--dur) ease, box-shadow var(--dur) ease, filter var(--dur) ease; }
.btn .ic { width: 20px; height: 20px; }
.btn-silver { color: var(--btn-ink); border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--btn-a) 0%, var(--btn-a) 35%, var(--btn-b) 100%); box-shadow: var(--shadow-btn); }
.btn-silver .ic { color: var(--icon); }
.btn-navy { color: var(--nav-ink); border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--nav-a) 0%, var(--nav-b) 100%); box-shadow: var(--shadow-btn); }
.btn-block { width: 100%; }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: .875rem; }
@media (hover: hover) { .btn:not(:disabled):hover, .icon-btn:not(:disabled):hover, .row-btn:hover, .group-head:hover { filter: brightness(1.04); } }
.btn:not(:disabled):active { transform: translateY(1px); box-shadow: var(--shadow-btn-pressed); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-pressed="true"].btn-silver { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); }
.btn[aria-pressed="true"].btn-silver .ic { color: var(--nav-ink); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--icon); transition: background var(--dur); }
.icon-btn:active { background: color-mix(in srgb, var(--metal) 16%, transparent); }
.icon-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--metal) 22%, transparent); }
.icon-btn.speaking { background: color-mix(in srgb, var(--metal) 22%, transparent); }
.pill-select-wrap { position: relative; display: inline-flex; }
.pill-select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 30px 0 14px; border-radius: 999px; font: 600 .875rem/1.2 var(--sans); color: var(--btn-ink); cursor: pointer;
  border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--btn-a), var(--btn-a) 40%, var(--btn-b)); box-shadow: var(--shadow-btn); }
.pill-select-wrap > .ic { position: absolute; right: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--icon); pointer-events: none; }
.pill-select option { color: #202936; background: #FFFFFF; }

/* ============================================================ cards */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--pad); }
.card-flat { padding: 0; overflow: hidden; }

/* ============================================================ BrandHeader */
.brand-header { padding-top: 8px; }
.brand-header[data-variant="none"] { display: none; }
.brand-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.brand { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; max-width: 100%; color: inherit; text-decoration: none; border-radius: 10px; }
.brand img { width: 72px; height: 61px; flex: none; margin: -4px 0 -4px -4px; }
.wm { display: grid; min-width: 0; }
.wm-name { font: 600 2rem/1 var(--serif); color: var(--head); letter-spacing: -.005em; }
.wm-tag { margin-top: 3px; font: 600 .6875rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.theme-btn { flex: none; margin-left: auto; padding: 0 14px; font-size: .875rem; }
.theme-btn .ic { color: var(--metal); }
.lang-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; margin-top: 2px; }
.langs { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 0; flex: 1 1 0; padding: 0 2px; border: 0; background: none; text-align: left; font: 500 .8125rem/1.3 var(--sans); color: var(--text-2); border-radius: 10px; }
.langs .ic { width: 18px; height: 18px; color: var(--icon); }
.langs .chev { width: 14px; height: 14px; color: var(--text-2); }
.lang-row .pill-select-wrap { margin-left: auto; }
.lang-row .pill-select { font-size: .8125rem; }

/* ============================================================ SearchBar */
.search { position: relative; display: flex; align-items: center; }
.search input { width: 100%; min-height: 52px; padding: 0 140px 0 44px; border-radius: 999px; font: 500 1rem var(--sans); color: var(--text); background: var(--surface);
  border: 1px solid var(--track); box-shadow: inset 0 1px 2px rgba(20, 28, 40, .06), var(--shadow-card); }
.search[data-has-text="false"] input { padding-right: 100px; }
.search input::placeholder { color: var(--text-2); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search .si { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--text-2); pointer-events: none; }
.search .s-actions { position: absolute; right: 4px; display: flex; align-items: center; gap: 0; }
.search .s-go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); box-shadow: var(--shadow-btn); display: grid; place-items: center; }
.search .s-go:active { transform: translateY(1px); box-shadow: var(--shadow-btn-pressed); }
.search .s-mic { color: var(--text-2); }
.search .s-mic[aria-pressed="true"] { color: var(--head); }
/* suggestions while typing: a card under the field (same surface, hairline and shadow as the cards) */
.search-wrap { position: relative; }
.suggest { position: absolute; z-index: 15; left: 8px; right: 8px; top: calc(100% - 2px); margin: 4px 0 0; padding: 4px; list-style: none; max-height: min(320px, 50vh); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-card); }
.search-wrap:has(.search-status:not(:empty)) .suggest { top: calc(100% - 2px); }
.suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 12px; cursor: pointer; font: 500 1rem/1.3 var(--sans); color: var(--text); }
.suggest li b { font-weight: 700; color: var(--head); }
.suggest .sg-p { font: 500 .8125rem/1.3 var(--sans); color: var(--text-2); white-space: nowrap; }
.suggest li[aria-selected="true"], .suggest li:hover { background: color-mix(in srgb, var(--metal) 16%, transparent); }
.did-you-mean .link-btn { min-height: 0; padding: 0; text-decoration: underline; }

/* ============================================================ BottomNavigation */
.bottom-nav { position: fixed; z-index: 20; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--app-max); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: calc(var(--nav-h) + var(--safe-b)); padding: 0 8px var(--safe-b); background: var(--footer-bg); box-shadow: 0 -4px 14px rgba(32, 41, 54, .07); }
.bottom-nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--metal) 20%, var(--hi) 50%, var(--metal) 80%, transparent); opacity: .8; }
.bottom-nav a { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 44px; text-decoration: none; font: 600 .71875rem/1.2 var(--sans); color: var(--text-2); border-radius: 12px; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.bottom-nav .ic { width: 23px; height: 23px; color: var(--text-2); }
.bottom-nav a[aria-current="page"], .bottom-nav a[aria-current="page"] .ic { color: var(--head); }
.bottom-nav a[aria-current="page"]::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 40px; height: 3px; margin-left: -20px; border-radius: 3px; background: var(--metal); }

/* ============================================================ founder credit (normal flow, subtle) */
.credit { display: flex; align-items: center; gap: 10px; margin: 18px 6px 4px; font: 500 .75rem/1.4 var(--sans); letter-spacing: .06em; color: var(--text-2); }
.credit::before, .credit::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline)); }
.credit::after { background: linear-gradient(90deg, var(--hairline), transparent); }

/* ============================================================ toast */
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 10px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px;
  width: max-content; max-width: min(410px, calc(100vw - 28px)); padding: 8px 8px 8px 14px; border-radius: 12px; font: 500 .875rem/1.4 var(--sans); color: var(--nav-ink); background: var(--nav-b);
  box-shadow: 0 8px 20px rgba(20, 28, 40, .3); opacity: 0; visibility: hidden; transition: opacity var(--dur), visibility var(--dur); }
.toast:not(.has-action) { padding-right: 14px; min-height: 0; }
.toast.on { opacity: 1; visibility: visible; }
.toast.error { background: var(--error); color: #FFFFFF; }
[data-theme="royal-navy"] .toast.error, [data-theme="emerald-gold"] .toast.error, [data-theme="burgundy-rose"] .toast.error, [data-theme="graphite-copper"] .toast.error { color: #2A0D10; }
.toast-action { min-height: 44px; padding: 0 12px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-weight: 700; }

/* ============================================================ dialogs */
dialog { width: min(410px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 16px; border: 1px solid var(--hairline); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(20, 28, 40, .3); overflow: auto; }
dialog::backdrop { background: rgba(20, 28, 40, .45); }
.dlg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: -6px -6px 6px 0; }
.dlg-title { margin: 6px 0 0; font: 700 1.375rem/1.2 var(--serif); color: var(--head); }
.dlg-body { font-size: .9375rem; line-height: 1.5; }
.dlg-body p { margin: 0 0 8px; }
.dlg-body ul { margin: 0 0 8px; padding-left: 20px; }
.dlg-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.placeholder-badge { display: inline-flex; margin-bottom: 8px; }

/* ============================================================ form controls shared by Settings, dialogs and the player */
.seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.seg legend { padding: 0; margin-bottom: 6px; font: 600 .8125rem/1.3 var(--sans); color: var(--text-2); }
.seg label { position: relative; display: inline-flex; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.seg .opt { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 600 .9375rem/1.2 var(--sans); color: var(--btn-ink);
  border: 1px solid var(--hairline); background: linear-gradient(180deg, var(--btn-a), var(--btn-a) 35%, var(--btn-b)); box-shadow: var(--shadow-btn); }
.seg .opt .ic { width: 16px; height: 16px; display: none; }
.seg input:checked + .opt { color: var(--nav-ink); background: linear-gradient(180deg, var(--nav-a), var(--nav-b)); }
.seg input:checked + .opt .ic { display: block; }
.seg input:focus-visible + .opt { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 44px; flex: none; padding: 0; border: 0; background: none; }
.switch .track { position: relative; width: 48px; height: 28px; border-radius: 999px; background: var(--progress-track); border: 1px solid var(--track); transition: background var(--dur); }
.switch .knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(20, 28, 40, .35); transition: transform var(--dur); }
.switch[aria-checked="true"] .track { background: var(--switch-on); border-color: var(--switch-on); }
.switch[aria-checked="true"] .knob { transform: translateX(20px); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.sw { position: relative; display: grid; justify-items: center; gap: 4px; padding: 4px 2px; font-size: .8125rem; line-height: 1.25; text-align: center; color: var(--text); cursor: pointer; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; z-index: 1; cursor: pointer; }
.sw .chip { position: relative; width: 100%; max-width: 92px; height: 36px; border-radius: 10px; border: 1px solid rgba(20, 28, 40, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 5px rgba(20, 28, 40, .15); }
.sw input:checked + .chip { outline: 3px solid var(--metal); outline-offset: 2px; }
.sw input:checked + .chip::after { content: "✓"; position: absolute; right: -6px; top: -8px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #1B1A17; background: linear-gradient(180deg, var(--hi), var(--metal)); }
.sw input:focus-visible + .chip { outline: 3px solid var(--focus); outline-offset: 3px; }

/* sliders (MP3 player) */
.range { flex: 1; min-width: 0; height: 44px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --pct: 0%; --fill: var(--text-2); }
.range:disabled { cursor: default; opacity: .7; }
.range::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--fill) var(--pct), var(--track) var(--pct)); }
.range::-moz-range-track { height: 4px; border-radius: 99px; background: var(--track); }
.range::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--fill); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--thumb); border: 0; box-shadow: 0 0 0 2px var(--surface), 0 1px 4px rgba(20, 28, 40, .3); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--thumb); border: 0; box-shadow: 0 0 0 2px var(--surface); }
.range.vol { --fill: var(--head); }
.range.vol::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; background: radial-gradient(circle at 40% 35%, var(--hi) 0%, var(--metal) 50%, var(--metal-deep) 100%); box-shadow: inset 0 0 0 1.5px var(--knob-edge), 0 0 0 2px var(--surface), 0 2px 4px rgba(20, 28, 40, .3); }
.range.vol::-moz-range-thumb { width: 22px; height: 22px; background: radial-gradient(circle at 40% 35%, var(--hi) 0%, var(--metal) 50%, var(--metal-deep) 100%); box-shadow: inset 0 0 0 1.5px var(--knob-edge), 0 0 0 2px var(--surface); }

/* ============================================================ motion, forced colours */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .btn:active { transform: none; } }
@media (forced-colors: active) {
  .btn, .card, .pill-select, .search input, .seg .opt, .switch .track { border: 1px solid ButtonText; }
  .bottom-nav a[aria-current="page"]::after, .sw input:checked + .chip { background: Highlight; outline-color: Highlight; }
}
.sr-h { margin: 0; font: inherit; }
main p, main li, main h1, main h2 { overflow-wrap: break-word; }
.dstatus .toast-action { margin-left: 8px; color: var(--head); border-color: var(--hairline); }
.toast-x { display: grid; place-items: center; width: 44px; height: 44px; flex: none; margin: -4px -4px -4px 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; }

/* ============================================================ Telegram Mini App shell (html.tg — set by src/core/telegram.js only inside Telegram)
   The document never scrolls: <html> is locked and <body> is sized to Telegram's stable viewport height (CSS variable kept up to
   date by telegram-web-app.js — no hard-coded height) and is the only vertical scroller. The bottom bar is placed from the top of
   that stable height, so it stays on screen even before the Mini App is fully expanded. Design, colours and sizes are unchanged. */
html.tg { height: 100%; overflow: hidden; overscroll-behavior: none; scroll-padding: 0;
  --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); }
html.tg body { height: var(--tg-viewport-stable-height, 100%); overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-top: 12px; scroll-padding-bottom: calc(var(--nav-h) + var(--safe-b) + 12px); }
html.tg .app { min-height: 100%; }
/* 2026-10-26 full screen on phones / tablets (src/core/telegram.js requestFullscreen): Telegram floats Close / ⋯ over the top
   and publishes the space they need (device safe area + its content safe area). The page top and the sticky section tabs
   stay below them; outside full screen both variables are 0, so nothing moves. */
html.tg { --tg-top: calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)); }
html.tg .app { padding-top: max(env(safe-area-inset-top, 0px), var(--tg-top)); }
html.tg .section-nav.jump-pills { top: var(--tg-top); }
html.tg .bottom-nav { bottom: auto; top: calc(var(--tg-viewport-stable-height, 100vh) - var(--nav-h) - var(--safe-b)); }
html.tg .toast { bottom: calc(100vh - var(--tg-viewport-stable-height, 100vh) + var(--nav-h) + var(--safe-b) + 10px); }