/* =====================================================================
   ios.css, part 1 of 3: the shared iOS design system.
   One stylesheet per site. Tokens live on :root; dark mode follows the
   OS through prefers-color-scheme. The apps carry their own
   Auto / Light / Dark setting, which lands as data-theme on <html> and
   must win in both directions. The .ios-scheme-* classes expose the
   same two palettes to the styleguide so it can show both modes on one
   page without duplicating a token anywhere else.
   No hex outside the token blocks below.
   ===================================================================== */

:root {
  /* ground and surfaces */
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card-pressed: #D1D1D6;

  /* text */
  --label: #000000;
  --label-2: rgba(60, 60, 67, .75);
  --label-3: rgba(60, 60, 67, .30);
  --sep: rgba(60, 60, 67, .29);

  /* chrome and tint */
  --tint: #007AFF;
  --tint-press: #0062CC;
  --tint-text: #0066CC;
  --tint-fill: #0066CC;
  --label-aa: rgba(60, 60, 67, .78);
  --tint-soft: rgba(0, 122, 255, .12);
  --on-tint: #FFFFFF;
  --chrome: rgba(255, 255, 255, .72);

  /* accents, one per tile colour */
  --green: #34C759;
  --blue: #007AFF;
  --purple: #AF52DE;
  --grey: #8E8E93;
  --graphite: #48484A;
  --orange: #FF9500;
  --yellow: #FFCC00;
  --red: #FF3B30;

  /* system fills */
  --fill: rgba(120, 120, 128, .12);
  --fill-strong: rgba(120, 120, 128, .2);
  --press-pill: rgba(120, 120, 128, .16);
  --shadow-float: 0 8px 24px rgba(0, 0, 0, .12);


  /* Apple type scale (Dynamic Type at the default Large setting).
     Sizes, line heights and tracking straight from the HIG; every
     font-size in this file must be one of these. */
  --font-sys: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --fs-large-title: 34px; --lh-large-title: 41px; --ls-large-title: 0.37px;
  --fs-title1: 28px; --lh-title1: 34px; --ls-title1: 0.36px;
  --fs-title2: 22px; --lh-title2: 28px; --ls-title2: 0.35px;
  --fs-title3: 20px; --lh-title3: 25px; --ls-title3: 0.38px;
  --fs-headline: 17px; --lh-headline: 22px; --ls-headline: -0.41px;
  --fs-body: 17px; --lh-body: 22px; --ls-body: -0.41px;
  --fs-callout: 16px; --lh-callout: 21px; --ls-callout: -0.32px;
  --fs-subhead: 15px; --lh-subhead: 20px; --ls-subhead: -0.24px;
  --fs-footnote: 13px; --lh-footnote: 18px; --ls-footnote: -0.08px;
  --fs-caption1: 12px; --lh-caption1: 16px; --ls-caption1: 0;
  --fs-caption2: 11px; --lh-caption2: 13px; --ls-caption2: 0.07px;
  --fs-tab: 10px;   /* the one exception: tab bar labels, as on iOS */

  /* geometry */
  --r-group: 12px;
  --r-tile: 7px;
  --row-min: 48px;
  --gutter: 16px;
  /* control heights; the larger text sizes nudge these up so the things
     you press grow with the things you read, never below the 44pt floor */
  --ctl: 44px;
  --ctl-sm: 36px;
  --ctl-lg: 48px;

  /* compat aliases: older component css reads these names */
  --bg-elevated: var(--card);
  --bg-secondary: var(--bg);
  --bar: var(--chrome);
  --bar-border: var(--sep);
  --separator: var(--sep);
  --tab-inactive: var(--label-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --card: #1C1C1E;
    --card-pressed: #2C2C2E;
    --label: #FFFFFF;
    --label-2: rgba(235, 235, 245, .60);
    --label-3: rgba(235, 235, 245, .30);
    --sep: rgba(84, 84, 88, .65);
    --tint: #0A84FF;
    --tint-press: #409CFF;
    --tint-text: #0A84FF;
    --tint-fill: #0A84FF;
    --label-aa: rgba(235, 235, 245, .75);
    --tint-soft: rgba(10, 132, 255, .16);
    --chrome: rgba(28, 28, 30, .72);
    --green: #30D158;
    --blue: #0A84FF;
    --purple: #BF5AF2;
    --graphite: #3A3A3C;
    --orange: #FF9F0A;
    --yellow: #FFD60A;
    --red: #FF453A;
    --fill: rgba(120, 120, 128, .24);
    --fill-strong: rgba(120, 120, 128, .36);
    --press-pill: rgba(120, 120, 128, .29);
    color-scheme: dark;
  }
}

/* The in-app theme picker must beat the OS in both directions, and the
   styleguide borrows the same palettes for its side by side panels. */
:root[data-theme="light"],
.ios-scheme-light {
  --bg: #F2F2F7;
  --card: #FFFFFF;
  --card-pressed: #D1D1D6;
  --label: #000000;
  --label-2: rgba(60, 60, 67, .75);
  --label-3: rgba(60, 60, 67, .30);
  --sep: rgba(60, 60, 67, .29);
  --tint: #007AFF;
  --tint-press: #0062CC;
  --tint-text: #0066CC;
  --tint-fill: #0066CC;
  --label-aa: rgba(60, 60, 67, .78);
  --tint-soft: rgba(0, 122, 255, .12);
  --chrome: rgba(255, 255, 255, .72);
  --green: #34C759;
  --blue: #007AFF;
  --purple: #AF52DE;
  --grey: #8E8E93;
  --graphite: #48484A;
  --orange: #FF9500;
  --yellow: #FFCC00;
  --red: #FF3B30;
  --fill: rgba(120, 120, 128, .12);
  --fill-strong: rgba(120, 120, 128, .2);
  --press-pill: rgba(120, 120, 128, .16);
  color-scheme: light;
}
:root[data-theme="dark"],
.ios-scheme-dark {
  --bg: #000000;
  --card: #1C1C1E;
  --card-pressed: #2C2C2E;
  --label: #FFFFFF;
  --label-2: rgba(235, 235, 245, .60);
  --label-3: rgba(235, 235, 245, .30);
  --sep: rgba(84, 84, 88, .65);
  --tint: #0A84FF;
  --tint-press: #409CFF;
    --tint-text: #0A84FF;
    --tint-fill: #0A84FF;
    --label-aa: rgba(235, 235, 245, .75);
  --tint-soft: rgba(10, 132, 255, .16);
  --chrome: rgba(28, 28, 30, .72);
  --green: #30D158;
  --blue: #0A84FF;
  --purple: #BF5AF2;
  --grey: #8E8E93;
  --graphite: #3A3A3C;
  --orange: #FF9F0A;
  --yellow: #FFD60A;
  --red: #FF453A;
  --fill: rgba(120, 120, 128, .24);
  --fill-strong: rgba(120, 120, 128, .36);
  --press-pill: rgba(120, 120, 128, .29);
  color-scheme: dark;
}

/* ------------------------------------------------------------ globals */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-sys);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  /* content must clear the floating tab bar */
  padding-bottom: 88px;
}
img { max-width: 100%; }
/* inline text links use the darker text tint so small type keeps AA contrast */
a { color: var(--tint-text, var(--tint)); text-decoration: none; }
button {
  font-family: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
  border-radius: 6px;
}
/* one centred column, capped at 640px */
.ios-page { max-width: 640px; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ------------------------------------------------------- 1. header */
.ios-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  padding: calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;
}
.ios-header-row {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}
.ios-avatar {
  width: var(--ctl);
  height: var(--ctl);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fill-strong);
  color: var(--label);
  font-size: var(--fs-title3);
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  flex: none;
}
.ios-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ios-avatar svg { width: 22px; height: 22px; color: var(--label-2); }
.ios-avatar:active { background: var(--card-pressed); }
.ios-header-actions { display: flex; gap: 10px; margin-left: auto; }
.ios-glass-btn {
  width: var(--ctl);
  height: var(--ctl);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fill);
  border: 0.5px solid var(--sep);
  color: var(--label);
}
.ios-glass-btn svg { width: 22px; height: 22px; }
.ios-glass-btn:active { background: var(--card-pressed); }

/* ------------------------------------------------ 2. section title */
.ios-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* the github app sizes its section names (My Work, Favorites) like
     headline text, not like page titles */
  font-size: var(--fs-headline);
  font-weight: 600;
  letter-spacing: var(--ls-headline);
  line-height: var(--lh-headline);
  color: var(--label);
  margin: 26px 0 8px;
  padding-left: var(--gutter);
}
.ios-overflow {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--label-2);
  margin-right: var(--gutter);
}
/* the glyph stays 24px per the spec; the thing you aim at is 44px */
.ios-overflow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.ios-overflow svg { width: 24px; height: 24px; }

/* -------------------------------------------------------- 3. group */
.ios-group {
  background: var(--card);
  border-radius: var(--r-group);
  margin: 0 var(--gutter) 32px;
  overflow: hidden;
}
/* small footnote under a group, outside the card */
.ios-group-foot {
  font-size: var(--fs-footnote);
  letter-spacing: var(--ls-footnote);
  color: var(--label-2);
  margin: -24px var(--gutter) 32px;
  padding: 8px 4px 0;
  line-height: 1.35;
}

/* ---------------------------------------------------------- 4. row */
.ios-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--row-min);
  padding: 8px 14px;
  gap: 12px;
  color: var(--label);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  text-align: left;
  background: var(--card);
  /* a <button> is a form control: without this its row shrink-wraps */
  width: 100%;
  border: 0;
}
.ios-row:active { background: var(--card-pressed); }
/* separator starts at the label, never the card edge:
   14px pad + 32px tile + 12px gap = 58px when a tile leads the row */
.ios-row + .ios-row::before,
.ios-row + details > .ios-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 58px;
  right: 0;
  height: 0.5px;
  background: var(--sep);
}
/* rows with no leading tile: the label starts at the padding */
.ios-row--plain + .ios-row--plain::before { left: 14px; }
.ios-row-body { flex: 1; min-width: 0; }
.ios-row-title {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-row-sub {
  display: block;
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  letter-spacing: var(--ls-footnote);
  color: var(--label-2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ios-row-value {
  flex: none;
  margin-left: auto;
  color: var(--label-2);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  font-variant-numeric: tabular-nums;
}
.ios-chevron {
  flex: none;
  margin-left: auto;
  display: flex;
  color: var(--label-3);
}
.ios-row-value + .ios-chevron { margin-left: 8px; }
.ios-chevron svg { width: 16px; height: 16px; display: block; }

/* --------------------------------------------------------- 5. tile */
.ios-tile {
  width: 32px;
  height: 32px;
  border-radius: var(--r-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-tint);
  flex: none;
}
.ios-tile svg { width: 18px; height: 18px; }
.ios-tile--green { background: var(--green); }
.ios-tile--blue { background: var(--blue); }
.ios-tile--purple { background: var(--purple); }
.ios-tile--grey { background: var(--grey); }
.ios-tile--graphite { background: var(--graphite); }
.ios-tile--orange { background: var(--orange); }
.ios-tile--yellow { background: var(--yellow); }
.ios-tile--red { background: var(--red); }
.ios-tile--tint { background: var(--tint); }

/* ------------------------------------------------------ 6. tab bar */
.ios-tabbar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  height: 56px;
  max-width: 616px;
  margin: 0 auto;
  border-radius: 28px;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 0.5px solid var(--sep);
  box-shadow: var(--shadow-float);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
}
.ios-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 62px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  color: var(--label-aa);
  font-size: var(--fs-tab);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
}
.ios-tab svg { width: 24px; height: 24px; }
.ios-tab[aria-current="page"],
.ios-tab.on {
  background: var(--press-pill);
  /* the text tint: a 10px label needs the AA-passing blue */
  color: var(--tint-text);
}
/* static variant so the styleguide can show the bar in the flow */
.ios-tabbar--demo { position: static; margin: 8px auto; }

/* =====================================================================
   ios.css, part 2 of 3: ON Camp app styles.
   The old styles.css folded in below the core and re-pointed at the
   core tokens above. Colour comes only from the core token blocks;
   this section keeps the app's own layout tokens (radii, gaps, easing)
   in the app-layout block right here.
   ===================================================================== */

  /* app-layout tokens (non-colour) ------------------------------------- */
  :root{
    --r:16px; --r-sm:12px; --r-xs:10px;
    --row-h:64px; --gap-s:6px; --gap-m:10px; --gap-l:12px;
    --pad-card:14px 16px; --pad-row:12px 14px;
    --sa-top:env(safe-area-inset-top,0px); --sa-bottom:env(safe-area-inset-bottom,0px);
    --ease:cubic-bezier(.32,.72,0,1);
    --tab-h:56px; --nav-h:44px;
  }

  /* base ---------------------------------------------------------------- */
  button{-webkit-user-select:none;user-select:none}
  .wrap{max-width:640px;margin:0 auto;padding:0 16px}
  .tnum{font-variant-numeric:tabular-nums}
  #view-park{min-height:100dvh}
  .ghostpark{display:none}
  /* .wrap already pays the 16px side inset, so inset components inside it
     must not pay it twice */
  .wrap .ios-group{margin-left:0;margin-right:0}
  .wrap .ios-group-foot{margin-left:0;margin-right:0}
  .wrap .ios-section-title{padding-left:0}
  .wrap .ios-section-title .ios-overflow{margin-right:0}
  .ios-group .segmented{margin:8px}

  /* app header (iOS large title) --------------------------------------- */
  .appbar{padding:10px 16px 14px;max-width:640px;margin:0 auto}
  .eyebrow{font-size:var(--fs-footnote);font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
  .titlebar{display:flex;align-items:baseline;justify-content:space-between;gap:9px}
  .appbar h1{font-weight:700;font-size:var(--fs-large-title);line-height:var(--lh-large-title);letter-spacing:var(--ls-large-title);margin:2px 0 0}
  .ver{position:relative;appearance:none;border:0;background:none;cursor:pointer;font-family:var(--font-sys);font-weight:600;font-size:var(--fs-subhead);
    color:var(--tint-text);white-space:nowrap;padding:6px 4px;margin:0}
  /* Fitts: the label stays small and quiet, the thing you aim at does not. */
  .ver::after{content:"";position:absolute;top:50%;left:-6px;right:-6px;height:44px;transform:translateY(-50%)}

  /* park page back bar: same chrome as the header, no border ------------ */
  .backbar{position:sticky;top:0;z-index:20;background:var(--chrome);
    -webkit-backdrop-filter:saturate(180%) blur(24px);backdrop-filter:saturate(180%) blur(24px);
    padding:calc(11px + env(safe-area-inset-top)) 16px 11px}
  .backbar .inner{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m)}
  .backbtn{appearance:none;border:0;background:none;cursor:pointer;color:var(--tint);font-weight:400;font-size:var(--fs-body);
    display:inline-flex;align-items:center;gap:3px;padding:8px 14px;margin:-8px -14px;transition:opacity .14s}
  .backbtn:active{opacity:.4}
  .backbtn svg{flex:none}
  .backbar .bp{font-size:var(--fs-footnote);font-weight:500;color:var(--label-2);font-variant-numeric:tabular-nums}

  /* global search + results -------------------------------------------- */
  .gsearch{display:flex;align-items:center;gap:8px;background:var(--fill-strong);border-radius:10px;
    padding:0 10px;height:38px;margin:2px 0 12px}
  .gsearch svg{flex:none;color:var(--label-2);width:17px;height:17px}
  .gsearch input{border:0;background:none;outline:none;font-family:var(--font-sys);font-size:var(--fs-body);width:100%;color:var(--label)}
  .gsearch input::placeholder{color:var(--label-2)}
  .gsearch .gclear{appearance:none;border:0;background:none;color:var(--label-2);cursor:pointer;font-size:var(--fs-callout);
    line-height:1;padding:2px 4px;display:none}
  .gsearch.has .gclear{display:block}
  .gresults{margin:0 0 14px}
  .gresult{width:100%;text-align:left;appearance:none;background:var(--card);border:0;
    border-radius:10px;padding:11px 14px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:12px;
    transition:background .12s,transform .12s}
  .gresult:active{background:var(--fill);transform:scale(.99)}
  .gresult .tag{flex:0 0 46px;width:46px;height:22px;min-height:22px;max-height:22px;display:flex;align-items:center;
    justify-content:center;align-self:center;margin:auto 0;font-size:11px;font-weight:700;letter-spacing:.03em;
    text-transform:uppercase;line-height:1;padding:0;overflow:hidden;color:var(--on-tint);background:var(--tint);border-radius:99px}
  .gresult .tag.cg{background:var(--tint)} .gresult .tag.site{background:var(--orange)} .gresult .tag.trail{background:var(--purple)}
  .gresult .grow{flex:1;min-width:0}
  .gresult .gt{display:block;font-weight:400;font-size:var(--fs-body);letter-spacing:var(--ls-body);color:var(--label)}
  .gresult .gs{display:block;font-size:var(--fs-footnote);color:var(--label-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gnone{color:var(--label-2);font-size:var(--fs-subhead);padding:20px 8px;text-align:center;background:var(--card);border-radius:10px}

  /* filters, chips, pills, segmented ----------------------------------- */
  .filters{display:flex;flex-wrap:wrap;gap:8px;margin:var(--gap-l) 0;justify-content:flex-start}
  .fchip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;appearance:none;cursor:pointer;
    border:0;background:var(--fill-strong);color:var(--label);font-family:var(--font-sys);font-weight:500;font-size:var(--fs-subhead);
    border-radius:18px;padding:8px 15px;min-height:var(--ctl-sm);transition:background .12s,transform .1s}
  .fchip.on{background:var(--tint-fill);color:var(--on-tint)}
  .fchip:active{transform:scale(.95)}
  .fchip[disabled]{opacity:.4;cursor:default}
  a.fchip{text-decoration:none}
  .filters .fchip{flex:0 1 auto;min-width:0;justify-content:center;padding:9px 14px;font-size:var(--fs-footnote)}
  .fchip .fct{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
  .fchip svg{flex:none}
  /* extend to a 44pt effective tap target */
  .fchip::after{content:"";position:absolute;left:-2px;right:-2px;top:-7px;bottom:-7px}
  /* appearance segmented control (light / dark / system) */
  .segmented{display:flex;background:var(--fill-strong);border-radius:9px;padding:2px;gap:2px}
  /* Fitts: a segment is wide but was only 33px tall, a thin thing to hit while
     walking a campground. Flex centring holds the label while the segment grows. */
  .seg-opt{flex:1;display:flex;align-items:center;justify-content:center;min-height:var(--ctl);
    text-align:center;padding:6px 8px;border-radius:7px;font-size:var(--fs-footnote);font-weight:500;
    color:var(--label);cursor:pointer;transition:background .15s}
  .seg-opt.on{background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}

  /* park progress: a real count against a real ceiling, never padded --- */
  .pprog{background:var(--card);border-radius:var(--r-sm);padding:13px 16px 15px;margin:8px 0 4px}
  .pprog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--fs-subhead);color:var(--label)}
  .pprog-n{font-size:var(--fs-footnote);color:var(--label-2)}
  .pprog-bar{display:block;margin-top:10px;height:6px;border-radius:3px;background:var(--fill-strong);overflow:hidden}
  .pprog-fill{display:block;height:100%;border-radius:3px;background:var(--tint);transition:width .4s var(--ease)}

  /* option rows (sort / group choosers) -------------------------------- */
  .rrow{display:flex;justify-content:space-between;align-items:center;width:100%;appearance:none;cursor:pointer;border:0;
    background:var(--card);color:var(--label);font-family:var(--font-sys);font-weight:400;font-size:var(--fs-body);
    border-radius:var(--r-sm);padding:12px 16px;margin-bottom:8px;gap:10px;letter-spacing:var(--ls-body)}
  .rrow .rcount{color:var(--label-2);font-weight:400;font-size:var(--fs-subhead)}
  .rrow.on{color:var(--tint);box-shadow:inset 0 0 0 2px var(--tint)}
  .rrow:active{background:var(--fill)}
  #sortRows .rcount{font-size:var(--fs-footnote);opacity:.62}

  /* parks list cards ---------------------------------------------------- */
  .park-card{position:relative;display:block;width:100%;text-align:left;appearance:none;border:0;background:var(--card);
    border-radius:var(--r);padding:16px;margin-bottom:var(--gap-m);cursor:pointer;transition:transform .14s ease}
  .park-card:active{transform:scale(.982)}
  .pc-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-l)}
  .pc-name{font-weight:700;font-size:var(--fs-title3);letter-spacing:var(--ls-title3);color:var(--label)}
  .pc-pct{background:var(--tint-soft);color:var(--tint);padding:3px 10px;border-radius:99px;font-weight:700;
    font-size:var(--fs-footnote);font-variant-numeric:tabular-nums}
  .pc-region{color:var(--label-2);font-size:var(--fs-footnote);margin-top:2px}
  .pc-meta{color:var(--label-2);font-size:var(--fs-footnote);margin-top:9px;display:flex;gap:var(--gap-s);flex-wrap:wrap}
  .pc-bar{height:6px;border-radius:99px;background:var(--fill-strong);overflow:hidden;margin-top:12px}
  .pc-bar i{display:block;height:100%;width:0;background:var(--tint);border-radius:99px;transition:width .3s}
  .pc-pinb{position:absolute;top:-11px;right:-7px;width:26px;height:26px;border-radius:50%;background:var(--tint);
    color:var(--on-tint);border:2px solid var(--card);display:flex;align-items:center;justify-content:center;pointer-events:none}
  .pc-pinb svg{width:13px;height:13px;fill:currentColor}

  /* park header + about ------------------------------------------------- */
  .park-head{padding:16px 0 2px}
  .titlerow{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .titlerow h2{min-width:0}
  .park-head h2{font-weight:700;font-size:var(--fs-title1);letter-spacing:var(--ls-title1);margin:0;line-height:var(--lh-title1)}
  .park-head .region{color:var(--label-2);font-size:var(--fs-footnote);margin-top:3px}
  .about-toggle{width:100%;min-height:var(--row-h);margin-top:14px;appearance:none;cursor:pointer;background:var(--card);
    border:0;border-radius:var(--r-sm);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
    font-weight:600;font-size:var(--fs-headline);letter-spacing:var(--ls-headline);color:var(--label)}
  .about-toggle .chev{transition:transform .22s;color:var(--label-3)}
  .about-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .about-toggle[aria-expanded="true"]{border-radius:var(--r-sm) var(--r-sm) 0 0}
  .about-body{background:var(--card);border-radius:0 0 var(--r-sm) var(--r-sm);margin-top:0;padding:0 16px 16px}
  .about-body::before{content:"";display:block;height:.5px;background:var(--sep);margin:0 -16px 2px}
  .about-body .blurb{font-size:var(--fs-footnote);color:var(--label);margin:12px 0 0}
  .about-body .fmz+.fmz,.fmz+a.fmz{margin-left:8px}
  .facils{display:flex;flex-wrap:wrap;gap:var(--gap-s);margin-top:14px}
  .facil{font-size:var(--fs-footnote);font-weight:500;color:var(--label);background:var(--fill-strong);border-radius:99px;
    padding:7px 12px;display:inline-flex;align-items:center;gap:var(--gap-s)}
  .facil svg{color:var(--tint);flex:none}
  .fishing{margin-top:12px;font-size:var(--fs-footnote);color:var(--label-2)}
  .fishing b{color:var(--label);font-weight:600}
  .fmz{display:inline-flex;align-items:center;gap:var(--gap-s);margin-top:12px;font-size:var(--fs-footnote);font-weight:600;
    color:var(--tint);background:var(--fill-strong);border-radius:99px;padding:7px 12px;text-decoration:none;cursor:pointer}
  .fmz svg{flex:none}
  .official{display:inline-block;background:var(--tint-soft);color:var(--tint);padding:10px 14px;border-radius:99px;font-weight:700}

  /* small uppercase group header (park pages, dense stacks) ------------- */
  .seclabel{font-size:var(--fs-footnote);font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2);
    margin:22px 2px 10px;display:flex;align-items:center;gap:var(--gap-m)}

  /* grouped lists (legacy Settings style), kept for dense stacks -------- */
  .group{margin:18px 16px 8px}
  .wrap .group{margin-left:0;margin-right:0}
  .group-header{padding:0 4px 7px;font-size:var(--fs-footnote);font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
  .group-footer{padding:7px 4px 0;font-size:var(--fs-footnote);line-height:1.35;color:var(--label-2)}
  .list{background:var(--card);border-radius:var(--r-sm);overflow:hidden}
  .cell{position:relative;display:flex;align-items:center;gap:var(--gap-l);min-height:44px;padding:11px 16px;
    background:var(--card);color:var(--label);text-align:left;transition:background .12s}
  a.cell,button.cell,summary.cell{width:100%;box-sizing:border-box}
  button.cell{-webkit-appearance:none;appearance:none;border:0;background:var(--card);font:inherit;color:inherit;cursor:pointer}
  summary.cell{list-style:none;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
  summary.cell::-webkit-details-marker{display:none}
  .list>*+.cell::before,
  .list>*+*>.cell::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
  .cell.tap:active{background:var(--fill)}
  .cell-body{flex:1 1 auto;min-width:0}
  .cell-title{display:block;font-size:var(--fs-body);letter-spacing:var(--ls-body);color:var(--label)}
  .cell-title.destructive,.ios-row-title.destructive{color:var(--red)}
  /* a row waiting for its second tap says so in red, not just in words */
  .cell.armed .cell-title,.ios-row.armed .ios-row-title{color:var(--red);font-weight:600}
  .cell-sub{display:block;font-size:var(--fs-footnote);color:var(--label-2);margin-top:1px;line-height:var(--lh-footnote)}
  .cell-value{flex:none;margin-left:auto;font-size:var(--fs-callout);color:var(--label-2)}
  .chevron{flex:none;margin-left:auto;color:var(--label-3)}
  .cell-value+.chevron{margin-left:8px}
  .chevron svg{display:block;width:14px;height:20px}
  /* disclosure rows built from <details> around an .ios-row summary ----- */
  summary.ios-row{list-style:none}
  summary.ios-row::-webkit-details-marker{display:none}
  .cell-details>summary .ios-chevron svg{transition:transform .22s}
  .cell-details[open]>summary .ios-chevron svg{transform:rotate(180deg)}
  .cell-details+.cell-details>.ios-row::before{content:"";position:absolute;top:0;left:14px;right:0;height:.5px;background:var(--sep)}
  .cell-details .cell-detail-body{padding:0 16px 16px;font-size:var(--fs-footnote);line-height:1.65;color:var(--label)}
  .cell-details .cell-detail-body p{margin:10px 0 0}

  /* campgrounds --------------------------------------------------------- */
  .cg{background:var(--card);border-radius:var(--r);margin-bottom:var(--gap-m);overflow:hidden;scroll-margin-top:70px}
  .cg.pulse{animation:pulse 1.1s ease}
  .cg-row{width:100%;appearance:none;border:0;background:none;cursor:pointer;text-align:left;display:flex;gap:var(--gap-l);
    align-items:center;padding:var(--pad-card);min-height:var(--row-h)}
  .cg-left{flex:1;min-width:0}
  .cg-name{font-weight:600;font-size:var(--fs-headline);letter-spacing:var(--ls-headline);color:var(--label)}
  .cg-sub{color:var(--label-2);font-size:var(--fs-footnote);font-weight:400;margin-top:2px;line-height:var(--lh-footnote)}
  .cg-right{flex:none;display:flex;align-items:center;gap:var(--gap-l)}
  .cg-prog{width:78px}
  .cg-prog .bar{height:6px;border-radius:99px;background:var(--fill-strong);overflow:hidden}
  .cg-prog .bar i{display:block;height:100%;width:0;background:var(--tint);border-radius:99px;transition:width .3s}
  .cg-prog .lbl{font-size:var(--fs-caption2);font-weight:700;color:var(--label-2);text-align:center;margin-top:4px;font-variant-numeric:tabular-nums}
  .chev{color:var(--label-3);transition:transform .22s;flex:none}
  .cg.open .chev{transform:rotate(180deg)}
  .cg-body{display:none;padding:2px 16px 16px}
  .cg.open .cg-body{display:block}
  .cg-body-head{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m);padding:12px 0 2px;
    border-top:.5px solid var(--sep);margin-top:4px}
  .cg-desc{font-size:var(--fs-caption1);color:var(--label-2);flex:1}
  .cg-rate{appearance:none;cursor:pointer;font-size:var(--fs-footnote);font-weight:600;border:0;background:var(--tint-soft);color:var(--tint);
    border-radius:99px;padding:10px 16px;min-height:var(--ctl);white-space:nowrap;transition:transform .1s,filter .15s}
  .cg-rate:active{transform:scale(.96)}
  .cg-rate.rated{color:var(--on-tint);border-color:transparent}

  /* site grid (score palette set inline by JS) ------------------------- */
  .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap-m);margin-top:14px}
  .site{position:relative;aspect-ratio:1;border-radius:var(--r-sm);border:0;background:var(--fill-strong);
    font-weight:600;font-size:var(--fs-subhead);color:var(--label);cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:transform .12s;font-variant-numeric:tabular-nums}
  .site:active{transform:scale(.92)}
  .site.rated{color:var(--on-tint);border-color:transparent}
  .site .badge{position:absolute;bottom:2px;right:4px;font-size:11px;font-weight:800;opacity:.95}
  .site .star{position:absolute;top:2px;left:4px;font-size:9px;color:var(--orange);line-height:1}
  .site.rated .star{color:var(--yellow)}
  .site .nstar{position:absolute;top:5px;right:7px;font-size:10px;color:var(--label-2);line-height:1}
  .site .nstar.both,.trail .nstar.both{color:var(--orange)}
  .site.rated .nstar{color:var(--on-tint)}
  .site .medal{position:absolute;top:5px;right:6px;width:13px;height:13px;color:var(--label-2);display:block}
  .site.rated .medal{color:var(--on-tint)}
  .site.wanted{box-shadow:inset 0 0 0 2px var(--orange)}
  .site.marked{font-weight:800}
  .site.marked:not(.rated){color:var(--label)}
  .site.hidden{display:none}
  .cg.filtered-empty{display:none}
  .cg.open .grid{animation:viewIn .18s ease}

  /* trails -------------------------------------------------------------- */
  .trail{position:relative;width:100%;text-align:left;appearance:none;border:0;background:var(--card);border-radius:var(--r);
    padding:var(--pad-card);margin-bottom:var(--gap-m);cursor:pointer;display:flex;align-items:center;gap:var(--gap-l);
    min-height:var(--row-h);transition:transform .12s}
  .trail:active{transform:scale(.99)}
  .tr-left{flex:1;min-width:0}
  .tr-name{font-weight:600;font-size:var(--fs-callout);letter-spacing:var(--ls-callout);color:var(--label)}
  .tr-meta{color:var(--label-2);font-size:var(--fs-footnote);font-weight:400;margin-top:2px}
  .tr-detail{font-size:var(--fs-footnote);color:var(--label-2);margin-top:5px;line-height:1.4}
  .trail .nstar{position:absolute;top:6px;right:9px;font-size:10px;color:var(--label-2);line-height:1}
  .trail .medal{position:absolute;top:5px;right:7px;width:13px;height:13px;color:var(--label-2);display:block}
  .tr-rate{flex:none;font-weight:600;font-size:var(--fs-footnote);border:0;border-radius:99px;padding:10px 16px;background:var(--tint-soft);
    color:var(--tint);min-width:54px;text-align:center;transition:transform .1s}
  .tr-rate:active{transform:scale(.96)}
  .tr-rate.rated{color:var(--on-tint);border-color:transparent}

  /* controls (park search + filter buttons) ---------------------------- */
  .controls{display:flex;gap:var(--gap-m);align-items:center;margin:16px 0 12px}
  .search{flex:1;display:flex;align-items:center;gap:var(--gap-m);background:var(--fill-strong);border:0;border-radius:10px;
    padding:0 12px;height:38px}
  .search input{border:0;background:none;outline:none;font-family:var(--font-sys);font-size:var(--fs-body);width:100%;color:var(--label)}
  .search input::placeholder{color:var(--label-2)}
  .search svg{flex:none;color:var(--label-2)}
  .fbtn{appearance:none;cursor:pointer;font-size:var(--fs-footnote);font-weight:600;border:0;background:var(--fill-strong);color:var(--label);
    border-radius:99px;padding:10px 16px;min-height:var(--ctl);transition:.15s;white-space:nowrap}
  .fbtn[aria-pressed="true"]{background:var(--tint);color:var(--on-tint)}
  .fbtn.want[aria-pressed="true"]{background:var(--orange);color:var(--on-tint)}

  /* stats, wishlist, top sites ----------------------------------------- */
  .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-m)}
  .stat{background:var(--card);border-radius:var(--r-sm);padding:14px 12px;min-height:var(--row-h);
    display:flex;flex-direction:column;justify-content:center}
  .stat .v{font-weight:700;font-size:var(--fs-title2);line-height:1;font-variant-numeric:tabular-nums;color:var(--label)}
  .stat .l{font-size:var(--fs-caption2);color:var(--label-2);font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-top:6px}
  .want-item{background:var(--card);border-radius:var(--r-sm);padding:var(--pad-card);margin-bottom:var(--gap-m);
    cursor:pointer;min-height:var(--row-h);display:flex;flex-direction:column;justify-content:center}
  .want-item .h{display:flex;align-items:center;gap:var(--gap-m)}
  .want-item .h b{font-weight:700;font-size:var(--fs-subhead)}
  .want-item .wstar{color:var(--orange);font-size:var(--fs-subhead);line-height:1}
  .want-item .h .where{font-size:var(--fs-caption1);color:var(--label-2)}
  .want-item .h .val{margin-left:auto;font-weight:700;font-size:var(--fs-caption1);padding:2px 9px;border-radius:99px;color:var(--on-tint);font-variant-numeric:tabular-nums}
  .want-item .h .tr-rate{margin-left:auto;font-size:var(--fs-footnote)}
  .want-item p{margin:8px 0 0;font-size:var(--fs-footnote);color:var(--label-2);white-space:pre-wrap}
  .want-item p:empty{display:none}
  .want-item .noreason{color:var(--orange);font-weight:700}
  .want-thumbs{display:flex;gap:var(--gap-s);margin-top:9px;overflow-x:auto}
  .want-thumbs:empty{display:none;margin:0}
  .want-thumbs img{height:50px;width:50px;object-fit:cover;border-radius:var(--r-xs);flex:none}
  .rank{list-style:none;padding:0;margin:6px 0 0;background:var(--card);border-radius:var(--r-sm);overflow:hidden}
  .rank li{position:relative;display:flex;align-items:center;gap:var(--gap-l);min-height:var(--row-h);padding:0 16px;cursor:pointer}
  .rank li+li::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
  .rank .sw{width:34px;height:34px;border-radius:var(--r-xs);flex:none;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:var(--fs-caption1);color:var(--on-tint);font-variant-numeric:tabular-nums}
  .rank .who{font-weight:600;font-size:var(--fs-subhead)}
  .rank .whr{font-size:var(--fs-caption1);color:var(--label-2)}
  .rank .val{margin-left:auto;font-weight:700;font-size:var(--fs-title3)}
  .rank li .tr-rate{margin-left:auto}
  .io{display:flex;gap:var(--gap-m);margin-top:22px}
  .io button{flex:1;cursor:pointer;font-weight:600;font-size:var(--fs-footnote);border:0;background:var(--card);color:var(--label);
    border-radius:var(--r-sm);padding:14px;min-height:var(--ctl);transition:.15s}
  .io button:active{background:var(--fill)}
  .empty{color:var(--label-2);font-size:var(--fs-subhead);padding:22px 10px;text-align:center}

  /* sheets + form controls --------------------------------------------- */
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s var(--ease);z-index:50}
  .backdrop.on{opacity:1;pointer-events:auto}
  .sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;transform:translateY(102%);width:min(540px,100%);
    background:var(--bg);z-index:60;border-radius:12px 12px 0 0;padding:8px 16px calc(24px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 0 var(--sep);transition:transform .34s var(--ease);max-height:92vh;overflow-y:auto;overflow-x:hidden}
  .sheet.on{transform:translateY(0)}
  /* the card stage clips the pane as it is dragged, flung off one edge and slid
     in from the other, so nothing overflows and no scrollbar ever pops */
  .card-stage{overflow:hidden}
  /* swipe between sites while rating: a fixed nav bar (position + chevrons) over
     a pane that cross-slides as you swipe or tap through the campground's sites */
  .site-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-m);margin:0 0 6px}
  .site-nav-btn{appearance:none;border:0;background:var(--fill-strong);color:var(--tint);cursor:pointer;
    width:var(--ctl);height:var(--ctl);min-width:var(--ctl);border-radius:99px;display:flex;align-items:center;justify-content:center;
    transition:transform .1s,opacity .15s,background .15s}
  .site-nav-btn:active{transform:scale(.9)}
  .site-nav-btn:disabled{opacity:.3;cursor:default}
  .site-nav-count{font-size:var(--fs-footnote);font-weight:600;color:var(--label-2);letter-spacing:.4px}
  .sheet-pane{will-change:transform;touch-action:pan-y}
  /* the "add a missing site" tile at the end of a campground grid */
  .site.add-site{background:transparent;box-shadow:inset 0 0 0 2px var(--sep);color:var(--tint);font-weight:400;font-size:var(--fs-title2);line-height:1}
  .site.add-site:active{transform:scale(.9)}
  .grabber{width:36px;height:5px;border-radius:3px;background:var(--label-3);margin:8px auto 16px}
  .sheet a{color:var(--tint)}
  .sheet .kind,.kind{font-size:var(--fs-footnote);font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
  .sheet .d-where{color:var(--tint);font-weight:600;font-size:var(--fs-footnote);letter-spacing:var(--ls-footnote);margin-top:2px}
  .sheet h2.d-title{font-weight:700;font-size:var(--fs-title1);margin:3px 0 2px;letter-spacing:var(--ls-title1);line-height:var(--lh-title1)}
  .sheet .ctx{font-size:var(--fs-footnote);color:var(--label-2);margin-bottom:20px}
  .fld{display:flex;align-items:center;gap:var(--gap-m);font-size:var(--fs-footnote);font-weight:400;color:var(--label-2);
    margin:18px 0 10px;text-transform:uppercase;letter-spacing:.4px}
  /* the rating row is the primary one-handed action: taller thumb targets, a
     bit more breathing room between them */
  .dots{display:flex;gap:6px;margin-bottom:var(--gap-m)}
  .dot{flex:1 1 0;min-width:0;min-height:calc(var(--ctl-lg) + 10px);border-radius:var(--r-sm);border:0;background:var(--fill-strong);cursor:pointer;font-weight:600;
    font-size:var(--fs-body);color:var(--label-2);display:flex;align-items:center;justify-content:center;transition:.12s}
  .dot:active{transform:scale(.88)}
  .dot.on{color:var(--on-tint);border-color:transparent}
  /* notes + photos collapse behind this by default so the card stays short and
     the rating row sits in the thumb zone; it opens on tap (or when the site
     already has a note or photo) */
  .extra-toggle{width:100%;cursor:pointer;font-weight:600;font-size:var(--fs-subhead);border:0;background:none;color:var(--tint);
    border-radius:var(--r-sm);padding:12px;min-height:var(--ctl);margin-top:10px}
  .extra-toggle:active{opacity:.6}
  #noteBlock[hidden]{display:none}
  /* the wishlist toggle wears the app tint, not orange-on-grey: orange text
     on the grey fill was 1.57:1 and white-on-orange 2.18:1, both far below AA */
  .want-btn{width:100%;cursor:pointer;font-weight:600;font-size:var(--fs-body);border:0;background:var(--tint-soft);color:var(--tint-text);
    border-radius:var(--r-sm);padding:14px;min-height:var(--ctl-lg);margin-bottom:0;transition:.15s}
  .want-btn[aria-pressed="true"]{background:var(--tint-fill);color:var(--on-tint)}
  textarea{width:100%;min-height:106px;resize:none;overflow:hidden;font-family:var(--font-sys);font-size:var(--fs-body);color:var(--label);
    background:var(--card);border:0;border-radius:var(--r-sm);padding:14px;outline:none}
  textarea:focus{box-shadow:inset 0 0 0 2px var(--tint)}
  .sheet-foot{display:flex;align-items:center;gap:var(--gap-m);margin-top:22px}
  .saved{font-size:var(--fs-caption2);font-weight:700;color:var(--on-tint);background:var(--tint);padding:5px 11px;border-radius:99px;opacity:0;transition:.2s}
  .btn-clear{position:relative;margin-left:auto;cursor:pointer;font-size:var(--fs-footnote);font-weight:600;color:var(--label-2);
    background:none;border:0;text-decoration:underline;text-underline-offset:3px}
  /* Fitts: the label stays small and quiet, the thing you aim at does not. */
  .btn-clear::after{content:"";position:absolute;top:50%;left:-12px;right:-12px;height:44px;transform:translateY(-50%)}
  .btn-done{cursor:pointer;font-size:var(--fs-body);font-weight:600;color:var(--on-tint);background:var(--tint);border:0;
    border-radius:var(--r-sm);padding:12px 24px;transition:transform .1s,background .15s}
  .btn-done:active{transform:scale(.97);background:var(--tint-press)}

  /* photos -------------------------------------------------------------- */
  .photo-actions{display:flex;gap:var(--gap-m)}
  .pa-btn{flex:1;min-height:var(--ctl-lg);display:flex;align-items:center;justify-content:center;gap:var(--gap-s);appearance:none;cursor:pointer;
    border:0;background:var(--fill-strong);color:var(--tint);font-family:var(--font-sys);font-weight:600;font-size:var(--fs-subhead);border-radius:var(--r-sm)}
  .pa-btn:active{transform:scale(.98)}
  .pa-btn:disabled{opacity:.5}
  .photos{display:flex;gap:var(--gap-m);overflow-x:auto;padding-bottom:4px;margin:var(--gap-m) 0 0}
  .photos:empty{display:none}
  .photo{position:relative;flex:none;width:78px;height:78px;border-radius:var(--r-sm);overflow:hidden;background:var(--fill)}
  .photo img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
  .photo .del{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;
    background:rgba(0,0,0,.55);color:var(--on-tint);font-size:13px;line-height:20px;padding:0}
  .addphoto{flex:none;width:78px;height:78px;border-radius:var(--r-sm);border:1.5px dashed var(--sep);background:var(--card);
    cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gap-s);color:var(--tint);font-size:var(--fs-caption2);font-weight:600}
  .addphoto:disabled{opacity:.5}
  .photo-note{font-size:var(--fs-caption2);color:var(--label-2);margin:10px 0 0}
  .lightbox{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:24px}
  .lightbox.on{display:flex}
  .lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-sm)}

  /* about copy on the More screen -------------------------------------- */
  .aboutbody{padding:0 4px}
  .aboutbody p{margin:1em 0;font-size:var(--fs-callout);line-height:1.5;color:var(--label)}
  .aboutbody p:first-child{margin-top:0}

  /* stats sheet detail -------------------------------------------------- */
  .statscard{background:var(--card);border-radius:var(--r);overflow:hidden}
  .statscard summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
    padding:var(--pad-card);font-weight:600;font-size:var(--fs-subhead);color:var(--label);-webkit-user-select:none;user-select:none;touch-action:manipulation}
  .statscard summary::-webkit-details-marker{display:none}
  .statscard[open] summary .chev{transform:rotate(180deg)}
  .statscard .chev{transition:transform .2s;color:var(--label-3)}
  .statsbody{padding:2px 16px 16px}
  .stat-empty{color:var(--label-2);font-size:var(--fs-footnote);padding:4px 0 8px}
  .stiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-m);margin-bottom:6px}
  .stile{background:var(--fill);border-radius:var(--r-sm);padding:10px 8px;text-align:center}
  .stile b{display:block;font-size:var(--fs-title2);letter-spacing:var(--ls-title2)}
  .stile b i{font-style:normal;font-size:var(--fs-caption1);color:var(--label-2);font-weight:700}
  .stile span{display:block;font-size:var(--fs-caption2);font-weight:600;color:var(--label-2);text-transform:uppercase;letter-spacing:.06em;margin-top:3px}
  .glabel{font-size:var(--fs-caption2);font-weight:700;color:var(--label-2);text-transform:uppercase;letter-spacing:.08em;margin:16px 0 8px}
  .dbar,.cgbar{display:flex;align-items:center;gap:10px;margin:6px 0}
  .dbar .dl{flex:0 0 14px;font-size:12px;font-weight:700;color:var(--label-2);text-align:right}
  .dtrack,.ctrack{flex:1;height:12px;background:var(--fill-strong);border-radius:99px;overflow:hidden}
  .dtrack i,.ctrack i{display:block;height:100%;border-radius:99px}
  .ctrack i{background:var(--tint)}
  .dbar .dc,.cgbar .cc{flex:0 0 34px;font-size:12px;font-weight:700;color:var(--label-2)}
  .cgbar .cn{flex:0 0 34%;font-size:var(--fs-footnote);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* grouped disclosure header used inside the stats sheet */
  .gsec{display:flex;align-items:center;justify-content:space-between;width:100%;appearance:none;cursor:pointer;font-family:var(--font-sys);
    background:var(--card);border:0;border-radius:var(--r-sm);color:var(--label);font-weight:600;font-size:var(--fs-subhead);
    padding:12px 14px;margin:4px 0 8px;text-align:left;min-height:46px}
  .gsec .gs-right{display:flex;align-items:center;gap:8px;color:var(--label-2)}
  .gsec .gs-count{font-size:var(--fs-caption1);font-weight:600}
  .gsec .chev{transition:transform .18s}
  .gsec.open .chev{transform:rotate(180deg)}
  .gsec:active{transform:scale(.985)}

  /* town chooser sheet -------------------------------------------------- */
  .townq{width:100%;font-size:var(--fs-body);font-family:var(--font-sys);color:var(--label);background:var(--card);border:0;
    border-radius:var(--r-sm);padding:12px 14px;outline:none;margin:2px 0 10px}
  .townlist{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:2px}
  #townSheet{height:min(88vh,760px);height:min(88dvh,760px);display:flex;flex-direction:column}
  #townSheet .townq{flex:none}
  #townSheet .townlist{flex:1;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}

  /* debug card + dedication + generic primary button ------------------- */
  .dbg{background:var(--card);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:14px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-footnote);line-height:1.6}
  .dbg .dhead{color:var(--tint);font-weight:700;margin-bottom:10px;letter-spacing:.02em}
  .dbg .drow{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:3px 0;border-bottom:.5px dashed var(--sep)}
  .dbg .drow:last-child{border-bottom:none}
  .dbg .dk{color:var(--label-2)}
  .dbg .dv{color:var(--label);font-weight:700;text-align:right;word-break:break-word;font-variant-numeric:tabular-nums}
  .dummybtn{display:block;width:100%;margin-top:12px;appearance:none;border:0;cursor:pointer;font-family:var(--font-sys);
    background:var(--tint);color:var(--on-tint);font-weight:600;font-size:var(--fs-footnote);border-radius:var(--r-sm);padding:12px;min-height:var(--ctl)}
  .dummybtn:active{transform:scale(.98)}
  .dedic{background:var(--card);border-radius:var(--r);padding:34px 24px;margin-bottom:14px;text-align:center;
    font-family:var(--font-sys);font-style:italic;color:var(--label)}
  .dedic .d-for{font-size:var(--fs-body);margin-bottom:16px}
  .dedic p{font-size:var(--fs-subhead);line-height:1.8;margin:0 auto 12px;max-width:28em}
  .dedic .d-sign{margin-top:18px;font-size:var(--fs-footnote)}
  .ded-close{min-height:var(--ctl)}

  /* footer, version lines, text links ---------------------------------- */
  .parkfoot{margin:26px 0 6px;text-align:center}
  .verline{font-size:var(--fs-footnote);color:var(--label-2);margin:7px 0;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .verline .vv{font-weight:700;color:var(--label);margin-right:9px;font-variant-numeric:tabular-nums}
  .resetlink{position:relative;appearance:none;border:0;background:none;padding:0;cursor:pointer;font-family:var(--font-sys);
    font-size:var(--fs-footnote);line-height:1.55;color:var(--red);text-decoration:underline;text-underline-offset:2px;font-weight:600}
  .resetlink.armed{font-weight:800}
  .resetlink::after{content:"";position:absolute;left:-16px;right:-16px;top:-12px;bottom:-12px}
  .footlink{position:relative;appearance:none;border:0;background:none;cursor:pointer;font-family:var(--font-sys);font-size:var(--fs-caption1);
    font-weight:600;color:var(--label-2);text-decoration:underline;padding:8px 12px;margin:-4px 0 2px}
  footer{max-width:640px;margin:0 auto;padding:20px 16px 40px;color:var(--label-2);font-size:var(--fs-footnote);line-height:1.55}
  footer a{color:var(--label-2);text-decoration:underline;text-underline-offset:2px}

  /* toast (dark translucent pill, both modes on purpose) ---------------- */
  .toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,90px);
    appearance:none;border:0;background:rgba(30,30,30,.92);color:var(--on-tint);padding:13px 20px;border-radius:14px;font-family:var(--font-sys);
    font-size:var(--fs-subhead);font-weight:500;z-index:70;opacity:0;max-width:92vw;text-align:center;cursor:pointer;
    -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:opacity .3s,transform .35s var(--ease)}
  .toast.on{opacity:1;transform:translate(-50%,0)}

  /* motion + page crossings -------------------------------------------- */
  @view-transition{navigation:auto}
  @keyframes vtOut{to{opacity:0;transform:scale(1.03)}}
  @keyframes vtIn{from{opacity:0;transform:scale(.94) translateY(14px)}}
  ::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vtIn .40s cubic-bezier(.32,1.14,.38,1) both}
  @keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  @keyframes parkIn{from{opacity:.55;transform:translateX(24%)}to{opacity:1;transform:none}}
  @keyframes viewOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(64px)}}
  @keyframes pulse{0%{box-shadow:0 0 0 2px var(--tint)}100%{box-shadow:0 0 0 2px transparent}}
  #view-park.view-anim{animation:parkIn .36s cubic-bezier(.32,1.08,.38,1)}
  .view-anim{animation:viewIn .28s cubic-bezier(.3,1.12,.4,1)}
  .view-out{animation:viewOut .15s ease forwards}
  /* iOS interactive swipe-back drag surface */
  #view-park.dragback{position:fixed;left:0;right:0;z-index:5;background:var(--bg);width:100%;max-width:none;margin:0;padding:0;
    min-height:100vh;border-radius:22px 0 0 22px;box-shadow:-2px 0 10px rgba(0,0,0,.15);touch-action:pan-y;will-change:transform}

  @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}@view-transition{navigation:none}}

  /* tab screens (the bar itself is the core .ios-tabbar) ---------------- */
  .tabscreen[hidden]{ display:none; }
  .screen-title{ font-size:var(--fs-large-title); line-height:var(--lh-large-title); font-weight:700; letter-spacing:var(--ls-large-title); margin:0;
    padding:8px 16px 6px; max-width:640px; margin-left:auto; margin-right:auto; box-sizing:border-box; }
  .screen-sub{ color:var(--label-2); font-size:var(--fs-subhead); margin:0; padding:0 16px 8px; max-width:640px;
    margin-left:auto; margin-right:auto; box-sizing:border-box; }

  /* ======================= map ======================= */
  #view-map{ position:relative; }
  .map-wrap{ position:relative; z-index:0; overflow:hidden; background:var(--bg-secondary);
    height:calc(100dvh - 148px - var(--sa-top)); min-height:340px; }
  #campMap{ position:absolute; inset:0; background:var(--bg-secondary); -webkit-touch-callout:none; -webkit-user-select:none; }
  .map-fabs{ position:absolute; right:12px; bottom:16px; z-index:500; display:flex; flex-direction:column; gap:12px; }
  .fab{ width:52px; height:52px; border-radius:50%; background:var(--card); color:var(--label);
    box-shadow:0 4px 14px rgba(0,0,0,.22); display:grid; place-items:center; font-size:24px; border:0;
    cursor:pointer; transition:transform .08s; }
  .fab:active{ transform:scale(.92); }
  .fab svg{ width:24px; height:24px; color:var(--tint); }
  .pin-wrap{ background:none; border:0; }
  .pin{ width:34px; height:34px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); border:2px solid var(--on-tint);
    box-shadow:0 2px 6px rgba(0,0,0,.4); display:grid; place-items:center; background:var(--tint); }
  .pin-i{ transform:rotate(45deg); font-size:15px; line-height:1; }
  .pin-park{ background:var(--green); }
  .leaflet-container{ font-family:var(--font-sys); }
  .leaflet-popup-content{ font:13px var(--font-sys); }
  .leaflet-popup-content b{ font-weight:600; }
  .leaflet-popup-content a{ color:var(--tint); font-weight:600; }
  .leaflet-popup-content-wrapper,.leaflet-popup-tip{ background:var(--card); color:var(--label); }
  .leaflet-container a.leaflet-popup-close-button{ color:var(--label-2); }
  .leaflet-zonefill-pane canvas{ mix-blend-mode:multiply; }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .leaflet-zonefill-pane canvas{ mix-blend-mode:screen; opacity:.55; }
  }
  :root[data-theme="dark"] .leaflet-zonefill-pane canvas{ mix-blend-mode:screen; opacity:.55; }

  /* ---- share a review + received card -------------------------------- */
  .btn-share{width:100%;margin-top:12px;cursor:pointer;font-size:var(--fs-callout);font-weight:600;
    border:0;border-radius:12px;padding:13px 16px;background:var(--tint-soft);color:var(--tint);
    transition:transform .08s,background .12s}
  .btn-share:active{transform:scale(.98)}
  .btn-share.primary{background:var(--tint);color:var(--on-tint)}
  .btn-share.primary:active{background:var(--tint-press)}
  #view-shared .shared-card-wrap{max-width:420px;margin:6px auto 0}
  #view-shared .shared-card{width:100%;height:auto;display:block;border-radius:22px;
    box-shadow:0 12px 34px rgba(0,0,0,.18);background:var(--fill)}
  #view-shared .shared-note{max-width:420px;margin:14px auto 2px;color:var(--label-2);font-style:italic;text-align:center}
  #view-shared #sh-explore{max-width:420px;margin:18px auto 0;display:block}

  /* ---- account view --------------------------------------------------- */
  .acct-hero{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0 6px}
  .acct-avatar{width:84px;height:84px;border-radius:50%;background:var(--fill-strong);color:var(--label);
    display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:600;overflow:hidden}
  .acct-avatar svg{width:40px;height:40px;color:var(--label-2)}
  .acct-name{font-size:var(--fs-title3);font-weight:700;letter-spacing:var(--ls-title3)}
  .acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 4px}
  .acct-stat{background:var(--card);border-radius:var(--r-sm);padding:12px 8px;text-align:center}
  .acct-stat b{display:block;font-size:var(--fs-title2);font-variant-numeric:tabular-nums;color:var(--label)}
  .acct-stat span{display:block;font-size:var(--fs-caption2);font-weight:600;color:var(--label-2);text-transform:uppercase;
    letter-spacing:.05em;margin-top:3px}
  .acct-input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:var(--fs-body);color:var(--label);
    text-align:right;font-family:var(--font-sys);padding:0}
  .acct-input::placeholder{color:var(--label-3)}
  .acct-back{display:inline-flex;align-items:center;gap:0;min-height:44px;padding:0 10px 0 0;margin-left:-6px;
    color:var(--tint);font-size:var(--fs-body);background:none;border:0;cursor:pointer}
  .acct-back svg{width:24px;height:24px}
  .acct-back:active{opacity:.4}

  /* ---- parks A to Z + letter rail ------------------------------------- */
  /* sticky letter heads, Contacts style: they pin just below the header */
  .az-head{position:sticky;top:calc(60px + var(--sa-top));z-index:5;background:var(--bg);
    font-size:var(--fs-footnote);line-height:var(--lh-footnote);letter-spacing:.4px;font-weight:600;
    text-transform:uppercase;color:var(--label-2);padding:6px 4px 5px;margin:0}
  .az-sec .ios-group{margin-bottom:14px}
  /* the rail: thin, fixed to the right edge; every letter is at least 15px
     tall (the one deliberate sub 44px target, exactly as iOS ships it) */
  .azrail{position:fixed;right:2px;top:50%;transform:translateY(-50%);z-index:30;display:flex;
    flex-direction:column;align-items:center;padding:3px 1px;border-radius:10px;
    touch-action:none;-webkit-user-select:none;user-select:none}
  .azrail span{display:block;min-height:15px;line-height:15px;padding:0 5px;font-size:var(--fs-caption2);
    letter-spacing:var(--ls-caption2);font-weight:600;color:var(--tint-text);text-align:center;cursor:pointer}
  @media (max-width:359.9px){ .azrail{display:none} }

  /* ---- journal tab ----------------------------------------------------- */
  #journalBody .acct-stats{margin:6px 0 4px}
  .jrow .wstar{color:var(--orange);margin-right:5px}
  /* the journal folds each park into one row: stars for its average and the
     counts underneath; the entries open on tap */
  .jpark{margin-bottom:10px}
  .jpark-head{width:100%;text-align:left;background:var(--card);border-radius:var(--r-sm)}
  .jpark-rate{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none;padding-left:10px}
  .jstars{color:var(--orange);font-size:var(--fs-subhead);line-height:1;letter-spacing:1px;white-space:nowrap}
  .jstars .dim{color:var(--label-3)}
  .jnum{color:var(--label-2);font-weight:600;font-size:var(--fs-footnote)}
  .jpark-head .jchev svg{transition:transform .18s var(--ease)}
  .jpark-head[aria-expanded="true"] .jchev svg{transform:rotate(90deg)}
  .jpark-head .ios-row-sub{white-space:normal}   /* the counts wrap under the name instead of truncating beside the stars */
  .jpark-list{margin:6px 0 0}
  .j-glyphs{flex:none;display:flex;gap:7px;margin-left:auto;color:var(--label-2)}
  .j-glyphs svg{width:15px;height:15px;display:block}
  .jrow .tr-rate{flex:none;margin-left:auto;min-width:44px;padding:6px 10px;text-align:center}
  .jrow .j-glyphs+.tr-rate{margin-left:8px}
  .jempty{text-align:center;padding:34px 22px 30px;background:var(--card);border-radius:var(--r);margin-top:8px}
  .jempty svg{width:44px;height:44px;color:var(--tint);margin:0 auto}
  .jempty h3{font-size:var(--fs-title3);letter-spacing:var(--ls-title3);line-height:var(--lh-title3);
    font-weight:700;margin:12px 0 6px}
  .jempty p{font-size:var(--fs-subhead);letter-spacing:var(--ls-subhead);line-height:1.45;
    color:var(--label-2);margin:0 auto 18px;max-width:30em}
  .jempty .btn-share{max-width:280px;margin:0 auto}

  /* ---- saved photos grid ---------------------------------------------- */
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
  .pcell{position:relative;aspect-ratio:1;border-radius:var(--r-xs);overflow:hidden;background:var(--fill);
    border:0;padding:0;cursor:pointer}
  .pcell:active{opacity:.75}
  .pcell img{width:100%;height:100%;object-fit:cover;display:block}
  .pcell .plabel{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;font-size:var(--fs-caption2);font-weight:600;
    color:rgba(255,255,255,.95);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))}

/* =====================================================================
   ios.css, part 3 of 3: vendored Leaflet 1.9 stylesheet, folded in so
   the app ships one stylesheet. Image urls re-pointed at the vendored
   copies in ../vendor/leaflet/images/.
   ===================================================================== */
/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: var(--font-sys);
	font-size: 12px;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px var(--font-sys);
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(../vendor/leaflet/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(../vendor/leaflet/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(../vendor/leaflet/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px var(--font-sys);
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* =====================================================================
   ios.css appearance layer: liquid glass, the three tone palettes, six
   faces, four text sizes, and the blended header.
   Driven by data attributes on <html>, set pre-paint from the shared
   'outdoors-appearance' key so every site dresses the same:
     data-glass="off"          glass chrome off (on is the default)
     data-palette="parks|field|granite"   (parks default, no attribute)
     data-face="parks|system|rounded|serif|avenir|mono"   (parks default, no attribute)
     data-textsize="s|m|l|xl"  (m is the default)
   Tone rules: tone 1 is the tint and carries controls, tone 2 supports
   (chips, secondary highlights), tone 3 is fills and bars only, never
   small text. Each palette redefines the tint family so every existing
   component follows without knowing palettes exist.
   ===================================================================== */

/* the Parks face ships its own type: Lato for headings and buttons,
   Noto Sans for text, the same files the Canada.ca theme loads.
   Both are SIL OFL; see assets/fonts/OFL.txt. */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/noto-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/noto-400i.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/noto-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ------------------------------------------------ three tone palettes */
/* parks is the default: the palette the Parks Canada site wears.
   tone 1 #284162 carries links and controls with #26374A on filled
   buttons, tone 2 #355688 supports, tone 3 is the #A62A1E rule red,
   fills and bars only. */
:root {
  --tint: #284162; --tint-press: #243850; --tint-text: #284162; --tint-fill: #26374A;
  --tint-soft: rgba(40, 65, 98, .12);
  --tone2: #355688; --tone3: #A62A1E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #8FB0DC; --tint-press: #A3C2EA; --tint-text: #8FB0DC; --tint-fill: #3A5A8C;
    --tint-soft: rgba(143, 176, 220, .16);
    --tone2: #4C76B0; --tone3: #E8604C;
  }
}
:root[data-theme="dark"] {
  --tint: #8FB0DC; --tint-press: #A3C2EA; --tint-text: #8FB0DC; --tint-fill: #3A5A8C;
  --tint-soft: rgba(143, 176, 220, .16);
  --tone2: #4C76B0; --tone3: #E8604C;
}
/* the explicit Light choice re-lists the tint family above at higher
   specificity, so parks re-asserts its light values for that case.
   field and granite still win: their blocks sit later in the file. */
:root[data-theme="light"] {
  --tint: #284162; --tint-press: #243850; --tint-text: #284162; --tint-fill: #26374A;
  --tint-soft: rgba(40, 65, 98, .12);
}

:root[data-palette="field"] {
  --tint: #2E7D4F; --tint-press: #256B42; --tint-text: #256B42; --tint-fill: #256B42;
  --tint-soft: rgba(46, 125, 79, .13);
  --tone2: #6B7F3E; --tone3: #E8A13D;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="field"]:not([data-theme="light"]) {
    --tint: #30D158; --tint-press: #6CE28A; --tint-text: #30D158; --tint-fill: #30D158;
    --tint-soft: rgba(48, 209, 88, .17);
    --tone2: #ACD98A; --tone3: #FFB340;
  }
}
:root[data-palette="field"][data-theme="dark"] {
  --tint: #30D158; --tint-press: #6CE28A; --tint-text: #30D158; --tint-fill: #30D158;
  --tint-soft: rgba(48, 209, 88, .17);
  --tone2: #ACD98A; --tone3: #FFB340;
}

:root[data-palette="granite"] {
  --tint: #5E5CE6; --tint-press: #4B49C4; --tint-text: #4B49C4; --tint-fill: #4B49C4;
  --tint-soft: rgba(94, 92, 230, .13);
  --tone2: #6E6E73; --tone3: #F5C400;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="granite"]:not([data-theme="light"]) {
    --tint: #7D7AFF; --tint-press: #9E9CFF; --tint-text: #7D7AFF; --tint-fill: #7D7AFF;
    --tint-soft: rgba(125, 122, 255, .19);
    --tone2: #98989D; --tone3: #FFD60A;
  }
}
:root[data-palette="granite"][data-theme="dark"] {
  --tint: #7D7AFF; --tint-press: #9E9CFF; --tint-text: #7D7AFF; --tint-fill: #7D7AFF;
  --tint-soft: rgba(125, 122, 255, .19);
  --tone2: #98989D; --tone3: #FFD60A;
}

/* -------------------------------------------------------- six faces */
/* parks is the default face: Lato heads it, Noto Sans carries it, as on
   the Parks Canada site. the five alternates are faces iOS ships
   natively; elsewhere they fall back gracefully. */
:root {
  --font-sys: "Noto Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Lato", "Noto Sans", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  /* web faces carry their own fitted metrics; SF tracking returns with
     the SF-family faces below */
  --ls-large-title: 0; --ls-title1: 0; --ls-title2: 0; --ls-title3: 0;
  --ls-headline: 0; --ls-body: 0; --ls-callout: 0; --ls-subhead: 0;
  --ls-footnote: 0; --ls-caption1: 0; --ls-caption2: 0;
}
h1, h2, h3, h4, .btn { font-family: var(--font-display); }
:root[data-face] { --font-display: var(--font-sys); }
:root[data-face="system"] { --font-sys: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif; }
:root[data-face="rounded"] { --font-sys: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
:root[data-face="serif"] { --font-sys: ui-serif, "New York", Georgia, "Times New Roman", serif; }
:root[data-face="avenir"] { --font-sys: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
:root[data-face="mono"] { --font-sys: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
/* SF-family faces get the HIG tracking back; serif and mono stay zeroed */
:root[data-face="system"], :root[data-face="rounded"], :root[data-face="avenir"] {
  --ls-large-title: 0.37px; --ls-title1: 0.36px; --ls-title2: 0.35px; --ls-title3: 0.38px;
  --ls-headline: -0.41px; --ls-body: -0.41px; --ls-callout: -0.32px; --ls-subhead: -0.24px;
  --ls-footnote: -0.08px; --ls-caption1: 0; --ls-caption2: 0.07px;
}

/* -------------------------------------------------- four text sizes */
/* real Dynamic Type steps from the HIG, not a multiplier */
:root[data-textsize="s"] {
  --fs-large-title: 32px; --lh-large-title: 39px;
  --fs-title1: 26px; --lh-title1: 32px;
  --fs-title2: 20px; --lh-title2: 25px;
  --fs-title3: 18px; --lh-title3: 23px;
  --fs-headline: 15px; --lh-headline: 20px;
  --fs-body: 15px; --lh-body: 20px;
  --fs-callout: 14px; --lh-callout: 19px;
  --fs-subhead: 13px; --lh-subhead: 18px;
  --fs-footnote: 12px; --lh-footnote: 16px;
  --fs-caption1: 11px; --lh-caption1: 13px;
  --fs-caption2: 11px; --lh-caption2: 13px;
}
:root[data-textsize="l"] {
  --fs-large-title: 36px; --lh-large-title: 43px;
  --fs-title1: 30px; --lh-title1: 37px;
  --fs-title2: 24px; --lh-title2: 30px;
  --fs-title3: 22px; --lh-title3: 28px;
  --fs-headline: 19px; --lh-headline: 24px;
  --fs-body: 19px; --lh-body: 24px;
  --fs-callout: 18px; --lh-callout: 23px;
  --fs-subhead: 17px; --lh-subhead: 22px;
  --fs-footnote: 15px; --lh-footnote: 20px;
  --fs-caption1: 13px; --lh-caption1: 17px;
  --fs-caption2: 12px; --lh-caption2: 14px;
  /* controls follow, gently: bigger text deserves a bigger thumb pad */
  --ctl: 47px; --ctl-sm: 38px; --ctl-lg: 51px;
}
:root[data-textsize="xl"] {
  --fs-large-title: 38px; --lh-large-title: 46px;
  --fs-title1: 32px; --lh-title1: 39px;
  --fs-title2: 26px; --lh-title2: 32px;
  --fs-title3: 24px; --lh-title3: 30px;
  --fs-headline: 21px; --lh-headline: 26px;
  --fs-body: 21px; --lh-body: 26px;
  --fs-callout: 20px; --lh-callout: 25px;
  --fs-subhead: 19px; --lh-subhead: 24px;
  --fs-footnote: 17px; --lh-footnote: 22px;
  --fs-caption1: 14px; --lh-caption1: 18px;
  --fs-caption2: 13px; --lh-caption2: 16px;
  --ctl: 50px; --ctl-sm: 40px; --ctl-lg: 54px;
}

/* --------------------------------------------------- blended header */
/* at rest the header is the page: no chrome wash, no blur. the wash and
   blur arrive only once content actually runs underneath. JS stamps
   .is-scrolled on the header past ~8px of scroll. */
.ios-header, .nav, .backbar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .25s;
}
.ios-header.is-scrolled, .ios-header.scrolled, .nav.is-scrolled, .nav.scrolled,
.backbar.is-scrolled, .backbar.scrolled {
  background: var(--chrome);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}

/* ------------------------------------------------------ liquid glass */
/* On by default; data-glass="off" returns to the flat chrome. The look:
   deep blur with lifted saturation, a translucent white-to-clear wash,
   a specular top edge, a soft inner shadow at the base, and a floating
   drop shadow. Nothing structural changes, so the toggle is pure paint. */
:root:not([data-glass="off"]) {
  --glass-wash: linear-gradient(180deg, rgba(255, 255, 255, .46), rgba(255, 255, 255, .18));
  --glass-edge: rgba(255, 255, 255, .62);
  --glass-base: rgba(24, 26, 32, .06);
  --glass-blur: blur(28px) saturate(190%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-glass="off"]):not([data-theme="light"]) {
    --glass-wash: linear-gradient(180deg, rgba(94, 98, 110, .34), rgba(44, 46, 54, .22));
    --glass-edge: rgba(255, 255, 255, .16);
    --glass-base: rgba(0, 0, 0, .28);
  }
}
:root:not([data-glass="off"])[data-theme="dark"] {
  --glass-wash: linear-gradient(180deg, rgba(94, 98, 110, .34), rgba(44, 46, 54, .22));
  --glass-edge: rgba(255, 255, 255, .16);
  --glass-base: rgba(0, 0, 0, .28);
}

:root:not([data-glass="off"]) .ios-tabbar,
:root:not([data-glass="off"]) .ios-glass-btn,
:root:not([data-glass="off"]) .fab,
:root:not([data-glass="off"]) .ios-avatar,
:root:not([data-glass="off"]) .segmented,
:root:not([data-glass="off"]) .chip,
:root:not([data-glass="off"]) .fchip:not(.on) {
  background: var(--glass-wash);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--sep);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-base),
    var(--shadow-float);
}
/* the floating bar carries the strongest presence */
:root:not([data-glass="off"]) .ios-tabbar {
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-base),
    0 12px 32px rgba(0, 0, 0, .16);
}
/* small round controls keep a tighter shadow so they read crisp */
:root:not([data-glass="off"]) .ios-glass-btn,
:root:not([data-glass="off"]) .ios-avatar,
:root:not([data-glass="off"]) .fab {
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -1px 0 var(--glass-base),
    0 4px 14px rgba(0, 0, 0, .12);
}
/* the active tab pill glows in the tint instead of flat grey */
:root:not([data-glass="off"]) .ios-tab[aria-current="page"],
:root:not([data-glass="off"]) .ios-tab.on {
  background: var(--tint-soft);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
/* filled controls turn to tinted glass but keep AA: the wash sits on the
   solid AA tint rather than replacing it */
:root:not([data-glass="off"]) .btn-primary,
:root:not([data-glass="off"]) .fchip.on,
:root:not([data-glass="off"]) .seg-opt.on {
  background-color: var(--tint-fill);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 14px rgba(0, 0, 0, .14);
}
:root:not([data-glass="off"]) .seg-opt.on { color: var(--on-tint); }
/* segmented track goes glassy, the selected pill stays solid enough to read */
:root:not([data-glass="off"]) .segmented { padding: 3px; }
/* sheets rise as glass panes */
:root:not([data-glass="off"]) .sheet {
  background: var(--bg);
  background-image: var(--glass-wash);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 -8px 32px rgba(0, 0, 0, .18);
}
/* scrolled headers pick up the same pane treatment */
:root:not([data-glass="off"]) .ios-header.is-scrolled,
:root:not([data-glass="off"]) .ios-header.scrolled,
:root:not([data-glass="off"]) .nav.is-scrolled,
:root:not([data-glass="off"]) .nav.scrolled,
:root:not([data-glass="off"]) .backbar.is-scrolled,
:root:not([data-glass="off"]) .backbar.scrolled {
  background: var(--glass-wash);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 var(--glass-base);
}
/* the letter rail rides the content, so it wears a light glass capsule */
:root:not([data-glass="off"]) .azrail {
  background: var(--glass-wash);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--sep);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-base);
}
/* glass off: the switch means it. The bars drop every blur, not just the
   wash, so the chrome sits truly flat on the page. */
/* glass off returns to the classic frosted chrome the family shipped with:
   translucent bar, 24px blur, no wash, no specular edges */
:root[data-glass="off"] .ios-tabbar,
:root[data-glass="off"] .ios-header.is-scrolled,
:root[data-glass="off"] .ios-header.scrolled,
:root[data-glass="off"] .nav.is-scrolled,
:root[data-glass="off"] .nav.scrolled,
:root[data-glass="off"] .backbar.is-scrolled,
:root[data-glass="off"] .backbar.scrolled {
  background: var(--chrome);
  background-image: none;
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
:root[data-glass="off"] .ios-header.is-scrolled,
:root[data-glass="off"] .ios-header.scrolled,
:root[data-glass="off"] .nav.is-scrolled,
:root[data-glass="off"] .nav.scrolled,
:root[data-glass="off"] .backbar.is-scrolled,
:root[data-glass="off"] .backbar.scrolled {
  background: var(--bg);
  box-shadow: 0 0.5px 0 var(--sep);
}

/* respect transparency reduction: fall back to the flat chrome */
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-glass="off"]) .ios-tabbar,
  :root:not([data-glass="off"]) .ios-glass-btn,
  :root:not([data-glass="off"]) .fab,
  :root:not([data-glass="off"]) .ios-avatar,
  :root:not([data-glass="off"]) .azrail,
  :root:not([data-glass="off"]) .sheet,
  :root:not([data-glass="off"]) .ios-header.is-scrolled,
  :root:not([data-glass="off"]) .ios-header.scrolled,
  :root:not([data-glass="off"]) .nav.is-scrolled,
  :root:not([data-glass="off"]) .nav.scrolled,
  :root:not([data-glass="off"]) .backbar.is-scrolled,
  :root:not([data-glass="off"]) .backbar.scrolled {
    background: var(--card);
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* tone 3 belongs to bars and fills so every palette shows its warmth */
.riskbar-fill, .clprog-fill, .pprog-fill { background: var(--tone3); }
/* tone 2 carries secondary highlights */
.pill-new, .badge-info.on { background: var(--tone2); }

/* ----------------------------------------------- the appearance panel */
/* the Appearance group in More: Theme, Glass, Text size, nothing else.
   The look itself is not a choice here; this app simply wears its own
   colours and type. Everything applies live and lands in the shared
   'outdoors-appearance' key. */
.ap-row { justify-content: space-between; }
/* the title keeps its word; the control is the part that shrinks */
.ap-row .ios-row-body { flex: 0 0 auto; }
.ap-row .ap-seg { flex: 1 1 auto; min-width: 0; max-width: 236px; margin: 0 0 0 auto; }
/* the control sits inside a standard row, so an Appearance row stands as
   tall as a Learn or About row, not taller: compact options whose real
   hit area is stretched back to the 44pt floor invisibly. the explicit
   line-height pins the option height on every font stack, so the floor
   holds off the token fonts too */
.ap-seg .seg-opt { min-width: 0; min-height: 0; padding: 4px 6px; position: relative; line-height: var(--lh-footnote); }
.ap-seg .seg-opt::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
/* the iOS switch: a 51x31 track, the knob slides on aria-checked */
.ios-switch {
  flex: none;
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 16px;
  background: var(--fill-strong);
  transition: background .2s;
}
.ios-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--on-tint);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16);
  transition: left .2s;
}
[role="switch"][aria-checked="true"] .ios-switch { background: var(--green); }
[role="switch"][aria-checked="true"] .ios-switch i { left: 22px; }

/* on phone widths a labelled segmented row in a sheet stacks so every
   option keeps a comfortable target. Appearance rows stay on one line:
   their compact control fits beside the title at every text size */
@media (max-width: 480px) {
  .field:has(> .segmented) { flex-wrap: wrap; }
  .field:has(> .segmented) > .segmented { width: 100% !important; margin-top: 6px; }
}

/* =====================================================================
   ios.css desktop layer: the responsive arrangement for big screens.
   Under 700px nothing changes; the phone chrome above is the app.
   From 700px (tablet) the bottom capsule stays but the column relaxes
   to 900px and bottom sheets become centered dialogs. From 1100px
   (desktop) the page reads as a normal website: a solid 60px top bar,
   the tabs restyled as a 264px left sidebar of labelled rows, and one
   1016px main column. Plain media queries only, so a window resize
   reflows live and everything works with JS off.
   Chrome selectors are scoped with body > because the styleguide nests
   demo headers and tab bars inside its panels; only the app's real
   chrome sits directly on body.
   ===================================================================== */

/* the brand name sits in the header only on big screens */
.ios-brand { display: none; }

/* ------------------------------------------------------- tablet, 700+ */
@media (min-width: 700px) {
  /* the phone column relaxes to 900px */
  .wrap, .appbar, .screen-title, .screen-sub, footer,
  .backbar .inner, .ios-header-row { max-width: 900px; }

  /* denser grids so the wide column does not blow the cells up */
  .grid { grid-template-columns: repeat(10, 1fr); }
  .pgrid { grid-template-columns: repeat(4, 1fr); }

  /* bottom sheets become centered dialogs. The base sheet centres with
     left and right plus margin auto, so the transform stays a plain
     translateY and the pull-down-to-close drag keeps working. Both
     states are restated so the open and close transitions survive;
     100vh clears the viewport from the 8vh resting spot. */
  .sheet {
    top: 8vh;
    bottom: auto;
    width: min(560px, 92vw);
    max-height: 84vh;
    border-radius: 16px;
    transform: translateY(100vh);
  }
  .sheet.on { transform: translateY(0); }
}

/* ------------------------------------------------------ desktop, 1100+ */
@media (min-width: 1100px) {
  /* room for the fixed sidebar; no bottom capsule to clear down here */
  body:has(> .ios-tabbar) { padding-left: 264px; padding-bottom: 0; }

  /* one wide main column, centered in the space right of the sidebar */
  #views { max-width: 1016px; margin: 0 auto; padding-top: 60px; }
  .wrap, .appbar, .screen-title, .screen-sub, footer, .backbar .inner { max-width: none; }
  .grid { grid-template-columns: repeat(12, 1fr); }
  .pgrid { grid-template-columns: repeat(5, 1fr); }

  /* the top bar: solid, full width, frosted-free in every glass state */
  body > .ios-header,
  body > .ios-header.is-scrolled, body > .ios-header.scrolled,
  :root:not([data-glass="off"]) body > .ios-header.is-scrolled,
  :root:not([data-glass="off"]) body > .ios-header.scrolled,
  :root[data-glass="off"] body > .ios-header.is-scrolled,
  :root[data-glass="off"] body > .ios-header.scrolled {
    position: fixed; top: 0; left: 0; right: 0;
    height: 60px; padding: 0;
    background: var(--card);
    background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 1px solid var(--sep);
    box-shadow: none;
    z-index: 40;
  }
  /* the park page hides the phone header; on desktop the top bar stays */
  body > .ios-header[hidden] { display: block; }
  .ios-header-row { height: 60px; max-width: none; padding: 0 20px; justify-content: flex-start; gap: 12px; }
  .ios-brand { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-headline); color: var(--label); }
  .ios-header-actions { margin-left: auto; }

  /* the tab bar becomes the sidebar */
  body > .ios-tabbar,
  :root:not([data-glass="off"]) body > .ios-tabbar,
  :root[data-glass="off"] body > .ios-tabbar {
    left: 0; right: auto; top: 60px; bottom: 0;
    width: 264px; height: auto; max-width: none; margin: 0;
    border-radius: 0; border: 0; border-right: 1px solid var(--sep);
    background: var(--bg);
    background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 16px 12px;
  }
  body > .ios-tabbar .ios-tab,
  :root:not([data-glass="off"]) body > .ios-tabbar .ios-tab[aria-current="page"],
  :root:not([data-glass="off"]) body > .ios-tabbar .ios-tab.on {
    flex: 0 0 auto; width: 100%; max-width: none;
    flex-direction: row; justify-content: flex-start; gap: 10px;
    min-height: 36px; height: 36px; padding: 0 12px;
    border-radius: 8px; box-shadow: none;
  }
  body > .ios-tabbar .ios-tab svg { width: 18px; height: 18px; }
  body > .ios-tabbar .ios-tab span { font-size: var(--fs-subhead); line-height: 1; }
  body > .ios-tabbar .ios-tab:hover { background: var(--fill); }
  body > .ios-tabbar .ios-tab[aria-current="page"],
  body > .ios-tabbar .ios-tab.active,
  body > .ios-tabbar .ios-tab.on { background: var(--tint-soft); color: var(--tint-text); }

  /* large titles read as page headings under the fixed bar */
  .appbar { padding-top: 28px; }
  .screen-title { padding-top: 28px; }

  /* the park page back bar rides just under the fixed top bar */
  .backbar { top: 60px; }

  /* desktop pages do not slide sideways; the gentle fade-up stays */
  #view-park.view-anim { animation: none; }
  .view-out { animation: none; }

  /* no bottom capsule, so the map fills to the bottom edge */
  .map-wrap { height: calc(100dvh - 60px); }

  /* the letter rail hugs the main column instead of the window edge;
     264px sidebar plus the 1016px column is 1280px */
  .azrail { right: max(2px, calc((100vw - 1280px) / 2 + 2px)); }

  /* the toast no longer needs to clear the capsule */
  .toast { bottom: 24px; }
}

/* =====================================================================
   ios.css github round, ported from on-wildlife: the app carries itself
   like the GitHub app. Flat controls with no gradient washes, the exact
   tab capsule, a top bar that fades in instead of switching on, glass
   kept only for the moment one tab hands over to the next, and GitHub's
   own dark room for the untouched default. Chrome selectors keep the
   body > scope so the styleguide's nested demos stay untouched.
   ===================================================================== */

/* -------------------------------------------------- flat, like github */
/* the circular header buttons are plain filled circles now */
.ios-glass-btn, .ios-avatar,
:root:not([data-glass="off"]) .ios-glass-btn,
:root:not([data-glass="off"]) .ios-avatar {
  background: var(--fill);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
/* filled controls lose the wash and the lift: one flat colour */
:root:not([data-glass="off"]) .btn-primary,
:root:not([data-glass="off"]) .fchip.on,
:root:not([data-glass="off"]) .seg-opt.on {
  background-image: none;
  box-shadow: none;
}
/* chips, segments and the fab sit flat too */
.segmented, .chip, .fchip:not(.on), .fab,
:root:not([data-glass="off"]) .segmented,
:root:not([data-glass="off"]) .chip,
:root:not([data-glass="off"]) .fchip:not(.on),
:root:not([data-glass="off"]) .fab {
  background: var(--fill);
  background-image: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
/* sheets keep their frost but not the wash */
:root:not([data-glass="off"]) .sheet {
  background-image: none;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .18);
}
/* a closed sheet rests just below the fold; its big upward drop-shadow was
   bleeding a grey smudge across the bottom of every desktop screen. The
   blurred shadow belongs to the open sheet only. */
.sheet:not(.on),
:root:not([data-glass="off"]) .sheet:not(.on) { box-shadow: 0 -1px 0 var(--sep); }
/* the letter rail rode a glass capsule; it sits plain on the page now */
.azrail,
:root:not([data-glass="off"]) .azrail {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
:root:not([data-glass="off"]) .ios-tab[aria-current="page"],
:root:not([data-glass="off"]) .ios-tab.on {
  box-shadow: none;
}

@media (max-width: 1099.98px) {
  /* ------------------------------------------- the tab capsule, exact */
  /* github's bar: 22px in from the sides, 10px off the bottom, 64px
     tall, fully rounded, frosted, one soft shadow. the active pill
     hugs its icon and label with 6px of air above and below. */
  body > .ios-tabbar,
  :root:not([data-glass="off"]) body > .ios-tabbar,
  :root[data-glass="off"] body > .ios-tabbar {
    left: 22px;
    right: 22px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    height: 64px;
    max-width: 560px;
    border-radius: 32px;
    padding: 0 8px;
    background: var(--chrome);
    background-image: none;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  }
  body > .ios-tabbar .ios-tab {
    height: 52px;
    border-radius: 26px;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--label);
  }
  body > .ios-tabbar .ios-tab[aria-current="page"],
  body > .ios-tabbar .ios-tab.on,
  :root:not([data-glass="off"]) body > .ios-tabbar .ios-tab[aria-current="page"],
  :root:not([data-glass="off"]) body > .ios-tabbar .ios-tab.on {
    background: var(--press-pill);
    color: var(--tint);
    box-shadow: none;
  }

  /* --------------------------------------- the top bar fades, quietly */
  /* the frost lives on a pseudo layer whose opacity animates, so the
     bar arrives like the github app's: gradually, without a hard edge
     switching on. content stays above the layer. camp's two top bars
     are the shared header and the park page's backbar. */
  body > .ios-header, body > .ios-header.scrolled, body > .ios-header.is-scrolled,
  .backbar, .backbar.scrolled, .backbar.is-scrolled,
  :root:not([data-glass="off"]) body > .ios-header.scrolled,
  :root:not([data-glass="off"]) body > .ios-header.is-scrolled,
  :root:not([data-glass="off"]) .backbar.scrolled,
  :root:not([data-glass="off"]) .backbar.is-scrolled,
  :root[data-glass="off"] body > .ios-header.scrolled,
  :root[data-glass="off"] body > .ios-header.is-scrolled,
  :root[data-glass="off"] .backbar.scrolled,
  :root[data-glass="off"] .backbar.is-scrolled {
    background: transparent;
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  body > .ios-header::before, .backbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--chrome);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 0.5px 0 var(--sep);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }
  body > .ios-header.scrolled::before, body > .ios-header.is-scrolled::before,
  .backbar.scrolled::before, .backbar.is-scrolled::before { opacity: 1; }

  /* ------------------------------- glass, kept for the handover only */
  /* switching tabs: the incoming screen resolves out of a soft blur.
     glass off or reduced motion keeps the plain entry. */
  /* only tab switches: the park push, pop and drag-back keep their own
     slides (.view-anim, .view-out, and the no-anim ride below) */
  :root:not([data-glass="off"]) #views > section:not(.view-anim):not(.view-out):not(.dragback) {
    animation: glass-in .22s var(--ease);
  }
  @keyframes glass-in {
    from { opacity: 0; filter: blur(10px); transform: scale(.985); }
    to { opacity: 1; filter: blur(0); transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    #views > section,
    :root:not([data-glass="off"]) #views > section:not(.view-anim):not(.view-out) { animation: none; }
  }

  /* the accessibility fallback stays honest against everything above */
  @media (prefers-reduced-transparency: reduce) {
    body > .ios-tabbar,
    :root:not([data-glass="off"]) body > .ios-tabbar,
    :root[data-glass="off"] body > .ios-tabbar {
      background: var(--card);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    body > .ios-header::before, .backbar::before {
      background: var(--card);
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
  }
}

/* --------------------------------------- github's dark room, default */
/* the untouched default wears github's own dark: their canvas, their
   blue, their system type. this app is locked to the parks look, so a
   palette or face stored by a sibling app is read but never worn. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-palette]) {
    --bg: #010409;
    --card: #151B23;
    --chrome: rgba(1, 4, 9, .78);
    --fill: rgba(101, 108, 118, .24);
    --press-pill: rgba(101, 108, 118, .28);
    --sep: rgba(61, 68, 77, .72);
    --label: #F0F6FC;
    --label-2: #9198A1;
    --label-3: rgba(145, 152, 161, .5);
    --label-aa: #B7BDC8;
    --tint: #4493F8; --tint-press: #316DCA; --tint-text: #4493F8; --tint-fill: #1F6FEB;
    --tint-soft: rgba(68, 147, 248, .15);
    --tone2: #316DCA; --tone3: #F85149;
  }
  :root:not([data-theme="light"]):not([data-face]) {
    --font-sys: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
    --ls-large-title: 0.37px; --ls-title1: 0.36px; --ls-title2: 0.35px; --ls-title3: 0.38px;
    --ls-headline: -0.41px; --ls-body: -0.41px; --ls-callout: -0.32px; --ls-subhead: -0.24px;
    --ls-footnote: -0.08px; --ls-caption1: 0; --ls-caption2: 0.07px;
  }
}
:root[data-theme="dark"]:not([data-palette]) {
  --bg: #010409;
  --card: #151B23;
  --chrome: rgba(1, 4, 9, .78);
  --fill: rgba(101, 108, 118, .24);
  --press-pill: rgba(101, 108, 118, .28);
  --sep: rgba(61, 68, 77, .72);
  --label: #F0F6FC;
  --label-2: #9198A1;
  --label-3: rgba(145, 152, 161, .5);
  --label-aa: #B7BDC8;
  --tint: #4493F8; --tint-press: #316DCA; --tint-text: #4493F8; --tint-fill: #1F6FEB;
  --tint-soft: rgba(68, 147, 248, .15);
  --tone2: #316DCA; --tone3: #F85149;
}
:root[data-theme="dark"]:not([data-face]) {
  --font-sys: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;
  --ls-large-title: 0.37px; --ls-title1: 0.36px; --ls-title2: 0.35px; --ls-title3: 0.38px;
  --ls-headline: -0.41px; --ls-body: -0.41px; --ls-callout: -0.32px; --ls-subhead: -0.24px;
  --ls-footnote: -0.08px; --ls-caption1: 0; --ls-caption2: 0.07px;
}

/* =====================================================================
   ios.css polish round, ported from on-wildlife: settings taps that
   re-render in place must never replay the entry animation.
   ===================================================================== */

/* the class rides the mounted screen itself so removing it can never
   restart the entry animation; the next tab switch clears it */
#views > section.no-anim,
:root:not([data-glass="off"]) #views > section.no-anim:not(.view-anim):not(.view-out) { animation: none; }

/* =====================================================================
   polish round: a quiet map, an iOS spinner, native breathing room
   ===================================================================== */

/* Chrome over the map is solid, never frosted: blurring live tiles behind
   a bar is what costs frames while panning a phone. */
.map-wrap .map-card {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 600;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
.map-wrap .map-card::-webkit-scrollbar { display: none; }
.map-card .chip { flex: 0 0 auto; }
.map-fabs .fab,
:root:not([data-glass="off"]) .map-fabs .fab {
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* the account avatar breathes before the name card, and the stat row
   breathes before the rows under it */
.acct-hero { margin-bottom: 18px; }
.acct-stats { margin-bottom: 22px; }

/* the favourite heart: small glyph, full size target, filled when it is on */
.favbtn {
  flex: none;
  width: 34px;
  height: 34px;
  margin: -6px 2px -6px 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--label-3);
  position: relative;
}
.favbtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.favbtn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.favbtn.on { color: var(--tone3); }
.favbtn.on svg { fill: currentColor; stroke: currentColor; }
.favbtn:active { background: var(--fill); }

/* the same heart on the park page, where it is the only way to favourite a
   park: a labelled pill, so the state is read rather than guessed */
.favpill {
  flex: none;
  min-height: var(--ctl);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  border: 0;
  border-radius: 99px;
  background: var(--fill);
  color: var(--label);
  font-family: var(--font-sys);
  font-size: var(--fs-subhead);
  letter-spacing: var(--ls-subhead);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s;
}
.favpill svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.favpill.on { color: var(--tone3); }
.favpill.on svg { fill: currentColor; }
.favpill:active { transform: scale(.96); }

/* the search screen: a title line with Cancel, then the field */
.search-head { display: flex; align-items: baseline; gap: 8px; }
.search-head .screen-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-cancel {
  flex: none;
  background: none;
  border: 0;
  padding: 6px 2px;
  min-height: var(--ctl);
  color: var(--tint);
  font: inherit;
  font-size: var(--fs-body);
  cursor: pointer;
}
.search-cancel:active { opacity: .5; }
.search-hint {
  margin: 14px 4px;
  color: var(--label-2);
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
}

/* the map toggles are real thumb targets, not label-sized pills */
.map-card .chip {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 13px;
  border-radius: 17px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-subhead);
  line-height: 1;
  font-weight: 600;
  color: var(--label);
  background: var(--fill);
  border: 0;
  position: relative;
  cursor: pointer;
}
.map-card .chip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.map-card .chip.on { background: var(--tint); color: var(--on-tint); }
.map-card .chip:active { opacity: .7; }

/* the iOS activity spinner: eight blades fading in turn. It takes a chip's
   glyph slot while that layer is fetching, so it is sized to the glyph. */
.ios-spinner {
  position: relative;
  width: 15px;
  height: 15px;
  display: inline-block;
  flex: none;
}
.ios-spinner span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 4.5px;
  margin-left: -1px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: 50% 7.5px;
  animation: spinner-fade 0.8s linear infinite;
}
@keyframes spinner-fade { from { opacity: 1; } to { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .ios-spinner span { animation-duration: 2.4s; }
}

/* the footer link is a real target, not a line of fine print */
.footlink {
  display: inline-block;
  padding: 7px 2px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================================
   ios.css site round: About leads More, legal reads in a sheet, and two
   laptop fixes, the letter rail out of the rows and sheets that rise
   from the bottom of the window instead of parking at the top.
   ===================================================================== */

/* the legal sheet body: quiet paragraphs, scrollable past a long policy */
.legalbody p { margin: 0 0 12px; font-size: var(--fs-subhead); line-height: 1.45; color: var(--label); }
.legalbody p:last-child { margin-bottom: 4px; }
.legalbody b { font-weight: 600; }

@media (min-width: 1100px) {
  /* sheets rise from the bottom on a laptop too. The tablet layer parks
     them at the top of the window as dialogs, which reads wrong on a tall
     screen; both states are restated so the transitions survive. The 264px
     offset centres them in the space right of the sidebar. */
  .sheet {
    top: auto; bottom: 0;
    left: 264px; right: 0;
    width: min(560px, 60vw);
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    transform: translateY(102%);
  }
  .sheet.on { transform: translateY(0); }

  /* the letter rail sits in its own gutter: the park list reserves the
     right edge, so the rail never lands on a row's chevron */
  #view-parks .wrap { padding-right: 56px; }
  .azrail { right: max(10px, calc((100vw - 1280px) / 2 + 10px)); }
}