/* ds.css (2026-10-04, pataisa 4: viena komponentu sistema)
   VIENA komponentu biblioteka visiems puslapiams (base.html ir visi atskiri <html> kevalai: onboarding, welcome, share, stats_public,
   analysis_embed, atsisakyti, legal/*, admin, video_card). Ikeliama PO custom.css, sk-palette.css ir sk-type.css.
   Spalvos ir sriftai ateina is sk-palette.css / sk-type.css; cia tik: tarpai, radiusai, aukstis, z-index ir KOMPONENTAI.

   Taisykles:
   - Radiusai TIK 8 / 12 / 20 (+ 50 % tik tikriems apskritimams: taskams, avatarams). Kapsules (999px) nera.
   - Mygtukas: .btn (+ --primary / --secondary / --ghost / --danger / --win; dydziai --sm, numatytasis md). Aukstis >= 44 px telefone.
   - Kortele: .card (+ --inset / --accent / --win / --loss / --warn / --flush / --interactive). Vienas fonas, border, radius, sesejas.
   - Zymė: .chip (+ spalvos). Staciakampe, radius 8. Nera kapsules.
   - Pagrindinis veiksmas ekrane tik vienas (.btn--primary); likusieji .btn--secondary / .btn--ghost.
   - Senosios klases (pbtn, dbtn, pcard, ...) lieka kaip JS / isdestymo kabliukai; ju vizualines deklaracijos pasalintos (codemods/04_components.py). */

:root {
  /* tarpai (4 px tinklelis) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  /* radiusai: 8 smulkiems valdikliams (zymes, tabai, sm mygtukai), 12 valdikliams ir eilutems, 20 kortelems ir modalams */
  --r-1: 8px; --r-2: 12px; --r-3: 20px; --r-round: 50%;
  /* seseliai: DU lygiai (--shadow-1 / --shadow-2 yra sk-palette.css) */
  /* z-index skale */
  --z-raised: 10; --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; --z-tip: 1200;
  /* valdiklio aukstis: kompiuteryje 40, telefone 44 */
  --control-h: 40px;
  /* paviršiai */
  --surface-well: var(--n-2); --surface-card: var(--n-3); --surface-inset: var(--n-4); --surface-raised: var(--n-6);
  --accent-line: rgba(34, 211, 238, .6); /* pasirinktos buklės rėmelis */
}
@media (pointer: coarse), (max-width: 767px) { :root { --control-h: 44px; } }

/* ===== 1. MYGTUKAS =============================================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  box-sizing: border-box; margin: 0; min-height: var(--control-h); padding: 12px 20px;
  font: 600 14px/1.25 var(--font-ui); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: normal; max-width: 100%;
  color: var(--n-12); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: var(--n-7); border-color: var(--line-strong); color: var(--n-13); text-decoration: none; }
.btn:active { transform: none; }
.btn > svg, .btn .ico { flex: 0 0 auto; }
/* variantai: .btn.btn--x (specifiskumas 0,2,0), kad bendros puslapio nuorodu taisykles (a { color }) jų nenugalėtų */
.btn.btn--secondary { color: var(--n-12); background: var(--surface-raised); border-color: var(--line-strong); }
.btn.btn--secondary:hover { background: var(--n-7); color: var(--n-13); }
.btn.btn--primary { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.btn.btn--primary:hover { color: var(--accent-ink); background: var(--accent-strong); border-color: var(--accent-strong); }
.btn.btn--primary:active { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.btn--ghost { color: var(--n-10); background: transparent; border-color: var(--line); }
.btn.btn--ghost:hover { color: var(--n-12); background: var(--line-subtle); border-color: var(--line-strong); }
.btn.btn--danger { color: var(--loss-light); background: var(--loss-soft); border-color: var(--loss-border); }
.btn.btn--danger:hover { color: var(--loss-light); background: rgba(239, 68, 68, .16); border-color: var(--loss); }
.btn.btn--win { color: var(--win-light); background: var(--win-soft); border-color: var(--win-border); }
.btn.btn--win:hover { color: var(--win-light); background: rgba(52, 211, 153, .16); border-color: var(--win); }
.btn[hidden], .chip[hidden], .card[hidden], .tabs[hidden], .segmented[hidden], .tabs__tab[hidden], .segmented__opt[hidden], .modal[hidden], .toast[hidden], .stat[hidden], .empty-state[hidden] { display: none; }
/* dydis: md (numatytasis), sm, lg (tik dideli veiksmo mygtukai zaidimuose); ta pati logika visur */
.btn--lg { padding: 16px 28px; font-size: 16px; line-height: 1.25; }
.btn--sm { padding: 8px 14px; font-size: 12px; line-height: 1.25; border-radius: var(--r-1); }
/* tylus (be matomo rėmelio): ta pati spalva kaip ghost, tik be linijos */
.btn.btn--quiet, .btn.btn--quiet:hover { border-color: transparent; }
.btn.btn--quiet { background: transparent; color: var(--n-10); }
.btn--icon { padding: 0; width: var(--control-h); min-width: var(--control-h); }
.btn--block { display: flex; width: 100%; min-width: 0; }
/* atsakymu variantai (viktorinos, egzaminai, istorijos): ilgas tekstas lauziasi, lygiuojamas kairen, mygtukas auga pagal turini */
.mn-opt, [data-h~="ir-opt"], [data-h~="av-opt"] { display: flex; width: 100%; height: auto; justify-content: flex-start; text-align: left; line-height: 1.35; overflow-wrap: anywhere; gap: 10px; }
/* pasirinkta bukle (filtrai, tabai, perjungikliai): neutralus paviršius + akcento rėmelis */
.btn--ghost:is(.is-active, .is-on, .active, .on, .act, .sel, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-checked="true"]),
.btn--quiet:is(.is-active, .is-on, .active, .on, .act, .sel, [aria-pressed="true"], [aria-selected="true"], [aria-current="true"], [aria-checked="true"]) {
  color: var(--n-12); background: var(--surface-raised); border-color: var(--accent-line);
}
/* atsakymo grazinamasis ryšys (viktorinos): teisingas / neteisingas / pasirinkta kryptis */
.btn:is(.ok, .is-correct, .correct, .sel-long) { color: var(--n-12); background: var(--win-soft); border-color: var(--win-border); }
.btn:is(.no, .bad, .is-wrong, .wrong, .sel-short) { color: var(--n-12); background: var(--loss-soft); border-color: var(--loss-border); }
.btn:is(.selected, .enabled, [data-selected="true"], .hf-active):not(.btn--primary):not(.btn--win):not(.btn--danger) { color: var(--n-12); background: var(--surface-raised); border-color: var(--accent-line); }
/* isjungtas: pritemdytos spalvos (be opacity, kontrastas lieka >= 3:1) */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled {
  color: var(--n-9); background: var(--surface-raised); border-color: transparent; cursor: not-allowed; box-shadow: none; pointer-events: none;
}

/* ===== 2. TABAI / SEGMENTAI ====================================================================================== */
.tabs, .segmented {
  display: flex; align-items: center; gap: var(--s-1); box-sizing: border-box; padding: var(--s-1);
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-2);
}
.tabs { overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab, .segmented__opt {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); flex: 1 1 auto;
  box-sizing: border-box; margin: 0; min-height: var(--control-h); padding: 8px 14px;
  font: 600 12px/1.25 var(--font-ui); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  color: var(--n-10); background: transparent; border: 1px solid transparent; border-radius: var(--r-1);
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tabs__tab:hover, .segmented__opt:hover { color: var(--n-12); background: var(--line-subtle); }
.tabs__tab:is(.is-active, .is-on, .active, .on, .act, .sel, [aria-selected="true"], [aria-pressed="true"], [aria-current="page"]),
.segmented__opt:is(.is-active, .is-on, .active, .on, .act, .sel, [aria-selected="true"], [aria-pressed="true"], [aria-checked="true"]) {
  color: var(--n-12); background: var(--surface-raised); border-color: var(--accent-line);
}

/* ===== 3. KORTELE ================================================================================================ */
.card {
  display: block; position: relative; box-sizing: border-box; padding: var(--s-4);
  color: var(--n-12); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-1);
}
@media (min-width: 768px) { .card { padding: var(--s-6); } }
.card--flush { padding: 0; overflow: hidden; }
.card--bare { padding: 0; }
/* vidinis paviršius (eilutes, plyteles korteles viduje) */
.card--inset { padding: var(--s-3) var(--s-4); background: var(--surface-inset); border-color: var(--line-subtle); border-radius: var(--r-2); box-shadow: none; }
.card--accent { background: var(--accent-soft); border-color: var(--accent-border); }
.card--win { background: var(--win-soft); border-color: var(--win-border); }
.card--loss { background: var(--loss-soft); border-color: var(--loss-border); }
.card--warn { background: var(--warn-soft); border-color: var(--warn-border); }
.card--interactive, a.card, button.card { cursor: pointer; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.card--interactive:hover, a.card:hover, button.card:hover { background: var(--surface-inset); border-color: var(--line-strong); }

/* ===== 4. ZYME (chip) ============================================================================================ */
.chip, .sk-badge {
  display: inline-flex; align-items: center; gap: 5px; box-sizing: border-box; margin: 0; padding: 2px 8px;
  font: 600 12px/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
  color: var(--n-10); background: var(--line-subtle); border: 1px solid var(--line); border-radius: var(--r-1);
}
.chip--accent, .sk-badge--accent { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
.chip--win, .sk-badge--win { color: var(--win); background: var(--win-soft); border-color: var(--win-border); }
.chip--loss, .sk-badge--loss { color: var(--loss); background: var(--loss-soft); border-color: var(--loss-border); }
.chip--warn, .sk-badge--warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-border); }
.chip--gold, .sk-badge--gold { color: var(--gold); background: var(--gold-soft); border-color: var(--gold-border); }

/* ===== 5. LAUKAI ================================================================================================= */
.input, .select, .textarea {
  box-sizing: border-box; margin: 0; min-height: var(--control-h); padding: 10px 14px;
  font: 400 16px/1.4 var(--font-ui); color: var(--n-12);
  background-color: var(--surface-well); border: 1px solid var(--line-strong); border-radius: var(--r-2);
  transition: border-color .15s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--n-9); opacity: 1; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--accent); outline: none; }
.input:disabled, .select:disabled, .textarea:disabled { color: var(--n-9); background-color: var(--surface-card); cursor: not-allowed; }
.input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--loss); }
.textarea { min-height: 96px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238a8a93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* ===== 6. MODALAS ================================================================================================
   .modal-overlay: tamsus fonas (padengia ekrana, pozicija ir rodymas lieka kiekvieno modalo logikoje: klase / atributas / JS).
   .modal: pati dezute. .modal__title / .modal__body / .modal__foot: vidus. Uzdarymo mygtukas: .btn .btn--ghost .btn--icon. */
.modal-overlay { z-index: var(--z-modal); background: rgba(6, 6, 6, .72); }
.modal {
  box-sizing: border-box; color: var(--n-12);
  background: var(--surface-card); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-2);
}
.modal__title { margin: 0; font: 700 20px/1.25 var(--font-ui); color: var(--n-13); letter-spacing: -.01em; }
.modal__body { color: var(--n-10); font: 400 14px/1.5 var(--font-ui); }
.modal__foot { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: flex-end; }

/* ===== 7. PRANESIMAS (toast) ===================================================================================== */
.toast {
  box-sizing: border-box; z-index: var(--z-toast); padding: var(--s-3) var(--s-4);
  font: 500 14px/1.4 var(--font-ui); color: var(--n-12);
  background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--r-2); box-shadow: var(--shadow-2);
}
.toast--win { border-color: var(--win-border); background: var(--win-soft); color: var(--win-light); }
.toast--loss { border-color: var(--loss-border); background: var(--loss-soft); color: var(--loss-light); }
.toast--warn { border-color: var(--warn-border); background: var(--warn-soft); color: var(--warn-light); }
.toast-stack { position: fixed; left: 50%; bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--s-2); width: min(92vw, 420px); }

/* ===== 8. ANTRASTE, SKAICIUS, TUSCIA BUSENA, SKELETAS ============================================================ */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; line-height: 1.45; color: var(--ink-tertiary, var(--n-9)); }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat__value { font: 700 28px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--n-13); }
.stat__label { font: 500 12px/1.4 var(--font-ui); color: var(--n-9); }
.stat--sm .stat__value { font-size: 20px; }
.stat--win .stat__value { color: var(--win); }
.stat--loss .stat__value { color: var(--loss); }
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2); box-sizing: border-box; padding: var(--s-8) var(--s-4); text-align: center;
  color: var(--n-10); font: 400 14px/1.5 var(--font-ui); border: 1px solid var(--line); border-radius: var(--r-2);
}
.empty-state__title { margin: 0; font: 600 16px/1.3 var(--font-ui); color: var(--n-12); }
.skeleton { display: block; min-height: 12px; background: var(--n-5); border-radius: var(--r-1); }

/* ═══ fix7 (2026-10-05) Lietimo plotai telefone: bent 44 x 44 px ═══════════════════════════
   Išvaizda nekeičiama: nuoroda ar mygtukas lieka tokio pat dydžio, o nematomas ::after
   (centruotas, ne mažesnis kaip 44 x 44 px) priima bakstelėjimą aplink jį. Naujam elementui
   užtenka klasės .sk-tap. Sąraše: „Atgal" nuorodos, duonos trupiniai, „žiūrėti viską" tipo
   nuorodos, mažos žymos-nuorodos ir keli mygtukai, kuriems trūko kelių pikselių.
   Nenaudoti elementui su overflow:hidden (plotą nukirptų) ir ten, kur per 11 px aukščiau ar
   žemiau yra kitas spaudžiamas elementas (tokiems žemiau yra atskiros taisyklės). */
@media (pointer: coarse) {
  .sk-tap,
  a.u-f0ff4e, a.u-cddd8f, a.u-78135d, a.u-a8d36a, a.u-73279c, a.u-378f66,
  .sv-crumb, .mn-back, .dexam-back, .pl-back, .dlock-back, .bo-back, a.kb-link, .acc-back,
  .paieska-back, .saugomi-back, .nkm-back, .dash-sec-link, .insights-lesson-link, .slesson-alt,
  a.stat-meta, .alp-login-join a, .lgn__alt a, .legal-lang, .lang-toggle > a, p.u-41b0b0 > a,
  .not-logged a, p > a.t, .wrap > a.logo, .nkm-mod__top, .mk-det > summary, .plink,
  .sp3-toggle a, a.chip, .sg-coin .btn[data-h~=sg-del], .nk-vak__kom > summary, .pub-alert-row > button[type=button] { position: relative; }
  .sk-tap::after,
  a.u-f0ff4e::after, a.u-cddd8f::after, a.u-78135d::after, a.u-a8d36a::after, a.u-73279c::after, a.u-378f66::after,
  .sv-crumb::after, .mn-back::after, .dexam-back::after, .pl-back::after, .dlock-back::after, .bo-back::after, a.kb-link::after, .acc-back::after,
  .paieska-back::after, .saugomi-back::after, .nkm-back::after, .dash-sec-link::after, .insights-lesson-link::after, .slesson-alt::after,
  a.stat-meta::after, .alp-login-join a::after, .lgn__alt a::after, .legal-lang::after, .lang-toggle > a::after, p.u-41b0b0 > a::after,
  .not-logged a::after, p > a.t::after, .wrap > a.logo::after, .nkm-mod__top::after, .mk-det > summary::after, .plink::after,
  .sp3-toggle a::after, a.chip::after, .sg-coin .btn[data-h~=sg-del]::after, .nk-vak__kom > summary::after, .pub-alert-row > button[type=button]::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  /* Teisinių puslapių „LT / EN": nuorodos stovi greta (tarp jų tik „ / "), todėl plotai auga
     į išorę, ne viena į kitą. */
  .lang-toggle > a:first-child::after { left: auto; right: -4px; transform: translateY(-50%); }
  .lang-toggle > a:last-child::after { left: -4px; transform: translateY(-50%); }
  /* Kur per kelis pikselius aukščiau ar šalia yra kitas spaudžiamas elementas, plotas auga
     tik į laisvą pusę (patikrinta matuokliu: niekieno matomas plotas neužimamas). */
  .au-item > a.sk-tap::after { top: -7px; transform: translateX(-50%); }
  .slesson-alt::after { top: -4px; transform: translateX(-50%); }
  a.saugomi-pill::after { top: -7px; transform: translateX(-50%); }
  .pub-alert-row > button[type=button]::after { left: -5px; transform: translateY(-50%); }
  .sp3-toggle a::after { left: 0; width: 100%; transform: translateY(-50%); }
  /* Žymos-nuorodos (filtrai): siauriausia („Visi") buvo 34 px pločio. */
  a.chip { min-width: 44px; justify-content: center; }
  /* Egzamino trupinys „Learn" (38 px): 8 px tarpas iki rodyklės tampa nuorodos dalimi. */
  .dexam-crumb a:first-child { padding-right: 8px; margin-right: -8px; }
  /* fix7b: antra trupinio nuoroda (EN „Basics") buvo 43,2 px pločio; ji turi overflow:hidden,
     todėl ::after nepadėtų. */
  nav.dexam-crumb a { min-width: 44px; }
  /* Slankikliai: takelis lieka 6 px, bet pats laukas 44 px aukščio, kad nykštys pataikytų
     ne tik į rutuliuką. fix7b: vertical-align: top ir -7 / -31 px paraštės (ne -19 / -19):
     eilutės langelis lieka toks pat kaip 6 px laukui, tad takelis ir viskas po juo stovi
     ten pat, kur stovėjo (su -19 / -19 takelis pakildavo 12 px, o blokas paaugdavo 7 px). */
  input[type=range].mc-slider, input[type=range].rt-slider, input[type=range]#sg-mc {
    height: 44px; margin-top: -7px; margin-bottom: -31px; vertical-align: top; background: transparent !important;
  }
  /* Klaviatūros fokusas (planšetė su klaviatūra): žiedas aplink rutuliuką, ne aplink visą
     44 px lauką (tas gulė ant teksto virš ir po slankikliu). */
  input[type=range].mc-slider:focus-visible, input[type=range].rt-slider:focus-visible, input[type=range]#sg-mc:focus-visible { outline: none !important; }
  input[type=range].mc-slider:focus-visible::-webkit-slider-thumb, input[type=range].rt-slider:focus-visible::-webkit-slider-thumb, input[type=range]#sg-mc:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent,#22d3ee); outline-offset: 2px; }
  input[type=range].mc-slider:focus-visible::-moz-range-thumb, input[type=range].rt-slider:focus-visible::-moz-range-thumb, input[type=range]#sg-mc:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent,#22d3ee); outline-offset: 2px; }
  .mc-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
  .mc-slider::-moz-range-track { height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); }
  .mc-slider::-webkit-slider-thumb { margin-top: -7.5px; }
  .rt-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: var(--accent,#22d3ee); }
  .rt-slider::-moz-range-track { height: 6px; border-radius: 4px; background: var(--accent,#22d3ee); }
  .rt-slider::-webkit-slider-thumb { margin-top: -9px; }
  input[type=range]#sg-mc::-webkit-slider-runnable-track { background: var(--sg-fill, rgba(255,255,255,.12)); }
  input[type=range]#sg-mc::-moz-range-track { background: var(--sg-fill, rgba(255,255,255,.12)); }
}