/*
 * wolnetablice — „Tablica jest bohaterem" (design/wariant-a).
 *
 * Hand-written on purpose: the Tailwind CLI cannot run on the dev machine
 * (see CLAUDE.md), so this is plain CSS with custom properties on Propshaft.
 *
 * Two rules carry the whole look:
 *   1. A plate is a plate. `.plate` (and its big sibling `.bigplate`) keep
 *      their own palette — white face, black glyphs, blue EU band — in both
 *      colour schemes, so at night they read as objects on a wall rather than
 *      as one more grey card.
 *   2. Status never rides on colour alone: fill, stroke style, strike-through,
 *      a question mark and a `.visually-hidden` word all say the same thing.
 *
 * --accent is cobalt: yellow read as a warning tape and mint pulled the page
 * towards the status colours, while a bright blue sits next to the plate's navy
 * band as a deliberate second voice. It is decorative only, so no status
 * depends on telling it from the red stamp.
 */

:root {
  /* Cobalt is dark, so unlike the mint and yellow before it the accent cannot
     carry black text: --on-accent says what goes on top of it, and
     --accent-bright is the variant used when the accent is text on near-black
     (ticker, footer links, code chips). */
  --accent:        #2B57F6;
  --on-accent:     #FFFFFF;
  --accent-bright: #8FA8FF;
  --accent-deep:   #1B3ABF;
  --eu:           #0B2E8A;
  --paper:        #F3F5FA;
  --card:         #FFFFFF;
  --ink:          #0B0D10;
  --ink-2:        #474D57;
  --rule:         #0B0D10;
  --rule-soft:    #C8CEDA;
  --shadow:       #0B0D10;
  --stamp:        #A5231B;
  --plate-bg:     #FFFFFF;
  --plate-ink:    #0B0D10;
  --plate-taken-bg:  #C4C7CD;
  --plate-taken-ink: #383C44;
  --plate-ghost:  #6E737C;
  --link:         #0B2E8A;
  --code-bg:      #0B0D10;

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --plate-font: "DIN Alternate", "DIN Condensed", "Arial Narrow", "Helvetica Neue", "Liberation Sans Narrow", Arial, sans-serif;

  --measure: 62ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-deep:   #8FA8FF;
    --eu:           #123AA8;
    --paper:        #0F1218;
    --card:         #191D25;
    --ink:          #F6F3EA;
    --ink-2:        #C3C9D4;
    /* One notch lighter than the prototype's #4A5262: card and chip outlines
       carry meaning here (dashed = nobody asked yet), so they need 3:1. */
    --rule:         #6B7482;
    --rule-soft:    #333A47;
    --shadow:       #3A4354;
    --stamp:        #FF8D7E;
    --plate-taken-bg:  #8C9199;
    --plate-taken-ink: #0D1015;
    --link:         #9FC0FF;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Dotted workshop grid. Decoration, so it never intercepts a click. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .07;
}
body > * { position: relative; z-index: 1; }

a { color: var(--link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--eu); outline-offset: 3px; }
@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: var(--accent-bright); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 30;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid #0B0D10;
  padding: .6rem 1rem;
  font-weight: 800;
  text-decoration: none;
  transition: top .12s;
}
.skip-link:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Masthead / wordmark ---------- */

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  padding: 18px 0 6px;
}

.brand {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  background: #FFFFFF;
  color: #0B0D10;
  border: 3px solid #0B0D10;
  border-radius: 7px;
  box-shadow: 4px 4px 0 var(--shadow);
  overflow: hidden;
  font-family: var(--plate-font);
}
.brand__band {
  background: var(--eu);
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 3px 5px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}
.brand__word {
  padding: 5px 11px 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: lowercase;
  white-space: nowrap;
}
.brand__word i { font-style: normal; color: var(--accent-deep); }

.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 15px;
  font-weight: 700;
}
.topnav a { color: var(--ink); text-decoration-color: var(--accent-deep); }

/* ---------- Ticker tape ---------- */

.ticker {
  margin: 22px 0 0;
  background: var(--ink);
  color: var(--accent-bright);
  font-family: var(--plate-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 9px 0;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-.7deg);
  border-top: 2px solid var(--accent-deep);
  border-bottom: 2px solid var(--accent-deep);
}
@media (prefers-color-scheme: dark) {
  .ticker { background: #000; }
}
/* The words are printed twice; sliding exactly half the track loops seamlessly
   and the tape is never seen empty. */
.ticker__track {
  display: inline-block;
  animation: ticker 40s linear infinite;
}
.ticker span { padding: 0 14px; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Content frame ---------- */

main { display: block; }
main > .wrap { padding-bottom: 8px; }

section { padding: 40px 0; }
.section--legend { padding: 28px 0 22px; }
.section--tight { padding-top: 0; }

h1, h2, h3, h4 { margin: 0; }

h1 {
  margin: 0 0 18px;
  font-weight: 900;
  letter-spacing: -.03em;
  /* 1.08, not the tighter .96: the .h1-mark box is taller than the em and the
     title wraps at many widths, so tighter leading rides the box into the
     glyphs of the next line. */
  line-height: 1.08;
  text-transform: uppercase;
  font-size: clamp(34px, 7vw, 76px);
}
h1 .h1-small {
  display: block;
  font-size: .3em;
  letter-spacing: .1em;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink-2);
  margin-bottom: .35em;
}
h1 .h1-mark {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 .09em;
  margin-right: .06em;
  transform: rotate(-1deg);
  box-shadow: 6px 6px 0 var(--shadow);
}
h1 .h1-thin {
  display: block;
  font-size: .4em;
  line-height: 1.05;
  letter-spacing: -.01em;
  font-weight: 800;
  margin-top: .6em;
}

h2 {
  margin: 0 0 6px;
  font-size: clamp(26px, 4.6vw, 46px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
}

.lede {
  max-width: 46ch;
  margin: 0 0 26px;
  font-size: clamp(17px, 2.2vw, 21px);
}
.lede strong { font-weight: 800; }

.section__sub { margin: 0 0 26px; max-width: var(--measure); }

.rule { height: 0; border: 0; border-top: 3px solid var(--rule); margin: 0; }

/* ---------- Buttons, notices ---------- */

.button {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid #0B0D10;
  border-radius: 4px;
  padding: 14px 30px;
  font-family: var(--sans);
  font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 8px 8px 0 var(--shadow);
  transition: transform .1s, box-shadow .1s;
  -webkit-appearance: none;
  appearance: none;
}
.button:hover { transform: translate(-2px, -2px); box-shadow: 11px 11px 0 var(--shadow); }
.button:active { transform: translate(4px, 4px); box-shadow: 3px 3px 0 var(--shadow); }

.button--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: 6px 6px 0 var(--shadow);
  font-size: 16px;
  padding: 12px 20px;
}

.notice {
  margin: 16px 0 0;
  max-width: 56ch;
  background: var(--card);
  border: 3px solid var(--stamp);
  border-left-width: 10px;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- The big plate (input and display) ---------- */

.bigplate {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 520 / 114;
  background: #FFFFFF;
  border: .055em solid #0B0D10;
  border-radius: .13em;
  box-shadow:
    inset 0 0 0 .012em rgba(0,0,0,.35),
    14px 14px 0 var(--shadow);
  font-family: var(--plate-font);
  font-size: clamp(30px, 11vw, 92px);
  overflow: hidden;
}

.bigplate__band {
  flex: 0 0 auto;
  background: var(--eu);
  background-image: linear-gradient(180deg, #1741B4 0%, #0B2E8A 55%, #082469 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .04em;
  padding: 0 .17em;
  border-right: .014em solid rgba(0,0,0,.35);
}
.bigplate__stars { display: block; width: .34em; height: .34em; }
.bigplate__pl {
  font-size: .21em;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
}

.bigplate__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .06em;
  padding: 0 .18em 0 .2em;
}

.bigplate__ghost {
  color: var(--plate-ghost);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  flex: 0 0 auto;
  padding-bottom: .06em;
}

.bigplate__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: #0B0D10;
  caret-color: var(--eu);
  font: inherit;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: .045em;
  line-height: 1.05;
  text-transform: uppercase;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.bigplate__input::placeholder { color: #6B7078; opacity: 1; }
.bigplate__input:focus { outline: 0; }
.bigplate:focus-within {
  box-shadow:
    inset 0 0 0 .012em rgba(0,0,0,.35),
    0 0 0 .05em var(--accent),
    14px 14px 0 var(--shadow);
}

.bigplate__screw {
  position: absolute;
  top: .1em;
  width: .07em; height: .07em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E6E6E6, #9AA0A8 60%, #6C737B);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.bigplate__screw--a { left: 38%; }
.bigplate__screw--b { right: 22%; }

/* ---------- Search form ---------- */

.searchform { margin: 0 0 10px; }

.searchform__label {
  display: block;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--ink-2);
}

.searchform__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }

.searchform__hint {
  margin: 12px 0 0;
  max-width: 44ch;
  font-size: 15px;
  color: var(--ink-2);
}

/* Hero: the plate is the headline act, the button sits under it. */
.searchform--hero .searchform__row { display: block; }
.searchform--hero .searchform__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
}
.searchform--hero .searchform__hint { margin-top: 0; max-width: 34ch; }

/* Compact: a boxed “check another one” next to the button. */
.searchform--compact {
  border: 3px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  padding: 18px;
  margin-top: 22px;
}
.searchform--compact .bigplate {
  flex: 1 1 220px;
  /* Small enough that five characters and the two dots still fit the face. */
  font-size: clamp(22px, 5vw, 38px);
  max-width: 440px;
  box-shadow: inset 0 0 0 .012em rgba(0,0,0,.35), 8px 8px 0 var(--shadow);
}
.searchform--compact .button { font-size: 18px; padding: 11px 22px; box-shadow: 6px 6px 0 var(--shadow); }

/* ---------- The mini plate ---------- */

.plate {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  aspect-ratio: 520 / 114;
  background: var(--plate-bg);
  color: var(--plate-ink);
  border: 2px solid var(--plate-ink);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--plate-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
}
.plate__band {
  flex: 0 0 auto;
  background: var(--eu);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  font-size: .58em;
  letter-spacing: .04em;
}
.plate__num {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3em;
  padding: 0 .3em;
  letter-spacing: .05em;
  white-space: nowrap;
}

.chip { display: block; }

.chip--available .plate,
.plate--available {
  background: #FFFFFF;
  color: #0B0D10;
  border-color: #0B0D10;
  box-shadow: 3px 3px 0 var(--shadow);
}

.chip--taken .plate,
.plate--taken {
  background: var(--plate-taken-bg);
  color: var(--plate-taken-ink);
  border-color: var(--plate-taken-ink);
  border-style: solid;
  box-shadow: none;
}
.chip--taken .plate__num,
.plate--taken .plate__num {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  background-image: repeating-linear-gradient(135deg,
    transparent 0 5px, rgba(0,0,0,.16) 5px 8px);
}
.chip--taken .plate__band,
.plate--taken .plate__band { background: #5C6270; }

.chip--unknown .plate,
.plate--unknown {
  background: var(--card);
  color: var(--ink);
  border-style: dashed;
  border-color: var(--rule);
  box-shadow: none;
}
.chip--unknown .plate__band,
.plate--unknown .plate__band { background: #6E737C; }
.chip--unknown .plate__num::after,
.plate--unknown .plate__num::after {
  content: "?";
  font-size: 1.15em;
  font-weight: 700;
}
.chip--unknown .plate__text,
.plate--unknown .plate__text { opacity: .72; }

.chip--checking .plate,
.plate--checking {
  background: var(--card);
  color: var(--ink-2);
  border-style: dotted;
  border-color: var(--rule);
}
.chip--checking .plate__band,
.plate--checking .plate__band { background: #6E737C; }
.chip--checking .plate__text,
.plate--checking .plate__text {
  color: transparent;
  background: linear-gradient(90deg, var(--rule-soft) 25%, var(--card) 45%, var(--rule-soft) 65%);
  background-size: 240% 100%;
  border-radius: 2px;
  animation: sweep 1.4s linear infinite;
}
@keyframes sweep {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}

/* Seen on the road: taken, but on a driver's word rather than an office's.
   Same struck-through face as .chip--taken, with a dotted stroke and a corner
   mark of its own so the two are never the same object. */
.chip--spotted .plate,
.plate--spotted {
  background: var(--plate-taken-bg);
  color: var(--plate-taken-ink);
  border: 2px dotted var(--plate-taken-ink);
  box-shadow: none;
}
.chip--spotted .plate__num,
.plate--spotted .plate__num {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  background-image: repeating-linear-gradient(135deg,
    transparent 0 5px, rgba(0,0,0,.16) 5px 8px);
}
.chip--spotted .plate__band,
.plate--spotted .plate__band { background: #5C6270; }
/* An eye's worth of a mark: this one comes from a sighting, not a register. */
.chip--spotted .plate::after,
.plate--spotted::after {
  content: "◉";
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: .5em;
  line-height: 1;
  opacity: .85;
}
.chip__seen {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-2);
}
/* An outbound link to the drivers' community, where the sighting was photographed. */
.chip__photo {
  display: inline-block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-deep);
}

/* No sighting at all — an outline (see .plate--sketch below), with a dot where
   the answer would be. Never to be read as "free". */
.chip--no_data .plate__num::after {
  content: "·";
  font-size: 1.3em;
  font-weight: 900;
  opacity: .8;
}

/* The outline sketch: nobody has checked this one, so it is not filled in. */
.chip--offline .plate,
.chip--no_data .plate,
.plate--sketch {
  background: transparent;
  color: var(--ink);
  border: 2px dashed var(--rule);
  box-shadow: none;
}
.chip--offline .plate__band,
.plate--sketch .plate__band {
  background: transparent;
  color: var(--ink-2);
  border-right: 2px dashed var(--rule);
}
.chip--offline .plate__num,
.plate--sketch .plate__num { opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .chip--checking .plate__text,
  .plate--checking .plate__text { animation: none; background: var(--rule-soft); }
  .ticker__track { animation: none; }
  .button, .plate, .skip-link { transition: none; }
}

/* ---------- Home: how to read a result ---------- */

.howto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.howto > li {
  background: var(--card);
  border: 3px solid var(--rule);
  border-radius: 6px;
  padding: 16px;
  box-shadow: 7px 7px 0 var(--shadow);
}
.howto .plate { max-width: 190px; }
.howto h3 {
  margin: 14px 0 4px;
  font-size: 18px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.howto p { margin: 0; font-size: 15px; }

.explain {
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid #0B0D10;
  border-radius: 6px;
  padding: 20px 22px;
  box-shadow: 10px 10px 0 var(--shadow);
  max-width: 66ch;
}
.explain p { margin: 0; font-size: 17px; }
.explain p + p { margin-top: 12px; }
.explain code,
.explain a { color: var(--on-accent); }
.explain code {
  font-family: var(--plate-font);
  font-weight: 700;
  background: var(--code-bg);
  color: var(--accent-bright);
  padding: 1px 6px;
  border-radius: 3px;
  /* A plate designation is one unit; never split the chip across lines. */
  white-space: nowrap;
  letter-spacing: .06em;
}

/* ---------- Coverage ---------- */

.coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.coverage__box {
  border: 3px solid var(--rule);
  border-radius: 6px;
  padding: 18px;
  background: var(--card);
}
.coverage__box--offline { background: transparent; border-style: dashed; }
.coverage__box h3 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.coverage__box p { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); }

.letters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.letters li {
  font-family: var(--plate-font);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  padding: 7px 10px 5px;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: #FFFFFF;
  color: #0B0D10;
}
.coverage__box--offline .letters li {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  border-style: dashed;
}

/* Popular searches: a below-the-fold row of internal links, not competing with
   the main CTA. Plain chips in the cobalt palette. */
.popular { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.popular__link {
  display: inline-block;
  padding: 8px 14px 7px;
  border: 2px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}
.popular__link:hover,
.popular__link:focus-visible {
  border-color: var(--accent);
  color: var(--accent-deep);
}

/* ---------- Result: hero ---------- */

/* One column at every width: the verdict reads top to bottom and nothing sits
   beside it competing for the eye. The two-column split (and the 900px media
   query that turned it on) went away with the big plate it used to hold. */
.result-hero {
  /* 28px bottom mirrors the legend section's top padding across the .rule. */
  padding: 30px 0 28px;
}

h1.result__word {
  margin: 0 0 14px;
  font-size: clamp(56px, 15vw, 148px);
  line-height: .84;
  letter-spacing: -.045em;
  text-transform: uppercase;
  word-break: break-word;
}
.result__kicker {
  display: block;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.result__lead { margin: 0 0 18px; font-size: clamp(17px, 2.1vw, 20px); max-width: 46ch; }
.result__lead b { background: var(--accent); color: var(--on-accent); padding: 0 .25em; font-weight: 900; }

.tally {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* One row once there is room for it. The hero lost its second column, so the
   counters have the full width and 2x2 would only add height back. Column flow
   instead of a fixed count, because the paywall variant has three tiles, not
   four, and must not leave a hole. */
@media (min-width: 760px) {
  .tally {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
}
.tally li {
  background: var(--card);
  border: 3px solid var(--rule);
  border-radius: 6px;
  padding: 12px 14px;
  box-shadow: 6px 6px 0 var(--shadow);
}
.tally b {
  display: block;
  font-family: var(--plate-font);
  font-size: clamp(30px, 5.6vw, 46px);
  line-height: 1;
  letter-spacing: .02em;
}
.tally span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.tally li:first-child { background: var(--accent); border-color: #0B0D10; }
.tally li:first-child b,
.tally li:first-child span { color: var(--on-accent); }

/* “Check another one”: one line, ~56px tall, field and button side by side down
   to 375px. Deliberately not a `.button` and not a `.bigplate`: the big button
   goes full width under 520px and the plate frame would repeat the h1, and both
   would cost the verdict the space it just won. */
.recheck {
  display: flex;
  align-items: stretch;
  gap: 10px;
  /* 30px keeps the counters and the field apart in the 26-40px page rhythm. */
  margin: 30px 0 0;
  max-width: 460px;
}
.recheck__input {
  flex: 1 1 auto;
  /* Without this a flex item refuses to go below its placeholder's width and
     the button gets pushed off the row on narrow phones. */
  min-width: 0;
  padding: 12px 14px;
  font-family: var(--sans);
  /* 16px is the floor: anything smaller makes iOS Safari zoom on focus. */
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 3px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}
.recheck__input::placeholder {
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink-2);
  opacity: 1;
}
.recheck__button {
  flex: 0 0 auto;
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid #0B0D10;
  border-radius: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* The accent is dark, so on paper the frame is near-black; at night that frame
   disappears into the background and the visible edge has to come from --rule. */
@media (prefers-color-scheme: dark) {
  .recheck__button { border-color: var(--rule); }
}

/* ---------- Result: legend ---------- */

/* Sits on the box's dashed border like a fieldset legend: pulled down over the
   frame, with the page background behind it so the border visibly passes under. */
.legend__title {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 0 -10px 16px;
  padding: 0 8px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin: 0;
  padding: 16px 18px;
  list-style: none;
  border: 3px dashed var(--rule);
  border-radius: 6px;
}
.legend > li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.legend .plate { width: 108px; flex: 0 0 108px; font-size: 13px; }

/* ---------- Result: voivodeship cards ---------- */

.regions { margin: 0; padding: 0; list-style: none; display: grid; gap: 26px; }

.region {
  background: var(--card);
  border: 3px solid var(--rule);
  border-radius: 8px;
  padding: 20px 20px 16px;
  box-shadow: 12px 12px 0 var(--shadow);
}
.region__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 3px solid var(--rule);
}
.region__name {
  margin: 0;
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
  text-transform: uppercase;
}
.region__name a { color: inherit; text-decoration-color: var(--accent-deep); text-decoration-thickness: 3px; }
.region__letters {
  margin: 0;
  font-family: var(--plate-font);
  font-size: 21px;
  letter-spacing: .1em;
  padding: 5px 10px 3px;
  border: 2px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
}
.region__score {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.region__score b {
  font-family: var(--plate-font);
  font-size: 40px;
  line-height: .9;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid #0B0D10;
  border-radius: 4px;
  padding: 4px 10px 2px;
}
.region__score span {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.region__badge {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 2px dotted var(--rule);
  border-radius: 4px;
  padding: 6px 10px;
}

.lot + .lot { margin-top: 18px; }
.lot__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
}
.lot__title span {
  font-family: var(--plate-font);
  font-size: 15px;
  letter-spacing: .04em;
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 1px 6px 0;
}
.lot__title--free::before {
  content: "";
  width: 14px; height: 14px;
  background: var(--accent);
  border: 2px solid var(--ink);
  transform: rotate(45deg);
}
.lot__title--taken { color: var(--ink-2); }
.lot__title--taken::before {
  content: "";
  width: 16px; height: 0;
  border-top: 3px solid var(--ink-2);
}
.lot__title--spotted { color: var(--ink-2); }
.lot__title--spotted::before {
  content: "";
  width: 16px; height: 0;
  border-top: 3px dotted var(--ink-2);
}
.lot__title--no_data::before,
.lot__title--unknown::before,
.lot__title--checking::before {
  content: "";
  width: 14px; height: 14px;
  border: 2px dashed var(--rule);
  border-radius: 50%;
}
.lot__title--checking::before { border-style: dotted; }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wall .plate { font-size: 17px; }
.wall--taken { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.wall--taken .plate { font-size: 13.5px; }
.wall--sketch { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.wall--sketch .plate { font-size: 16px; }

.region__source {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 2px dotted var(--rule);
  font-size: 13.5px;
  color: var(--ink-2);
}
.region__source a { font-weight: 800; }

.region__note { margin: 16px 0 0; max-width: 60ch; font-size: 15.5px; }
/* The line that keeps a sighting from passing for an official answer. */
.region__note--observed {
  border-left: 4px solid var(--rule-soft);
  padding-left: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
}

/* Offline: an outline card with a stamp and a phone number you cannot miss. */
.region--offline { background: transparent; border-style: dashed; box-shadow: none; }
.region--offline .region__head { border-bottom-style: dashed; }

.stamp {
  margin: 0 0 0 auto;
  transform: rotate(-5deg);
  border: 3px double var(--stamp);
  color: var(--stamp);
  border-radius: 7px;
  padding: 5px 12px 4px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Warsaw publishes a form the visitor can fill in themselves. It deserves a real
   button, because for that voivodeship it is the only way to get an answer. */
.selfcheck {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 3px solid var(--rule);
  border-radius: 5px;
}
.selfcheck__note {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}
.button--small {
  padding: 9px 18px;
  font-size: 16px;
  letter-spacing: .06em;
  box-shadow: 5px 5px 0 var(--shadow);
}

.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 14px;
}
.contact__label {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.contact__phone {
  font-family: var(--plate-font);
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 5px solid var(--accent);
  letter-spacing: .04em;
}
.contact__phone:hover { border-bottom-color: var(--ink); }
.contact__mail { font-weight: 700; font-size: 15px; }

.group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 20px;
  margin: 0 0 20px;
}
.group-head p { margin: 0; max-width: 52ch; font-size: 16px; }

/* ---------- Prose pages ---------- */

/* Poster typography would shout over an eight-paragraph explainer, so the
   heading on a text page is a notch smaller and gets a kicker instead. */
.page-head { padding: 30px 0 6px; }
.page-head__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.page-head h1 { font-size: clamp(30px, 5vw, 58px); margin-bottom: 14px; }
/* On voivodeship pages the head ends with the letter chips instead of a lede,
   so without this they would nearly touch the rule below. */
.page-head .letters { margin-bottom: 12px; }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1rem; }
.prose h2 {
  margin-top: 2.2rem;
  font-size: clamp(21px, 2.6vw, 28px);
  letter-spacing: 0;
  border-left: 8px solid var(--accent);
  padding-left: 12px;
}
.prose h3 { margin-top: 1.6rem; font-size: 18px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.prose ul, .prose ol { padding-left: 1.2rem; }
.prose li + li { margin-top: .35rem; }
.prose code {
  font-family: var(--plate-font);
  font-weight: 700;
  background: var(--code-bg);
  color: var(--accent-bright);
  padding: 1px 6px;
  border-radius: 3px;
  /* A plate designation is one unit; never split the chip across lines. */
  white-space: nowrap;
  letter-spacing: .06em;
}

.table__scroll { overflow-x: auto; margin: 26px 0; border: 3px solid var(--rule); border-radius: 6px; background: var(--card); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--rule-soft); }
.table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 900;
  color: var(--on-accent);
  background: var(--accent);
  border-bottom: 3px solid var(--ink);
  white-space: nowrap;
}
.table tbody th { font-weight: 800; }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Breadcrumbs + link lists (SEO content pages) ---------- */

.crumbs {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-2);
  /* Breathing room under the ticker. On pages that lead with a page-head the
     30px top space lives there instead, but breadcrumbs come first, so they
     carry it and the page-head below them drops its own top padding. */
  margin: 28px 0 14px;
}
.crumbs + .page-head { padding-top: 0; }
.crumbs a { color: var(--link); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs__sep { margin: 0 .45em; color: var(--rule-soft); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 700; }
@media (prefers-color-scheme: dark) {
  .crumbs a { color: var(--accent-bright); }
}

.linklist {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 18px;
}
.linklist li { margin: 0; }

/* ---------- Footer ---------- */

.colophon {
  margin-top: 40px;
  background: var(--ink);
  color: #F6F3EA;
  border-top: 6px solid var(--accent);
  padding: 34px 0 46px;
}
@media (prefers-color-scheme: dark) {
  .colophon { background: #05070A; }
}
.colophon a { color: var(--accent-bright); }
.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}
.footer__word {
  font-family: var(--plate-font);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .1em;
  text-transform: lowercase;
  margin: 0 0 8px;
}
.footer__word i { font-style: normal; color: var(--accent-bright); }

/* 16 voivodeships in two tight columns, so the content hub does not stretch
   the footer into a tower of links. */
.footer__regions {
  columns: 2;
  column-gap: 18px;
}
.footer__regions li { break-inside: avoid; }
.colophon p { margin: 0 0 10px; font-size: 15px; color: #E4E0D4; max-width: 46ch; }
.colophon strong { color: #FFFFFF; }
.colophon h2 {
  font-size: 14px;
  letter-spacing: .14em;
  margin-bottom: 10px;
  color: #F6F3EA;
}
.colophon ul { margin: 0; padding: 0; list-style: none; font-size: 15px; }
.colophon li { margin-bottom: 7px; }
.footer__credit { margin-top: 14px; font-size: 13.5px; }

/* Dane rejestrowe sprzedawcy: <address>, więc trzeba zdjąć domyślną kursywę.
   Mniejszy stopień pisma niż reszta stopki, bo to metryczka, nie treść. */
.footer__seller {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: #E4E0D4;
  margin: 0 0 12px;
  max-width: 34ch;
}

/* ---------- Paywall, locked cards, purchase ---------- */

/* Colours come straight from the cobalt tokens, no hard-coded hex, so a palette
   swap carries the paywall with it. Status still never rides on colour alone:
   the lock is spelled out in words and a padlock glyph, not just a blur. */

.paywall {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px 30px;
  align-items: center;
  margin: 0 0 26px;
  padding: 24px 26px;
  background: var(--card);
  border: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: 12px 12px 0 var(--shadow);
}
.paywall__title {
  margin: 0 0 8px;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* Cena jest w napisie przycisku, więc paywall nie ma już własnej kafelki z kwotą:
   jedna kwota, jedno miejsce. Zostają dwie linijki tekstu i CTA. */
.paywall__cta { text-align: center; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/* A locked voivodeship card. It carries a count and blurred placeholder tiles;
   the real matrix is never rendered into it (server-side gate, not CSS). */
.region--locked { border-style: dashed; border-color: var(--accent-deep); }
.region__score--locked b { background: var(--accent-deep); }
.region__note--locked { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.region__note--locked strong::before { content: "\1F512"; margin-right: .4em; }

.wall--locked {
  filter: blur(5px);
  opacity: .8;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.plate--locked { background: var(--plate-taken-bg); color: var(--plate-taken-ink); border-color: var(--plate-taken-ink); }
.plate--locked .plate__band { background: #5C6270; }

/* ---------- Purchase screens ---------- */

.buy { max-width: 62ch; margin: 8px auto 0; }
.buy__head { margin-bottom: 18px; }
/* Tablica na stronie zakupu jest pokwitowaniem („to kupujesz"), nie bohaterem,
   więc dostaje sufit szerokości: wysokość idzie z aspect-ratio, a każdy piksel
   nad formularzem odpycha przycisk zapłaty poza pierwszy ekran. */
.buy__head .bigplate { font-size: clamp(26px, 10vw, 38px); max-width: 330px; margin-top: 10px; }
.buy__title { margin: 0 0 10px; font-size: clamp(24px, 4vw, 36px); font-weight: 900; letter-spacing: -.01em; }
.buy__lead { font-size: clamp(17px, 2.1vw, 20px); max-width: 52ch; }
/* Cena stoi w nagłówku, obok wyróżnika: kupujący widzi towar i kwotę w jednej
   linii, bez osobnego akapitu nad formularzem. */
.buy__price {
  font-family: var(--plate-font);
  font-size: .8em;
  white-space: nowrap;
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 .2em;
}
.buy__note { font-size: 14px; color: var(--ink-2); }
.buy__legal { font-size: 14px; color: var(--ink-2); }
.buy__actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.buy__form {
  background: var(--card);
  border: 3px solid var(--rule);
  border-radius: 10px;
  padding: 22px;
  box-shadow: 10px 10px 0 var(--shadow);
}

.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 800; margin-bottom: 6px; }
.field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 17px;
  border: 3px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}
.field__hint { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); }
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.field--check label { font-weight: 600; margin: 0; }
.field--check input { margin-top: 4px; }

/* ---------- Płatność: BLIK na stronie plus zwykła bramka ---------- */

/* BLIK to ścieżka główna, więc ma jeden duży przycisk, a karta i przelew schodzą
   do dyskretnego link-submitu pod nim. Kolumna, nie rząd: dwa równorzędne
   przyciski obok siebie kazałyby wybierać, a wybór kosztuje decyzję. */
.pay__actions { display: grid; justify-items: start; gap: 8px; margin-bottom: 18px; }
.pay__note { margin: 0; font-size: 13px; color: var(--ink-2); }
.pay__alt {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
  cursor: pointer;
}

/* Kod BLIK to sześć cyfr, więc pole jest krótkie i pisane krojem tablicy:
   cyfry są rozstrzelone i łatwo je przepisać z telefonu. */
.field__code {
  width: 8.5em;
  padding: 12px 14px;
  font-family: var(--plate-font);
  font-size: 26px;
  letter-spacing: .18em;
  border: 3px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
}

/* Strona oczekiwania na potwierdzenie z aplikacji banku. Kropka pulsuje, ale
   tylko dla tych, którzy nie proszą o mniej ruchu. */
.wait {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  padding: 14px 18px;
  font-weight: 700;
  background: var(--card);
  border-left: 6px solid var(--accent);
  border-radius: 4px;
}
.wait__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  animation: wait-pulse 1.2s ease-in-out infinite;
}
@keyframes wait-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .wait__dot { animation: none; }
}

/* News hook under the hero. A quiet fact, not a price banner: no accent border,
   no shadow, so in free mode it never reads as a paywall. */
.newsflash {
  max-width: var(--measure);
  /* Sits between the hero and a bare .rule, outside any section, so it must
     carry the 40px the section padding would otherwise provide. */
  margin: 22px auto 40px;
  padding: 14px 18px;
  font-size: 15.5px;
  color: var(--ink-2);
  background: var(--card);
  border-left: 6px solid var(--accent-deep);
  border-radius: 4px;
}
.newsflash strong { color: var(--ink); }
.newsflash a { color: inherit; text-decoration-color: var(--accent-deep); }

/* Paywall: price anchor and trust microcopy, all from tokens. Zakotwiczenie ceny
   żyje tylko tu, bo tylko paywall sprzedaje. */
.paywall__sub { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); max-width: 52ch; }
.paywall__anchor {
  margin: 0;
  padding: 10px 14px;
  font-size: 15.5px;
  background: var(--paper);
  border: 2px solid var(--accent-deep);
  border-radius: 6px;
  max-width: 52ch;
}
.paywall__anchor strong { color: var(--accent-deep); }
.paywall__trust { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); }

.faq h2 { margin-top: 30px; }
.faq p { color: var(--ink-2); }

.fakepay {
  margin-top: 18px;
  padding: 22px;
  border: 3px dashed var(--accent-deep);
  border-radius: 10px;
  background: var(--card);
}

.prose { max-width: var(--measure); margin: 0 auto; }
.prose h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 900; letter-spacing: -.01em; }
.prose h2 { margin-top: 28px; font-size: 20px; font-weight: 800; }
.prose p { max-width: var(--measure); }
.prose__meta { margin-top: 26px; font-size: 13.5px; color: var(--ink-2); }

@media (max-width: 620px) {
  .paywall { grid-template-columns: minmax(0, 1fr); }
  .paywall__cta { align-items: stretch; }
}

/* ---------- Small screens ---------- */

@media (max-width: 700px) {
  .region { padding: 15px 14px 12px; box-shadow: 7px 7px 0 var(--shadow); }
  .region__score { margin-left: 0; }
  .region__score b { font-size: 32px; }
  .region__badge, .stamp { margin-left: 0; }
  .wall--sketch { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  .legend { gap: 10px 18px; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .wrap { padding: 0 14px; }
  .bigplate { box-shadow: inset 0 0 0 .012em rgba(0,0,0,.35), 8px 8px 0 var(--shadow); }
  .button { width: 100%; text-align: center; }
  section { padding: 34px 0; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
  .wall .plate { font-size: 14px; }
  .wall--taken { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
  .wall--taken .plate { font-size: 12px; }
  .searchform--compact .button { width: 100%; }
}