:root {
  --bg-void: #090A0F;
  --bg-surface: #12151E;
  --bg-surface-elevated: #181C28;
  --bg-glass: rgba(18, 21, 30, 0.78);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.18);
  --text-primary: #F3F4F8;
  --text-secondary: #9CA3B5;
  --text-muted: #7C849A; /* było #687086 — kontrast 4,0:1, teraz 4,6–5,3:1 (WCAG AA) */

  --accent-sztos: #10B981;
  --accent-sztos-text: #34D399;
  --accent-sztos-bg: rgba(16, 185, 129, 0.14);
  --accent-sztos-border: rgba(16, 185, 129, 0.35);

  --accent-slop: #F43F5E;
  --accent-slop-text: #FB7185;
  --accent-slop-bg: rgba(244, 63, 94, 0.14);
  --accent-slop-border: rgba(244, 63, 94, 0.35);

  --accent-lab: #38BDF8;
  --accent-lab-text: #7DD3FC;
  --accent-lab-bg: rgba(56, 189, 248, 0.14);
  --accent-lab-border: rgba(56, 189, 248, 0.35);

  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  --radius-xl: 20px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 40px -15px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-card-hover: 0 24px 52px -12px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  color-scheme: dark;
}

body {
  background-color: var(--bg-void);
  background-image:
    radial-gradient(ellipse 75% 45% at 25% 0%, rgba(16, 185, 129, 0.11), transparent 65%),
    radial-gradient(ellipse 75% 45% at 80% 5%, rgba(244, 63, 94, 0.10), transparent 65%);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Równiejszy prawy brzeg i bez pojedynczego słowa w ostatnim wierszu (Chrome/Edge/Safari; reszta ignoruje).
   Wiszące spójniki (a, i, o, u, w, z) obsługuje initPolishTypography() w app.js. */
p,
li {
  text-wrap: pretty;
}

h2,
h3 {
  text-wrap: balance;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

:focus-visible {
  outline: 2px solid var(--accent-lab);
  outline-offset: 3px;
}

.shell {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* TOP GLASS MASTHEAD */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-glass);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 30;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  padding: 0.3rem 0.75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--tint-rgb), 0.1) 0%, rgba(var(--tint-rgb), 0.03) 100%);
  border: 1px solid var(--border-hover);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.brand-mark span.dot {
  color: var(--accent-sztos-text);
}

/* Logo „TOP CZY SLOP?”: słowa rozdzielone kolorem (zielony top, szary „czy”, czerwony slop) */
.brand-mark {
  white-space: nowrap;
}

.brand-mark .brand-top {
  color: var(--accent-sztos-text);
}

.brand-mark .brand-czy {
  color: var(--text-muted);
}

.brand-mark .brand-slop {
  color: var(--accent-slop-text);
}

.edition-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.masthead-stats {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.75rem;
  background-color: rgba(var(--tint-rgb), 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  white-space: nowrap;
}

.stat-pill strong {
  color: var(--text-primary);
  font-weight: 700;
}

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

/* Ogólna klasa ukrywania (używa jej m.in. 3. warstwa suwaka w Labie) */
.hidden {
  display: none !important;
}

/* BUTTONS & BADGES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background-color: rgba(var(--tint-rgb), 0.04);
  color: var(--text-primary);
  transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover {
  background-color: rgba(var(--tint-rgb), 0.09);
  border-color: var(--border-hover);
  transform: translateY(-1px);
}

.btn-sztos {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #04130E;
  border-color: rgba(52, 211, 153, 0.5);
  font-weight: 700;
  box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.45);
}

.btn-sztos:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  color: #04130E;
  box-shadow: 0 12px 26px -6px rgba(16, 185, 129, 0.65);
}

.btn-slop {
  background: linear-gradient(135deg, #F43F5E 0%, #E11D48 100%);
  color: #FFFFFF;
  border-color: rgba(251, 113, 133, 0.5);
  font-weight: 700;
}

.btn-ink {
  background-color: var(--bg-surface-elevated);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.badge-sztos,
.badge-slop,
.badge-lab {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-sztos {
  background-color: var(--accent-sztos-bg);
  color: var(--accent-sztos-text);
  border: 1px solid var(--accent-sztos-border);
}

.badge-slop {
  background-color: var(--accent-slop-bg);
  color: var(--accent-slop-text);
  border: 1px solid var(--accent-slop-border);
}

.badge-lab {
  background-color: var(--accent-lab-bg);
  color: var(--accent-lab-text);
  border: 1px solid var(--accent-lab-border);
}

/* SCENE 1: CINEMA HERO HEADER */
/* Hero: nagłówek na całą szerokość, pod nim opis + przyciski */
.hero-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 3.25rem 0.5rem 2.5rem;
}

.hero-headline-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.kicker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.3vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
}

.hero-title mark.sztos {
  background: none;
  color: var(--accent-sztos-text);
  text-shadow: 0 0 32px rgba(16, 185, 129, 0.35);
}

.hero-title mark.slop {
  background: none;
  color: var(--accent-slop-text);
  text-shadow: 0 0 32px rgba(244, 63, 94, 0.35);
}

/* Od 900 px nagłówek w jednej linii: szerokość tekstu ≈ 24,7 × font-size (Space Grotesk 700),
   więc font-size = dostępna szerokość / 25, maks. 3.2rem (szerokość .shell 1380 px). */
@media (min-width: 900px) {
  .hero-title {
    white-space: nowrap;
    font-size: min(3.2rem, calc((100vw - 96px) / 25));
  }
}

/* Pod nagłówkiem: przyciski w jednej linii, opis schowany pod „Więcej” */
.hero-manifesto-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding-bottom: 0.25rem;
}

.hero-lead {
  max-width: 72ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.hero-lead strong {
  color: var(--text-primary);
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: flex-start;
}

.hero-cta-row .btn {
  white-space: nowrap;
  padding: 0.55rem 0.9rem;
  font-size: 0.75rem;
  line-height: 1.55; /* <button> nie dziedziczy line-height — wyrównanie z linkami */
}

.cta-short {
  display: none;
}

/* Telefon: trzy przyciski hero w jednym rzędzie (krótsza etykieta archiwum) */
@media (max-width: 680px) {
  .hero-cta-row {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .hero-cta-row .btn {
    padding: 0.5rem 0.75rem;
  }

  .cta-long {
    display: none;
  }

  .cta-short {
    display: inline;
  }
}

/* Najwęższe telefony (< 375 px): trzy przyciski się nie mieszczą — zawijamy zamiast wychodzić poza ekran */
@media (max-width: 374px) {
  .hero-cta-row {
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .hero-cta-row {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

/* DUEL OF THE DAY BENTO STAGE */
.duel-banner {
  margin-bottom: 2.5rem;
}

.duel-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.duel-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.25rem;
  align-items: stretch;
}

.duel-card {
  background: linear-gradient(180deg, rgba(var(--tint-rgb), 0.04) 0%, rgba(var(--tint-rgb), 0.0) 100%), var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.duel-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}

.duel-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.vs-medallion {
  background: radial-gradient(circle at 30% 30%, #262B3D, #0E1017);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

.duel-media-wrap {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-well);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  cursor: pointer;
}

.duel-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.duel-card:hover .duel-media-wrap img {
  transform: scale(1.03);
}

/* GLASS VERDICT STAMP */
.verdict-stamp {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 4;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.verdict-stamp.stamp-sztos {
  background-color: rgba(6, 78, 59, 0.85);
  color: #6EE7B7;
  border: 1px solid rgba(52, 211, 153, 0.45);
}

.verdict-stamp.stamp-slop {
  background-color: rgba(136, 19, 55, 0.85);
  color: #FDA4AF;
  border: 1px solid rgba(251, 113, 133, 0.45);
}

.verdict-stamp.stamped-anim {
  transform: scale(1.16);
}

.code-chip {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: rgba(9, 10, 15, 0.82);
  backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hover);
  z-index: 4;
}

.hotspot-count-pill {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background-color: rgba(9, 10, 15, 0.84);
  backdrop-filter: blur(10px);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.24rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
}

/* SLOP-O-METER BAR */
.slop-meter-box {
  background-color: rgba(var(--tint-rgb), 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.meter-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.meter-track {
  width: 100%;
  height: 8px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #E11D48, #F43F5E);
  display: flex;
  overflow: hidden;
}

.meter-fill-sztos {
  height: 100%;
  background: linear-gradient(90deg, #059669, #10B981);
  border-right: 2px solid var(--bg-surface);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.vote-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
}

.vote-btn {
  padding: 0.5rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background-color: rgba(var(--tint-rgb), 0.03);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  transition: all 0.18s ease;
}

.vote-btn:hover {
  background-color: rgba(var(--tint-rgb), 0.07);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.vote-btn.voted-sztos {
  background-color: var(--accent-sztos-bg);
  color: var(--accent-sztos-text);
  border-color: var(--accent-sztos-border);
}

.vote-btn.voted-slop {
  background-color: var(--accent-slop-bg);
  color: var(--accent-slop-text);
  border-color: var(--accent-slop-border);
}

/* SCENE 2: FLOATING GLASS FILTER DOCK */
.control-dock {
  position: sticky;
  top: 0.85rem;
  z-index: 25;
  background: var(--bg-glass);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  box-shadow: 0 18px 38px -10px rgba(0, 0, 0, 0.75);
}

.axis-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.axis-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.filter-pill {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background-color: rgba(var(--tint-rgb), 0.03);
  color: var(--text-secondary);
  transition: all 0.18s ease;
}

select.filter-pill option {
  background-color: var(--bg-surface);
  color: var(--text-primary);
}

.filter-pill:hover {
  background-color: rgba(var(--tint-rgb), 0.08);
  color: var(--text-primary);
}

.filter-pill.active {
  background-color: var(--text-primary);
  color: var(--bg-void);
  border-color: var(--text-primary);
}

.filter-pill.active-sztos {
  background-color: var(--accent-sztos);
  color: #04130E;
  border-color: var(--accent-sztos-text);
  font-weight: 700;
}

.filter-pill.active-slop {
  background-color: var(--accent-slop);
  color: #FFFFFF;
  border-color: var(--accent-slop-text);
  font-weight: 700;
}

.filter-pill.active-lab {
  background-color: var(--accent-lab);
  color: #04121A;
  border-color: var(--accent-lab-text);
  font-weight: 700;
}

/* Plakietki w hero działające jako szybki filtr archiwum */
.hero-filter-chip {
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
}

.hero-filter-chip:hover {
  transform: translateY(-1px);
  filter: brightness(1.25);
}

.hero-filter-chip:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}

.hero-filter-chip.badge-sztos[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent-sztos), 0 0 18px rgba(16, 185, 129, 0.45);
}

.hero-filter-chip.badge-slop[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent-slop), 0 0 18px rgba(244, 63, 94, 0.45);
}

.hero-filter-chip.badge-lab[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--accent-lab), 0 0 18px rgba(56, 189, 248, 0.45);
}

.dock-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}

.view-switcher {
  display: inline-flex;
  padding: 0.2rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background-color: rgba(0, 0, 0, 0.35);
}

.view-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.32rem 0.75rem;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

.view-btn.active {
  background-color: var(--bg-surface-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-hover);
}

/* ARCHIVE BENTO GRID */
.archive-section {
  padding-bottom: 3.5rem;
}

.archive-status-bar {
  padding: 1.25rem 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.exhibits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
}

/* Pusty katalog / brak wyników filtrów */
.archive-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 2.25rem 2rem;
  border: 1px dashed var(--border-hover);
  border-radius: var(--radius-xl);
  background-color: rgba(var(--tint-rgb), 0.02);
}

.archive-empty h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
}

.archive-empty p {
  max-width: 64ch;
  color: var(--text-secondary);
  line-height: 1.6;
}

.exhibit-card {
  background: linear-gradient(180deg, rgba(var(--tint-rgb), 0.035) 0%, rgba(var(--tint-rgb), 0.0) 100%), var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

.exhibit-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card-hover);
}

.card-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.card-thumb-wrap {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--bg-well);
  cursor: pointer;
}

.card-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.exhibit-card:hover .card-thumb-wrap img {
  transform: scale(1.04);
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.card-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.card-model-line {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle);
}

/* ARCHIVE TABLE INDEX VIEW */
.exhibits-table-wrap {
  display: none;
  width: 100%;
  overflow-x: auto;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.exhibits-table-wrap.active {
  display: block;
}

.exhibits-grid.hidden {
  display: none;
}

.index-table {
  width: 100%;
  border-collapse: collapse;
}

.index-table th,
.index-table td {
  padding: 0.95rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.88rem;
}

.index-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background-color: rgba(var(--tint-rgb), 0.02);
  color: var(--text-muted);
}

.index-row {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.index-row:hover {
  background-color: rgba(16, 185, 129, 0.08);
}

.index-row.row-slop:hover {
  background-color: rgba(244, 63, 94, 0.08);
}

.index-title-cell {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

/* FLOATING CURSOR REPLACEMENT PREVIEW */
.cursor-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 310px;
  background-color: var(--bg-surface-elevated);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.85);
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0) scale(0.94);
  transition: opacity 0.18s ease;
}

.cursor-preview.visible {
  opacity: 1;
}

.cursor-preview img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border-subtle);
}

.cursor-preview-caption {
  padding: 0.55rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  justify-content: space-between;
}

/* SCENE 2B: ARCHIVE OVERLAY DRAWER */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(5, 6, 10, 0.82);
  backdrop-filter: blur(12px);
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.drawer-backdrop.open {
  display: flex;
}

.drawer-panel {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.9);
  max-width: 1120px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: drawerReveal 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes drawerReveal {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.5rem;
  background-color: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
}

.drawer-body {
  display: grid;
  grid-template-columns: 7fr 5fr;
}

.drawer-stage {
  padding: 1.5rem;
  border-right: 1px solid var(--border-subtle);
  background-color: var(--bg-well);
}

.anatomy-canvas {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-well);
  overflow: hidden;
}

.anatomy-canvas img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

.hotspot-pin {
  position: absolute;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  border-radius: 50%;
  background-color: rgba(18, 21, 30, 0.92);
  color: var(--text-primary);
  border: 2px solid var(--accent-sztos-text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
  transition: all 0.2s ease;
}

.hotspot-pin.active {
  background-color: var(--accent-slop);
  color: #FFFFFF;
  border-color: #FFFFFF;
  transform: scale(1.22);
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.75);
}

.drawer-info {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.hotspot-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.hotspot-item {
  text-align: left;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border-subtle);
  background-color: rgba(var(--tint-rgb), 0.02);
  border-radius: var(--radius-md);
  transition: all 0.18s ease;
}

.hotspot-item.active {
  background-color: var(--accent-sztos-bg);
  border-color: var(--accent-sztos-border);
}

.prompt-box {
  background-color: var(--bg-code);
  color: var(--text-code);
  padding: 0.95rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* SCENE 4: SUBMISSION FORM + LIVE PREVIEW */
.submit-section {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.25rem;
  margin-bottom: 3rem;
  box-shadow: var(--shadow-card);
}

.submit-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 2.5rem;
  margin-top: 1.75rem;
}

.form-card {
  background-color: rgba(var(--tint-rgb), 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: grid;
  gap: 1rem;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field-group label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.field-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Elementy siatek nie mogą rozpychać się szerzej niż ekran (min-width: auto w gridzie) */
.submit-grid > *,
.field-row-2 > *,
.field-group {
  min-width: 0;
}

.field-input {
  width: 100%;
  max-width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background-color: var(--bg-input);
  color: var(--text-primary);
  transition: border-color 0.15s ease;
}

.field-input:focus {
  border-color: var(--accent-lab);
  outline: none;
}

.field-input[aria-invalid="true"] {
  border-color: var(--accent-slop);
}

.field-aux {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-card {
  position: relative;
}

.verify-box {
  min-height: 0;
  max-width: 100%;
}

.form-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.form-status {
  font-size: 0.9rem;
  line-height: 1.5;
  min-height: 1.35em;
}

.form-status[data-kind="success"] {
  color: var(--accent-sztos-text);
}

.form-status[data-kind="error"] {
  color: var(--accent-slop-text);
}

.form-status[data-kind="info"] {
  color: var(--text-secondary);
}

#sub-submit-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* SCENE 5: SUPPORT, KONTAKT & GWARANCJE PRAWNE (RODO / CIASTKA / DSA) */
.support-section {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, rgba(18, 21, 30, 0.85) 100%), var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.25rem;
  margin-bottom: 3rem;
  box-shadow: var(--shadow-card);
}

.support-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.support-bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35rem;
}

.support-card {
  background: linear-gradient(180deg, rgba(var(--tint-rgb), 0.03) 0%, rgba(var(--tint-rgb), 0.0) 100%), var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.support-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

.support-card-highlight {
  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.14), transparent 65%), var(--bg-card);
  border-color: var(--accent-sztos-border);
}

.support-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.support-icon {
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: rgba(var(--tint-rgb), 0.04);
  border: 1px solid var(--border-subtle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-card h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-primary);
}

.support-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.support-meta-box {
  background-color: var(--bg-code);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: grid;
  gap: 0.35rem;
}

.support-meta-box strong {
  color: var(--text-primary);
}

.support-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: auto;
}

.legal-bullet-list {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.48;
}

.legal-bullet-list li {
  position: relative;
  padding-left: 1.1rem;
}

.legal-bullet-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent-sztos-text);
  font-weight: 700;
}

.legal-bullet-list strong {
  color: var(--text-primary);
}

/* FORM CONSENT CHECKBOX & INLINE LEGAL LINKS */
.consent-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background-color: rgba(var(--tint-rgb), 0.02);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}

.consent-checkbox-row input[type="checkbox"] {
  margin-top: 0.2rem;
  accent-color: var(--accent-sztos);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.inline-legal-link {
  color: var(--accent-sztos-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  padding: 0;
}

.inline-legal-link:hover {
  color: var(--text-primary);
}

/* Długie ciągi bez spacji (adresy e-mail, nazwy kluczy) mogą się awaryjnie złamać, zamiast wystawać.
   „anywhere” liczy się też przy wyznaczaniu minimalnej szerokości list i tabel. */
.legal-modal-content,
.support-card,
.form-card label,
.archive-empty {
  overflow-wrap: anywhere;
}

/* FOOTER LINKS & LEGAL BUTTONS */
.footer-links-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.footer-legal-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-secondary);
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background-color: rgba(var(--tint-rgb), 0.02);
  transition: all 0.15s ease;
}

.footer-legal-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
  background-color: rgba(var(--tint-rgb), 0.06);
}

/* LEGAL, RODO & SUPPORT MODAL */
.legal-modal-panel {
  max-width: 960px;
}

.legal-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 1.5rem;
  background-color: var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
}

.legal-tab-btn {
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background-color: rgba(var(--tint-rgb), 0.03);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.18s ease;
}

.legal-tab-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.legal-tab-btn.active {
  background-color: var(--text-primary);
  color: var(--bg-void);
  border-color: var(--text-primary);
}

.legal-modal-content {
  padding: 1.75rem 1.75rem 2rem;
}

.legal-tab-pane {
  display: none;
  flex-direction: column;
  gap: 1.15rem;
}

.legal-tab-pane.active {
  display: flex;
}

.legal-tab-pane h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--text-primary);
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: -0.6rem;
}

.legal-block {
  background-color: rgba(var(--tint-rgb), 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
}

.legal-block h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--accent-sztos-text);
  margin-bottom: 0.45rem;
}

.legal-block p,
.legal-block ul {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.legal-block ul {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.45rem;
}

.legal-block strong {
  color: var(--text-primary);
}

.legal-cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.83rem;
}

.legal-cookie-table th,
.legal-cookie-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  color: var(--text-secondary);
}

.legal-cookie-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cookie-feedback-msg {
  margin-top: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--accent-sztos-text);
}

.legal-numbered-list {
  padding-left: 1.25rem;
  display: grid;
  gap: 0.55rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.legal-numbered-list ul {
  margin-top: 0.35rem;
}

.legal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: -0.35rem;
}

.legal-print-btn {
  font-size: 0.8rem;
  padding: 0.4rem 0.85rem;
}

/* DRUK DOKUMENTÓW: przy otwartym oknie dokumentów drukuje się tylko aktywna zakładka (czarny tekst na białym tle).
   Bez otwartego okna strona drukuje się jak dotąd. */
@media print {
  html,
  body:has(#legal-modal-backdrop.open) {
    background: #fff !important;
  }

  body:has(#legal-modal-backdrop.open) > :not(#legal-modal-backdrop) {
    display: none !important;
  }

  #legal-modal-backdrop.open {
    position: static;
    display: block;
    padding: 0;
    background: none;
    backdrop-filter: none;
  }

  #legal-modal-backdrop .drawer-panel {
    max-width: none;
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    animation: none;
  }

  #legal-modal-backdrop .drawer-header,
  #legal-modal-backdrop .legal-tabs-bar,
  #legal-modal-backdrop .legal-actions,
  #legal-modal-backdrop #clear-local-data-btn {
    display: none !important;
  }

  #legal-modal-backdrop .legal-modal-content {
    padding: 0;
  }

  #legal-modal-backdrop .legal-modal-content,
  #legal-modal-backdrop .legal-modal-content * {
    color: #000 !important;
    background: none !important;
  }

  #legal-modal-backdrop .legal-tab-pane.active {
    display: block;
  }

  #legal-modal-backdrop .legal-tab-pane.active > * + * {
    margin-top: 0.9rem;
  }

  #legal-modal-backdrop .legal-block {
    border: 0;
    padding: 0;
  }

  #legal-modal-backdrop .legal-block h4 {
    break-after: avoid;
  }
}

/* FOOTER WITH REACTIVE GIANT WORDMARK */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  padding: 2.5rem 0.5rem 2rem;
  overflow: hidden;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 2rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* „TOP CZY SLOP”: 10 liter + 2 wąskie przerwy między słowami (bez przerw czytało się jako jeden ciąg) */
.giant-wordmark {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 0.35fr repeat(3, 1fr) 0.35fr repeat(4, 1fr);
  text-align: center;
  padding-top: 1rem;
  user-select: none;
  cursor: crosshair;
}

.giant-char {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.2vw, 6.9rem);
  line-height: 0.88;
  letter-spacing: -0.04em;
  color: rgba(var(--tint-rgb), 0.88);
  display: inline-block;
  transform-origin: bottom center;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, text-shadow 0.2s ease;
}

/* „czy” w wielkim napisie przygaszone; po najechaniu kursorem litera i tak robi się zielona (app.js) */
.giant-char-czy {
  color: rgba(var(--tint-rgb), 0.42);
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 1024px) {
  .hero-header,
  .duel-grid,
  .drawer-body,
  .submit-grid,
  .support-bento-grid {
    grid-template-columns: 1fr;
  }

  .duel-divider {
    margin: 0.25rem 0;
  }

  .exhibits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .shell {
    padding: 0 1rem;
  }

  .masthead {
    padding: 0.75rem 1rem;
  }

  /* Okno dokumentów: mniej marginesów, więcej miejsca na tekst */
  .drawer-backdrop {
    padding: 0.75rem;
  }

  .legal-modal-content {
    padding: 1.1rem 1rem 1.5rem;
  }

  .legal-block {
    padding: 0.95rem 1rem;
  }

  /* Tabela pamięci przeglądarki: na telefonie wiersze ułożone w pionie, z etykietą przy każdej wartości */
  .legal-cookie-table thead {
    display: none;
  }

  .legal-cookie-table,
  .legal-cookie-table tbody,
  .legal-cookie-table tr,
  .legal-cookie-table td {
    display: block;
    width: 100%;
  }

  .legal-cookie-table td {
    border-bottom: none;
    padding: 0.35rem 0;
  }

  .legal-cookie-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.15rem;
  }

  /* Na telefonie nagłówek nie może zjadać pierwszego ekranu */
  .masthead-stats,
  .edition-tag {
    display: none;
  }

  .masthead-actions {
    gap: 0.4rem;
  }

  .masthead-actions .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.75rem;
  }

  .hero-header {
    padding-top: 2rem;
  }

  .field-row-2 {
    grid-template-columns: 1fr;
  }

  .duel-card,
  .submit-section,
  .support-section {
    padding: 1.25rem;
  }

  .support-card,
  .form-card {
    padding: 1.1rem;
  }

  .control-dock {
    position: relative;
    top: 0;
    padding: 0.85rem 1rem;
  }

  .exhibits-grid {
    grid-template-columns: 1fr;
  }

  .vote-actions {
    grid-template-columns: 1fr 1fr;
  }

  .vote-actions .btn-inspect {
    grid-column: 1 / -1;
  }

  .cursor-preview {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor-preview {
    display: none !important;
  }
}

/* ============================================================
   TYPOGRAFIA — zasady ze skilla better-typography (Jakub Krehel, MIT)
   + polskie twarde spacje w app.js (initPolishTypography)
   ============================================================ */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Szerokość łamu tekstu ciągłego: 60–75 znaków w wierszu (zmierzone dla Plus Jakarta Sans).
   W em, nie w ch: ch to szerokość cyfry „0”, a polski tekst w tym kroju ma węższe litery
   (56ch dawało 77–88 znaków, 28em — do 59; 34em daje najdłuższe wiersze ok. 70–72 znaków). */
:root {
  --measure: 34em;
}

.hero-lead,
.archive-empty p,
.submit-section > p,
.support-header p,
.support-card p,
.consent-checkbox-row span,
.legal-block p,
.legal-block li {
  max-width: var(--measure);
}

/* Nagłówki sekcji: interlinia i światło jak dla tekstu wystawowego; wielkie litery z CSS, w HTML zwykła pisownia */
.section-title {
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.support-card h3 {
  line-height: 1.25;
}

/* Łamanie frazami: nowy wiersz zaczyna się od początku frazy, a nie tam, gdzie skończyło się miejsce */
.phrase {
  display: inline;
}

.section-title .phrase {
  display: block;
}

/* Łamanie zdań (app.js, layoutSentences): zdanie, które zaczynałoby się 1–2 słowami na końcu wiersza,
   zaczyna się od nowego wiersza. Znacznik to pusty span przed zdaniem, złamanie dokleja tylko CSS. */
.zdanie.od-nowego-wiersza::before {
  content: "\A";
  white-space: pre;
}

@media (max-width: 899px) {
  .hero-title {
    text-wrap: balance;
  }

  .hero-title .phrase {
    display: block;
  }

  /* wyróżnione słowa („narzędzie”, „czysty slop”) nie rozpadają się na dwa wiersze */
  .hero-title mark {
    white-space: nowrap;
  }
}

/* Krótkie nadtytuły i etykiety pól: równe wiersze zamiast jednego słowa w ostatnim */
.kicker-row > span,
.field-group label {
  text-wrap: balance;
}

/* Wstawki kodu tym samym krojem co reszta tekstów mono (zamiast systemowego monospace) */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* Zmieniające się liczby: cyfry o stałej szerokości, nic nie skacze */
.stat-pill strong,
#archive-match-count,
[data-count] {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 680px) {
  /* iOS przybliża stronę, gdy tekst w polu ma mniej niż 16 px */
  .control-dock select.filter-pill {
    font-size: 1rem;
  }
}

/* Zasada Łukasza (08.11.2026): każde zdanie w osobnym wierszu (<br> w HTML) i — gdzie ekran pozwala — w jednym wierszu.
   Ramki rosną zamiast łamać zdanie: bez limitu szerokości tekstu w tych blokach, karty kontaktu jedna pod drugą
   na pełną szerokość. Na telefonie ekran jest za wąski, więc zdanie się zawija, ale zaczyna się od nowego wiersza. */
.archive-empty p,
.submit-section > p,
.support-card p {
  max-width: none;
}

.support-bento-grid {
  grid-template-columns: 1fr;
}

/* Nagłówek hero (08.11): dwie linijki — pytanie i podtytuł, każda od nowego wiersza */
.hero-title .hero-line {
  display: block;
}

@media (max-width: 899px) {
  /* najdłuższy nierozdzielny kawałek „I NAJŚMIESZNIEJSZE” (9,21 em; „i” sklejone twardą spacją) musi się zmieścić
     w treści hero: ekran minus ok. 63 px marginesów (zmierzone na 360 px) */
  .hero-title {
    font-size: min(2.35rem, calc((100vw - 4rem) / 9.6));
  }
}

/* Opis w hero (08.11): widoczny na stałe (bez „Więcej”), zdanie na linijkę, szerokość = najdłuższe zdanie.
   Czcionka rośnie z ekranem (18–24 px), ale zawsze mniejsza od nagłówka hero (38–51 px);
   od 1024 px każde zdanie mieści się w jednym wierszu. */
.hero-lead {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.15rem, 0.55rem + 1.05vw, 1.5rem);
  line-height: 1.5;
}

/* TRYB JASNY (08.11.2026): przełącznik w nagłówku; bez wyboru strona idzie za ustawieniem systemu (theme.js ustawia
   data-theme na <html> przed pierwszym malowaniem). --tint-rgb to kolor półprzezroczystych nakładek: biały na ciemnym,
   granatowoczarny na jasnym. Teksty akcentów w jasnym są ciemniejsze — kontrast z tłem co najmniej 4,5:1. */
:root {
  color-scheme: dark;
  --tint-rgb: 255, 255, 255;
  --bg-well: #06070A;
  --bg-card: #0D1018;
  --bg-deep: #0B0D13;
  --bg-input: #0B0D13;
  --bg-code: #07080C;
  --text-code: #D1D5DB;
  --accent-warn-text: #FBBF24;
}

:root[data-theme="light"] {
  color-scheme: light;
  --tint-rgb: 15, 23, 42;
  --bg-void: #F4F5F7;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-well: #E6E9EE;
  --bg-card: #FFFFFF;
  --bg-deep: #ECEEF2;
  --bg-input: #FFFFFF;
  --bg-code: #F1F3F6;
  --text-code: #1F2937;
  --border-subtle: rgba(15, 23, 42, 0.1);
  --border-hover: rgba(15, 23, 42, 0.24);
  --text-primary: #0F1115;
  --text-secondary: #464D5E;
  --text-muted: #5B6375;
  --accent-sztos-text: #047857;
  --accent-sztos-bg: rgba(16, 185, 129, 0.12);
  --accent-sztos-border: rgba(4, 120, 87, 0.35);
  --accent-slop-text: #BE123C;
  --accent-slop-bg: rgba(244, 63, 94, 0.1);
  --accent-slop-border: rgba(190, 18, 60, 0.3);
  --accent-lab-text: #0369A1;
  --accent-lab-bg: rgba(14, 165, 233, 0.1);
  --accent-lab-border: rgba(3, 105, 161, 0.3);
  --accent-warn-text: #B45309;
  --shadow-card: 0 12px 30px -14px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --shadow-card-hover: 0 18px 40px -12px rgba(15, 23, 42, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse 75% 45% at 25% 0%, rgba(16, 185, 129, 0.09), transparent 65%),
    radial-gradient(ellipse 75% 45% at 80% 5%, rgba(244, 63, 94, 0.07), transparent 65%);
}

[data-theme="light"] .hero-title mark.sztos,
[data-theme="light"] .hero-title mark.slop {
  text-shadow: none;
}

[data-theme="light"] .support-section {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%), var(--bg-surface);
}

[data-theme="light"] .view-switcher {
  background-color: rgba(var(--tint-rgb), 0.05);
}

[data-theme="light"] .control-dock {
  box-shadow: 0 14px 30px -12px rgba(15, 23, 42, 0.18);
}

/* Przełącznik trybu: słońce w ciemnym (przejdź na jasny), księżyc w jasnym */
.theme-toggle {
  padding-inline: 0.7rem;
}

.theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .ikona-ksiezyc,
[data-theme="light"] .theme-toggle .ikona-slonce {
  display: none;
}

[data-theme="light"] .theme-toggle .ikona-ksiezyc {
  display: inline;
}

@media (max-width: 680px) {
  .masthead {
    position: relative;
  }

  /* Telefon: przełącznik trybu w prawym górnym rogu, w jednym rzędzie z logo, a nie sam w osobnym wierszu */
  .masthead .theme-toggle {
    position: absolute;
    top: 1.05rem;
    right: 1rem;
  }

  /* menu zawsze w drugim rzędzie — inaczej na ~600–680 px wchodzi pod przełącznik */
  .masthead-actions {
    flex-basis: 100%;
  }
}