/* Občianska stráž SR — public site.
   Institutional, sober, high contrast. No gradients, no decorative animation.
   Mobile-first: every media query widens, never narrows. */

:root {
  color-scheme: light;

  --ink:        #10192b;
  --ink-soft:   #47536b;
  --line:       #d3d9e3;
  --line-soft:  #e7ebf1;
  --surface:    #ffffff;
  --surface-2:  #f4f6f9;

  --primary:      #16345c;
  --primary-dark: #0e2340;
  --primary-tint: #e8eef6;
  --alert:        #96131b;

  --focus: #b45309;

  --wrap: 68rem;
  --gap: 1.5rem;
  --radius: 3px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
}

h1, h2, h3 { line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); margin: 2rem 0 0.75rem; }
h3 { font-size: 1.125rem; margin: 0 0 0.5rem; }

p { margin: 0 0 1rem; }

a { color: var(--primary); text-underline-offset: 0.15em; }
a:hover { color: var(--primary-dark); }

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

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2rem, var(--wrap)); margin-inline: auto; }
.muted { color: var(--ink-soft); }

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--primary);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------------------------------------------------------------- header */

.site-header {
  background: var(--primary);
  color: #fff;
  border-bottom: 4px solid var(--primary-dark);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}
/* Stays white on hover. `.brand` is (0,1,0) and the global `a:hover` is
   (0,1,1), so the brand was losing and taking `--primary-dark` — navy on a
   navy header, a contrast of about 1.4:1, which read as the logo vanishing.
   The affordance is an underline on the name instead, which is visible. */
.brand:hover, .brand:focus-visible { color: #fff; }
.brand:hover .brand-text strong { text-decoration: underline; text-underline-offset: 0.2em; }

.brand-mark { width: 2.5rem; height: 2.5rem; flex: none; }
.brand-text { display: grid; line-height: 1.2; }
.brand-text strong { font-size: 1.05rem; letter-spacing: 0.04em; }
.brand-text span { font-size: 0.8rem; opacity: 0.85; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius);
  padding: 0.5rem 0.85rem;
  font: inherit;
  cursor: pointer;
}
.nav-toggle-bar {
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 5px currentColor, 0 -5px currentColor;
}

/* The language switcher: two short codes in the header, where they are in the
   same place on a phone and on a desktop. A pill, like the article's own
   switch, so the two read as the same kind of control doing the same kind of
   thing. Not the full names — a header has no room for "Slovenčina" beside
   "Magyar" — and the full name is on each link for a screen reader. */
.lang-switch-bar ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  overflow: hidden;
}
.lang-switch-bar a {
  display: block;
  padding: 0.3rem 0.7rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.lang-switch-bar li + li a { border-left: 1px solid rgba(255, 255, 255, 0.35); }
.lang-switch-bar a:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.lang-switch-bar a.is-current { background: #fff; color: var(--primary); }

/* Below the breakpoint the menu is a full-screen sheet: large targets, and the
   page underneath is covered rather than pushed down, so nothing shifts under
   a thumb. Above the breakpoint every rule here is overridden and the same
   markup is the ordinary horizontal bar. */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--primary-dark);
  padding: 1rem 1.25rem 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: none;
}
.site-nav.is-open { display: block; }
/* The page behind must not scroll while the sheet is over it. */
body.nav-open { overflow: hidden; }

.nav-head { display: flex; align-items: center; justify-content: space-between; }
.nav-head .brand-mark { width: 2.5rem; height: 2.5rem; }
.nav-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.nav-list, .subnav { list-style: none; margin: 0; padding: 0; }
.nav-list { margin-top: 1.25rem; }
.nav-list > li { position: relative; }

.nav-list > li > a,
.subnav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0.85rem 3rem 0.85rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.nav-list > li > a { font-weight: 600; font-size: 1.3rem; }
.subnav a { padding-left: 1rem; font-size: 1.05rem; opacity: 0.9; }
.nav-list a:hover, .subnav a:hover { text-decoration: underline; }

/* The arrow is its own target next to the link, not on top of it. */
.subnav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3.4rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.subnav-toggle::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 auto;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.subnav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.has-sub .subnav { display: none; }
.has-sub.is-expanded .subnav { display: block; }

.nav-contact { display: grid; gap: 0.75rem; margin-top: 2rem; }
.nav-contact a {
  display: grid;
  gap: 0.15rem;
  color: #fff;
  text-decoration: none;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
}
.nav-contact strong { font-size: 0.9rem; opacity: 0.85; font-weight: 600; }
.nav-contact span { font-size: 1.25rem; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  /* Back to a plain bar in the header: none of the sheet's rules apply. */
  .site-nav {
    display: block;
    position: static;
    inset: auto;
    flex-basis: auto;
    background: transparent;
    padding: 0;
    overflow: visible;
  }
  .nav-head, .nav-contact, .subnav-toggle { display: none; }
  .nav-list { display: flex; gap: 0.25rem; margin-top: 0; }
  .nav-list > li { position: relative; }
  .nav-list > li > a { border: 0; padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 1rem; }
  .nav-list > li > a:hover { background: var(--primary-dark); text-decoration: none; }

  .subnav {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    background: var(--primary-dark);
    border: 1px solid rgba(255, 255, 255, 0.16);
    padding: 0.35rem 0;
    display: none;
    z-index: 20;
  }
  /* A group left expanded on a phone must not stay open after a resize. */
  .has-sub.is-expanded .subnav { display: none; }
  .has-sub:hover .subnav,
  .has-sub:focus-within .subnav { display: block; }
  .subnav a { border: 0; padding: 0.5rem 0.9rem; }
  .subnav a:hover { background: rgba(255, 255, 255, 0.1); }
}

/* ------------------------------------------------------------------ hero */

.hero {
  background: var(--primary-dark);
  color: #fff;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  text-align: center;
}

/* Photographic hero: the image sits behind an opaque scrim so the heading keeps
   AA contrast regardless of what the photograph is doing underneath. */
.hero.has-photo { position: relative; isolation: isolate; overflow: hidden; }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Measured against the photograph rather than guessed: the officer's head
     occupies 37–52 % of its height and the OBČIANSKA STRÁŽ lettering on the
     volunteer's back 65–72 %.

     At 40 % the lettering was cut off above the shoulders; at 68 % it was in
     frame but her head was clipped at the top on a short hero. 55 % keeps both
     — the lettering sits lower in the crop and her whole head is inside it. */
  object-position: center 55%;
  z-index: -2;
}
.hero.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 21, 38, 0.78);
  z-index: -1;
}
.hero-inner { position: relative; }
.hero-logo {
  width: clamp(5rem, 4rem + 5vw, 7.5rem);
  height: auto;
  margin: 0 auto 1.25rem;
}
.hero-eyebrow {
  margin: 0 0 0.25rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.8rem;
  opacity: 0.85;
}
.hero h1 { margin: 0; text-transform: uppercase; letter-spacing: 0.02em; }

.motto {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: 1.75rem 0 0;
  padding: 0;
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 0.9rem;
}
.motto li { border-top: 2px solid rgba(255, 255, 255, 0.55); padding-top: 0.5rem; }

/* --------------------------------------------------------------- content */

.band { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.band + .band { border-top: 1px solid var(--line-soft); }

.section-title {
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
}

.lead { font-size: 1.1rem; color: var(--ink-soft); }

/* Measure-limited so the introduction stays readable on wide screens. */
.intro { max-width: 46rem; }
.intro .lead { color: var(--ink); }

.prose { padding-block: 2rem 3.5rem; max-width: 46rem; }
/* For a page whose body is a grid rather than a column of text. The
   46rem reading measure is right for an article and wrong for cards. */
.prose-wide { max-width: none; }
.prose h2:first-of-type { margin-top: 1.5rem; }

.bullets { padding-left: 1.15rem; margin: 0 0 1rem; }
.bullets li { margin-bottom: 0.4rem; }

.signature { margin-top: 2rem; color: var(--ink-soft); }

.breadcrumbs { padding-top: 1rem; font-size: 0.875rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--ink-soft); }
.breadcrumbs [aria-current] { color: var(--ink-soft); }

.notice {
  border-left: 4px solid var(--focus);
  background: #fdf6ec;
  padding: 0.75rem 1rem;
}

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

/* ------------------------------------------------------- legal documents */

.doc-meta { color: var(--ink-soft); font-size: 0.9rem; }

.toc {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.toc h2 {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: 0.25rem; }

.article { margin-top: 3rem; scroll-margin-top: 1rem; }
.article > h2 {
  margin-top: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary);
  scroll-margin-top: 1rem;
}
.article-no {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.15rem;
}
.article h3 { margin: 1.75rem 0 0.5rem; font-size: 1.05rem; }

.definitions { margin: 0 0 1rem; }
.definitions dt { font-weight: 700; margin-top: 0.75rem; }
.definitions dd { margin: 0.15rem 0 0; }

.numbered { padding-left: 1.3rem; margin: 0 0 1rem; }
.numbered li { margin-bottom: 0.6rem; }

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: 1.25rem 0; border: 1px solid var(--line); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 44rem; }
.data-table th, .data-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}
.data-table thead th {
  background: var(--surface-2);
  border-bottom: 2px solid var(--line);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.data-table tbody th { font-weight: 700; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }

/* ----------------------------------------------------------------- cards */

.cards { display: grid; gap: var(--gap); }
@media (min-width: 40rem) { .cards.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .cards.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--surface);
}
.card h2, .card h3 { margin-top: 0; }
.card.emphasis { border-top: 4px solid var(--primary); background: var(--surface-2); }

/* ----------------------------------------------- the two facts that matter */

/* "Akreditovaná záchranná zložka IZS" and "100+ členov" are the two things the
   shortened intro had to keep, so they are set as figures rather than buried
   in a sentence: the eye lands on them before it starts reading. */
.facts {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
@media (min-width: 46rem) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  background: var(--surface-2);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.fact-figure {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--primary-dark);
  /* "Akreditovaná" is a long word in a narrow column on a phone. */
  overflow-wrap: break-word;
}
.fact-label { font-weight: 600; }
.fact-note { color: var(--ink-soft); font-size: 0.925rem; line-height: 1.5; }

/* ------------------------------------------------------- what we can do for you */

/* Two panels, written as the visitor's own situation rather than as the name
   of a service: somebody whose father has not come home does not scan a page
   for the word "služby". */
.cta-pair { display: grid; gap: var(--gap); }
@media (min-width: 46rem) { .cta-pair { grid-template-columns: repeat(2, 1fr); } }

.cta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: var(--surface);
}
.cta h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); margin: 0 0 0.6rem; }
.cta p { margin: 0 0 0.9rem; }
.cta-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 0.35rem;
}
/* The actions sit at the bottom of both panels whatever the text above does,
   so the two buttons line up instead of stepping. */
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: auto 0 0; }
/* Full width on a phone, where a button is a thumb target and there is one
   column anyway. Left at its natural width above that: a lone button stretched
   across a whole panel looks like a mistake beside a panel that has two. */
.cta-actions .btn { flex: 1 1 auto; }
@media (min-width: 46rem) { .cta-actions .btn { flex: 0 1 auto; } }

/* The one about a missing person is the louder of the two: it is the reason
   most people arrive here in a hurry. */
.cta-hladame { background: var(--primary-tint); border-color: var(--primary); }

/* --------------------------------------------------------------- novinky */

.news-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
}
@media (min-width: 46rem) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .news-grid { grid-template-columns: repeat(3, 1fr); } }

.news-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: var(--surface);
}
/* The picture band, the same on every card whether or not there is a picture.
   Without it a card that has a photograph and one that has not begin their text
   at different heights, and a row of three lines up nowhere. A fixed ratio, and
   the photograph is cropped into it rather than setting the height itself: a
   portrait snapshot is not allowed to make its card twice as tall as the two
   beside it. */
.news-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* No photograph: the association's own emblem on a tinted band (user's idea,
   2026-08-29). The report cards hatch an empty slot, which reads as a picture
   that failed to load — right for a listing somebody was supposed to attach a
   photograph to, wrong here, where half the posts legitimately have none.

   The address is relative to this stylesheet, not `/static/...`: the site can
   be mounted under a path prefix, and an absolute path would 404 there. */
.news-thumb-empty {
  background: var(--primary-tint) url("../img/logo-small.png") center / auto 52% no-repeat;
}

.news-date { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink-soft); }
/* Capped at three lines. The association writes some headlines in capitals and
   at full length — one of them ran to four lines and left the two cards beside
   it half empty. The whole title is on the article, one click away. */
.news-title {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-title a { color: inherit; text-decoration: none; }
.news-title a:hover { text-decoration: underline; }
.news-excerpt {
  margin: 0;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* One news article.
   The post was written twice — Hungarian, a rule of dots, Slovak — so the page
   has to answer "which language am I reading" before it answers anything else.
   The divider says it, and the switch above changes it. Both halves are in the
   markup; without JavaScript they simply both show, each under its own
   divider, which is the same article read straight through. */

.article-meta { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.25rem; }
.article-photo { margin: 0 0 1.5rem; }
/* Capped, and cropped rather than letterboxed. A Facebook photograph can be
   taller than it is wide, and at full height it pushed the language switch and
   the first sentence off the screen — the reader arrived at a picture and had
   to go looking for the article. */
.article-photo img {
  width: 100%;
  max-height: 24rem;
  object-fit: cover;
  border-radius: var(--radius);
}

.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-bottom: 1.5rem;
}
.lang-switch-label { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
/* One control, two halves: a segmented pair reads as a choice between two
   states, where two separate buttons read as two actions. */
.lang-switch-buttons {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lang-btn {
  font: inherit;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border: 0;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn:hover { background: var(--surface-2); color: var(--ink); }
.lang-btn[aria-pressed="true"] { background: var(--primary); color: #fff; }

/* A rule with the language written into it. `min-width: 0` on the lines so a
   long label never pushes them out of the row. */
.lang-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.lang-divider::before,
.lang-divider::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  border-top: 1px solid var(--line);
}
/* The first section starts under the photograph or the switch, so it needs no
   space above it — the ones after it are separating two blocks of text.
   `first-of-type`, not `first-child`: the switch sits before it. */
.news-section:first-of-type .lang-divider { margin-top: 0; }

/* Sections nothing could label: still divided, just not named. */
.lang-divider-plain { border: 0; border-top: 1px solid var(--line); margin: 2rem 0 1rem; }

.news-section > h2:first-child,
.news-section .lang-divider + h2 { margin-top: 0; }

.news-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 1.25rem 0 0;
}
.news-tags li {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Card whose photograph runs edge to edge above the text. */
.card-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-photo > a { display: block; }
.card-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--line); }
.card-body { padding: 1.25rem; }
.card-body h2 { font-size: 1.15rem; margin-top: 0; }
.card-body h2 a { text-decoration: none; }
.card-body h2 a:hover { text-decoration: underline; }

.page-photo { margin: 1.5rem 0 2rem; }
.page-photo img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }

.gallery {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 46rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.phone { font-size: 1.4rem; font-weight: 700; margin: 0.25rem 0; }
.phone a { text-decoration: none; }
.phone a:hover { text-decoration: underline; }

.badge {
  display: inline-block;
  background: var(--primary-tint);
  color: var(--primary-dark);
  border-radius: var(--radius);
  padding: 0.1rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 0 0.35rem 0.35rem 0;
}

.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0 0; padding: 0; }
.tags li {
  font-size: 0.8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.1rem 0.5rem;
  color: var(--ink-soft);
}

.iban { font-weight: 700; letter-spacing: 0.03em; }

.tel-cta { font-size: 1.25rem; font-weight: 700; }

.link-more::after { content: " →"; }

/* --------------------------------------------------------------- buttons */

.btn {
  /* Flex, so the label sits in the middle of the button both ways.
     `inline-block` centred it across but not down, and that shows the moment
     two buttons of different heights stand side by side: beside the two-line
     "Volať" button, "Videl som túto osobu" stretched to 66 px and left its
     one line of text at the top, 14 px from the roof and 30 px from the floor.
     `gap` is here because a flex container drops the whitespace between two
     children, which is what holds a label and a number apart. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--radius);
  padding: 0.65rem 1.25rem;
  font-weight: 600;
  /* Centred here, not at each place a button is stretched. At its natural
     width this changes nothing; the moment a layout gives a button the full
     row — which every one of them does on a phone — left-aligned text reads
     as a broken button. It was set on `.cta-actions .btn` and on `.btn-call`
     and missing on “Videl som túto osobu”, which is exactly the failure a
     per-place rule produces. */
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
}
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--primary-tint); }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.25rem; }

/* ----------------------------------------------------------------- flash */

.flash {
  border-left: 4px solid;
  padding: 0.75rem 1rem;
  margin-top: 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.flash-success { border-color: #1a7f4b; background: #eaf6ef; }
.flash-error { border-color: var(--alert); background: #fbecec; }

/* ----------------------------------------------------------------- forms */

.form { max-width: 34rem; }

.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.field .req { color: var(--alert); margin-left: 0.15rem; }

.field input[type="text"],
.field input[type="search"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field input[type="file"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid #9aa5b6;
  border-radius: var(--radius);
  background: var(--surface);
}
.field textarea { min-height: 9rem; resize: vertical; }

.field-error input, .field-error select, .field-error textarea { border-color: var(--alert); }
.field .error { color: var(--alert); font-size: 0.875rem; margin: 0.3rem 0 0; }

/* Something wrong with the submission as a whole rather than with one field —
   in practice a challenge that did not pass. It sits above the button with no
   field to attach itself to, so it carries its own border and spacing. */
.form-error {
  color: var(--alert);
  font-weight: 600;
  margin: 1rem 0;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--alert);
  background: var(--surface-2);
}
.field .hint { color: var(--ink-soft); font-size: 0.875rem; margin: 0.3rem 0 0; }

/* A link out of a page, sitting above its content. */
.page-actions { margin: 0 0 1.5rem; }

.field-check label { display: flex; gap: 0.55rem; align-items: flex-start; font-weight: 400; }

/* The browser's default checkbox is 13px, which is a hard thing to hit with a
   thumb -- and on these forms one of them is the consent box, so it gates the
   whole submission. The label wraps the input, so the text is tappable too,
   but the box itself should not be the small target. */
.field-check input {
  margin-top: 0.15rem;
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  accent-color: var(--brand);
}

.field-row { display: grid; gap: 0 var(--gap); }
@media (min-width: 34rem) { .field-row { grid-template-columns: 2fr 1fr; } }

/* Honeypot: reachable by bots, gone for everyone else. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- listings */

.filters {
  display: grid;
  gap: 0 var(--gap);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 0.25rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 46rem) { .filters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .filters { grid-template-columns: repeat(4, 1fr); } }
.filter-actions { display: flex; gap: 0.75rem; align-items: end; padding-bottom: 1.1rem; }

/* The count on the left, ordering on the right, on one line where there is
   room and stacked where there is not. */
.list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-bottom: 0.5rem;
}
.list-head .result-count { margin: 0; }

.sort-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}
.sort-form label { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.sort-form select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  border: 1px solid #9aa5b6;
  border-radius: var(--radius);
  background: #fff;
}

.result-count { font-weight: 600; }

.listing-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap);
}
@media (min-width: 40rem) { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }

.listing-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.listing-card a { display: block; color: inherit; text-decoration: none; height: 100%; }
.listing-card a:hover { background: var(--surface-2); }
.listing-card a:hover h3 { text-decoration: underline; }

.listing-thumb { aspect-ratio: 4 / 3; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; }
.listing-thumb-empty {
  display: block;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(45deg, var(--line-soft) 0 8px, transparent 8px 16px);
}

.listing-body { padding: 0.9rem 1rem 1.1rem; }
.listing-cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 0.3rem;
}
.listing-body h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.listing-date { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

/* List view: same markup, wider rows. */
@media (min-width: 40rem) {
  .listing-grid.as-list { grid-template-columns: 1fr; }
  .listing-grid.as-list .listing-card a { display: grid; grid-template-columns: 12rem 1fr; }
  .listing-grid.as-list .listing-thumb { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
}

.meta { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0 0 1.5rem; }
.meta dt { font-weight: 700; color: var(--ink-soft); }
.meta dd { margin: 0; }

.listing-text { white-space: normal; }

.photo-grid { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }

.empty { padding: 2rem; text-align: center; background: var(--surface-2); border: 1px solid var(--line); }

.pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; margin: 2rem 0 0; }
.pagination a, .pagination span {
  display: block;
  min-width: 2.4rem;
  text-align: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}
.pagination [aria-current] { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }

/* --------------------------------------------------------------- documents */

/* One card design for every kind of file. A spreadsheet, a scan and a
   photograph are the same tile with one word and one colour changed: a grid
   whose tiles change shape with whatever happens to be in them reads as a
   mistake rather than as a list. The thumbnail is a fixed ratio for the same
   reason - an image preview cannot be allowed to make its card taller than
   the one beside it. */

.doc-grid {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .doc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .doc-grid { grid-template-columns: repeat(3, 1fr); } }

.doc-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  overflow: hidden;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.doc-card:hover {
  border-color: var(--primary);
  box-shadow: 0 6px 20px rgba(16, 25, 43, 0.1);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .doc-card, .doc-card:hover { transition: none; transform: none; }
}

/* The preview. Same box whatever is inside it. */
.doc-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  overflow: hidden;
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* The stand-in when the file cannot show itself: its type, set large. */
.doc-kind {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--doc-colour, var(--ink-soft));
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
}

/* Only the colour changes by family, so the shape stays one shape. */
.doc-doc     { --doc-colour: #96131b; }
.doc-sheet   { --doc-colour: #1a7f4b; }
.doc-slides  { --doc-colour: #9a6200; }
.doc-archive { --doc-colour: #57637a; }
.doc-image   { --doc-colour: #16345c; }
.doc-other   { --doc-colour: #47536b; }

.doc-body { padding: 1rem 1.1rem 0.5rem; flex: 1 1 auto; min-width: 0; }
.doc-title { font-size: 1.05rem; margin: 0 0 0.35rem; line-height: 1.35; }
.doc-title a { color: inherit; text-decoration: none; }
.doc-title a:hover { text-decoration: underline; }
/* The whole card is the target, so the title's own link covers it. Everything
   after it is raised back above, which is what keeps "Stiahnuť" clickable. */
.doc-title a::after { content: ""; position: absolute; inset: 0; }
.doc-card { position: relative; }
.doc-note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.925rem;
  /* Three lines, so a long note cannot set the height of the whole row. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.doc-meta {
  display: flex;
  align-items: center;
  /* Wraps rather than overflows: with two actions and a long size the row ran
     past the card edge and cut "Stiahnuť" in half. The actions drop to their
     own line instead, still right-aligned. */
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin: 0;
  padding: 0.75rem 1.1rem 1rem;
  font-size: 0.85rem;
}
/* "234.4 kB" is one value and must not break across two lines. */
.doc-meta .muted { white-space: nowrap; }
.doc-badge {
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: #fff;
  background: var(--doc-colour, var(--ink-soft));
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}
/* The actions at the foot of the card. The whole card is already a link to the
   file; these are the two named ways of using it, so they sit above the
   title's overlay and are thumb-sized boxes rather than bare words. */
.doc-act {
  position: relative;  /* above the title's overlay */
  font-weight: 600;
  padding: 0.55rem 0.35rem;
  /* Keeps the padding from making the row taller than the text needs. */
  margin-block: -0.55rem;
  white-space: nowrap;
}
/* The pair travels together: pushed right of the size, and dropping to its own
   line as one block when the card is too narrow for all three. */
.doc-acts {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: auto;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin-top: 3rem;
  background: var(--primary-dark);
  color: #e8edf5;
  padding-block: 2.5rem 1.5rem;
}
.site-footer a { color: #fff; }
.site-footer h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; margin: 0 0 0.5rem; }
.site-footer .muted { color: #b9c4d6; }

.footer-grid { display: grid; gap: 1.75rem; }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }

.footer-phone { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.25rem; }

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.85rem;
}
.footer-bottom p { margin: 0; }

@media print {
  .site-header, .site-footer, .filters, .actions { display: none; }
}

/* --------------------------------------------------- one person's page */

/* Reached only from a notification, so it is a single card rather than a
   section of the site: no breadcrumbs, no siblings, nothing to browse to. */
.person-page { padding-block: clamp(1.5rem, 1rem + 3vw, 3rem); }

.person-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.person-head { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) {
  .person-head { grid-template-columns: 15rem 1fr; align-items: start; }
}

.person-photo {
  width: 100%;
  max-width: 15rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.person-photo-missing {
  display: grid;
  place-items: center;
  border: 1px dashed var(--line);
}
.person-photo-missing img { width: 4rem; height: 4rem; opacity: 0.5; }

.person-kicker {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.person-card h1 { margin: 0.2rem 0 0.5rem; }

.person-key { display: grid; gap: 0.5rem 1.5rem; margin: 1rem 0 0; }
@media (min-width: 30rem) { .person-key { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person-key dt { font-size: 0.8rem; color: var(--ink-soft); margin: 0; }
.person-key dd { margin: 0; font-weight: 600; }

.person-card section { margin-top: 2rem; }
.person-help {
  background: var(--primary-tint);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.person-source { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1rem; font-size: 0.9rem; }

/* ------------------------------------------------ missing persons list */

/* One folded panel holding every filter. Ordering is no longer in here — it
   is a separate form beside the result count, because it answers a different
   question and sharing a box with the filters said otherwise. */
.missing-filters {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.4rem 1.1rem;
  margin-bottom: 1.25rem;
}
.missing-filters .field { margin-bottom: 1rem; }
.missing-filters .field:last-child { margin-bottom: 0; }

/* The summary is a control, so it looks like one: a chevron that turns, a
   hover state, and a target tall enough for a thumb. The default triangle is
   tiny and reads as decoration. */
.filter-more > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-weight: 600;
  padding: 0.7rem 0;
  list-style: none;
  user-select: none;
}
.filter-more > summary::-webkit-details-marker { display: none; }
/* The circle, and the chevron inside it. Two elements rather than one: a
   gradient "chevron" rendered as a dot, and a rotating border needs its own
   box or it turns the circle with it. */
.filter-more > summary::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.filter-more > summary::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: translateY(-0.12rem) rotate(-45deg);
  transition: transform 0.18s ease;
}
.filter-more[open] > summary::after { transform: translateY(0.06rem) rotate(45deg); }
.filter-more > summary:hover::before {
  background-color: var(--primary-tint);
  border-color: var(--primary);
}
.filter-more > summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.missing-filters label { display: block; margin-bottom: 0.25rem; font-weight: 600; font-size: 0.9rem; }
.missing-filters input, .missing-filters select {
  width: 100%;
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid #9aa5b6;
  border-radius: var(--radius);
  background: #fff;
}

/* From and to on one line, with the dash that says what the pair means. The
   two inputs used to stack, which read as two unrelated fields. */
.age-range { display: flex; align-items: center; gap: 0.5rem; }
/* `min-width: 0` alone let them collapse to a single character inside a
   narrow column; three digits is the whole content, so ask for that much. */
.age-range input { flex: 1 1 0; min-width: 4rem; }
.age-range span { color: var(--ink-soft); }

/* The button belongs on the same baseline as the fields, not below them. */
.missing-filters .filter-actions {
  display: flex;
  align-items: end;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
}

.missing-section h2 .count {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  vertical-align: middle;
}

.missing-grid { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 34rem) { .missing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .missing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 72rem) { .missing-grid { grid-template-columns: repeat(4, 1fr); } }

.missing-card {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: #fff;
}
.missing-card:hover { border-color: var(--primary); }
.missing-card img { width: 100%; height: 100%; object-fit: cover; }
.missing-photo-missing {
  display: grid;
  place-items: center;
  background: var(--surface-2);
}
.missing-photo-missing img { width: 2.5rem; height: 2.5rem; opacity: 0.45; }

.missing-body { display: grid; align-content: start; gap: 0.15rem; padding: 0.75rem 0.85rem; }
.missing-body .muted { font-size: 0.9rem; }
.missing-flag {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--alert);
}

/* ------------------------------------------------------ one person's page */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.person-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }

/* The header is the part somebody reads first and often the only part they
   read: portrait, name, the four facts that matter, and the phone number. */
.person-head {
  display: grid;
  gap: clamp(1rem, 0.5rem + 2vw, 2rem);
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 44rem) {
  .person-head { grid-template-columns: minmax(12rem, 18rem) 1fr; align-items: start; }
}

.person-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
}
.person-portrait-missing {
  display: grid;
  place-items: center;
  gap: 0.5rem;
  aspect-ratio: 3 / 4;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-soft);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
}
.person-portrait-missing img { width: 3.5rem; height: 3.5rem; opacity: 0.45; }

.person-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.person-summary h1 { margin: 0.25rem 0 0.35rem; }
.person-alias { color: var(--ink-soft); margin: 0 0 1rem; }

.person-danger {
  background: #fbeced;
  border-left: 4px solid var(--alert);
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
}

.person-facts {
  display: grid;
  gap: 0.75rem 1.5rem;
  margin: 0 0 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 60rem) { .person-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.person-facts dt { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.person-facts dd { margin: 0.15rem 0 0; font-size: 1.05rem; font-weight: 600; }

.person-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* The call button carries a label and a nine-digit number, which do not fit on
   one line on a phone — and a phone is where it is pressed. Two lines, with the
   number the larger of them, because the number is the point. */
.btn-call {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  line-height: 1.25;
  text-align: center;
}
.btn-call span { font-size: 0.85rem; font-weight: 600; opacity: 0.9; }
.btn-call strong { font-size: 1.15rem; letter-spacing: 0.01em; }
/* On a phone it is the one thing to press, so it takes the row. */
@media (max-width: 32rem) { .person-actions .btn { flex: 1 1 100%; } }

.person-details {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
}
@media (min-width: 56rem) { .person-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person-details h2 { margin-top: 0; font-size: 1.1rem; }
.person-details h3 { font-size: 0.95rem; margin-top: 1rem; color: var(--ink-soft); }

/* Label and value on one row, so a long list stays scannable rather than
   turning into a column of alternating lines. */
.person-table { margin: 0; }
.person-table > div {
  display: grid;
  grid-template-columns: minmax(9rem, 40%) 1fr;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.person-table dt { color: var(--ink-soft); }
.person-table dd { margin: 0; }

.person-help {
  padding: clamp(1rem, 0.5rem + 2vw, 2rem);
  background: var(--primary-tint);
  border-top: 1px solid var(--line);
}
.person-help h2 { margin-top: 0; }
.person-help ol { margin: 0; padding-left: 1.25rem; }
.person-help li { margin-bottom: 0.4rem; }

.person-source {
  padding: 1rem clamp(1rem, 0.5rem + 2vw, 2rem) 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

/* A few honest numbers above the list. Four tiles that stay readable on a
   phone: two by two there, one row on a wide screen. */
.missing-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 1.5rem 0 0.75rem;
}
@media (min-width: 46rem) { .missing-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.missing-stats > div { background: #fff; padding: 0.9rem 1rem; }
.stat-number { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.1; color: var(--primary); }
.stat-label { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.stat-note { font-size: 0.85rem; margin-bottom: 1.5rem; }

/* Sharing is the point of this page: a search travels by being passed on. */
.person-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1rem; font-size: 0.9rem; }
.person-share span { color: var(--ink-soft); }

/* Region and district in the open, the rest folded, ordering apart from both:
   ordering changes nothing about who is shown, so it is not a filter. */
/* Region, district and the button on one line once there is room for it.
   `auto` for the button so it takes only what it needs and the two selects
   keep the rest — they hold district names, which are the long values here. */
.filter-more > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.35rem 0;
}
.filter-more > summary:hover { color: var(--accent, var(--primary-dark)); }
/* How many criteria are set, so a folded panel never hides that the list has
   been narrowed. */
.filter-more .section-count {
  display: inline-block;
  min-width: 1.4rem;
  margin-left: 0.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--primary-dark);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
}

.filter-fields { display: grid; gap: 0 1rem; padding-top: 0.85rem; }
@media (min-width: 40rem) { .filter-fields { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .filter-fields { grid-template-columns: repeat(3, 1fr); } }

/* Still used by the reports page, which has its own sort strip. */
.list-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.list-controls .field { margin-bottom: 0; flex: 1 1 11rem; }
.list-controls select { width: 100%; }
@media (min-width: 46rem) { .list-controls .field { flex: 0 1 14rem; } }
.missing-body .small { font-size: 0.8rem; }