/* Przyczyna — "Czy X powoduje Y?" — chrome na tokenach platformy (light/dark/dracula/glass),
   akcent w stylu CitizenCodex: żółte zakreślenia i ręczne strzałki, ale PROSTY krój systemowy
   (odręczna Caveat usunięta decyzją usera 2026-07-20 — „prosty design").
   PŁASKI język Platformy (2026-07-29, decyzja usera): koniec wypukłych wysp — sekcje treści
   (qcard/hero/factor-row/ev) bez border/radius/shadow, zlane ze stroną; rozdział sąsiadów =
   kreska 1px na var(--line) + oddech. Elewacja zostaje TYLKO na modalach/toastach/menu (shared),
   afordancje pól/przycisków/chipów oraz akcent border-left dowodów bez zmian. */
:root{
  --hl:#ffd63b;               /* zakreślacz (żółty) — stały, jak marker */
  --hl-ink:#241a02;           /* tekst NA zakreśleniu — zawsze ciemny */
  /* Za/przeciw na stonowanych tokenach stanu Platformy — nie czysty RGB. */
  --ok:var(--pass-fg,#4a7a35);   /* dowód: za tezą */
  --ok-bg:color-mix(in srgb,var(--ok) 15%,transparent);
  --no:var(--fail-fg,#993a28);   /* dowód: przeciw */
  --no-bg:color-mix(in srgb,var(--no) 15%,transparent);
  --ctx:#7c8794;              /* dowód: kontekst */
  --ctx-bg:color-mix(in srgb,var(--ctx) 15%,transparent);
}
/* Ciemne motywy: za/przeciw z tokenów stanu Platformy (spójnie z light). */
:root[data-theme="dark"],:root[data-theme="dracula"],:root[data-theme="glass"]{
  --ok:var(--pass-fg,#4cc985); --no:var(--fail-fg,#ff6b66); --ctx:#9aa7b4;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--platform-font-family);background:var(--bg);color:var(--text);
  display:flex;flex-direction:column;min-height:100%;
}
button{font-family:inherit;cursor:pointer}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.przyczyna-platform-header{width:100%;margin:0;border-left:0;border-right:0;border-top:0;border-radius:0;flex:0 0 auto}

.app{flex:1;width:100%;max-width:var(--platform-content-narrow,980px);margin:0 auto;padding:22px 18px 60px}

/* ── zakreślacz i odręczność ─────────────────────────────────────── */
.hl{
  background:linear-gradient(115deg,transparent 2%,var(--hl) 2%,var(--hl) 98%,transparent 98%) no-repeat;
  background-size:100% 60%;background-position:0 72%;
  color:var(--hl-ink);padding:0 .18em;border-radius:2px;font-weight:600;
}
.hand{font-weight:700;line-height:1.2}
/* Ciemne motywy: zakreślacz kryje niemal cały glif — częściowy pasek (60%)
   zostawiał górę ciemnego atramentu (--hl-ink) na ciemnej karcie = poszarpany,
   nieczytelny tytuł. Na light częściowe krycie działa i zostaje. */
:root[data-theme="dark"] .hl,
:root[data-theme="dracula"] .hl,
:root[data-theme="glass"] .hl{
  background-size:100% 92%;
  background-position:0 60%;
}

/* ── intro / toolbar listy ──────────────────────────────────────── */
.intro{margin:2px 0 18px}
.intro h1{font-size:var(--text-xl);font-weight:700;margin:0 0 4px;color:var(--text);letter-spacing:-0.01em}
.intro p{margin:0;color:var(--text-light);font-size:var(--text-base);max-width:620px;line-height:1.5}

.listbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
/* Przyciski = kanon platformy (.platform-button + --primary/--ghost, sekcja KIT
   w shared) — lokalnie zostaje tylko metryka ikon SVG w przyciskach. */
.platform-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.spacer{flex:1}
.seg{display:inline-flex;background:var(--panel-soft);border:1px solid var(--border);border-radius:var(--radius-pill);padding:2px}
/* Nieaktywny segment czytelny (nie watermark); aktywny = tint + ring (reguła 6). */
.seg button{background:transparent;border:none;color:var(--text-light);padding:6px 13px;border-radius:var(--radius-pill);font-size:var(--text-sm)}
.seg button.on{
  background:var(--brand-soft);color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 38%,transparent);
  font-weight:var(--platform-weight-semibold);
}

/* ── pytanie na liście (płaski wiersz z kreską) ─────────────────── */
/* Wiersz zlany ze stroną; sąsiadów rozdziela kreska 1px. Ujemny margines
   trzyma tekst w linii nagłówków, a tint hoveru dostaje 10px oddechu. */
.qlist{display:flex;flex-direction:column}
.qcard{
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;box-shadow:none;
  margin:0 -10px;padding:15px 10px 17px;
  cursor:pointer;transition:background .12s ease;
}
.qcard:first-child{border-top:1px solid var(--line)}
.qcard:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.qcard .claim{font-size:var(--text-lg);font-weight:600;color:var(--text);line-height:1.3;margin-bottom:10px;min-width:0;overflow-wrap:anywhere}
.qcard .claim .q{color:var(--muted);font-weight:500}
/* Miernik jak .platform-meter: tor tintowany, segmenty listy zmiękczone;
   stan zerowy = przerywany tor (nie "zepsuty" pusty pasek). */
.balance{height:8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--brand) 9%,var(--panel-soft));overflow:hidden;display:flex;margin:2px 0 9px}
.balance .b-ok{background:color-mix(in srgb,var(--ok) 66%,var(--surface))}
.balance .b-no{background:color-mix(in srgb,var(--no) 66%,var(--surface))}
.balance .b-ctx{background:color-mix(in srgb,var(--ctx) 66%,var(--surface))}
.balance.is-empty{background:none;border:1px dashed color-mix(in srgb,var(--text) 30%,transparent)}
.qmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:var(--text-xs);color:color-mix(in srgb,var(--text) 62%,var(--muted));min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.qmeta .chip{display:inline-flex;align-items:center;gap:5px}
.qmeta .chip--count{
  background:color-mix(in srgb,var(--ctx) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--ctx) 38%,transparent);
  border-radius:var(--radius-pill);padding:2px 9px;font-weight:600;
}
.qmeta .who{margin-left:auto;color:var(--text-light)}
.tag-ok{color:var(--ok);font-weight:600}
.tag-no{color:var(--no);font-weight:600}

/* Doładowanie kolejnej strony pytań (limit 50 przestał być sufitem listy). */
.loadmore{display:flex;justify-content:center;margin:18px 0 4px}

.empty{text-align:center;color:var(--muted);padding:48px 16px;font-size:var(--text-base)}
.linklike{background:none;border:0;padding:0;color:var(--accent-ink,var(--brand));text-decoration:underline;cursor:pointer;font:inherit}
.empty .hand{font-size:var(--text-lg);color:var(--text-light);display:block;margin-bottom:8px}

/* ── szczegóły: hero z metodyką ─────────────────────────────────── */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent-ink,var(--brand));font-size:var(--text-sm);margin-bottom:14px}
.hero{
  position:relative;background:none;border:0;border-radius:0;box-shadow:none;
  padding:18px 0 22px;margin-bottom:0;border-bottom:1px solid var(--line);
}
/* Kratka-sygnatura hero ZOSTAJE, ale jako tekstura na tle strony (::before),
   nie pudełko: maska wygasza ją ku dołowi (odpowiednik dawnego gradientu
   do var(--surface)) — działa na każdym motywie, także na glass, gdzie
   --bg jest przezroczyste i gradient kryjący nie miał czym kryć. */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--platform-hairline) 1px,transparent 1px),linear-gradient(90deg,var(--platform-hairline) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 72%);
  mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.hero-inner{position:relative}
.hero .flow{display:flex;align-items:center;flex-wrap:wrap;gap:10px 6px;font-size:var(--text-lg);line-height:1.3}
.hero .flow .lead{color:var(--muted);font-weight:500;font-size:var(--text-md)}
.hero .flow .x,.hero .flow .y{font-size:var(--text-xl);font-weight:700}
.arrow{width:44px;height:20px;flex:0 0 auto;color:var(--muted)}
.arrow path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.factor-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin:14px 0 4px}
.factor{
  font-size:var(--text-sm);font-weight:600;background:var(--hl);color:var(--hl-ink);
  padding:3px 10px;border-radius:3px;position:relative;box-shadow:1px 1px 0 rgba(0,0,0,.08);
}
/* Papierowy cień karteczki widoczny też na ciemnych motywach. */
:root[data-theme="dark"] .factor,
:root[data-theme="dracula"] .factor,
:root[data-theme="glass"] .factor{box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.factor .kind{font-size:var(--text-2xs);font-weight:500;opacity:.7;text-transform:lowercase;margin-right:4px}
.factor-flow .arrow{width:30px}

.verdict{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
/* Jeden rytm miernika w całej aplikacji: 8px, tor tintowany (reguła 5). */
.verdict .bar{flex:1;min-width:180px;height:8px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--brand) 9%,var(--panel-soft));overflow:hidden;display:flex}
.verdict .bar .b-ok{background:color-mix(in srgb,var(--ok) 66%,var(--surface))}
.verdict .bar .b-no{background:color-mix(in srgb,var(--no) 66%,var(--surface))}
.verdict .nums{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
.verdict .nums b.ok{color:var(--ok)}
.verdict .nums b.no{color:var(--no)}
.hero .desc{margin-top:14px;color:var(--text-light);font-size:var(--text-base);line-height:1.55;max-width:680px;overflow-wrap:anywhere}
.hero .askedby{margin-top:12px;font-size:var(--text-xs);color:var(--muted)}

/* ── sekcje ─────────────────────────────────────────────────────── */
/* Rozdział sekcji = kreska + oddech; ostatnia (dowody) kończy się bez kreski
   — pod nią jest już tylko padding-bottom .app. */
.section{margin:24px 0;padding-bottom:24px;border-bottom:1px solid var(--line)}
.section:last-of-type{border-bottom:0;padding-bottom:0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.section-head h2{font-size:var(--text-lg);margin:0;color:var(--text)}
.section-head .sub{font-size:var(--text-xs);color:var(--muted)}
.section-sub{margin:0;color:var(--muted);font-size:var(--text-sm)}

.factor-list{display:flex;flex-direction:column}
/* Płaskie wiersze z kreskami — ten sam język co .qcard; ostatni wiersz bez
   kreski (kreskę stawia sama sekcja). Mix z transparent, nie z --surface —
   na glass tint nie robi mlecznej wyspy. */
.factor-row{display:flex;align-items:center;gap:10px;background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0 -10px;padding:10px;cursor:pointer;transition:background .15s ease}
.factor-list .factor-row:last-child{border-bottom:0}
.factor-row:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
/* Aktywny filtr czynnika — sam tint akcentu (stan), bez obrysu. */
.factor-row.on{background:color-mix(in srgb,var(--brand) 12%,transparent)}
.factor-row.on .fcount{color:var(--brand)}
.factor-row .flabel{font-size:var(--text-base);font-weight:600;color:var(--text)}
.factor-row .fkind{font-size:var(--text-2xs);color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.factor-row .fcount{margin-left:auto;font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}

/* ── filtry dowodów ─────────────────────────────────────────────── */
.evfilters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.evfilters .chip{background:var(--panel-soft);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px 12px;font-size:var(--text-xs);color:var(--text-light);font-weight:600;font-variant-numeric:tabular-nums}
/* Aktywny filtr = tint + pierścień (dolna belka obcinała się w "sierp"
   na pełnej pigułce radius-pill). */
.evfilters .chip.on{
  border-color:color-mix(in srgb,var(--brand) 38%,transparent);
  background:color-mix(in srgb,var(--brand) 15%,transparent);
  color:var(--text);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 38%,transparent);
}

/* ── dowody ─────────────────────────────────────────────────────── */
.ev-list{display:flex;flex-direction:column;gap:18px}
/* Płasko: pudełko znika, ZOSTAJE akcent border-left — niesie stanowisko
   dowodu (wyjątek jak karty sygnałów); kolorowa belka + oddech listy
   rozdzielają wpisy bez dodatkowych kresek. */
.ev{background:transparent;border:0;border-left:4px solid var(--ctx);border-radius:0;padding:2px 0 2px 14px;box-shadow:none}
.ev.st-supports{border-left-color:var(--ok)}
.ev.st-refutes{border-left-color:var(--no)}
.ev.st-context{border-left-color:var(--ctx)}
.ev-top{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.st-badge{font-size:var(--text-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap;flex:0 0 auto}
.st-badge.supports{background:var(--ok-bg);color:var(--ok)}
.st-badge.refutes{background:var(--no-bg);color:var(--no)}
.st-badge.context{background:var(--ctx-bg);color:var(--ctx)}
.ev-title{font-weight:var(--platform-weight-semibold);font-size:var(--text-base);color:var(--text);overflow-wrap:anywhere}
.ev-factor{font-size:var(--text-2xs);color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius-pill);padding:1px 8px;white-space:nowrap;flex:0 0 auto;background:transparent;font-family:inherit;cursor:pointer}
.ev-factor:hover{border-color:var(--brand);color:var(--brand)}
.ev-body{font-size:var(--text-sm);color:var(--text-light);line-height:1.5;margin:2px 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.ev-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--text-2xs);color:var(--muted)}
.ev-foot a.src{color:var(--brand)}
.ev-foot .who{color:var(--text-light)}
/* edytuj+usuń renderują się zawsze parą (tylko autor) — auto-margines na
   pierwszym z pary pcha oba przyciski w prawo. */
.ev-edit{margin-left:auto;background:transparent;border:none;color:var(--muted);font-size:var(--text-2xs);padding:2px 4px}
.ev-edit:hover{color:var(--brand)}
.ev-del{background:transparent;border:none;color:var(--muted);font-size:var(--text-2xs);padding:2px 4px}
.ev-del:hover{color:var(--no)}
.votes{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--border);border-radius:var(--radius-pill);padding:1px 3px}
.votes button{background:transparent;border:none;color:var(--muted);width:26px;height:24px;border-radius:var(--radius-pill);font-size:var(--text-sm);line-height:1}
.votes button:hover{background:var(--surface-2);color:var(--text)}
.votes button.up.on{color:var(--ok)}
.votes button.down.on{color:var(--no)}
.votes .score{min-width:20px;text-align:center;font-size:var(--text-xs);font-variant-numeric:tabular-nums;color:var(--text-light)}

/* ── formularze / modal ─────────────────────────────────────────── */
/* Overlay/panel/× = kanon .platform-modal (shared KIT) — lokalne kopie usunięte.
   Zostaje typografia treści; padding-right nagłówka omija absolutny przycisk ×. */
.platform-modal__panel h2{margin:0 0 4px;padding-right:46px;font-size:var(--text-lg);color:var(--text)}
.platform-modal__panel .modal-sub{margin:0 0 16px;font-size:var(--text-sm);color:var(--muted)}
.field{margin-bottom:13px}
.field label{display:block;font-size:var(--text-xs);color:var(--text-light);margin-bottom:5px;font-weight:var(--platform-weight-medium)}
/* Metryka/tło/fokus pola = kanon .platform-field (shared KIT); lokalnie szerokość i textarea. */
.field input,.field textarea,.field select{width:100%}
.field textarea{resize:vertical;min-height:78px;line-height:1.5}
.field .hint{font-size:var(--text-2xs);color:var(--muted);margin-top:4px}
.xy-row{display:flex;gap:10px}
.xy-row .field{flex:1}
.stance-pick{display:flex;gap:8px;flex-wrap:wrap}
.stance-pick label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-pill);padding:6px 12px;font-size:var(--text-sm);color:var(--text-light);cursor:pointer}
.stance-pick input{accent-color:var(--brand)}
.stance-pick label.pk-supports.sel{border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.stance-pick label.pk-refutes.sel{border-color:var(--no);color:var(--no);background:var(--no-bg)}
.stance-pick label.pk-context.sel{border-color:var(--ctx);color:var(--ctx);background:var(--ctx-bg)}
.factor-edit{display:flex;gap:8px;margin-bottom:8px}
.factor-edit select{flex:0 0 148px}
.factor-edit input{flex:1}
.factor-edit .rm{flex:0 0 auto;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);width:36px}
.addrow{background:transparent;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-light);padding:7px 11px;font-size:var(--text-xs);width:100%}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
/* (nieużywany w bieżącym app.js — spłaszczony na zapas, spójnie z resztą) */
.inline-form{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0;margin-top:12px}

/* Toast = kanon .platform-toast + --ok/--err (shared KIT, prawy dół) — bez lokalnych kopii. */

.loading{text-align:center;color:var(--muted);padding:40px;font-size:var(--text-base)}

/* Fokus klawiaturowy: miękki ring akcentu (reguła 10) — karty pytań mają
   tabindex, filtry/przyciski/głosy dostają wspólny wzorzec. */
.qcard:focus-visible,
.platform-button:focus-visible,
.seg button:focus-visible,
.evfilters .chip:focus-visible,
.votes button:focus-visible,
.factor-row:focus-visible,
.ev-factor:focus-visible,
.ev-edit:focus-visible,
.ev-del:focus-visible,
.back-link:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);
  outline-offset:2px;
}

/* Glass: --line (biel .10) ginie na ruchliwej tapecie — kreski rozdziału na
   jawnym hairline glass ze shared (rgba biel .16), jak wzorzec siatek hero. */
:root[data-theme="glass"] .qcard,
:root[data-theme="glass"] .factor-row,
:root[data-theme="glass"] .section,
:root[data-theme="glass"] .hero{border-bottom-color:var(--platform-hairline,rgba(255,255,255,.16))}
:root[data-theme="glass"] .qcard:first-child{border-top-color:var(--platform-hairline,rgba(255,255,255,.16))}
:root[data-theme="glass"] .inline-form{border-top-color:var(--platform-hairline,rgba(255,255,255,.16))}

@media (max-width:640px){
  .intro h1{font-size:var(--text-xl)}
  .hero .flow{font-size:var(--text-lg)}
  .hero .flow .x,.hero .flow .y{font-size:var(--text-lg)}
  .qcard .claim{font-size:var(--text-lg)}
  .xy-row{flex-direction:column;gap:0}
  /* Cele dotykowe: głosy, "edytuj" i "usuń" muszą mieć sensowną strefę kliknięcia. */
  .votes button{width:36px;height:32px}
  .ev-edit,
  .ev-del{padding:8px 10px;min-height:32px;display:inline-flex;align-items:center}
}