/* TippyTaps — catalog archive: sidebar filters + results layout. */

.tt-layout{ display:grid; grid-template-columns:296px minmax(0,1fr); gap:30px; align-items:start; }

/* ---- sidebar ---- */
/* No max-height, no inner scroll. Capping this column to the viewport was tried
   on 2026-08-11 to make `position:sticky` actually hold — it is 2189px closed
   and 6351px fully open against a ~1080px window, so the sticky lets go and
   re-pins at the edges. The cap worked and the nested scroller it created was
   worse than the problem (sQuem: "скролл не нужно, он ужасный"). The sidebar
   simply scrolls with the page; sticky only bites on short viewports. */
.tt-sidebar{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px 20px 18px; position:sticky; top:24px; }
.tt-fgroup{ padding:16px 0; border-bottom:1px solid var(--line); }
.tt-fgroup:last-of-type{ border-bottom:0; }
.tt-lbl{ font-family:var(--disp); font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin-bottom:12px; }

/* Foldable filter groups. Every group except Mesto is a <details open>; on mobile
   tt-ui.js closes them, because six expanded axes push the results a screen and a
   half down. City and district are never folded — that is the filter people came
   with.
   The caret and the pointer used to be inside the max-width:900px block, i.e. the
   groups were inert on desktop. sQuem, 2026-08-07: the desktop sidebar is the one
   that scrolls forever, so folding is on at every width now. */
summary.tt-lbl{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; margin-bottom:0; }
summary.tt-lbl::-webkit-details-marker{ display:none; }
summary.tt-lbl::after{ content:""; margin-left:auto; width:9px; height:9px; flex:none;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .18s; }
.tt-fold[open] > summary.tt-lbl{ margin-bottom:12px; }
.tt-fold[open] > summary.tt-lbl::after{ transform:rotate(-135deg); }

/* ---- Služby: one fold per Skupina, plus the search over them ---- */
.tt-catfold{ border-top:1px solid var(--line-2); }
.tt-catfold:first-of-type{ border-top:0; }
/* Type size and colour match .tt-check deliberately: these summaries sit in the
   same scroll as the checkbox rows, so a lighter, smaller treatment read as a
   rendering fault rather than as hierarchy (sQuem, 2026-08-11: "шрифты не такие
   как в других фильтрах"). Weight stays at 700 against the rows' 600 — that,
   plus the fold chevron and the rule between groups, is what separates a group
   from an option now. */
summary.tt-cat-group{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  margin:0; padding:9px 0; font-size:14.5px; font-weight:700; color:var(--ink); }
summary.tt-cat-group::-webkit-details-marker{ display:none; }
/* The count is what makes a closed group worth reading: "Chirurgia 24" says how
   much is behind it, so nobody opens all ten to find out.

   Styled to match .tt-check's own count (.tt-cnt) exactly — same size, weight,
   colour, no chrome. It used to be a mono-font pill on a --surface-2 ground,
   which put a visible circle around every group number while the option rows
   next to it showed bare digits (sQuem, 2026-08-11: "почему тут цифры в
   кружочек обведены?"). Two treatments for one job read as two kinds of thing.
   tabular-nums so the column of digits stays aligned down the list. */
.tt-catfold-n{ margin-left:auto; flex:none; font-size:12.5px; font-weight:700;
  color:var(--muted); font-variant-numeric:tabular-nums; }
/* No [open] colour rule: closed and open now share var(--ink). It used to lift a
   muted closed state up to ink on open, which is redundant once closed is ink too. */
.tt-catfold.has-active > summary.tt-cat-group{ color:var(--accent-ink); }
.tt-catfold > .tt-checks{ padding-bottom:8px; }

.tt-catsearch{ display:none; position:relative; margin:0 0 10px; }
.tt-js .tt-catsearch{ display:block; }
/* Identical to its two sidebar neighbours — the "Všetky mestá" .tt-select and the
   "Blízko mňa" .tt-geo-btn — down to the corner: same padding, same 1.5px
   --line-strong border, same --radius-sm, same --surface ground, same --accent
   focus ring. They stack in one column, so matching them is the whole point
   (sQuem, 2026-08-11: "закругли как этот селектор"). A 999px pill was tried in
   between and was too round for the company it keeps.

   `appearance:none` is load-bearing, not tidying: the element is `type="search"`,
   and WebKit's UA stylesheet gives that its own control appearance which defeats
   author `border-radius` outright — the field rendered hard-cornered on macOS
   whatever the CSS asked for. Both neighbours already reset it; this one was
   missed, which is why the radius never showed up at all before today. */
/* Every property is restated with `!important`, which is not the usual answer and
   is the right one here.

   Astra prints its form styling as an INLINE <style> in <head>. An inline sheet
   comes after every enqueued file in document order, so at equal specificity it
   wins — and `input[type="search"]` matching our field carries a 4px radius, a
   grey #d1d5db border, a white ground and slate text. Raising our specificity
   was tried (`.tt-site .tt-catsearch input.tt-catsearch-in`) and does not help,
   because the problem is source order at the same weight, not selector weight.
   The two honest options left are to dequeue Astra's inline block — which would
   strip the parent theme's forms site-wide, far past this one input — or to
   declare this control's own values as non-negotiable. This is the smaller blast
   radius: one field, in one sidebar.

   Values are the sidebar's other two controls verbatim (.tt-select, .tt-geo-btn),
   because the point is that the three read as one set. */
.tt-catsearch-in{ width:100% !important; padding:11px 14px !important;
  appearance:none !important; -webkit-appearance:none !important;
  border:1.5px solid var(--line-strong) !important; border-radius:var(--radius-sm) !important;
  background:var(--surface) !important; font-family:inherit !important;
  font-size:14.5px !important; font-weight:600 !important; color:var(--ink) !important;
  box-sizing:border-box !important; box-shadow:none !important; height:auto !important;
  line-height:normal !important; transition:.14s; }
.tt-catsearch-in::placeholder{ color:var(--muted); font-weight:600; opacity:1; }
.tt-catsearch-in:focus{ outline:none !important;
  border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-soft) !important; }
/* WebKit paints its own clear button and magnifier inside a search field; both
   are UA-styled and clash with the palette. */
.tt-catsearch-in::-webkit-search-decoration,
.tt-catsearch-in::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; }
.tt-catsearch-none{ display:block; margin-top:8px; font-size:13px; font-weight:600; color:var(--muted); }
/* `display:block` above outranks the UA rule behind the `hidden` attribute, so the
   message showed with an empty box until this line existed. Any author `display`
   on an element that is toggled with `hidden` needs the same guard. */
.tt-catsearch-none[hidden]{ display:none; }
/* Hidden by the search, not by the fold — kept separate so closing a group does
   not fight the filter and vice versa. */
.tt-check.is-filtered,
.tt-catfold.is-filtered{ display:none; }

.tt-select{ width:100%; padding:11px 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); font-size:15px; font-weight:600; font-family:inherit; color:var(--ink); cursor:pointer;
  appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23877f6e' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.tt-select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tt-select + .tt-select{ margin-top:10px; }

.tt-cat-type{ font-family:ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:12px 0 6px; }
.tt-cat-type:first-child{ margin-top:0; }
.tt-checks{ display:flex; flex-direction:column; gap:1px; }
.tt-check{ display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; cursor:pointer;
  font-size:14.5px; font-weight:600; user-select:none; transition:.12s; }
.tt-check:hover{ background:var(--surface-2); }
.tt-check input{ position:absolute; opacity:0; width:0; height:0; }
/* The tick is a CSS mask, not an inline <svg> per row.
   Measured on prod 2026-08-12: 123 identical 156-byte SVGs — 19 kB and 246 DOM
   nodes for one shape repeated, in a sidebar that was already 968 of the page's
   1354 nodes. A mask-image draws the same glyph with no element at all, and the
   data URI is one string the browser parses once and reuses.
   `background-color` supplies the colour, so it still follows the token. */
.tt-check .box{ width:20px; height:20px; border:2px solid var(--line-strong); border-radius:6px; flex:none;
  display:grid; place-items:center; transition:.14s; background:var(--surface); }
.tt-check .box::after{ content:""; width:12px; height:12px; opacity:0; transition:opacity .14s;
  background-color:#fff;
  -webkit-mask:var(--tt-tick) center/12px 12px no-repeat;
  mask:var(--tt-tick) center/12px 12px no-repeat; }
.tt-check input:checked + .box{ background:var(--accent); border-color:var(--accent); }
.tt-check input:checked + .box::after{ opacity:1; }

/* An OPENED category is an <a>, not a <label> with an <input> — it has a real URL so
   a crawler can follow it (inc/helpers.php). Same row, same box, so the sidebar reads
   as one list; the ticked state comes from a class instead of :checked. */
a.tt-check{ text-decoration:none; color:inherit; }
a.tt-check.is-on > .box{ background:var(--accent); border-color:var(--accent); }
a.tt-check.is-on > .box::after{ opacity:1; }
/* Result count per option — muted, right-aligned, never competes with the label. */
.tt-check .txt{ flex:1 1 auto; }
/* Species icon between the box and the label (design: docs/_inherited-petvet).
   currentColor, so it dims with the row instead of needing a second colour. */
.tt-spi{ flex:none; display:inline-flex; color:var(--muted); margin-right:-2px; }
.tt-check input:checked ~ .tt-spi,
a.tt-check.is-on .tt-spi{ color:var(--green-ink); }
.tt-cnt{ flex:none; font-size:12.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
/* Skupina = a caption over a run of options. Not a term, not a link, no URL.
   Kept in step with summary.tt-cat-group above, which the fold markup uses; this
   plain-div form is the non-collapsible variant. */
.tt-cat-group{ font-size:14.5px; font-weight:700; color:var(--ink); margin:10px 0 2px; }
/* Podkategória, revealed only when its parent is ticked. */
.tt-check-sub{ margin-left:18px; font-size:13.5px; }
.tt-check-sub .box{ width:17px; height:17px; border-radius:5px; }
.tt-check-sub .box svg{ width:10px; height:10px; }

.tt-sidebar .tt-btn.call{ width:100%; margin-top:16px; }
.tt-clear{ display:block; text-align:center; margin-top:10px; color:var(--muted); font-weight:700; font-size:13.5px;
  text-decoration:none; }
.tt-clear:hover{ color:var(--danger); }

/* ---- "Blízko mňa" ----
   The button needs an API that only exists with JS, so it is hidden until header.php
   puts `.tt-js` on <html> — the same rule the rest of the theme uses. Without JS the
   city pickers directly above it are the way to narrow down, and nothing looks broken. */
.tt-geo-btn{ display:none; }
.tt-js .tt-geo-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:11px 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-family:inherit; font-size:14.5px; font-weight:700;
  cursor:pointer; transition:.14s; }
.tt-js .tt-geo-btn:hover{ border-color:var(--accent); color:var(--accent-ink); }
.tt-js .tt-geo-btn.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
.tt-js .tt-geo-btn:disabled{ opacity:.6; cursor:progress; }
.tt-geo-btn svg{ width:16px; height:16px; flex:none; }

/* Лоадер на время поиска позиции (sQuem, 2026-08-14; лапка вместо прицела — 2026-08-14).
   Позицию вычисляет браузер, и это время нам не подчиняется — анимация ничего
   не ускоряет, но отличает «идёт работа» от «кнопка сломалась».

   В кнопке лежат ДВЕ иконки, и меняются они местами, а не одна анимируется:
   прицел объясняет, что кнопка делает, и в покое обязан остаться прицелом.
   Лапка — из логотипа (assets/brand/favicon.svg), шагает и попутно перебирает
   подушечки слева направо. Пока идёт поиск, кнопка не гаснет до .6 — иначе
   лоадер бледнеет ровно тогда, когда на него смотрят. */
.tt-geo-paw{ display:none; }
.tt-js .tt-geo-btn.is-locating .tt-geo-ico{ display:none; }
.tt-js .tt-geo-btn.is-locating .tt-geo-paw{ display:block; }
.tt-js .tt-geo-btn.is-locating{ opacity:1; cursor:progress; border-color:var(--accent); color:var(--accent-ink); }

/* Шаг и перебор подушечек делят один период 1.4s: разойдись они — два ритма
   бились бы друг о друга и движение читалось бы как дёрганье. */
.tt-js .tt-geo-btn.is-locating .tt-geo-paw{
  animation:tt-paw-walk 1.4s ease-in-out infinite; transform-origin:50% 70%; }
@keyframes tt-paw-walk{
  0%,100%{ transform:translateY(0) rotate(-7deg); }
  50%    { transform:translateY(-2px) rotate(7deg); }
}
/* Отрицательные задержки, а не положительные: перебор должен идти с первого
   кадра. При положительной задержке подушечка в первом такте ждёт своей
   очереди на конечном кадре (fill-mode тут не задан), и старт читается как
   вспышка трёх зажжённых подушечек вместо волны.

   Шаг .35s = период/4: волна ровно заполняет цикл. Уже — и в конце висит
   мёртвая пауза длиннее самого перебора, шире — хвост налезает на следующий круг. */
.tt-js .tt-geo-btn.is-locating .tt-paw-pad{
  animation:tt-paw-blink 1.4s ease-in-out infinite; }
.tt-js .tt-geo-btn.is-locating .tt-paw-pad.p1{ animation-delay:-1.05s; }
.tt-js .tt-geo-btn.is-locating .tt-paw-pad.p2{ animation-delay:-.7s; }
.tt-js .tt-geo-btn.is-locating .tt-paw-pad.p3{ animation-delay:-.35s; }
/* Не уходит в ноль: на 16px пропадающая подушечка читается как дырка в лапке. */
@keyframes tt-paw-blink{ 0%,70%,100%{ opacity:.4; } 25%{ opacity:1; } }

/* Уважаем системную настройку «меньше движения»: шаг выключаем совсем,
   тихий перебор подушечек оставляем — мешает перемещение по экрану,
   а не смена прозрачности. */
@media (prefers-reduced-motion:reduce){
  .tt-js .tt-geo-btn.is-locating .tt-geo-paw{ animation:none; }
}
.tt-geo-msg{ margin:8px 0 0; font-size:13px; font-weight:600; color:var(--muted); }
.tt-geo-msg:empty{ display:none; }

.tt-rchips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.tt-rchip{ padding:6px 11px; border:1.5px solid var(--line-strong); border-radius:999px;
  font-size:13px; font-weight:700; color:var(--ink-2); text-decoration:none; background:var(--surface); }
.tt-rchip:hover{ border-color:var(--accent); color:var(--accent-ink); }
.tt-rchip.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; }

/* Distance on the card and the "we do not know where N of these are" note. */
.tt-dist{ color:var(--accent-ink); font-weight:700; }
.tt-geo-note{ margin:0 0 12px; font-size:13.5px; font-weight:600; color:var(--muted); }

/* ---- results header ---- */
.tt-rhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.tt-rhead .tt-found{ font-size:15px; }
.tt-sort{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--muted); }
.tt-sort .tt-select{ width:auto; padding:9px 34px 9px 12px; font-size:14px; }

/* ---- active chips ---- */
.tt-chips-active{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:20px; }
.tt-chips-active:empty{ display:none; }
.tt-achip{ display:inline-flex; align-items:center; gap:7px; background:var(--pop-soft); color:var(--pop-ink);
  border:1px solid rgba(224,96,58,.28); padding:6px 9px 6px 13px; border-radius:999px; font-size:13px; font-weight:700;
  text-decoration:none; }
.tt-achip svg{ width:14px; height:14px; }
.tt-achip:hover{ background:rgba(224,96,58,.16); }

/* ---- filters open button (mobile) ---- */
/* ---- Mobile: the sidebar folds into a bottom drawer (Trello #52) ----
   The sidebar renders ABOVE the results on a phone and runs ~9 blocks tall, so the
   catalog opened on nothing but filters. Everything still ships in the HTML — this
   hides the sidebar below 900px and puts a strip of chips over the list instead, so
   crawlers and no-JS visitors keep the full sidebar, and desktop is untouched. */
.tt-filters-open{ display:none; }
.tt-fstrip{ display:none; }

/* ⚠️ The overlay's own looks live OUTSIDE the media query, on purpose.
   Both elements are <button>, so with no rule of their own the browser paints
   them with its default control chrome — which is what put a full-screen blue
   rectangle over the page when the drawer was opened above 900px (catalog-filters
   calls window.ttDrawer on a sidebar swap, at any width). They are only ever
   created by JS while the sheet is open, so styling them unconditionally costs
   nothing and cannot leave them unstyled. */
/* ⚠️ Above the sticky header, which sits at z-index 60 (site.css). At 59 the header
   was painted OVER the scrim, so a tap on it never reached the overlay — only the
   thin band between header and sheet closed anything, which is exactly what the
   sheet felt like: "closes only if I hit the gap" (sQuem, 2026-09-02). */
.tt-fscrim{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.45);
  border:0; padding:0; margin:0; cursor:pointer; appearance:none; -webkit-appearance:none; }
/* The confirm bar is gone (2026-09-02): every filter is a link that reloads, so
   there was nothing to confirm, and the bar covered the space that makes tapping
   outside the sheet feel reliable. Closing is the scrim, Esc, or a swipe down. */
/* The drawer's shortcut row: desktop already shows every group, so repeating five of
   them there would print the same options twice. */
.tt-quick{ display:none; }

/* A tick applies the filter straight away and without a reload
   (assets/js/catalog-filters.js), which makes "Filtrovať" a button that never does
   anything — so it goes, on every viewport since 2026-08-21. It used to survive on
   mobile because auto-applying reloaded the page under the visitor's finger; there is
   no reload any more. The class is added by that script, so with no JS or an old
   browser the button stays and the form keeps working as a plain GET. */
.tt-layout.tt-autofilter .tt-fbtn{ display:none; }

/* The results are fetched, so there is a moment with the old list still on screen.
   Dim it rather than blank it: the visitor keeps their place, and the page does not
   jump to a spinner and back. Clicks are off so a pager link cannot fire twice. */
.tt-layout.is-loading .tt-results{ opacity:.55; pointer-events:none; transition:opacity .12s ease; }
@media (prefers-reduced-motion:reduce){
  .tt-layout.is-loading .tt-results{ transition:none; }
}

/* ---- pagination ----
   `the_posts_pagination()` markup, styled to the catalog instead of Astra's
   default "1 2 ›" run of bare links. This IS the navigation now — scroll-loading
   was retired 2026-08-11 and these rules no longer have to survive being hidden
   by a script. Real <a href> pages throughout, which is also what a crawler
   walks. */
.tt-results .navigation.pagination{ margin-top:28px; }
.tt-results .nav-links{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; }
.tt-results .page-numbers{ display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; box-sizing:border-box;
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:700;
  text-decoration:none; transition:.14s; }
@media (hover:hover){ .tt-results a.page-numbers:hover{ border-color:var(--ink); background:var(--surface-2); } }
.tt-results .page-numbers.current{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.tt-results .page-numbers.dots{ border-color:transparent; background:transparent; color:var(--muted);
  min-width:auto; padding:0 2px; }
.tt-results .page-numbers.prev,
.tt-results .page-numbers.next{ font-size:18px; line-height:1; padding:0 14px; }
.tt-results .page-numbers:focus-visible{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* The rules for "Načítať ďalšie", its spinner and the `.is-super` hiding of the
   pager lived here until 2026-08-11. All of it existed to let scroll-loading sit
   on top of the numbers; with that retired, the numbers are simply the pagination
   and need none of it. See docs/decisions.md. */

/* Cards take focus on click-through via .tt-card-hit; that must not draw a stray
   ring for mouse users, only for keyboard. */
.tt-card:focus{ outline:none; }
.tt-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:900px){
  /* ⚠️ `minmax(0,1fr)`, not `1fr`. A grid item refuses to shrink below its content
     by default (min-width:auto), and the chip strip inside is deliberately WIDER than
     the screen — so a plain `1fr` let it stretch the whole column, pushing the page
     sideways and dragging the cards with it. The strip has to scroll inside itself,
     never the document. */
  .tt-layout{ grid-template-columns:minmax(0,1fr); }
  .tt-results{ min-width:0; }
  /* `.tt-card-hit` is on at every width now — see tippytaps.css. */

  /* The sidebar steps aside and the strip speaks for it. Gated on `.tt-js`, which
     header.php sets before first paint: with no script the full sidebar renders
     exactly as it always did rather than vanishing with no way back. */
  .tt-js .tt-sidebar{ display:none; }
  .tt-sidebar{ position:static; }

  .tt-fstrip{ display:flex; gap:8px; align-items:center; margin:0 0 14px;
    padding-bottom:2px; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* Belt and braces: even inside a shrinkable column, a flex row of nowrap chips
       reports a huge min-content width unless told otherwise. */
    max-width:100%; min-width:0; }
  .tt-fstrip::-webkit-scrollbar{ display:none; }

  /* ⚠️ `.tt-site` prefix is required, not decoration. tippytaps.css carries
     `.tt-site button{ font:inherit; color:inherit; }` — specificity 0,2,1 against a
     bare class's 0,1,0 — so a plain `.tt-filters-open{color:…}` LOSES and the button
     inherits the page's dark ink: dark text on a dark pill, i.e. an empty green
     shape. The background applied because nothing else claimed it, which is what made
     it look like a styling accident rather than a cascade one. */
  .tt-site .tt-filters-open{ display:inline-flex; align-items:center; gap:6px; flex:none;
    padding:9px 14px; cursor:pointer; white-space:nowrap;
    font:600 14px/1 var(--sans, inherit); color:var(--paper); background:var(--ink);
    border:1px solid var(--ink); border-radius:999px; }
  .tt-site .tt-fo-count{ display:inline-flex; align-items:center; justify-content:center;
    min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:var(--paper); color:var(--ink); font-size:11px; font-weight:700; }

  /* Prefixed for the same reason as the button above: it keeps every colour in this
     strip at one specificity, so a future `.tt-site a` rule cannot pick off half of
     them and leave an unreadable chip behind. */
  .tt-site .tt-fchip{ flex:none; padding:9px 14px; white-space:nowrap; text-decoration:none;
    font:500 14px/1 var(--sans, inherit); color:var(--ink); background:var(--surface);
    border:1px solid var(--line); border-radius:999px; }
  .tt-site .tt-fchip .c{ margin-left:6px; color:var(--muted); font-size:12px; }
  .tt-site .tt-fchip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .tt-site .tt-fchip.is-active .c{ color:var(--paper); opacity:.75; }

  /* Open: the sidebar returns as a sheet anchored to the bottom of the viewport.
     `overscroll-behavior:contain` stops a scroll inside it dragging the page under. */
  /* `min-height` as well as max: the sheet holds one select on the country page,
     and a bar that hugs two controls reads as a glitch rather than a panel. 44vh is
     enough to look deliberate without covering the list behind it. The bottom
     padding clears the fixed "Zobraziť výsledky" bar plus the home indicator. */
  /* The grab bar. A real element, not a ::before: a pseudo-element cannot receive
     touches, so the drag had nowhere to start except the scrolling list — where a
     drag means reading, not dismissing. `sticky` keeps it in reach while the list
     scrolls under it, and the generous height is the touch target, not the line. */
  .tt-js .tt-sidebar.is-open .tt-fgrip{ position:sticky; top:-26px; z-index:2;
    display:flex; align-items:center; justify-content:center;
    height:34px; margin:-26px -16px 4px; cursor:grab;
    background:var(--paper); touch-action:none; }
  .tt-js .tt-sidebar.is-open .tt-fgrip::after{ content:""; display:block;
    width:38px; height:4px; border-radius:2px; background:var(--line-strong); }
  /* Not rendered while the sidebar is a normal column. */
  .tt-fgrip{ display:none; }

  /* ⚠️ The bottom corners and the border have to be turned OFF explicitly: the base
     `.tt-sidebar` rule gives the column a full `border-radius` and a 1px border, and
     as a sheet those become a rounded, outlined edge sitting on the screen bottom —
     the panel reads as floating slightly off the device. A sheet meets the edge flat.

     72vh, not 82: the sheet has to leave a strip of scrim big enough to tap. At 82vh
     with a long district list there was almost nothing left to hit, which is why
     tapping outside "did not work" — it mostly was not outside. */
  /* Above the scrim, which is above the header. */
  .tt-js .tt-sidebar.is-open{ display:block; position:fixed; inset:auto 0 0 0; z-index:71;
    min-height:40vh; max-height:72vh; overflow-y:auto; overscroll-behavior:contain;
    margin:0; padding:26px 16px calc(20px + env(safe-area-inset-bottom)); background:var(--paper);
    border:0; border-radius:18px 18px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.18); }

  /* "Najčastejšie" at the top of the sheet: the same five as the strip, wrapping
     instead of scrolling — inside the sheet there is width to spare, and a hidden
     second row would defeat the point of putting them first. */
  .tt-quick{ display:block; }
  .tt-qchips{ display:flex; flex-wrap:wrap; gap:8px; }


  /* A way out pinned to the bottom of the sheet, so the thumb never has to scroll
     back up to close it. */
}

/* Emergency landing lead (archive-tt_clinics.php): one sentence and a button that
   presses the sidebar's "near me". Hidden without JS, like the control it proxies. */
.tt-head__lead{ display:flex; align-items:center; gap:12px 20px; flex-wrap:wrap; margin-top:10px; }
.tt-head__lead p{ margin:0; max-width:60ch; color:var(--muted); }
.tt-sos-near{ display:none; }
.tt-js .tt-sos-near{ display:inline-flex; }
.tt-sos-near[hidden]{ display:none; }