/* Fonts are served from here (no Google at run time, works offline): Literata for words and headings, Inter for everything else; Latin, Cyrillic (with ґ є ї) and a small IPA subset */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/literata-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/literata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-ipa.woff2) format('woff2'); unicode-range: U+0250-02FF, U+035C, U+0361; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/inter-greek-theta.woff2) format('woff2'); unicode-range: U+03B2, U+03B8, U+03C7; }
:root {
  --bg: #f6efe4; --surface: #fffaf1; --ink: #2b2118; --muted: #7d6e5e; --line: #e6d9c5;
  --accent: #c8783c; --accent-ink: #fff; --blue: #2f5d7c;
  --r1: #b8453a; --r2: #c98a2b; --r3: #2e9d5e; --r4: #2f5d7c;
  --k1: var(--r1); --k2: var(--r2); --k3: var(--r3); --k4: var(--r4); --k5: #6fbf9a; --k6: #7a5bb0;   /* rating-button colors for the progress bar and legend */
  --shadow: 0 10px 30px rgba(80, 50, 20, .14);
  --gold: linear-gradient(145deg, #f5d97f, #d7a720); --gold-ink: #4a3300; --silver: linear-gradient(145deg, #e9ecef, #aeb5bd); --silver-ink: #2f3640; --bronze: linear-gradient(145deg, #e8b182, #c47f42); --bronze-ink: #3a1f08;      /* leaderboard places 1–3 */
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  /* one type scale for the whole app; serif only for words and headings, every number in the sans */
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 32px;
  --ease-out: cubic-bezier(.2, .8, .25, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1);      /* motion: one set of curves and times for everything that moves */
  --dur-fast: .15s; --dur-med: .25s;
}
:root[data-theme="dark"] {
  --bg: #17120d; --surface: #241c14; --ink: #f1e6d4; --muted: #a39482; --line: #3a2e22;
    --accent: #e0914f; --accent-ink: #1b1209; --blue: #7fb0d0; --shadow: 0 10px 30px rgba(0,0,0,.5);
    --k1: #a8453b; --k2: #a87420; --k3: #3aa366; --k4: #3a6786; --k5: #8fd6b3; --k6: #a98be0;
    --gold: linear-gradient(145deg, #dbb44f, #a97c12); --gold-ink: #1f1500; --silver: linear-gradient(145deg, #bcc3cb, #7d8691); --silver-ink: #14181d; --bronze: linear-gradient(145deg, #c98a55, #8f5120); --bronze-ink: #1f0f03; }
/* Home Screen app installed with a translucent status bar: the page runs under the clock and the system draws it in white, so a dark strip keeps it readable (and the header does not slide under it). With the default bar the inset is 0 and the strip has no height */
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #17120d; z-index: 100; pointer-events: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }      /* nothing wider than the screen may stretch the page: iOS then zooms out and leaves a wide empty strip on the right */
* { scrollbar-width: none; } *::-webkit-scrollbar { display: none; }      /* scrolling stays, the bar is never shown (Slava, 26.10.2026) */
.row > span { min-width: 0; }
.row select, .row input[type=date], .row input[type=number] { max-width: 50%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); font-optical-sizing: auto; }
[hidden] { display: none !important; }
b, strong { font-weight: 600; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { min-height: 100%; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 0; }
.top { display: flex; flex-wrap: wrap; row-gap: 10px; align-items: center; justify-content: space-between; padding: 14px 20px; max-width: 760px; width: 100%; margin: 0 auto; }      /* the same 720px (+ padding) as the cards of every tab: nothing jumps when the tab changes */
.brand { white-space: nowrap; font: 600 var(--fs-xl) var(--serif); display: flex; align-items: center; gap: 10px; letter-spacing: .01em; }
.sun { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffd89a, var(--accent)); box-shadow: 0 0 14px var(--accent); }
.tabs { flex: 1 1 auto; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tabs button { flex: 1 1 auto; padding: 8px 16px; border-radius: 999px; color: var(--muted); font-weight: 600; font-size: var(--fs-base); }
.tabs { position: relative; }
.tabs button { position: relative; z-index: 1; }
.tabs button.on { background: var(--accent); color: var(--accent-ink); }
.tab-ind { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--accent); opacity: 0; z-index: 0; pointer-events: none;
  transition: transform .42s var(--ease-spring), width .42s var(--ease-spring), opacity .2s; }
.tabs.has-ind button.on { background: none; }
/* the pill can be dragged with a finger: the tab under it lights up, on release it settles there */
@media (pointer: coarse) { .tabs { touch-action: none; } }
.tabs.dragging button.on:not(.peek) { color: var(--muted); }
.tabs.dragging button.peek { color: var(--accent-ink); }
.tabs.dragging .tab-ind { transition: opacity .2s; }

main { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 0 20px calc(28px + env(safe-area-inset-bottom)); }
.tab { display: none; } .tab.on { display: block; animation: tab-in .28s var(--ease-out) backwards; }
#tab-learn.on { animation-name: tab-fade; }
@keyframes tab-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes tab-fade { from { opacity: 0; } }
.flash { animation: flashbg 2.2s ease-out; border-radius: 10px; }
@keyframes flashbg { 0%, 35% { background: color-mix(in srgb, var(--accent) 25%, transparent); } 100% { background: transparent; } }
.boot { display: none; }
body.booting .boot { display: block; }
body.booting .tab { display: none; }
.sk { display: block; border-radius: 14px; background: linear-gradient(90deg, var(--bg) 25%, color-mix(in srgb, var(--line) 70%, var(--bg)) 50%, var(--bg) 75%); background-size: 200% 100%; animation: skmove 1.4s ease-in-out infinite; }
.sk-title { height: 38px; width: 46%; margin-bottom: 20px; }
.sk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } .sk-tiles .sk { height: 100px; border-radius: 18px; }
.sk-btn { height: 58px; border-radius: 18px; margin-bottom: 30px; }
.sk-line { height: 18px; width: 40%; margin-bottom: 14px; } .sk-line.short { width: 70%; margin: 14px 0 0; }
.sk-bar { height: 10px; border-radius: 99px; }
@keyframes skmove { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }
.panel { --px: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 28px; max-width: 720px; margin: 12px auto; box-shadow: var(--shadow); }
.panel.wide { max-width: 720px; }
h1 { font: 600 clamp(28px, 7.6vw, var(--fs-3xl))/1.2 var(--serif); letter-spacing: -.01em; margin: 0 0 18px; }
/* The greeting strip: the desert (desert.js) behind the greeting. It bleeds to the edges of the card (the padding of .panel: 22/18 px on a phone, 28 px otherwise), the text lies over it.
   Off (or the script not there yet) it is just the heading, as it was. The sky follows the time, not the theme, so the text is always light with a dark scrim under it. */
.greet-wrap { position: relative; --py: 28px; }
.greet-wrap.dz-on { --dz-h: 132px; height: calc(var(--dz-h) + 26px); margin: calc(var(--py) * -1) calc(var(--px) * -1) 0; border-radius: 21px 21px 0 0; overflow: hidden; display: flex; align-items: flex-end; }
.greet-wrap.dz-v1 { --dz-h: 96px; } .greet-wrap.dz-v2 { --dz-h: 132px; } .greet-wrap.dz-v3 { --dz-h: 170px; }
.dz-poster, .dz-img, .dz-cv, .dz-scrim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.dz-poster, .dz-scrim { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 38px), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 38px), transparent 100%); }      /* the seam: the sky and the dunes dissolve into the page */
.dz-poster svg { display: block; }
.dz-poster { opacity: 0; transition: opacity .3s ease; }
.dz-poster.on { opacity: 1; }
.dz-img, .dz-cv { opacity: 0; transition: opacity .3s ease; object-fit: cover; }
.dz-img.on, .dz-cv.on { opacity: 1; }
.dz-scrim { opacity: 0; transition: opacity .3s ease; pointer-events: none; background: linear-gradient(to top, rgba(20, 11, 5, .6) 0%, rgba(20, 11, 5, .26) 40%, rgba(20, 11, 5, 0) 74%); }
.greet-wrap.dz-on h1 { position: relative; margin: 0; padding: 0 var(--px) 68px; transition: color .3s ease; }
.greet-wrap.dz-lit h1 { color: #fbf3e6; text-shadow: 0 1px 14px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .4); }
.greet-wrap.dz-lit .dz-scrim { opacity: 1; }
.greet-wrap.dz-v1 h1 { font-size: var(--fs-xl); padding-bottom: 56px; }
@media (min-width: 700px) { .greet-wrap.dz-on { height: calc(var(--dz-h) * 1.25 + 26px); } .greet-wrap.dz-v3 { height: 266px; } }      /* a wide card: the high strip is 240 px */
/* The strip has no straight lower edge: the scene frays into tongues of its own colour that dissolve into the page. It is drawn in the shader (alpha, with the scrim under the heading), the still picture keeps the alpha; only the fallback poster uses a CSS mask. */
.dz-img.on ~ .dz-scrim, .dz-cv.on ~ .dz-scrim { display: none; }
.place-row { align-items: flex-start; } .place-row small { word-break: break-word; }
.place-open { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-weight: 600; font-size: var(--fs-sm); flex: none; }
.placebox { padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.place-in { display: flex; gap: 8px; } .place-in input { flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: inherit; font: inherit; font-size: 16px; }
.place-in button { padding: 8px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-weight: 600; flex: none; }
.place-res { display: grid; gap: 6px; margin: 8px 0; } .place-res button { text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); } .place-res .none { color: var(--muted); font-size: var(--fs-sm); }
.placebox .link { display: block; margin: 4px 0 6px; } .placebox small { display: block; }
.desert-time { display: flex; align-items: center; gap: 10px; margin: -6px 0 16px; }
.desert-time input { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.desert-time output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.2em; text-align: center; }
#desert-rain { margin-top: -10px; } #desert-rain output { min-width: 11.5em; font-size: var(--fs-sm); text-align: left; }
#desert-wx { margin-top: -10px; } .dwx-l { font-weight: 600; font-size: var(--fs-sm); flex: none; } #desert-wx select { flex: 1 1 auto; min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: inherit; font: inherit; font-size: 16px; font-weight: 600; }
#desert-date { margin-top: -10px; } #desert-date output { min-width: 9.5em; font-size: var(--fs-sm); }
.desert-tw { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.dtw-live { font-size: var(--fs-sm); color: var(--muted); padding: 4px 0; font-variant-numeric: tabular-nums; }
.desert-time button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-weight: 600; font-size: var(--fs-sm); flex: none; }
@media (prefers-reduced-motion: reduce) { .dz-img, .dz-cv, .dz-poster { transition: none; } }
/* a computer: the strip says once that a click runs the day by (desertHint in app.js), until the first click */
.greet-wrap.dz-tap { cursor: pointer; }
.dz-hint { position: absolute; top: 14px; right: 16px; z-index: 2; pointer-events: none; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-sm); color: #fbf3e6; background: rgba(20, 11, 5, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; animation: dzhint-in .6s var(--ease-out) 1.6s forwards, dzhint-pulse 2.4s ease-in-out 2.4s 3; transition: background .2s ease; }
.greet-wrap.dz-tap:hover .dz-hint { background: rgba(20, 11, 5, .55); }
.dz-hint.out { animation: dzhint-out .35s ease forwards; }
@keyframes dzhint-out { from { opacity: .92; } to { opacity: 0; } }
@keyframes dzhint-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: .92; transform: none; } }
@keyframes dzhint-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251, 243, 230, 0); } 50% { box-shadow: 0 0 0 6px rgba(251, 243, 230, .16); } }
.rowbtns { display: inline-flex; gap: 6px; flex: none; } .rowbtns button, #desert-bench { margin: 0; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; flex: none; } #desert-bench:disabled { opacity: .6; }
.muted { color: var(--muted); } .small { font-size: var(--fs-md); }

.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.counters div { background: var(--bg); border-radius: 16px; padding: 14px 4px; text-align: center; }
.counters b { display: block; font: 600 var(--fs-2xl)/1.25 var(--sans); }
.counters span { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }

.primary { background: var(--accent); color: var(--accent-ink); border-radius: 16px; padding: 13px 22px; font-weight: 600; }
.primary.big { width: 100%; padding: 17px; font-size: var(--fs-lg); }
.primary:active { transform: scale(.98); }
.secondary { display: block; width: 100%; padding: 13px; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; font-weight: 600; background: var(--bg); }
.danger { display: block; width: 100%; padding: 13px; border-radius: 14px; color: var(--r1); border: 1px solid var(--r1); font-weight: 600; margin-top: 18px; }
.link { color: var(--muted); font-size: var(--fs-md); text-decoration: underline; text-underline-offset: 3px; padding: 10px; display: block; margin: 6px auto 0; text-align: center; }
.known { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 6px; padding: 13px;
  border: 1.5px solid var(--r3); color: var(--r3); border-radius: 16px; font-weight: 600; background: transparent; }
.known span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--r3); color: #fff; font-size: 13px; }
.known:active { transform: scale(.98); background: color-mix(in srgb, var(--r3) 14%, transparent); }
.ghost { width: 40px; height: 40px; border-radius: 50%; font-size: 20px; color: var(--muted); }
.ghost:disabled { opacity: .3; }
kbd { font: var(--fs-xs) ui-monospace, "SF Mono", Menlo, Consolas, monospace; opacity: .6; border: 1px solid currentColor; border-radius: 5px; padding: 0 5px; margin-left: 6px; }

.progress { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }      /* a thin rule between the start block and the progress */
.bar { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; display: flex; }
.bar i { display: block; height: 100%; transition: width .5s; }
.bar[data-mode="know"] #bar-g1, .bar[data-mode="know"] #bar-g2 { opacity: .4; }          /* «Знаю»: the yellow and the red are not counted */
.progmode { padding: 0; text-align: left; color: inherit; font: inherit; }
.progmode:disabled { cursor: default; opacity: 1; }
.progmode .swap { color: var(--muted); font-size: var(--fs-md); }
#bar-new { background: var(--muted); opacity: .35; } #bar-g1 { background: var(--k1); } #bar-g2 { background: var(--k2); } #bar-g3 { background: var(--k4); } #bar-g4 { background: var(--k3); } #bar-skipped { background: var(--k5); } #bar-known { background: var(--k6); }
.legend { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--fs-md); font-variant-numeric: tabular-nums; color: var(--muted); margin-top: 8px; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.legend i.u { background: var(--muted); opacity: .45; } .legend i.g1 { background: var(--k1); } .legend i.g2 { background: var(--k2); } .legend i.g3 { background: var(--k4); } .legend i.g4 { background: var(--k3); } .legend i.s { background: var(--k5); } .legend i.k6 { background: var(--k6); }
.learned-note { margin: 8px 0 0; } .learned-note b { color: var(--ink); }
.legend b { color: var(--ink); margin-right: 3px; }

.stats { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.stats h3 { margin: 0 0 12px; font: 600 var(--fs-xl)/1.25 var(--serif); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles div { background: var(--bg); border-radius: 14px; padding: 12px; }
.tiles.one { grid-template-columns: 1fr; }
.chartcard { background: var(--bg); border-radius: 14px; padding: 12px; margin-top: 10px; }
.chead { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.chead b { display: block; font: 600 var(--fs-2xl)/1.25 var(--sans); }
.chead span, .chead small { font-size: var(--fs-sm); color: var(--muted); }
.tiles b { display: block; font: 600 var(--fs-2xl)/1.25 var(--sans); }
.tiles span { font-size: var(--fs-sm); color: var(--muted); }
.chart14 { display: flex; align-items: flex-end; gap: 3px; margin-top: 10px; }
.chart14 .d { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; }
.chart14 b { font-size: var(--fs-xs); line-height: 12px; height: 12px; font-weight: 600; color: var(--muted); }
.chart14 i { width: 100%; max-width: 22px; background: var(--accent); border-radius: 4px 4px 0 0; opacity: .5; }
.chart14 i.zero { background: var(--line); opacity: 1; }
.chart14 span { font-size: var(--fs-xs); line-height: 16px; padding: 0 3px; border-radius: 8px; color: var(--muted); }
.chart14 .today b { color: var(--ink); font-size: var(--fs-xs); }
.chart14 .today i { opacity: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); }
.chart14 .today span { background: var(--accent); color: #1a120a; font-weight: 600; }

.nudge { position: relative; margin: 0 0 14px; border: 1.5px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.nudge[hidden] { display: none; }
.nudge summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 14px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nudge summary::-webkit-details-marker { display: none; }
.nudge summary::after { content: ''; width: 8px; height: 8px; margin: 0 4px 0 auto; border: solid var(--accent); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; flex: none; }
.nudge[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.nudge p { margin: 0 14px 10px; font-size: var(--fs-md); color: var(--muted); }
.nudge .primary { margin: 0 14px 14px; padding: 9px 14px; font-size: var(--fs-md); }
.nudge .nx { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; font-size: 22px; color: var(--muted); }
.more { margin: 14px 0 0; text-align: center; }
.morebtns { display: flex; gap: 8px; justify-content: center; }
.morebtns button { flex: 1; max-width: 110px; min-width: 0; padding: 11px 0; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 14px; font-weight: 600; font-size: var(--fs-base); }
.morebtns button:active { transform: scale(.96); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.forecast { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.forecast span { color: var(--muted); } .forecast b { text-align: right; font-weight: 600; }
.forecast .note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.ahead { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; font-weight: 600; font-size: var(--fs-md); background: color-mix(in srgb, var(--r3) 16%, transparent); color: var(--r3); }
.ahead.behind { background: color-mix(in srgb, var(--r2) 16%, transparent); color: var(--r2); }

/* study */
.study { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.study-top { display: flex; align-items: center; gap: 10px; }
.session-bar { flex: 1; height: 6px; background: var(--line); border-radius: 9px; overflow: hidden; }
.session-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
.scene { perspective: 1400px; height: min(52vh, 420px); min-height: 300px; cursor: pointer; touch-action: none; transition: scale .18s var(--ease-out); }      /* the card owns every touch on it: with pan-y the browser took any slightly sloping swipe for a page scroll */
.card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.3, .8, .3, 1), rotate .6s var(--ease-out); }
/* a card is held, not read like a page: no text selection, no «Copy / Look Up» bubble when a finger rests on it (iOS), no image drag */
.scene, .scene *, .tri-card, .tri-card * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* the card under the finger: a press gives a little (`scale`, so it never fights the entrance animations on `transform`); while it is dragged, no text gets selected */
.scene.press { scale: .985; }
.scene .face { touch-action: none; }      /* only a face whose text is longer than the card gets pan-y back (app.js: syncTouch), so that it can scroll */
.scene.dragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
/* a card that leaves after a grade keeps a thin edge in that grade's colour, the same colours as the progress bar */
.scene.tone-g1 { --tone: var(--k1); } .scene.tone-g2 { --tone: var(--k2); } .scene.tone-g3 { --tone: var(--k4); } .scene.tone-g4 { --tone: var(--k3); } .scene.tone-skip { --tone: var(--k5); }
.scene[class*="tone-"] .face { border-color: var(--tone); box-shadow: 0 0 0 2px var(--tone), var(--shadow); }

.card.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); padding: 32px 30px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; text-align: center; gap: 14px; overflow: auto; }
.face.back { transform: rotateY(180deg); }
/* the light over each face (light.js, loaded after the first card): transparent, never takes a touch */
.card canvas.glow { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 26px; pointer-events: none; }
.card canvas.glow.back { transform: rotateY(180deg); }
.tri-flip > canvas.glow { grid-area: 1 / 1; width: 100%; height: 100%; min-height: 0; border-radius: 24px; pointer-events: none; }      /* triage: a layer of light over each face, turning with it */
.tri-flip > canvas.glow { transform: translateZ(1px); }      /* a hair in front of its face: coplanar with it, the front layer was left under the front face (the back one, turned over, happened to win) */
.tri-flip > canvas.glow.back { transform: rotateY(180deg) translateZ(1px); }
/* centred, but when the text is taller than the card it starts at the top and scrolls (plain justify-content: center cut off the first lines of a long answer) */
.face::before, .face::after { content: ''; flex: 1 0 0; }
.tag { position: absolute; top: 16px; left: 18px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.tag.new { color: var(--blue); }
.word { font: 600 clamp(34px, 9vw, 54px)/1.1 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pos { color: var(--muted); font-style: italic; }
.hint { position: absolute; bottom: 16px; font-size: var(--fs-md); color: var(--muted); }
.sub { font: 500 var(--fs-xl)/1.35 var(--serif); color: var(--muted); }
.note { text-align: left; background: color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 12px; padding: 12px 14px; font-size: var(--fs-md); line-height: 1.5; width: 100%; margin-top: 8px; }
.note b { font-weight: 600; }
.nt { cursor: pointer; font-size: var(--fs-md); padding: 4px; }
.wordlist li { flex-wrap: wrap; }
.wordlist .ntx { flex: 0 0 100%; margin: 2px 0 4px; }
.ex { margin-top: 12px; padding-top: 16px; border-top: 1px dashed var(--line); width: 100%; }
.ex p { margin: 0 0 4px; font-size: var(--fs-lg); line-height: 1.45; letter-spacing: -.005em; } .ex p.uk { color: var(--muted); font-size: var(--fs-base); }
mark { background: color-mix(in srgb, var(--accent) 30%, transparent); color: inherit; padding: 0 3px; border-radius: 4px; }
.say { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); font-size: 18px; }
.say:active { transform: scale(.92); }
.say:focus, .say:focus-visible { outline: none; }          /* the ring stayed lit on the speaker after a tap or a key */

.actions { display: flex; flex-direction: column; gap: 6px; }
.rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rates button { border-radius: 16px; padding: 12px 4px; color: #fff; display: flex; flex-direction: column; gap: 2px; align-items: center; font-weight: 600; }
.rates small { font-weight: 500; opacity: .9; font-size: var(--fs-sm); }
.rates kbd { display: none; margin: 4px 0 0; color: #fff; }
@media (hover: hover) and (pointer: fine) { .rates kbd { display: inline-block; } }
.r1 { background: var(--r1); } .r2 { background: var(--r2); } .r3 { background: var(--r3); } .r4 { background: var(--r4); }
.rates button:active { transform: scale(.96); }
:root[data-theme="dark"] .r1 { background: #a8453b; } :root[data-theme="dark"] .r2 { background: #a87420; } :root[data-theme="dark"] .r3 { background: #3aa366; } :root[data-theme="dark"] .r4 { background: #3a6786; }

.selftest { align-self: center; color: var(--muted); font-size: var(--fs-md); padding: 8px 14px; border: 1px dashed var(--line); border-radius: 99px; }
.typeform { display: flex; flex-direction: column; gap: 8px; }
.typerow { display: flex; gap: 8px; }
.typerow input { flex: 1; min-width: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-lg); }
.mic { width: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-size: 22px; flex: none; }
.mic.rec { background: var(--r1); border-color: var(--r1); animation: pulse 1s infinite; }
.mic.rec { position: relative; }
.mic.rec::before { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 4px; background: #fff; }
.mic.busy { color: transparent; position: relative; pointer-events: none; }
.mic.busy::before, .mic.busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; box-sizing: border-box; border: 3px solid var(--line); border-radius: 50%; }
.mic.busy::after { border-color: transparent; border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--r1) 25%, transparent); } }
.result { margin: 0; padding: 11px 14px; border-radius: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--surface); }
.result small { display: block; font-weight: 400; color: var(--muted); margin-top: 2px; }
.result.ok { border-color: var(--r3); color: var(--r3); } .result.near { border-color: var(--r2); color: var(--r2); } .result.wrong { border-color: var(--r1); color: var(--r1); }
.rates button.sug { outline: 3px solid var(--ink); outline-offset: 2px; animation: sugring .8s ease-out .25s 2; }
@keyframes sugring { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 38%, transparent); } to { box-shadow: 0 0 0 16px transparent; } }
/* the verdict: the box pops in; ✓ springs out, ≈ wobbles, ✗ gives the box a short shake */
.result:not([hidden]) { animation: res-in .34s var(--ease-spring) backwards; }
.result.wrong:not([hidden]) { animation: res-in .34s var(--ease-spring) backwards, shake .4s .3s ease-in-out; }
@keyframes res-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.result .vi { display: inline-block; }
.result.ok .vi { animation: tick .6s .1s var(--ease-spring) backwards; }
.result.near .vi { animation: wob .6s .1s ease-in-out backwards; }
@keyframes tick { from { transform: scale(0) rotate(-50deg); } 55% { transform: scale(1.5) rotate(8deg); } }
@keyframes wob { 25% { transform: rotate(-16deg); } 55% { transform: rotate(12deg); } 80% { transform: rotate(-5deg); } }
/* the four grades rise one after another when the answer opens */
.rates:not([hidden]) button { animation: rate-in .34s var(--ease-spring) backwards; }
.rates:not([hidden]) button:nth-child(2) { animation-delay: .04s; } .rates:not([hidden]) button:nth-child(3) { animation-delay: .08s; } .rates:not([hidden]) button:nth-child(4) { animation-delay: .12s; }
.rates:not([hidden]) button.sug { animation: rate-in .34s var(--ease-spring) backwards, sugring .8s ease-out .5s 2; }
@keyframes rate-in { from { opacity: 0; transform: translateY(12px) scale(.94); } }
/* presses give back at once instead of snapping */
.primary, .known, .morebtns button, .say, .rates button, .tri-btns button { transition: transform .14s var(--ease-out), background-color .14s; }
/* films: a new row (a search result, a finished film taking the place of its progress card) rises in; rows that are only updated stay still */
.pklist > *, .pkext > * { animation: pk-in .32s var(--ease-out) backwards; }
@keyframes pk-in { from { opacity: 0; transform: translateY(8px); } }
.row input[type=checkbox]:checked { animation: ck-pop .4s var(--ease-spring); }
@keyframes ck-pop { 40% { transform: scale(1.3); } }
/* home: the main button breathes a few times when the screen opens (a small hint, not a loop) */
#start:not(:disabled) { animation: breathe 2.8s ease-in-out 1.2s 3; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 24%, transparent); } }
/* the end-of-session screen: the sun rises over the dunes, then the text comes in one line after another */
.done-art { margin: -8px -4px 6px; height: 130px; overflow: hidden; border-radius: 16px; }
.done-art svg { display: block; width: 100%; height: 100%; }
.d-far { fill: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
.d-near { fill: color-mix(in srgb, var(--accent) 62%, var(--surface)); }
.d-glow { fill: color-mix(in srgb, var(--accent) 40%, transparent); transform-origin: 160px 66px; }
.d-sun { transform-origin: 160px 66px; }
.dune-art.onb-art { height: 104px; margin: -6px 0 12px; overflow: hidden; border-radius: 16px; } .dune-art.onb-art svg { display: block; width: 100%; height: 100%; }
/* the same sun and dunes on the end-of-session screen and the first onboarding step */
/* after the sunrise the scene breathes for half a minute, then rests: the sun swells a little, its glow pulses, the near dune drifts (transform and opacity only) */
.dune-art .d-sun { animation: sunrise 1.5s .1s cubic-bezier(.2, .75, .25, 1) backwards, sunbreathe 4.5s 1.6s ease-in-out 6 alternate; }
.dune-art .d-glow { animation: sunglow 1.9s .1s ease-out backwards, glowbreathe 4.5s 2s ease-in-out 6 alternate; }
.dune-art .d-far { animation: dune 1.3s ease-out backwards; }
.dune-art .d-near { animation: dune 1.3s .12s ease-out backwards, drift 9s 1.42s ease-in-out 4 alternate; }
@keyframes sunbreathe { to { transform: scale(1.04); } }
@keyframes glowbreathe { to { transform: scale(1.14); opacity: .7; } }
@keyframes drift { to { transform: translateX(-6px); } }
@keyframes sunrise { from { transform: translateY(78px); } }
@keyframes sunglow { 0% { transform: translateY(78px) scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dune { from { transform: translateX(-16px); } }
#done:not([hidden]) > h1, #done:not([hidden]) > #done-text, #done:not([hidden]) > #done-back, #done:not([hidden]) > .more { animation: rise-in .5s var(--ease-out) backwards; }
#done:not([hidden]) > h1 { animation-delay: .35s; } #done:not([hidden]) > #done-text { animation-delay: .5s; } #done:not([hidden]) > #done-back { animation-delay: .65s; } #done:not([hidden]) > .more { animation-delay: .8s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
/* celebrations (motion.js): a floating label over the particles */
.fx-badge { position: fixed; z-index: 96; transform: translate(-50%, -50%); padding: 9px 18px; border-radius: 99px; font: 600 var(--fs-lg) var(--sans); color: #fff; white-space: nowrap; pointer-events: none;
  background: var(--k6); box-shadow: 0 8px 26px color-mix(in srgb, var(--k6) 55%, transparent); }
.fx-badge.learned { padding: 9px 22px; font-size: var(--fs-xl); letter-spacing: .01em; background: linear-gradient(135deg, #5b3d99, #8a63cf); border: 1px solid rgba(255, 255, 255, .3); text-shadow: 0 1px 3px rgba(20, 8, 50, .5);
  box-shadow: 0 10px 34px rgba(91, 61, 153, .6), 0 0 0 6px rgba(138, 99, 207, .22); }      /* a deep violet that keeps white letters sharp in the light and the dark theme alike */
.fx-badge.day { padding: 10px 22px; font-size: var(--fs-xl); background: var(--accent); box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent-ink); }

.overlay.tri-overlay { z-index: 60; }
.tri { max-width: 520px; text-align: center; }
.tri-top { display: flex; align-items: center; gap: 10px; }
.tri-word { font: 600 clamp(38px, 11vw, 58px)/1.1 var(--serif); letter-spacing: -.01em; margin: 34px 0 6px; overflow-wrap: anywhere; min-height: 1.2em; }
.tri-tr { color: var(--muted); font-size: var(--fs-lg); min-height: 1.6em; margin-bottom: 24px; }
.tri-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tri-tip button + button { margin-top: 12px; }
.tri-btns button { padding: 18px 0; border-radius: 18px; font: 600 var(--fs-lg) var(--sans); color: #fff; }
.tri-btns .no { background: var(--r1); } .tri-btns .yes { background: var(--r3); }
.tri-btns button:active { transform: scale(.97); }
#triage-btn { margin-bottom: 8px; border-color: var(--accent); color: var(--accent); }

/* words */
input[type=search], input[type=number], select { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.filters button { padding: 6px 13px; border-radius: 99px; border: 1px solid var(--line); font-size: var(--fs-md); font-weight: 500; color: var(--muted); }
.filters button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
/* two rows of filters (status, level): status stays on one line (scrolls sideways on a phone), a clear gap before the level row */
#filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; margin-bottom: 22px; }
#filters::-webkit-scrollbar { display: none; }
#filters button, #level-filters button { flex: none; white-space: nowrap; padding: 6px 11px; font-size: var(--fs-md); }
#level-filters { margin-top: 0; gap: 5px; }
.wordlist { list-style: none; margin: 0; padding: 0; }
.wordlist li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.wordlist .wc { display: flex; flex-direction: column; flex: 0 1 40%; min-width: 0; }
.wordlist li { overflow: hidden; transition: opacity .25s ease, transform .25s ease, max-height .25s ease .03s, padding .25s ease .03s; }
.wordlist li.out { opacity: 0; transform: translateX(24px); max-height: 0 !important; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; pointer-events: none; }
.wordlist .w { font: 600 var(--fs-lg) var(--serif); overflow-wrap: anywhere; line-height: 1.2; }
.wordlist .w.long { font-size: var(--fs-md); }
.wordlist .u { color: var(--muted); font-size: var(--fs-base); flex: 1 1 0; min-width: 0; overflow-wrap: break-word; hyphens: manual; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--line); }
.dot.new { background: var(--muted); opacity: .45; } .dot.g1 { background: var(--k1); } .dot.g2 { background: var(--k2); } .dot.g3 { background: var(--k4); } .dot.g4 { background: var(--k3); } .dot.skipped { background: var(--k5); } .dot.known { background: var(--k6); }
.wordlist button { font-size: var(--fs-sm); color: var(--muted); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; flex: none; }

/* help */
.prose { line-height: 1.6; }
.prose h1 { margin-bottom: 12px; }
.prose h2 { font: 600 var(--fs-xl)/1.25 var(--serif); margin: 30px 0 14px; }
.prose p, .prose li { font-size: var(--fs-base); }
.prose ol, .prose ul { padding-left: 22px; margin: 8px 0; }
.prose li { margin: 6px 0; }
.prose ul.btns { list-style: none; padding: 0; margin-top: 4px; }
.prose ul.btns li { padding-left: 0; }
.prose ul.btns b { display: inline-block; min-width: 82px; text-align: center; padding: 2px 10px; border-radius: 9px; color: #fff; margin-right: 6px; font-size: var(--fs-md); }
.c1 { background: var(--r1); } .c2 { background: var(--r2); } .c3 { background: var(--r3); } .c4 { background: var(--r4); }
.prose kbd { margin: 0 2px; opacity: .8; }
figure { margin: 18px 0; }
figcaption { font-size: var(--fs-md); color: var(--muted); margin-top: 6px; }
#curve svg { width: 100%; height: auto; display: block; background: var(--bg); border-radius: 14px; }
#curve text { fill: var(--muted); font: var(--fs-xs) var(--sans); }

/* accounts & leaderboard: a table, a column header sorts by it; the player column stays put when the numbers scroll sideways */
.lbwrap { margin: 14px -6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lbt { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 0; }
.lbt th, .lbt td { padding: 11px 6px; border-bottom: 1px solid var(--line); background: var(--surface); }
.lbt thead th { padding: 4px 2px 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-align: right; white-space: nowrap; }
.lbt thead th.nmc { text-align: left; padding-left: 6px; }
.lbt thead th button { padding: 6px 6px; border-radius: 8px; font: inherit; color: inherit; }
.lbt thead th button:focus, .lbt thead th button:focus-visible { outline: none; }          /* the sorted column already shows in colour with an arrow; a ring stayed around it after a click */
.lbt thead th button:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lbt thead th.on { color: var(--accent); }
.lbt .arr { margin-left: 2px; }
.lbt .nmc { position: sticky; left: 0; z-index: 1; }
.lbt .nmw { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lbt .pl { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line); color: var(--muted); font: 600 var(--fs-sm) var(--sans); flex: none; }
.lbt .pl.p1, .lbt .pl.p2, .lbt .pl.p3 { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.lbt .pl.p1 { background: var(--gold); color: var(--gold-ink); } .lbt .pl.p2 { background: var(--silver); color: var(--silver-ink); } .lbt .pl.p3 { background: var(--bronze); color: var(--bronze-ink); }
.lbt .nm { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbt .val { text-align: right; padding-right: 8px; color: var(--muted); } .lbt .val b { font: 600 var(--fs-lg) var(--sans); color: var(--ink); }
.lbt .val b.z { color: var(--muted); font-weight: 500; }
.lbt .val.on { background: color-mix(in srgb, var(--accent) 11%, var(--surface)); } .lbt .val.on b { color: var(--accent); } .lbt .val.on b.z { color: color-mix(in srgb, var(--accent) 60%, var(--muted)); }
.lbt thead th.on button { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 8px 8px 0 0; }
.lbt tr.sep td { border-bottom: 2px solid color-mix(in srgb, var(--muted) 40%, var(--line)); }
.lbt tr.me td { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.lbt tr.me td.val.on { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.lbt tr.lbstat td { padding: 8px 10px 14px; }
.lbt tr.lbstat .lbstat-in { position: sticky; left: 10px; width: min(640px, calc(100vw - 90px)); }
.lbt small { color: var(--muted); font-size: var(--fs-sm); }
@media (max-width: 600px) {
  /* a phone: a player is a card, the name on its own full-width line, the five numbers under the sortable column titles */
  .lbwrap { margin: 14px -18px; }
  .lbt, .lbt thead, .lbt tbody { display: block; }
  .lbt tr { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--line); }
  .lbt th, .lbt td { border-bottom: 0; padding: 0; }
  .lbt thead th.nmc { display: none; }
  .lbt thead th { padding: 2px 0 8px; font-size: var(--fs-xs); text-align: center; } .lbt thead th button { padding: 6px 2px; }
  .lbt td.nmc { grid-column: 1 / -1; position: static; padding: 8px 18px 0; }
  .lbt .lbinfo { width: 22px; height: 22px; } .lbt .lbinfo svg { width: 14px; height: 14px; }
  .lbt .nmw { gap: 8px; } .lbt .pl { width: 26px; height: 26px; } .lbt .nm { font-size: var(--fs-base); }
  .lbt td.val { text-align: center; padding: 2px 0 10px; } .lbt .val b { font-size: var(--fs-lg); }
  .lbt td.val::after { content: attr(data-u); display: block; font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); font-weight: 400; }      /* what the number counts, so a zero is not mistaken for a place */
  .lbt tr.sep { border-bottom: 2px solid color-mix(in srgb, var(--muted) 40%, var(--line)); } .lbt tr.sep td { border-bottom: 0; }
  .lbt thead th.on button { border-radius: 8px 8px 0 0; }
  .lbt tr.lbstat td, .lbt td[colspan] { grid-column: 1 / -1; padding: 8px 18px 14px; }
  .lbt tr.lbstat .lbstat-in { position: static; width: auto; }
}
.brandrow { display: flex; flex: 1 1 100%; align-items: center; gap: 12px; }      /* brand left, the profile on the right; the tabs take the next row */
.brandrow #who { margin-left: auto; }
.who { padding: 5px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font-size: var(--fs-md); font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who.off { border-style: dashed; }
.brandrow { position: relative; }
.gear { display: none; flex: none; padding: 5px 9px; line-height: 0; color: var(--muted); }
.gear.on { color: var(--accent); border-color: var(--accent); }
.gearmenu { position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 190px; padding: 6px; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 34px rgba(0,0,0,.22); }
/* while the menu is open, everything around it is washed with the page colour and blurred (the brand row with the gear stays sharp above); a tap on it closes the menu */
.gearscrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--surface) 92%, transparent); }
.gearscrim[hidden] { display: none; }
/* popups (Motion.toggle adds .pop-on): they grow out of their anchor and fade; closing is quicker than opening */
.pop { opacity: 0; transform: scale(.88) translateY(-8px); transform-origin: top right; transition: opacity var(--dur-fast) ease-out, transform var(--dur-fast) var(--ease-out); }
.pop.pop-on { opacity: 1; transform: none; transition: opacity .2s ease-out, transform .3s var(--ease-spring); }
.pop-fade { opacity: 0; transition: opacity var(--dur-fast) ease-out; }
.pop-fade.pop-on { opacity: 1; transition-duration: .24s; }
.pop.sheet { transform: translateY(28px) scale(.98); transform-origin: bottom center; }
.pop.sheet.pop-on { transform: none; }
.gearmenu > * { opacity: 0; transform: translateY(6px); transition: opacity .1s ease-out, transform .1s ease-out, background-color var(--dur-fast); }
.gearmenu.pop-on > * { opacity: 1; transform: none; transition: opacity .22s ease-out calc(var(--i, 0) * 35ms + 60ms), transform .34s var(--ease-spring) calc(var(--i, 0) * 35ms + 60ms), background-color var(--dur-fast); }
.gearmenu > :nth-child(2) { --i: 1; } .gearmenu > :nth-child(3) { --i: 2; } .gearmenu > :nth-child(4) { --i: 3; }
.gear svg { transition: transform .4s var(--ease-spring); }
.gear[aria-expanded="true"] svg { transform: rotate(90deg); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .gearscrim { background: color-mix(in srgb, var(--surface) 25%, transparent); -webkit-backdrop-filter: blur(34px) saturate(1.7) brightness(1.15); backdrop-filter: blur(34px) saturate(1.7) brightness(1.15); } }      /* frosted: the colours of the page melt into a soft haze, nothing is readable, nothing goes black */
.brandrow { z-index: 40; }
.gearmenu[hidden] { display: none; }
.gm-who { display: none; padding: 8px 14px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-md); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gearmenu button { text-align: left; padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: var(--fs-base); }
.gearmenu button:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.who-out, .logout { color: var(--r1); border-color: color-mix(in srgb, var(--r1) 45%, var(--line)); }
.who-out { flex: none; font-weight: 600; }
.logout { margin-top: 14px; }                                       /* the same size as the other buttons next to it: the settings page and the setup window */
#onb-logout { margin-bottom: 0; }
.overlay { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow: auto; display: flex; padding: 20px; -webkit-overflow-scrolling: touch; }
.overlay .panel { width: 100%; margin: auto; }
.overlay { overscroll-behavior: contain; }
html:has(.overlay:not([hidden])), html:has(.overlay:not([hidden])) body { overflow: hidden; }      /* the page behind a full-screen window must not scroll under the finger (the scroll bar showed through on the phone) */
#login-mode { margin: 4px 0 8px; }
.overlay input[type=text], .overlay input[type=email], .overlay input[type=password] { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--fs-lg); margin: 12px 0 4px; }
.err { color: var(--r1); min-height: 1.4em; margin: 4px 0 10px; font-size: var(--fs-md); }
.recent { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.rchip { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 99px; background: var(--bg); overflow: hidden; }
.recent button { padding: 8px 14px; border: 0; background: none; font-weight: 600; }
.recent .rx { padding: 8px 12px 8px 4px; color: var(--muted); font-weight: 500; font-size: 18px; line-height: 1; }

.overlay.gender-overlay { z-index: 55; }
.gbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

/* onboarding */
.onb { max-width: 560px; }
.dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.dots i { width: 28px; height: 5px; border-radius: 9px; background: var(--line); }
.dots i.on { background: var(--accent); animation: dot-in .5s var(--ease-spring); }
@keyframes dot-in { from { transform: scaleX(.35); opacity: .4; } }
.dots i.done { background: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.onb h1 { font-size: var(--fs-2xl); }
.onb-list { padding-left: 20px; } .onb-list li { margin: 10px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; max-height: 40vh; overflow: auto; }
.chip { padding: 8px 13px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg); font-weight: 500; font-size: var(--fs-md); }
.chip.on { background: var(--r3); border-color: var(--r3); color: #fff; }
.chips.all { max-height: none; }
.chip.kp { background: transparent; border-color: var(--accent); color: var(--accent); }
.chips.quick .chip { font-weight: 500; }
.onb-actions { display: flex; gap: 10px; margin-top: 18px; }
.onb-actions button { flex: 1; padding: 14px; border-radius: 14px; font-weight: 600; }
.onb-actions .secondary { margin: 0; width: auto; }
.onb label.line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.onb label.line input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
.onb .field { width: 100%; margin: 8px 0; }

.levels { margin-top: 0; }
.lvl { font-size: var(--fs-xs); letter-spacing: .06em; color: var(--accent); flex: none; white-space: nowrap; }
.bulk { margin: 4px 0 10px; } .bulk .secondary { margin: 0; border-color: var(--r3); color: var(--r3); font-size: var(--fs-md); padding: 11px; }
.bulk-msg { background: var(--bg); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; font-size: var(--fs-md); }
.bulk-msg button { color: var(--accent); font-weight: 600; margin-left: 8px; text-decoration: underline; }
.onb .tier { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.onb .tier button { flex: 1; min-width: 140px; padding: 10px; border: 1.5px solid var(--r3); color: var(--r3); border-radius: 12px; font-weight: 600; font-size: var(--fs-md); }
.onb .tier button:disabled { opacity: .4; }

.lb-legend { line-height: 1.6; } .lb-legend b { color: var(--ink); }

/* settings */
.plan-title { font-weight: 600; margin-bottom: 8px; }
.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; padding: 9px 6px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.course-seg { margin: 0 0 14px; }
.course-seg[hidden] { display: none; }
.row small { display: block; color: var(--muted); font-size: var(--fs-sm); font-weight: 400; margin-top: 2px; }
.pace { background: var(--bg); border-radius: 12px; padding: 12px 14px; margin: 10px 0 0; font-size: var(--fs-md); }
.pace.warn { border: 1px solid var(--r2); }
input:disabled { opacity: .45; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row input[type=number], .row select, .row input[type=date] { width: 150px; flex: none; }
input[type=date] { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
.row input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--accent); flex: none; }
hr { border: 0; margin: 14px 0; }

@media (max-width: 600px) {
  .top { flex-direction: column; gap: 10px; padding: 12px 20px 6px; }
  .gear:not([hidden]) { display: inline-flex; }
  .tabs [data-tab="leaders"], .tabs [data-tab="help"], .tabs [data-tab="settings"] { display: none; }
  .brandrow { width: 100%; justify-content: flex-start; flex-wrap: nowrap; } .brandrow #who { display: none; } .brandrow #gear { margin-left: auto; } .gm-who { display: block; }      /* brand on the left, the gear and «Вийти» on the right: one tidy row */
  main { padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
  .panel { --px: 18px; padding: 22px 18px; }
  .greet-wrap { --py: 22px; }
  .tabs { width: 100%; gap: 1px; } .tabs button { flex: 1 1 auto; padding: 10px 4px; font-size: var(--fs-base); white-space: nowrap; }
  .scene { height: 48vh; }
  .wordlist .u { font-size: var(--fs-md); }
}
@media (min-width: 900px) { .study { max-width: 640px; } .scene { height: 440px; } }
@media (prefers-reduced-motion: reduce) {
  .card, .scene { transition: none; }
  .scene.press, .tri-card.press { scale: none; }
  .pop, .pop.pop-on, .pop.sheet, .pop.sheet.pop-on { transform: none; transition: opacity .01s; }      /* popups just appear; only movement is switched off (the mic pulse and the highlight flash say something, they stay) */
  .gearmenu > *, .gearmenu.pop-on > * { transform: none; transition: none; }
  .gear svg, .gear[aria-expanded="true"] svg { transition: none; transform: none; }
  .toast { transform: none; }
  #start:not(:disabled) { animation: none; }
  .dune-art .d-sun, .dune-art .d-glow, .dune-art .d-far, .dune-art .d-near, #done:not([hidden]) > * { animation: none; }
  .tab.on, #tab-learn.on, .dots i.on, .pklist > *, .pkext > *, .row input[type=checkbox]:checked { animation: none; }
  .tab-ind { transition: none; }
  .result:not([hidden]), .result.wrong:not([hidden]), .result .vi, .rates:not([hidden]) button, .rates:not([hidden]) button.sug, .rates button.sug { animation: none; }
}
.ratehint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 2px 8px; font-size: var(--fs-md); color: var(--muted); text-align: left; }
.ratehint[hidden], .ratehelp[hidden] { display: none; }
.qm.qm-s { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 16px; min-width: 16px; padding: 0; font-size: 11px; line-height: 1; vertical-align: 2px; margin-left: 4px; border-width: 1.2px; position: relative; }
.qm.qm-s::after { content: ''; position: absolute; inset: -10px; }      /* the icon is small, the tap area stays comfortable */
.known-help { margin: 10px 0 0; line-height: 1.45; }
.qm { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 600; font-size: var(--fs-md); line-height: 1; }
.ratehelp { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, transparent); font-size: var(--fs-md); }
.rh { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 10px; }
.ratehelp .rh { margin: 0; }
.rh li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.rh i { flex: none; width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; background: var(--r1); }
.rh i.r2 { background: var(--r2); } .rh i.r3 { background: var(--r3); } .rh i.r4 { background: var(--r4); } .rh i.kn { background: transparent; border: 2px solid var(--r3); }
.ghost.stop { width: auto; height: 36px; padding: 0 12px; border-radius: 18px; font-size: var(--fs-md); font-weight: 600; flex: none; }
.toast { position: fixed; left: 16px; right: 16px; top: calc(env(safe-area-inset-top, 0px) + 12px); max-width: 420px; margin: 0 auto; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: var(--fs-md); text-align: center; box-shadow: var(--shadow); opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity var(--dur-med), transform var(--dur-med) var(--ease-out); z-index: 80; }
.toast.on { opacity: 1; transform: none; }
/* the app's own confirm / notice dialog (askDialog in app.js) */
.dlg { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 20px; background: color-mix(in srgb, var(--bg) 60%, transparent); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .dlg { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } }
.dlg.pop-on { opacity: 1; }
.dlg-card { width: 100%; max-width: 400px; max-height: 100%; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); transform: translateY(12px) scale(.97); transition: transform .32s var(--ease-spring); }
.dlg.pop-on .dlg-card { transform: none; }
.dlg-title { margin: 0; font: 700 var(--fs-xl)/1.25 var(--serif); }
.dlg-text { margin-top: 10px; color: var(--muted); font-size: var(--fs-base); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.dlg-btns { display: flex; gap: 10px; margin-top: 22px; }
.dlg-btns button { flex: 1; padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: var(--fs-base); }
.dlg-btns .no { border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.dlg-btns .ok { background: var(--accent); color: var(--accent-ink); }
.dlg-btns .ok.danger { background: var(--r1); color: #fff; }
.dlg-btns button:focus { outline: none; }
.dlg-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dlg, .dlg-card { transition: none; } }
.rh em { display: block; margin-top: 2px; font-style: normal; font-size: var(--fs-md); color: var(--muted); }
.overlay .onb-actions { position: sticky; bottom: -20px; z-index: 1; margin-top: 12px; padding: 12px 20px; }
.overlay .onb-actions::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--px)); right: calc(-1 * var(--px));
  border-top: 1px solid var(--line); background: transparent; -webkit-backdrop-filter: blur(2px) saturate(1.5); backdrop-filter: blur(2px) saturate(1.5); }
.ghost svg { display: block; margin: auto; }
.tabs::-webkit-scrollbar { display: none; }
.suggest { display: flex; gap: 8px; margin-top: 8px; }
.suggest input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: var(--fs-base); }
.suggest .primary { padding: 0 16px; border-radius: 12px; font-weight: 600; }
#suggest-open { display: block; margin: 10px auto 0; font-size: var(--fs-md); }
#suggest-open[hidden], .suggest[hidden] { display: none; }

.lbt .lbinfo { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); border: 0; background: transparent; transition: background .2s, color .2s; }
.lbt .lbinfo:focus, .lbt .lbinfo:focus-visible { outline: none; }          /* no ring after a tap, like the sort buttons */
.lbt .lbinfo[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lbstat-h { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; font-weight: 600; margin-bottom: 8px; font-size: var(--fs-md); }
.lbstat-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbstat-h .pillbtn { margin: 0; padding: 4px 10px; font-size: var(--fs-sm); white-space: nowrap; flex: none; }
.lbstat-in .bar { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; display: flex; }
.lbstat-in .bar i { display: block; height: 100%; }
.lbstat-in .legend { font-size: var(--fs-sm); margin-top: 8px; gap: 4px 12px; }

.legend .passed { flex-basis: 100%; margin-top: 2px; }
.legend .passed b { margin-right: 0; }
.passed-line { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: var(--fs-base); color: var(--muted); }
.passed-line > span { white-space: nowrap; }
.passed-line .progmode { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }      /* the label shortens, the button stays on the same line and keeps its size */
.passed-line b { color: var(--ink); font-weight: 600; }
.dot-learned { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--k6); margin-right: 6px; }
.passed-line .pillbtn { margin: 0; padding: 5px 11px; font-size: var(--fs-sm); white-space: nowrap; flex: none; }
@media (max-width: 600px) { .passed-line { font-size: var(--fs-md); gap: 6px; } .passed-line .pillbtn { padding: 5px 9px; } }      /* a phone: a little more room for the numbers in front of the button */
.pillbtn { display: inline-block; margin-top: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: var(--fs-md); font-weight: 600; }
.pillbtn:active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.pillbtn[hidden] { display: none; }

/* film packs */
.pkbox .row.pk:last-of-type { border-bottom: 0; }
.pkqueue { list-style: none; margin: 8px 0 0; padding: 0; }
.pkqueue li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 12px; background: var(--bg); border-radius: 12px; margin-bottom: 6px; font-size: var(--fs-md); }
.pksearch { margin: 10px 0 4px; }
.pksearch .field { width: 100%; margin: 0; }
.pkadd { width: auto; flex: none; padding: 8px 16px; font-size: var(--fs-md); }
.pksearch .field { padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font-size: var(--fs-base); }
.row.pk { gap: 14px; }
.pkcover { width: 72px; height: 106px; border-radius: 6px; object-fit: cover; flex: none; background: var(--bg); border: 1px solid var(--line); }
.pkt { flex: 1; min-width: 0; }
.pkmembers { margin: 0 0 6px 14px; padding-left: 10px; border-left: 2px solid var(--line); }
.pkmembers[hidden] { display: none; }
.pkopen { text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 0; cursor: pointer; }
.pkchev { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.pkchev svg { transition: transform .2s; }
.pkchev.open svg { transform: rotate(180deg); }
.pkhead { margin-bottom: 0; }
.row.pkm .pkcover { width: 56px; height: 82px; }
.pkbar { display: block; height: 6px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.pkbar i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width .6s ease; }
.pkbar.wait i { width: 35% !important; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: pkslide 1.4s ease-in-out infinite; }
@keyframes pkslide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.pkcover.sk { background: linear-gradient(100deg, var(--line) 30%, var(--bg) 50%, var(--line) 70%); background-size: 200% 100%; animation: pkshimmer 1.3s linear infinite; }
@keyframes pkshimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.row.skel { opacity: .92; }
@media (prefers-reduced-motion: reduce) { .pkbar.wait i, .pkcover.sk { animation: none; } }
.pkcover.stack { background: repeating-linear-gradient(135deg, var(--line) 0 6px, var(--bg) 6px 12px); }
.rvcard { border: 1px solid var(--accent); border-radius: 16px; padding: 12px 14px 14px; margin: 10px 0; background: var(--bg); }
.rvbtns { display: flex; gap: 10px; margin-top: 12px; }
.rvbtns button { flex: 1; margin: 0; }
.row.pk .pkt { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; }
.row.pk .pkt small { font-size: var(--fs-md); font-weight: 400; line-height: 1.35; margin-top: 4px; }
.row.pkm .pkt { font-size: var(--fs-base); }
.row.pkm .pkt small { font-size: var(--fs-md); }
.row.pk .pkt .st { color: var(--ink); opacity: .75; }
.tri-card { position: relative; z-index: 1; margin: 0; text-align: center; touch-action: none; transition: transform .16s ease-out; will-change: transform; }      /* the frame and the surface belong to the faces (below), so the whole card turns, not only the text on it */
.tri-card.drag { transition: none; }
.tri-card.press { scale: .985; }
.tri-card .tri-word { margin: 0 0 6px; }
.tri-stamp { position: absolute; z-index: 3; top: 14px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font: 700 var(--fs-lg) var(--sans); text-transform: uppercase; letter-spacing: .04em; opacity: 0; transition: opacity .1s; pointer-events: none; }
.tri-stamp.yes { left: 14px; color: var(--r3); transform: rotate(-8deg); }
.tri-stamp.no { right: 14px; color: var(--r1); transform: rotate(8deg); }
#triage.swr .tri-face { border-color: var(--r3); } #triage.swr .tri-stamp.yes { opacity: 1; }
#triage.swl .tri-face { border-color: var(--r1); } #triage.swl .tri-stamp.no { opacity: 1; }
.tri-flip { display: grid; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, .7, .3, 1); cursor: pointer; }
.tri-flip.noanim { transition: none; }
.tri-flip.flipped { transform: rotateY(180deg); }
.tri-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 230px; padding: 30px 18px 26px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); transition: border-color .12s; }
.tri-face.back { transform: rotateY(180deg); }
.tri-flip.v .tri-face.back { transform: rotateX(180deg); }          /* while the card is turned by a vertical drag its back is laid for that axis (it ends up looking the same) */
.tri-card { perspective: 1000px; }
.tri-card .tri-tr { margin: 0; font: 600 clamp(28px, 8vw, 40px)/1.2 var(--serif); letter-spacing: -.005em; color: var(--ink); }
.tri-msg { color: var(--muted); font-size: var(--fs-lg); }
.tri-deck { position: relative; margin: 18px 0 26px; }
.tri-under { position: absolute; inset: 0; border-radius: 26px; background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow); transform: translateY(14px) scale(.93); transition: opacity .25s; }
.tri-deck.last .tri-under { opacity: 0; }
/* the next card was lying under this one: it rises into place (not in from a side) */
.tri-card.entering { animation: tri-in .42s cubic-bezier(.2, .8, .25, 1); }
@keyframes tri-in { from { transform: translateY(14px) scale(.93); } to { transform: none; } }
.tri-card.ghost { position: fixed; margin: 0; z-index: 90; pointer-events: none; animation: none; will-change: transform, opacity; }
.tri-card.ghost-yes { border-color: var(--r3); } .tri-card.ghost-yes .tri-stamp.yes { opacity: 1; }
.tri-card.ghost-no { border-color: var(--r1); } .tri-card.ghost-no .tri-stamp.no { opacity: 1; }
.chips.sample { max-height: none; }
.chip.st { cursor: default; pointer-events: none; user-select: none; -webkit-user-select: none; }
.onb-q { margin: 18px 0 8px; font-size: var(--fs-lg); }
.onb-opt { border: 1px solid var(--line); border-radius: 16px; padding: 14px 14px 10px; margin: 10px 0; background: var(--bg); }
.onb-opt.yes { border-color: var(--accent); }
.onb-opt button { width: 100%; margin: 8px 0 2px; }
.onb-opt .tier { margin: 0; }
.onb-ask { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.onb-ask button { width: 100%; }
.onb-opt p { margin: 4px 0 6px; }
.chip.st { background: var(--bg); border-color: transparent; font-weight: 500; color: var(--muted); }
.tri-deck { --p: 0; }
.tri-under { display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
  transform: translateY(calc(14px * (1 - var(--p)))) scale(calc(0.93 + 0.07 * var(--p))); opacity: calc(0.65 + 0.35 * var(--p)); transition: transform .3s, opacity .3s; }
.tri-deck.dragging .tri-under { transition: none; }
.tri-under .tri-word { margin: 0; color: var(--ink); opacity: calc(0.25 + 0.75 * var(--p)); }
.tri-card.reset, .tri-card.reset .tri-stamp { transition: none !important; }
.tri-under { padding: 30px 18px 26px; box-sizing: border-box; }
.ipa { color: var(--muted); font: 400 var(--fs-xl)/1.3 var(--sans); letter-spacing: .01em; margin: 2px 0 6px; }
.tri-card .ipa { margin: 0 0 8px; }
.tri-pron { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 6px; }
.tri-pron .ipa { margin: 0; }
.tri-say { width: 38px; height: 38px; font-size: 16px; flex: none; }
.tri-say[hidden], .ipa[hidden], .tri-pron[hidden] { display: none; }
#tri-mute { font-size: 20px; }
.tri-pos { margin: 0 0 6px; }
.tri-pos[hidden] { display: none; }
.pkseries { padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.pkseries .row.pk { border-bottom: 0; padding-bottom: 4px; }
.chips.seasons { margin: 2px 0 8px; }
.chips.seasons .chip { min-width: 40px; text-align: center; }
.chip.on[disabled] { opacity: .45; }
.chip.busy[disabled] { background: transparent; border: 1.5px dashed var(--accent); color: var(--accent); opacity: 1; }
.chip.on.pick { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pkadd.wide { width: 100%; margin: 0; }

/* accounts: login form extras, the profile block in settings, the banner on the home screen */
.overlay input[hidden] { display: none; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-md); margin: 14px 0 10px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#g-wrap { margin-top: 20px; }
#g-btn { display: flex; justify-content: center; min-height: 55px; zoom: 1.25; }
#login-form .link { display: block; margin: 6px auto 0; }
#acct { margin: 6px 0 10px; }
#acct .arow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#acct .arow > div { min-width: 0; }
#acct .arow small { display: block; color: var(--muted); overflow-wrap: anywhere; }
#acct .arow b { overflow-wrap: anywhere; }
#acct .arow button { flex: none; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; }
#acct .badge { display: inline-block; font-size: var(--fs-xs); font-weight: 600; padding: 2px 8px; border-radius: 99px; margin-left: 6px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
#acct .badge.ok { color: #2e9c66; border-color: #2e9c66; }
#acct .badge.warn { color: var(--r1); border-color: var(--r1); }
#acct form { display: grid; gap: 8px; padding: 12px 0; }
#acct form input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
#acct form .btns { display: flex; gap: 8px; }
#acct form .btns button { margin: 0; padding: 13px 22px; border-radius: 14px; }
#acct .aact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
#acct .aact .ginline { margin: 0; }
#acct .arow button.primary { display: block; margin-top: 0; padding: 13px 22px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-ink); font-weight: 600; }
#acct .aerr { color: var(--r1); font-size: var(--fs-md); min-height: 1.2em; }
#acct .ginline { margin: 10px 0 2px; }
#acct .ginline:empty { display: none; }
#acct .ginline.big { zoom: 1.25; }
.acct-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; margin: 0 0 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); font-size: var(--fs-md); }
.acct-banner span { flex: 1 1 200px; }
.acct-banner button { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; }
.acct-banner button.x { border: 0; padding: 4px 8px; color: var(--muted); }

.a2hs { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 45; max-width: 460px; margin: 0 auto; padding: 16px 18px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.a2hs b { display: block; padding-right: 28px; font-size: var(--fs-lg); }
.a2hs p { margin: 6px 0 0; font-size: var(--fs-md); line-height: 1.45; }
.a2hs ol { margin: 10px 0 8px; padding-left: 22px; font-size: var(--fs-md); line-height: 1.5; }
.a2hs li b { display: inline; padding: 0; font-size: inherit; }
.a2hs-ico { display: inline-flex; vertical-align: -5px; color: var(--blue); }
.a2hs .primary { width: 100%; margin-top: 10px; }
.a2hs-x { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; font-size: 24px; line-height: 1; color: var(--muted); }
#acct .arow button.link { border: 0; background: none; padding: 0; margin-left: 6px; text-decoration: underline; font-weight: 500; color: var(--muted); }
.a2hs[data-os=ios] .a2hs-and, .a2hs[data-os=android] .a2hs-ios { display: none; }
.a2hs.native ol, .a2hs.native .a2hs-note { display: none; }
.a2hs.native #a2hs-ok { background: none; color: var(--muted); font-weight: 600; margin-top: 2px; }
.a2hs { max-height: calc(100vh - 24px); overflow: auto; }
.a2hs-vid { display: block; width: 100%; max-height: 38vh; object-fit: contain; margin: 10px 0 0; border-radius: 12px; background: var(--bg); }

/* ?fx: the animation panel (author's link only) */
.fxlab { position: fixed; z-index: 97; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto; padding: 12px; border-radius: 18px; background: transparent; background: color-mix(in srgb, var(--surface) 10%, transparent); border: 1px solid color-mix(in srgb, var(--line) 45%, transparent); color: var(--ink); font-size: var(--fs-md); text-shadow: 0 1px 3px rgba(0,0,0,.65); }      /* almost see-through, so that what happens under it can be watched */
.fxlab { pointer-events: none; }  .fxlab button { pointer-events: auto; }      /* the panel is see-through, so it must not catch touches either: only its buttons do, everything else goes through to the page */
.fxlab .fxl-min { pointer-events: auto; padding: 6px 10px 6px 0; font-weight: 700; cursor: pointer; } .fxlab.min > :not(.fxl-h) { display: none; }
.fxl-h { display: flex; justify-content: space-between; align-items: center; }
.fxl-x { width: 36px; height: 36px; font-size: 24px; line-height: 1; color: var(--muted); }
.fxlab p { margin: 10px 0 6px; font-size: var(--fs-sm); line-height: 1.4; }
.fxlab p.bad { color: var(--r1); } .fxlab p.good { color: var(--r3); }
.fxl-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .fxl-g[hidden] { display: none; }
.fxl-t { display: flex; gap: 6px; margin: 6px 0 8px; } .fxl-t button { flex: 1; padding: 6px 4px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: transparent; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; } .fxl-t button.on { background: color-mix(in srgb, var(--accent) 38%, transparent); }
.fxl-g button { padding: 8px 4px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: transparent; background: color-mix(in srgb, var(--bg) 14%, transparent); color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }

/* settings: the sound volume */
#set-sfxvol { width: 150px; accent-color: var(--accent); }

/* landing for a first-time visitor: sits above the sign-in window (z-index) and is closed only by its two buttons */
.overlay.landing-overlay { z-index: 58; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.landing { max-width: 480px; }
#landing-art .dune-art.onb-art { height: 88px; margin: -8px -4px 12px; }
.landing-brand { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); }
.landing-brand .sun { width: 14px; height: 14px; flex: none; box-shadow: 0 0 8px var(--accent); }
.landing h1 { margin-bottom: 12px; }
.landing-lead { margin: 0 0 16px; font-size: var(--fs-lg); line-height: 1.45; color: var(--muted); }
.landing-steps { list-style: none; counter-reset: step; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.landing-steps li { counter-increment: step; position: relative; padding-left: 44px; min-height: 32px; }
.landing-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 var(--fs-base) var(--sans); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.landing-steps b { display: block; font: 600 var(--fs-lg)/1.3 var(--serif); }
.landing-steps span { display: block; font-size: var(--fs-md); line-height: 1.45; color: var(--muted); margin-top: 2px; }
.landing-note { text-align: center; margin: 10px 0 0; }
.dlg-btns button { margin: 0; width: auto; }      /* the global .danger/.secondary margins and width must not make the two buttons different heights */
/* the buttons and the labels are not text to select (a long press or a drag on them started a selection, which got in the way); fields and the words in lists stay selectable */
button, label, summary, kbd, .tag, .chip, .tabs, .tabs *, .legend, .legend *, .stats, .stats * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; }
/* A word on a sifting card can never be wider than the card, whatever the measuring in JS made of it: the face is a size container, and a word's size is capped by its longest piece
   (--len, set in fitWord) at ~0.62 em per letter. JS then only shrinks it further (a wide letter, a phrase). */
.tri-face { container-type: inline-size; }
.tri-card .tri-word { font-size: min(clamp(38px, 11vw, 58px), calc(100cqw / (var(--len, 8) * .62))); }
.tri-card .tri-tr { font-size: min(clamp(28px, 8vw, 40px), calc(100cqw / (var(--len, 8) * .62))); }
.fxl-stat { margin: 8px 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); }
.appver { font: 500 var(--fs-xs) var(--sans); color: var(--muted); opacity: .8; letter-spacing: 0; align-self: flex-end; padding-bottom: 4px; }      /* the version of the code, for the author only */

/* the Portuguese course (docs/portuguese-plan.md) */
.art { font: 500 .42em/1 var(--sans); color: var(--muted); letter-spacing: 0; vertical-align: .18em; margin-right: .1em; }
/* the Portuguese course has a fixed list of films (pt/catalog.json): no search and no requests for new ones */
body.lang-pt .pksearch, body.lang-pt .pkquota, body.lang-pt .pkext { display: none; }
.pkptnote { display: none; margin: 0 0 8px; }
body.lang-pt .pkptnote { display: block; }
.lbstat-langs { margin-top: 8px; }