/* ============================================================
   Wunderlust — settings popover, segmented controls, list view
   New surfaces from the maps + list-view pass. Kept in their own
   file so app.css and cards.css stay under the 200-line guideline.
   ============================================================ */

/* --- Segmented control (settings map-app + result layout) --- */
/* A pill track with the active segment filled. No sliding glider
   here — these switch instantly and a glider would be motion for
   its own sake on a two/three-way choice. */
.seg {
  display: inline-flex; flex: none;
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 3px; border-radius: var(--r-pill); gap: 2px;
}
.seg button {
  border: 0; background: transparent; color: var(--text-3);
  padding: 6px 12px; border-radius: var(--r-pill); cursor: pointer;
  font: 600 var(--fs-sm) var(--font-ui);
  display: grid; place-items: center; grid-auto-flow: column; gap: 5px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.seg button .ms { font-size: 18px; }
.seg button:hover:not(.on) { color: var(--text); }
/* Small TEXT on the fill, so it clears the same AA bar the pressed
   pill does — the two accent stops are contrast-checked in
   check_build.py under "white on pressed pill". */
.seg button.on {
  background: linear-gradient(135deg, var(--accent-press), var(--accent));
  color: var(--on-accent);
}

/* The layout toggle is icon-only and the least load-bearing control
   in the bar; it is the first thing to drop when width is tight. */
.view-seg button { padding: 6px 10px; }
@media (max-width: 560px) { .view-seg { display: none; } }

/* --- Settings popover ------------------------------------- */
.settings-host { position: relative; flex: none; }
.settings-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: min(340px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: var(--gap-3); padding: var(--gap-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
/* A class that sets display outranks the UA [hidden] rule — the same
   trap the origin panel and the more-filters row both hit. */
.settings-pop[hidden] { display: none; }
.set-row { display: flex; flex-direction: column; gap: var(--gap-2); }
.set-label {
  display: flex; align-items: center; gap: 7px;
  font: 600 var(--fs-sm) var(--font-ui); color: var(--text);
}
.set-label .ms { font-size: 18px; color: var(--text-2); }
.set-hint { margin: 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; }
.set-row .seg { display: flex; }
.set-row .seg button { flex: 1; }
/* Two settings in one panel now, so they need separating. A rule is
   enough; a heading each would make a short panel feel bureaucratic. */
.set-row + .set-row { border-top: 1px solid var(--line); padding-top: var(--gap-3); }

/* --- About panel ------------------------------------------- */
/* Wider than Settings because it is prose, not controls, and capped
   in height so a long read scrolls inside the panel rather than
   running off a short window. */
.about-host { position: relative; flex: none; }
.about-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  width: min(400px, calc(100vw - 32px));
  max-height: min(70vh, 560px); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--gap-3); padding: var(--gap-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2);
}
/* A class that sets display outranks the UA [hidden] rule. */
.about-pop[hidden] { display: none; }
.about-h { font: 600 1.06rem/1.2 var(--font-display); letter-spacing: -.015em; }
.about-lede { margin: 0; font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5; }
.about-row { display: grid; grid-template-columns: auto 1fr; gap: var(--gap-3); align-items: start; }
.about-i { font-size: 20px; color: var(--meadow-deep); margin-top: 1px; }
.about-t { font: 600 var(--fs-sm)/1.3 var(--font-ui); color: var(--text); }
.about-p { margin: 3px 0 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; }
.about-foot {
  margin: 0; padding-top: var(--gap-3); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
}

/* --- Top-bar menu (hamburger on a phone) ------------------- */
/* Wide bar: the three tools sit inline as before (display:contents
   removes the wrapper from layout) and the hamburger stays hidden. */
.topbar-menu { display: contents; }
#menuBtn { display: none; }
/* Below this the bar can't hold brand text + four tools + the
   switch; fold about/saved/settings behind the hamburger and drop
   the brand wordmark to its icon. The themer stays in the bar so its
   glider still measures a visible button at boot. */
@media (max-width: 600px) {
  .brand-text { display: none; }
  #menuBtn { display: grid; }
  .topbar-menu {
    position: absolute; top: calc(100% + 8px); right: clamp(16px, 4vw, 32px);
    display: none; flex-direction: column; gap: var(--gap-2);
    padding: var(--gap-3); z-index: 30;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  }
  .topbar-menu[data-open="true"] { display: flex; }
  /* Full-width taps in the dropdown rather than centred 36px dots. */
  .topbar-menu .icon-btn, .topbar-menu .about-host, .topbar-menu .settings-host { width: 100%; }
  .topbar-menu .icon-btn { justify-content: flex-start; padding-inline: var(--gap-3); gap: 10px; }
}

/* The map name rides along in the Directions button; on a narrow
   sheet it wraps rather than truncating the word "Directions". */
.btn-sub { color: inherit; opacity: .8; font-weight: 400; }

/* --- Website + Directions on the card --------------------- */
/* Two of the three foot actions; both are actions, not labels, so
   they push to the trailing edge and carry the accent outline. The
   Website link leads the pair and takes the auto-margin; Directions
   tucks in beside it. Both pairings are in check_build.py's table
   ("accent link on card", "white on pressed pill"). */
.card-web, .card-nav {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.card-web { margin-left: auto; }
.card-web:hover, .card-nav:hover {
  color: var(--on-accent);
  background: var(--accent-press);
  border-color: transparent;
}
/* No extra margin between the actions — the foot's flex `gap` already
   spaces the trio evenly; a margin here would double the first gap. */

/* --- The three foot actions read as one set --------------- */
/* Website, Directions and Done are the same size and shape, so the
   trio reads as a control cluster, not three unrelated marks. One
   height across every foot pill — text badges and icon buttons alike
   — so nothing sits taller than its neighbour (the bug in the shot:
   round icons at 26px next to 22px text pills). */
.card-foot > .p { box-sizing: border-box; min-height: 28px; }
.grid[data-view="grid"] .card-web,
.grid[data-view="grid"] .card-nav,
.grid[data-view="grid"] .card-done {
  width: 28px; padding: 0; justify-content: center;
}
.card-done .done-label { display: none; }
.grid[data-view="list"] .card-done .done-label,
.sheet .card-done .done-label { display: inline; }
/* Motion for these actions (lift + globe spin) lives in motion.css. */
.grid[data-view="grid"] .nav-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
/* --- Rail edge fade --------------------------------------- */
/* The scroll-hint fade lives on .rail itself as a mask-image (app.css),
   anchored to the rail's true (bled) edges so it fades both sides
   cleanly. A .rail-wrap::after scrim used to do the right edge, but it
   sat inside the bleed and left a hard-clipped strip past its fade. */
.rail-wrap { position: relative; }
/* A category whose current-filter count is zero recedes rather than
   misleading — it is still tappable, just visibly out of play. */
.cat[data-empty="true"] { opacity: .5; }

/* --- List view -------------------------------------------- */
/* Same cards, one column, laid out as horizontal rows. The glyph
   anchors the left, text runs the middle, the foot badges sit inline
   — denser scanning when you want a list, not a gallery. */
/* .card-main groups top+blurb so the row can center that block
   vertically against a taller foot; invisible to layout elsewhere. */
.card-main { display: contents; }
.grid[data-view="list"] { grid-template-columns: 1fr; gap: var(--gap-3); }
.grid[data-view="list"] .card { padding: var(--gap-3) var(--gap-4); }
.grid[data-view="list"] .card-blurb {
  -webkit-line-clamp: 2; margin-top: var(--gap-2);
}
@media (min-width: 720px) {
  .grid[data-view="list"] .card {
    display: flex; align-items: center; gap: var(--gap-4);
  }
  /* Text block centers vertically as one unit against the foot. */
  .grid[data-view="list"] .card-main {
    display: flex; flex-direction: column; justify-content: center;
    flex: 1 1 auto; min-width: 0;
  }
  .grid[data-view="list"] .card-blurb { margin-top: 4px; }
  /* Foot becomes a fixed-width rail on the right: stretch makes every
     badge the width of the widest one, so they stop looking ragged;
     each badge then centers its own label. */
  .grid[data-view="list"] .card-foot {
    flex: 0 0 auto;
    flex-direction: column; align-items: stretch; gap: var(--gap-2);
    margin-top: 0; padding-top: 0; border-top: 0;
    border-left: 1px solid var(--line); padding-left: var(--gap-4);
    margin-right: 34px;
  }
  .grid[data-view="list"] .card-foot > * { justify-content: center; margin-left: 0; }
}