/* Cool Walks AU — layout and theme.
   Mobile-first: dog walkers are on phones (design.md §8), so the panel stacks under the
   map on narrow screens and sits beside it from 900px up. */

:root {
  --ink: #16211c;
  --muted: #5c6b63;
  --line: #dfe4e0;
  --bg: #f7f8f7;
  --card: #ffffff;
  /* Boston-ivy greens (Slice A lock 2026-08-11): 500 for accents, 700 for
     CTAs/selected, 900 for the app-bar gradient. */
  --accent: #2d7a4f;
  --accent-dark: #1e5637;
  --accent-deep: #10331f;
  --accent-light: #e7f3ec;
  --warn: #8a5a12;
  --shadow-sm: 0 1px 3px #16211c0a, 0 1px 2px #16211c08;
  --shadow-md: 0 4px 12px #16211c0c, 0 2px 4px #16211c08;
  --shadow-lg: 0 8px 24px #16211c10, 0 4px 8px #16211c0a;
  --radius: 12px;

  /* Shade ramp: cividis, reversed. Colour-blind safe and perceptually uniform, which the
     pre-deploy checklist requires — explicitly NOT green-vs-red. Matches the ramp used in
     the pipeline's own eyeball artefacts so the site and the analysis agree. */
  --sun-0: #fdea45;
  --sun-1: #bfae4e;
  --sun-2: #7e7b52;
  --sun-3: #414d6b;
  --sun-4: #00224e;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .9rem;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent-dark));
  flex-wrap: wrap;
}

.topbar h1 { font-size: 1.1rem; margin: 0; letter-spacing: -.02em; color: #fff; }
.topbar h1 .au { color: #8bd4af; font-weight: 700; }

.modes { display: flex; gap: 2px; background: #ffffff18; padding: 3px; border-radius: 10px; }
.modes button {
  border: 0; background: transparent; padding: .35rem .75rem; border-radius: 8px;
  font: inherit; font-size: .88rem; color: #ffffffbb; cursor: pointer;
  transition: background .15s, color .15s;
}
.modes button[aria-selected="true"] { background: #fff; color: var(--accent); font-weight: 600; }
.modes button:not([aria-selected="true"]):hover { background: #ffffff20; color: #fff; }
.modes button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

#corridor-select {
  font: inherit; font-size: .85rem; padding: .25rem .4rem; border-radius: 8px;
  border: 1px solid #ffffff30; background: #ffffff15; color: #fff;
  max-width: 10rem;
}
.link-btn {
  margin-left: auto; border: 0; background: none; color: #ffffffcc;
  font: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; padding: .3rem;
  transition: color .15s;
}
.link-btn:hover { color: #fff; }

.toggle-btn {
  border: 1px solid #ffffff30; background: #ffffff15; color: #ffffffcc;
  font: inherit; font-size: .8rem; cursor: pointer; padding: .3rem .6rem; border-radius: 8px;
  transition: background .15s, color .15s;
}
.toggle-btn:hover { background: #ffffff25; color: #fff; }
.toggle-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


.disclaimer {
  margin: 0; padding: .4rem .9rem; font-size: .76rem; line-height: 1.35;
  color: #7a6a3e; background: #faf5ea; border-bottom: 1px solid #efe5cc;
}

/* ---------- Slice 3: mobile app bar + menu drawer ---------- */

/* Desktop keeps the full topbar; the compact-bar elements and drawer only exist
   below the mobile breakpoint. */
#appbar-mode, #menu-open, .menu-drawer { display: none; }

@media (max-width: 899px) {
  .topbar { flex-wrap: nowrap; }
  .topbar .modes, #about-open { display: none; }
  /* The caveat and 2019 disclosure move to the quiet footer in the sheet. */
  .disclaimer { display: none; }

  #appbar-mode {
    display: inline; margin-left: auto; color: #ffffffcc; font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  #menu-open { display: inline-block; flex-shrink: 0; }

  .menu-drawer {
    position: fixed; inset: 0; z-index: 60; background: #fff;
    flex-direction: column; overflow-y: auto; padding: .8rem .9rem;
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
  }
  .menu-drawer.open { display: flex; }

  .menu-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .4rem;
  }
  .menu-head .toggle-btn { border-color: var(--line); background: var(--bg); color: var(--ink); }
  .menu-section-title {
    font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; margin: .9rem 0 .35rem;
  }

  /* The relocated mode strip becomes a vertical list on a light background. */
  .menu-drawer .modes { display: flex; flex-direction: column; gap: .3rem; background: none; padding: 0; }
  .menu-drawer .modes button {
    text-align: left; color: var(--ink); background: var(--bg);
    padding: .6rem .75rem; font-size: .95rem;
  }
  .menu-drawer .modes button[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 600; }

  .menu-item {
    display: block; width: 100%; text-align: left; font: inherit; font-size: .95rem;
    padding: .6rem .75rem; border: 0; border-radius: 8px;
    background: var(--bg); color: var(--ink); cursor: pointer; margin: .3rem 0;
  }
  .menu-item.back { background: none; color: var(--muted); padding-left: 0; }

  #menu-quick-slot .control, #menu-more-slot .control { margin: .5rem 0 .9rem; }

  /* Inside the drawer the level heading already says Information: the footer
     block drops its own title and its sheet-end border. */
  #menu-info-slot .quiet-footer { margin-top: 0; padding-top: 0; border-top: 0; }
  #menu-info-slot .qf-title { display: none; }
}

/* Quiet footer (Slice 3): present at the end of the sheet content on all
   widths; understated by design. */
.quiet-footer {
  margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; line-height: 1.4;
}
.quiet-footer .qf-tagline {
  color: var(--accent-dark); font-weight: 600; font-size: .82rem;
  margin: 0 0 .7rem; line-height: 1.35;
}
.quiet-footer .qf-title {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; margin: 0 0 .35rem;
}
.about-tagline { color: var(--accent-dark); font-weight: 600; margin: 0 0 .8rem; }
.quiet-footer .qf-line { margin: .3rem 0; }
.quiet-footer .qf-small { font-size: .72rem; }
.quiet-footer .qf-attr summary { cursor: pointer; }
.quiet-footer .qf-attr ul { margin: .35rem 0 .45rem 1.1rem; padding: 0; }
.quiet-footer a { color: inherit; text-decoration: underline; }

.poi-report {
  display: inline-block; margin-top: .3rem; font-size: .8rem;
  color: var(--muted); text-decoration: underline;
}
.poi-report:hover { color: var(--accent); }

/* ---------- layout ---------- */

main { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
#map { flex: 1 1 55%; min-height: 260px; }

.panel {
  flex: 1 1 45%; overflow: hidden; background: var(--card);
  border-top: 1px solid var(--line); min-height: 0;
  display: flex; flex-direction: column;
}

.sheet-handle { display: none; }
#sheet-peek { display: none; }
.sheet-content { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 1rem; }

@media (min-width: 900px) {
  main { flex-direction: row; }
  #map { flex: 1 1 auto; height: auto; min-height: 0; }
  .panel {
    flex: 0 0 380px; border-top: 0; border-left: 1px solid var(--line);
  }
  body.panel-collapsed .panel { display: none; }
}

/* ---------- mobile bottom sheet ---------- */

@media (max-width: 899px) {
  #map { flex: 1 1 auto; min-height: 0; }

  .panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 10;
    flex: none;
    height: var(--sheet-h, 132px);
    max-height: calc(100dvh - 60px);
    border-top: 1px solid #d9e8de;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -2px 16px rgba(22, 33, 28, 0.12);
    transition: height 0.3s cubic-bezier(0.2, 0, 0, 1);
    will-change: height;
    /* Slice A sheet character: soft ivy wash fading into the card colour. */
    background: linear-gradient(180deg, #edf6f0 0%, var(--card) 26%);
  }
  .panel.dragging { transition: none; }

  /* The whole top band is the grab target (review decision 2026-08-08); the
     pill is a visual cue only. Band + peek summary make up the 132px peek. */
  .sheet-handle {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 28px;
    padding: 12px 0 8px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
  }
  .sheet-handle > i {
    width: 56px; height: 5px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    pointer-events: none;
  }

  #sheet-peek {
    display: block;
    padding: 0 1rem 8px;
    flex-shrink: 0;
    cursor: pointer;
    user-select: none;
  }
  #sheet-peek[hidden] { display: none; }
  #sheet-peek .peek-head {
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #sheet-peek .peek-best {
    font-size: 0.82rem;
    color: var(--ink);
    background: var(--accent-light);
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #sheet-peek .peek-hint {
    font-size: 0.75rem;
    color: var(--ink-soft, #8a948e);
    margin-top: 2px;
  }
  /* The whole summary is a collapsed-state affordance: once the sheet is
     expanded the group header and cards say the same thing directly below it
     (spec: the summary hides after expansion, not just its hint). */
  .panel:not(.at-peek) #sheet-peek { display: none; }

  .sheet-content {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 1rem;
  }
  .sheet-content > .control,
  .sheet-content > .legend,
  .sheet-content > .heat-legend { flex-shrink: 0; }
  #results { order: -1; flex-shrink: 0; }
  #wag-conditions { order: -2; flex-shrink: 0; margin-top: .25rem; }

  .panel.walk-focused .sheet-content > :not(#results):not(#wag-conditions),
  .panel.walk-focused #results > :not(.card[aria-current="true"]) { display: none !important; }

  #panel-toggle { display: none; }

  .maplibregl-ctrl-bottom-left,
  .maplibregl-ctrl-bottom-right {
    bottom: calc(var(--sheet-h, 132px) + 6px);
    transition: bottom 0.3s cubic-bezier(0.2, 0, 0, 1);
  }
}

/* ---------- controls ---------- */

.control { margin-bottom: 1.1rem; }
.control label {
  display: block; font-weight: 600; font-size: .82rem; margin-bottom: .35rem;
  color: var(--ink); letter-spacing: -.01em;
}
.control input[type="range"] { width: 100%; accent-color: var(--accent); }
.control input:disabled { opacity: .45; cursor: not-allowed; }

.ends { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted); }
#time-out { display: block; font-size: 1.4rem; font-weight: 700; margin-top: .15rem; color: var(--ink); }
.hint { margin: .3rem 0 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.hint.disabled { color: var(--warn); }

/* ---------- search ---------- */

.search-box { position: relative; }
#search {
  width: 100%; box-sizing: border-box; font-size: .9rem;
  padding: .5rem .7rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
#search:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px #1c6b4b18;
}
.search-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: .3rem; list-style: none; max-height: 280px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.search-result {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .45rem .55rem; border-radius: 8px; cursor: pointer;
  transition: background .1s;
}
.search-result:hover, .search-result[aria-selected="true"] { background: var(--bg); }
.sr-label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.sr-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  font-size: .76rem; padding: .25rem .55rem; border-radius: 99px; cursor: pointer;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.chip[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-sm); }
.chip:not([aria-pressed="true"]):hover { border-color: var(--accent); color: var(--accent); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- results ---------- */

.card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem;
  margin-bottom: .6rem; background: var(--card); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .2s, transform .2s;
}
.card:hover { border-color: #1c6b4b55; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px #1c6b4b18; outline: none; }
.card[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px #1c6b4b18; }
.card h3 { margin: 0 0 .25rem; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.card .meta { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.card .meta.near { color: var(--accent); font-weight: 600; }

.card-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.card-act {
  font-size: .74rem; padding: .28rem .6rem; border-radius: 8px; cursor: pointer;
  background: var(--bg); color: var(--accent); border: 1px solid var(--line);
  text-decoration: none; line-height: 1.2;
  transition: border-color .15s, background .15s, color .15s;
}
.card-act:hover { border-color: var(--accent); background: var(--accent-light); }
.card-act.route-it, .card-act.explore-it { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.card-act.route-it:hover, .card-act.explore-it:hover { background: #17553d; }
.card-act.route-it:disabled, .card-act.explore-it:disabled { background: #b0c7ba; cursor: default; }
.card-act.fav[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.card-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.badge {
  font-size: .7rem; padding: .15rem .45rem; border-radius: 99px;
  background: #eef2ef; color: var(--muted); border: 1px solid var(--line);
}
.badge.good { background: var(--accent-light); color: #14603f; border-color: #bfe0cd; }
.badge.draft { background: #fdf6e7; color: var(--warn); border-color: #f0e2c0; }
.badge.tier { background: #eef3f8; color: #2f4a63; border-color: #d3dfeb; }
.assurance-line { font-size: 0.8rem; color: var(--muted, #666); margin: 0.25rem 0 0; }
.qf-assurance { list-style: none; padding: 0; margin: 0.25rem 0; }

/* Shade bar: the single number a dog owner actually reads. */
.shadebar { height: 10px; border-radius: 99px; background: var(--sun-0); overflow: hidden; margin-top: .45rem; }
.shadebar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--sun-3), var(--sun-4)); border-radius: 99px; }
/* Grow-in only on first appearance (E3): the .anim class is added by
   shadebarClass() the first time a card identity renders this session. */
.shadebar.anim > i { animation: shade-grow .4s ease; }
@keyframes shade-grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
/* Unknown shade: neutral hatching (same language as the strip's unmodelled
   segments), never a sun-coloured or filled bar. */
.shadebar.unmodelled {
  background: repeating-linear-gradient(45deg, #e6e9e7 0 3px, #f3f5f4 3px 6px);
}

/* ---------- route detail (§8.5) ---------- */

.detail { margin-top: .65rem; border-top: 1px solid var(--line); padding-top: .55rem; }
.detail-title {
  margin: 0 0 .35rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); font-weight: 600;
}
.strip { display: flex; height: 18px; border-radius: 5px; overflow: hidden; gap: 0; }
.strip > i { flex: 1 1 0; display: block; }
.strip > i.unmodelled {
  background: repeating-linear-gradient(45deg, #e6e9e7 0 3px, #f3f5f4 3px 6px);
}
.detail-note { margin: .3rem 0 .1rem; font-size: .75rem; color: var(--muted); }

/* Sunrise/sunset viewpoint marker sitting over the sun-and-shade strip. */
.strip-wrap { position: relative; }
.view-marker {
  position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px;
  background: var(--ink); border-radius: 2px; pointer-events: none;
}
.view-marker::before {
  content: "☀"; position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%); font-size: 11px; line-height: 1;
}
.view-note { margin: .35rem 0 .1rem; font-size: .78rem; color: var(--accent); font-weight: 600; }

.elev-inline { white-space: nowrap; }
.elev-spark { width: 40px; height: 12px; vertical-align: middle; margin-right: 2px; }
.elev-chart { position: relative; margin: .25rem 0 .3rem; }
.elev-chart svg { width: 100%; height: 48px; display: block; }
.elev-lbl { position: absolute; font-size: 9px; color: var(--muted); line-height: 1; pointer-events: none; }
.elev-lbl.elev-gain { top: 1px; left: 50%; transform: translateX(-50%); font-weight: 600; }
.elev-lbl.elev-lo { bottom: 1px; left: 0; }
.elev-lbl.elev-hi { bottom: 1px; right: 0; }
:root { --elev-fill: #1c6b4b18; --elev-line: var(--accent); }

/* ☀ best-viewing marker placed on the selected route on the map. */
.map-view-marker {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: var(--shadow-md); cursor: default;
}

/* Mapillary photo strip on the selected walk card. */
.wag-photos { margin-top: .5rem; }
.wag-photo-row { display: flex; gap: .35rem; overflow-x: auto; padding-bottom: .2rem; }
.wag-photo-row img {
  height: 72px; width: auto; border-radius: 8px; display: block;
  border: 1px solid var(--line);
}
.photo-credit { font-size: .68rem; color: var(--muted); margin-top: .15rem; }
.photo-credit a { color: inherit; }

/* Amenity pile-up pill (Treatment 1): stacked Family-B icons + count; tap expands
   into the tray. Rendered as a MapLibre DOM marker during walk selection only. */
.poi-pill {
  display: flex; align-items: center; cursor: pointer;
  background: rgba(255,255,255,.92); border-radius: 99px; padding: 2px 6px 2px 2px;
  box-shadow: var(--shadow-md);
}
.poi-pill img { width: 26px; height: 26px; display: block; }
.poi-pill img + img { margin-left: -9px; }
.poi-pill.expanded { gap: 3px; padding: 3px 7px; }
.poi-pill.expanded img + img { margin-left: 0; }
.poi-pill .count {
  margin-left: 2px; background: #26302a; color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 10px; padding: 1px 6px;
}

.breakdown { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .78rem; }
.breakdown li {
  display: flex; justify-content: space-between; padding: .18rem 0;
  border-bottom: 1px dotted var(--line); color: var(--muted);
}
.breakdown li:last-child { border-bottom: 0; }
.breakdown b { color: var(--ink); font-weight: 600; }

.section-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); font-weight: 700; margin: 1rem 0 .5rem;
}

/* ---------- legend ---------- */

.legend { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.lg-label { font-size: .72rem; color: var(--muted); font-weight: 600; }
.ramp {
  flex: 1; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, var(--sun-0), var(--sun-1), var(--sun-2), var(--sun-3), var(--sun-4));
}

/* Paw-burn danger legend: only visible when a dog-mode temperature is set (see
   refreshHeatLegend). Matches the colours networkColour paints onto exposed edges. */
.heat-legend {
  display: flex; align-items: center; gap: .5rem; margin-top: .5rem;
  font-size: .74rem; line-height: 1.3; color: var(--warn);
}
/* display:flex would otherwise defeat the hidden attribute, leaving the empty
   swatch visible whenever the legend is off. */
.heat-legend[hidden] { display: none; }
.heat-legend.danger { color: #8a1212; }
.hl-swatch {
  flex: 0 0 34px; height: 10px; border-radius: 99px;
  background: linear-gradient(90deg, #ef6c00, #e65100);
}
.heat-legend.danger .hl-swatch { background: linear-gradient(90deg, #e65100, #c62828); }

/* ---------- dialog ---------- */

dialog {
  border: 0; border-radius: 16px; padding: 0; max-width: 34rem; width: calc(100% - 2rem);
  box-shadow: var(--shadow-lg);
}
dialog::backdrop { background: #16211c55; backdrop-filter: blur(4px); }
dialog article { padding: 1.2rem 1.3rem; }
dialog h2 { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 700; }
dialog h3 { margin: 1rem 0 .3rem; font-size: .85rem; }
dialog ul { margin: .3rem 0; padding-left: 1.1rem; font-size: .82rem; color: var(--muted); }
dialog p { font-size: .87rem; }
.small { font-size: .78rem; color: var(--muted); }
.primary {
  background: var(--accent); color: #fff; border: 0; border-radius: 10px;
  padding: .5rem 1.2rem; font: inherit; font-weight: 600; cursor: pointer; margin-top: .6rem;
  transition: background .15s, transform .1s;
}
.primary:hover { background: #14603f; }
.primary:active { transform: scale(.97); }

/* ---------- walk filter (Canine Compass) ---------- */

#walk-filter { max-width: 22rem; }
.filter-label {
  font-size: .78rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .02em; margin: .8rem 0 .35rem;
}
.filter-divider { border: 0; border-top: 1px solid var(--line); margin: 1rem 0 .2rem; }
.filter-actions {
  display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;
}
.filter-actions .primary { margin-top: 0; }
#walk-filter-btn {
  position: relative;
  width: 29px; height: 29px;
  display: flex; align-items: center; justify-content: center;
}
#coolwalk-btn {
  width: 29px; height: 29px;
  display: flex; align-items: center; justify-content: center;
}
#coolwalk-btn.on { background: var(--accent); }
#coolwalk-btn.on svg path { stroke: #fff; }
.coolwalk-note {
  font-size: .8rem; color: var(--ink); background: var(--accent-light);
  border: 1px solid #bfe0cd; border-radius: 10px; padding: .45rem .6rem; margin: 0 0 .6rem;
}
.coolwalk-note .link-btn { color: var(--accent-dark); text-decoration: underline; padding: 0; background: none; border: 0; font: inherit; cursor: pointer; }

/* B12 field: the walk, hour by hour, as one picture. */
.day-field-wrap { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0 .35rem; margin: .35rem 0 0; }
.day-field-y { display: flex; flex-direction: column; justify-content: space-between; font-size: .62rem; color: var(--muted); text-align: right; padding: 1px 0; }
.day-field { position: relative; }
.day-field svg { display: block; width: 100%; height: 88px; border-radius: 6px; background: var(--line); }
.day-field-dots { position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background-image: radial-gradient(circle, rgba(10, 20, 30, .42) 1.1px, transparent 1.9px);
  background-size: 6px 6px; background-position: 3px 3px; }
.day-field-row { position: absolute; left: 0; right: 0; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.day-field-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.day-field-row:hover { box-shadow: inset 0 0 0 1px rgba(27, 42, 36, .45); }
.day-field-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--ink); pointer-events: none; }
.day-field-now b { position: absolute; right: 0; top: -1.15em; font-size: .62rem; line-height: 1.2; background: var(--ink); color: var(--bg); padding: 0 .3em; border-radius: 3px; font-weight: 700; }
.day-field-x { grid-column: 2; display: flex; justify-content: space-between; font-size: .62rem; color: var(--muted); margin-top: 2px; }
.day-field-caption { margin: .25rem 0 .55rem; font-size: .74rem; color: var(--muted); line-height: 1.3; }

/* B2 day strip and the "safe from" sentence. */
.day-strip { display: flex; gap: 2px; height: 12px; margin-top: .55rem; }
.day-strip .day-cell { flex: 1; border-radius: 2px; }
.day-strip .day-cell.now { outline: 2px solid var(--ink); outline-offset: 1px; }
.day-strip .day-cell.longsun { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(255,255,255,.55) 3px 5px); }
.day-line { margin: .1rem 0 .5rem; font-size: .8rem; font-weight: 600; color: var(--accent-dark); }
.row-safe { color: var(--accent-dark); font-weight: 600; }
.filter-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 15px; height: 15px; border-radius: 99px;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  padding: 0 3px;
}
.hint .link-btn { color: var(--accent); margin-left: .25rem; text-decoration: underline; padding: 0; }
.hint .link-btn:hover { color: var(--accent-dark); }

/* ---------- personal walk rating ---------- */

.walk-rating { display: flex; align-items: center; gap: .1rem; margin: .5rem 0 .2rem; flex-wrap: wrap; }
.rating-label { font-size: .78rem; color: var(--muted); margin-right: .35rem; }
.rate-star {
  border: 0; background: none; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--muted);
  min-width: 40px; min-height: 40px; padding: 0;
  touch-action: manipulation;
}
.rate-star.on { color: #e0a400; }
.rate-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.rate-clear {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: .78rem; color: var(--muted); text-decoration: underline; margin-left: .3rem;
  min-height: 40px; touch-action: manipulation;
}
.rate-clear:hover { color: var(--ink); }
.row-rating { color: #e0a400; font-weight: 600; }

/* Personal note under the rating (local-only). */
.walk-note-wrap { margin: .2rem 0 .4rem; }
.walk-note {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px;
  padding: .4rem .55rem; font: inherit; font-size: .82rem;
  background: var(--bg); color: var(--ink); min-height: 2.6rem;
}
.walk-note::placeholder { color: var(--muted); }
.walk-note:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

.maplibregl-ctrl-attrib { font-size: 11px; }

/* ---------- temperature & heat warnings ---------- */

.temp-row { display: flex; align-items: center; gap: .4rem; }
.temp-row input[type="number"] {
  width: 4.5rem; padding: .35rem .45rem; border: 1px solid var(--line);
  border-radius: 8px; font: inherit; font-size: 1.1rem; font-weight: 700;
  text-align: center; background: var(--bg); color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.temp-row input[type="number"]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px #1c6b4b18; }
.temp-unit { font-size: .9rem; color: var(--muted); }

.heat-banner {
  border-radius: var(--radius); padding: .65rem .75rem; margin-bottom: .7rem;
  font-size: .82rem; line-height: 1.4;
}
.heat-banner strong { display: block; margin-bottom: .2rem; }
.heat-banner p { margin: 0; }
.heat-banner.danger { background: #fdf6e7; color: #8a5a12; border: 1px solid #f0e2c0; }
.heat-banner.extreme { background: #fde7e7; color: #8a1212; border: 1px solid #f0c0c0; }

.corridor-banner {
  border-radius: var(--radius); padding: .65rem .75rem; margin-bottom: .7rem;
  font-size: .82rem; line-height: 1.4;
  background: #eef2f6; color: #33424e; border: 1px solid #d3dde5;
}
.corridor-banner strong { display: block; margin-bottom: .2rem; }
.corridor-banner p { margin: 0; }

.route-warn {
  border-radius: 10px; padding: .55rem .65rem; margin-bottom: .5rem;
  font-size: .78rem; line-height: 1.35;
}
.route-warn strong { display: block; margin-bottom: .15rem; font-size: .8rem; }
.route-warn.caution { background: #fdf6e7; color: #8a5a12; border: 1px solid #f0e2c0; }
.route-warn.danger { background: #fde7e7; color: #8a1212; border: 1px solid #f0c0c0; }

.badge.caution { background: #fdf6e7; color: #8a5a12; border-color: #f0e2c0; }
.badge.danger { background: #fde7e7; color: #8a1212; border-color: #f0c0c0; }

/* Solar interpretation (Batch B): best-time line and the wait-or-go tip. */
.best-time {
  margin: .45rem 0 0; font-size: .82rem; font-weight: 700; color: var(--accent);
}
.route-tip {
  border-radius: 10px; padding: .55rem .65rem; margin: .5rem 0 0;
  font-size: .78rem; line-height: 1.35;
  background: var(--accent-light); color: #14603f; border: 1px solid #bfe0cd;
}
.route-tip strong { display: block; margin-bottom: .15rem; font-size: .8rem; }

/* ---------- field test (?test=1) ---------- */

.test-bar {
  position: fixed; top: .5rem; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .4rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: .35rem .5rem; box-shadow: var(--shadow-md);
  font-size: .78rem; max-width: calc(100% - 1rem);
}
.test-badge {
  background: var(--accent); color: #fff; border-radius: 99px;
  padding: .15rem .5rem; font-weight: 600; font-size: .72rem; white-space: nowrap;
}
#test-count { color: var(--muted); white-space: nowrap; }
.test-bar button {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 99px; padding: .2rem .6rem; font: inherit; font-size: .74rem; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.test-bar button:hover { border-color: var(--accent); color: var(--accent); }
.test-bar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.test-bar button:disabled { opacity: .45; cursor: not-allowed; }
#test-locate[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

.verify { min-width: 200px; }
.verify-name { display: block; font-size: .95rem; }
.verify-kind {
  margin: .05rem 0 .35rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
.verify-shade { margin: 0 0 .15rem; font-size: .8rem; color: var(--ink); }
.verify-dist { margin: 0 0 .4rem; font-size: .78rem; color: var(--muted); }
.verify-prev { margin: 0 0 .4rem; font-size: .76rem; color: var(--accent); }
.verify-verdicts { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .4rem; }
.verify-btn {
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  border-radius: 99px; padding: .25rem .6rem; font: inherit; font-size: .76rem; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.verify-btn:hover { border-color: var(--accent); }
.verify-btn[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.verify-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.verify-note {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: .35rem .45rem;
  font: inherit; font-size: .8rem; resize: vertical; background: var(--bg); color: var(--ink);
  transition: border-color .15s;
}
.verify-note:focus { border-color: var(--accent); outline: none; }
.verify-saved { margin: .35rem 0 0; font-size: .76rem; color: var(--accent); font-weight: 600; }

/* ---------- siting mode ---------- */

.siting-caveat {
  background: #fdf6e7; color: #8a5a12; border: 1px solid #f0e2c0;
  border-radius: 10px; padding: .55rem .65rem; line-height: 1.35; font-size: .78rem;
}

.siting-card { position: relative; padding-left: 2.6rem; }
.siting-rank {
  position: absolute; left: .6rem; top: .6rem;
  font-size: .7rem; font-weight: 700; color: var(--muted);
  width: 1.5rem; text-align: center;
}

.siting-bar {
  height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: .4rem;
}
.siting-bar > i { display: block; height: 100%; background: #e53935; border-radius: 99px; }

.gain-section { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .4rem; }
.gain-title {
  margin: 0 0 .3rem; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 600;
}
.gain-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.gain-label { flex: 0 0 2.2rem; font-size: .72rem; color: var(--muted); font-weight: 600; }
.gain-bar {
  flex: 1 1 auto; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden;
}
.gain-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.gain-val { flex: 0 0 2.8rem; font-size: .72rem; color: var(--ink); text-align: right; font-weight: 600; }

.btn-csv {
  font: inherit; font-size: .78rem; padding: .4rem .8rem; border-radius: 8px;
  border: 1px solid var(--accent); background: transparent; color: var(--accent);
  cursor: pointer; margin-bottom: .5rem;
  transition: background .15s, color .15s;
}
.btn-csv:hover { background: var(--accent); color: #fff; }

.shade-teaser {
  margin-top: 1rem; padding: .85rem; border-radius: var(--radius);
  background: linear-gradient(135deg, #e7f3ec, #ddf0e5);
  border: 1px solid #bfe0cd;
}
.shade-teaser .section-title { margin-top: 0; color: var(--accent); }
.shade-teaser p { margin: 0 0 .4rem; font-size: .85rem; color: var(--ink); line-height: 1.45; }
.shade-teaser p:last-child { margin-bottom: 0; }
.shade-teaser a {
  display: inline-block; color: #fff; background: var(--accent);
  padding: .35rem .8rem; border-radius: 8px; font-weight: 600;
  text-decoration: none; font-size: .82rem; margin-top: .2rem;
  transition: background .15s;
}
.shade-teaser a:hover { background: #14603f; }

/* Route markers (origin A / destination B) */
.route-marker {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; box-shadow: var(--shadow-md);
  border: 2px solid #fff; cursor: grab;
}
.route-marker:active { cursor: grabbing; }
/* E1: while comparing explore loops (which all start here), shrink the marker
   to a small dot so the tightest loop isn't hidden underneath it. */
.route-marker.origin-explore {
  width: 12px; height: 12px; font-size: 0; border-width: 2px;
  box-shadow: 0 1px 3px #16211c40;
}

/* Route prompt / card in panel */
.route-prompt {
  margin-bottom: .8rem; padding: .6rem .8rem;
  background: var(--accent-light); border-radius: var(--radius);
  border: 1px solid #bfe0cd;
}
.route-prompt-msg {
  font-size: .85rem; color: var(--accent); font-weight: 600; text-align: center;
}
.route-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .4rem;
}
.route-card-head strong { color: var(--accent); font-size: .9rem; }
.explore-caption {
  font-size: .75rem; color: var(--muted, #667); margin: -.15rem 0 .5rem;
}
.route-card-actions { display: flex; gap: .6rem; align-items: center; }
.save-route {
  background: var(--accent); color: #fff; border: none; border-radius: 4px;
  font-size: .75rem; padding: .2rem .6rem; cursor: pointer; font-weight: 600;
}
.save-route:disabled { background: #b0c7ba; cursor: default; }
.clear-route {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .78rem; text-decoration: underline; padding: 0;
}
.route-card .route-stats {
  display: flex; gap: .8rem; font-size: .85rem; color: var(--ink); margin-bottom: .3rem;
}
.route-card .modelled-note {
  display: block; font-size: .78rem; color: var(--warn); margin-bottom: .3rem;
}

/* Saved routes */
.saved-routes-section { margin-bottom: .6rem; }
.saved-routes-section .section-title { margin-bottom: .3rem; }
.saved-route-card {
  padding: .5rem .7rem; margin-bottom: .3rem;
  background: var(--card-bg, #f7faf8); border: 1px solid #dbe5df;
  border-radius: var(--radius); cursor: pointer;
  transition: background .15s;
}
.saved-route-card:hover { background: var(--accent-light); }
.saved-route-card.compact { padding: .35rem .6rem; }
.saved-route-row {
  display: flex; justify-content: space-between; align-items: center; gap: .4rem;
}
.saved-name {
  font-size: .85rem; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0;
  cursor: text;
}
.saved-name-input {
  font-size: .85rem; font-weight: 500; color: var(--ink);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: .1rem .3rem; flex: 1 1 0; min-width: 0;
  outline: none; background: #fff;
}
.saved-delete {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .2rem; flex-shrink: 0;
}
.saved-delete:hover { color: var(--warn, #c62828); }

/* Explore loops / transit */
.explore-btn, .transit-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 4px;
  font-size: .78rem; padding: .25rem .7rem; cursor: pointer; font-weight: 600;
}
.transit-dest {
  font-size: .82rem; color: var(--ink); margin-bottom: .35rem;
}
.transit-badge {
  display: inline-block; font-size: .72rem; color: var(--muted);
  background: #eef2ef; border-radius: 3px; padding: .05rem .4rem;
  margin-left: .3rem; vertical-align: baseline;
}
.explore-loop-card {
  padding: .5rem .7rem; margin-top: .4rem;
  background: var(--card-bg, #f7faf8); border: 1px solid #dbe5df;
  border-radius: var(--radius); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.explore-loop-card:hover { background: var(--accent-light); }
.explore-loop-card.active {
  background: var(--accent-light); border-color: var(--accent);
}
.explore-loop-label {
  font-size: .8rem; font-weight: 700; color: var(--accent);
  margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .03em;
  display: flex; align-items: center; gap: .35rem;
}
.explore-color-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.explore-loop-card .route-stats {
  display: flex; gap: .8rem; font-size: .82rem; color: var(--ink); margin-bottom: .3rem;
}

.explore-active > *:not(.route-prompt) {
  opacity: 0.25; pointer-events: none; transition: opacity .2s;
}
.explore-active > .route-prompt { opacity: 1; }

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

/* ---------- Wagfinder mode ---------- */

/* The Canine Compass purple theme (body.wag-active overrides) was retired by
   the Slice A design lock 2026-08-11: the mode is distinguished by behaviour,
   not a colour scheme, and the whole app wears the ivy greens. The class is
   still applied by app.js and remains available as a styling hook. */

/* ---------- Slice A: compact numbered rows + merged selected-walk card ---- */

.card.wag-compact { padding: .1rem .35rem; }
.card.wag-compact .wag-row {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .25rem;
  cursor: pointer;
}
.card.wag-compact .num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: .75rem; font-weight: 700; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.card.wag-compact .row-main { flex: 1; min-width: 0; }
.card.wag-compact .row-name {
  display: block; font-size: .86rem; font-weight: 600; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card.wag-compact .fav-star { color: var(--accent); }
.card.wag-compact .row-meta { display: block; font-size: .76rem; color: var(--muted); line-height: 1.3; }
.card.wag-compact .ministrip {
  display: flex; height: 4px; border-radius: 99px; overflow: hidden; margin-top: .3rem;
}
.card.wag-compact .ministrip i, .card.wag-compact .heatstrip i { flex: 1; }
.card.wag-compact .pill {
  font-size: .62rem; font-weight: 600; padding: .05rem .45rem; border-radius: 99px;
  background: var(--accent-light); color: var(--accent-dark); flex-shrink: 0;
}
.card.wag-compact .chev { color: #b3bdb6; font-size: 1rem; flex-shrink: 0; }
.card.wag-compact[aria-current="true"] .chev { transform: rotate(90deg); }
.card.wag-compact[aria-current="true"] .row-meta,
.card.wag-compact[aria-current="true"] .ministrip { display: none; }

.card.wag-compact .wag-sel { display: none; padding: 0 .25rem .55rem; }
.card.wag-compact .wag-clear {
  display: inline-block; font-size: .78rem; color: var(--muted); cursor: pointer;
  margin-bottom: .3rem; text-decoration: none;
}
.card.wag-compact .wag-clear:hover { color: var(--accent-dark); text-decoration: underline; }
.card.wag-compact[aria-current="true"] .wag-sel { display: block; }
.card.wag-compact .stats4 { display: flex; text-align: center; margin: .15rem 0 .6rem; }
.card.wag-compact .stats4 > div { flex: 1; }
.card.wag-compact .stats4 .v { display: block; font-size: .84rem; font-weight: 700; white-space: nowrap; }
.card.wag-compact .stats4 .k { display: block; font-size: .62rem; color: var(--muted); }
.card.wag-compact .heatstrip {
  display: flex; height: 12px; border-radius: 4px; overflow: hidden;
}
.card.wag-compact .strip-labels {
  display: flex; justify-content: space-between; font-size: .66rem; color: var(--muted);
  margin: .1rem 0 .5rem;
}
.card.wag-compact .sunny-line { font-size: .8rem; margin: 0 0 .5rem; }
.card.wag-compact .amenity-line { font-size: .8rem; margin: 0 0 .5rem; color: var(--muted); }
.card.wag-compact .wag-elev { margin: 0 0 .55rem; }
.card.wag-compact .wag-elev > summary {
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--accent-dark);
  list-style: none; padding: .15rem 0;
}
.card.wag-compact .wag-elev > summary::-webkit-details-marker { display: none; }
.card.wag-compact .wag-elev > summary::before { content: "▸ "; color: var(--muted); }
.card.wag-compact .wag-elev[open] > summary::before { content: "▾ "; }
.card.wag-compact .wag-elev svg { width: 100%; height: auto; margin-top: .3rem; }
.card.wag-compact .shadier-link {
  display: inline-block; margin-top: .3rem; color: var(--accent-dark); font-weight: 600;
  font-size: .78rem; text-decoration: underline; cursor: pointer;
}
.card.wag-compact .card-act.dir.wag-primary {
  background: var(--accent-dark); color: #fff; border-color: var(--accent-dark);
  font-weight: 600; padding: .35rem .9rem;
}

/* "Search for walks here" — floats over the map when no walks are in view. */
.wag-search-btn {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px;
  z-index: 5; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--accent-dark); color: #fff; font: inherit; font-size: .88rem;
  font-weight: 600; padding: .55rem 1.1rem; box-shadow: var(--shadow-lg);
}
.wag-search-btn:disabled { opacity: .85; cursor: default; }
@media (max-width: 899px) {
  .wag-search-btn { bottom: calc(var(--sheet-h, 132px) + 16px); }
}

body.wag-active .panel { border-color: #DDD4DF; }
@media (max-width: 899px) {
  body.wag-active .panel { box-shadow: 0 -2px 16px rgba(42, 31, 45, 0.12); }
}

/* Canine Compass declutter (2026-08-14): the analytic control blocks are hidden wherever
   they sit (sidebar panel or mobile menu drawer) while in wag mode. B11 (2026-09-02)
   REVISED the "filter dialog is the single control home" half of that ruling: time and
   temperature are conditions, not filters, so they now live in #wag-conditions at the
   top of the walk list on every screen size, and left the dialog. */
body.wag-active #search-control,
body.wag-active #time-control,
body.wag-active #alpha-control,
body.wag-active #temp-control,
body.wag-active #poi-control { display: none !important; }

/* The one home for time + temperature in Canine Compass. Outside wag the block
   stays [hidden]; inside wag it sits above the cards, and it SURVIVES walk focus,
   because choosing a time is part of deciding on the walk you are looking at. */
#wag-conditions { margin-bottom: .9rem; }
#wag-conditions[hidden] { display: none; }
body:not(.wag-active) #wag-conditions { display: none !important; }
#wag-conditions .hint { margin: .35rem 0 0; }

/* Selected walk = nothing but that one route, every screen size in Canine Compass. The
   mobile bottom-sheet rule (in the max-width block) already collapses the sheet to the
   selected card; this covers the desktop sidebar too. */
body.wag-active .panel.walk-focused #results > :not(.card[aria-current="true"]) { display: none !important; }
body.wag-active .panel.walk-focused .legend,
body.wag-active .panel.walk-focused .heat-legend,
body.wag-active .panel.walk-focused .quiet-footer { display: none !important; }

/* Elevation chart uses the ivy accent in all modes (the wag purple override
   was retired with the Slice A palette lock). */

/* ---------- Wagfinder simplified controls ---------- */

.wag-time-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
}

.wag-temp-inline {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-left: auto;
  white-space: nowrap;
}

/* B12: the day band as the time control. Full-width row of hour cells; the
   selected hour is outlined in ink, the others keep their in-view colour. Cells
   are real buttons (radio semantics) with a 40 px hit height for thumbs. */
.day-band { flex: 1 1 100%; display: flex; gap: 2px; }
.day-band.chips { gap: .35rem; flex-wrap: wrap; }
.day-cell-btn {
  flex: 1 1 0; min-width: 0; height: 22px; padding: 0; border: 0; border-radius: 3px;
  background: var(--line); cursor: pointer; position: relative;
}
.day-cell-btn::after { content: ""; position: absolute; inset: -9px 0; }  /* thumb-sized hit area */
.day-cell-btn.nodata { background: repeating-linear-gradient(135deg, var(--line) 0 3px, transparent 3px 6px); }
.day-cell-btn[aria-checked="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.day-cell-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.day-band-hours { flex: 1 1 100%; display: flex; gap: 2px; font-size: .68rem; color: var(--muted); line-height: 1.1; }
.day-band-hours span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; }
.day-band-hours span:first-child { text-align: left; }
.day-band-hours span:last-child { text-align: right; }
.day-band-caption { flex: 1 1 100%; font-size: .72rem; color: var(--muted); margin-top: .15rem; }
.day-band-caption .day-band-now { font-weight: 700; color: var(--ink); font-size: .8rem; }

@media (max-width: 420px) {
  .wag-temp-inline { margin-left: 0; }
}

.wag-temp-inline input[type="number"] {
  width: 3.5rem;
  padding: .25rem .3rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.wag-temp-inline input[type="number"]:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* ---------- Wagfinder v2 recommendations (?wag=2) ---------- */

.wag-recs {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: .5rem;
}

.wag-rec-band { margin-bottom: .6rem; }

.wag-rec-head {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  margin: .5rem 0 .1rem;
}

.wag-rec-reason {
  font-size: .8rem;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 .25rem;
}

.wag-rec-heat { color: #A33; }

.wag-explore-all {
  display: block;
  width: 100%;
  padding: .5rem;
  margin-top: .25rem;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--card);
  color: var(--accent);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.wag-explore-all:hover { background: var(--accent-light); }