/* Taxi 121 Théorie - visual polish layer (loaded LAST on every page, after the page's own <style>).
   Same identity as style A "calm course" (warm cream, taxi yellow, chapter colours); adds depth, clearer states
   and gentle motion. Remove the <link> to assets/polish.css to go back to the plain theme. */

:root {
  --bg-grad: radial-gradient(120% 60% at 50% -10%, #FFF6DA 0%, rgba(255, 246, 218, 0) 60%), linear-gradient(180deg, #F7F1E4 0%, #F1E9D8 100%);
  --card-shadow: 0 1px 1px rgba(60, 44, 10, .04), 0 2px 6px rgba(60, 44, 10, .05), 0 10px 28px rgba(60, 44, 10, .07);
  --card-shadow-hi: 0 2px 4px rgba(60, 44, 10, .06), 0 14px 34px rgba(60, 44, 10, .12);
  --card-edge: rgba(120, 96, 40, .10);
  --yellow-grad: linear-gradient(180deg, #FFD84A 0%, #F5C518 55%, #E9B60C 100%);
  --yellow-depth: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -2px 0 rgba(150, 110, 0, .28) inset, 0 6px 16px rgba(200, 150, 0, .28);
  --glass: rgba(255, 251, 242, .82);
  --r-xl: 22px;
}
:root[data-theme="dark"] {
  --bg-grad: radial-gradient(120% 55% at 50% -10%, #2A2610 0%, rgba(42, 38, 16, 0) 55%), linear-gradient(180deg, #14161A 0%, #0F1013 100%);
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .35);
  --card-shadow-hi: 0 0 0 1px rgba(255, 255, 255, .06), 0 14px 32px rgba(0, 0, 0, .45);
  --card-edge: rgba(255, 255, 255, .07);
  --yellow-depth: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 rgba(120, 90, 0, .45) inset, 0 6px 18px rgba(245, 197, 24, .18);
  --glass: rgba(20, 22, 26, .78);
  --surface: #1D1F24; --surface-2: #272A30;
}

/* ---------- background ---------- */
html, body { background: var(--bg-grad); background-attachment: fixed; background-color: var(--bg); }

/* ---------- app bar: sticky, frosted ---------- */
.appbar { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--card-edge); }
.appbar-title { font-size: 16px; letter-spacing: -.01em; }
.appbar-btn { border-radius: 12px; transition: background-color .15s, transform .1s; }
.appbar-btn:active { transform: scale(.94); }

/* ---------- tab bar (phones): frosted, pill for the active tab ---------- */
@media (max-width: 899px) {
  /* bottom bar colours: see "Dark frame" in theme.css */
  .tab { position: relative; transition: color .15s; }
  .tab svg { transition: transform .2s var(--ease); }
  .tab[aria-current="page"]::before { display: none !important; }
  .tab[aria-current="page"]::after {
    content: ""; position: absolute; z-index: -1; top: 6px; left: 50%; width: 56px; height: 30px; margin-left: -28px;
    border-radius: 999px; background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(200, 150, 0, .25);
  }
  .tab[aria-current="page"] svg { transform: translateY(-1px) scale(1.06); }
}

/* ---------- cards: one consistent depth ---------- */
.cont, .rows, .home .ch, .hero, .tile, .card, .lp-body, .lp-sum, .pick, .dash, .rev .item, .lp-miss .it, .tests .test, .tro > div, section.card {
  border-color: var(--card-edge) !important; box-shadow: var(--card-shadow) !important;
}
.cont, .hero, .lp-body, .card, .dash { border-radius: var(--r-xl) !important; }
  .tile, .pick, .home .ch { transition: transform .15s var(--ease), box-shadow .2s; }
.tile:not(:disabled):active, .pick:active, .home .ch > button:active { transform: scale(.985); }
@media (hover: hover) { .tile:not(:disabled):hover, .pick:hover { box-shadow: var(--card-shadow-hi) !important; transform: translateY(-1px); } }

/* home: continue card glow, chapter cards with a colour gradient chip */
.cont { background: radial-gradient(140% 120% at 100% 0%, #FFE88A 0%, rgba(255, 232, 138, 0) 55%), var(--surface) !important; }
:root[data-theme="dark"] .cont { background: radial-gradient(140% 120% at 100% 0%, rgba(245, 197, 24, .22) 0%, rgba(245, 197, 24, 0) 55%), var(--surface) !important; }
.cont .deco { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .15)); animation: t121-bob 4s ease-in-out infinite; }
.home .ch { border-left-width: 0 !important; position: relative; }
.home .ch::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--cc, var(--line)); }
.home .ch .n { background: linear-gradient(145deg, var(--ccs, var(--surface-2)), color-mix(in srgb, var(--cc, #999) 22%, var(--ccs, #eee))) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, #999) 25%, transparent); }
.ls .ic { transition: background-color .2s, border-color .2s; }
.ls.done .ic { box-shadow: 0 2px 6px color-mix(in srgb, var(--ok) 35%, transparent); }
.row .ri, .tile .ic { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

/* hero (exam page) */
.hero { background: radial-gradient(130% 110% at 100% 0%, var(--c2-soft) 0%, rgba(0, 0, 0, 0) 60%), var(--surface) !important; }
.facts div { background: var(--surface-2) !important; border-color: transparent !important; }

/* ---------- primary buttons: lit taxi sign ---------- */
.go, .btn:not(.ghost), .lp-main, .btnl, .ab .main {
  background: var(--yellow-grad) !important; color: #141414 !important; box-shadow: var(--yellow-depth) !important;
  border: 0 !important; transition: transform .1s, filter .15s, box-shadow .15s; text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.go:active, .btn:not(.ghost):not(:disabled):active, .lp-main:not(:disabled):active, .btnl:active { transform: translateY(1px) scale(.99); filter: brightness(.97); }
.btn:disabled, .lp-main:disabled { background: var(--surface-2) !important; color: var(--muted) !important; box-shadow: none !important; text-shadow: none; }
.btn.ghost, .lp-ghost { background: var(--surface) !important; border: 1px solid var(--card-edge) !important; box-shadow: var(--card-shadow) !important; }

/* ---------- progress bars ---------- */
.bar, .lp-bar { background: color-mix(in srgb, var(--line) 80%, transparent) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06); }
.bar i, .lp-bar i { background: linear-gradient(90deg, #F2B705, #FFD84A) !important; box-shadow: 0 0 10px rgba(245, 197, 24, .45); }

/* ---------- answer options ---------- */
.opt, .lp-opt { border-width: 1.5px !important; border-color: var(--line-strong) !important; background: var(--surface) !important;
  box-shadow: 0 1px 2px rgba(60, 44, 10, .05); transition: border-color .15s, background-color .15s, box-shadow .15s, transform .1s; }
.opt:not(:disabled):active, .lp-opt:not(:disabled):active { transform: scale(.99); }
@media (hover: hover) { .opt:not(:disabled):hover, .lp-opt:not(:disabled):hover { border-color: var(--control) !important; } }
.opt .k, .lp-opt .k { border: 0 !important; background: var(--surface-2); color: var(--ink) !important; transition: background-color .15s, color .15s; }
.opt.sel, .lp-opt.sel { border-color: #E0AE00 !important; background: var(--accent-soft) !important; box-shadow: 0 0 0 3px rgba(245, 197, 24, .25); }
.opt.sel .k, .lp-opt.sel .k { background: var(--accent); color: #141414 !important; }
.opt.right, .lp-opt.right { border-color: var(--ok) !important; background: var(--ok-soft) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }
.opt.right .k, .lp-opt.right .k { background: var(--ok); color: #fff !important; }
.opt.wrong, .lp-opt.wrong { border-color: var(--bad) !important; background: var(--bad-soft) !important; }
.opt.wrong .k, .lp-opt.wrong .k { background: var(--bad); color: #fff !important; }
.ch.good { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); }

/* ---------- feedback ---------- */
.fb, .lp-fb { border-left-width: 0 !important; border-radius: 16px !important; position: relative; padding-left: 18px !important;
  box-shadow: inset 4px 0 0 currentColor; }
.fb.ok, .lp-fb.ok { color: var(--ink); box-shadow: inset 4px 0 0 var(--ok); }
.fb.bad, .lp-fb.bad { color: var(--ink); box-shadow: inset 4px 0 0 var(--bad); }

/* ---------- lesson player picture panel ---------- */
.lp-pic { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03); }
.lp-pic::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 90% at 30% 20%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); pointer-events: none; }
:root[data-theme="dark"] .lp-pic::after { background: radial-gradient(80% 90% at 30% 20%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%); }
.lp-text { letter-spacing: -.005em; }
.lp-end .big, .res .big { animation: t121-pop .5s var(--ease) both; }

/* ---------- section headings ---------- */
h3.sec { letter-spacing: .09em !important; display: flex; align-items: center; gap: 10px; }
h3.sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }

/* ---------- motion: small, purposeful (result pop, bobbing taxi) ---------- */
@keyframes t121-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes t121-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes t121-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- glossary terms and definition sheet ---------- */
.gl { display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; cursor: help;
  text-decoration: underline dotted color-mix(in srgb, var(--accent-text) 70%, transparent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gl:hover { background: var(--accent-soft); border-radius: 4px; }
.gl-sheet { position: fixed; inset: 0; z-index: 200; background: rgba(20, 16, 6, .35); display: flex; align-items: flex-end; justify-content: center; animation: t121-pop-bg .15s ease-out; }
.gl-card { width: 100%; max-width: 560px; background: var(--surface); color: var(--ink); border-radius: 22px 22px 0 0; padding: 18px 20px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(0, 0, 0, .2); animation: t121-up .2s var(--ease); }
.gl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 18px; }
.gl-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink); font-size: 18px; }
.gl-card p { margin: 10px 0 0; line-height: 1.5; font-size: 16px; } .gl-en { color: var(--muted); font-size: 15px !important; } .gl-src { color: var(--muted); font-size: 13.5px !important; }
@keyframes t121-up { from { transform: translateY(30px); opacity: .5; } }
@keyframes t121-pop-bg { from { opacity: 0; } }

/* ---------- read aloud ---------- */
.say { text-decoration: none !important; font-weight: 650; color: var(--ink) !important; }
.say[aria-pressed="true"] { color: var(--accent-text) !important; }