/* ============================================================
   Wunderlust — shell, hero copy, filter bar
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }

a { color: var(--accent); text-underline-offset: 2px; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--surface); color: var(--text);
  padding: 10px 16px; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

/* --- Top bar ---------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease);
}
.topbar[data-stuck="true"] { border-bottom-color: var(--line); }

.topbar-inner {
  display: flex; align-items: center; gap: var(--gap-3);
  height: 66px; position: relative;
}

.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; color: inherit; }
.brand-mark {
  width: 54px; height: 54px; border-radius: 13px;
  overflow: hidden; display: grid; place-items: center;
  box-shadow: var(--shadow-1);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-mark .ms { font-size: 17px; }
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1; }
.brand-name { font: 600 1.32rem/1 var(--font-display); letter-spacing: -.015em; }
.brand-sub { font-size: var(--fs-sm); color: var(--text-3); letter-spacing: .01em; line-height: 1.15; }

.icon-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; color: var(--text-2);
  border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
/* Buttons inherit no page font; without this the glyph fell to ~13px. */
.icon-btn .ms { font-size: 20px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn[aria-pressed="true"] { background: var(--accent-fill); color: var(--on-accent); border-color: transparent; }

/* --- Appearance switch ------------------------------------ */
/* Three segments in a track, with a glider sliding behind the active
   one. The glider is absolutely positioned and the buttons sit above
   it, so the icon stays crisp while the fill animates. */
.themer {
  position: relative; display: flex; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 3px; border-radius: var(--r-pill);
}
.themer button {
  position: relative; z-index: 2;
  width: 34px; height: 28px; padding: 0;
  border: 0; background: transparent; color: var(--text-3);
  display: grid; place-items: center;
  border-radius: var(--r-pill); cursor: pointer; transition: color .25s var(--ease);
}
.themer button .ms { font-size: 17px; }
.themer button.on { color: var(--on-accent); }
.themer button:hover:not(.on) { color: var(--text); }

.switch-glider {
  position: absolute; top: 3px; left: 3px;
  width: 34px; height: 28px; border-radius: var(--r-pill);
  /* Same two AA-cleared stops as .p-accent — the glider carries the
     active icon, which is foreground content, not decoration. */
  background: linear-gradient(135deg, var(--accent-press), var(--accent));
  box-shadow: 0 3px 10px -3px color-mix(in srgb, var(--accent-press) 70%, transparent);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
  z-index: 1; pointer-events: none;
}/* Coarse pointers need a 38px target; the glider measures the button
   at runtime rather than assuming 34px, so this needs no JS change. */
@media (hover: none) and (pointer: coarse) {
  .themer button, .switch-glider { width: 38px; height: 32px; }
}

/* --- Starting-point form (inside the Settings panel) ------- */
/* No longer its own popover — it renders inline in a Settings row, so
   it needs stacking and dismiss behaviour no more than a form does. */
.origin-form { display: flex; flex-direction: column; gap: var(--gap-2); }
/* The shared .search is built to grow inside the wide filter bar; in a
   narrow panel column that flex-basis inflates it into a blob. */
.origin-form .search { flex: none; width: 100%; min-width: 0; }
.origin-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-2); }
.origin-acts .btn { padding: 7px 14px; font-size: var(--fs-sm); }
.origin-msg { margin: 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }
.origin-msg[data-kind="bad"] { color: var(--accent); }
.origin-msg[data-kind="ok"] { color: var(--meadow-deep); }

/* --- Hero copy -------------------------------------------- */
/* Deliberately short: on a 13" laptop the search field has to be
   visible at first paint, which check_browser.py asserts against a
   1280x800 viewport rather than leaving it to the eye. */
.hero-body {
  position: relative; z-index: 2;
  padding-block: clamp(24px, 4vw, 40px) clamp(44px, 6vw, 68px);
  min-height: clamp(280px, 38vh, 360px);
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* The hero eyebrow is .p .p-caps .p-glass (assets/pills.css).
   .hero-body is a flex column, so without this the pill stretches
   to the full column width instead of hugging its label. */
.hero-body > .p { align-self: flex-start; }

h1.hero-title {
  margin-top: var(--gap-4);
  font: 600 var(--fs-hero)/var(--lh-tight) var(--font-display);
  letter-spacing: -.028em;
  max-width: 17ch;
}
.hero-title em {
  font-style: italic;
  color: var(--blossom-ink);
}

.hero-lede {
  margin-top: var(--gap-3);
  max-width: 62ch;
  text-wrap: balance;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  color: var(--text-2);
}

/* The payoff line under the lede: tighter, dimmer — a beat, not prose. */
.hero-kicker {
  margin-top: var(--gap-2); color: var(--text-3); letter-spacing: -.01em;
  font: 600 clamp(.95rem,1.4vw,1.06rem)/1.3 var(--font-display);
}.hero-kicker strong { color: var(--blossom-ink); font-weight: 700; }.hero-stats { display: flex; flex-wrap: wrap; gap: var(--gap-5); margin-top: var(--gap-5); }
.hero-stat-n { font: 600 1.5rem/1 var(--font-display); }
.hero-stat-l { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; }

/* --- Category rail ---------------------------------------- */
.rail-head { display: flex; align-items: baseline; gap: var(--gap-3); margin-bottom: var(--gap-2); }
.rail-head h2 { font: 600 var(--fs-h2)/1.2 var(--font-display); }
.rail-head p { margin: 0; font-size: var(--fs-sm); color: var(--text-3); }

.rail {
  display: flex; gap: var(--gap-3);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding-block: 4px var(--gap-2);
  margin-inline: calc(clamp(16px, 4vw, 32px) * -1);
  padding-inline: clamp(16px, 4vw, 32px);
  /* Snap must respect the padding, or the first pill snaps flush to the
     bleed edge and sits 32px left of the heading and cards. */
  scroll-padding-inline: clamp(16px, 4vw, 32px); /* mask below: half-scrolled pills fade at the edge instead of slicing flat */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* Rail buttons are .p .p-lg (assets/pills.css); these add only the
   scroll-snap and elevation the primitive has no business knowing. */
.cat {
  scroll-snap-align: start;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-1);
}
.cat:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }
.cat[aria-pressed="true"] { box-shadow: var(--shadow-2); }
.cat-dot { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: #fff; }
.cat-dot .ms { font-size: 14px; } .cat-dot .glyph-svg { width: 15px; height: 15px; fill: #fff; }
/* Opacity put the count at 2.35:1 on a filled pill. Inherit instead:
   it reads secondary from its smaller size, not from low contrast. */
.cat-n { color: inherit; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cat:not([aria-pressed="true"]) .cat-n { color: var(--text-3); }