/* ==========================================================================
   Components
   ========================================================================== */

/* --- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-5);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn--primary:hover { background: var(--primary-dark); color: var(--on-primary); }

.btn--secondary {
  background: var(--surface);
  color: var(--primary);
  border-color: var(--primary);
}
.btn--secondary:hover { background: var(--primary-light); }

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border-strong);
  /* 44px floor: WCAG 2.5.8 target size, and the practical floor for
     cold or shaking hands on a phone. */
  min-height: 44px;
  min-width: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--size-sm);
}
.btn--ghost[aria-pressed="true"] {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
}

.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn-row > .btn { flex: 1 1 12rem; }

/* --- Hero action: "I have just arrived" -------------------------------- */
.hero-action {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  min-height: 84px;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--primary);
  color: var(--on-primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius-lg);
  text-decoration: none;
  text-align: left;
  box-shadow: var(--shadow-md);
}
.hero-action:hover { background: var(--primary-dark); color: var(--on-primary); }
.hero-action__icon { flex: 0 0 auto; }
.hero-action__title { font-size: var(--size-xl); font-weight: 700; line-height: 1.2; }
.hero-action__sub { font-size: var(--size-sm); opacity: 0.92; }

/* Breakpoints are in rem, so this also catches the enlarged-text modes:
   at 25px root, a 320px screen measures 12.8rem. Side-by-side icon and
   text then leave the title one word per line, so it stacks instead. */
@media (max-width: 20rem) {
  .hero-action {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4);
  }
  .hero-action__title { font-size: var(--size-lg); }
}

/* --- Category tile ------------------------------------------------------ */
.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 8.5rem;
  padding: var(--sp-4) var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tile:hover {
  border-color: var(--primary);
  color: var(--text);
  transform: translateY(-2px);
}
.tile:active { transform: none; }
.tile__icon { color: var(--primary); flex: 0 0 auto; }
.tile__label { font-size: var(--size-sm); font-weight: 600; line-height: 1.25; }

@media (min-width: 36rem) {
  .tile { min-height: 10rem; }
  .tile__label { font-size: var(--size-base); }
}

/* Single-column list layout when text is enlarged on a small phone.
   Pairs with the .tile-grid rule in layout.css. */
@media (max-width: 20rem) {
  .tile {
    min-height: var(--tap);
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
  }
  .tile__label { font-size: var(--size-base); }
}

/* --- Chips (secondary profile picks) ------------------------------------ */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--size-sm);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
}
.chip[aria-pressed="true"] {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  font-weight: 600;
}

/* Chips inside an institution card need a little air above them. */
.row-card .chip-row { margin-top: var(--sp-2); }

/* A sub-unit shown inside its parent institution: indented, with a brand
   rule down the left so the nesting reads at a glance. */
.row-card--child {
  margin-top: var(--sp-3);
  margin-left: var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--primary-light);
}

/* A secondary link that must not compete with the record it sits beside —
   the "джерело" pointer next to a status badge. */
.link-quiet {
  font-size: var(--size-sm);
  color: var(--text-muted);
}

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--sp-4); }
.card__title { font-size: var(--size-lg); margin-bottom: var(--sp-2); }

/* --- Step card ---------------------------------------------------------- */
.step {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--sp-4);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.step:hover { border-color: var(--primary); color: var(--text); }

.step--blocker { border-left-color: var(--blocker); }
.step--waiting { border-left-color: var(--waiting); }
.step--done    { border-left-color: var(--done); background: var(--done-bg); }
.step--locked  { border-left-color: var(--locked); background: var(--locked-bg); }

.step__head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.step__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  font-size: var(--size-sm);
}
.step--locked .step__num { background: var(--border); color: var(--text-muted); }
.step__title { font-size: var(--size-lg); font-weight: 700; line-height: 1.25; }
.step__where { color: var(--text-muted); font-size: var(--size-sm); }

.step__docs {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  background: var(--surface-sunken);
  border-radius: var(--radius);
  font-size: var(--size-sm);
  list-style: none;
}
.step__docs li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.step__docs li:last-child { margin-bottom: 0; }

/* --- Status notes ------------------------------------------------------- */
.note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--size-sm);
  line-height: 1.45;
}
.note__icon { flex: 0 0 auto; }
.note--blocker { background: var(--blocker-bg); color: var(--blocker); }
.note--waiting { background: var(--waiting-bg); color: var(--waiting); }
.note--done    { background: var(--done-bg);    color: var(--done); }
.note--info    { background: var(--primary-light); color: var(--primary-dark); }

/* --- Badges ------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.15em 0.55em;
  font-size: var(--size-xs);
  font-weight: 600;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge--access { background: var(--done-bg); color: var(--done); border-color: transparent; }

/* --- Contact block ------------------------------------------------------ */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--size-sm);
}
/* Phone links get a real target: on a phone this is the single most
   important control on the page. */
.contact__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-1) 0;
  font-weight: 700;
  font-size: var(--size-lg);
  white-space: nowrap;
}

/* --- Verification stamp ------------------------------------------------- */
.verified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--border);
  font-size: var(--size-xs);
  color: var(--text-muted);
}

/* --- Definition rows ---------------------------------------------------- */
.facts { display: grid; gap: var(--sp-2); margin: 0; font-size: var(--size-sm); }
.facts__row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.facts__key { flex: 0 0 auto; color: var(--text-muted); }

/* --- Disclosure --------------------------------------------------------- */
details.disclosure {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0;
}
details.disclosure > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after { content: " ▾"; margin-left: auto; color: var(--text-muted); }
details.disclosure[open] > summary::after { content: " ▴"; }
details.disclosure > .disclosure__body { padding: 0 var(--sp-4) var(--sp-4); }

/* --- Map placeholder ---------------------------------------------------- */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 14rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* aspect-ratio fallback for Safari 14 */
@supports not (aspect-ratio: 4 / 3) {
  .map-frame { height: 16rem; }
}

/* --- Read-aloud control -------------------------------------------------
   Injected by app.js only when the browser actually has a speech engine.
   Placed first inside <main> so a reader using magnification finds it
   without hunting. */
.speak-button {
  margin-bottom: var(--sp-4);
}
.speak-button[aria-pressed="true"] {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
}

/* --- Breathing pacer ----------------------------------------------------
   Collapsed by default: it must never stand between the reader and the
   information they came for. */
.breath-list { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }

.breath-card {
  padding: var(--sp-4);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.breath-card__title { font-size: var(--size-base); margin-bottom: var(--sp-1); }

.breath-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 5rem;
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--primary-light);
  border-radius: var(--radius);
  text-align: center;
}
.breath-stage__label { font-size: var(--size-lg); font-weight: 600; color: var(--primary-dark); }
.breath-stage__count {
  font-size: var(--size-2xl);
  font-weight: 700;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
}

/* A calm expansion on the in-breath, contraction on the out-breath.
   Motion is suppressed for readers who ask for reduced motion — for some
   people animation itself raises arousal, which defeats the purpose. */
.breath-card.is-breathing .breath-stage { transition: transform 1s ease-in-out; }
.breath-card[data-phase="inhale"] .breath-stage { transform: scale(1.04); }
.breath-card[data-phase="exhale"] .breath-stage { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .breath-card .breath-stage { transition: none; transform: none !important; }
}

/* --- Step card: stretched title link ------------------------------------
   The card is a container so the document list can carry its own links.
   The title link is stretched over the whole card, keeping the large tap
   target, and the document links sit above it. */
.step { position: relative; }

.step__link { color: inherit; text-decoration: none; }
.step__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.step__link:hover ~ .step__where,
.step__link:hover .step__title { color: var(--primary); }

.step:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Anything interactive inside the card must sit above the stretched link. */
.step__docs a,
.step__restore { position: relative; z-index: 1; }

.step__restore {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.1em 0.5em;
  font-size: var(--size-xs);
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--primary-light);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.step__restore:hover { background: var(--primary); color: var(--on-primary); }

/* On paper the badge is meaningless; the word alone still reads. */
@media print {
  .step__restore { background: none !important; color: #000 !important; padding: 0; }
  .step__restore::before { content: "— "; }
}

/* --- Map canvas ---------------------------------------------------------
   A real height is required: Leaflet renders nothing in a zero-height box. */
.map-canvas {
  height: 60vh;
  min-height: 18rem;
  max-height: 32rem;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

/* Leaflet paints its own controls; keep them legible in dark mode. */
.leaflet-popup-content { font-family: var(--font); font-size: var(--size-sm); }
.leaflet-popup-content a { color: var(--primary); }

/* --- Breathing circle ---------------------------------------------------
   Following a shape with the eyes is easier than reading a word when
   attention has scattered — which is the state this is for. */
.breath-visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  flex: 0 0 auto;
}
.breath-visual__ring {
  position: absolute;
  inset: 0;
  border: 3px solid var(--primary);
  border-radius: 50%;
  transform: scale(0.6);
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  opacity: 0.5;
}
.breath-visual__count {
  position: relative;
  font-size: var(--size-xl);
  font-weight: 700;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
}
.breath-card[data-phase="inhale"] .breath-visual__ring,
.breath-card[data-phase="inhale_top"] .breath-visual__ring {
  transform: scale(1);
  opacity: 1;
}
.breath-card[data-phase="exhale"] .breath-visual__ring {
  transform: scale(0.6);
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .breath-visual__ring { transition: none; transform: scale(0.85) !important; }
}

/* --- Grounding ---------------------------------------------------------- */
.ground-card { margin-top: var(--sp-3); }

.ground-stage {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--primary-light);
  border-radius: var(--radius);
  text-align: center;
}

.ground-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  min-height: 1.5rem;
}
.ground-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--primary);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ground-dot.is-done { opacity: 0.25; transform: scale(0.7); }

.ground-prompt {
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: var(--sp-1);
  max-width: none;
}
.ground-hint { margin-bottom: var(--sp-3); max-width: none; }

/* --- Transport ----------------------------------------------------------
   The route number is what people look for first, so it reads as a badge
   the eye can find without reading the sentence around it. */
.transport-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.transport-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin: 0;
}

.transport-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  min-height: 2.2rem;
  padding: 0 var(--sp-2);
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: var(--radius);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.transport-body { flex: 1 1 auto; min-width: 0; line-height: 1.5; }

/* Foldable catalogue groups.
   <details> rather than a scripted accordion: it opens with keyboard,
   is announced by screen readers, and works with JavaScript blocked —
   which on a slow connection is more common than it looks. */
.group {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    background: var(--surface);
}

.group__head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
    padding: var(--sp-3);
    cursor: pointer;
    /* 44px minimum: a fingertip, not a mouse pointer. */
    min-height: 44px;
    list-style: none;
}

.group__head::-webkit-details-marker { display: none; }

.group__head::before {
    /* Drawn, not a glyph: "▸" renders as a hairline dot in several fonts
       that cover Ukrainian, which reads as a bullet rather than as
       something you can open. */
    content: "";
    width: 0;
    height: 0;
    border-left: 7px solid var(--text-muted);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    flex: none;
    transition: transform 0.15s ease;
}

.group[open] > .group__head::before { transform: rotate(90deg); }

.group__title {
    font-weight: 600;
    font-size: 1.05rem;
}

.group__count {
    background: var(--surface-2);
    color: var(--muted);
    border-radius: 999px;
    padding: 0.1em 0.6em;
    font-size: 0.85rem;
}

.group__note {
    color: var(--muted);
    font-size: 0.9rem;
    /* Pushed to its own line on narrow screens so the title never breaks
       mid-word — the header did exactly that once already. */
    flex-basis: 100%;
}

.group .rows { padding: 0 var(--sp-3) var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
    .group[open] > .group__head::before { transition: none; }
}

/* Printing a folded page prints nothing useful, and this list is one of
   the few things people do print. */
@media print {
    .group { border: 0; }
    .group .rows { display: block !important; }
}


/* Row cards.
   Used by both the admin and the public site — the catalogue, the map
   list, the step card and the social page. They lived in admin.css, which
   the site layout does not load, so every one of those lists rendered
   without a card, a border or spacing. Shared markup belongs in the
   shared stylesheet. */
.rows { display: grid; gap: var(--sp-2); }

.row-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
}
.row-card--stale { border-left-color: var(--blocker); }
.row-card--never { border-left-color: var(--blocker); background: var(--blocker-bg); }

.row-card__main { flex: 1 1 16rem; min-width: 0; }
.row-card__title { font-weight: 600; }
.row-card__meta { font-size: var(--size-sm); color: var(--text-muted); }
.row-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* The call-first prompt inside "якщо відмовили". */
.callout-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.callout-call strong { flex-basis: 100%; }

/* Escape links from a dead end.
   "Ось як його отримати" is the single most important link on a step
   card: it is what a person without documents follows instead of giving
   up. Measured on a 375px screen it was 19px tall — below even the 24px
   minimum, let alone a fingertip — because it is an inline link inside a
   sentence. Padding lifts the hit area without breaking the text flow;
   the negative margin keeps the line spacing where it was. */
.link-target {
  display: inline-block;
  padding: 0.45em 0.15em;
  margin: -0.45em -0.15em;
  /* Underlined, always: colour alone is not a signal for a reader with
     low vision, and this is exactly that reader's link. */
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* An inline map inside a step card: enough to see which street, not so
   tall that the address and phone below it fall off the screen. */
.map-canvas--inline {
  height: 240px;
  margin-top: var(--sp-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Shown only on a coarse pointer — a phone or tablet. On a desktop the
   geo: scheme resolves to nothing and the button just fails silently. */
.touch-only { display: none; }

@media (pointer: coarse) {
  .touch-only { display: inline-flex; }
}

/* --- Про громаду ---------------------------------------------------------
   Цифра має читатися першою: людина запамʼятовує «65 квартир», а не абзац
   про системну роботу. Тому число велике, підпис дрібний, джерело поруч. */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: var(--sp-4);
}

.fact__value {
  font-size: var(--size-xl, 1.75rem);
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1.1;
}

.fact__label { margin-top: var(--sp-1); font-weight: 600; }
.fact__note  { margin-top: var(--sp-2); font-size: var(--size-sm); color: var(--text-muted); }

.head-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: var(--sp-3);
  flex: none;
}

/* Рівні довіри. Кольором відрізняється лише те, що справді відрізняється:
   підтверджене людиною, перевірене машиною, і ще нічиє. */
.badge--ok      { background: var(--done-bg); color: var(--done); }
.badge--partial { background: var(--waiting-bg); color: var(--waiting); }

/* --- База закладів -------------------------------------------------------
   Довідник, а не вітрина: рядок замість картки, щоб на екран уміщалося
   якнайбільше і око бігло вниз по назвах. */
.branch {
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  background: var(--surface);
  margin-bottom: var(--sp-3);
}

.branch__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-weight: 700;
  min-height: 44px;
}

.branch__title { color: var(--primary-dark); }

.branch__count {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 0 var(--sp-2);
  font-size: var(--size-sm);
}

.branch__group { padding: 0 var(--sp-4) var(--sp-3); }
.branch__group-title { font-size: var(--size-sm); margin: var(--sp-3) 0 var(--sp-2); }

.reg-list { list-style: none; margin: 0; padding: 0; }

.reg-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  font-size: var(--size-sm);
}

.reg-item__name { font-weight: 600; flex: 1 1 14rem; }
.reg-item__addr { color: var(--text-muted); flex: 1 1 16rem; }
.reg-item__phone { white-space: nowrap; font-weight: 600; }

/* Філії всередині закладу: відступ і тонка лінія, щоб було видно, що це
   адреси однієї установи, а не окремі заклади. */
.reg-branches {
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--primary-light);
  flex-basis: 100%;
}
.reg-branches li { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); padding: var(--sp-1) 0; }

/* Мапа не має права виринати над інтерфейсом. Власний контекст накладання
   замикає всі шари Leaflet усередині рамки: підняти шапку числом було б
   half-fix, бо наступний плагін мапи знову виявився б вище. */
.map-frame,
.map-canvas {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* Платна послуга — попередження, а не прикраса: помаранчевий, щоб око
   зачепилося до того, як людина вирушить. */
.badge--paid { background: var(--waiting-bg); color: var(--waiting); font-weight: 600; }

/* Лічильник на плитці напряму: скільки закладів усередині. Дрібний і
   приглушений — він допомагає оцінити обсяг, а не змагається з назвою. */
.tile__count {
  font-size: var(--size-xs);
  color: var(--text-muted);
  font-weight: 600;
}

/* Шлях назад із екрана типу. */
.crumb { margin-bottom: var(--sp-2); font-size: var(--size-sm); }

/* Шкала вартості. Три стани, бо їх справді три: безкоштовно, безкоштовно
   за умови, платно. Двоколірна шкала змушувала б фарбувати «за
   направленням» або в зелений (і людина платить дарма, не спитавши), або
   в червоний (і не йде по те, що їй належить). */
.badge--free     { background: var(--done-bg);    color: var(--done); }
.badge--cond     { background: var(--waiting-bg); color: var(--waiting); }
.badge--paidfull { background: var(--blocker-bg); color: var(--blocker); }
.badge--muted    { background: var(--surface-sunken); color: var(--text-muted); }

/* Атрибут hidden має перемагати display у .btn і подібних. */
[hidden] { display: none !important; }

/* Екран типу установ: перемикач групування й «найближче». */
.view-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2); margin: var(--sp-3) 0;
}
.view-switch { display: inline-flex; border: 1px solid var(--border, #ccc); border-radius: 999px; overflow: hidden; }
.view-switch a { padding: var(--sp-2) var(--sp-3); text-decoration: none; color: inherit; }
.view-switch a[aria-current="true"] { background: var(--primary); color: var(--on-primary); }

/* «Про громаду»: картки привабливості. */
.about-cards { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.about-card { padding: var(--sp-3); border: 1px solid var(--border, #ddd); border-radius: 12px; }
.about-card__title { font-weight: 600; margin-bottom: var(--sp-1); }
.about-card .chip-row { margin-top: var(--sp-2); }
.about-identity { display: flex; gap: var(--sp-3); align-items: flex-start; }
.about-identity__emblem { flex: none; width: 72px; height: auto; }
.chip[aria-current="true"] { background: var(--primary); color: var(--on-primary); }

/* «Якщо зараз важко» (?p=calm): стан — заголовок, техніка — підпис, кроки великим. */
.calm summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 2px; min-height: 48px; }
.calm summary::-webkit-details-marker { display: none; }
.calm summary::after { content: "›"; position: absolute; right: 16px; top: 14px; font-size: 1.4em; color: var(--muted, #5C635E); transition: transform .15s; }
.calm { position: relative; display: block; }
.calm[open] summary::after { transform: rotate(90deg); }
.calm__steps { margin: 12px 0 4px; padding-left: 1.4em; font-size: 1.1rem; line-height: 1.55; }
.calm__steps li + li { margin-top: 6px; }