@charset "utf-8";
/* Zanim wyślesz — design system — ported from plans/wireframes/journey-v4.html.
   Screen-specific styles are added next to their pages; this file holds tokens
   and shared components only. */

/* ============ tokens ============ */
:root {
  --paper: #FAF9F6;
  --surface: #FFFFFF;
  --wash: #ECE8DE;
  --ink: #21252D;
  --ink-2: #5B5F6A;
  --ink-3: #6F727B;
  --line: #D7D2C6;
  --line-soft: #EEECE5;
  --accent: #A62B37;
  --accent-hover: #8E2430;
  --accent-ink: #FFFFFF;
  --accent-wash: #F7ECED;

  /* chart + status (dataviz reference palette) */
  --c-surface: #FCFCFB;
  --series-1: #3E6EA0;
  --series-2: #3E8E72;
  --c-grid: #E1E0D9;
  --c-axis: #C3C2B7;
  --c-muted: #898781;
  --status-good: #0CA30C;
  --status-good-text: #006300;
  --status-warn: #FAB219;
  --status-serious: #EC835A;
  --status-crit: #CE3C28;

  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* type scale — single source of truth for font sizes. Text band collapsed
     18->9 steps on 2026-07-05; the half-steps 16.5/14.5/13.5/12.5/11.5 were
     imperceptible drift (<4% apart) and were removed. Page-unique display h1/h2
     on landing/auth (44/42/30/28/27/25/22/20/19) stay literal until those pages
     get their own pass. New UI text MUST pick a step below, not invent a px. */
  --fs-h1: 32px;      /* report masthead h1 */
  --fs-num: 26px;     /* big stat numbers (line-edit cards) */
  --fs-h2: 21px;      /* section headings */
  --fs-lead: 16px;    /* verdict lead, card sub-headings (was 16.5) */
  --fs-body: 15px;    /* reading prose + sub-headings + secondary serif */
  --fs-ui: 14px;      /* primary UI: buttons, labels, priority titles (was 14.5) */
  --fs-sm: 13px;      /* tables, meta, descriptions (was 13.5) */
  --fs-xs: 12px;      /* small labels (was 12.5) */
  --fs-2xs: 11px;     /* eyebrow, loc, chips, th (was 11.5) */
  --fs-micro: 10.5px; /* chart axes (was 10) */
  --fs-nano: 9px;     /* heatmap glyphs */
}
/* Dark palette. Applied when EITHER the system prefers dark and the reader has
   made no explicit choice (`:not([data-theme])`), OR the reader forced dark via
   the nav toggle (`[data-theme="dark"]`). Forcing light = `[data-theme="light"]`,
   which excludes the media rule and falls back to the light `:root` above.
   Both selectors share the SAME token values — KEEP IN SYNC. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Warm-paper night: the brand is „ciepły papier"; the old dark neutrals
       were cool blue-grey and read as a generic dashboard. Shifted warm
       (R≥G≥B), same luminance/contrast, so dark keeps the editorial feel. */
    --paper: #15130F;
    --surface: #1E1B16;
    --wash: #29241C;
    --ink: #EDE9E0;
    --ink-2: #ADA79B;
    --ink-3: #837D71;
    --line: #332D24;
    --line-soft: #2A251D;
    --accent: #CE5B67;
    --accent-hover: #DA707B;
    --accent-ink: #1A1214;
    --accent-wash: #2E2226;
    --c-surface: #1A1A19;
    --series-1: #6494C6;
    --series-2: #4FA98A;
    --c-grid: #2C2C2A;
    --c-axis: #383835;
    /* status colours retuned for the dark ground (were inherited from light:
       amber/salmon glowed neon, crit red was under-powered). Now balanced ~5-7:1,
       desaturated; crit shares the light hue shift (H~7) away from the accent. */
    --status-good: #33B143;
    --status-good-text: #0CA30C;
    --status-warn: #D2A147;
    --status-serious: #E08A66;
    --status-crit: #EA6A57;
  }
}
:root[data-theme="dark"] {
  /* explicit dark (nav toggle) — MUST match the media block above */
  --paper: #15130F;
  --surface: #1E1B16;
  --wash: #29241C;
  --ink: #EDE9E0;
  --ink-2: #ADA79B;
  --ink-3: #837D71;
  --line: #332D24;
  --line-soft: #2A251D;
  --accent: #CE5B67;
  --accent-hover: #DA707B;
  --accent-ink: #1A1214;
  --accent-wash: #2E2226;
  --c-surface: #1A1A19;
  --series-1: #6494C6;
  --series-2: #4FA98A;
  --c-grid: #2C2C2A;
  --c-axis: #383835;
  --status-good: #33B143;
  --status-good-text: #0CA30C;
  --status-warn: #D2A147;
  --status-serious: #E08A66;
  --status-crit: #EA6A57;
}

/* ============ base ============ */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Unclassed links never fall back to browser blue/purple — accent by
   default, visited included. Scoped with :not([class]) so component
   classes (.btn, .linkish, nav/footer links) keep their own colors
   even in :visited state. */
a:not([class]), a:not([class]):visited { color: var(--accent); }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); text-wrap: balance; margin: 0; }
.eyebrow {
  font-size: var(--fs-2xs); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); font-weight: 700; font-family: var(--sans);
}

.page { padding: 0 40px 64px; max-width: 1040px; margin: 0 auto; }
.page-head { padding-top: 38px; }
.page-head h1 { font-size: 30px; margin-top: 8px; }
.page-head .sub { color: var(--ink-2); font-size: var(--fs-ui); margin: 8px 0 0; }

/* Long-form article (help / SEO pages, np. „Jak czytać raport", „Poradnik").
   Wizualnie identyczne z .faq-page: 680px kolumna (= 760 − padding .page,
   ta sama geometria co FAQ), serif nagłówki, drobny sans body, hairline
   nad sekcją. */
.article { max-width: 680px; margin-inline: auto; }
.article .page-head h1 { font-size: 32px; }
.article .lead { font-family: var(--sans); font-size: var(--fs-ui); line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }
/* Nagłówek sekcji = jak .faq-page h2, z hairline'em oddzielającym (jak lista FAQ). */
.article h2 { font-size: 20px; margin: 40px 0 6px; padding-top: 30px; border-top: 1px solid var(--line); }
.article h3 { font-size: var(--fs-body); margin: 22px 0 4px; }
.article h2 + p, .article h3 + p { margin-top: 6px; }
.article p, .article li { font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.article p { margin: 0 0 12px; }
.article ul { margin: 4px 0 14px; padding-left: 20px; }
.article li { margin: 0 0 7px; }
.article figure { margin: 20px 0; }
.article figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; }
.article figcaption { margin: 8px 0 0; font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-3); text-align: center; }
.article li::marker { color: var(--accent); }
.article strong { color: var(--ink); font-weight: 600; }
.article a:not([class]) { font-weight: 600; }
/* Nota „czym to nie jest" / oczekiwania — lewa krawędź = sygnał wagi (§3). */
.article .note { border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 8px; padding: 12px 18px; margin: 22px 0; }
.article .note p { margin: 0; }
.article .article-cta { margin: 44px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }

/* ============ components ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 6px;
  padding: 10px 18px; font-size: var(--fs-ui); font-weight: 600;
  text-decoration: none;
  transition: background .15s;
}
.btn:hover { background: var(--accent-hover); }
.btn.big { padding: 13px 24px; font-size: var(--fs-body); }
.btn.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line); font-weight: 500;
}
.btn.ghost:hover { border-color: var(--ink-3); background: var(--surface); }
.btn.small { padding: 6px 13px; font-size: var(--fs-xs); }
.btn.danger { background: transparent; color: var(--status-crit); border: 1px solid var(--status-crit); font-weight: 600; }
.btn.danger:hover { background: var(--status-crit); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.linkish { color: var(--accent); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); background: none; border: none; padding: 0; }
.linkish:hover { text-decoration: underline; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px 3px 8px; background: var(--surface);
  white-space: nowrap;
}
.pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.pill.ok i { background: var(--status-good); }
.pill.run i { background: var(--series-1); }
.pill.wait i { background: var(--status-warn); }

/* ============ site chrome ============ */
.sitenav {
  display: flex; align-items: center; gap: 26px;
  padding: 16px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.wordmark {
  font-family: var(--serif); font-size: 19px; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px; margin-right: auto;
  text-decoration: none;
}
.wordmark .mark { color: var(--accent); font-size: var(--fs-h2); line-height: 1; }
.navlinks { display: flex; gap: 22px; align-items: center; }
.navlinks a { color: var(--ink-2); text-decoration: none; font-size: var(--fs-sm); }
.navlinks a:hover { color: var(--ink); }
.navlinks a.active-link { color: var(--ink); font-weight: 600; }
/* light/dark toggle — ikona (słońce/księżyc) dziedziczy kolor linku nawigacji
   (currentColor → token). Widoczna ikona = tryb, na który KLIKNIĘCIE przełączy. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-2); }
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .ic-sun { display: none; }
.theme-toggle .ic-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .ic-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .ic-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .ic-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: none; }

.sitefooter {
  border-top: 1px solid var(--line); margin-top: 64px;
  padding: 22px 40px; display: flex; gap: 24px; align-items: center;
  font-size: var(--fs-xs); color: var(--ink-3);
}
.sitefooter a { color: var(--ink-3); text-decoration: none; }
.sitefooter a:hover { color: var(--ink); }
.sitefooter span:first-child { margin-right: auto; }

/* ============ forms ============ */
fieldset.block {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); padding: 22px 24px 24px; margin: 0 0 18px;
}
fieldset.block legend {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  padding: 0 8px; margin-left: -8px;
}
fieldset.block.danger { border-left: 3px solid var(--status-crit); border-radius: 0 10px 10px 0; }
.field { margin-top: 16px; }
.field label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 6px; }
.field label small { font-weight: 400; color: var(--ink-3); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field select, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 12px;
}
.field textarea { min-height: 74px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field .hint { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 5px; }
.field .error { font-size: var(--fs-xs); color: var(--status-crit); font-weight: 600; margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ============ landing ============ */
.hero { padding: 72px 0 56px; max-width: 640px; }
.hero h1 { font-size: 44px; line-height: 1.12; margin: 14px 0 18px; }
.hero p.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 28px; max-width: 56ch; }
.hero .cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero .price-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 14px; }
.trust-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--line); border-block: 1px solid var(--line);
  margin: 26px -40px 0;
}
.trust-strip div { background: var(--paper); padding: 18px 24px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.trust-strip b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 3px; font-size: var(--fs-sm); }

/* "Dla kogo / czego nie robi" — two framed columns; sets expectations pre-purchase. */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.audience > div { background: var(--surface); padding: 22px 24px; }
.audience h3 { font-size: var(--fs-lead); margin-bottom: 10px; }
.audience ul { margin: 0; padding-left: 20px; }
.audience li { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; margin: 7px 0; }
.audience strong { color: var(--ink); font-weight: 600; }
.audience .for li::marker { color: var(--status-good); }
.audience .not li::marker { color: var(--ink-3); }
@media (max-width: 640px) { .audience { grid-template-columns: 1fr; } }
.section { padding: 56px 0 0; }
.section > .eyebrow { display: inline-block; margin-bottom: 8px; }
.section > h2 { font-size: 28px; margin-bottom: 8px; }
.section > .sub { color: var(--ink-2); font-size: var(--fs-body); margin: 0 0 28px; line-height: 1.55; }
/* blok autorski (landing „Dlaczego to zbudowałem") — lewa krawędź akcentu = „głos", §3 */
.founder { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; padding: 30px 34px; max-width: 720px; }
.founder p { font-family: var(--serif); font-size: 17px; line-height: 1.62; color: var(--ink); margin: 0 0 16px; }
.founder p:last-of-type { margin-bottom: 22px; }
.founder .sig { font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-3); border-top: 1px solid var(--line-soft); padding-top: 16px; margin: 0; }
.founder .sig b { color: var(--ink-2); font-weight: 600; }
.deliv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.deliv { padding: 18px 20px; }
.deliv h3 { font-size: var(--fs-lead); margin-bottom: 6px; }
.deliv p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.how { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; counter-reset: how; }
.how > div { counter-increment: how; }
.how > div::before {
  content: counter(how, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent);
  display: block; margin-bottom: 8px; letter-spacing: .06em;
}
.how b { display: block; font-size: var(--fs-ui); margin-bottom: 4px; }
.how p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.price-card { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; }
.price-card .left { padding: 30px 34px; }
.price-card .left h3 { font-size: 22px; margin-bottom: 6px; }
.price-card .left p { color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.55; margin: 0 0 16px; }
.price-card ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; }
.price-card li { font-size: var(--fs-sm); color: var(--ink-2); padding: 4px 0 4px 20px; position: relative; break-inside: avoid; }
.price-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.price-card .right {
  background: var(--wash); border-left: 1px solid var(--line);
  padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.price-card .amount { font-family: var(--serif); font-size: 42px; color: var(--ink); }
.price-card .amount small { font-size: var(--fs-body); color: var(--ink-3); font-family: var(--sans); }
.price-card .right .fine { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq > div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.faq b { display: block; font-size: var(--fs-body); margin-bottom: 5px; font-family: var(--serif); font-weight: 600; }
.faq p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.faq-page { max-width: 760px; margin-inline: auto; }
.faq-page h1 { font-size: 32px; }
.faq-page h2 { font-size: 20px; margin: 40px 0 6px; }

/* ============ orders ============ */
.order-layout { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; margin-top: 30px; }
.summary { position: sticky; top: 20px; padding: 22px 24px; }
.summary h3 { font-size: var(--fs-lead); margin-bottom: 14px; }
.sumline { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-2); padding: 7px 0; gap: 10px; }
.sumline b { color: var(--ink); font-weight: 600; text-align: right; }
.sumline.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 13px; font-size: var(--fs-body); }
.sumline.total b { font-family: var(--serif); font-size: 20px; }
.summary .btn { width: 100%; justify-content: center; margin-top: 16px; }
.summary .fine { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.55; margin: 12px 0 0; }
.privacy-mini { background: var(--wash); border-radius: 6px; padding: 12px 14px; margin-top: 16px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55; }
.privacy-mini b { color: var(--ink); }

/* coupon (order summary). Colour dictionary §1: good = active discount,
   warn = fragment notice. */
.coupon { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.coupon-label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 7px; }
.coupon-input-row { display: flex; flex-direction: column; gap: 8px; }
.coupon-input-row input {
  width: 100%; font: inherit; font-size: var(--fs-ui); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 12px; text-transform: uppercase; letter-spacing: .02em;
}
.coupon-input-row input::placeholder { text-transform: none; letter-spacing: normal; color: var(--ink-3); }
.coupon-input-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.coupon-input-row .btn { width: 100%; margin-top: 0; }  /* overrides .summary .btn */
.coupon-hint { font-size: var(--fs-2xs); color: var(--ink-3); margin: 7px 0 0; line-height: 1.5; }
.coupon-hint b { color: var(--ink-2); font-weight: 600; }
.coupon-chip {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border: 1px solid var(--status-good); border-radius: 8px; padding: 9px 12px;
}
.coupon-chip .cc-code { font-family: var(--mono); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.coupon-chip .cc-status { font-size: var(--fs-2xs); color: var(--status-good-text); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.coupon-chip .cc-remove { margin-left: auto; background: none; border: none; color: var(--ink-3); font-size: 18px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.coupon-chip .cc-remove:hover { color: var(--status-crit); }
.coupon-warn {
  margin-top: 12px; border: 1px solid var(--status-warn); background: var(--wash);
  border-radius: 8px; padding: 12px 14px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.55;
}
.coupon-warn b { color: var(--ink); font-weight: 600; }
.coupon-warn .cw-head { display: block; color: var(--ink); font-weight: 700; font-size: var(--fs-sm); margin-bottom: 4px; }
/* crit sibling of .coupon-warn — a real alert box for a rejected code / failed
   request (dictionary §1: crit = błąd). Was plain text because `.field .error`
   is a descendant selector and both classes sat on one element. */
.coupon-alert {
  margin-top: 12px; border: 1px solid var(--status-crit); background: var(--wash);
  border-radius: 8px; padding: 10px 14px; font-size: var(--fs-xs); color: var(--ink); line-height: 1.5;
}
.coupon-alert b { color: var(--ink); font-weight: 700; }
.coupon-ack { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink); line-height: 1.5; cursor: pointer; }
.coupon-ack input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--accent); flex: none; }
.summary .sumline .discount { color: var(--status-good-text); font-weight: 600; }
.free-note { font-size: var(--fs-2xs); color: var(--status-good-text); font-weight: 600; margin: 6px 0 0; }
/* inline billing box: confirmation after an AJAX save */
.saved-note { font-size: var(--fs-sm); color: var(--status-good-text); font-weight: 600; margin: 4px 0; }

/* fragment (coupon) report: honesty banner in the masthead + closing upsell */
.fragment-banner {
  margin-top: 16px; border: 1px solid var(--status-warn); background: var(--wash);
  border-radius: 8px; padding: 11px 16px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5;
}
.fragment-banner b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.fragment-upsell { margin: 48px auto 0; padding: 28px 20px 8px; border-top: 1px solid var(--line); text-align: center; }
.fragment-upsell h3 { font-size: var(--fs-h2); margin-bottom: 8px; }
.fragment-upsell p { font-size: var(--fs-ui); color: var(--ink-2); line-height: 1.6; max-width: 60ch; margin: 0 auto 18px; }

.dropzone {
  border: 1.5px dashed var(--c-axis); border-radius: 8px;
  background: var(--paper); padding: 22px;
  display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap;
}
.dropzone.accepted { border-style: solid; border-color: var(--status-good); }
.dropzone.rejected { border-style: solid; border-color: var(--status-crit); }
.file-icon {
  width: 42px; height: 52px; border-radius: 4px; flex: none;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--fs-nano); color: var(--ink-2); font-weight: 700;
}
.dropzone .meta { flex: 1; min-width: 200px; }
.dropzone .meta b { font-size: var(--fs-ui); display: block; }
.dropzone .meta span { font-size: var(--fs-xs); color: var(--ink-2); display: block; }
.dropzone .meta .okline { color: var(--status-good-text); font-weight: 600; margin-top: 3px; }
.dropzone .meta .errline { color: var(--status-crit); font-weight: 600; margin-top: 3px; }
.dropzone .swap { margin-left: auto; }
.file-note { font-size: var(--fs-xs); color: var(--ink-3); margin: 10px 0 0; }
.err-help { flex-basis: 100%; background: var(--wash); border-radius: 6px; padding: 13px 16px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
.err-help b { color: var(--ink); }

.orders-head { display: flex; align-items: end; justify-content: space-between; padding-top: 38px; margin-bottom: 22px; }
table.orders { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.orders th {
  text-align: left; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; padding: 12px 18px;
  border-bottom: 1px solid var(--line); background: var(--wash);
}
table.orders td { padding: 15px 18px; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); color: var(--ink-2); }
table.orders tr:last-child td { border-bottom: none; }
table.orders td.t-title { color: var(--ink); font-weight: 600; }
table.orders td.t-title .t-link { color: var(--ink); text-decoration: none; }
table.orders td.t-title .t-link:hover { color: var(--accent); text-decoration: underline; }
table.orders td.t-title small { display: block; font-weight: 400; color: var(--ink-3); font-family: var(--mono); font-size: var(--fs-2xs); margin-top: 2px; }
table.orders td.num { font-variant-numeric: tabular-nums; }

/* ============ payment confirm ============ */
.confirm-wrap { min-height: 460px; display: grid; place-items: center; padding: 60px 40px; }
.confirm { max-width: 480px; text-align: center; padding: 44px 44px 38px; }
.checkmark {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--status-good); color: #fff;
  display: grid; place-items: center; margin: 0 auto 20px;
  font-size: var(--fs-num); font-weight: 700;
}
.confirm h1 { font-size: 27px; margin-bottom: 10px; }
.confirm .ordno { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: .04em; }
.confirm p { color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.6; margin: 14px 0 24px; }
.confirm .btns { display: flex; gap: 10px; justify-content: center; }

/* ============ order detail ============ */
.detail-head { padding-top: 38px; display: flex; align-items: start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.crumb { font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: 10px; }
.crumb a { color: var(--ink-3); text-decoration: none; font-weight: 400; }
.crumb a:hover { color: var(--accent); }
.report-topbar .crumb { margin-bottom: 0; }
.detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; margin-top: 28px; }
.stages { padding: 24px 26px; }
.stages h3 { font-size: var(--fs-lead); margin-bottom: 4px; }
.eta { font-size: var(--fs-xs); color: var(--ink-2); margin: 0 0 18px; }
.eta b { color: var(--ink); }
.side-card { padding: 18px 20px; margin-bottom: 16px; }
.side-card h4 { margin: 0 0 10px; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.kv { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 5px 0; color: var(--ink-2); gap: 12px; }
.kv b { color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.kv .mono { font-family: var(--mono); font-size: var(--fs-xs); }

/* ============ progress timeline ============ */
ol.stage-list { list-style: none; margin: 0; padding: 0; }
ol.stage-list li { display: flex; gap: 14px; align-items: flex-start; padding: 0 0 22px; position: relative; }
ol.stage-list li::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px;
  width: 2px; background: var(--line);
}
ol.stage-list li:last-child { padding-bottom: 4px; }
ol.stage-list li:last-child::before { display: none; }
.st-dot {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: var(--wash); border: 2px solid var(--line); color: transparent;
  position: relative; z-index: 1;
}
li.done .st-dot { background: var(--ink); border-color: var(--ink); color: var(--paper); }
li.current .st-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
li.paused .st-dot { background: var(--surface); border-color: var(--status-crit); color: var(--status-crit); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 var(--accent-wash);} 50% { box-shadow: 0 0 0 6px var(--accent-wash);} }
li.current .st-dot { animation: pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { li.current .st-dot { animation: none; } }
.st-body b { display: block; font-size: var(--fs-ui); color: var(--ink); }
li.todo .st-body b { color: var(--ink-3); font-weight: 500; }
.st-body span { font-size: var(--fs-xs); color: var(--ink-3); }
li.current .st-body span { color: var(--accent); font-weight: 600; }
li.paused .st-body span { color: var(--status-crit); font-weight: 600; }

.alert {
  border: 1px solid var(--line); border-left: 3px solid var(--status-serious);
  background: var(--surface); border-radius: 0 8px 8px 0;
  padding: 18px 22px; margin: 0 0 20px;
}
.alert .a-title { display: flex; gap: 9px; align-items: center; font-size: var(--fs-body); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.alert .a-title .a-ico { color: var(--status-serious); font-size: var(--fs-lead); }
.alert p { margin: 6px 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; max-width: 64ch; }
.alert p b { color: var(--ink); }

/* ============ account ============ */
.account-layout { max-width: 620px; margin-top: 30px; }
.verified-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-2xs); font-weight: 700; color: var(--status-good-text); margin-left: 8px; }
.block .desc { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; margin: 4px 0 0; max-width: 60ch; }

/* ============ auth ============ */
.auth-wrap { min-height: 520px; display: grid; place-items: center; padding: 60px 40px; }
.auth { width: 100%; max-width: 400px; padding: 36px 38px 32px; }
.auth h1 { font-size: 25px; margin: 0 0 4px; }
.auth .sub { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 8px; }
.auth .btn { width: 100%; justify-content: center; margin-top: 18px; }
.auth .below { text-align: center; font-size: var(--fs-sm); color: var(--ink-2); margin-top: 18px; }
.auth .forgot { display: block; text-align: right; font-size: var(--fs-xs); margin-top: 7px; }
.auth-trust { text-align: center; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 16px; line-height: 1.55; }
.agree { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 16px; line-height: 1.5; }
.agree input { accent-color: var(--accent); margin-top: 2px; flex: none; }
.agree span { flex: 1; min-width: 0; }
.inbox-ico {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto 14px;
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center; font-size: 20px;
}
.auth.centered { text-align: center; }
.form-errors {
  background: var(--accent-wash); border: 1px solid var(--accent);
  border-radius: 6px; padding: 10px 14px; margin-top: 14px;
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.5;
}
.flash {
  border-radius: 6px; padding: 10px 14px;
  font-size: var(--fs-sm); color: var(--ink); line-height: 1.5;
  background: var(--wash); border: 1px solid var(--line);
}
.flash.success { border-color: var(--status-good); }
.flash.error { background: var(--accent-wash); border-color: var(--accent); }

/* Django help_text can be a <ul> (e.g. password rules) — match .hint styling */
.field .hint ul { margin: 5px 0 0; padding-left: 16px; }
.field .hint, .field .hint li { font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.5; }

/* ============ report ============ */
.report-wrap { max-width: 1040px; margin: 0 auto; padding: 46px 40px 70px; }
.report-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.report-masthead { border-bottom: 3px double var(--c-axis); padding-bottom: 22px; margin-bottom: 34px; }
.report-masthead .row { display: flex; justify-content: space-between; align-items: start; gap: 20px; flex-wrap: wrap; }
.report-masthead h1 { font-size: var(--fs-h1); margin: 10px 0 6px; }
.report-masthead .meta { font-size: var(--fs-sm); color: var(--ink-2); }
.report-masthead .meta span { margin-right: 18px; }
.report-masthead .meta .mono { font-family: var(--mono); font-size: var(--fs-xs); }
.report-body { font-family: var(--serif); font-size: var(--fs-body); line-height: 1.65; color: var(--ink); }
/* author decision: report text fills the full content width, no measure caps */
.rsec { margin-top: 42px; }
/* sekcja w kadrze z białym tłem — jak .chapter-rhythm-card (wykresy rytmu,
   obecność postaci). Reużywalny modyfikator, spójny dark-mode z tokenów. */
.rsec.boxed { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
/* section title is now h3 (h2 belongs to the group divider .rgroup-label);
   visual size is unchanged — driven by class/position, not the tag */
.rsec > h3 { font-size: var(--fs-h2); margin-bottom: 12px; }
.persona {
  border-left: 3px solid var(--accent);
  background: var(--surface); border-radius: 0 8px 8px 0;
  padding: 18px 22px; margin: 18px 0;
}
.persona .who { font-family: var(--sans); font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.persona p { margin: 8px 0; font-size: var(--fs-body); font-style: italic; color: var(--ink); }
table.rtable {
  width: 100%; border-collapse: collapse; font-family: var(--sans);
  font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; margin: 16px 0;
}
table.rtable th { text-align: left; font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--wash); font-weight: 600; }
table.rtable td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); vertical-align: top; }
table.rtable tr:last-child td { border-bottom: none; }
table.rtable td:first-child { color: var(--ink); font-weight: 600; }
table.rtable td.num { font-variant-numeric: tabular-nums; text-align: right; }
.author-note {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
  border: 1px solid var(--line); border-left: 3px solid var(--status-warn);
  border-radius: 8px; background: var(--wash); padding: 12px 16px; margin: 10px 0 18px;
}
.evidence-note {
  font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6;
  border-top: 1px solid var(--line); margin-top: 46px; padding-top: 18px;
}
/* Forward-looking notice (diagnoza ≠ korekta; następny krok). Accent left
   edge = akcja/link, zgodnie z §3 (bordo dla akcji i odnośników). */
.next-step {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--wash); padding: 13px 16px; margin: 22px 0 0;
}
.next-step b { color: var(--ink); }
.next-step a { display: inline-block; margin-top: 5px; font-weight: 600; }
/* Top-of-report orientation ("nastaw się") — same accent-edge callout, sits
   between TOC and the first group. */
.orientation {
  font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--wash); padding: 13px 16px; margin: 0 0 30px;
}
.orientation b { color: var(--ink); }
.orientation a { font-weight: 600; white-space: nowrap; }

/* --- report v2 components (design sign-off 2026-07-05) ------------------- */
/* A · claim rows: one line = one thesis; the row is the fold */
.claims2 { border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; margin: 10px 0; }
.claims2 details.claim-row { border-bottom: 1px solid var(--line-soft); }
.claims2 details.claim-row:last-child { border-bottom: none; }
.claims2 .claim-row summary { display: grid; grid-template-columns: 92px 1fr auto; align-items: baseline; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.claims2 .claim-row summary::-webkit-details-marker { display: none; }
.claims2 .claim-row summary:hover { background: var(--wash); }
.claims2 .claim-row[open] summary { background: var(--wash); }
.c-loc { font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-3); white-space: nowrap; }
.c-thesis { font-size: var(--fs-body); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.claim-row[open] .c-thesis { -webkit-line-clamp: unset; }
.c-side { display: flex; gap: 6px; align-items: center; }
.c-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.c-dot.high { background: var(--status-good); }
.c-dot.medium { background: var(--status-warn); }
.c-dot.low { background: var(--ink-3); }
.c-body { padding: 2px 14px 14px 118px; font-size: var(--fs-ui); color: var(--ink-2); }
.c-body blockquote { margin: 8px 0; padding-left: 12px; border-left: 2px solid var(--line); font-style: italic; }
.c-fix { font-family: var(--sans); font-size: var(--fs-xs); background: var(--accent-wash); border-radius: 8px; padding: 8px 12px; margin-top: 8px; }
details.claims-more > summary { font-family: var(--sans); font-size: var(--fs-xs); color: var(--accent); padding: 10px 14px; cursor: pointer; list-style: none; }
details.claims-more > summary::-webkit-details-marker { display: none; }
@media (max-width: 720px) { .claims2 .claim-row summary { grid-template-columns: 1fr auto; } .c-loc { display: none; } .c-body { padding-left: 14px; } }

/* B · line-edits dashboard cards */
.lecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-family: var(--sans); margin: 12px 0; }
.lecard { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.lecard .num { font-size: var(--fs-num); font-weight: 700; line-height: 1.1; }
.lecard .num small { font-size: var(--fs-sm); font-weight: 400; color: var(--ink-3); }
.lecard h4 { margin: 2px 0 6px; font-size: var(--fs-sm); }
.lecard p { margin: 0 0 8px; font-size: var(--fs-2xs); color: var(--ink-3); line-height: 1.45; max-width: none; }
.lecard .links { font-size: var(--fs-xs); }
.lecard.crit { border-left: 3px solid var(--status-crit); }
.lecard.warn { border-left: 3px solid var(--status-warn); }
.lecard.ok { border-left: 3px solid var(--status-good); }
@media (max-width: 880px) { .lecards { grid-template-columns: 1fr 1fr; } }

/* per-chapter craft summaries inside folds (attribution / maniery / szlif) */
.fold-hint { color: var(--ink-3); font-weight: 400; }
.fold-note { font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-3); margin: 8px 0 0; }
ul.polish-list { margin: 8px 0 0; padding: 0 0 0 2px; list-style: none; }
ul.polish-list li { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; margin: 6px 0; }
ul.polish-list li b { color: var(--ink); font-weight: 600; }
ul.att-quotes { margin: 8px 0 0; padding: 0 0 0 2px; list-style: none; }
ul.att-quotes li { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; margin: 6px 0; font-style: italic; }
ul.att-quotes .loc { font-style: normal; margin-right: 6px; }

/* secondary: one quiet context footer (metrics + threads + polish link) */
.ch-context { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-xs); color: var(--ink-2); align-items: baseline; }
.ch-context .cx-item { display: inline-flex; gap: 6px; align-items: baseline; }
.ch-context .cx-k { font-family: var(--sans); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); }
.ch-context .cx-item b { color: var(--ink); font-weight: 600; }
.ch-context .arw { color: var(--series-1); font-weight: 700; font-size: var(--fs-sm); line-height: 1; }
.ch-context .arw.flat { color: var(--c-muted); }
.ch-context .cx-sep { flex: 0 0 1px; align-self: stretch; background: var(--line-soft); }
.ch-context .cx-polish { color: var(--ink-3); }
@media (max-width: 720px) { .ch-context .cx-sep { display: none; } }

/* D2 · „Rozdział po rozdziale" v3 (rework „mapa sygnałów", 2026-07-24):
   sekcje przepływowe BEZ ramki, nazwa = H3 ze sticky nagłówkiem POD .report-toc
   (top 56px, z-index < 40; stackują się natywnie). Zasada gęstości: jedna ramka
   na element, zero zagnieżdżeń — panele (ramka + --surface), w środku płasko.
   Zastępuje accordion .chap2. */
.ch-index { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; padding: 12px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-family: var(--sans); }
.ch-index > span { margin-right: 4px; color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ch-index a, .ch-index a:visited { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.ch-index a:hover { border-color: var(--accent); color: var(--accent); }

.chapter { scroll-margin-top: 48px; }
.chapter-head { position: sticky; top: 44px; z-index: 20; display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 13px 0 11px; background: var(--paper); border-bottom: 2px solid var(--accent); box-shadow: 0 9px 14px -13px rgba(20, 16, 10, .5); }
.chapter-head-main { flex: 1 1 340px; min-width: 0; }
.chapter-nav { display: inline-flex; align-items: baseline; gap: 8px; flex: none; font-family: var(--sans); font-size: var(--fs-sm); }
.chapter-nav a, .chapter-nav a:visited { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-weight: 600; text-decoration: none; white-space: nowrap; }
.chapter-nav a:hover { border-color: var(--accent); color: var(--accent); }
.chapter-nav .chapter-nav-off { padding: 4px 11px; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--ink-3); opacity: .5; white-space: nowrap; }

/* „Rytm zdań w rozdziale" — kadr z białym tłem (report_rhythm_sentences.js) */
.chapter-rhythm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-top: 22px; }
.chapter-rhythm-card .cr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chapter-rhythm-card h4 { margin: 0; font-family: var(--serif); font-size: var(--fs-lead); font-weight: 600; color: var(--ink); }
.chapter-rhythm-card .cr-sub { margin: 5px 0 12px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; max-width: 115ch; }
.chapter-rhythm-card .cr-csv { flex: none; white-space: nowrap; }
.chapter-rhythm-card .cr-chart { cursor: default; }
.chapter-rhythm-card .flat-hit { cursor: pointer; }
.chapter-rhythm-card svg text { font-family: var(--sans); }
.cr-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 10px; }
.cr-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.cr-legend .crk-line { background: var(--series-1); }
.cr-legend .crk-flat { background: var(--status-warn); opacity: .35; }
.cr-legend .crk-scene { background: var(--line); }
.rhythm-sent-tip { position: fixed; display: none; z-index: 50; max-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); pointer-events: none; }
.rhythm-sent-tip .rst-hdr { color: var(--ink); font-weight: 600; display: block; margin-bottom: 5px; font-size: var(--fs-2xs); letter-spacing: .02em; }
.rhythm-sent-tip .rst-q { color: var(--ink); font-style: italic; }
.chapter-head h3 { margin: 0; font-family: var(--serif); font-size: var(--fs-num); line-height: 1.15; font-weight: 600; color: var(--ink); }
.chapter-role { margin: 3px 0 0; color: var(--ink-2); font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.45;}
.chapter-content { padding-top: 20px; }
.chapter-content > h4 { margin: 24px 0 10px; color: var(--ink); font-family: var(--serif); font-size: var(--fs-body); font-weight: 600; }
.chapter-end { border-top: 1px dashed var(--line); margin: 36px 0 0; }
.chapter-list .chapter:last-child .chapter-end { display: none; }

/* panele warsztatu (jedna ramka + subtelne tło; w środku płasko) */
.craft-fold { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--surface); }
.craft-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 9px; padding: 12px 15px; color: var(--ink); font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; }
.craft-fold > summary::-webkit-details-marker { display: none; }
.craft-fold > summary::before { content: "\203A"; color: var(--ink-3); font-weight: 700; transition: transform .15s ease; }
.craft-fold[open] > summary::before { transform: rotate(90deg); }
.craft-fold[open] > summary { border-bottom: 1px solid var(--line-soft); }
.craft-fold-body { padding: 14px 15px; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.craft-fold-body .claims2 { border: none; border-radius: 0; margin: 0; }
.craft-fold-body .claims2 details.claim-row:first-child { border-top: none; }
.craft-fold-body .att-quotes { margin: 0; padding-left: 18px; }


/* D · protect cards */

/* E · „Mapa sygnałów" — karta wejściowa + globalna lista (rework v2, Faza 1;
   triage autora — przyciski/filtry/notatki — dochodzi w Fazie 2). Słownik
   „źródło sygnału" = 4 wartości signal_type: odstępstwo/dane/konwencja/hipoteza.
   Krawędź niesie znaczenie — zero hexów, tokeny. */
.map-card { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--surface); padding: 22px; }
.map-card h3 { margin: 0 0 8px; font-size: var(--fs-h2); }
.map-card > p { margin: 0; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.65; }
.source-legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line-soft); font-family: var(--sans); }
.source-legend > span { color: var(--ink-3); font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .08em; line-height: 24px; text-transform: uppercase; }
.source-chip { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; font-family: var(--sans); font-size: var(--fs-2xs); line-height: 1; white-space: nowrap; gap: 6px; padding: 4px 9px; border: 1px solid var(--line); background: var(--wash); color: var(--ink-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.source-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.source-chip.data i { background: var(--series-1); }
.source-chip.deviation i { background: var(--series-2); }
.source-chip.hypothesis i { background: var(--status-warn); }
.source-chip.convention { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.source-chip.convention i { background: var(--accent); }
.map-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; font-family: var(--sans); }
.map-stats.cols-3 { grid-template-columns: repeat(3, 1fr); }
.map-stat { padding: 15px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--wash); }
.map-stat strong { display: block; color: var(--ink); font-size: var(--fs-num); line-height: 1.05; font-variant-numeric: tabular-nums; }
.map-stat b { display: block; margin-top: 5px; color: var(--ink); font-size: var(--fs-sm); line-height: 1.35; }
.map-stat span { display: block; margin-top: 4px; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.45; }

@media (max-width: 720px) { .map-stats { grid-template-columns: 1fr 1fr; } }

/* redesign rozdziału (makieta „Rozdział 10", 2026-07-24): profil + grupy sygnałów.
   Baza porównania i pewność zebrane RAZ (nagłówek grupy / legenda), wiersz lekki. */
.pewnosc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; margin: 10px 0 18px; font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-2); }
.pewnosc-legend .pl-label { font-weight: 700; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-2xs); }
.pewnosc-legend .pl-item { display: inline-flex; align-items: center; gap: 6px; }
.pewnosc-legend .pl-note { color: var(--ink-3); }

.ch-profil { margin: 6px 0 24px; }
.ch-profil > .eyebrow { display: block; margin-bottom: 10px; }
.ch-metrics { margin: 0; }
.ch-metrics .num.ch-tempo { color: var(--series-1); }  /* neutralny — tempo to nie ocena */
.ch-threads { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 14px; font-family: var(--sans); font-size: var(--fs-xs); }
.ch-threads .cht-label { font-weight: 700; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; font-size: var(--fs-2xs); }
.ch-threads .cht-k { font-weight: 600; color: var(--ink-3); }
.ch-threads .cht-k.open { color: var(--status-good-text); }

.sig-group { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 10px; padding: 2px 20px 6px; margin: 0 0 18px; background: var(--surface); }
.sig-group.internal_deviation { border-left-color: var(--status-serious); }
.sig-group.hypothesis { border-left-color: var(--status-warn); }
.sig-group.declared_rule { border-left-color: var(--accent); }
.sig-group.metric { border-left-color: var(--series-1); }
.sig-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 13px 0 4px; border-bottom: 1px solid var(--line-soft); }
.sig-group-name { font-family: var(--sans); font-size: var(--fs-ui); font-weight: 700; color: var(--ink); }
.sig-group-basis { margin-left: auto; font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-3); }

.sig-row { padding: 14px 20px; margin: 0 -20px; border-bottom: 1px solid var(--line-soft); }
.sig-group .sig-row:last-child { border-bottom: none; }
.sig-row-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.sig-row .c-loc { font-family: var(--mono); color: var(--ink-2); background: var(--wash); border-radius: 6px; padding: 2px 8px; }
.sig-row .c-thesis { margin: 0; color: var(--ink); font-size: var(--fs-body); line-height: 1.55; display: block; -webkit-line-clamp: unset; }
.sig-conf { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.sig-row .c-fix { margin: 10px 0 0; }
.sig-evidence { margin-top: 9px; }
.sig-evidence summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; }
.sig-evidence summary::-webkit-details-marker { display: none; }
.sig-evidence summary::after { content: "\2192"; }
.sig-evidence[open] summary::after { content: "\2191"; }
.sig-evidence-body { padding: 8px 0 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.55; }
.sig-evidence blockquote { margin: 8px 0 0; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink); font-family: var(--serif); font-size: var(--fs-body); font-style: italic; }
@media (max-width: 720px) { .sig-conf { margin-left: 0; } .sig-group-basis { margin-left: 0; flex-basis: 100%; } }

.craft-block { margin-top: 40px; border-top: 2px solid var(--accent); padding-top: 18px; }
.craft-block > h4 { font-family: var(--serif); font-size: var(--fs-lead); font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.craft-block > .craft-sub { font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-3); margin: 0 0 18px; }
.craft-szlif-label { display: block; margin: 20px 0 10px; }
.ch-szlif { margin: 0; }
/* neutralny callout opisowy (np. „Elementy konsekwentne") — krawędź neutralna,
   odróżnia od bordo („jak czytać") i bursztynu („to Twoja książka") */
.consist-note { border: 1px solid var(--line); border-left: 3px solid var(--ink-3); background: var(--wash); border-radius: 10px; padding: 14px 16px; margin-top: 18px; font-family: var(--sans); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-2); }
.consist-note b { color: var(--ink); }

/* 0 · report group nav */
.report-toc { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; margin-bottom: 6px; background: var(--paper); border-bottom: 1px solid var(--line-soft); font-family: var(--sans); font-size: var(--fs-xs); }
.report-toc-links { display: flex; gap: 8px; flex-wrap: wrap; }
.report-toc a, .report-toc a:visited { color: var(--ink-2); text-decoration: none; padding: 4px 12px; border: 1px solid var(--line); border-radius: 20px; transition: color .15s, border-color .15s; }
.report-toc a:hover { color: var(--accent); border-color: var(--accent); }
.rgroup { scroll-margin-top: 48px; }
/* group divider = the report's <h2> (outline: h1 title > h2 group > h3 section >
   h4 sub-head). Prominent department opener: accent rule + large serif title,
   sized ABOVE sections (26 > 21) so visual hierarchy matches the semantics.
   Generous margins separate it clearly from the block above and below. */
.rgroup-label {
  font-family: var(--serif); font-size: var(--fs-num); font-weight: 600;
  color: var(--accent); letter-spacing: normal; text-transform: none;
  border-bottom: 2px solid var(--accent); padding-bottom: 12px; margin: 64px 0 0;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* --- global tooltip component (data-tip attribute + static/js/tooltip.js) --- */
.tooltip-pop {
  position: absolute; z-index: 60; max-width: 340px; padding: 8px 12px;
  background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 8px 8px 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
  font-family: var(--sans); font-size: var(--fs-xs); line-height: 1.5; pointer-events: none;
}
.tooltip-pop[hidden] { display: none; }
[data-tip] { cursor: help; }

/* --- dense chronology map: natural size, horizontal scroll (todo #25) --- */
.chart-scroll { overflow-x: auto; }

/* custom horizontal scrollbars for scrollable containers (charts, heatmaps, wide
   tables on mobile) — NEUTRAL thumb (ink-family grey) on a subtle track. Chrome
   shouldn't compete with content: an accent-red bar clashed with the blue charts
   it sits under. WebKit uses the pseudo-elements; Firefox reads scrollbar-width/color. */
.chart-scroll, .heat, table.rtable { scrollbar-width: thin; scrollbar-color: var(--ink-3) var(--line-soft); }
.chart-scroll::-webkit-scrollbar,
.heat::-webkit-scrollbar,
table.rtable::-webkit-scrollbar { height: 10px; }
.chart-scroll::-webkit-scrollbar-track,
.heat::-webkit-scrollbar-track,
table.rtable::-webkit-scrollbar-track { background: var(--line-soft); border-radius: 999px; }
.chart-scroll::-webkit-scrollbar-thumb,
.heat::-webkit-scrollbar-thumb,
table.rtable::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 999px; }
.chart-scroll::-webkit-scrollbar-thumb:hover,
.heat::-webkit-scrollbar-thumb:hover,
table.rtable::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
.chart-scroll::-webkit-scrollbar-button,
.heat::-webkit-scrollbar-button,
table.rtable::-webkit-scrollbar-button { display: none; }
.chart-scroll .rchart { width: auto; max-width: none; }
.rchart circle.unclear-dot { fill: var(--status-warn); }
.rchart text.unclear { fill: var(--status-warn); font-weight: 700; }
.unclear-legend { color: var(--status-warn); font-weight: 700; }

/* --- per-chapter progress bar (order progress page) --- */
.st-bar { display: block; height: 4px; margin-top: 6px; max-width: 340px; background: var(--wash); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; }
.st-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s ease; }

/* --- pre-payment structure preview --- */
.structure-preview { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.structure-preview .sp-line { margin: 4px 0; }
/* Parsing caveats are informational ("how we read your file"), not alarms.
   One calm author-note panel (§3: status-warn left border = author-note)
   instead of N full-border boxes stacked. */
.structure-preview .sp-notes { margin: 10px 0; padding: 11px 16px; border-left: 3px solid var(--status-warn); background: var(--wash); border-radius: 8px; }
.structure-preview .sp-notes-head { display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-sm); margin-bottom: 6px; }
.structure-preview .sp-notes ul { margin: 0; padding-left: 18px; }
.structure-preview .sp-notes li { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.55; margin: 3px 0; }
.structure-preview .sp-notes li::marker { color: var(--status-warn); }
.structure-preview .sp-table { font-size: var(--fs-sm); margin-top: 8px; }
.structure-preview .sp-note { font-size: var(--fs-xs); color: var(--ink-3); margin: 8px 0 4px; }
.structure-preview .sp-skipped td { color: var(--ink-3); }

/* ============ responsive ============ */
@media (max-width: 880px) {
  .page, .sitenav, .sitefooter { padding-left: 22px; padding-right: 22px; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* nav wraps instead of clipping links on narrow screens */
  .sitenav { flex-wrap: wrap; gap: 10px 18px; }
  .navlinks { flex-wrap: wrap; gap: 12px 16px; }
  /* wide report tables scroll inside themselves instead of pushing the page
     sideways; narrow (2-col) tables stay full-width */
  table.rtable { display: block; overflow-x: auto; }
  /* ...but a scrolling table with no floor collapses its prose columns into
     slivers ("Kim jest"). Give the cast table per-column min widths so the
     block scrolls to readable columns instead of squeezing. */
  table.rtable.cast td, table.rtable.cast th { min-width: 230px; }
  table.rtable.cast td:first-child, table.rtable.cast th:first-child { min-width: 85px; }
  /* long unbreakable filenames (Nazwa_Pliku_Autora…) must wrap, not blow out
     the page: let the flex child shrink and break the word */
  .report-masthead .row > div { min-width: 0; }
  .report-masthead h1 { overflow-wrap: anywhere; }
}

/* --- report v2 (task 6.5): gatekeeper-first layout --- */
/* sub-heads are now h4 (below the section-title h3). h4 is not in the base
   `h1,h2,h3` rule, so set serif/weight explicitly here to keep them identical.
   Direct-child scope keeps `.lecard h4` (card titles, sans) out of this. */
.rsec > h4 { font-family: var(--serif); font-weight: 600; font-size: var(--fs-body); margin: 20px 0 8px; color: var(--ink); }
.claim { border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 16px; margin: 10px 0; }
.claim p { margin: 0 0 6px; font-size: var(--fs-ui); color: var(--ink); }
.claim blockquote { margin: 6px 0; padding-left: 12px; border-left: 2px solid var(--line); font-style: italic; color: var(--ink-2); font-size: var(--fs-sm); }
.claim-meta { font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.badge { font-style: normal; border: 1px solid var(--line); border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.badge.traffic-ok, .badge.ok { border-color: var(--status-good); color: var(--status-good-text); }
.badge.traffic-warn, .badge.warn { border-color: var(--status-warn); }
.badge.traffic-crit, .badge.crit { border-color: var(--status-crit); color: var(--status-crit); }
.badge.basis { background: var(--wash); }
.claim .missing { margin: 8px 0 0 18px; font-size: var(--fs-sm); color: var(--ink-2); }
.work-order { margin: 8px 0 0 18px; font-size: var(--fs-ui); color: var(--ink-2); }
.work-order li { margin: 5px 0; }
.book-exp { margin: 12px 0; font-size: var(--fs-ui); color: var(--ink-2); }
.book-exp ul { margin: 6px 0 0 18px; }
.fallback-note { font-size: var(--fs-sm); color: var(--ink-3); font-style: italic; }
.rchart { width: 100%; height: auto; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--wash); }
.rchart polyline { stroke: var(--series-1); stroke-width: 2.5; }
.rchart polygon.band { fill: var(--series-1); opacity: .16; stroke: none; }
.hook { font-size: var(--fs-ui); color: var(--ink-2); margin-top: 10px; }
.bar-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bar-chart { border: 1px solid var(--line-soft); border-radius: 8px; padding: 14px; display: flex; align-items: flex-end; gap: 10px; min-height: 120px; flex-wrap: wrap; }
.bar-chart h3 { width: 100%; margin: 0 0 10px; }
.bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 90px; width: 34px; }
.bar i { display: block; width: 22px; background: var(--series-1); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar span { font-family: var(--sans); font-size: var(--fs-micro); color: var(--ink-3); margin-top: 4px; }
ul.lint { margin: 6px 0 0 18px; font-size: var(--fs-sm); color: var(--ink-2); }
ul.lint li { margin: 5px 0; }
.lint-summary { font-size: var(--fs-sm); color: var(--ink-2); }
.loc { color: var(--ink-3); font-family: var(--sans); font-size: var(--fs-2xs); }
table.rtable tr.crit td { color: var(--status-crit); }
table.rtable td.q { font-style: italic; font-size: var(--fs-xs); }
.chapter-read { border: 1px solid var(--line-soft); border-radius: 8px; margin: 10px 0; padding: 0 16px; }
.chapter-read summary { cursor: pointer; padding: 12px 0; font-size: var(--fs-ui); color: var(--ink); }
.chapter-read[open] summary { border-bottom: 1px solid var(--line-soft); }
.chapter-read > *:last-child { margin-bottom: 14px; }
@media (max-width: 720px) { .bar-row { grid-template-columns: 1fr; } }

/* --- calibration round (analysis_plan §9): tooltips + chart axes --- */
.tip { cursor: help; color: var(--ink-3); font-size: var(--fs-sm); font-style: normal; }
.rchart .grid { stroke: var(--line-soft); stroke-width: 1; }
.rchart .divider { stroke: var(--c-axis); stroke-width: 1; stroke-dasharray: 4 4; }
.rchart text.axis { font-family: var(--sans); font-size: var(--fs-micro); fill: var(--c-muted); }
.rchart circle { fill: var(--series-1); }

/* --- threads timeline + cast consistency (analysis_plan §9 round 2) --- */
.badge.consist-ok { border-color: var(--status-good); color: var(--status-good-text); }
.badge.consist-warn { border-color: var(--status-warn); color: var(--ink); background: var(--wash); }
.threads { margin-top: 8px; }
.thread-row { display: grid; grid-template-columns: minmax(140px, 2fr) 3fr minmax(120px, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.thread-row:last-of-type { border-bottom: none; }
.thread-name { font-size: var(--fs-sm); color: var(--ink); }
.thread-status { font-family: var(--sans); font-size: var(--fs-2xs); color: var(--ink-3); text-align: right; }
.track { position: relative; height: 10px; background: var(--wash); border-radius: 6px; overflow: hidden; }
.track .bar { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.track .bar.closed { background: var(--status-good); opacity: .75; }
.track .bar.open { background: var(--status-warn); opacity: .8; border-right: 3px dashed var(--paper, #fff); }
@media (max-width: 640px) { .thread-row { grid-template-columns: 1fr; gap: 4px; } .thread-status { text-align: left; } }

/* --- [6.11] fold pattern + chapter chips --- */
.fold-summary { font-size: var(--fs-ui); color: var(--ink-2); margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fold-summary.ok { color: var(--ink-3); font-style: italic; }
.chip { font-family: var(--sans); font-size: var(--fs-2xs); border: 1px solid var(--line); border-radius: 20px; padding: 1px 9px; color: var(--ink-2); background: var(--wash); }
details.fold { border: 1px solid var(--line-soft); border-radius: 8px; padding: 0 14px; margin: 10px 0; }
details.fold summary { cursor: pointer; padding: 10px 0; font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); }
details.fold[open] summary { border-bottom: 1px solid var(--line-soft); }
details.fold > *:last-child { margin-bottom: 12px; }
.bar.wide { width: 76px; }
.bar.wide span { text-align: center; line-height: 1.35; }

/* --- [6.11] character heatmap + series overlay --- */
.rchart rect.flat { fill: var(--status-warn); opacity: .3; }
.rchart line.ref-line { stroke: var(--c-axis); stroke-width: 1; stroke-dasharray: 4 3; }
.rchart rect.hit { fill: var(--series-1); opacity: 0; }
.rchart rect.hit:hover { opacity: .1; }
.heat { font-family: var(--sans); font-size: var(--fs-xs); overflow-x: auto; }
.heat-row { display: flex; align-items: center; gap: 3px; padding: 2px 0; }
.heat-head { color: var(--ink-3); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .05em; }
.heat-name { flex: 0 0 150px; color: var(--ink); text-align: right; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-cell { position: relative; flex: 1 1 30px; min-width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; }
.heat-cell.ghost i { opacity: 1 !important; background: var(--wash); border: 1px dashed var(--line-soft); }
.heat-cell i { position: absolute; inset: 1px; background: var(--series-1); border-radius: 4px; opacity: 0; }
.heat-cell b { position: relative; font-weight: 600; color: var(--ink); font-size: var(--fs-micro); }
.heat-head .heat-cell { height: 18px; }
.heat-total { flex: 0 0 48px; text-align: right; color: var(--ink-3); }
/* threads map: name column carries a full thread title, the last column a
   status badge (character heatmap keeps the narrow 150/48px columns) */
.heat-threads .heat-name { flex: 0 0 300px; }
.heat-threads .heat-total { flex: 0 0 130px; }

/* --- [6.11] chronology map + thread grid/cards --- */
.rchart circle.hollow { fill: var(--paper, #fff); stroke: var(--series-1); stroke-width: 2; }
.rchart text.unclear { fill: var(--status-warn); font-weight: 600; }
.rchart text.jump { fill: var(--ink-2); font-weight: 600; }
.heat-cell.span-open i { opacity: .18 !important; background: var(--status-warn); }
.heat-cell.span-closed i { opacity: .18 !important; background: var(--status-good); }
/* open question hangs but nothing happens: faded tail after the last beat */
.heat-cell.span-tail i { opacity: .07 !important; background: var(--status-warn); }
.heat-cell b { font-size: var(--fs-nano); }
.badge.status-otwarty-zywy { border-color: var(--status-warn); }
.badge.status-otwarty-uspiony, .badge.status-porzucony { border-color: var(--status-crit); color: var(--status-crit); }
.badge.status-domkniety { border-color: var(--status-good); color: var(--status-good-text); }
.thread-card summary { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.thread-card .q { font-style: italic; color: var(--ink-3); }

/* ============================================================
   Beta (plans/beta_plan.md §7). Wszystko z tokenów — dark za darmo.
   Odwaga wydana raz: stempel. Reszta cicha.
   ============================================================ */

/* — Sygnatura: stempel korektorski „WERSJA PRÓBNA / BETA" */
.beta-stamp { display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--mono); color: var(--accent); background: var(--accent-wash);
  border: 1.5px dashed var(--accent); border-radius: 7px; padding: 9px 17px;
  transform: rotate(-3deg); line-height: 1; user-select: none; }
.beta-stamp .bs-top { font-size: var(--fs-nano); letter-spacing: .32em; font-weight: 700; padding-left: .32em; }
.beta-stamp .bs-main { font-size: 20px; letter-spacing: .30em; font-weight: 800; padding-left: .30em; }

/* — Cichy tag w nawigacji (chrome, nie bordo) */
.beta-tag { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 2px 8px; vertical-align: middle; }

/* — Pasek publiczny (zamykalny). Neutralny wash; bordowa tylko etykieta. */
.beta-strip { background: var(--wash); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; }
.beta-strip .bx-inner { max-width: 1040px; margin: 0 auto; padding: 9px 40px; display: flex; align-items: center; gap: 12px; }
.beta-strip .bx-label { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--accent); flex: none; }
.beta-strip .bx-text b { color: var(--ink); font-weight: 600; }
.beta-strip .bx-close { margin-left: auto; flex: none; background: none; border: none; color: var(--ink-3);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; cursor: pointer; }
.beta-strip .bx-close:hover { color: var(--ink); }

/* — Panel „umowa bety": uczciwe warunki nad formularzem zgłoszeń */
.beta-deal { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 22px; margin-top: 26px; }
.beta-deal .bd-item { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.beta-deal .bd-item:first-child { border-top: none; }
.beta-deal .bd-mark { font-family: var(--mono); font-weight: 800; flex: none; width: 20px; text-align: center;
  font-size: var(--fs-body); line-height: 1.5; }
.beta-deal .bd-item.ok .bd-mark { color: var(--status-good-text); }
.beta-deal .bd-item.warn .bd-mark { color: var(--status-serious); }
.beta-deal .bd-item.info .bd-mark { color: var(--accent); }
.beta-deal .bd-body b { display: block; font-size: var(--fs-ui); color: var(--ink); margin-bottom: 2px; }
.beta-deal .bd-body p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }

/* — Box zaproszenia na stronie głównej (wypełnia puste miejsce po prawej hero) */
.hero-row { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 48px; align-items: center; }
.beta-cta-card { background: var(--accent-wash); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; }
.beta-cta-card h3 { font-size: 19px; line-height: 1.2; }
.beta-cta-card p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.beta-cta-card .bc-free { font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700; color: var(--status-good-text); }
.beta-cta-card .btn { margin-top: 1px; }

/* — Nota beta w stopce raportu (rodzeństwo .next-step; lewa krawędź warn) */
.beta-note { border-left: 3px solid var(--status-warn); background: var(--wash);
  border-radius: 0 8px 8px 0; padding: 13px 16px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.6; margin-top: 14px; }
.beta-note b { color: var(--ink); }

/* — Hero strony zgłoszeń (tekst + stempel obok) + podziękowanie */
.hero-head { padding-top: 34px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.hero-head .htext { flex: 1; min-width: 280px; }
.hero-head h1 { font-size: 30px; margin-top: 10px; }
.hero-head .sub { color: var(--ink-2); font-size: var(--fs-ui); margin: 10px 0 0; line-height: 1.6; max-width: 60ch; }
.hero-head .stamp-wrap { padding-top: 14px; flex: none; }
.thanks { text-align: center; padding: 44px 24px; margin-top: 30px; }
.thanks .stamp-wrap { display: inline-block; margin-bottom: 22px; }
.thanks h2 { font-size: var(--fs-h2); }
.thanks p { color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.6; max-width: 52ch; margin: 12px auto 0; }
.thanks .below { margin-top: 22px; }

@media (max-width: 760px) {
  .hero-row { grid-template-columns: 1fr; gap: 24px; }
  .hero-head { flex-direction: column-reverse; align-items: flex-start; }
  .beta-strip .bx-inner { padding-left: 22px; padding-right: 22px; }
}

/* ===== Feedback: report survey (feedback_plan §5/§7) — tokens only ===== */
.survey { margin-top: 60px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 24px 26px; }
.survey > h3 { font-size: var(--fs-h2); margin-bottom: 4px; }
.survey .sub { font-size: var(--fs-sm); color: var(--ink-2); margin: 0 0 20px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.srow .q { font-size: var(--fs-ui); color: var(--ink); flex: 1 1 240px; }
.scale, .yn { display: inline-flex; gap: 6px; }
/* own labels — NOT the canonical .pill component (that carries its own border → double ring) */
.scale label, .yn label { position: relative; cursor: pointer; }
.scale label input, .yn label input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.scale label span, .yn label span { display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; min-width: 34px; height: 34px; padding: 0 6px; }
.yn label span { padding: 0 16px; }
.scale label:has(input:checked) span { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.yn label:has(input:checked) span { color: var(--status-good-text); background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); border-color: var(--status-good); font-weight: 600; }
.scale label input:focus-visible + span, .yn label input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.one-change { margin-top: 20px; border-left: 3px solid var(--accent); background: var(--accent-wash); border-radius: 8px; padding: 16px 18px; }
.one-change label { display: block; font-family: var(--serif); font-size: var(--fs-lead); color: var(--ink); margin-bottom: 10px; }
.one-change textarea { width: 100%; font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; min-height: 72px; }
.survey-foot { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.survey-foot .fine { font-size: var(--fs-xs); color: var(--ink-3); }
.survey-foot .save-ok { font-size: var(--fs-2xs); color: var(--status-good-text); font-weight: 600; }
.fb-prompt { margin-top: 12px; padding: 10px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px; background: var(--accent-wash); font-size: var(--fs-sm); color: var(--ink); }
.fb-prompt a { font-weight: 600; }

/* ===== Feedback: per-section reaction bar (feedback_plan §4, Wariant A) ===== */
.sfb { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line-soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sfb-label { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin-right: 2px; }
.sfb-btn { font-family: var(--sans); font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s, color .12s; }
.sfb-btn:hover { border-color: var(--ink-3); }
.sfb-btn .g { font-weight: 700; line-height: 1; }
/* active states — meaning dictionary (design-system §1), status-token tints via color-mix */
.sfb-btn.on.useful { color: var(--status-good-text); border-color: var(--status-good); background: color-mix(in srgb, var(--status-good) 14%, var(--surface)); }
.sfb-btn.on.meh { color: var(--ink); border-color: var(--ink-3); background: var(--wash); }
.sfb-btn.on.wrong { color: var(--status-crit); border-color: var(--status-crit); background: color-mix(in srgb, var(--status-crit) 13%, var(--surface)); }
.sfb-btn.on.unclear { color: var(--ink); border-color: var(--status-warn); background: color-mix(in srgb, var(--status-warn) 20%, var(--surface)); }
.sfb-note > summary { list-style: none; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.sfb-note > summary::-webkit-details-marker { display: none; }
.sfb-note > summary:hover { color: var(--accent); border-color: var(--accent); }
.sfb-note[open] { flex-basis: 100%; }
.sfb-note form { margin-top: 8px; }
.sfb-note textarea { width: 100%; font-family: var(--sans); font-size: var(--fs-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; resize: vertical; min-height: 52px; margin-bottom: 8px; }
.sfb-saved { font-size: var(--fs-2xs); color: var(--status-good-text); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .sfb-btn { transition: none; } }

/* ===== Faza 2 — triage „Mój raport" (2026-07-25) =====
   Kolory decyzji = wybór autora, nie severity: Ważne=status-good (afirmacja, jak
   „Tak" w ankiecie §4), Później=status-warn, Błąd=neutralny. Stan trzyma karta
   (data-decision); soczewka filtruje po nim po stronie klienta. */
.report-lens { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 13px; cursor: pointer; white-space: nowrap; }
.report-lens .lens-count { font-weight: 600; color: var(--ink-2); }
.report-lens .lens-switch { width: 34px; height: 20px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); position: relative; flex: none; transition: background .15s, border-color .15s; }
.report-lens .lens-switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform .15s, background .15s; }
body.myreport .report-lens { border-color: var(--status-good); color: var(--status-good-text); }
body.myreport .report-lens .lens-switch { background: color-mix(in srgb, var(--status-good) 16%, var(--surface)); border-color: var(--status-good); }
body.myreport .report-lens .lens-switch::after { transform: translateX(14px); background: var(--status-good); }

.sig-triage { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.triage-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.triage-q { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.tbtns { display: flex; gap: 7px; flex-wrap: wrap; }
.tbtn { font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap; transition: color .12s, border-color .12s, background .12s; }
.tbtn:hover { color: var(--ink); border-color: var(--ink-3); }
[data-decision="important"] .sig-triage .tbtn[data-d="important"] { color: var(--status-good-text); border-color: var(--status-good); background: color-mix(in srgb, var(--status-good) 12%, var(--surface)); font-weight: 600; }
[data-decision="later"] .sig-triage .tbtn[data-d="later"] { color: var(--ink); border-color: var(--status-warn); background: color-mix(in srgb, var(--status-warn) 14%, var(--surface)); font-weight: 600; }
[data-decision="dismissed"] .sig-triage .tbtn[data-d="dismissed"] { color: var(--ink-3); border-color: var(--line); background: var(--wash); }

.triage-note { margin-top: 9px; }
.triage-note > summary { list-style: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.triage-note > summary::-webkit-details-marker { display: none; }
.triage-note > summary::before { content: "\203A"; color: var(--ink-3); display: inline-block; transition: transform .12s; }
.triage-note[open] > summary::before { transform: rotate(90deg); }
.triage-note textarea { width: 100%; margin-top: 8px; min-height: 68px; resize: vertical; font-family: var(--sans); font-size: var(--fs-sm); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; line-height: 1.5; }
.triage-note textarea::placeholder { color: var(--ink-3); }

/* decyzja autora = subtelne TŁO karty (nie drugi pasek — grupa ma już swój,
   typowy, po lewej). Koniec „podwójnej ramki" (audyt UX 2026-07-25). */
.sig-row[data-decision="important"] { background: color-mix(in srgb, var(--status-good) 9%, var(--surface)); }
.sig-row[data-decision="later"] { background: color-mix(in srgb, var(--status-warn) 12%, var(--surface)); }

.sig-dismissed-strip { display: none; align-items: center; justify-content: space-between; gap: 14px; }
.sig-row[data-decision="dismissed"] > :not(.sig-dismissed-strip) { display: none; }
.sig-row[data-decision="dismissed"] .sig-dismissed-strip { display: flex; }
.sig-dismissed-strip .sds-text { font-size: var(--fs-sm); color: var(--ink-2); }
.sig-dismissed-strip .sds-text b { color: var(--ink); font-weight: 600; }
.sig-dismissed-strip .undo { font-size: var(--fs-sm); font-weight: 600; color: var(--accent); background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 5px 14px; cursor: pointer; }
.sig-dismissed-strip .undo:hover { border-color: var(--accent); }

.claim-row[data-decision="dismissed"] { opacity: .55; }
/* spójnie z .sig-row: decyzja triage = tło karty także w foldach warsztatu
   (claims.html). Summary trzeba nadpisać osobno, bo [open]/:hover dają --wash. */
.claims2 .claim-row[data-decision="important"],
.claims2 .claim-row[data-decision="important"] > summary,
.claims2 .claim-row[data-decision="important"][open] > summary,
.claims2 .claim-row[data-decision="important"] > summary:hover { background: color-mix(in srgb, var(--status-good) 9%, var(--surface)); }
.claims2 .claim-row[data-decision="later"],
.claims2 .claim-row[data-decision="later"] > summary,
.claims2 .claim-row[data-decision="later"][open] > summary,
.claims2 .claim-row[data-decision="later"] > summary:hover { background: color-mix(in srgb, var(--status-warn) 12%, var(--surface)); }

/* soczewka: tylko „Ważne"; puste karty/grupy/foldy/rozdziały/sekcje zwinięte (:has) */
body.myreport [data-signal-id]:not([data-decision="important"]) { display: none; }
body.myreport .sig-group:not(:has([data-decision="important"])) { display: none; }
body.myreport .craft-fold:not(:has([data-decision="important"])) { display: none; }
body.myreport .chapter:not(:has([data-decision="important"])) { display: none; }
body.myreport .rgroup:not(:has([data-decision="important"])) { display: none; }
body.myreport .craft-block:not(:has([data-decision="important"])) { display: none; }
.myreport-empty { margin: 26px 0; padding: 20px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

/* „Rytm akcji i spoczynku" — interaktywny wykres sumy kroczącej (report_rhythm.js) */
.rhythm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 6px 0 4px; }
.rhythm-head #rhythm-sub { margin: 0; }
.rhythm-reset { display: inline-flex; align-items: center; gap: 9px; flex: none; font-family: var(--sans); font-size: var(--fs-xs); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 6px 6px 13px; cursor: pointer; white-space: nowrap; }
.rhythm-reset .rhythm-sw { width: 34px; height: 20px; border-radius: 999px; background: var(--wash); border: 1px solid var(--line); position: relative; flex: none; transition: background .15s, border-color .15s; }
.rhythm-reset .rhythm-sw::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3); transition: transform .15s, background .15s; }
.rhythm-reset[aria-checked="true"] .rhythm-sw { background: color-mix(in srgb, var(--status-good) 16%, var(--surface)); border-color: var(--status-good); }
.rhythm-reset[aria-checked="true"] .rhythm-sw::after { transform: translateX(14px); background: var(--status-good); }
.rhythm-sec svg text { font-family: var(--sans); }
.rhythm-sec .rk-hit { cursor: pointer; }
.rhythm-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 12px; }
.rhythm-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; }
.rhythm-legend .rk-good { background: var(--status-good); }
.rhythm-legend .rk-rest { background: var(--series-1); }
.rhythm-legend .rk-neutral { background: var(--ink-3); }
.rhythm-legend .rk-zone { background: var(--status-warn); opacity: .35; }
.rhythm-zone-key { display: none; }
.rhythm-sec.reset-on .rhythm-zone-key { display: inline-flex; align-items: center; }
.rhythm-tip { position: fixed; display: none; z-index: 50; max-width: 340px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.5; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); pointer-events: none; }
.rhythm-tip .rk-hdr { color: var(--ink); font-weight: 600; display: block; margin-bottom: 5px; font-size: var(--fs-2xs); letter-spacing: .02em; }
.rhythm-tip .rk-why { color: var(--ink); }
.rhythm-tip .rk-fl { color: var(--ink-3); font-style: italic; display: block; margin-top: 6px; }