/* skin-a.css — „Плакат SOTA“: жълто #FFD23F, синьо #2457F5, 2px мастилен кант,
   Literata (дисплей) + Golos Text (текст), Кахли таб-колона, двуколонен герой.
   Активна при html[data-skin="a"] (по подразбиране). Светла тема по подразбиране,
   тъмна през prefers-color-scheme и html[data-theme]. Само променливи + подредба. */

html[data-skin="a"]{
  --yellow:#FFD23F;--blue:#2457F5;--ink:#101418;
  --bg:#F7F6F2;--surface:#FFFFFF;--text:#101418;--muted:rgba(16,20,24,.72);
  --accent:#2457F5;--on-accent:#FFFFFF;--accent-text:#2457F5;--focus:#2457F5;
  --btn-line:#101418;--btn-line-p:#101418;
  --top-bg:#FFD23F;--top-text:#101418;--top-line:#101418;--nav-hover:rgba(16,20,24,.08);--nav-on:#101418;--nav-on-t:#FFD23F;
  --logo-bg:#FFFFFF;--logo-fg:#101418;--logo-line:#101418;
  --tab-line:#101418;--tab-bg:#FFFFFF;--tab-on:#FFD23F;--tab-on-t:#101418;
  --frame-line:#101418;--frame-bg:#FFFFFF;--frame-bar:#F7F6F2;--frame-dot:#101418;--frame-shadow:none;
  --tile-line:#101418;--tile-bg:#FFFFFF;--bub-u:#F7F6F2;
  --invite-bg:#FFFFFF;--cta-bg:#FFD23F;--cta-text:#101418;
  --foot-bg:#101418;--foot-text:#FFFFFF;--foot-muted:#C9D6FF;--foot-accent:#FFD23F;--foot-line:rgba(255,255,255,.18);
  --fd:"Literata",Georgia,"Times New Roman",serif;--ft:"Golos Text","Segoe UI",system-ui,sans-serif;--fm:"Golos Text",system-ui,monospace;
  --pad:48px;--sec:64px;--gap:12px;--bw:2px;--rb:10px;--rt:16px;--rf:16px;--top-h:84px;--hero-pt:40px;--h1w:600;--h1ls:-.015em;--h2w:600;--h2ls:-.01em;
  /* ВиДА dock (vida.css чете тези имена) */
  --line:#101418;--font-text:var(--ft);--r16:16px;
  --vida-accent:#2457F5;--vida-ink:#101418;--vida-surface:#FFFFFF;--vida-bg:#FFD23F;--vida-line:#101418;--vida-muted:rgba(16,20,24,.68);--vida-font:var(--ft);--vida-radius:16px;
  /* `0 0 #0000` не е "без сянка" по буквата на closed-form `none` — нарочно:
     30.08.2026 P0, .vida-toggle's `box-shadow` в vida.css ВЕРИЖДА тук с
     пръстена в `--vida-bg` (`var(--vida-shadow), 0 0 0 2px var(--vida-bg)`);
     "none" в списък от сенки е невалиден CSS и маха ЦЯЛАТА декларация. */
  --vida-shadow:0 0 #0000;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  html[data-skin="a"]:not([data-theme="light"]){
    --bg:#0F1216;--surface:#171B21;--text:#F2F3F5;--muted:rgba(242,243,245,.72);
    --accent:#FFD23F;--on-accent:#101418;--accent-text:#FFD23F;--focus:#FFD23F;
    --btn-line:#F2F3F5;--btn-line-p:#FFD23F;
    --top-bg:#101418;--top-text:#FFD23F;--top-line:#FFD23F;--nav-hover:rgba(255,210,63,.12);--nav-on:#FFD23F;--nav-on-t:#101418;
    --logo-bg:#FFD23F;--logo-fg:#101418;--logo-line:#FFD23F;
    --tab-line:#F2F3F5;--tab-bg:#171B21;--tab-on:#FFD23F;--tab-on-t:#101418;
    --frame-line:#F2F3F5;--frame-bg:#171B21;--frame-bar:#0F1216;--frame-dot:#F2F3F5;
    --tile-line:#F2F3F5;--tile-bg:#171B21;--bub-u:#232830;
    --invite-bg:#0F1216;--cta-bg:#FFD23F;--cta-text:#101418;
    --foot-bg:#07090B;--foot-text:#F2F3F5;--foot-muted:#C9D6FF;--foot-accent:#FFD23F;
    --line:#F2F3F5;
    --vida-accent:#FFD23F;--vida-ink:#F2F3F5;--vida-surface:#171B21;--vida-bg:#0F1216;--vida-line:#F2F3F5;--vida-muted:rgba(242,243,245,.68);
    color-scheme:dark;
  }
}
html[data-skin="a"][data-theme="dark"]{
  --bg:#0F1216;--surface:#171B21;--text:#F2F3F5;--muted:rgba(242,243,245,.72);
  --accent:#FFD23F;--on-accent:#101418;--accent-text:#FFD23F;--focus:#FFD23F;
  --btn-line:#F2F3F5;--btn-line-p:#FFD23F;
  --top-bg:#101418;--top-text:#FFD23F;--top-line:#FFD23F;--nav-hover:rgba(255,210,63,.12);--nav-on:#FFD23F;--nav-on-t:#101418;
  --logo-bg:#FFD23F;--logo-fg:#101418;--logo-line:#FFD23F;
  --tab-line:#F2F3F5;--tab-bg:#171B21;--tab-on:#FFD23F;--tab-on-t:#101418;
  --frame-line:#F2F3F5;--frame-bg:#171B21;--frame-bar:#0F1216;--frame-dot:#F2F3F5;
  --tile-line:#F2F3F5;--tile-bg:#171B21;--bub-u:#232830;
  --invite-bg:#0F1216;--cta-bg:#FFD23F;--cta-text:#101418;
  --foot-bg:#07090B;--foot-text:#F2F3F5;--foot-muted:#C9D6FF;--foot-accent:#FFD23F;
  --line:#F2F3F5;
  --vida-accent:#FFD23F;--vida-ink:#F2F3F5;--vida-surface:#171B21;--vida-bg:#0F1216;--vida-line:#F2F3F5;--vida-muted:rgba(242,243,245,.68);
  color-scheme:dark;
}

/* Плакат: ленти с мастилена линия; героят = текст + Кахли таб-колона ВЛЯВО, сцената ВДЯСНО */
html[data-skin="a"] .hero{border-bottom:var(--bw) solid var(--top-line);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);grid-template-areas:"copy stage" "tabs stage" "hint hint";gap:18px 32px;align-items:start}
html[data-skin="a"] .hero-copy{grid-area:copy}
html[data-skin="a"] h1{font-size:clamp(32px,3.4vw,46px);max-width:none}
html[data-skin="a"] .hero .lede{font-size:17px;margin-bottom:18px}
html[data-skin="a"] .proof{margin-top:12px;font-size:13.5px}
html[data-skin="a"] .sw{display:contents}
html[data-skin="a"] .tabs{grid-area:tabs;margin-top:6px}
html[data-skin="a"] .stage{grid-area:stage;border:var(--bw) solid var(--top-line);border-radius:20px;background:var(--surface);padding:16px}
html[data-skin="a"] .hint{grid-area:hint}
html[data-skin="a"] .panel{grid-template-columns:1fr;gap:14px}
html[data-skin="a"] .panel:has(.frame.phone){grid-template-columns:300px minmax(0,1fr);gap:24px}
/* Височина на тесния кадър (Отчети) — колкото 16:9 рамка в тази сцена. */
html[data-skin="a"] .panel .frame.narrow{--shot-h:410px}
html[data-skin="a"] .panel .frame.phone{margin:0}
html[data-skin="a"] .panel figcaption h3{font-size:22px;margin:4px 0 10px}
html[data-skin="a"] .why{grid-template-columns:1fr 1fr;gap:16px}
html[data-skin="a"] .panel:has(.frame.phone) .why{grid-template-columns:1fr}
html[data-skin="a"] .bento,html[data-skin="a"] .modules,html[data-skin="a"] .principles{background:var(--surface);border-bottom:var(--bw) solid var(--top-line)}
html[data-skin="a"] .how,html[data-skin="a"] .who,html[data-skin="a"] .looks-sec,html[data-skin="a"] .law,html[data-skin="a"] .page-hero{border-bottom:var(--bw) solid var(--top-line)}
html[data-skin="a"] .tile.wide{background:var(--yellow);color:#101418}
html[data-skin="a"] .tile.wide p{color:#101418}
html[data-skin="a"] .tile.chat .minichat .u{border:2px solid var(--line)}
@media (max-width:1100px){html[data-skin="a"] .hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}html[data-skin="a"] .panel:has(.frame.phone){grid-template-columns:1fr}html[data-skin="a"] .why{grid-template-columns:1fr}}
@media (max-width:860px){html[data-skin="a"] .hero{grid-template-columns:1fr;grid-template-areas:"copy" "stage" "tabs" "hint"}html[data-skin="a"] .stage{padding:12px}}

/* 30.08.2026 — РЕСПОНСИВНАТА СТЪПКА (закон §1a.11). `base.css` смъква
   `--pad`/`--sec`/`--gap` на `:root` при 860 и 560 px, но кожата ги задава на
   `html[data-skin="a"]` — по-висока специфичност (0,1,1 срещу 0,1,0) И
   по-късен файл, тоест овърайдът на base.css НИКОГА не се прилагаше: `--pad`
   оставаше 48 px и на 360 px. Резултат: шапката излизаше извън екрана
   (кожа А +25 px, кожа Б +14 px хоризонтален скрол на ВСЯКА страница).
   Стъпката живее тук, защото кожата е тази, която притежава мащаба. */
@media (max-width:860px){html[data-skin="a"]{--pad:24px;--sec:48px}}
@media (max-width:560px){html[data-skin="a"]{--pad:16px;--sec:40px;--gap:10px}}