/* Little Locals: friendly, light-only. Warm paper white, soft ink and
   crayon colours. All colours are tokens; there is no dark mode on purpose. */

:root {
  color-scheme: light;
  --bg: #FFFDF8;           /* paper white */
  --card: #FFFFFF;
  --ink: #2B2A33;
  --muted: #6B6878;
  --line: #EEE7DA;
  --accent: #2B2A33;       /* links and outlines */
  --lime: #FFD84D;         /* sunshine yellow: selected tabs, main buttons */
  --lime-strong: #F5C518;
  --on-lime: #2B2A33;
  --accent-soft: #FFF6D2;  /* soft yellow panels */
  --coral: #FF7A6B;
  --sky: #5BB8F5;
  --grass: #4FB04A;
  --buoy: #F5A623;         /* saved stars */
  --buoy-soft: #FFF6D2;
  --good: #2E8B3A;
  --good-soft: #E7F6E4;
  --warn: #B05A00;
  --pill-edge: linear-gradient(90deg, #FFD84D, #FF7A6B, #5BB8F5);

  --font-display: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 20px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
}
a { color: var(--accent); text-underline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 8px; }
button, input, select { font: inherit; color: inherit; }

.site-header, .tabs, main, .site-footer {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ---------- Header ---------- */
.site-header { padding-block: 28px 4px; }
.brand {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 10vw, 3.3rem);
  letter-spacing: -0.01em;
  line-height: 1;
  display: flex; align-items: center; gap: 10px;
}
.site-header h1 {
  margin: 10px 0 0;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--ink);
}
.places {
  display: block;
  margin: 8px 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.places span { white-space: nowrap; }
.places span:not(:last-child)::after { content: " ·"; }
.header-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.pill-note {
  display: inline-block;
  margin: 0;
  padding: 5px 9px;
  font-size: .78rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, #FFD84D, #FF7A6B, #5BB8F5, #FFD84D) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: pill-flow 6s linear infinite;
}
/* Rainbow edge slowly travels round the date pill. */
@keyframes pill-flow { to { background-position: 0 0, 300% 0; } }

/* Little ✦ sparkles that twinkle. */
.twinkle { display: inline-block; font-size: .85em; color: #FF7A6B; animation: twinkle 2.4s ease-in-out infinite; }
.built-by .twinkle { color: #E0A800; animation-delay: 1.2s; }
@keyframes twinkle {
  0%, 100% { transform: scale(.8) rotate(0deg); opacity: .6; }
  50% { transform: scale(1.2) rotate(20deg); opacity: 1; }
}

/* ---------- Tabs ---------- */
/* Phones and tablets: a 4-across grid so every tab is visible (no hidden
   sideways scroll). Wider screens: all seven in one row. */
.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-block: 14px;
}
@media (min-width: 760px) {
  .tabs { grid-template-columns: repeat(7, 1fr); }
}
.tab {
  min-width: 0;
  padding: 7px 2px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-radius: 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.68rem, 3.3vw, .85rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-align: center;
  background: var(--card);
  border: 2px solid var(--line);
  cursor: pointer;
}
@media (min-width: 760px) { .tab { font-size: .92rem; padding: 8px 4px 9px; white-space: nowrap; } }
.tab.active { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }

main { padding-block: 0 40px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* ---------- Age box ---------- */
.age-box {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.age-box label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.age-box input {
  width: 7.5em;
  padding: 9px 16px;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
}
.age-box input:focus { border-color: var(--ink); }
/* Hide the number spinner arrows, which squashed the "e.g. 10" hint on desktop. */
.age-box input::-webkit-outer-spin-button,
.age-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.age-box input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.age-box .small { margin-top: 8px; }

/* ---------- "On today" noticeboard slip ---------- */
.today {
  background: var(--accent-soft);
  border: 1.5px solid var(--lime-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.eyebrow {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.today h2 {
  margin: 2px 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
}
.today ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
/* Fixed-width time column so every row lines up, on phones and desktop. */
.today li a { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 12px; align-items: baseline; color: inherit; text-decoration: none; }
.today li a .name { text-decoration: underline; text-decoration-color: var(--muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.today li a:hover .name, .today li a:focus-visible .name { text-decoration-color: currentColor; }
.today .t { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.today .where { display: block; font-size: .88rem; color: var(--muted); }
.saved-mark { color: var(--buoy); }
.today .small { margin-top: 10px; }

/* ---------- Filters ---------- */
.controls { display: grid; gap: 10px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
select, .btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-size: .92rem;
}
.btn { cursor: pointer; }
.btn.toggle[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.small { font-size: .82rem; color: var(--muted); margin: 0; }

#map { height: 280px; border-radius: var(--radius); border: 1.5px solid var(--line); z-index: 0; }

/* ---------- Cards ---------- */
.list { display: grid; gap: 12px; }
.card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 12px;
  display: grid;
  gap: 8px;
}
.card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.25rem;
  line-height: 1.25;
}
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-right: 110px; }
.badge {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
}
.badge.green { background: var(--good-soft); color: var(--good); }
.time { font-weight: 700; font-variant-numeric: tabular-nums; }
.tag {
  font-size: .78rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.tag.fit { border-color: var(--good); color: var(--good); font-weight: 700; }
.tag.booking { border-color: var(--warn); color: var(--warn); font-weight: 700; }
.dist { white-space: nowrap; font-variant-numeric: tabular-nums; }
body:not(.located) .dist { display: none; }
.venue { margin: 0; color: var(--muted); }

/* Details row: each item takes the width its text needs and wraps to a
   new line when space runs out, so long prices don't get squashed. */
.meta {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.meta > div { flex: 0 1 auto; min-width: 5rem; max-width: 100%; }
.meta .wide { flex-basis: 100%; }
.meta dt {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta dd { margin: 1px 0 0; font-size: .93rem; }
.features, .notes { margin: 0; font-size: .95rem; }

.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.action {
  padding: 7px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
}
.action:hover { border-color: var(--ink); }
.action.primary { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.action.primary:hover { background: var(--lime-strong); border-color: var(--lime-strong); }
.cal { position: relative; }
.cal summary { list-style: none; cursor: pointer; }
.cal summary::-webkit-details-marker { display: none; }
.cal[open] summary { background: var(--lime-strong); border-color: var(--lime-strong); }
.cal-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 190px; background: var(--card, #fff); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.12); overflow: hidden; }
.cal-menu a { padding: 12px 16px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; }
.cal-menu a + a { border-top: 1px solid var(--line, #eee); }
.cal-menu a:hover { background: var(--bg, #fafafa); }

.corner { position: absolute; top: 6px; right: 6px; display: flex; align-items: center; }
.flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 38px; border-radius: 50%; color: var(--muted); opacity: .55;
}
.flag svg { width: 17px; height: 17px; }
.flag:hover, .flag:focus-visible { opacity: 1; background: var(--bg); }
.share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 38px; border: none; border-radius: 50%; background: none;
  color: var(--muted); opacity: .55; cursor: pointer; padding: 0;
}
.share svg { width: 18px; height: 18px; }
.share:hover, .share:focus-visible { opacity: 1; background: var(--bg); }
.share.copied { opacity: 1; color: #2E7D32; }
.share.copied::after { content: "Copied"; position: absolute; top: 38px; right: 60px; font-size: .72rem; font-weight: 700; color: #2E7D32; }
/* A card opened from a shared link gets a soft yellow glow. */
.card.shared { box-shadow: 0 0 0 3px var(--lime); }
.star {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.star:hover { background: var(--bg); }
.star[aria-pressed="true"] { color: var(--buoy); }

.empty { text-align: center; color: var(--muted); padding: 28px 8px; margin: 0; }
.disclaimer { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }

/* ---------- About / FAQ (SEO text) ---------- */
.about { margin-top: 20px; padding-top: 22px; border-top: 1.5px solid var(--line); max-width: 65ch; }
.about h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; margin: 0 0 8px; }
.about h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 20px 0 4px; }
.about p { margin: 0 0 8px; }
/* Topic sections and FAQs fold away: tap a heading to open it. */
.about details { border-bottom: 1.5px solid var(--line); padding-block: 12px; }
.about details:first-of-type { border-top: 1.5px solid var(--line); margin-top: 12px; }
.about summary {
  cursor: pointer; font-weight: 700; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.about summary::-webkit-details-marker { display: none; }
.about summary::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; line-height: 1; flex: none; }
.about details[open] summary::after { content: "–"; }
.about summary h3 { margin: 0; font-size: 1rem; flex: 1; max-width: none; text-wrap: pretty; }
.about details p { margin: 8px 0 0; color: var(--muted); }
.about .faq-title { margin-top: 26px; }

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 22px 44px;
  border-top: 1.5px solid var(--line);
  text-align: center;
  font-size: .9rem;
  color: var(--muted);
}
.site-footer p { margin: 0 0 10px; }
.site-footer a { font-weight: 700; }
.site-link {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--on-lime);
  text-decoration: none;
}
.site-link:hover { background: var(--lime-strong); }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ---------- Crèche funding explainer ---------- */
.funding {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.funding h2 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.15rem; }
.funding p { margin: 0; font-size: .95rem; }
/* Fold-away version: closed by default, tap the heading to open. */
.fold summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; }
.fold[open] summary::after { content: "–"; }
.fold p { margin-top: 8px; }

/* ---------- Café checklist ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.check { font-size: .85rem; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); }
.check.yes { background: var(--good-soft); border-color: var(--good); color: var(--good); font-weight: 700; }
.check.no { color: var(--muted); text-decoration: line-through; }
.check.unknown { color: var(--muted); border-style: dashed; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Header credit, suggestions, footer panel ---------- */
/* Pill-shaped, but underlined + arrow so it still reads as a link. */
.built-by {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: #FFF4C2;
  color: var(--muted);
  font-size: .78rem;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
/* A soft shine sweeps across the Tenzing pill every few seconds. */
.built-by::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.9) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) {
  .pill-note, .twinkle, .built-by::after { animation: none; }
}
.built-by span.twinkle { text-decoration: none; font-weight: 400; }
.built-by span.name { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.built-by svg { width: 14px; height: 14px; color: var(--ink); }
.built-by:hover, .built-by:focus-visible { background: var(--lime); }
.suggest {
  background: var(--accent-soft);
  border: 1.5px solid var(--lime-strong);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 8px;
}
.suggest h2 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.2rem; }
.suggest p { margin: 0; }
.newsletter {
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 8px;
}
.newsletter h2 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-size: 1.2rem; }
.newsletter p { margin: 0; }
.maker { max-width: 46ch; margin: 0 auto 14px; display: grid; gap: 8px; }
.maker p { margin: 0; }

/* ---------- Crayon icons ---------- */
.ico { width: 34px; height: 34px; display: block; }
@media (min-width: 760px) { .ico { width: 40px; height: 40px; } }
.tab.active .ico { transform: rotate(-4deg) scale(1.06); }
.sun { width: 46px; height: 46px; flex: none; }
.card { border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .tab.active .ico { transform: none; } }

/* ---------- Footer cards: donation + Tenzing, side by side on wider screens ---------- */
.footer-cards { display: grid; gap: 12px; max-width: 820px; margin: 0 auto 18px; }
@media (min-width: 700px) { .footer-cards { grid-template-columns: 1fr 1fr; } }
.foot-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
}
.foot-card .ico { width: 54px; height: 44px; flex: none; transition: transform .2s; }
.foot-card > span { display: grid; gap: 2px; text-align: left; }
.foot-card strong { font-family: var(--font-display); font-weight: 600; }
.foot-card .small { color: var(--muted); font-weight: 400; }
.foot-card:hover .ico, .foot-card:focus-visible .ico { transform: rotate(-6deg); }
.donate:hover, .donate:focus-visible { border-color: #4FB04A; }
.maker-card:hover, .maker-card:focus-visible { border-color: var(--lime-strong, #E0B800); }

#distance-note:empty { display: none; }

/* ---------- About page ---------- */
.about-main { display: grid; gap: 14px; padding-block: 8px 40px; }
.panel {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; display: grid; gap: 10px;
}
.panel h2 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.panel p { margin: 0; }
.panel.promo { background: #FFF4C2; border-color: var(--lime-strong); }
.ico.big { width: 64px; height: 52px; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 4px; font-weight: 800; color: #2E7D32; }
.cta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.back-link {
  display: inline-flex; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); font-size: .85rem; font-weight: 700; text-decoration: none;
}
.back-link:hover { border-color: var(--ink); }
.site-footer a { color: inherit; }
.about-pill {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font-size: .78rem; font-weight: 700; text-decoration: none;
}
.about-pill:hover, .about-pill:focus-visible { border-color: var(--ink); }

/* ---------- Pinned bar (appears after scrolling past the header) ---------- */
.pinbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1.5px solid var(--line);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transform: translateY(-110%);
  transition: transform .25s ease;
}
.pinbar.show { transform: none; }
.pinbar-inner {
  max-width: 720px; margin-inline: auto; padding: 7px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pinbar-brand {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.pinbar-brand .sun { width: 24px; height: 24px; flex: none; }
.pinbar-links { display: flex; gap: 6px; flex: none; }
.pinbar .built-by, .pinbar .about-pill { white-space: nowrap; }
.pinbar-brand .sun { width: 30px; height: 30px; }
.pinbar-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .pinbar-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .pinbar { transition: none; } }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 1000;
  padding: 10px 16px; border-radius: 999px;
  border: 2px solid var(--lime-strong); background: var(--lime); color: var(--on-lime);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  box-shadow: 0 4px 14px rgba(43, 42, 51, .18);
  cursor: pointer;
}
.to-top:hover, .to-top:focus-visible { background: var(--lime-strong); }

/* ---------- Little watermelon in the header (links to the MAP card) ---------- */
.melon { display: inline-flex; align-items: center; padding: 0 2px; }
.melon svg { width: 34px; height: 26px; animation: melon-wiggle 1.2s ease-in-out .8s 1; transform-origin: 50% 80%; }
.melon:hover svg, .melon:focus-visible svg { transform: rotate(-8deg); }
@keyframes melon-wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(10deg); }
  60% { transform: rotate(-6deg); }
  80% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) { .melon svg { animation: none; } }
#donate:target { box-shadow: 0 0 0 3px #4FB04A; }

/* Links inside map pop-ups */
.pop-links { display: flex; gap: 12px; margin-top: 8px; font-weight: 700; }
.pop-links a { color: var(--ink); }

/* ---------- Search ---------- */
.search {
  width: 100%; padding: 10px 16px; font-size: 1rem;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--card);
}
.search:focus { outline: none; border-color: var(--ink); }
#search-note:empty { display: none; }
/* While searching, the tab filters don't apply, so hide them. */
body.searching .controls .row { display: none; }