/*
 * 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;
  line-height: .96;
  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;
  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 ---------- */

.result-hero {
  padding: 30px 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}
@media (min-width: 900px) {
  .result-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    align-items: start;
    gap: 40px;
  }
}

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;
}
.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); }

/* Direct child only: the “check another one” form lives in the same column and
   keeps its own, smaller plate. */
.showplate > .bigplate {
  font-size: clamp(30px, 10vw, 68px);
  box-shadow: inset 0 0 0 .012em rgba(0,0,0,.35), 10px 10px 0 var(--shadow);
}

/* ---------- 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;
  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; }

/* ---------- 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;
}
.paywall__lead { margin: 0 0 14px; max-width: 52ch; }
.paywall__lead b { background: var(--accent); color: var(--on-accent); padding: 0 .25em; font-weight: 900; }
.paywall__list { margin: 0 0 12px; padding-left: 1.15em; font-size: 15.5px; }
.paywall__list li { margin-bottom: 5px; }
.paywall__note { margin: 0; font-size: 14px; color: var(--ink-2); max-width: 52ch; }
.paywall__cta { text-align: center; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.paywall__price {
  margin: 0;
  font-family: var(--plate-font);
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid var(--rule);
  border-radius: 6px;
  padding: 10px 16px;
}
.paywall__once { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }

/* 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: 22px; }
.buy__head .bigplate { font-size: clamp(26px, 8vw, 52px); margin-top: 12px; }
.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; }
.buy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.buy__price { font-family: var(--plate-font); font-size: 30px; margin: 0 0 12px; }
.buy__list { margin: 0 0 12px; padding-left: 1.15em; }
.buy__list li { margin-bottom: 6px; }
.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; }

/* 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);
  margin: 22px auto 0;
  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 and purchase: price anchor and trust microcopy, all from tokens. */
.paywall__sub { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); max-width: 52ch; }
.paywall__anchor,
.buy__anchor {
  margin: 0 0 12px;
  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,
.buy__anchor strong { color: var(--accent-deep); }
.paywall__trust,
.buy__trust { margin: 4px 0 0; font-size: 13px; color: var(--ink-2); max-width: 42ch; }
.buy__trust { margin-top: 12px; }
.buy__microcopy { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* Invoice is optional, so it hides behind a disclosure and stays out of the way
   of the one required consent right above the pay button. */
.buy__invoice { margin: 0 0 18px; }
.buy__invoice summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--accent-deep);
}
.buy__invoice[open] summary { margin-bottom: 12px; }

.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 (min-width: 780px) {
  .buy__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

@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%; }
}