/* =========================================================================
   RAPORT POJAZDU — arkusz stylów (wariant „Kategorie")
   =========================================================================
   Prototyp do migracji na Ruby on Rails. Cała paleta na zmiennych CSS
   (:root = ciemny, :root.light = jasny, @media print = wydruk) — jeden punkt
   re-skinu. Font: Figtree.

   SPIS TREŚCI (kolejność w pliku ≠ kolejność na ekranie — patrz „KOLEJNOŚĆ
   SEKCJI" na końcu, reorder realizuje flex-order):
     1.  Tokeny motywu (:root / :root.light)
     2.  Reset + typografia bazowa + a11y
     3.  Scaffolding sekcji (.section / .section-head / …)
     4.  Header + Sub-nav
     5.  Hero (score-ring, spec-chipy, status-pill)
     6.  KPI + benchmark bar; panel/wykresy/legendy
     7.  Oś czasu własności i zdarzeń
     8.  Szkody + mapa stref nadwozia
     9.  Tabela badań + badge; recall callout
     10. Spec (collapsible) + wyposażenie; footer; reveal; responsywność
     11. Komponenty „data-magazine" (kategorie kolorów, pasek statystyk,
         story-callouty, flagi, wykresy, klik-strefy, ikony osi czasu)
     12. Zdjęcia: hero-photo, galeria + lightbox, panel flag
     13. Hero poziomy (final) + komponenty danych (podsumowanie, osiągi,
         karty danych, odczyty, model, producent)
     14. Print
     15. Galeria (miniatury); Emisje (Euro + CO₂ + strefy SCT)
     16. Szkody: płyta z rzutem (PNG per body_type) + pierścień stref; stany „brak danych"
     17. KOLEJNOŚĆ SEKCJI (flex-order — hack prototypu)

   PROTOTYP → RoR (do zastąpienia — szczegóły w MIGRATION.md):
     • flex-order na #top („KOLEJNOŚĆ SEKCJI") → render sekcji serwerowo w
       docelowej kolejności zamiast przestawiania CSS-em,
     • treści generowane CSS-em: .euro-step::after {content:attr(data-y)} i
       [data-tip]::after → realny tekst w markupie (kopiowalny, SEO, a11y).
   ========================================================================= */

/* Paleta marki weryfikujVIN.pl: Figtree + sygnaturowa zieleń mięty (#15cf80 / #18f186),
   slate jako tekst, amber/plate-blue jako akcenty pomocnicze. Motyw jasny = kanoniczny
   wygląd marki; ciemny = ten sam akcent na granatowym slate (tokeny slate marki). */
:root {
  /* Surfaces (dark — brand slate) */
  --bg: #0e1828;
  --bg-elevated: #15243a;
  --bg-subtle: #1e3047;
  --bg-inset: #0a1422;

  /* Text */
  --text: #e9f1ee;
  --text-muted: #93a6b5;
  --text-dim: #5a7286;

  /* Semantic — brand mint accent */
  --accent: #18f186;
  --success: #15cf80;
  /* WARNING — jedyny status z pełną triadą tokenów (żółć jest za jasna na tekst,
     a musi zostać jasna w fillach — dlatego nie wystarczy jeden token):
       --warning       → foreground: tekst / stroke / border (przyciemnia się w light)
       --warning-tint  → półprzezroczyste tło powierzchni (karty/wiersze/strefy) — sekcja Tints niżej
       --warning-fill + --warning-ink → pełny jasny akcent (ikona/kropka/pasek) + tekst NA nim
     Reguła: element .warn/alert/anom NIGDY nie sięga po --brand-yellow* (to brand chrome, nie status).
     success/danger mają tylko -tint — ich barwa działa i jako foreground, i jako fill. */
  --warning: #fae22d;
  --warning-fill: #fae22d;   /* jasny fill statusu „warn" (chip/pasek/kropka); tekst na nim = --warning-ink */
  --warning-ink: #3a2c00;    /* tekst/glif TYLKO na --warning-fill (jasny w obu motywach).
                                Na --warning-tint używaj --warning: tint jest półprzezroczysty i w ciemnym
                                motywie zostaje ciemny, więc ink daje kontrast 1.3:1 (nieczytelne). */
  --danger: #ff5b50;
  --gold: #6f9ae6;            /* plate-blue — wykres wartości (drugi akcent) */

  /* Lines */
  --neutral: #28394f;
  --border: #1d2c40;

  /* Tints (status backgrounds) */
  --success-tint: rgba(21, 207, 128, 0.12);
  --warning-tint: rgba(250, 226, 45, 0.16);
  --danger-tint: rgba(255, 91, 80, 0.12);
  --accent-tint: rgba(24, 241, 134, 0.12);

  /* przeplot zieleń/żółć */
  --brand-yellow: #fae22d;
  --brand-yellow-edge: #fca400;
  --brand-yellow-ink: #3a2c00;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px -8px rgba(0, 0, 0, 0.55);

  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;

  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: dark;
}

:root.light {
  --bg: #f5f8f7;
  --bg-elevated: #ffffff;
  --bg-subtle: #edf3f0;
  --bg-inset: #f4f8f6;

  --text: #28384a;           /* brand slate, wzmocniony dla nagłówków */
  --text-muted: #56697e;     /* brand text-secondary */
  --text-dim: #93a1b0;

  --accent: #15cf80;         /* brand main-600 — sygnatura */
  --success: #07a45c;        /* głębsza zieleń = „bezpieczne/zweryfikowane" */
  --warning: #c4ad04;        /* głęboki żółty = analog --success dla zieleni (tekst/ikona „do weryfikacji") */
  --warning-fill: #fae22d;   /* jasny fill statusu „warn" (chip/pasek/kropka) */
  --warning-ink: #7a5800;    /* tekst/glif TYLKO na --warning-fill — patrz uwaga przy motywie ciemnym */
  --danger: #e23b30;         /* brand red */
  --gold: #3a67b1;           /* brand plate-blue — wykres wartości */

  --neutral: #d8e1e6;
  --border: #e5ecef;

  --success-tint: rgba(7, 164, 92, 0.10);
  --warning-tint: rgba(250, 226, 45, 0.34);   /* brand pale yellow */
  --danger-tint: rgba(226, 59, 48, 0.10);
  --accent-tint: rgba(21, 207, 128, 0.12);

  /* przeplot zieleń/żółć — brand weryfikujVIN.pl */
  --brand-yellow: #fae22d;      /* fill: chip/kropka/segment/pasek */
  --brand-yellow-edge: #fca400; /* krawędź / żółty tekst na białym */
  --brand-yellow-ink: #7a5800;  /* tekst na żółtym wypełnieniu */

  --shadow-sm: 0 1px 2px rgba(20, 45, 35, 0.06);
  --shadow-lg: 0 14px 40px -12px rgba(20, 45, 35, 0.16);
  color-scheme: light;
}

/* ---------- Reset ----------
   Pełny reset raportu (odpowiednik Tailwind Preflight — raport nie ładuje już Tailwinda).
   Layout całego raportu zależy od tych reguł; przenieś je w całości. */
*, *::before, *::after { box-sizing: border-box; }
/* border-width:0 + border-style:solid — reguła podająca samo border-width (bez style)
   przestanie rysować krawędź, jeśli to usuniesz. */
*, *::before, *::after { border-width: 0; border-style: solid; border-color: #e5e7eb; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; line-height: 1.5; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv05' 1, 'ss01' 1, 'tnum' 1;
  transition: background .35s ease, color .35s ease;
}
/* Nagłówki celowo bez font-weight — bez własnej klasy renderują się 400. */
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.12; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
/* Bez tego przeglądarka nadaje kontrolkom 13.33px i czarny tekst. */
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
button { cursor: pointer; background-color: transparent; background-image: none; }
legend { padding: 0; }
/* Bez display:block inline-SVG siada na baseline i psuje wysokości wierszy. */
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
table { border-collapse: collapse; }
ul { margin: 0; padding: 0; list-style: none; }

.tnum { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 36px); }
/* Szerokości per-sekcja na życzenie - #historia węższa (gęsta oś czasu czyta się
   lepiej węziej), #mileage szersza (wykres przebiegu + karty właścicieli
   potrzebują więcej miejsca w poziomie). Reszta sekcji zostaje na --maxw. */
#historia.wrap { max-width: 1150px; }
#mileage.wrap { max-width: 1350px; }
#spec.wrap, #value.wrap { max-width: 1850px; }

/* ---------- A11y utilities (per HANDOFF.md) ---------- */
.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;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* elementy interaktywne dziedziczą outline z :focus-visible powyżej; tylko CTA ma złoty */
.btn-cta:focus-visible { outline-color: var(--gold); }

/* ---------- Section scaffolding ---------- */
.section { padding-block: 56px; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: none; }
.section-head { margin-bottom: 22px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
.section-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.section-title { font-size: 24px; font-weight: 800; }
/* .section-sub: rozmiar ujednolicony do 14.5px (dawniej nadpisywany niżej — scalone) */
.section-sub { color: var(--text-muted); margin-top: 7px; max-width: 62ch; font-size: 14.5px; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo { height: 36px; width: auto; display: block; flex: none; }   /* +20% (#2) */
:root.dark .brand-logo { filter: brightness(1.12) saturate(1.05); }
.brand-divider { width: 1px; height: 26px; background: var(--border); flex: none; }
.brand-text { line-height: 1.1; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.brand-tag { font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase; }
/* Wąski header: logo + segment + motyw + CTA nie mieszczą się w 390px (mierzone: prawa
   krawędź .header-actions na 413px, czyli 43px poza ekranem — „Pobierz PDF" był ucięty).
   Etykieta CTA znika, zostaje sama ikona — ten sam zabieg co `.seg a span` wyżej. */
@media (max-width: 560px) {
  .brand-divider, .brand-text { display: none; }
  .btn-cta span { display: none; }
  .btn-cta { padding-inline: 11px; }
  .btn-cta svg { margin: 0; }
}

.header-meta { margin-left: auto; text-align: right; line-height: 1.25; }
/* Próg 820px, nie 720px: między 721 a ~810px logo + data raportu + segment + CTA nie mieszczą
   się w headerze (mierzone przy 768px: .header-actions wystaje 45px poza ekran). Chowamy numer
   i datę raportu — są też w stopce — zamiast ucinać przycisk „Pobierz PDF”. */
@media (max-width: 820px) { .header-meta { display: none; } }
/* Najwęższe telefony (320px): logo + segment + motyw + CTA to 334px przy 280px dostępnych.
   Zamiast ucinać przycisk zaciskamy odstępy i logo. Próg 340px, NIE 360px — 360px to
   popularny Android, któremu nie ma po co zmniejszać logo. */
@media (max-width: 340px) {
  .header-inner { gap: 10px; }
  .brand-logo { height: 28px; }
  .header-actions { gap: 6px; }
  .seg a { padding: 7px 8px; }
  .btn-cta { padding-inline: 8px; }
}
.header-meta .rep-no { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.header-meta .rep-date { font-size: 11px; color: var(--text-dim); }

.header-actions { display: flex; align-items: center; gap: 8px; }

/* Segmentowy przełącznik Dashboard / Katalog */
.seg { display: inline-flex; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.seg a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--text-muted); padding: 7px 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; transition: all .18s ease; }
.seg a svg { width: 15px; height: 15px; }
.seg a:hover { color: var(--text); }
.seg a.active { background: var(--accent); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--accent) 60%, transparent); }
:root.light .seg a.active { color: #fff; }
@media (max-width: 720px) { .seg a span { display: none; } .seg a { padding: 7px 10px; } }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-muted); display: grid; place-items: center;
  transition: all .2s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--neutral); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }

/* CTA = zielona „pigułka" jak .btn na weryfikujVIN.pl (main-600, biały tekst, pełne zaokrąglenie) */
.btn-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px; border-radius: 999px;
  background: var(--brand-yellow); color: #1c2a38; border: 1px solid transparent;
  font-size: 14px; font-weight: 800; letter-spacing: 0.01em;
  transition: all .2s ease;
}
:root.light .btn-cta { border-color: transparent; }
.btn-cta:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--brand-yellow) 85%, transparent); }
.btn-cta svg { width: 16px; height: 16px; }

/* ---------- Sub-nav (anchor links) ---------- */
.subnav {
  position: sticky; top: 64px; z-index: 55;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.subnav-inner { display: flex; align-items: center; min-height: 48px; padding-block: 6px; }
/* na szerszych ekranach chipy zawijają się do kolejnych wierszy (bez poziomego scrolla) */
.subnav-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.subnav a {
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  transition: all .18s ease;
}
.subnav a:hover { color: var(--text); background: var(--bg-subtle); }
.subnav a.active { color: var(--text); box-shadow: inset 0 -3px 0 var(--brand-yellow); }

/* przycisk rozwijający menu sekcji — widoczny tylko na mobile */
.subnav-toggle {
  display: none; align-items: center; gap: 10px; width: 100%;
  height: 40px; padding: 0 4px; background: none; border: 0; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.subnav-toggle .st-menu { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.subnav-toggle-label { flex: 1 1 auto; text-align: left; }
.subnav-toggle .st-chevron { width: 16px; height: 16px; color: var(--text-muted); flex: none; transition: transform .22s ease; }
.subnav.open .subnav-toggle .st-chevron { transform: rotate(180deg); }

@media (max-width: 720px) {
  .subnav-inner { padding-block: 0; height: 48px; }
  .subnav-toggle { display: flex; }
  .subnav-list {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 2px;
    padding: 8px clamp(20px, 4.5vw, 36px) 12px;
    background: var(--bg-elevated); border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .45);
    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: max-height .28s ease, opacity .2s ease, visibility .28s;
  }
  .subnav.open .subnav-list { max-height: min(72vh, 620px); overflow-y: auto; opacity: 1; visibility: visible; }
  .subnav-list a { padding: 11px 12px; font-size: 14px; border-radius: 10px; }
  .subnav-list a.active { background: var(--bg-subtle); box-shadow: inset 3px 0 0 var(--brand-yellow); }
}

/* =========================================================================
   HERO — verdict
   ========================================================================= */
.hero { padding-block: 48px 52px; }
/* Aktualny układ hero = .hero-banner (sekcja „HERO — banner poziomy" niżej).
   Współdzielone dzieci: .hero-make / .hero-model / .hero-trim. */
.hero-make { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.hero-model { font-size: 44px; font-weight: 900; letter-spacing: -0.03em; margin-top: 2px; line-height: 1; }
.hero-trim { font-size: 15px; color: var(--text-muted); margin-top: 8px; font-weight: 500; }

/* Band 2 spec-chipy: równe kolumny (grid) zamiast poszarpanego flex-wrap.
   Progresja: 1 kol. (mobile) → 2 → 3 (utrzymane przez cały desktop) → jeden wiersz (XL).
   Progi dobrane tak, by najdłuższy chip (VIN) nigdy się nie wylewał. */
.spec-strip { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
@media (min-width: 600px)  { .spec-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 880px)  { .spec-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* XL (bardzo duże ekrany): wszystko w jednym wierszu. VIN jest znacznie dłuższy niż reszta,
   więc równe 6×1fr by go wylało — szerokości wg treści (VIN szerszy), wyśrodkowane; chip lekko
   ciaśniejszy, by 6 zmieściło się w kolumnie treści. */
@media (min-width: 1440px) {
  .spec-strip { grid-template-columns: repeat(6, max-content); justify-content: center; gap: 7px; }
  .spec-strip .spec-chip { padding: 7px 10px; font-size: 14px; gap: 6px; }
  .spec-strip .spec-chip svg { width: 22px; height: 22px; }
}
/* spec-chip powiększony o ~20% (#4); w gridzie wypełnia komórkę (równa szerokość). */
.spec-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  padding: 9px 15px; border-radius: 10px; font-size: 15.5px; color: var(--text);
}
.spec-chip svg { width: 26px; height: 26px; color: var(--accent); flex: none; }
.spec-chip b { font-weight: 600; }
.spec-chip .lbl { color: var(--text-dim); font-size: 13px; }

/* score-ring: używane też w .hero-score (banner). Legacy .score-block usunięte. */
.score-ring { position: relative; width: 138px; height: 138px; flex: none; }
.score-ring svg { width: 100%; height: 100%; }
.score-ring .ring-bg { stroke: var(--bg-subtle); }
.score-ring .ring-fg { stroke: var(--success); stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1); }
.score-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1px; }
.score-num { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-den { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.score-caption { font-size: 12px; font-weight: 800; color: var(--text-muted); margin-top: 7px; letter-spacing: .01em; text-align: center; }
.beta-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--warning); background: var(--warning-tint); padding: 2px 8px; border-radius: 20px; margin-top: 4px; }

.verdict-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.verdict-headline { font-size: 21px; font-weight: 800; margin-top: 6px; letter-spacing: -0.02em; }
.verdict-desc { font-size: 14px; color: var(--text-muted); margin-top: 8px; max-width: 42ch; }


/* ---------- Hero side: status badges ---------- */
.hero-side { display: flex; flex-direction: column; gap: 10px; }
.side-title { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin-bottom: 2px; }
.status-pill {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 3px solid var(--neutral);
  padding: 13px 15px; border-radius: 11px;
  transition: all .2s ease; cursor: default;
}
.status-pill:hover { transform: translateX(2px); border-color: var(--neutral); box-shadow: var(--shadow-sm); }
.status-pill.ok { border-left-color: var(--success); }
.status-pill.warn { border-left-color: var(--warning); background: linear-gradient(0deg, var(--warning-tint), var(--bg-elevated)); }
.status-pill.bad { border-left-color: var(--danger); background: linear-gradient(0deg, var(--danger-tint), var(--bg-elevated)); }
.pill-ico { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; flex: none; }
.pill-ico svg { width: 32px; height: 32px; }
.ok  .pill-ico { background: var(--success-tint); color: var(--success); }
.warn .pill-ico { background: var(--warning-fill); color: var(--warning-ink); }
.bad .pill-ico { background: var(--danger-tint); color: var(--danger); }
.pill-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }  /* #6: label nad szarym detalem */
.pill-label { font-size: 13.5px; font-weight: 600; }
.pill-value { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.pill-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.ok  .pill-tag { background: var(--success-tint); color: var(--success); }

/* „UWAGA" — mocniejszy, graficzny akcent z wykrzyknikiem w kółku (docx: „większe słowo UWAGA!").
   Stosowane WSZĘDZIE, gdzie pojawia się uwaga: tag w warn/bad-pillu (.warn .pill-tag / .bad .pill-tag)
   oraz samodzielny .uwaga (notki, disclaimer). Wcześniej .bad .pill-tag miał osobną, dużo mniejszą
   regułę bez wykrzyknika (linia wyżej) - ta sama "waga" komunikatu (szkody/emisja) wyglądała więc
   drobniej niż żółte "UWAGA!" (import). Teraz .bad dostaje IDENTYCZNY rozmiar/krój, tylko czerwony.
   Ikona jest maską w kolorze tekstu (currentColor). */
.warn .pill-tag,
.bad .pill-tag,
.uwaga {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  background: var(--warning-fill); color: var(--warning-ink);
  font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 20px; white-space: nowrap; line-height: 1;
}
/* .bad wariant (czerwony) - --danger działa i jako foreground, i jako fill (patrz komentarz przy
   tokenach wyżej, w przeciwieństwie do --warning), więc pełny fill to po prostu --danger + biały tekst,
   bez osobnej pary -fill/-ink jak przy warning. */
.bad .pill-tag,
.bad .uwaga { background: var(--danger); color: #fff; }
/* Ikona (pobrana): wykrzyknik na KOŃCU, po słowie „UWAGA" (::after). Maska w currentColor —
   czytelna (ciemny ink na żółtym / biały na czerwonym) i skaluje się z tekstem. */
.warn .pill-tag::after,
.bad .pill-tag::after,
.uwaga::after {
  content: ""; flex: none; background: currentColor; width: 15px; height: 15px; margin-left: -3px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m14.1306%2012.16c-.1%201.07-1.04%201.84-2.09%201.84-1.15%200-1.99-.77-2.18998-1.94l-.84-7.74c-.11-1.26.84-2.32%202.08998-2.32h1.78c1.26%200%202.3%201.06%202.09%202.42zm-.1301%207.84c0%201.1046-.8954%202-2%202s-2-.8954-2-2%20.8954-2%202-2%202%20.8954%202%202z%22%20fill%3D%22rgb(0%2C0%2C0)%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m14.1306%2012.16c-.1%201.07-1.04%201.84-2.09%201.84-1.15%200-1.99-.77-2.18998-1.94l-.84-7.74c-.11-1.26.84-2.32%202.08998-2.32h1.78c1.26%200%202.3%201.06%202.09%202.42zm-.1301%207.84c0%201.1046-.8954%202-2%202s-2-.8954-2-2%20.8954-2%202-2%202%20.8954%202%202z%22%20fill%3D%22rgb(0%2C0%2C0)%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}
/* w notce (.si-note) badge nie może dziedziczyć wyciszonego/czerwonego koloru tekstu z ancestora
   (.sum-item.bad .si-note ma color:var(--danger) - linia ~1078) - bez tego .uwaga zawsze wychodził
   żółty nawet na czerwonym kaflu (np. "Uszkodzenia"). Specyficzność 0,0,4,0 > 0,0,2,0 bazowej reguły
   wyżej, więc wygrywa niezależnie od kolejności w pliku. */
.si-note .uwaga { color: var(--warning-ink); }
.sum-item.bad .si-note .uwaga { color: #fff; }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--bg-inset); color: var(--text); border: 1px solid var(--neutral);
  padding: 8px 11px; border-radius: 8px; font-size: 12px; font-weight: 400; line-height: 1.4;
  width: max-content; max-width: 240px; text-align: center;
  opacity: 0; pointer-events: none; transition: all .18s ease; z-index: 80;
  box-shadow: var(--shadow-lg);
}
[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================================
   ALERT BANNER
   ========================================================================= */
.alert-banner {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--warning-tint);
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  border-radius: var(--radius);
  padding: 18px 20px; margin-top: 8px;
}
.alert-banner.critical { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.alert-ico { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--warning-fill); color: var(--warning-ink); }
.alert-banner.critical .alert-ico { background: var(--danger-tint); color: var(--danger); }
.alert-ico svg { width: 22px; height: 22px; }
.alert-title { font-size: 15px; font-weight: 700; }
.alert-desc { font-size: 13.5px; color: var(--text-muted); margin-top: 3px; max-width: 80ch; }
.alert-desc b { color: var(--text); font-weight: 600; }

/* =========================================================================
   KPI GRID
   ========================================================================= */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex; flex-direction: column;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--neutral); }
.kpi-card:has(canvas) { grid-column: span 4; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kpi-ico { width: 60px; height: 60px; border-radius: 15px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; }
.kpi-ico svg { width: 34px; height: 34px; }
/* Kafel ikony niesie status CAŁEJ metryki, chip (.kpi-trend) tylko jednego jej aspektu.
   Mogą się różnić i NIE jest to niespójność do „ujednolicenia":
     Emisja CO₂    → ostrzeżeniem jest cała metryka (klasa G, powyżej progu) → kafel + chip + pasek żółte.
     Ostatnia cena → sama cena nie jest problemem; żółty chip mówi tylko „spadła od szczytu" → kafel ZOSTAJE zielony.
   Tint w tle, --warning na wierzchu (NIE --warning-ink: tint jest półprzezroczysty, patrz uwaga przy --warning). */
.kpi-ico.warn { background: var(--warning-tint); color: var(--warning); }
.kpi-ico.bad { background: var(--danger-tint); color: var(--danger); }
.kpi-trend { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.kpi-trend svg { width: 12px; height: 12px; }
/* .up/.down/.flat to KIERUNEK (strzałka) i domyślnie kolorują „w górę = dobrze". Nie zawsze prawda:
   spadek ceny od szczytu jest dla kupującego neutralny, a klasa G to ostrzeżenie, nie błąd.
   Dlatego status może nadpisać kolor kierunku — modyfikatory NIŻEJ (wygrywają kolejnością). */
.kpi-trend.up { color: var(--success); background: var(--success-tint); }
.kpi-trend.down { color: var(--danger); background: var(--danger-tint); }
.kpi-trend.flat { color: var(--text-muted); background: var(--bg-subtle); }
.kpi-trend.warn { color: var(--warning); background: var(--warning-tint); }
.kpi-trend.bad { color: var(--danger); background: var(--danger-tint); }
.kpi-label { font-size: 12.5px; color: var(--text-muted); font-weight: 500; }
.kpi-value { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; margin-top: 4px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi-value .unit { font-size: 15px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.kpi-value.c-success { color: var(--success); }
.kpi-value.c-warning { color: var(--text); }   /* wariant: bez oliwkowego #9a8200 — liczba ciemna jak sąsiednie, żółć niesie pasek */
.kpi-value.c-danger { color: var(--danger); }
.kpi-sub { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.kpi-sub b { font-weight: 600; }
.kpi-chart { margin-top: auto; padding-top: 14px; }
/* buildMini w report_charts_controller.js sam wybiera układ: pionowe słupki, gdy pełne
   etykiety dat mieszczą się w szerokości karty (miniFitsVertical), inaczej poziome -
   wtedy sam ustawia wysokość inline (~26px/wiersz, liczba okresów decyduje). 200px tu to
   wartość dla wariantu pionowego i fallback przed wykonaniem JS. Wykres pionowy dostaje
   pełną szerokość karty (bez scrolla - JS nie przełącza w pion, jeśli się nie mieści). */
.kpi-chart-inner { position: relative; height: 200px; }

/* benchmark bar */
.bench { margin-top: 12px; }
.bench-track { height: 6px; border-radius: 4px; background: var(--bg-subtle); position: relative; overflow: hidden; }
.bench-fill { height: 100%; border-radius: 4px; background: var(--success); }
.bench-fill.warn { background: var(--warning-fill); }   /* pasek benchmarku „warn" = jasny fill statusu (nie oliwka) */
.bench-marker { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text-muted); }
.bench-legend { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-dim); margin-top: 5px; }

/* =========================================================================
   GENERIC CARD + chart panel
   ========================================================================= */
.panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.chart-box { position: relative; height: 340px; }
.chart-legend-note { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 16px; font-size: 12px; color: var(--text-muted); }
.legend-dot { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.legend-dot.avg::before { background: var(--text-dim); }
.legend-dot.anom::before { background: var(--warning-fill); box-shadow: 0 0 0 1.5px var(--warning-ink); }
.legend-dot.gold::before { background: var(--gold); }

/* =========================================================================
   OWNERSHIP / EVENT TIMELINE
   ========================================================================= */
.timeline { position: relative; padding-left: 8px; }
.tl-item { position: relative; padding: 0 0 30px 62px; }
.tl-item::before { content: ''; position: absolute; left: 22px; top: 52px; bottom: -6px; width: 2px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-node {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 13px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-muted); z-index: 1;
}
.tl-node svg { width: 25px; height: 25px; }
/* Kolor węzła osi czasu = typ zdarzenia: .evt-register/.evt-sale/.evt-transfer/.evt-inspect
   (definicje w sekcji „ikony timeline"). Legacy warianty .accent/.success/.warning usunięte. */
.tl-date { font-size: 12px; font-weight: 600; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.tl-title { font-size: 14.5px; font-weight: 600; margin-top: 2px; }
.tl-desc { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 12px; color: var(--text-dim); }
.tl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tl-meta svg { width: 13px; height: 13px; }
.tl-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.flag-svg { width: 18px; height: 12px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

.owners-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.owner-chip { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 30px; padding: 6px 14px; font-size: 12.5px; color: var(--text-muted); }
.owner-chip b { color: var(--text); font-weight: 700; }

/* =========================================================================
   DAMAGE SECTION (clean state + car diagram)
   ========================================================================= */
/* Werdykt i mapa: ta sama szerokość (760 px), wyśrodkowane — spójna kompozycja sekcji. */
.damage-verdict { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
.dmg-big {
  display: flex; align-items: center; gap: 16px;
  background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
  border-radius: var(--radius); padding: 20px;
}
.dmg-big .dmg-ico { width: 48px; height: 48px; border-radius: 12px; background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); display: grid; place-items: center; flex: none; }
.dmg-big .dmg-ico svg { width: 26px; height: 26px; }
.dmg-big h3 { font-size: 18px; }
.dmg-big p { font-size: 13px; color: var(--text-muted); margin-top: 3px; }
/* Odwrotnie niż w reszcie raportu: wykryta szkoda to ZŁA wiadomość - baner
   werdyktu i checklista muszą świecić czerwono, nie zielono, gdy has_damage. */
.dmg-big.bad { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.dmg-big.bad .dmg-ico { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.dmg-checks { margin-top: 18px; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.dmg-check { display: flex; align-items: center; gap: 12px; background: var(--bg-elevated); padding: 14px 16px; font-size: 14.5px; }
.dmg-check svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; }
.dmg-check.ok svg { color: var(--success); }
.dmg-check.bad svg { color: var(--danger); }
.dmg-check .src { margin-left: auto; font-size: 11.5px; color: var(--text-dim); }

.car-diagram { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.car-diagram-title { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 600; margin-bottom: 6px; }
.car-svg-wrap { flex: 1; display: grid; place-items: center; padding: 10px 0; }

/* ---- Szkody V2: pierścień „racetrack" (stadion) + 8 stref jako klasy CSS ----
   Referencja i generator geometrii: podglad-szkody.html; kontrakt: MIGRATION.md §2b (damage).
   Pierścień = SVG o 8 STAŁYCH ścieżkach <path class="dz dz-<code>"> (d = stałe, z geometrii).
   DWUSTANOWO, TYLKO CZERWIEŃ: szkoda strefy = klasa `hit`. Auto obrócone poziomo (przód w prawo).
   Płyta ma #fff na sztywno także w ciemnym motywie — rzuty to rastry na białym tle. */
.dmg-figure { position: relative; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: 58 / 30; }
.dmg-plate2 { position: absolute; inset: 0; background: #fff; border-radius: 999px; box-shadow: 0 12px 30px -14px rgba(20,30,25,.28); }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
/* 8 stref: domyślnie niewidoczne; jednolita czerwień po dodaniu `.hit` (bez taperu, bez stopni ciężkości). */
.ring-svg .dz { fill: none; stroke: var(--danger); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .15s; }
.ring-svg .dz.hit { opacity: 1; }
/* UWAGA: obrazek jest obrócony o 90°, więc `height` steruje DŁUGOŚCIĄ auta w poziomie
   (width: auto daje szerokość z proporcji rzutu). 90% zostawiało po 142px pustki przed
   maską i za tyłem — auto zajmowało 54% długości pierścienia. 120% podnosi to do ~72%. */
.dmg-car2 { position: absolute; top: 50%; left: 50%; z-index: 2; height: 120%; width: auto;
  /* max-width + object-fit = SUFIT SZEROKOŚCI auta. Sama `height` steruje tylko długością,
     a każdy rzut ma inne proporcje: przy 120% SUV wychodzi na 78% szerokości pierścienia,
     ale coupé już na 93% — nadwozie przecinało pierścień i zasłaniało czerwone strefy.
     30% szerokości figury ≈ 80% szerokości pierścienia (pierścień to 220/300 wysokości
     viewBoxa, figura ma proporcje 58/30). SUV mieści się pod tym sufitem bez zmian,
     szersze nadwozia (coupé, kabriolet, pickup) są przycinane do bezpiecznego rozmiaru.
     object-fit: contain — bez tego zderzenie `height` z `max-width` spłaszczyłoby rzut. */
  max-width: 30%; object-fit: contain;
  transform: translate(-50%,-50%) rotate(90deg); transform-origin: center; }
/* Etykiety kierunku WEWNĄTRZ pierścienia, przy aucie (numery szkód są na zewnątrz).
   Po powiększeniu auta muszą stać bliżej krawędzi koła — przy 18%/19% nachodziłyby na
   maskę i tył. Wartości dobrane tak, by mieściły się między pasmem stref (.dz, ~8px
   do środka od linii pierścienia) a nadwoziem. */
.rl { position: absolute; z-index: 3; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim); pointer-events: none; white-space: nowrap; }
/* Lewo/Prawo zostają na 19%: w pionie pierścień jest dużo węższy niż w poziomie (220 vs
   500 jednostek viewBoxa), więc niżej niż 19% etykieta wchodzi w pasmo stref. */
.rl.f { top: 19%;    left: 50%; transform: translate(-50%,-50%); }
.rl.r { bottom: 19%; left: 50%; transform: translate(-50%,50%); }
.rl.l { left: 11%;   top: 50%;  transform: translate(-50%,-50%) rotate(-90deg); }
.rl.p { right: 11%;  top: 50%;  transform: translate(50%,-50%) rotate(90deg); }
/* Na telefonie rysunek zjeżdża do ~1/3 rozmiaru, ale etykiety zostają przy 10px — zajmują
   więc proporcjonalnie DUŻO więcej miejsca w pionie i przy 120% stykały się z nadwoziem.
   110% oddaje im ten margines; długość auta spada z 72% do 66% szerokości pierścienia. */
@media (max-width: 560px) {
  .dmg-car2 { height: 110%; }
}
/* numerowany marker szkody — JEDEN na zdarzenie, na zewnątrz pierścienia (tylko gdy są szkody) */
.dmg-pin { position: absolute; z-index: 4; width: 27px; height: 27px; margin: -13.5px 0 0 -13.5px; border-radius: 50%; background: var(--danger); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(226,59,48,.55); font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
/* lista szkód pod rysunkiem (numery = markery); renderowana tylko gdy damage.events.any? */
.dmg-list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.dmg-item { display: flex; gap: 13px; background: var(--bg-elevated); border: 1px solid var(--border); border-left: 3px solid var(--danger); border-radius: 12px; padding: 14px 16px; }
.dmg-item .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--danger); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.dmg-item .di-body { font-size: 14px; line-height: 1.55; }
.dmg-item .di-head { font-weight: 700; color: var(--text); margin-bottom: 2px; }
.dmg-item .di-meta { color: var(--text-muted); }
.dmg-item .di-meta b { color: var(--text); font-weight: 600; }

/* Mapa uszkodzeń jako osobny wiersz pod kartą werdyktu. Dynamiczna: na mobile
   pełna szerokość ekranu, na większych ekranach ograniczona do sensownej szerokości
   i wyśrodkowana. Rysunek skaluje się z kartą. */
.damage-map { margin: 20px auto 0; max-width: 760px; }
.damage-map .dmg-figure { max-width: none; }
.car-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--text-muted); margin-top: 8px; justify-content: center; }
.car-legend .ld { display: inline-flex; align-items: center; gap: 6px; }
.car-legend .ld i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* =========================================================================
   INSPECTIONS TABLE
   ========================================================================= */
/* width:0 + min-width:100% — kontener przewijany NIE MOŻE rozpychać rodzica. Bez tego
   min-content tabeli (636px) rozdymał całą sekcję #inspections do 678px przy ekranie
   390px: nagłówek, eyebrow i lead sekcji rozciągały się na 502px i uciekały poza ekran,
   a tabela i tak się nie przewijała. `width:0` zeruje wkład w szerokość rodzica,
   `min-width:100%` rozciąga wrapper z powrotem. Ten sam mechanizm co w .euro-track. */
.table-wrap { overflow-x: auto; width: 0; min-width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elevated); }
table.report { background: var(--bg-elevated); width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.report thead th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 600; padding: 13px 18px; background: var(--bg-inset);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.report tbody td { padding: 13px 18px; border-bottom: 1px solid var(--border); }
table.report tbody tr:last-child td { border-bottom: none; }
table.report tbody tr { transition: background .15s; }
table.report tbody tr:hover { background: var(--bg-subtle); }
table.report .td-date { font-variant-numeric: tabular-nums; font-weight: 600; }
table.report .td-km { font-variant-numeric: tabular-nums; color: var(--text-muted); }
/* Usterki z badania — wiersz doklejony pod wierszem badania (nie osobna karta pod tabelą).
   ■ partial: _inspection_faults × inspections[].faults[] {name, severity, description};
   renderuj tylko dla badania z wynikiem negatywnym. */
table.report tr.insp-faults td,
table.report tr.insp-faults:hover td { background: var(--warning-tint); padding: 12px 18px; }
table.report tr.insp-faults .ift-head { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--warning-ink); margin-bottom: 4px; }
table.report tr.insp-faults .fault-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
table.report tr.insp-faults .fault-item:last-child { border-bottom: none; }
table.report tr.insp-faults .ft-desc { color: var(--warning-ink); opacity: .78; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.badge svg { width: 13px; height: 13px; }
.badge.pass { background: var(--success-tint); color: var(--success); }
.badge.fail { background: var(--danger-tint); color: var(--danger); }
.badge.info { background: var(--accent-tint); color: var(--accent); }

/* =========================================================================
   RECALLS callout
   ========================================================================= */
.callout {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 3px solid var(--success); border-radius: var(--radius); padding: 20px;
}
.callout.warn { border-left-color: var(--warning); }
.callout-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--success-tint); color: var(--success); }
.callout.warn .callout-ico { background: var(--warning-fill); color: var(--warning-ink); }
.callout-ico svg { width: 26px; height: 26px; }
.callout h3 { font-size: 15px; }
.callout p { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* =========================================================================
   SPEC (collapsible) + equipment highlights
   ========================================================================= */
details.spec { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
details.spec + details.spec { margin-top: 14px; }
details.spec > summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  display: flex; align-items: center; gap: 13px; font-weight: 600; font-size: 15px;
  transition: background .15s;
}
details.spec > summary::-webkit-details-marker { display: none; }
details.spec > summary:hover { background: var(--bg-subtle); }
.summary-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--bg-subtle); color: var(--text-muted); display: grid; place-items: center; flex: none; }
.summary-ico svg { width: 24px; height: 24px; }
.summary-chev { margin-left: auto; color: var(--text-dim); transition: transform .25s; }
.summary-chev svg { width: 18px; height: 18px; }
details.spec[open] .summary-chev { transform: rotate(180deg); }
.summary-hint { font-size: 12px; color: var(--text-dim); font-weight: 400; margin-left: 6px; }
.spec-body { padding: 4px 22px 24px; }
/* minmax(0, 1fr), NIE 1fr: automatycznym minimum `1fr` jest min-content, więc najdłuższa
   wartość w komórce (np. „AMG SpeedShift Plus 7G-Tronic") wypychała całą siatkę — sekcja
   #spec miała 403px przy ekranie 390px i karty ucinały się po prawej. */
.spec-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.spec-cell { background: var(--bg-elevated); padding: 13px 16px; }
.spec-cell .sc-lbl { font-size: 11px; color: var(--text-dim); letter-spacing: 0.04em; }
.spec-cell .sc-val { font-size: 14px; font-weight: 600; margin-top: 3px; }
.equip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.equip-tag { display: inline-flex; align-items: center; background: var(--bg-subtle); border: 1px solid var(--border); padding: 7px 12px; border-radius: 9px; font-size: 12.5px; }
/* BEZ reguł kategorii (.equip-group/.equip-cat/.c-count) — wyposażenie to JEDNA płaska
   lista .equip-list; baza nie rozdziela pozycji na kategorie (MIGRATION.md §2c). */

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { border-top: 1px solid var(--border); padding: 44px 0 60px; margin-top: 20px; background: var(--bg-inset); }
.foot-col h4 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.foot-col p { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; }
.foot-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; }
.foot-bottom .meta { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.watermark { font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; opacity: .7; }
/* Rozwijany disclaimer prawny (#42) */
.legal-disclaimer { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.legal-disclaimer > summary { cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--text-muted); display: inline-flex; align-items: center; gap: 8px; }
.legal-disclaimer > summary::-webkit-details-marker { display: none; }
.legal-disclaimer > summary::before { content: "▸"; color: var(--text-dim); transition: transform .2s ease; }
.legal-disclaimer[open] > summary::before { transform: rotate(90deg); }
.legal-disclaimer .ld-body { margin-top: 12px; max-width: 96ch; }
.legal-disclaimer .ld-body p { font-size: 11.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 9px; }
.legal-disclaimer .ld-body p:last-child { margin-bottom: 0; }

/* =========================================================================
   ANIMATION (Intersection Observer entry)
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card:has(canvas) { grid-column: span 2; }
}
@media (max-width: 720px) {
  .hero-model { font-size: 34px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-card:has(canvas) { grid-column: span 1; }
  .spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding-block: 40px; }
  .section-title { font-size: 20px; }
}

/* =========================================================================
   KOMPONENTY „DATA-MAGAZINE"
   Kolory kategorii własności, pasek statystyk, story-callouty, flagi krajów,
   wykresy (viz-card), klikalne strefy nadwozia, kolorowe ikony osi czasu.
   ========================================================================= */
/* Kolory kategorii własności (wykresy własności/zdarzeń + pasma tła).
   UWAGA: --cat-rental jest czytana dynamicznie w JS przez cssVar('--cat-rental'). */
:root {
  --cat-personal: #86a9ee;   /* właściciel prywatny — pastelowy błękit (#46) */
  --cat-leasing:  #f5b274;   /* firmy / leasing — pastelowa brzoskwinia */
  --cat-rental:   #bba3ea;   /* drugi właściciel — pastelowa lawenda */
}
:root.light {
  --cat-personal: #6389da;   /* pastelowy błękit — jasny motyw (#46) */
  --cat-leasing:  #e89a55;   /* pastelowa brzoskwinia */
  --cat-rental:   #9e85dd;   /* pastelowa lawenda */
}

/* ---------- Etykieta typu pojazdu (hero) ----------
   (Sylwetka SVG .hero-silhouette usunięta — zastąpiona realnym zdjęciem .hero-photo.) */
.vehicle-type-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim);
}
.vehicle-type-label b { color: var(--accent); font-weight: 700; }

/* ---------- Marka producenta (inline) ----------
   (Nakładka logo .maker-mark usunięta — nigdy nie użyta w markupie.) */
.maker-inline { display: inline-flex; align-items: center; gap: 9px; }
.maker-inline svg { width: 26px; height: 26px; color: var(--text-muted); flex: none; }
.maker-inline b { font-weight: 700; }

/* ---------- Rich stats bar (pod hero) ---------- */
.stats-bar {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; margin-top: 4px;
}
.stat-item { padding: 20px 22px; border-left: 1px solid var(--border); position: relative; }
.stat-item:first-child { border-left: none; }
.stat-item .stat-ico { width: 34px; height: 34px; margin-bottom: 9px; }
.stat-item .stat-num { font-size: 30px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-item .stat-num .u { font-size: 14px; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
.stat-item .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
/* Warianty koloru liczby+ikony (pole danych `color_class`). Dwie grupy, nie mieszać:
     STATUS z danych → c-success (dobrze) / c-warning (do weryfikacji) / c-danger (źle).
       Statystyka, która niesie ocenę (np. przebieg vs średnia), MUSI użyć tej trójki
       i tej samej progowości co reszta raportu — inaczej Ocena mówi co innego niż
       „Kluczowe dane" (tam ten sam przebieg jest zielony przez .kpi-trend.up).
     DEKORACJA (stała, nie z oceny) → c-accent / c-blue / c-text. */
.stat-item.c-accent .stat-num, .stat-item.c-accent .stat-ico { color: var(--accent); }
.stat-item.c-blue .stat-num, .stat-item.c-blue .stat-ico { color: var(--cat-personal); }
.stat-item.c-success .stat-num, .stat-item.c-success .stat-ico { color: var(--success); }
.stat-item.c-warning .stat-num, .stat-item.c-warning .stat-ico { color: var(--warning); }
.stat-item.c-danger .stat-num, .stat-item.c-danger .stat-ico { color: var(--danger); }
.stat-item.c-text .stat-num { color: var(--text); }

/* ---------- Story callouts (visual highlights) ---------- */
.story-callout {
  display: flex; align-items: center; gap: 26px;
  background:
    radial-gradient(900px 300px at 0% 0%, var(--accent-tint), transparent 70%),
    var(--bg-elevated);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 30px 32px; overflow: hidden;
}
.story-callout .story-ico { width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.story-callout .story-ico svg { width: 30px; height: 30px; }
.story-num { font-size: 38px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; }
/* Żółty zakreślacz = „warte uwagi" (pozytywne wyróżnienie, nie ostrzeżenie).
   UWAGA — NIE wracaj do wersji z `transparent` w gradiencie:
     linear-gradient(180deg, transparent 56%, YELLOW 56%, YELLOW 94%, transparent 94%)
   `transparent` = rgba(0,0,0,0), czyli CZARNY z zerową alfą. Chromium nie umie tego wyrazić
   zwykłym wypełnieniem, więc do PDF-a emituje shading + maskę miękką (/Pattern + /SMask).
   Część czytników PDF gubi tę maskę → w miejscu zakreślacza wychodzi CZARNY pasek albo
   zakreślacz znika (potwierdzone: ten sam plik, Ghostscript vs poppler dają różny wynik).
   Poniżej gradient jest JEDNOLICIE żółty (dwa te same stopy = zwykłe wypełnienie, zero alfy),
   a pasek wycina background-size/-position:
     wysokość 38% = dawne 56%→94%;  pozycja 90.32% = 56 / (100 − 38) — ten sam piksel, bez maski. */
.story-num .hl, .story-num .hl.blue {
  color: var(--text);
  background-image: linear-gradient(var(--brand-yellow), var(--brand-yellow));
  background-size: 100% 38%;
  background-position: 0 90.32%;
  background-repeat: no-repeat;
  padding: 0 5px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.story-sub { font-size: 14px; color: var(--text-muted); margin-top: 8px; max-width: 60ch; }
.trend-down { color: var(--danger); font-weight: 900; }   /* strzałka spadku wartości (#36) */
.trend-up { color: var(--success); font-weight: 900; }    /* strzałka wzrostu wartości (#36) */
.story-flags { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

/* ---------- Flagi krajów ---------- */
.flag { width: 30px; height: 20px; border-radius: 3px; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.08), var(--shadow-sm); vertical-align: middle; flex: none; }
.flag-lg { width: 40px; height: 27px; }
.flag-row { display: inline-flex; align-items: center; gap: 8px; }
.flag-row .flag-name { font-size: 13px; font-weight: 600; color: var(--text-muted); }

/* ---------- Nowe wykresy (donut + bar) ---------- */
.viz-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
.viz-card h3 { font-size: 15px; font-weight: 700; }
.viz-card .viz-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; margin-bottom: 14px; }
.viz-box { position: relative; flex: 1; min-height: 230px; }


/* ---------- Większe, kolorowane ikony timeline ---------- */
.tl-node.evt-register { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.tl-node.evt-sale { background: color-mix(in srgb, var(--cat-personal) 16%, transparent); color: var(--cat-personal); border-color: transparent; }
.tl-node.evt-transfer { background: color-mix(in srgb, var(--cat-leasing) 18%, transparent); color: var(--cat-leasing); border-color: transparent; }
.tl-node.evt-inspect { background: var(--success-tint); color: var(--success); border-color: transparent; }

@media (max-width: 1100px) {
  .stats-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* tablet: 5→3 kol (liczby się nie ściskają) */
  .stat-item:nth-child(3n+1) { border-left: none; }
}
@media (max-width: 720px) {
  .stats-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item:nth-child(odd) { border-left: none; }
  .stat-item:nth-child(even) { border-left: 1px solid var(--border); }  /* czysty wzór 2-kol */
  .stat-item .stat-num { font-size: 24px; }
  .story-callout { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .story-flags { margin-left: 0; }
  .story-num { font-size: 28px; }
}

/* =========================================================================
   ZDJĘCIA: hero-photo, galeria (.gallery-grid/.photo-card), lightbox, panel flag
   ========================================================================= */
/* Zdjęcie pojazdu w hero (aktualny wrapper: .hero-photo-col — sekcja niżej).
   Legacy .hero-photo-wrap usunięty. */
.hero-photo {
  width: 260px; height: 168px; object-fit: cover; border-radius: 14px;
  border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: block;
}
@media (max-width: 900px) { .hero-photo { width: 220px; height: 142px; } }
@media (max-width: 720px) { .hero-photo { width: 100%; height: 200px; } }

/* Galeria fotograficzna */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.photo-card {
  position: relative; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elevated); aspect-ratio: 4 / 3;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.photo-card:hover img { transform: scale(1.06); }
.photo-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,16,12,.55), transparent 45%);
  opacity: .9; pointer-events: none;
}
.photo-badge {
  position: absolute; left: 12px; bottom: 11px; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .02em;
}
.photo-badge svg { width: 14px; height: 14px; }
.photo-zoom {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(10,18,14,.55); color: #fff; opacity: 0; transition: opacity .2s;
}
.photo-card:hover .photo-zoom { opacity: 1; }
.photo-zoom svg { width: 16px; height: 16px; }
.gallery-note { font-size: 12.5px; color: var(--text-dim); margin-top: 14px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,10,8,.86); backdrop-filter: blur(6px); display: none; place-items: center; padding: 30px; }
.lightbox.open { display: grid; }
/* calc(100vh - 150px) rezerwuje miejsce na dwuwierszową stopkę (podpis + licznik „6 / 60"),
   inaczej przy wysokim oknie zdjęcie sięga podpisu i tekst leży na kadrze. */
.lightbox img { max-width: 92vw; max-height: min(86vh, calc(100vh - 150px));
  border-radius: 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.lightbox-close { position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-cap { position: absolute; bottom: 44px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: 13px; padding: 0 16px; }
.lightbox-count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.6); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
/* Strzałki nawigacji. position:absolute, bo .lightbox to grid z place-items:center —
   jako zwykłe dzieci wylądowałyby na środku, na zdjęciu. */
/* Strzałki LEŻĄ NA zdjęciu — zdjęcie zostaje pełnej szerokości, nie zwężamy go pod nawigację.
   Dlatego muszą być czytelne także na jasnym kadrze: ciemne półprzezroczyste koło + rozmycie
   tła + biała obwódka i cień pod ikoną dają kontrast niezależnie od tego, co jest pod spodem. */
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: rgba(10,14,12,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.6);
  transition: background .16s ease, opacity .16s ease; }
.lightbox-nav:hover { background: rgba(10,14,12,.85); }
.lightbox-nav svg { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.lightbox-nav:disabled { opacity: .28; cursor: default; }
.lightbox-nav.lb-prev { left: 14px; }
.lightbox-nav.lb-next { right: 14px; }
@media (max-width: 560px) {
  .lightbox { padding: 16px; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-nav svg { width: 24px; height: 24px; }
  .lightbox-nav.lb-prev { left: 10px; }
  .lightbox-nav.lb-next { right: 10px; }
}

/* Panel flag krajów (bazy skradzionych) */
.flags-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.flags-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.flags-head .fh-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--success-tint); color: var(--success); display: grid; place-items: center; flex: none; }
.flags-head .fh-ico svg { width: 24px; height: 24px; }
.flags-head h3 { font-size: 16px; font-weight: 700; }
.flags-head p { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.flags-head .fh-count { margin-left: auto; text-align: right; flex: none; }
.flags-head .fh-count b { font-size: 26px; font-weight: 900; color: var(--success); letter-spacing: -.02em; }
.flags-head .fh-count.warn b { color: var(--warning); }   /* są trafienia → licznik na żółto (token --warning) */
.flags-head .fh-count.bad  b { color: var(--danger); }
.flags-head .fh-count span { display: block; font-size: 11px; color: var(--text-dim); }
.flag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.country-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px;
}
.country-chip img { width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); flex: none; }
.country-chip .cc-name { font-size: 12.5px; font-weight: 600; }
.country-chip .cc-st { margin-left: auto; color: var(--success); display: grid; place-items: center; }
.country-chip .cc-st svg { width: 15px; height: 15px; }
/* Trafienie w bazie skradzionych — podświetlenie karty kraju + kolor ikony ostrzeżenia.
   DRY: reuse tokenów --warning/--danger(-tint) i konwencji statusów .warn / .bad. */
.country-chip.warn { background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 45%, transparent); }
.country-chip.bad  { background: var(--danger-tint);  border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.country-chip.warn .cc-st { color: var(--warning); }
.country-chip.bad  .cc-st { color: var(--danger); }
.country-chip.warn .cc-name, .country-chip.bad .cc-name { font-weight: 700; }
@media (max-width: 900px) { .flag-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .flag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-grid { grid-template-columns: 1fr; } .flags-head .fh-count { display: none; } }

/* =========================================================================
   HERO POZIOMY (final) + KOMPONENTY DANYCH
   Hero-banner, podsumowanie (.sum-item), osiągi (.perf-item), karty danych
   (.datacard/.legal-card), lista odczytów (.odo-row), charakterystyka modelu,
   producent (.maker-card), oś czasu „boxed". Tagline marki.
   ========================================================================= */

/* czytelność: lekko większe drobne teksty (.section-sub=14.5px scalony wyżej) */
.tl-desc, .kpi-sub, .pill-value { font-size: 12.5px; }
.spec-cell .sc-lbl, .spec-cell .sc-val { font-size: 11.5px; }
.spec-cell .sc-val { font-size: 14.5px; }

/* duża ikona nagłówka sekcji (otomoto-style, jednoznaczna) */
.section-head.with-ico { display: flex; align-items: flex-start; gap: 16px; }
.sec-ico { width: 70px; height: 70px; border-radius: 17px; flex: none; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent); }
.sec-ico svg { width: 40px; height: 40px; }

/* --- Podkreślenia nagłówków sekcji: czysta żółć marki --- */
.section-head .section-title { position: relative; }
.section-head .section-title::after {
  content: ""; display: block; height: 5px; width: 96px; border-radius: 3px;
  margin-top: 11px; background: var(--brand-yellow);
}

/* =========================================================================
   HERO POZIOMY (final) — jeden poziomy blok zamiast dwóch pionowych kolumn
   ========================================================================= */
.hero-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center;
  background: radial-gradient(1200px 420px at -5% -30%, var(--accent-tint), transparent 60%), var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 18px; padding: 30px 36px;
  position: relative; overflow: hidden;
}
.hero-score { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }
.hero-id { min-width: 0; }
.hero-id .hero-uline { height: 6px; width: 190px; max-width: 60%; border-radius: 3px; background: var(--brand-yellow); margin: 12px 0; }
.hero-id .verdict-headline { margin-top: 14px; }
.hero-photo-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.hero-photo-col .hero-photo { width: 340px; height: 200px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); display: block; }
.hero-photo-col .vehicle-type-label { font-size: 13px; color: var(--text-muted); }
.hero-photo-col .vehicle-type-label b { color: var(--text); }

/* .hero-status wrapper usunięty — .status-grid i .side-title używane bezpośrednio */
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hero .spec-strip { margin-top: 20px; }

@media (max-width: 900px) {
  .hero-banner { grid-template-columns: 1fr; }
  .hero-photo-col { align-items: flex-start; }
  .hero-photo-col .hero-photo { width: 100%; max-width: 420px; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Próg 600px, nie 560px: przy 2 kolumnach i szerokości 561px kolumna ma 254px, a najdłuższy
   pill („Historia przebiegu" + tag „Uwaga") potrzebuje 260px — wystawał o 6px poza kartę. */
@media (max-width: 600px) { .status-grid { grid-template-columns: 1fr; } }

/* zielony tagline marki: „Sprawdź VIN i zaufaj danym" */
/* Hasło marki (NIE przycisk): ikona + tekst z żółtym zakreślaczem, bez pigułki/cienia */
.tagline { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-size: 14.5px; font-weight: 700; color: var(--text); }
.tagline svg { width: 19px; height: 19px; color: var(--accent); flex: none; }
.tagline-hl { background: linear-gradient(180deg, transparent 58%, var(--brand-yellow) 58%, var(--brand-yellow) 92%, transparent 92%);
  padding: 0 4px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Przegląd historii (podsumowanie z adnotacją) ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sum-item { display: flex; align-items: center; gap: 14px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-left: 4px solid var(--success); border-radius: var(--radius); padding: 16px 18px; }
.sum-item.warn { border-left-color: var(--warning); }
.sum-item.bad  { border-left-color: var(--danger); }
.sum-item .si-ico { width: 60px; height: 60px; border-radius: 15px; flex: none; display: grid; place-items: center;
  background: var(--success-tint); color: var(--success); }
.sum-item.warn .si-ico { background: var(--warning-fill); color: var(--warning-ink); }
.sum-item.bad  .si-ico { background: var(--danger-tint); color: var(--danger); }
.sum-item .si-ico svg { width: 34px; height: 34px; }
.sum-item .si-label { font-size: 14.5px; font-weight: 700; }
.sum-item .si-note { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.sum-item.bad .si-note, .sum-item.bad .si-label { color: var(--danger); }

/* #7: drugi rząd — kafle-skróty do sekcji */
.summary-more-h { font-size: 14px; font-weight: 800; margin: 22px 0 12px; }
.summary-more { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sm-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
  padding: 16px 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-size: 12.5px; font-weight: 700; line-height: 1.25; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.sm-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.sm-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--success-tint); color: var(--success); flex: none; }
.sm-ico svg { width: 26px; height: 26px; }
@media (max-width: 900px) { .summary-more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .summary-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Osiągi i dane techniczne (ikony, otomoto-style) ---------- */
.perf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.perf-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.perf-item .pf-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--bg-subtle); color: var(--accent); display: grid; place-items: center;
  grid-column: 1; grid-row: 1 / 3; margin: 0; }
.perf-item .pf-ico svg { width: 30px; height: 30px; }
.perf-item .pf-val { grid-column: 2; grid-row: 1; align-self: end; font-size: 20px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.perf-item .pf-val .u { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.perf-item .pf-lbl { grid-column: 2; grid-row: 2; align-self: start; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------- Karty danych key-value (rejestracja, dokument, ryzyka, status prawny) ---------- */
.datacards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.datacard { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.datacard h3 { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.datacard h3 .dc-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; flex: none; }
.datacard h3 .dc-ico svg { width: 28px; height: 28px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-muted); }
.kv .v { font-weight: 700; text-align: right; }
.kv .v.ok { color: var(--success); } .kv .v.warn { color: var(--warning); } .kv .v.bad { color: var(--danger); }
.legal-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.legal-card { position: relative; background: var(--bg-elevated); border: 1px solid var(--border); border-top: 4px solid var(--success); border-radius: var(--radius); padding: 18px; }
/* Znacznik statusu karty (prawy górny róg) — STEROWANY danymi: legal_status[].state.
   ok = zielony ptaszek (dane obecne/pozytywne); warn = żółty wykrzyknik; bad = czerwony wykrzyknik.
   Karta neutralna (muted, „brak informacji") — bez znacznika. Ikona w markupie (Rails wybiera wg state). */
.legal-card .lc-mark { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; }
.legal-card .lc-mark svg { width: 22px; height: 22px; }
.legal-card .lc-mark.ok   { background: var(--success-tint); color: var(--success); }
.legal-card .lc-mark.warn { background: var(--warning-fill);  color: var(--warning-ink); }
.legal-card .lc-mark.bad  { background: var(--danger-tint);   color: var(--danger); }
/* Górna krawędź niesie stan tak samo jak znacznik .lc-mark. Bez tych dwóch reguł karta
   z `state: bad` (przegląd wygasły) miała czerwony znacznik na ZIELONEJ krawędzi —
   sprzeczny sygnał. Demonstracja: podglad-niewidoczne-teraz.html, sekcja F. */
.legal-card.warn  { border-top-color: var(--warning); }
.legal-card.bad   { border-top-color: var(--danger); }
.legal-card.muted { border-top-color: var(--text-dim); }
.legal-card .lc-ico { width: 48px; height: 48px; border-radius: 13px; background: var(--success-tint); color: var(--success); display: grid; place-items: center; margin-bottom: 11px; }
.legal-card.muted .lc-ico { background: var(--bg-subtle); color: var(--text-muted); }
/* Kafel ikony podąża za stanem — tak samo jak .sum-item.warn/.bad .si-ico (linie ~1063).
   Bez tego karta „Przegląd wygasł" miała czerwoną krawędź i czerwony znacznik, ale ZIELONĄ
   ikonę. Ta sama para tokenów co w .sum-item: warn → fill+ink, bad → tint+kolor. */
.legal-card.warn .lc-ico { background: var(--warning-fill); color: var(--warning-ink); }
.legal-card.bad  .lc-ico { background: var(--danger-tint);  color: var(--danger); }
.legal-card .lc-ico svg { width: 26px; height: 26px; }
.legal-card .lc-t { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.legal-card .lc-v { font-size: 16px; font-weight: 800; margin-top: 3px; }
.legal-card .lc-s { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

/* #26: komponent polskiej tablicy rejestracyjnej + historia tablic.
   Kolory tablicy są REALNE (biało-niebiesko-czarna) — celowo poza motywem UI. */
.plate-history { display: grid; gap: 12px; }
.ph-item { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.plate { display: inline-flex; align-items: stretch; height: 46px; border-radius: 6px; overflow: hidden;
  border: 2px solid #16181d; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.18); flex: none; }
.plate .pl-eu { background: #0a3aa8; width: 28px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; padding-top: 2px; }
.plate .pl-stars { width: 16px; height: 16px; }
.plate .pl-cc { font-size: 11px; font-weight: 800; color: #fff; }
.plate .pl-num { display: flex; align-items: center; padding: 0 14px; font-size: 23px; font-weight: 800;
  letter-spacing: 3px; color: #16181d; font-family: 'Arial Narrow', 'Arial', sans-serif; }
.ph-meta { min-width: 0; }
.ph-date { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ph-note { font-size: 12.5px; color: var(--text-muted); }
.ph-badge { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-dim);
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 20px; padding: 3px 9px; flex: none; }
.ph-badge.current { color: var(--success); background: var(--success-tint); border-color: transparent; }
.ph-disclaimer { font-size: 11.5px; color: var(--text-dim); margin-top: 12px; max-width: 80ch; }

/* ---------- Lista odczytów licznika (odczyt pod odczytem) ---------- */
.odo-list { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.odo-row { display: flex; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.odo-row:last-child { border-bottom: none; }
.odo-row:hover { background: var(--bg-subtle); }
.odo-row .od-date { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 74px; }
.odo-row .od-km { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.odo-row .od-src { font-size: 12px; color: var(--text-dim); }
.odo-row.anom { background: var(--warning-tint); }
.odo-row.anom .od-km { color: var(--warning); }
.odo-row .od-flag { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* ---------- Charakterystyka modelu (usterki, ciekawostki, pytania) ---------- */
.model-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Ręcznie pisany opis z importu "Dodatkowe opisy" - luźne <h3>/<p>/<ul> poza
   .info-card (klasy .info-card / .plain-list z pliku dziedziczą reguły wyżej/niżej). */
.model-desc--imported { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.model-desc--imported h3 { font-size: 15px; font-weight: 800; margin: 22px 0 8px; }
.model-desc--imported h3:first-child { margin-top: 0; }
.model-desc--imported p { margin: 0 0 12px; color: var(--text-muted); }
.model-desc--imported > ul { margin: 0 0 14px; padding-left: 20px; }
.model-desc--imported > ul > li { margin: 4px 0; }
.model-desc--imported .info-card { margin: 18px 0; }
.model-desc--imported .ic-ico svg { width: 22px; height: 22px; }
.info-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; overflow-wrap: break-word; }
.info-card h3 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 11px; margin-bottom: 6px; flex-wrap: wrap; }
.info-card h3 .ic-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.info-card h3 .ic-ico svg { width: 25px; height: 25px; }
.ic-amber .ic-ico { background: var(--warning-tint); color: var(--warning); }
.ic-green .ic-ico { background: var(--success-tint); color: var(--success); }
.ic-blue .ic-ico { background: color-mix(in srgb, var(--cat-personal) 14%, transparent); color: var(--cat-personal); }
.ic-intro { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.fault-item { padding: 11px 0; border-bottom: 1px solid var(--border); }
.fault-item:last-child { border-bottom: none; }
/* flex-wrap: bez tego min-content wiersza = szerokość nazwy + CAŁA pigułka .ft-risk (nowrap),
   więc karta .info-card puchła do 308px przy kolumnie 280px. Z zawijaniem pigułka schodzi
   do drugiej linii, gdy zabraknie miejsca. */
.fault-item .ft-top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
.fault-item .ft-name { font-size: 13.5px; font-weight: 700; }
/* Chip wagi usterki. Bez klasy = wygląd „warn" (tak renderują się usterki modelu w #model).
   Z danych: severity → state_class → .ok|.warn|.bad — np. usterka istotna (wynik negatywny) = .bad,
   drobna = .warn, usunięta/wykonana = .ok. */
.fault-item .ft-risk { font-size: 11px; font-weight: 700; color: var(--warning); background: var(--warning-tint); padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.fault-item .ft-risk.warn { color: var(--warning); background: var(--warning-tint); }
.fault-item .ft-risk.ok   { color: var(--success); background: var(--success-tint); }
.fault-item .ft-risk.bad  { color: var(--danger);  background: var(--danger-tint); }
.fault-item .ft-desc { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.qa-list li, .plain-list li { font-size: 13.5px; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--border); position: relative; }
.qa-list li:last-child, .plain-list li:last-child { border-bottom: none; }
.qa-list li::before { content: '?'; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.plain-list.pros li::before { content: '✓'; position: absolute; left: 0; top: 9px; color: var(--success); font-weight: 900; }
.plain-list.cons li::before { content: '!'; position: absolute; left: 2px; top: 8px; color: var(--danger); font-weight: 900; }
.cost-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.cost-row:last-child { border-bottom: none; }
.cost-row .c-val { font-weight: 700; white-space: nowrap; }
/* Lista faktów w info-card (bullet zamiast tabeli cost-row) */
.ic-list { font-size: 13px; }
.ic-list li { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0 8px 18px; border-bottom: 1px solid var(--border); }
.ic-list li:last-child { border-bottom: none; }
.ic-list li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-personal); }
.ic-list li > span:first-child { flex: 1 1 auto; min-width: 0; }
.ic-list .c-val { flex: 0 1 auto; min-width: 0; text-align: right; font-weight: 700; }

/* ---------- Dane producenta ---------- */
.maker-card { display: flex; align-items: center; gap: 22px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; }
.maker-card .mk-badge { width: 70px; height: 70px; border-radius: 18px; background: var(--bg-subtle); color: var(--text-muted); display: grid; place-items: center; flex: none; }
.maker-card .mk-badge svg { width: 42px; height: 42px; }
.maker-card .mk-badge-logo { max-width: 52px; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.maker-card .mk-kv { display: grid; grid-template-columns: repeat(3, auto); gap: 6px 40px; }
.maker-card .mk-kv .k { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }
.maker-card .mk-kv .v { font-size: 15px; font-weight: 700; margin-top: 2px; }

/* timeline na białym tle + separatory + większe ikony już w .tl-node */
.timeline.boxed .tl-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px 16px 78px; margin-bottom: 12px; }
.timeline.boxed .tl-item::before { left: 40px; top: 64px; }
.timeline.boxed .tl-node { left: 18px; top: 16px; }

@media (max-width: 1100px) {
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .datacards, .legal-3 { grid-template-columns: 1fr; }
  .model-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .summary-grid { grid-template-columns: 1fr; }
  .perf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maker-card { flex-direction: column; align-items: flex-start; }
  .maker-card .mk-kv { grid-template-columns: 1fr; }
}

/* =========================================================================
   PRINT / PDF (Playwright: page.pdf po emulateMedia('print'))
   Podział na strony + kolory. Skrypt generujący: gen-pdf-playwright.js.
   ========================================================================= */
@media print {
  /* KLUCZOWE: bez tego Chromium/Playwright NIE drukuje kolorowych teł
     (status-pill, tinty, pasma własności pod wykresem, obramowania kart). */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Pełny override tokenów dla OBU motywów (:root i :root.light) — wydruk
     identyczny niezależnie od aktywnego motywu użytkownika. */
  :root, :root.light {
    --bg: #fff; --bg-elevated: #fff; --bg-subtle: #f4f6f9; --bg-inset: #fafbfc;
    --text: #1d2a38; --text-muted: #4a5868; --text-dim: #6b7a8a;
    --border: #dde4ea; --neutral: #c3ced7;
    --accent: #07a45c; --success: #07a45c; --warning: #9a8200; --danger: #e23b30; --gold: #3a67b1;
    --warning-fill: #fae22d; --warning-ink: #7a5800;
    --brand-yellow: #fae22d; --brand-yellow-edge: #d99400; --brand-yellow-ink: #7a5800;
    --success-tint: rgba(7,164,92,.12); --warning-tint: rgba(250,226,45,.34);
    --danger-tint: rgba(226,59,48,.10); --accent-tint: rgba(7,164,92,.10);
    --cat-personal: #6389da; --cat-leasing: #e89a55; --cat-rental: #9e85dd;
    --shadow-sm: none; --shadow-lg: none;
  }

  .site-header { position: static; }
  /* elementy tylko-interaktywne / zbędne w PDF */
  .subnav, #subnav, .subnav-toggle, .subnav-list, .header-actions, #themeToggle, .icon-btn,
  .btn-cta, .seg, #lightbox, .lightbox, .pg-thumbs { display: none !important; }
  /* ...a skoro miniatury znikają, PDF musi powiedzieć, że reszta zdjęć istnieje online */
  .data-disclaimer.pdf-only { display: flex; }
  /* ...i zdjąć zdania o klikaniu w to, czego w PDF nie ma */
  .screen-only { display: none; }
  [data-tip]::after, [data-tip]::before { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* kolejność sekcji: grid honoruje `order` i fragmentuje pewniej niż flex-column
     (patrz sectionOrderNote — docelowo w RoR: fizyczna kolejność źródła). */
  #top { display: grid; grid-template-columns: 1fr; }

  /* Karty/bloki bez rozrywania między stronami.
     REGUŁA (łamie się cicho przy innych danych — patrz „strażnik" w gen-pdf-playwright.js):
       `break-inside: avoid` wolno dać TYLKO na blok, który ZAWSZE zmieści się na stronie
       (obszar zadruku A4 = 269mm ≈ 1017px @96dpi). Blok wyższy niż strona nie ma dokąd
       „uciec" — Chromium i tak go rozerwie, ale najpierw zostawi po sobie pustą połowę strony.
       Dlatego NIE dawaj avoid na KONTENERY, które rosną z danymi (siatki, panele z listą N
       wierszy) — dawaj na ATOMY: wiersz, kafel, płytę. Kontener ma płynąć przez strony.
     Przykład (naprawiony): .damage-grid w druku układa się w jedną kolumnę i miał 1021px przy
     stronie 1017px — 4px za dużo, więc nigdy się nie mieścił. Po zdjęciu z tej listy raport
     schudł o stronę, a .dmg-figure i tak zostaje w całości (ma własne avoid). */
  .panel, .kpi-card, .hero-banner, .status-pill, .callout, .sum-item, .perf-item,
  /* .info-card ZDJĘTE z listy: rośnie z danymi (model.cards[].items[]). Przy 13 usterkach
     przekracza stronę (zmierzone: 4 poz. = 410px, 12 = 986px, 16 = 1274px przy stronie 1017px)
     i Chromium rozrywa je mimo reguły, zostawiając pustą przestrzeń. Zgodnie z regułą wyżej
     `avoid` trzymają teraz ATOMY karty: .fault-item, .cost-row, .ic-list li, .plain-list li.
     Weryfikacja: check-pdf-layout.js, wariant „3× usterki w kartach modelu". */
  .datacard, .legal-card, .maker-card, .story-callout, .flags-panel, .viz-card,
  .photo-card, .stat-item, .euro-card, .euro-map-card, .euro-legend-card,
  /* .co2-card/.fuel-card = ATOMY (skala CO2 to stałe 7 wierszy A-G, karta paliwa
     to ograniczona lista pól) - bez avoid Chromium rozrywał #emisje w połowie
     skali CO2 między stronami. */
  .co2-card, .fuel-card,
  .odo-row, .tl-item, .dmg-check, .kv, .elz, table.report tr,
  .damage-verdict, .car-diagram, .chart-box, .viz-box,
  .ncap-card, .dmg-figure,
  /* .equip-tag = ATOM (jeden chip, jedna linia) — zgodnie z regułą wyżej wolno mu dać avoid.
     Kontenera .equip-list NIE dodawaj: rośnie z danymi (36 chipów) i ma płynąć przez strony. */
  .equip-tag,
  .fault-item, .cost-row, .ic-list li, .plain-list li, .qa-list li { break-inside: avoid; page-break-inside: avoid; }
  /* BEZ max-height na .car-svg-wrap: limit 300px pochodził od starego rzutu inline-SVG, a rysunek
     z pierścieniem jest wyższy — klamra powodowała wylewanie się poza kontener na kolejne bloki.
     Całość trzyma `break-inside: avoid` na .dmg-figure (wyżej). */

  /* nagłówek nie zostaje sam na końcu strony */
  .section-head, .section-title, h2, h3 { break-after: avoid; }
  /* duże sekcje na dole raportu zaczynają nową stronę (NIE mid-lejek, by nie robić
     pustych stron; NIE pierwsza sekcja) */
  #osiagi, #spec { break-before: page; }
  /* duże liczby-hasła nie mieszczą się w jednej linii na szerokości A4 → mniejsze */
  .story-num { font-size: 23px; line-height: 1.2; }

  .section { padding-block: 20px; border-top: none; }
  /* tabela: pełna (bez scrolla), nagłówek powtarzany na kolejnych stronach */
  .table-wrap { overflow: visible !important; }
  /* mini-wykres roczny: poziome słupki (patrz buildMini w report_charts_controller.js)
     mieszczą się w pełnej szerokości karty bez przewijania - wysokość zostaje ta z JS
     (~26px/wiersz), NIE nadpisujemy jej tu (dawne height:54px ucinało wiersze - dobre
     dla starego pionowego układu, nie dla obecnego poziomego). */
  .kpi-chart { overflow: visible !important; }
  .kpi-chart-inner { min-width: 0 !important; }
  /* skala Euro: w druku ZAWSZE pełne 7 kolumn. Zabezpieczenie na wypadek zmiany
     viewportu w gen-pdf-playwright.js (dziś 696px) poniżej progu 560px — przewijany
     kontener ucinałby w PDF Euro 6 i 7. */
  .euro-track { display: grid !important; grid-template-columns: repeat(7, 1fr) !important;
    overflow: visible !important; padding: 0 !important; margin-inline: 0 !important; }
  table.report thead { display: table-header-group; }

  body { font-size: 12px; }
  /* dolny margines poszerzony (15mm) → miejsce na brandową stopkę PDF (#43,
     footerTemplate w gen-pdf-playwright.js). Boki 13mm zachowane → szerokość
     zadruku bez zmian (viewport 696px w generatorze pozostaje poprawny). */
  @page { size: A4; margin: 13mm 13mm 15mm; }
}

/* =========================================================================
   WARIANT „KATEGORIE" — dwie różne logiki koloru
   ─────────────────────────────────────────────────────────────────────────
   • „Status na pierwszy rzut oka" (.status-grid) = kolor wg STATUSU (werdykt):
       OK 🟢 / do weryfikacji 🟡 / problem 🔴.
       Obsługiwane przez bazowe .status-pill.ok/.warn/.bad — TU NIC nie nadpisujemy.
   • „Podsumowanie — co sprawdziliśmy" (.summary-grid) = kolor wg KATEGORII,
       zbalansowany po ⅓: 🟢 zielone / 🟡 żółte / 🔴 czerwone.
       Kafel ikony + ramka = kolor kategorii.
   Mapowanie po ikonach Tabler.
   ========================================================================= */

/* ---------- PRZEGLĄD HISTORII (sum-items) — kolor = WYNIK (finding), nie kategoria ----------
   Feedback klienta: koloru używamy TYLKO gdy coś wykryto. Czysto = zielony + „brak / nie
   wykryto"; wykryte = żółty/czerwony (klasy .warn/.bad). Robią to bazowe reguły .sum-item —
   kategoryjna „sygnalizacja" (3/3/3 + order) USUNIĘTA. Dla tego auta: wszystko zielone,
   Rozbieżność drogomierza żółta. */

/* =========================================================================
   GALERIA — kafle jak w oryginale (.gallery-grid / .photo-card) + miniatury
   nachodzące na dolną krawędź każdego kafla (podmiana dużego + lightbox).
   ========================================================================= */
.pg-card .pg-large { cursor: zoom-in; }
.pg-card:hover .pg-large { transform: none; }                          /* miniatury na wierzchu — bez hover-zoom obrazu */
.pg-card .photo-badge, .pg-card .photo-zoom { pointer-events: none; }  /* klik przechodzi do zdjęcia = lightbox */
/* miniatury NACHODZĄ na dół kafla (prawy-dolny róg, obok daty po lewej) */
.pg-thumbs { position: absolute; right: 10px; bottom: 10px; left: auto; z-index: 2; display: flex; align-items: stretch; gap: 6px; max-width: calc(100% - 112px); }
.pg-thumbs-track { display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; min-width: 0; scrollbar-width: none; -ms-overflow-style: none; }
.pg-thumbs-track::-webkit-scrollbar { display: none; }
/* Strzałki karuzeli — pojawiają się tylko gdy miniatury się nie mieszczą (klasa .has-overflow z JS) */
.pg-nav { flex: 0 0 auto; display: none; align-items: center; justify-content: center; width: 24px; padding: 0; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: rgba(15, 19, 27, .64); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: background .15s ease, opacity .15s ease; }
.pg-nav svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pg-nav:hover { background: rgba(15, 19, 27, .85); }
.pg-nav:disabled { opacity: .32; cursor: default; }
.pg-thumbs.has-overflow .pg-nav { display: flex; }
.pg-thumb { flex: 0 0 auto; width: 48px; aspect-ratio: 4 / 3; padding: 0; margin: 0; border: 2px solid rgba(255, 255, 255, .92); border-radius: 6px; overflow: hidden; cursor: pointer; background: none; line-height: 0; box-shadow: 0 3px 9px rgba(0, 0, 0, .5); transition: transform .15s ease, border-color .15s ease; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb:hover { transform: translateY(-2px); }
.pg-thumb.is-active { border-color: var(--accent); box-shadow: 0 3px 9px rgba(0, 0, 0, .5), 0 0 0 2px var(--accent); }
.pg-thumb:focus-visible { outline: none; border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
@media (max-width: 600px) { .pg-thumb { width: 42px; } }

/* =========================================================================
   EMISJE — skala Euro 1–7 + strefy czystego transportu
   ========================================================================= */
.euro-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.euro-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.euro-badge { font-size: 15px; font-weight: 800; color: #fff; background: var(--accent); padding: 5px 14px; border-radius: 999px; }
.euro-meta { font-size: 12.5px; color: var(--text-muted); }
.euro-track { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.euro-step { text-align: center; font-size: 14px; font-weight: 800; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 8px; padding: 9px 0 8px; }
.euro-step::before { content: "Euro"; display: block; font-size: 9px; font-weight: 700; letter-spacing: .04em; color: var(--text-dim); }
.euro-step::after { content: attr(data-y); display: block; font-size: 9.5px; font-weight: 600; color: var(--text-dim); margin-top: 3px; }
.euro-step.is-cur { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); transform: translateY(-2px); }
.euro-step.is-cur::before, .euro-step.is-cur::after { color: rgba(255, 255, 255, .85); }
.euro-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); margin: 9px 2px 0; }
.euro-note { font-size: 12.5px; color: var(--text-muted); margin-top: 15px; line-height: 1.5; }
.euro-note b { color: var(--text); font-weight: 700; }

.zones-h { font-size: 16px; font-weight: 800; margin: 26px 0 12px; }
/* Mapa stref niskoemisyjnych (inline SVG Europa + pinezki) + legenda.
   Kolor pinezki/statusu = status wjazdu: .ok 🟢 / .warn 🟡 / .bad 🔴 (API-driven). */
.euro-zones { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: stretch; }
.euro-map-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.euro-map { width: 100%; height: auto; display: block; }
.em-land { fill: var(--bg-subtle); stroke: var(--border); stroke-width: 1.5; stroke-linejoin: round; }
.em-pin circle.dot { stroke: var(--bg-elevated); stroke-width: 2; }
.em-pin circle.halo { opacity: .16; }
.em-pin.ok   circle.dot, .em-pin.ok   circle.halo { fill: var(--success); }
.em-pin.warn circle.dot, .em-pin.warn circle.halo { fill: var(--warning-fill); }
.em-pin.bad  circle.dot, .em-pin.bad  circle.halo { fill: var(--danger); }
.em-label { font-size: 11px; font-weight: 700; fill: var(--text); font-family: var(--font);
  paint-order: stroke; stroke: var(--bg-elevated); stroke-width: 3px; stroke-linejoin: round; }
.euro-map-cap { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; }
.euro-legend-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; }
.euro-legend-card h4 { font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.elz { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.elz:last-child { border-bottom: none; }
.elz-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--success); }
.elz-dot.warn { background: var(--warning-fill); } .elz-dot.bad { background: var(--danger); }
.elz-body { flex: 1; min-width: 0; }
.elz-nm { font-size: 13px; font-weight: 700; }
.elz-nm .cc { font-size: 10px; font-weight: 800; color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.elz-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.elz-st { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; flex: none; }
.elz-st.ok { background: var(--success-tint); color: var(--success); }
.elz-st.warn { background: var(--warning-tint); color: var(--warning); }
.elz-st.bad { background: var(--danger-tint); color: var(--danger); }
.elz-dot.plan { background: var(--text-dim); }
.elz-st.plan { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border); }
.zones-note { font-size: 12px; color: var(--text-dim); margin-top: 12px; }
/* SCT (mapa Polski): pinezki „planowane" — wyszarzone */
.em-pin.plan circle.dot, .em-pin.plan circle.halo { fill: var(--text-dim); }
.em-label.plan { font-size: 9.5px; fill: var(--text-muted); font-weight: 600; }

/* #8: klasa emisji CO₂ (A–G) + zużycie paliwa */
.emis-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 16px; }
.co2-card, .fuel-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; }
.co2-card h4, .fuel-card h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.co2-scale { display: grid; gap: 4px; }
.co2-row { display: flex; align-items: center; gap: 10px; height: 26px; border-radius: 5px; padding: 0 11px;
  color: #fff; font-weight: 800; font-size: 13px; }
.co2-row .co2-r { font-size: 11px; font-weight: 700; opacity: .95; }
.co2-row.a { background: #1a9850; width: 46%; }
.co2-row.b { background: #66bd63; width: 55%; }
.co2-row.c { background: #a6d96a; width: 64%; color: #1d2a38; }
.co2-row.d { background: #fee08b; width: 73%; color: #1d2a38; }
.co2-row.e { background: #fdae61; width: 82%; color: #1d2a38; }
.co2-row.f { background: #f46d43; width: 91%; }
.co2-row.g { background: #d73027; width: 100%; }
.co2-row.is-cur { outline: 2.5px solid var(--text); outline-offset: 2px; }
.co2-ptr { margin-left: auto; background: #16181d; color: #fff; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.co2-note { font-size: 11.5px; color: var(--text-muted); margin-top: 13px; }
.fuel-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.fuel-row:last-of-type { border-bottom: none; }
.fuel-row .fuel-k { color: var(--text-muted); }
.fuel-row .fuel-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.fuel-row .fuel-v .u { font-size: 11px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.fuel-note { font-size: 11px; color: var(--text-dim); margin-top: 11px; }
/* Koszt paliwa / 100 km (Miasto/Trasa/Mieszane) */
.fuel-cost { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--border); }
.fuel-cost .fc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.fuel-cost .fc-t { font-size: 13px; font-weight: 800; color: var(--text); }
.fuel-cost .fc-assume { font-size: 10px; color: var(--text-dim); font-weight: 600; }
.fuel-cost .fc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fuel-cost .fc-item { background: var(--bg-inset); border: 1px solid var(--border); border-radius: 10px; padding: 9px 6px; text-align: center; display: flex; flex-direction: column; gap: 3px; }
.fuel-cost .fc-mix { border-color: var(--success); background: var(--success-tint); }
.fuel-cost .fc-mode { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.fuel-cost .fc-cost { font-size: 17px; font-weight: 800; color: var(--success); font-variant-numeric: tabular-nums; }
.fuel-cost .fc-l { font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .emis-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .euro-zones { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .euro-track { gap: 4px; } .euro-step { font-size: 12.5px; padding: 8px 0 6px; } }

/* =========================================================================
   KOLEJNOŚĆ SEKCJI — lejek kupującego: werdykt → ryzyka → wartość → galeria → dane.
   Reorder przez flex-order (bez przenoszenia bloków HTML). #verdict + baner alertu
   + pasek statów zostają na górze (order:0, w kolejności źródła).
   ========================================================================= */
#top { display: flex; flex-direction: column; }
/* Sekcja NIGDY nie może być szersza od ekranu. Jako flex-item ma domyślnie min-width:auto,
   czyli nie zejdzie poniżej swojego min-content — a wtedy puchnie CAŁA sekcja i razem z nią
   nagłówek, eyebrow i lead (mierzone: #inspections 678px, #mileage 390px przy ekranie 360px),
   co wygląda jak ucięte karty po prawej. Z min-width:0 treść musi się zawinąć albo przewinąć
   we własnym kontenerze (.table-wrap, .euro-track) — i to jest zachowanie docelowe. */
#top > section { min-width: 0; max-width: 100%; }
/* Kolejność ekranowa wg menu klienta (V2). #verdict + pasek statów + baner alertu = order:0. */
#verdict             { order: 0; }
#summary             { order: 1; }
#metrics             { order: 2; }   /* Kluczowe dane */
#gallery             { order: 3; }   /* Galeria */
#historia            { order: 4; }   /* Historia pojazdu */
#mileage             { order: 5; }   /* Przebieg i własność */
#emisje              { order: 6; }   /* Emisja i SCT */
#rejestracja         { order: 7; }   /* Status prawny */
#rejestracja-tablice { order: 8; }   /* Rejestracja (tablice) */
#damage              { order: 9; }  /* Szkody */
#kradziez            { order: 10; }  /* Kradzież */
#inspections         { order: 11; }  /* Przeglądy */
#komercyjne          { order: 12; }  /* Użytkowanie komercyjne */
#maintenance         { order: 13; }  /* Serwis i naprawy */
#producent           { order: 14; }
#spec                { order: 15; }  /* Specyfikacja + Wyposażenie */
#value               { order: 16; }  /* Wartość */
#osiagi              { order: 17; }
#bezpieczenstwo      { order: 18; }
#recalls             { order: 19; }  /* Akcje serwisowe */
#model               { order: 20; }  /* Charakterystyka */
/* Panele modułu "Aktualizuj raport" (patrz reports/sections/_refill.erb) - bez
   tych reguł dziedziczą domyślne order:0, więc wszystkie trzy lądowały razem
   z #verdict na samej górze, przed #summary. Elementy flex o RÓWNYM `order`
   zachowują kolejność źródła WZGLĘDEM SIEBIE (spec CSS Flexbox §5.4) - stąd
   te same wartości co sąsiad, którego panel ma poprzedzać/za którym ma
   stanąć, zamiast osobnej numeracji. */
#refill-hero         { order: 0; }   /* "Aktualizuj raport" 1/3 - przed #verdict (ten sam order, hero jest wcześniej w DOM) */
#refill-emisje       { order: 6; }   /* "Aktualizuj raport" 2/3 - przed #emisje (ten sam order, wcześniej w DOM) */
#refill-koniec       { order: 20; }  /* "Aktualizuj raport" 3/3 - po #model (ten sam order, później w DOM) */

/* =========================================================================
   MOBILE — dopracowanie ciasnych miejsc (audyt responsywności)
   ========================================================================= */
/* Zabezpieczenie przed poziomym przewinięciem (tooltipy [data-tip]::after przy krawędzi).
   `clip`, NIE `hidden`: `overflow-x: hidden` wymusza `overflow-y: auto`, przez co html/body
   stają się kontenerem przewijania i UNIEWAŻNIAJĄ `position: sticky` u potomków — na mobile
   ani .site-header, ani .subnav nie przyklejały się do góry (na desktopie działały, bo tej
   reguły tam nie ma). `clip` przycina tak samo, ale nie tworzy kontenera przewijania. */
@media (max-width: 720px) { html, body { overflow-x: clip; } }
/* Na telefonie przykleja się TYLKO menu sekcji. Header (logo, przełącznik widoku, motyw,
   PDF) jest potrzebny raz na wejściu, a razem z menu zjadał 114px = 14% ekranu 844px.
   Odklejony header → pasek schodzi do 49px (6%). `top: 0` na .subnav jest konieczne:
   64px było odsunięciem pod przyklejony header, którego już nie ma.
   scroll-padding-top schodzi ze 130px do 66px, żeby skok z menu nie zostawiał pustki. */
@media (max-width: 720px) {
  .site-header { position: static; }
  /* Pełne, nieprzezroczyste tło: półprzezroczystość + blur na desktopie ładnie prześwituje,
     ale na telefonie pasek ma tylko 49px i treść przewijająca się pod nim (nagłówki sekcji)
     czytała się przez rozmycie jak zabrudzenie. backdrop-filter zdjęty — przy krytym tle
     nic nie robi, a kosztuje warstwę kompozytową przy każdym przewinięciu. */
  .subnav {
    top: 0;
    background: var(--bg);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  html { scroll-padding-top: 66px; }
}
/* Czytelniejsze teksty na mobile — prośba klienta.
   PODŁOGA TYPOGRAFICZNA (≤560px), trzy warstwy — trzymaj się jej przy nowych komponentach:
     1. tekst czytany w całości (opisy, notki)      → 13,5px
     2. etykieta opisująca liczbę/wartość, chip     → 13px
     3. mikro-oznaczenie (pigułka, jednostka, skala) → 12px  ← absolutne minimum
   UWAGA na SPECYFICZNOŚĆ: bazowe reguły komponentów są często 0,2,0 (`.sum-item .si-note`,
   `.odo-row .od-src`, …). Selektor 0,1,0 w tym bloku PRZEGRA mimo @media i bump zniknie
   po cichu — dlatego poniżej powtórzony jest pełny selektor bazowy. Po każdej zmianie
   sprawdź realny computed font-size w przeglądarce, nie sam zapis reguły. */
@media (max-width: 560px) {
  /* --- 1. teksty czytane w całości --- */
  .section-sub { font-size: 15.5px; }
  .si-note, .kpi-sub, .pill-value, .tl-desc, .story-sub, .euro-note, .zones-note, .elz-desc,
  .verdict-desc, .callout p, .co2-note, .fuel-note { font-size: 13.5px; }
  .ph-note, .gallery-note, .foot-col p, .equip-tag { font-size: 13.5px; }
  .viz-card .viz-hint, .fault-item .ft-desc,
  .legal-disclaimer .ld-body p { font-size: 13.5px; }

  /* --- 2. etykiety wartości / nagłówki pozycji --- */
  .si-label, .pill-label, .elz-nm { font-size: 15px; }
  .sum-item .si-label { font-size: 15px; }            /* 0,2,0 — patrz uwaga wyżej */
  .sum-item .si-note  { font-size: 13.5px; }          /* 0,2,0 — j.w. */
  .kpi-label, .sm-tile, .summary-hint, .tl-date { font-size: 13px; }
  .stat-item .stat-label, .perf-item .pf-lbl, .odo-row .od-src,
  .legal-card .lc-s, .country-chip .cc-name, .spec-cell .sc-lbl { font-size: 13px; }
  .spec-cell .sc-val { font-size: 15px; }

  /* --- 3. mikro-oznaczenia: podłoga 12px --- */
  .badge, .kpi-trend, .pill-tag, .elz-st, .euro-legend, .euro-map-cap,
  .ph-badge { font-size: 12px; }
  .fault-item .ft-risk, .co2-row .co2-r, .elz-nm .cc, .plate .pl-cc,
  .dmg-check .src, .fuel-cost .fc-l { font-size: 12px; }
  .fuel-cost .fc-assume, .fuel-cost .fc-mode { font-size: 11.5px; }
}
/* tap-targety ≥ 40px */
@media (max-width: 720px) {
  .seg a { min-height: 40px; }
  .icon-btn { width: 40px; height: 40px; }
}
/* hero: mniejsze paddingi, mniej marnowanej szerokości */
@media (max-width: 560px) {
  .hero-banner { padding: 22px 18px; gap: 22px; }
  .hero-id .verdict-headline { margin-top: 10px; }
}
/* pasek statów + osiągi na najwęższych ekranach */
@media (max-width: 430px) {
  .stat-item { padding: 14px 13px; }
  .stat-item .stat-num { font-size: 20px; }
  .stat-item .stat-num .u { font-size: 11px; }
  .perf-grid { grid-template-columns: 1fr; }
}
/* Skala Euro (7 kroków) na wąskim ekranie.
   Wcześniej skala ściskała się do 7 kolumn kosztem pisma (8px — nieczytelne). Teraz
   odwrotnie: kroki są WIĘKSZE niż na desktopie, a skala przewija się w poziomie;
   `euroTrackFocus()` w script.js ustawia widok na aktualnej normie. Wierszy/zawijania
   NIE robimy — skala Euro jest z definicji jedną osią „starsze → nowsze".

   PRÓG 560px, NIE 700px: gen-pdf-playwright.js renderuje przy viewportcie 696px, więc
   blok ≤700px trafia także do PDF. Przewijany kontener w PDF ucina Euro 6 i 7 — druk
   musi zostać przy siatce 7 kolumn (patrz też zabezpieczenie w @media print). */
@media (max-width: 560px) {
  .euro-track {
    display: flex; gap: 8px;
    /* width:0 + min-width:100% — BEZ tego szerokość treści toru (7 × 74px = 566px)
       rozpycha .euro-card i całą sekcję #emisje (mierzone: 652px przy ekranie 390px)
       zamiast uruchomić przewijanie. `width:0` zeruje wkład toru w szerokość rodzica,
       `min-width:100%` rozciąga go z powrotem do szerokości karty. Samo min-width:0
       na .section nie działa — sekcja i tak puchnie od treści (sprawdzone). */
    width: 0; min-width: 100%;
    overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    /* overflow-x przycina też w pionie → miejsce na uniesiony .is-cur i jego cień */
    padding: 6px 2px 10px; margin-inline: -2px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .euro-track::-webkit-scrollbar { height: 4px; }
  .euro-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
  .euro-step { flex: 0 0 auto; min-width: 74px; font-size: 18px; padding: 11px 10px 10px; }
  .euro-step::before { font-size: 11px; }
  .euro-step::after { font-size: 11.5px; margin-top: 4px; }
}

/* =========================================================================
   EMPTY STATES — placeholdery gdy brak danych (dla wersji produkcyjnej)
   Zasada: pola tekstowe → jawny wpis „Brak danych", BEZ rozmycia (wpis ma być zawsze
   czytelny — rozmycie danych zostało odrzucone); brak zdjęcia hero → ramka z logo;
   brak zdjęć w galerii → sekcja #gallery NIE renderuje się wcale (galeria nie ma
   stanu pustego). W RoR renderowane warunkowo (np. `if vehicle.hero_photo.blank?`).
   Demo: podglad-brak-danych.html. MIGRATION.md.
   ========================================================================= */
/* (A) Ramka z logo — zamiast zdjęcia hero, gdy brak zdjęcia. Logo wstawiane jako <img>
   w markupie (patrz katalog na górze index.html), NIE inline <svg> — dlatego nie ma tu
   reguły na svg. Jedyny placeholder dla zdjęć: galeria bez zdjęć NIE renderuje się wcale. */
.photo-fallback { width: 340px; max-width: 100%; aspect-ratio: 340 / 200; border-radius: 16px;
  border: 1px dashed var(--neutral); background: var(--bg-subtle);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--text-dim); padding: 14px; }
.photo-fallback .pf-note { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

/* (B) Brak wartości pola — placeholder „Brak danych" (pola kluczowe) */
.nodata { color: var(--text-dim); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.nodata::before { content: "—"; color: var(--neutral); font-weight: 900; }
.nodata.tag { font-size: 11px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
/* rozmyta wartość — sygnał „dane zwykle tu są" bez ujawniania (reuse blur) */
.val-blur { filter: blur(5px); user-select: none; opacity: .6; }

/* (C) Disclaimer „dane niedostępne" — blok wyjaśniający, że sekcja/pole będzie
   uzupełnione z VIN/API w wersji produkcyjnej (przerywana ramka = placeholder). */
.data-disclaimer { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-top: 14px;
  background: var(--bg-inset); border: 1px dashed color-mix(in srgb, var(--neutral) 55%, transparent);
  border-radius: 12px; font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.data-disclaimer svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; margin-top: 1px; }
.data-disclaimer b { color: var(--text); font-weight: 700; }
/* Para „tylko PDF" / „tylko ekran" — treść, która jest PRAWDZIWA tylko w jednym medium.
   .pdf-only  → widoczne wyłącznie w druku (dziś: notka „reszta zdjęć jest online" pod galerią).
                Na ekranie nie ma sensu — czytelnik JEST online i widzi miniatury.
                Reguła w @media print jest bardziej szczegółowa (0,2,0 > 0,1,0) → wygrywa bez !important.
   .screen-only → znika w druku. Dla zdań o KLIKANIU i o elementach, których w PDF nie ma
                (miniatury są `display:none` w druku) — w PDF taka instrukcja to ściema.
                W RoR: osobne klucze I18n dla widoku print, zamiast chowania tekstu CSS-em. */
.pdf-only { display: none; }
/* (D) WIZUALIZACJA NIEDOSTĘPNA — placeholder w miejsce wykresu/mapy, gdy widget
   ma częściowe dane, ale sama grafika nie może powstać (np. jest średni przebieg,
   brak rozbicia po latach → #miniYearly). Wstawiać ZAMIAST <canvas>. */
.chart-empty { height: 100%; min-height: 120px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 18px;
  border: 1px dashed color-mix(in srgb, var(--neutral) 60%, transparent);
  border-radius: 12px; background: var(--bg-inset); }
.chart-empty svg { width: 30px; height: 30px; color: var(--text-dim); opacity: .85; }
.chart-empty .ce-title { font-size: 13px; font-weight: 700; color: var(--text); }
.chart-empty .ce-sub { font-size: 12px; color: var(--text-muted); max-width: 42ch; line-height: 1.45; }
/* wariant kompaktowy — mini-sloty typu .kpi-chart (~54px), układ w rzędzie */
.chart-empty.compact { min-height: 0; flex-direction: row; gap: 8px; padding: 10px 12px; text-align: left; }
.chart-empty.compact svg { width: 18px; height: 18px; }
.chart-empty.compact .ce-title { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* Bezpieczeństwo — sekcja #bezpieczenstwo zawiera WYŁĄCZNIE ocenę Euro NCAP (.ncap-card
   albo .data-disclaimer). BEZ siatki akcesoriów (.safe-grid/.safe-item/.sf-*) — systemy
   bezpieczeństwa są w jednej liście wyposażenia .equip-list w #spec. */
/* Bezpieczeństwo — wariant z Euro NCAP (paski wyników + gwiazdki) */
.ncap-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; }
.ncap-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.ncap-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ncap-stars { display: flex; align-items: center; gap: 3px; margin-top: 7px; color: var(--brand-yellow-edge); }
.ncap-stars svg { width: 19px; height: 19px; }
/* Skala zawsze 5 gwiazdek — brakujące renderuj jako <svg class="off">,
   inaczej 3/5 wygląda jak 3/3. */
.ncap-stars svg.off { color: var(--neutral); }
.ncap-stars .ncap-rate { font-size: 15px; font-weight: 800; color: var(--text); margin-left: 8px; }
.ncap-year { font-size: 12px; color: var(--text-dim); white-space: nowrap; text-align: right; }
.ncap-note { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }
.ncap-scores-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); padding-top: 14px; border-top: 1px solid var(--border); margin-bottom: 12px; }
.ncap-scores { display: grid; gap: 11px; }
.nc-row { display: grid; grid-template-columns: 182px 1fr 44px; align-items: center; gap: 12px; }
.nc-lbl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
/* Kategoria NCAP to nie status — chip neutralny (--bg-subtle/--text-muted), kolor niesie pasek. */
.nc-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--bg-subtle); color: var(--text-muted); }
.nc-ico svg { width: 19px; height: 19px; }
.nc-track { height: 8px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; display: block; }
.nc-track i { display: block; height: 100%; border-radius: 999px; background: var(--success); }
.nc-track i.mid { background: var(--warning-fill); }   /* status „warn" = jasny fill (NIE --brand-yellow* — patrz reguła przy tokenach) */
.nc-track i.low { background: var(--danger); }
.nc-val { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .nc-row { grid-template-columns: 108px 1fr 40px; } .nc-ico { display: none; } }

/* =========================================================================
   MODUŁ "AKTUALIZUJ RAPORT" (refill) — panel w treści (renderowany 3x, patrz
   reports/sections/_refill.erb) + pływający widżet (_refill_float.erb).
   Port 1:1 z prototypu raport-vin/update-report-form/update-report-form.css —
   zależy WYŁĄCZNIE od tokenów już zdefiniowanych wyżej w tym pliku
   (--brand-yellow*, --accent*, --text*, --bg*, --border, --danger, --neutral)
   i klasy .btn-cta. `.screen-only { display:none }` w @media print (patrz
   blok PRINT / PDF wyżej) już chowa te elementy w druku — nic do dopisania.
   #top używa flex + order (patrz blok "KOLEJNOŚĆ SEKCJI" wyżej) - reguły
   order dla #refill-hero/-emisje/-koniec siedzą TAM, obok reszty sekcji, nie
   tutaj (bez nich panele dziedziczą order:0 i lądują razem z #verdict).
   ========================================================================= */
.refill { margin: 22px auto 0; }
#refill-koniec.refill { margin: 34px auto 10px; }
.refill-card {
  background: color-mix(in srgb, var(--brand-yellow) 9%, var(--bg-elevated));
  border: 1.5px solid color-mix(in srgb, var(--brand-yellow-edge) 55%, transparent);
  border-radius: var(--radius); padding: 24px 26px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-yellow) 10%, transparent),
              0 18px 44px -16px color-mix(in srgb, var(--brand-yellow-edge) 62%, transparent);
}
.refill-head { display: flex; align-items: flex-start; gap: 18px; }
.refill-ico { width: 54px; height: 54px; border-radius: 15px; flex: none; display: grid; place-items: center;
  background: var(--brand-yellow); color: #1c2a38; }
.refill-ico svg { width: 30px; height: 30px; }
.refill-copy { flex: 1; min-width: 0; }
.refill-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--brand-yellow); margin-bottom: 3px; }
:root.light .refill-eyebrow { color: var(--brand-yellow-ink); }
.refill-title { font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.refill-lead { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-top: 5px; max-width: 78ch; }

.refill-clock { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.rc-val { font-size: 30px; font-weight: 900; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--brand-yellow); }
:root.light .rc-val { color: var(--brand-yellow-ink); }
.rc-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim); font-weight: 700; }
.refill.is-soon .rc-val,
:root.light .refill.is-soon .rc-val { color: var(--danger); }

.refill-form[hidden], .refill-expired[hidden], .refill-sent[hidden], .refill-retry-failed[hidden] { display: none; }
.refill-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.rf-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rf-lbl { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.rf-field input {
  height: 44px; padding: 0 13px; border-radius: 10px; width: 100%; min-width: 0;
  background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--brand-yellow-edge) 32%, var(--border)); color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 600; transition: border-color .15s, box-shadow .15s;
}
.rf-field input::placeholder { color: var(--text-dim); font-weight: 500; text-transform: none; letter-spacing: normal; }
.rf-field input:focus-visible { outline: none; border-color: var(--brand-yellow-edge);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-yellow-edge) 34%, transparent); }
/* VIN jest już potwierdzony (to on trafił do fallbacku AutoISO) - pole jest
   `readonly`, nie edytowalne; wygląd ma to sygnalizować zamiast udawać zwykłe
   puste pole do wypełnienia. */
.rf-field input:read-only { background: var(--bg-subtle); color: var(--text-muted); cursor: default; }
.rf-field input:read-only:focus-visible { box-shadow: none; border-color: color-mix(in srgb, var(--brand-yellow-edge) 32%, var(--border)); }
.rf-field input[data-refill-input="vin"],
.rf-field input[data-refill-input="registration_identifier"] { text-transform: uppercase; letter-spacing: .06em; }
.rf-field.is-invalid input { border-color: var(--danger); }
.rf-err { font-size: 11.5px; color: var(--danger); min-height: 14px; line-height: 1.25; }

.rf-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rf-submit { cursor: pointer; }
.rf-submit[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.rf-hint { font-size: 12px; color: var(--text-dim); }

.refill.is-expired .refill-card { border-top-color: var(--neutral); opacity: .75; }
.refill.is-expired .refill-ico { background: var(--bg-subtle); color: var(--text-dim); }
.refill.is-expired .refill-clock { display: none; }
.refill.is-expired .refill-lead { display: none; }
.refill-expired { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.refill-expired svg { width: 18px; height: 18px; color: var(--text-dim); flex: none; margin-top: 1px; }
.refill-expired b { color: var(--text); font-weight: 700; }

.refill-sent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.refill-sent svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.refill-sent b { color: var(--text); font-weight: 700; }

/* Serwer odpytał dostawców ponownie, ale dalej nie potwierdził danych
   (VehicleDataReceivedWorker.handle_not_found zostawia poprzedni aktywny
   raport bez zmian) - refill_controller.js chowa .refill-sent i odsłania
   z powrotem formularz, żeby klient mógł poprawić dane w tym samym oknie. */
.refill-retry-failed { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.refill-retry-failed svg { width: 18px; height: 18px; color: var(--warning); flex: none; margin-top: 1px; }
.refill-retry-failed b { color: var(--text); font-weight: 700; }

@media (max-width: 860px) {
  .refill-form { grid-template-columns: 1fr 1fr; }
  .rf-actions { flex-direction: column; align-items: stretch; }
  .rf-submit { justify-content: center; }
}
@media (max-width: 560px) {
  .rf-submit span { display: inline; }
  .refill-form { grid-template-columns: 1fr; }
  .refill-head { flex-wrap: wrap; }
  .refill-clock { text-align: left; align-items: flex-start; width: 100%; flex-direction: row; align-items: baseline; gap: 8px; }
}

/* ---------- Pływający widżet douzupełnienia ---------- */
.refill-float { position: fixed; z-index: 90; right: clamp(14px, 3vw, 26px); bottom: clamp(14px, 3vw, 26px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.refill-float.is-expired { display: none; }

.rfl-toggle { display: inline-flex; align-items: center; gap: 11px; cursor: pointer;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--brand-yellow-edge) 55%, var(--border));
  border-radius: 999px; padding: 9px 16px 9px 11px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-yellow) 12%, transparent),
              0 12px 30px -12px color-mix(in srgb, var(--brand-yellow-edge) 55%, transparent);
  transition: transform .18s ease, box-shadow .18s ease; }
.rfl-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(8, 18, 14, .5); }
.rfl-ico { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand-yellow); color: #1c2a38; }
.rfl-ico svg { width: 19px; height: 19px; }
.rfl-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.rfl-lbl { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.rfl-time { font-size: 17px; font-weight: 900; letter-spacing: -.02em; color: var(--brand-yellow);
  font-variant-numeric: tabular-nums; }
:root.light .rfl-time { color: var(--brand-yellow-ink); }
.refill-float.is-soon .rfl-time,
:root.light .refill-float.is-soon .rfl-time { color: var(--danger); }
.refill-float.is-soon .rfl-ico { background: var(--danger); color: #fff; }
.rfl-caret { color: var(--text-dim); display: grid; place-items: center; transition: transform .2s ease; }
.rfl-caret svg { width: 17px; height: 17px; }
.refill-float:not(.is-open) .rfl-caret { transform: rotate(180deg); }

.rfl-panel { width: min(370px, calc(100vw - 28px));
  background: color-mix(in srgb, var(--brand-yellow) 9%, var(--bg-elevated));
  border: 1.5px solid color-mix(in srgb, var(--brand-yellow-edge) 55%, transparent);
  border-radius: var(--radius); padding: 16px 18px 18px;
  box-shadow: 0 22px 50px -18px color-mix(in srgb, var(--brand-yellow-edge) 60%, transparent); }
.rfl-panel[hidden] { display: none; }
.rfl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rfl-title { font-size: 15px; font-weight: 800; }
.rfl-close { cursor: pointer; background: none; border: 0; color: var(--text-dim); padding: 4px; border-radius: 8px;
  display: grid; place-items: center; }
.rfl-close:hover { color: var(--text); background: var(--bg-subtle); }
.rfl-close svg { width: 18px; height: 18px; }
.rfl-lead { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin-top: 6px; }
.rfl-form { grid-template-columns: 1fr; margin-top: 14px; gap: 11px; }
.rfl-form .rf-actions { flex-direction: column; align-items: stretch; gap: 8px; }
.rfl-form .rf-submit { justify-content: center; width: 100%; }
.rfl-form .rf-hint { text-align: center; }

@media (max-width: 560px) {
  .refill-float { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .rfl-toggle { justify-content: flex-start; width: 100%; }
  .rfl-caret { margin-left: auto; }
  .rfl-panel { width: 100%; max-height: min(70vh, 520px); overflow-y: auto; }
}

/* ---------- Pasek etykiety nad kartą ---------- */
.refill-trial { display: flex; align-items: center; gap: 9px; margin: -8px 0 14px;
  padding-bottom: 10px; border-bottom: 1px dashed color-mix(in srgb, var(--brand-yellow-edge) 45%, transparent); }
.rt-tag { font-size: 11px; font-weight: 800; letter-spacing: .03em;
  background: var(--brand-yellow); color: #1c2a38; padding: 3px 8px; border-radius: 5px; }
.refill[hidden], .refill-float[hidden] { display: none; }