/* Alder app layer: what makes the theme behave like an installed app on a
   phone. The tab bar, a tighter translucent header, press feedback on touch,
   snap on the sideways rows, the floating extras moved off the tab bar's
   ground, and a short cross-fade between pages. Loads after alder.css.
   Everything that changes layout sits under 920px; desktop gets only the
   page cross-fade. Root overflow is already clip (inline on <html> and
   <body> in the base head), which keeps position:fixed alive on iOS. */

:root {
  --al-tab-h: 56px;
  --al-tab-pad: env(safe-area-inset-bottom, 0px);
}

body.al-theme { -webkit-tap-highlight-color: transparent; }
:where(body.al-theme) :where(a, button, summary, label, [role="button"]) { touch-action: manipulation; }

/* Chrome edges: no rules. The header lifts off the page on the theme's one
   raise shadow (alder.css draws its old bottom line; this layer loads after
   and clears it). Clear over the hero, the header carries no shadow. */
.al-hdr { border-bottom: 0; box-shadow: var(--al-raise); transition: background-color .25s, box-shadow .25s, color .25s; }
.al-hdr--over:not(.is-scrolled):not(.is-open) { box-shadow: none; }
/* iOS Safari 26+ samples the fixed bar at the top edge to colour the status
   bar strip. A backdrop-filter on that bar reads as "glass", so Safari lays
   its soft scroll-edge blur over the page top instead, and it shaves the top
   off the 44px search circle and Match pill. An opaque bar with no
   backdrop-filter reads as a solid edge: Safari extends its colour under the
   status bar and leaves the controls alone. iOS/iPadOS only (desktop keeps the
   frost); html raises it over the phone frost rule below, the clear over-hero
   state still wins. */
@supports (-webkit-touch-callout: none) {
  html .al-hdr { background: var(--al-page); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Tab bar */
.al-tabspace, .al-tabbar { display: none; }

@media (max-width: 920px) {
  :root { --al-hdr-row: 56px; }

  /* Header: one tight row on frosted page colour. Match moves to the tab
     bar, leaving the mark, search and the menu. */
  .al-hdr { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .al-hdr {
      background: rgba(250, 250, 248, .88);
      -webkit-backdrop-filter: saturate(1.8) blur(20px);
      backdrop-filter: saturate(1.8) blur(20px);
    }
  }
  .al-hdr.is-open { background: var(--al-page); }
  .al-logo__mark { width: 32px; height: 32px; }
  .al-has-tabbar .al-hdr__match { display: none; }
  .al-has-tabbar .al-hdr__end { gap: 2px; }

  /* Tab bar: a tone step, paper over the page colour, no top line. */
  .al-tabspace { display: block; height: calc(var(--al-tab-h) + var(--al-tab-pad)); }
  .al-tabbar {
    position: fixed; left: 0; right: 0; bottom: var(--tpv-h, 0px); z-index: 48;
    display: flex; align-items: stretch;
    padding: 0 max(4px, env(safe-area-inset-right, 0px)) var(--al-tab-pad) max(4px, env(safe-area-inset-left, 0px));
    background: var(--al-paper);
    transition: transform .25s var(--al-ease), visibility 0s;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .al-tabbar {
      background: rgba(230, 245, 236, .94); /* --al-paper #E6F5EC at .94 */
      -webkit-backdrop-filter: saturate(1.8) blur(20px);
      backdrop-filter: saturate(1.8) blur(20px);
    }
  }
  .al-tab {
    flex: 1 1 0; min-width: 0; height: var(--al-tab-h);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: var(--al-muted);
    font: 500 11px/1 var(--al-sans); letter-spacing: .01em; white-space: nowrap;
    transition: color .15s, opacity 80ms;
  }
  .al-tab__ico { width: 20px; height: 20px; stroke-width: 1.9; transition: scale 80ms ease-out; }
  .al-tab.is-on { color: var(--al-ink); font-weight: 600; }
  .al-tab.is-on .al-tab__ico { color: var(--al-pill); fill: rgba(20, 83, 45, .14); }
  .al-tab:focus-visible { outline-offset: -4px; border-radius: 12px; }

  /* Keyboard up (alder.js sets html.al-kb): the bar steps aside at once. */
  html.al-kb .al-tabbar { visibility: hidden; transform: translateY(100%); transition: none; }

  /* Provider profile: the booking bar takes the tab bar's place once the
     hero's own buttons scroll away, and gives it back when they return. */
  body:has(.al-pbar:not(.is-hidden)) .al-tabbar {
    visibility: hidden; transform: translateY(calc(100% + var(--tpv-h, 0px)));
    transition: transform .25s var(--al-ease), visibility 0s linear .25s;
  }

  /* Floating extras: the Ask tab replaces the Ask button, tapping the
     current tab replaces back-to-top, and the welcome video clears the bar. */
  .al-has-tabbar #ocd-ask-fab,
  .al-has-tabbar #ocd-scroll-top { display: none !important; }
  .al-has-tabbar #ocd-welcome-pip { bottom: calc(var(--al-tab-h) + var(--al-tab-pad) + 14px); }
  /* On the homepage the bubble would sit on the provider cards' photos as
     they scroll past; list and profile already drop it (alder-pages.css). */
  body.al-home.al-has-tabbar:not(.ocd-welcome-open) #ocd-welcome-pip { display: none !important; }
}

/* Consent choice (base js/ocd-consent.js markup), in Alder's materials:
   page ground, hairline, 16px corners, no card shadow. Accept and Decline
   stay one identical pill, as in the base, so neither choice is nudged. */
body.al-theme .ocd-cb {
  background: var(--al-page); color: var(--al-ink);
  border-color: var(--al-line); border-radius: var(--al-r) var(--al-r) 0 0; box-shadow: none;
  font: 400 14px/1.55 var(--al-sans); letter-spacing: 0;
}
body.al-theme .ocd-cb-text { color: var(--al-body); }
body.al-theme .ocd-cb-text a { color: var(--al-ink); text-decoration-color: rgba(14, 42, 27, .35); }
body.al-theme .ocd-cb-btn {
  min-height: 44px; border: 1px solid var(--al-line); background: #fff; color: var(--al-ink);
  font: 600 15px/1.2 var(--al-sans); box-shadow: var(--al-raise);
  transition: background-color .18s, border-color .18s, scale 80ms ease-out;
}
@media (hover: hover) { body.al-theme .ocd-cb-btn:hover { background: #fff; border-color: rgba(14, 42, 27, .34); } }
body.al-theme .ocd-cb-btn:active { background: var(--al-paper); scale: .98; }
body.al-theme .ocd-cb-btn:focus-visible, body.al-theme .ocd-cb a:focus-visible { outline: 2px solid var(--al-brand); outline-offset: 2px; }
@media (min-width: 640px) {
  body.al-theme .ocd-cb { border-radius: var(--al-r); box-shadow: none; }
}
/* Under 640 it is a bottom sheet and covers the tab bar like any native
   sheet until answered; 640 to 920 it is a floating card above the bar. */
@media (min-width: 640px) and (max-width: 920px) {
  .al-has-tabbar .ocd-cb { bottom: calc(var(--al-tab-h) + var(--al-tab-pad) + 16px); }
  body.al-has-tabbar.ocd-cb-open #ocd-welcome-pip:not(.is-playing) {
    bottom: calc(var(--ocd-cb-h, 0px) + var(--al-tab-h) + var(--al-tab-pad) + 30px) !important;
  }
}
/* Desktop: bottom right, clear of the hero's finder and chips on the left.
   The Ask launcher and back-to-top ride above it; the welcome bubble, now
   alone on the left, stays down. */
@media (min-width: 921px) {
  body.al-theme .ocd-cb {
    left: auto; right: max(24px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100% - 540px)); margin: 0; /* 540: under 960 it narrows to stay off the hero column */
  }
  body.al-theme.ocd-cb-open #ocd-ask-fab,
  body.al-theme.ocd-cb-open #ocd-scroll-top { bottom: calc(var(--ocd-cb-h, 0px) + 36px + env(safe-area-inset-bottom, 0px)) !important; }
  body.al-theme.ocd-cb-open #ocd-welcome-pip:not(.is-playing) { bottom: 22px !important; }
}

/* Press feedback on touch screens: a quick settle, no hover tricks. */
@media (hover: none) {
  /* Each list restates the component's own transitions plus scale. */
  .al-pill, .al-chip { transition: background-color .18s, border-color .18s, color .18s, scale 80ms ease-out; }
  .al-round { transition: border-color .18s, background-color .18s, opacity .18s, scale 80ms ease-out; }
  .al-step { transition: background-color .18s, border-color .18s, box-shadow .18s, scale 80ms ease-out; }
  .al-seg__opt { transition: background-color .18s, color .18s, scale 80ms ease-out; }
  .al-finder__go { transition: transform .18s var(--al-ease), background-color .18s, scale 80ms ease-out; }
  .al-pc { transition: border-color .18s, scale 80ms ease-out; }
  .al-hdr__search, .al-hdr__burger, .al-tag, .al-res, .al-post, .al-need { transition: scale 80ms ease-out; }

  .al-pill:active, .al-chip:active, .al-round:not(:disabled):active,
  .al-hdr__search:active, .al-hdr__burger:active, .al-step:active, .al-seg__opt:active,
  .al-finder__go:active, .al-tag:active { scale: .98; }
  :is(.al-pc, .al-res, .al-post, .al-need):active:not(:has(:is(.al-pill, .al-chip, .al-tag, button):active)) { scale: .98; }
  .al-tab:active { opacity: .72; }
  .al-tab:active .al-tab__ico { scale: .9; }
  :where(body.al-theme) a:not([class]):active { opacity: .6; }
}

/* Sideways rows: snap, contained overscroll, momentum on old iOS. The card
   rows (.al-row) already snap mandatory in alder.css. */
.al-ticker, .al-chiprow, .al-snav ul {
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.al-chiprow { scroll-padding-inline: var(--al-edge); }
.al-ticker li, .al-chiprow > *, .al-snav li { scroll-snap-align: start; }
.al-row { -webkit-overflow-scrolling: touch; }

/* Sheets keep their scroll to themselves. */
.al-menu, .al-filters, .al-filters__body, .al-dd__panel { overscroll-behavior: contain; }

/* Page changes: a short cross-fade between same-site pages in browsers that
   support cross-document view transitions; others ignore the at-rule. The
   tab bar is lifted out of the fade so it stays put like a native bar. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 180ms;
    animation-timing-function: ease;
  }
  .al-tabbar { view-transition-name: al-tabbar; }
  ::view-transition-group(al-tabbar),
  ::view-transition-old(al-tabbar),
  ::view-transition-new(al-tabbar) { animation: none; }
}

/* Homepage stats under the ticker: one row at every width below 921, never
   2x2. Three or four columns (whichever the page prints), the art above a
   figure sized to the column so "16,528+" holds one line at 360, labels at
   11px. Equal columns from 600. Under 600 the row is a flex line: each
   column starts at its one-line width and all shrink in proportion, so
   every label wraps to the same two balanced lines from 320 to 599 (auto
   grid tracks shared the space equally and left three-line labels at 320
   and 360). The first label breaks into the longest halves ("Listed from
   Oregon / license rolls"), so it shrinks a little less. The label size
   follows the width, 10px at 320 to 11.5px from 390. Copy is untouched. */
@media (max-width: 920px) {
  .al-stats .al-stats__grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    width: min(100% - 24px, var(--al-max));
  }
  .al-stats .al-stat, .al-stats .al-stat:nth-child(odd) {
    gap: 3px; padding: 16px 4px 18px; text-align: center; justify-items: center;
  }
  .al-stats .al-stat + .al-stat { border-left: 1px solid var(--al-line); }
  .al-stats .al-stat__art { width: 40px; height: 28px; margin-bottom: 6px; }
  .al-stats .al-stat__num { font-size: clamp(16px, 5.1vw, 30px); letter-spacing: -.035em; white-space: nowrap; }
  .al-stats .al-stat__label { font-size: 11px; line-height: 1.3; text-wrap: balance; }
}
@media (max-width: 599px) {
  .al-stats .al-stats__grid { display: flex; width: calc(100% - 8px); }
  .al-stats .al-stat, .al-stats .al-stat:nth-child(odd) { flex: 1 1 auto; min-width: 0; padding-inline: 3px; }
  .al-stats .al-stat:first-child { flex-shrink: .8; }
  .al-stats .al-stat__label { font-size: clamp(10px, 2.95vw, 11.5px); }
}

/* Footer marks: the Follow links carry a brand mark that only phones show,
   and the privacy choices link trails the copyright after a drawn dot (no
   text glyph, so the visible text stays the words). */
.al-foot__socmark { display: none; }
.al-foot__choices::before {
  content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 8px 0 6px;
  border-radius: 50%; background: currentColor; vertical-align: middle;
}
.al-foot__choices:hover { color: var(--al-ink); }

/* Phone Browse group: shown only below 921 (it stands in for the browse
   index there), so the desktop footer columns are untouched. */
.al-foot__col--hubs { display: none; }

/* Footer below 921: one narrow left-aligned column (Eric, 10-14, "just a
   small column of links"). Logo and name, then every group as a 13px
   muted eyebrow with 24px above it over plain 14px rows at 44px: Browse
   (one link per index group; the deep index lists stay in the HTML but are
   hidden here), Find help, For providers, Company, Legal. Then the five
   brand marks in one row, the copyright line with Your privacy choices, and
   the 988 line last. The tagline, the stats and the small wordmark are
   hidden here (still in the HTML). The grid, fine and legal wrappers are
   plain divs and step aside (display: contents) so order can place each
   piece; the navs keep their landmarks. Desktop keeps the alder.css
   footer and browse index. */
@media (max-width: 920px) {
  .al-idx { display: none; }

  .al-foot { padding: 28px 0 24px; }
  .al-foot > .al-wrap { display: flex; flex-direction: column; }
  .al-foot__grid, .al-foot__fine, .al-foot__legal { display: contents; }

  .al-foot__brand { order: 0; }
  .al-foot__home { display: flex; align-items: center; gap: 10px; min-height: 34px; }
  .al-foot__mark { width: 28px; height: 28px; margin: 0; }
  .al-foot__name { font-size: 18px; }
  .al-foot__sub, .al-foot__stats, .al-foot__word { display: none; }

  .al-foot__col--hubs { display: block; margin-top: 16px; }
  /* About 29px rows, one column (Eric, 10-14: tighter than the 44px law,
     his call for this footer; rows keep the full column width as the tap
     area). 16px margin above each group heading; 4px below it plus the
     row's 6px padding puts the first link 10px under. */
  .al-foot__col { order: 1; margin-top: 16px; }
  .al-foot__h,
  .al-foot__legal nav::before { margin: 0 0 4px; font: 500 13px/20px var(--al-sans); color: var(--al-muted); }
  .al-foot__col a,
  .al-foot__legal a { display: flex; align-items: center; min-height: 0; padding: 6px 0; font: 400 14px/1.2 var(--al-sans); color: var(--al-ink); }

  .al-foot__legal nav { order: 2; display: flex; flex-direction: column; margin-top: 16px; }
  .al-foot__legal nav::before { content: "Legal" / ""; }

  .al-foot__col:has(.al-foot__soc) { order: 3; margin-top: 12px; }
  .al-foot__col:has(.al-foot__soc) .al-foot__h,
  .al-foot__socname {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  /* -7px lines the first mark up with the text column above. */
  .al-foot__col:has(.al-foot__soc) ul { display: flex; gap: 8px; margin-left: -7px; }
  .al-foot__col a.al-foot__soc { justify-content: center; width: 34px; height: 34px; min-height: 34px; padding: 0; }
  .al-foot__socmark { display: block; width: 20px; height: 20px; }

  .al-foot__copy { order: 4; margin-top: 12px; font-size: 13px; line-height: 20px; color: var(--al-muted); }
  .al-foot__copy .al-foot__choices { display: flex; align-items: center; min-height: 0; margin: 0; padding: 6px 0; font-size: 14px; line-height: 1.2; color: var(--al-ink); }
  .al-foot__choices::before { content: none; }
  .al-foot__crisis { order: 5; font-size: 13px; line-height: 20px; color: var(--al-muted); }
}