/* ════════════════════════════════════════════════════════════════════════
   /tourtype/[slug] — design: "Day Tours" 1a, the ranked grid.

   A four-up grid under a sticky filter rail. Photography leads and each card
   carries only what a decision needs: name, length, price. The comp offered
   three layouts and this is the one chosen.

   Prefixed tt2- so it can sit beside the old .tt-/.hsj-grid rules during the
   change rather than fighting them mid-deploy.
   ════════════════════════════════════════════════════════════════════════ */

.tt2 {
  --tt2-ink: #1A2332;
  --tt2-body: #16181C;
  --tt2-muted: #5B6072;
  --tt2-subtle: #67788A;
  --tt2-line: #E7E9EE;
  --tt2-hair: #EEF1F5;
  --tt2-card: #E3E7ED;
  --tt2-navy: #1A4B89;
  --tt2-navy-deep: #16314F;
  --tt2-action: #1B75E8;
  --tt2-amber: #FBA504;
  --tt2-slate: #334155;

  background: #fff;
}
.tt2 *, .tt2 *::before, .tt2 *::after { box-sizing: border-box; }

/* ── Header ──────────────────────────────────────────────────────────── */
.tt2-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--tt2-hair);
}
.tt2-crumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--tt2-subtle);
}
.tt2-crumb a { color: var(--tt2-subtle); }
.tt2-crumb a:hover { color: var(--tt2-action); }
.tt2-crumb span:last-child { color: var(--tt2-slate); }
.tt2-h1 {
  margin: 9px 0 0;
  font-family: 'Oswald', sans-serif;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tt2-ink);
}
.tt2-rule { width: 64px; height: 3px; margin: 12px 0 0; background: var(--tt2-amber); }
.tt2-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--tt2-slate);
}
.tt2-facts i { font-style: normal; color: #C6CDD8; }
.tt2-intro {
  max-width: 860px;
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tt2-body);
  text-wrap: pretty;
}

/* ── Card grid ──────────────────────────────────────────────────────────
   Layout only. The cards themselves are TourCardCarousel — the same component
   the homepage rows use — so their photography, price treatment, review stars
   and gallery come with them and cannot drift from the homepage's. This file
   supplies the four-up grid and nothing else; the bespoke .tt2-card rules that
   were here for 1b are gone with it. ── */
.tt2-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 28px 40px;
}
.tt2-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 18px; }
.tt2-empty { margin: 28px 0 0; font-size: 14px; color: var(--tt2-slate); }
.tt2-empty a { font-weight: 600; }

/* ── Sticky filter rail ──────────────────────────────────────────────── */
/* top: 58px, not 0. .hsj-nav is `position: sticky; top: 0; z-index: 900` and
   collapses to 58px once scrolled, so a rail pinned at 0 with z-index 20 parked
   *behind* the header and vanished the moment it became sticky. 58px is the
   same figure .hsj-mega-wrap offsets by, for the same reason. */
.tt2-rail-wrap {
  position: sticky;
  top: 58px;
  z-index: 20;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tt2-line);
}
.tt2-rail-in {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
}
.tt2-rail {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.tt2-rail::-webkit-scrollbar { height: 6px; }
.tt2-rail::-webkit-scrollbar-thumb { background: #D7DCE5; border-radius: 999px; }
.tt2-rail::-webkit-scrollbar-track { background: transparent; }
.tt2-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--tt2-card);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--tt2-slate);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background .18s cubic-bezier(.22, 1, .36, 1),
    border-color .18s cubic-bezier(.22, 1, .36, 1),
    color .18s cubic-bezier(.22, 1, .36, 1),
    transform .18s cubic-bezier(.22, 1, .36, 1);
  /* Entry: transform + opacity only, so it stays on the compositor. */
  animation: tt2-chip-in .38s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes tt2-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
/* Staggered rather than all at once — the rail reads left-to-right as it
   settles, which is also the order you scan it in. */
.tt2-chip:nth-child(1) { animation-delay: 0ms; }
.tt2-chip:nth-child(2) { animation-delay: 45ms; }
.tt2-chip:nth-child(3) { animation-delay: 90ms; }
.tt2-chip:nth-child(4) { animation-delay: 135ms; }
.tt2-chip:nth-child(5) { animation-delay: 180ms; }
.tt2-chip:nth-child(n + 6) { animation-delay: 225ms; }
.tt2-chip:hover { border-color: #B9C4D2; color: var(--tt2-slate); }
/* A pill that does not move under the thumb feels dead on a touch screen. */
.tt2-chip:active { transform: scale(.97); }
.tt2-chip:focus-visible {
  outline: 2px solid var(--tt2-action);
  outline-offset: 2px;
  border-color: var(--tt2-action);
}
.tt2-chip[aria-current="true"] {
  background: var(--tt2-navy);
  border-color: var(--tt2-navy);
  color: #fff;
}
.tt2-chip[aria-current="true"]:hover { background: var(--tt2-navy-deep); border-color: var(--tt2-navy-deep); color: #fff; }
.tt2-rail-end { flex: none; display: flex; align-items: center; gap: 9px; }
.tt2-count { font-size: 12.5px; color: var(--tt2-subtle); white-space: nowrap; }
.tt2-sep { width: 1px; height: 18px; background: var(--tt2-line); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .tt2-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .tt2-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .tt2-head, .tt2-grid { padding-left: 16px; padding-right: 16px; }
  .tt2-h1 { font-size: 27px; }

  /* The collision this fixes: one flex row put a ~160px sort control beside a
     scrolling chip rail, so on a 390px screen the chips had ~200px and
     "Half day, 4 hrs or less" was cut mid-word behind the select. Two rows
     instead — chips get the full width, controls sit under them. */
  .tt2-rail-in {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0 11px;
  }

  /* Chips bleed to the screen edge so the next one peeks past the margin —
     that peek is the only affordance saying the rail scrolls, which is why
     there is no scrollbar and no arrows. */
  .tt2-rail {
    margin: 0;
    padding: 2px 16px 4px;
    scrollbar-width: none;
    /* Fades the trailing edge instead of cutting a chip dead, reinforcing that
       there is more to the right. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 26px), transparent 100%);
  }
  .tt2-rail::-webkit-scrollbar { display: none; }

  .tt2-rail-end {
    justify-content: space-between;
    gap: 10px;
    padding: 0 16px;
  }
  /* Kept on phones, not hidden. The count is the feedback that a filter did
     something, so it matters most on the screen where the list is not all
     visible at once. */
  .tt2-count { display: block; }
  .tt2-sep { display: none; }
}
@media (max-width: 460px) {
  .tt2-cards { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .tt2-chip {
    animation: none;
    transition-duration: .01ms;
  }
  .tt2-chip:active { transform: none; }
  .tt2-rail { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   Faceted listing — design: "Hiking & Trekking — faceted listing".

   Three multi-select facets in a sticky bar, live counts, removable chips,
   and a full-screen sheet on phones. Colours and metrics are the comp's.

   The comp's fourth facet, "Tour type", is not here: two of its options
   restated Days, one was a category, and nothing in the schema could compute
   the fourth. See lib/listing-facets.ts.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Chrome that moves as one object ─────────────────────────────────────
   On a listing the site header retracts while the reader travels down and
   returns when they travel up; this bar takes the space it vacates and gives
   it back. `data-nav-retracted` on <html> is set by ListingFacets, which is
   why the behaviour is confined to listings — trip pages keep the header they
   were deliberately given.

   The bar's `top` reads the SAME flag as the header's transform, so the two
   cannot desync. That is what makes this safe to reintroduce: the site-wide
   version was removed because the trip sidebar stayed pinned while the header
   moved, opening and closing a 58px band on every reversal (see Header.tsx).
   Here there is one pinned thing and it travels with the header. */
/* Fallback only. The real value is written every frame by ListingFacets from
   the header's measured bottom edge — the header is 76px normally, 58px once
   `.scrolled`, and has a 40px utility bar that collapses with it, so no single
   constant is correct for long. This is what renders before hydration. */
:root { --tk-bar-top: 58px; }

.hsj-nav {
  /* Inert unless a page sets the flag; elsewhere this never fires. */
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
:root[data-nav-retracted="true"] .hsj-nav { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .hsj-nav { transition: none; }
}

.tk-bar {
  /* Follows the header rather than assuming it: 58px while the header shows,
     0 once it has retracted. A hardcoded 58px would leave a header-sized gap
     hanging above a bar pinned to nothing. */
  position: sticky;
  /* No transition on `top`. It tracks the header's actual edge every frame, so
     easing it would make the bar lag behind the header it is glued to — which
     is precisely the blink this replaced. The motion belongs to the header's
     transform; the bar just stays attached to it. */
  top: var(--tk-bar-top);
  z-index: 20;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--tt2-line);
}
.tk-bar-in {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 28px;
}
.tk-facets { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.tk-facet-wrap { position: relative; }

.tk-facet {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid var(--tt2-card);
  /* Pill, not the 8px rect of the first treatment — in "Region tabs, filters
     underneath" the remaining facets sit below a tab strip and read as
     secondary controls, so they lose the raised-button shape. */
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tt2-slate);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tk-facet:hover { border-color: #B9C4D2; }
.tk-facet:focus-visible { outline: 2px solid var(--tt2-action); outline-offset: 2px; }
.tk-facet[data-on="1"] { background: #F1F5FB; border-color: var(--tt2-navy); color: var(--tt2-navy); }
.tk-caret { font-size: 9px; opacity: .65; }

.tk-pop {
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 40;
  width: 268px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--tt2-hair);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16, 32, 48, .14);
}

.tk-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  color: var(--tt2-ink);
  text-decoration: none;
  transition: background .15s ease;
}
.tk-opt:hover { background: #F9FAFB; color: var(--tt2-ink); }
.tk-opt:focus-visible { outline: 2px solid var(--tt2-action); outline-offset: -2px; }
.tk-opt-box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--tt2-card);
  border-radius: 4px;
  font-size: 11px;
  color: #fff;
}
.tk-opt-box[data-on="1"] { background: var(--tt2-navy); border-color: var(--tt2-navy); }
.tk-opt-label { flex: 1; min-width: 0; }
.tk-opt-count { flex: none; font-size: 12px; color: var(--tt2-subtle); font-variant-numeric: tabular-nums; }

.tk-bar-end { flex: none; display: flex; align-items: center; gap: 10px; }
/* Oswald and ink, not muted body text: "16 treks" is the answer to what the
   bar above it was just used for, and the comp gives it the same weight as the
   page heading rather than a caption. */
.tk-count {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tt2-ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tk-sep { width: 1px; height: 18px; background: var(--tt2-hair); }
.tk-sort { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tt2-subtle); }
.tk-sort select {
  height: 40px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--tt2-card);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tt2-ink);
  cursor: pointer;
}

/* ── Active-filter chips ─────────────────────────────────────────────── */
.tk-rail {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tk-rail::-webkit-scrollbar { display: none; }
.tk-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px 0 12px;
  background: #EEF3FA;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tt2-navy);
  text-decoration: none;
  transition: background .15s ease;
}
.tk-chip:hover { background: #E4EAF3; color: var(--tt2-navy); }
.tk-chip-x { font-size: 14px; line-height: 1; opacity: .7; }
.tk-clear {
  flex: none;
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tt2-action);
  text-decoration: none;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.tk-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 44px 0 60px;
  max-width: 520px;
}
.tk-empty h2 {
  margin: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--tt2-ink);
}
.tk-empty p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--tt2-body); }
.tk-empty-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-btn-primary {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  background: var(--tt2-action);
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.tk-btn-primary:hover { background: #1461C4; color: #fff; }
.tk-btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--tt2-navy);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tt2-navy);
  text-decoration: none;
}
.tk-btn-ghost:hover { background: #F1F5FB; color: var(--tt2-navy); }

/* ── Load more ───────────────────────────────────────────────────────── */
.tk-more { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 34px 0 0; }
.tk-more p { margin: 0; font-size: 13px; color: var(--tt2-muted); font-variant-numeric: tabular-nums; }
.tk-more a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  background: #fff;
  border: 1px solid var(--tt2-navy);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tt2-navy);
  text-decoration: none;
}
.tk-more a:hover { background: #F1F5FB; color: var(--tt2-navy); }

/* ── Mobile sheet ────────────────────────────────────────────────────── */
.tk-sheet-open { display: none; }
.tk-sheet { display: none; }

@media (max-width: 860px) {
  .tk-bar-in { padding: 10px 16px; gap: 10px; }
  .tk-facets { display: none; }
  .tk-bar-end { flex: 1; justify-content: space-between; }
  .tk-rail { padding: 0 16px 10px; }

  .tk-sheet-open {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    background: var(--tt2-navy);
    border: 0;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
  }

  .tk-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    background: #fff;
  }
  .tk-sheet-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--tt2-hair);
    font-size: 16px;
  }
  .tk-sheet-hd button {
    width: 34px;
    height: 34px;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--tt2-slate);
    cursor: pointer;
  }
  .tk-sheet-body { flex: 1; overflow-y: auto; padding: 6px 8px 16px; }
  .tk-sheet-group { padding: 10px 8px 4px; }
  .tk-sheet-group h3 {
    margin: 0 0 4px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tt2-subtle);
  }
  .tk-sheet-ft {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--tt2-hair);
    /* Clears the iOS home indicator and any fixed CTA bar. */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .tk-sheet-done {
    flex: 1;
    height: 46px;
    background: var(--tt2-action);
    border: 0;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-facet, .tk-opt, .tk-chip { transition-duration: .01ms; }
}


/* ── 3a: labelled field bar + segmented sort ─────────────────────────────
   "Region tabs over a labelled field bar": 2b's tab strip picks the region,
   2a's raised field control carries days, price and tour type with their
   labels showing, and sort is 2b's segmented control.

   The label stays visible whether or not anything is selected — that is the
   whole point of the treatment. A closed dropdown reading "Days" tells you
   nothing about what it does; "DAYS / Any" does. */
/* ── 4a: four separate pills ───────────────────────────────────────────
   3a drew these as ONE raised control split by hairlines. 4a draws four
   independent pills, and the difference is not decoration: with region joined
   to the other three, a bar with no regions rendered a visibly narrower slab
   than one with them, so the control changed shape between categories. Loose
   pills just wrap.

   Values below are the comp's, not approximations: 44px tall, 15px side
   padding, 10px between, fully round, #E3E7ED border. */
.tk-fields {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.tk-field-wrap { position: relative; flex: none; }

.tk-field {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 15px;
  background: #fff;
  border: 1px solid var(--tt2-card);
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tk-field:hover {
  border-color: #B9C4D2;
  box-shadow: 0 2px 10px rgba(16, 32, 48, .06);
  transform: translateY(-1px);
}
.tk-field:focus-visible { outline: 2px solid var(--tt2-action); outline-offset: 2px; }
/* Selected: the comp's pale blue fill, and the text goes navy with it — both
   halves of the pill, so the whole control reads as set rather than just the
   value. */
.tk-field[data-on="1"] { background: #EDF3FA; border-color: #B4CBE6; }
.tk-field[data-on="1"]:hover { border-color: #8FB2DA; }
.tk-field[data-on="1"] .tk-field-label,
.tk-field[data-on="1"] .tk-field-value { color: var(--tt2-navy); }

.tk-field-in { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Sentence case at 11.5px, not 10px uppercase with tracking. Uppercase read as
   a form legend above a field; here the label sits inline with its value and
   the two are one phrase — "Region Anywhere". */
.tk-field-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--tt2-subtle);
  white-space: nowrap;
}
.tk-field-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tt2-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-field .tk-caret { font-size: 9px; color: var(--tt2-subtle); }

/* The popover hangs off the field, so it aligns to the field not the bar. */
.tk-field-wrap .tk-pop { top: 46px; }

/* ── Segmented sort ──────────────────────────────────────────────────── */
/* The comp's track is white inside a hairline border, not a grey fill — it
   sits beside the white field pills and matching them is what makes the bar
   read as one row of controls rather than two treatments. */
.tk-segs {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--tt2-card);
  border-radius: 999px;
}
.tk-seg {
  height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 15px;
  border-radius: 999px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tt2-slate);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.tk-seg:hover { color: var(--tt2-navy); }
.tk-seg:focus-visible { outline: 2px solid var(--tt2-action); outline-offset: 2px; }
/* Amber, per the comp — the one saturated colour in the bar, and the only
   thing in it that is a current state rather than an available choice. A white
   chip on a white track had almost no contrast against its neighbours. */
.tk-seg[aria-current="true"] {
  background: var(--tt2-amber);
  color: #16314F;
  box-shadow: none;
}

@media (max-width: 1100px) {
  /* Four sort options plus three fields will not share a row below this. */
  .tk-bar-in { flex-wrap: wrap; }
  .tk-fields { flex: 1 0 100%; }
  .tk-field-wrap { flex: 1; min-width: 0; }
  /* `min-width: 0` is doing the load-bearing work, not the `flex` shorthand.
     Once the bar wraps, .tk-bar-end holds the count, the divider and the four
     sort pills — 527px of content. As a flex item its `min-width` defaults to
     `auto`, meaning "never smaller than my content", which beats both the
     100% basis and the `overflow-x` on .tk-segs inside it. At 390px that put
     527px in a 390px row and scrolled the whole page body sideways by 153px,
     dragging the header and cards with it.

     Measured, not reasoned: with `min-width: 0` here, .tk-bar-end lands at
     334px and .tk-segs scrolls internally as it was always meant to. Setting
     it on .tk-segs instead changes nothing at all — the overflow starts one
     level up, so that is where it has to be released. */
  .tk-bar-end { flex: 1 0 100%; justify-content: space-between; min-width: 0; }
}

@media (max-width: 860px) {
  /* Phones get the Filters sheet instead; the field bar needs the width its
     three labels ask for and degrades into unreadable slivers before that. */
  .tk-fields { display: none; }
  .tk-segs { overflow-x: auto; scrollbar-width: none; }
  .tk-segs::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tk-field, .tk-seg { transition-duration: .01ms; }
}

/* Pending spinner on the option the reader just clicked. The server answers in
   ~60ms; this exists so the click is acknowledged in 0, because an unchanged
   dropdown during a navigation reads as a freeze rather than as speed. */
.tk-opt-spin {
  flex: none;
  width: 12px;
  height: 12px;
  border: 2px solid var(--tt2-card);
  border-top-color: var(--tt2-navy);
  border-radius: 50%;
  animation: tk-spin .6s linear infinite;
}
@keyframes tk-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  /* A pulse still says "working" without spinning anything. */
  .tk-opt-spin { animation: tk-pulse 1s ease-in-out infinite; }
  @keyframes tk-pulse { 50% { opacity: .35; } }
}