/* article-compat.css
   Pakaitalas Tailwind CDN (`cdn.tailwindcss.com`) utility klasėms, kurias
   VIS DAR naudoja 240 straipsnių puslapių (24 straipsniai x 10 kalbų) HTML
   turinys -- žr. docs/sprendimai.md D59/D63. Tikslas: PAŠALINTI render-blocking
   CDN <script> (773ms/127KB pagal PSI diagnostiką) ir kiekviename straipsnyje
   pasikartojantį inline <style> fallback bloką, NIEKADA neliečiant pačio 240
   failų body žymėjimo -- kiekviena žemiau esanti klasė yra TIKSLI esamo
   Tailwind CDN + `tailwind.config` (custom spalvos: canvas/panel/raised/
   border/muted/amber) generuojamos reikšmės atitikmuo, patikrinta grep'u
   per visus 240 failus (0 nepadengtų tokenų).

   VIENINTELIS SĄMONINGAS pataisymas nuo ankstesnio per-straipsnio fallback
   bloko: .text-amber/.bg-amber/.border-amber/hover atitikmenys ten klaidingai
   naudojo var(--accent-2) (žalsvai-mėlyna) vietoj var(--accent) (auksinė) --
   tikroji Tailwind CDN reikšmė PAGAL tailwind.config VISADA buvo var(--accent)
   (tas pats, ką jau naudoja apie.html .eyebrow ir visos kitos jau perkeltos
   svetainės vietos), fallback blokas tiesiog turėjo copy-paste klaidą, kuri
   niekada nebuvo matoma, nes Tailwind CDN realiai vykdomas JS visada
   PERRAŠYDAVO ją teisinga reikšme. Statiniame faile privalu rinktis VIENĄ --
   pasirinkta teisinga, sitewide nuosekli.
*/

body { background: var(--bg-0); color: var(--txt-0); }
.font-body      { font-family: var(--font-body); }
.font-head      { font-family: var(--font-display); }
.font-mono      { font-family: var(--font-id); }
.text-slate-100 { color: var(--txt-0); }
.text-slate-200 { color: #e2e8f0; }
.text-slate-50  { color: #f8fafc; }
.text-black     { color: var(--on-accent); }
.text-muted     { color: var(--txt-1); }
.text-amber     { color: var(--accent); }
.bg-canvas      { background-color: var(--bg-0); }
.bg-panel       { background-color: var(--bg-1); }
.bg-raised      { background-color: var(--bg-2); }
.bg-amber       { background-color: var(--accent); }

.border         { border-width: 1px; border-style: solid; border-color: var(--line); }
.border-t       { border-top-width: 1px; border-top-style: solid; }
.border-b       { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l-2     { border-left-width: 2px; border-left-style: solid; }
.border-border  { border-color: var(--line); }
.border-amber   { border-color: var(--accent); }
.border-collapse{ border-collapse: collapse; }
.rounded-lg     { border-radius: var(--radius); }

.hover\:text-amber:hover    { color: var(--accent); }
.hover\:border-amber:hover  { border-color: var(--accent); }
.hover\:bg-raised:hover     { background-color: var(--bg-2); }
.hover\:bg-amber\/90:hover  { background-color: color-mix(in srgb, var(--accent) 90%, transparent); }
.hover\:underline:hover     { text-decoration: underline; }
.underline      { text-decoration: underline; }
.italic         { font-style: italic; }

.font-medium    { font-weight: 500; }
.font-semibold  { font-weight: 600; }

.text-xs  { font-size: 0.75rem; line-height: 1rem; }
.text-sm  { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl  { font-size: 1.25rem; line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-\[11px\] { font-size: 11px; }
.text-\[15px\] { font-size: 15px; }
.tracking-\[0\.02em\] { letter-spacing: 0.02em; }
.tracking-\[0\.2em\]  { letter-spacing: 0.2em; }
.leading-tight   { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
@media (min-width: 768px) {
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:hidden   { display: none; }
}

.max-w-\[860px\] { max-width: 860px; }
.mx-auto  { margin-left: auto; margin-right: auto; }
.w-full   { width: 100%; }
.inline-block { display: inline-block; }
.block        { display: block; }
.flex         { display: flex; }
.flex-wrap    { flex-wrap: wrap; }
.gap-3        { gap: 0.75rem; }
.justify-center { justify-content: center; }

.px-6  { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-2  { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3  { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pr-3  { padding-right: 0.75rem; }
.pr-4  { padding-right: 1rem; }
.pt-4  { padding-top: 1rem; }
.pt-8  { padding-top: 2rem; }
.pl-4  { padding-left: 1rem; }
.pl-5  { padding-left: 1.25rem; }
.p-5   { padding: 1.25rem; }

.mb-1  { margin-bottom: 0.25rem; }
.mb-4  { margin-bottom: 1rem; }
.mb-6  { margin-bottom: 1.5rem; }
.mb-8  { margin-bottom: 2rem; }
.mt-8  { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.my-4  { margin-top: 1rem; margin-bottom: 1rem; }
.my-6  { margin-top: 1.5rem; margin-bottom: 1.5rem; }

.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

.list-disc    { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

.divide-y > :not([hidden]) ~ :not([hidden])      { border-top-width: 1px; border-top-style: solid; }
.divide-border > :not([hidden]) ~ :not([hidden]) { border-color: var(--line); }

.overflow-x-auto  { overflow-x: auto; }
.transition-colors { transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .transition-colors { transition: none; } }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-0); border-top: 1px solid var(--line); z-index: 60; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
body.has-sticky-cta { padding-bottom: 72px; }
@media (min-width: 768px) { body.has-sticky-cta { padding-bottom: 0; } }

/* Straipsnio lentelės (6 straipsniai turi <table>) -- table-scroll jau
   bendras komponentas (tokens.css), čia tik pats <table>/<th>/<td>, kurie
   iki šiol gaudavo stilių TIK per Tailwind CDN. */
table { width: 100%; }