/* =====================================================================
   ios.css, part 1 of 2: 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: the on-wildlife app layer, migrated from the old
   styles.css. Every component below is re-expressed on the core tokens
   above; the only :root additions here are app layout tokens (radii,
   bar heights, easing), never colours. The vendored Leaflet stylesheet
   is folded in at the end so each page loads exactly one stylesheet.
   ===================================================================== */

:root {
  /* app layout tokens only, colours come from the core palette */
  --radius-cell: 12px;
  --radius-card: 16px;
  --radius-btn: 12px;
  --nav-h: 44px;
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------------------------------------------------------------- App shell */
#app { max-width: 640px; margin: 0 auto; min-height: 100dvh; }
input, textarea, select { font: inherit; color: var(--label); }
button, .tap, .cell, .tab, .chip, .seg-opt {
  -webkit-user-select: none;
  user-select: none;
}

/* Optional "In depth" species account (native <details> styled as a group). */
.notes {
  margin: 18px 16px;
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.notes > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; min-height: 44px;
}
.notes > summary::-webkit-details-marker { display: none; }
.notes > summary .cell-emoji { font-size: 22px; width: 28px; text-align: center; }
.notes > summary .cell-title { font-size: var(--fs-body); }
.notes > summary .chevron { margin-left: auto; transition: transform 0.2s var(--ease); }
.notes[open] > summary .chevron { transform: rotate(90deg); }
.notes > summary:active { background: var(--card-pressed); }
.notes-body { padding: 2px 18px 18px; border-top: 0.5px solid var(--sep); }
.notes-body p { margin: 12px 0 0; font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); color: var(--label); }
.notes-body p:first-child { margin-top: 14px; }

.screen { animation: screen-in 0.28s var(--ease); }
@keyframes screen-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* iOS push/pop navigation transitions. Two screens overlay while the incoming
   one slides in and the outgoing one parallaxes off and dims. */
#app.nav-animating { position: relative; overflow: hidden; }
#app.nav-animating .screen { position: absolute; top: 0; left: 0; width: 100%; }
.screen.sc-anim { animation: none; transition: transform 0.34s var(--ease), opacity 0.34s var(--ease); will-change: transform; }
.screen.sc-from-right { transform: translateX(100%); }
.screen.sc-from-left { transform: translateX(-100%); }
.screen.sc-exit-left { transform: translateX(-26%); opacity: 0.55; }
.screen.sc-exit-right { transform: translateX(100%); }

/* ----------------------------------------- Navigation bar (pushed screens)
   Chrome background, blur, and no bottom border, matching the ios-header. */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: var(--sa-top);
  background: var(--chrome);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
.nav-row {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 8px;
}
.nav-title {
  font-size: var(--fs-headline);
  font-weight: 600;
  letter-spacing: var(--ls-headline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 50%;
  transition: opacity 0.2s;
}
.nav.has-large .nav-title { opacity: 0; }
.nav.has-large.show-title .nav-title { opacity: 1; }
.nav-left, .nav-right {
  position: absolute;
  top: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-left { left: 4px; max-width: 42%; }
.nav-right { right: 8px; }
.nav-btn { min-width: 0; }
.nav-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nav-btn {
  color: var(--tint);
  font-size: var(--fs-body);
  padding: 6px 8px;
  /* the label draws small; the target does not */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 8px;
}
.nav-btn:active { opacity: 0.4; }
.nav-btn.bold { font-weight: 600; }
.nav-btn svg { width: 17px; height: 17px; }
/* the on-site back button: tinted chevron with the destination written
   out beside it, exactly as the partnered app draws "‹ All Parks" */
.nav-btn.backbtn svg { width: 20px; height: 20px; flex: none; }

/* Large title (collapses as the user scrolls) */
.large-title {
  /* the same 16px grid the section titles and cards sit on */
  padding: 4px 16px 6px;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
}
.large-title h1 {
  margin: 0;
  font-size: var(--fs-large-title);
  line-height: var(--lh-large-title);
  font-weight: 700;
  letter-spacing: var(--ls-large-title);
}
.large-title .large-head { display: flex; align-items: center; gap: 10px; }
.large-title .large-head h1 { flex: 0 1 auto; }
.large-title .ver {
  flex: 0 0 auto;
  font-size: var(--fs-caption1);
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--label-2);
  background: var(--fill);
  border-radius: 100px;
  padding: 3px 9px;
  align-self: center;
  position: relative;
}
/* Fitts: the chip is small, the tap target is not. An invisible overlay grows
   the hit area to 44px without touching the look. */
.large-title .ver::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 44px;
  transform: translateY(-50%);
}
.large-title .ver:active { opacity: 0.6; }
.large-title .subtitle { color: var(--label-2); font-size: var(--fs-subhead); margin-top: 2px; max-width: 34em; }

/* ------------------------------------------------------- Grouped lists */
.group { margin: 18px 16px 8px; }
.ios-section-title + .group { margin-top: 4px; }
.group-header {
  padding: 0 4px 7px;
  font-size: var(--fs-footnote);
  font-weight: 400;
  color: var(--label-2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.group-footer {
  padding: 7px 4px 0;
  font-size: var(--fs-footnote);
  color: var(--label-2);
  line-height: var(--lh-footnote);
}
.list {
  background: var(--card);
  border-radius: var(--radius-cell);
  overflow: hidden;
}
.cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 14px;
  position: relative;
  background: var(--card);
  color: var(--label);
  transition: background 0.12s;
  text-align: left;
}
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;
}
/* Separators start at the label, never the card edge: 14px pad + 32px
   glyph + 12px gap = 58px when a leading glyph is present. */
.cell + .cell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 0.5px;
  background: var(--sep);
}
.cell + .cell:has(> .cell-emoji)::before,
.cell + .cell:has(> .cell-icon)::before { left: 58px; }
.cell + .cell:has(> .thumb)::before { left: 70px; }
.cell.tap:active { background: var(--card-pressed); }
.cell-emoji {
  width: 32px;
  font-size: 26px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}
.cell-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 17px;
  flex-shrink: 0;
  color: var(--on-tint);
}
.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.i { font-style: italic; }
.cell-sub {
  display: block;
  font-size: var(--fs-footnote);
  color: var(--label-2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-emoji svg { width: 26px; height: 26px; display: block; margin: 0 auto; }
/* the value yields and wraps before it can squeeze the title into it:
   at the large text sizes a long value ("Mammals · Large Mammals")
   otherwise collides with its label */
.cell-value { color: var(--label-2); font-size: var(--fs-callout); flex: 0 1 auto; min-width: 0; margin-left: auto; text-align: right; }
/* and the label keeps its natural width beside a value, so the flex
   fight can never clip a short word like "Category" */
.cell-body:has(+ .cell-value) { flex: 0 0 auto; max-width: 55%; }
.chevron { color: var(--label-3); flex: none; margin-left: auto; }
.cell-value + .chevron { margin-left: 8px; }
.chevron svg { width: 14px; height: 20px; display: block; }

/* -------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: max(50px, var(--ctl-lg));
  padding: 0 20px;
  border-radius: var(--radius-btn);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: var(--ls-headline);
  transition: transform 0.08s, opacity 0.15s, background 0.15s;
}
.btn:active { transform: scale(0.975); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.btn-primary { background: var(--tint-fill); color: var(--on-tint); }
.btn-primary:active { background: var(--tint-press); }
.btn-tinted { background: var(--tint-soft); color: var(--tint-text); }
.btn-gray { background: var(--fill-strong); color: var(--label); }
.btn-plain { color: var(--tint-text); }
.btn-danger { color: var(--red); background: var(--fill); }
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: 0.4; }

/* ----------------------------------------------------------------- Chips */
.chip-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 16px 8px;
  scrollbar-width: none;
  /* a sheet is a flex column; without this the scrolling list below
     crushes the filter chips to a sliver */
  flex-shrink: 0;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ctl);
  padding: 0 16px;
  border-radius: 22px;
  background: var(--fill-strong);
  color: var(--label);
  font-size: var(--fs-subhead);
  font-weight: 500;
  transition: background 0.12s, transform 0.08s;
}
.chip:active { transform: scale(0.95); }
.chip.on { background: var(--tint); color: var(--on-tint); }

/* ------------------------------------------------------- Segmented control */
.segmented {
  display: flex;
  background: var(--fill-strong);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.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);
  transition: background 0.15s;
}
.seg-opt.on {
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-weight: 600;
}

/* --------------------------------------------------------------- Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: var(--fs-caption1);
  font-weight: 600;
  letter-spacing: 0.1px;
}
.badge-risk {
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  color: color-mix(in srgb, var(--orange) 62%, var(--label));
}
.badge-danger {
  background: color-mix(in srgb, var(--red) 16%, transparent);
  color: color-mix(in srgb, var(--red) 74%, var(--label));
}
.badge-ok { background: var(--tint-soft); color: color-mix(in srgb, var(--tint) 84%, var(--label)); }
.badge-info { background: var(--fill-strong); color: var(--label-2); }

/* ------------------------------------------------------------ Form inputs */
.field { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; }
.field-label { font-size: var(--fs-body); flex-shrink: 0; }
.field input[type='text'],
.field input[type='number'],
.field input[type='datetime-local'],
.field input[type='url'],
.field input[type='search'] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font-size: var(--fs-body);
  text-align: right;
  color: var(--label);
}
.field input::placeholder, textarea.notes::placeholder { color: var(--label-2); opacity: 0.7; }
textarea.notes {
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  resize: none;
  font-size: var(--fs-body);
  padding: 12px 16px;
  min-height: 88px;
  color: var(--label);
}

/* iOS switch */
.switch { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--fill-strong);
  border-radius: 31px;
  transition: background 0.25s var(--ease);
}
.switch .knob {
  position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px;
  background: var(--on-tint);
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s var(--ease);
}
.switch input:checked ~ .track { background: var(--tint); }
.switch input:checked ~ .knob { transform: translateX(20px); }

/* Stepper */
.stepper { display: inline-flex; align-items: center; background: var(--fill-strong); border-radius: 8px; overflow: hidden; }
.stepper button { width: 44px; height: 40px; font-size: 22px; color: var(--label); display: grid; place-items: center; }
.stepper .val { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.stepper button:active { background: var(--fill); }
.stepper .sep { width: 0.5px; background: var(--sep); }

/* Search bar */
.searchbar {
  margin: 8px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--ctl-sm);
  padding: 0 8px;
  border-radius: 10px;
  background: var(--fill-strong);
  color: var(--label-2);
}
.searchbar svg { width: 16px; height: 16px; flex-shrink: 0; }
.searchbar input {
  flex: 1; border: 0; background: none; outline: none;
  font-size: var(--fs-body); color: var(--label);
}

/* --------------------------------------------------------------- Sheets */
.scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.scrim.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-width: 640px;
  margin: 0 auto;
  /* dvh, not vh: on iOS Safari vh includes the collapsed toolbar area, which
     pushed the sheet top off screen once the keyboard opened. */
  max-height: calc(100dvh - var(--sa-top) - 12px);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 12px 12px 0 0;
  transform: translateY(100%);
  transition: transform 0.34s var(--ease);
  box-shadow: 0 -1px 0 var(--sep);
}
.sheet.show { transform: translateY(0); }
.sheet-grabber {
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--label-3);
  margin: 8px auto 0;
  flex-shrink: 0;
}
.sheet-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.sheet-nav .t { font-size: var(--fs-headline); font-weight: 600; }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + var(--sa-bottom)); }

/* While a sheet or the species picker is open the page behind must not move.
   JS stores scrollY, pins the body at that offset, and restores it on close.
   Without this, iOS Safari pans the page when the keyboard opens and the top
   of the sheet ends up out of reach. */
html.sheet-lock, html.sheet-lock body { overflow: hidden; }
html.sheet-lock body { position: fixed; left: 0; right: 0; width: 100%; }

/* ---------------------------------------------------------- Species hero */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 20px 8px;
}
.hero-emoji {
  width: 96px; height: 96px;
  border-radius: 26px;
  display: grid; place-items: center;
  font-size: 56px;
  box-shadow: var(--shadow-float);
  margin-bottom: 14px;
}
.sp-photo-wrap { display: none; width: 100%; }
.sp-photo-wrap.show { display: block; margin-bottom: 14px; }
.sp-photo { width: 100%; max-height: 300px; object-fit: cover; border-radius: 16px; display: block; box-shadow: var(--shadow-float); }
.photo-credit { font-size: var(--fs-caption2); color: var(--label-2); margin-top: 6px; line-height: 1.3; }
.hero h1 { margin: 0; font-size: var(--fs-title1); line-height: var(--lh-title1); font-weight: 700; letter-spacing: var(--ls-title1); }
.hero .sci { color: var(--label-2); font-style: italic; font-size: var(--fs-subhead); margin-top: 2px; }
.hero .badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }

/* Destructive rows (Reset all data): red label, same geometry */
.ios-row--danger .ios-row-title { color: var(--red); }

/* Category page: pinned live filter + sticky subcategory headers.
   The filter pins directly under the sticky nav; each subcategory header
   sticks just below the filter as its group scrolls past. */
.cat-filter {
  position: sticky;
  top: calc(var(--nav-h) + var(--sa-top));
  z-index: 20;
  background: var(--bg);
  padding: 2px 0 6px;
}
.cat-filter .searchbar { margin-top: 4px; margin-bottom: 0; }
.cat-sub-header {
  position: sticky;
  top: calc(var(--nav-h) + var(--sa-top) + 48px);
  z-index: 10;
  background: var(--bg);
  padding-top: 6px;
  margin-top: -6px;
}

/* Card grid (Explore categories) */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 8px; }
.cat-card {
  background: var(--card);
  color: var(--label);
  border-radius: var(--radius-card);
  padding: 16px;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.1s;
  position: relative;
  overflow: hidden;
}
.cat-card:active { transform: scale(0.97); }
.cat-card .ce { font-size: 34px; }
.cat-card .cn { font-size: var(--fs-headline); font-weight: 600; margin-top: 8px; }
.cat-card .cc { font-size: var(--fs-footnote); color: var(--label-2); margin-top: 1px; }
.cat-card.soon { opacity: 0.55; }

/* Info rows in species detail */
.info-row { padding: 11px 16px; }
.info-row + .info-row::before {
  content: ''; display: block; height: 0.5px; background: var(--sep);
  margin: -11px -16px 11px; margin-left: 0;
}
.info-k { font-size: var(--fs-footnote); color: var(--label-2); }
.info-v { font-size: var(--fs-callout); margin-top: 2px; }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 16px 8px; }
.stat {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 14px 12px;
  text-align: center;
  display: block;
}
a.stat { color: inherit; text-decoration: none; }
a.stat:active { background: var(--card-pressed); }

/* Journal: the life list card */
.lifecard {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 18px 18px 16px;
  margin-top: 4px;
}
.lifecard-n {
  font-size: var(--fs-title1);
  font-weight: 700;
  line-height: var(--lh-title1);
  letter-spacing: var(--ls-title1);
  color: var(--tint);
  font-variant-numeric: tabular-nums;
}
.lifecard-l { font-size: var(--fs-subhead); color: var(--label); margin-top: 5px; }
.lifecard .riskbar { margin-top: 13px; }
.lifecard .riskbar-fill { background: var(--tint); }
.lifecard-f { font-size: var(--fs-footnote); color: var(--label-2); margin-top: 7px; }

/* A species already in the journal, seen while browsing the guide */
.seen-tick {
  display: inline-flex;
  vertical-align: 1px;
  margin-left: 6px;
  color: var(--tint);
}
.seen-tick svg { width: 13px; height: 13px; display: block; }
.stat .n { font-size: var(--fs-title1); font-weight: 700; letter-spacing: var(--ls-title1); color: var(--tint); font-variant-numeric: tabular-nums; }
.stat .l { font-size: var(--fs-caption1); color: var(--label-2); margin-top: 2px; }

/* Empty state */
.empty { text-align: center; padding: 60px 32px; color: var(--label-2); }
.empty .e { font-size: 52px; }
.empty .e svg {
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto;
  color: var(--label-3);
  stroke-width: 1.4;
}
.empty h3 { color: var(--label); font-size: var(--fs-title3); margin: 14px 0 4px; }
.empty p { font-size: var(--fs-subhead); line-height: var(--lh-subhead); }

/* Toast (fixed dark surface in both modes, so text stays light) */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + var(--sa-bottom));
  transform: translate(-50%, 20px);
  z-index: 80;
  background: rgba(30, 30, 30, 0.92);
  color: #FFFFFF;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: var(--fs-subhead);
  font-weight: 500;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s var(--ease);
  pointer-events: none;
  max-width: 80%;
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-action { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.toast-btn {
  flex: 0 0 auto; background: none; border: 0;
  color: color-mix(in srgb, var(--blue) 55%, #FFFFFF);
  font-size: var(--fs-subhead); font-weight: 700; padding: 2px 2px; cursor: pointer;
}
.toast-btn:active { opacity: 0.6; }

/* Misc helpers */
.muted { color: var(--label-2); }
.center { text-align: center; }
.hpad { padding-left: 16px; padding-right: 16px; }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.entry-photo { width: 100%; border-radius: 12px; margin-top: 4px; display: block; }
.shared-recv { text-align: center; }
.shared-card-wrap { max-width: 420px; margin: 8px auto 2px; }
.shared-card { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 12px 34px rgba(0,0,0,.18); background: var(--bg); }
.shared-note { margin: 14px 20px 2px; color: var(--label-2); font-style: italic; }
.spacer { height: 12px; }
.spacer-lg { height: 28px; }
.wrap-note {
  margin: 8px 16px; padding: 12px 14px;
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border-radius: 12px;
  font-size: var(--fs-footnote); line-height: var(--lh-footnote);
  color: var(--label);
  display: flex; gap: 10px;
}
.wrap-note.danger { background: color-mix(in srgb, var(--red) 12%, transparent); }
.wrap-note .i { flex-shrink: 0; font-size: 18px; }

/* ---- Chip variants (report actions) ---- */
.chip-alert { background: var(--fill-strong); color: var(--label); }
.chip-warn {
  background: color-mix(in srgb, var(--orange) 20%, transparent);
  color: color-mix(in srgb, var(--orange) 60%, var(--label));
}

/* ---------------------------------------- Account + photo grid screens */
.account-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 18px auto 10px;
  font-size: 40px;
}
.account-avatar svg { width: 44px; height: 44px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 8px 16px 16px; }
.photo-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--fill);
}
.photo-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-tile:active { opacity: 0.8; }

/* ---------------------------------------------------------------- Map */
.map-chiprow { padding-top: 8px; padding-bottom: 8px; }
.map-wrap {
  position: relative;
  z-index: 0;
  overflow: hidden;
  height: calc(100dvh - var(--sa-top) - var(--sa-bottom) - 152px);
  min-height: 320px;
  background: var(--bg);
}
#map { position: absolute; inset: 0; background: var(--bg); }
.map-msg { display: grid; place-items: center; height: 100%; padding: 24px; text-align: center; color: var(--label-2); }
.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, 0.22);
  display: grid; place-items: center; font-size: 24px;
  transition: transform 0.08s;
}
.fab:active { transform: scale(0.92); }
.fab svg { width: 24px; height: 24px; color: var(--tint); }
.fab-bear { background: var(--tint); }
.map-hint {
  position: absolute; left: 12px; right: 76px; top: 70px; z-index: 500;
  background: rgba(28, 28, 30, 0.92); color: #FFFFFF;
  padding: 10px 14px; border-radius: 12px; font-size: var(--fs-footnote); line-height: 1.35;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s; pointer-events: none;
}
.map-hint.show { opacity: 1; transform: none; }
.hint-btn {
  pointer-events: auto; margin-left: 6px;
  background: rgba(255, 255, 255, 0.2); color: #FFFFFF;
  border-radius: 8px; padding: 4px 9px; font-size: var(--fs-caption1); font-weight: 600; min-height: 30px;
}
.map-note {
  position: absolute; left: 12px; right: 76px; bottom: 12px; z-index: 500;
  background: rgba(28, 28, 30, 0.92); color: #FFFFFF; padding: 8px 12px; border-radius: 10px;
  font-size: var(--fs-caption1); line-height: 1.35;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.map-note[hidden] { display: none; }

/* Fishing integration: the open-season pill, the parks pin colour and the
   zone-number labels the fishing-zones map layer draws. Tokens only. */
.badge-open {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: color-mix(in srgb, var(--green) 55%, var(--label));
}
.pin-park { background: var(--purple); }
.zone-label-wrap { background: none; border: 0; }
.zone-label {
  display: inline-block;
  transform: translate(-50%, -50%);
  min-width: 26px;
  text-align: center;
  padding: 3px 7px;
  border-radius: 100px;
  background: var(--card);
  color: var(--label);
  font-size: var(--fs-footnote);
  line-height: var(--lh-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-float);
  pointer-events: none;
}

/* Leaflet teardrop pins built from divIcons */
.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, 0.4);
  display: grid; place-items: center;
}
.pin-i { transform: rotate(45deg); font-size: 16px; line-height: 1; }
.pin-wild { background: var(--green); }
.pin-bear { background: var(--graphite); }
.pin-hazard { background: var(--orange); }
.leaflet-popup-content { font-family: var(--font-sys); font-size: var(--fs-footnote); }
.leaflet-popup-content b { font-weight: 600; }
.leaflet-popup-content a { color: var(--tint); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--card); color: var(--label); }
.leaflet-container a.leaflet-popup-close-button { color: var(--label-2); }

/* ---------------------------------------------------- Learn articles */
.article-intro { margin: 8px 20px 4px; font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); color: var(--label); }
.article-sec { margin: 16px 20px; }
.article-sec h3 { font-size: var(--fs-title3); line-height: var(--lh-title3); margin: 0 0 6px; letter-spacing: var(--ls-title3); }
.article-sec p { margin: 0 0 8px; font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); color: var(--label); }
.article-sec ul, .article-sec ol { margin: 4px 0 8px; padding-left: 22px; }
.article-sec li { font-size: var(--fs-callout); line-height: var(--lh-callout); letter-spacing: var(--ls-callout); margin-bottom: 6px; color: var(--label); }
.callout { margin: 10px 0; padding: 12px 14px; border-radius: 12px; font-size: var(--fs-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); color: var(--label); }
.callout-t { font-weight: 700; margin-bottom: 3px; }
.callout-info { background: var(--tint-soft); }
.callout-warn { background: color-mix(in srgb, var(--orange) 15%, transparent); }
.callout-danger { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* -------------------------------------------------- Hazard type grid */
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px 0; }
.type-opt {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 12px; padding: 12px 14px;
  font-size: var(--fs-subhead); color: var(--label); text-align: left;
  border: 2px solid transparent; transition: border-color 0.12s, background 0.12s;
}
.type-opt .te { font-size: 22px; flex-shrink: 0; }
.type-opt.on { border-color: var(--tint); background: var(--tint-soft); }

/* ------------------------------------------ Reliability / anomaly bars */
.riskbar { display: block; margin-top: 8px; height: 6px; border-radius: 3px; background: var(--fill-strong); overflow: hidden; }
.riskbar-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.4s var(--ease); }
.zrow { padding: 9px 16px; }
.zrow-top { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-footnote); }

/* ------------------------------------------------------------- Badges */
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 16px 8px; }
.badge-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius-card);
  padding: 16px 14px;
  text-align: center;
  overflow: hidden;
}
.badge-card.locked { opacity: 0.5; filter: grayscale(0.9); }
.badge-ico { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.badge-name { font-size: var(--fs-subhead); font-weight: 600; letter-spacing: var(--ls-subhead); }
.badge-desc { font-size: var(--fs-caption1); color: var(--label-2); margin-top: 3px; line-height: var(--lh-caption1); }
.badge-chk {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--tint); color: var(--on-tint);
  font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
@media (min-width: 640px) {
  .badge-grid { grid-template-columns: 1fr 1fr 1fr; }
  .card-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* =====================================================================
   Part 3: vendor/leaflet/leaflet.css folded in verbatim so the page
   loads one stylesheet. Image URLs are rewritten to reach the vendored
   sprite files from assets/. Do not hand-edit beyond the url() paths.
   ===================================================================== */
/* 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;
		}
	}

/* first-run privacy sheet, shipped statically in index.html so it paints
   before any script; hidden the instant the head script sees prior consent */
.privacy-ok .privacy-static { display: none; }

/* =====================================================================
   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;
}
/* an explicitly chosen Light theme stays parks too: the core theme
   block re-tints at higher specificity, so parks answers it here */
:root[data-theme="light"] {
  --tint: #284162; --tint-press: #243850; --tint-text: #284162; --tint-fill: #26374A;
  --tint-soft: rgba(40, 65, 98, .12);
  --tone2: #355688; --tone3: #A62A1E;
}

: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 {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .25s;
}
.ios-header.is-scrolled, .ios-header.scrolled, .nav.is-scrolled, .nav.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:not(.on),
: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 {
  background: var(--glass-wash);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 var(--glass-base);
}
/* 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"]) .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 {
    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 */
.badge-info.on { background: var(--tone2); }

/* =====================================================================
   Appearance wiring, app side. Everything the appearance layer above
   needs from the page: the large title blends like the headers do, the
   five-tab bar fits a 320px phone, and the Appearance panel's own
   controls (palette swatches, face previews). Tokens only.
   ===================================================================== */

/* the large title is page, not chrome: no wash of its own at rest */
.large-title {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* five tabs: pills flex to the bar instead of forcing 62px minimums */
.ios-tabbar .ios-tab { min-width: 0; flex: 1 1 0; padding: 0 6px; max-width: 104px; }

/* swatch dot tokens: each palette's three tones, both schemes, so the
   picker can show all three palettes at once whatever is active */
:root {
  --sw-parks-1: #284162; --sw-parks-2: #355688; --sw-parks-3: #A62A1E;
  --sw-field-1: #2E7D4F; --sw-field-2: #6B7F3E; --sw-field-3: #E8A13D;
  --sw-granite-1: #5E5CE6; --sw-granite-2: #6E6E73; --sw-granite-3: #F5C400;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sw-parks-1: #8FB0DC; --sw-parks-2: #4C76B0; --sw-parks-3: #E8604C;
    --sw-field-1: #30D158; --sw-field-2: #ACD98A; --sw-field-3: #FFB340;
    --sw-granite-1: #7D7AFF; --sw-granite-2: #98989D; --sw-granite-3: #FFD60A;
  }
}
:root[data-theme="dark"] {
  --sw-parks-1: #8FB0DC; --sw-parks-2: #4C76B0; --sw-parks-3: #E8604C;
  --sw-field-1: #30D158; --sw-field-2: #ACD98A; --sw-field-3: #FFB340;
  --sw-granite-1: #7D7AFF; --sw-granite-2: #98989D; --sw-granite-3: #FFD60A;
}

.pal-field { flex-wrap: wrap; }
.pal-row { display: flex; gap: 10px; }
.pal-opt { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pal-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 44px;
  min-width: 44px;
  padding: 0 11px;
  border-radius: 22px;
  background: var(--fill);
  border: 2px solid transparent;
}
.pal-swatch.on { border-color: var(--tint); }
.pal-swatch .dot { width: 11px; height: 11px; border-radius: 50%; }
.pal-swatch--parks .dot:nth-child(1) { background: var(--sw-parks-1); }
.pal-swatch--parks .dot:nth-child(2) { background: var(--sw-parks-2); }
.pal-swatch--parks .dot:nth-child(3) { background: var(--sw-parks-3); }
.pal-swatch--field .dot:nth-child(1) { background: var(--sw-field-1); }
.pal-swatch--field .dot:nth-child(2) { background: var(--sw-field-2); }
.pal-swatch--field .dot:nth-child(3) { background: var(--sw-field-3); }
.pal-swatch--granite .dot:nth-child(1) { background: var(--sw-granite-1); }
.pal-swatch--granite .dot:nth-child(2) { background: var(--sw-granite-2); }
.pal-swatch--granite .dot:nth-child(3) { background: var(--sw-granite-3); }
.pal-name { font-size: var(--fs-caption1); line-height: var(--lh-caption1); color: var(--label-2); }

/* face rows: each label previews its own face */
.face-label--parks { font-family: "Lato", "Noto Sans", sans-serif; }
.face-label--system { font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif; }
.face-label--rounded { font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.face-label--serif { font-family: ui-serif, "New York", Georgia, "Times New Roman", serif; }
.face-label--avenir { font-family: "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
.face-label--mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.face-check { margin-left: auto; display: flex; color: var(--tint); }
.face-check svg { width: 18px; height: 18px; }

/* the birding stat strip carries a name, not a number */
.stat .n.stat-name {
  font-size: var(--fs-subhead);
  line-height: var(--lh-subhead);
  letter-spacing: var(--ls-subhead);
  min-height: var(--lh-title1);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* on phone widths a labelled segmented row in a sheet stacks so every
   option keeps a comfortable target. Appearance rows below opt out:
   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; }
}

/* pushed screens name themselves below the back bar, like on-site's park
   pages: the page title sits at the park-name size, on the 16px grid */
.page-title h1 { font-size: var(--fs-title1); line-height: var(--lh-title1); letter-spacing: var(--ls-title1); }

/* the species head, on-site's park-head structure: emoji tile, then the
   name and scientific name at the left, the favourite pill at the right */
.sp-head { padding: 6px 16px 0; }
.sp-titlerow { display: flex; align-items: center; gap: 12px; }
.sp-titlerow .sp-emoji { width: 48px; height: 48px; font-size: 26px; border-radius: 12px; display: grid; place-items: center; flex: none; margin: 0; }
.sp-name { flex: 1 1 auto; min-width: 0; }
.sp-name h1 { margin: 0; font-size: var(--fs-title1); line-height: var(--lh-title1); letter-spacing: var(--ls-title1); font-weight: 700; }
.sp-name .sci { color: var(--label-2); font-style: italic; font-size: var(--fs-subhead); margin-top: 1px; }
.sp-badges { margin-top: 10px; }

/* the favourite pill, exactly as on-site draws it beside a park's name */
.favpill {
  flex: none;
  min-height: var(--ctl);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  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 About story reads as plain paragraphs, exactly as on-site sets it */
.aboutbody { margin: 0 calc(var(--gutter) + 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; }

/* Appearance rows, the same pattern the on-site app wears: 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-row { justify-content: space-between; }
.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; }
.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; }

/* =====================================================================
   ios.css desktop layer: the responsive arrangement for big screens.
   Under 700px nothing here applies and the phone chrome stays exactly
   as it is. From 700px (tablet) the content column relaxes and bottom
   sheets become centered dialogs. From 1100px (desktop) the page reads
   as a normal website: a solid 60px top bar, the tab bar restyled as a
   fixed 264px left sidebar of labelled rows, and one wide main column.
   Plain media queries, tokens only, no JS, so a window resize reflows
   live and everything works with JS off.
   ===================================================================== */

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

/* ------------------------------------------------------------ tablet */
@media (min-width: 700px) {
  #app { max-width: 900px; }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  /* bottom sheets become centered dialogs. the base sheet slides in
     from the bottom edge with translateY, so both states are restated
     here to keep the open and close transitions working; a small fade
     is added because a dialog parked 24px low would otherwise sit in
     full view during the close. the scrim and grabber are unchanged. */
  .sheet, :root:not([data-glass="off"]) .sheet {
    left: 50%; right: auto; top: 8vh; bottom: auto;
    width: min(560px, 92vw);
    max-height: 84vh;
    border-radius: 16px;
    transform: translate(-50%, 24px);
    opacity: 0;
    transition: transform 0.34s var(--ease), opacity 0.34s var(--ease);
  }
  /* the glass variant is restated here too: the closed-state selector
     above carries (0,3,0), so a plain .sheet.show would lose to it and
     the dialog would stay parked low and transparent */
  .sheet.show, :root:not([data-glass="off"]) .sheet.show { transform: translate(-50%, 0); opacity: 1; }
}

/* ----------------------------------------------------------- desktop */
@media (min-width: 1100px) {
  /* room for the fixed sidebar, only on pages that have the real tab
     bar. the styleguide shows a static demo capsule (.ios-tabbar--demo)
     and demo headers, so the chrome rules below exclude the demo and
     scope the header restyle to pages that carry the real bar. */
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) { padding-left: 264px; }

  #app { max-width: 1016px; margin: 0 auto; padding-top: 60px; }

  /* the top bar: solid, full width, never frosted. the scrolled and
     glass variants carry higher specificity, so they are restated
     here or the frost would win back past 8px of scroll. */
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .ios-header,
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .ios-header.is-scrolled,
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .ios-header.scrolled,
  :root:not([data-glass="off"]) body:has(.ios-tabbar:not(.ios-tabbar--demo)) .ios-header.is-scrolled,
  :root:not([data-glass="off"]) body:has(.ios-tabbar:not(.ios-tabbar--demo)) .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;
  }
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .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; }

  /* pushed screens carry a .nav backbar instead of the header; it takes
     the same solid top bar treatment so no screen sits under a bare
     60px strip. same restatements against the frost variants. */
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .nav,
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .nav.is-scrolled,
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .nav.scrolled,
  :root:not([data-glass="off"]) body:has(.ios-tabbar:not(.ios-tabbar--demo)) .nav.is-scrolled,
  :root:not([data-glass="off"]) body:has(.ios-tabbar:not(.ios-tabbar--demo)) .nav.scrolled {
    position: fixed; top: 0; left: 0; right: 0;
    padding-top: 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;
  }
  body:has(.ios-tabbar:not(.ios-tabbar--demo)) .nav-row { height: 60px; padding: 0 12px; }

  /* the tab bar becomes the sidebar. same specificity discipline: the
     glass capsule selectors are restated so the wash does not win. */
  .ios-tabbar:not(.ios-tabbar--demo),
  :root:not([data-glass="off"]) .ios-tabbar:not(.ios-tabbar--demo) {
    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;
  }
  .ios-tabbar:not(.ios-tabbar--demo) .ios-tab,
  :root:not([data-glass="off"]) .ios-tabbar:not(.ios-tabbar--demo) .ios-tab[aria-current="page"],
  :root:not([data-glass="off"]) .ios-tabbar:not(.ios-tabbar--demo) .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;
  }
  .ios-tabbar:not(.ios-tabbar--demo) .ios-tab svg { width: 18px; height: 18px; }
  .ios-tabbar:not(.ios-tabbar--demo) .ios-tab span { font-size: var(--fs-subhead); line-height: 1; }
  .ios-tabbar:not(.ios-tabbar--demo) .ios-tab:hover { background: var(--fill); }
  .ios-tabbar:not(.ios-tabbar--demo) .ios-tab[aria-current="page"],
  .ios-tabbar:not(.ios-tabbar--demo) .ios-tab.active { background: var(--tint-soft); color: var(--tint-text); }

  /* the large title is a page heading now, like Home on the github page */
  .large-title { position: static; padding: 28px 0 4px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* desktop pages do not slide sideways */
  .screen { animation: none; }
  .screen.sc-anim { transition: none; }
  #app.nav-animating .screen { position: static; }
  /* with the transitions off the outgoing screen would sit stacked in
     the flow until the 420ms cleanup timer removes it; hide it so a
     push or pop reads as an instant swap */
  #app.nav-animating .screen:not(:last-child) { display: none; }

  /* no bottom capsule on desktop, so the map runs to the bottom edge:
     60px top bar plus the 60px chip row leave the rest of the viewport.
     the map page also drops the body's capsule clearance so nothing
     scrolls below the map. */
  .map-wrap { height: calc(100dvh - 120px); }
  body:has(.map-wrap) { padding-bottom: 0; }
}

/* =====================================================================
   ios.css github round: 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 section hands over to the next, GitHub's own dark room
   for the untouched default, and the section-with-ellipsis system.
   ===================================================================== */

/* -------------------------------------------------- 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:not(.on), .fchip:not(.on), .fab,
:root:not([data-glass="off"]) .segmented,
:root:not([data-glass="off"]) .chip:not(.on),
: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);
}
/* the bear fab keeps its tint over the flat rule above */
.fab-bear, :root:not([data-glass="off"]) .fab-bear {
  background: var(--tint);
  color: var(--on-tint);
}
: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. */
  .ios-tabbar,
  :root:not([data-glass="off"]) .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);
  }
  .ios-tabbar .ios-tab {
    height: 52px;
    border-radius: 26px;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--label);
  }
  .ios-tab[aria-current="page"], .ios-tab.on,
  :root:not([data-glass="off"]) .ios-tab[aria-current="page"],
  :root:not([data-glass="off"]) .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. */
  .ios-header, .ios-header.scrolled, .ios-header.is-scrolled, .nav, .nav.scrolled, .nav.is-scrolled,
  :root:not([data-glass="off"]) .ios-header.scrolled,
  :root:not([data-glass="off"]) .ios-header.is-scrolled,
  :root:not([data-glass="off"]) .nav.scrolled,
  :root:not([data-glass="off"]) .nav.is-scrolled {
    background: transparent;
    background-image: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  .ios-header::before, .nav::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;
  }
  .ios-header.scrolled::before, .ios-header.is-scrolled::before,
  .nav.scrolled::before, .nav.is-scrolled::before { opacity: 1; }

  /* ------------------------------- glass, kept for the handover only */
  /* switching sections: the incoming screen resolves out of a soft
     blur. glass off or reduced motion keeps the plain fade. */
  /* only tab switches: push and pop keep their native slide (.sc-anim) */
  :root:not([data-glass="off"]) .screen:not(.sc-anim) { 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) {
    .screen, :root:not([data-glass="off"]) .screen:not(.sc-anim) { animation: none; }
  }

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

/* --------------------------------------- the shared dark room, default */
/* the untouched default wears the same dark room as on-site: the soft
   near-black canvas, its cards and separators, its blue, the system
   face with SF tracking. an explicitly chosen palette or face keeps
   its word. */
@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;
    --sw-parks-1: #4493F8; --sw-parks-2: #316DCA; --sw-parks-3: #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;
  --sw-parks-1: #4493F8; --sw-parks-2: #316DCA; --sw-parks-3: #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;
}

/* ------------------------------------ sections, the github home way */

/* =====================================================================
   ios.css polish round: gated saves, the quiet appearance panel, and
   the apple maps style map with one control card up top.
   ===================================================================== */

/* a save that is not ready yet reads grey and does nothing */
.nav-btn:disabled { color: var(--label-3); }

/* settings taps re-render in place; the class rides the screen itself
   so removing it can never restart the entry animation */
.screen.no-anim,
:root:not([data-glass="off"]) .screen.no-anim:not(.sc-anim) { animation: none; }

/* the map control card floats over the map like apple maps: one place
   for what shows (filters) and what draws (layers) */
.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;
  /* solid over the map: frosting live tiles costs frames on a phone */
  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; background: transparent; }
.map-card .chip.on { background: var(--tint); color: var(--on-tint); }
.map-card .chip-sep { flex: 0 0 1px; align-self: stretch; margin: 4px 2px; background: var(--sep); }
@media (prefers-reduced-transparency: reduce) {
  .map-wrap .map-card { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* =====================================================================
   ios.css journal round: the app sits beside Apple's Journal, Settings
   and Maps. Liquid glass returns to the chrome layer only (the header
   cluster and round controls; content stays standard material, as the
   HIG's layer model asks). Grouped cards grow to 26px corners with a
   squircle where the browser has one, and motion rides one curve at
   two speeds.
   ===================================================================== */

/* ------------------------------------------------- tokens, this round */
:root {
  --ease-snappy: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-smooth: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-snappy: 350ms;
  --dur-smooth: 550ms;
  --r-card: 26px;
  /* the glass primitive, light room */
  --glass-fill: rgba(255, 255, 255, .55);
  --glass-spec: rgba(255, 255, 255, .65);
  --glass-lit: rgba(255, 255, 255, .75);
  --glass-lit-2: rgba(255, 255, 255, .25);
  --glass-drop: 0 8px 24px rgba(0, 0, 0, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --glass-fill: rgba(255, 255, 255, .07);
    --glass-spec: rgba(255, 255, 255, .18);
    --glass-lit: rgba(255, 255, 255, .22);
    --glass-lit-2: rgba(255, 255, 255, .06);
    --glass-drop: 0 8px 32px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --glass-fill: rgba(255, 255, 255, .07);
  --glass-spec: rgba(255, 255, 255, .18);
  --glass-lit: rgba(255, 255, 255, .22);
  --glass-lit-2: rgba(255, 255, 255, .06);
  --glass-drop: 0 8px 32px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------ the .glass primitive */
/* blur + saturation lift, a specular top line, a floating shadow, and a
   1px top-lit border painted on a masked pseudo element so it fades from
   lit to faint without a hard stroke. SVG displacement refraction was
   measured and rejected: backdrop-filter: url() only renders in
   Chromium, so it would vanish on the iPhone this app lives on. */
.glass {
  position: relative;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-drop);
}
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-lit), var(--glass-lit-2));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* the header actions become one floating glass capsule, the search plus
   ellipsis cluster in Apple's own apps. buttons inside go bare. phone
   and tablet only: the desktop web layer keeps its own top bar. */
@media (max-width: 1099.98px) {
  :root:not([data-glass="off"]) .ios-header-actions {
    position: relative;
    gap: 0;
    border-radius: 22px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-drop);
  }
  :root:not([data-glass="off"]) .ios-header-actions::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, var(--glass-lit), var(--glass-lit-2));
    -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  :root:not([data-glass="off"]) .ios-header-actions .ios-glass-btn {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  :root:not([data-glass="off"]) .ios-header-actions .ios-glass-btn:active {
    background: var(--press-pill);
  }
  /* the tab capsule keeps its geometry and picks up the specular line */
  .ios-tabbar,
  :root:not([data-glass="off"]) .ios-tabbar {
    box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-drop);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glass,
  :root:not([data-glass="off"]) .ios-header-actions {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ----------------------------------------- 26px cards, squircle where */
.list, .ios-group { border-radius: var(--r-card); }
@supports (corner-shape: squircle) {
  .list, .ios-group,
  .ios-header-actions, .ios-tabbar { corner-shape: squircle; }
}

/* section names keep on-site's voice: headline size, semibold */

/* --------------------------------------------------- press physics */
/* cards scale under the finger and spring back; transform only */
.tap-scale {
  transition: transform var(--dur-snappy) var(--ease-snappy);
  -webkit-tap-highlight-color: transparent;
}
.tap-scale:active { transform: scale(.97); transition-duration: 120ms; }


/* ----------------------------- the home list, Journal's row voice */
.home-list .cell { min-height: 52px; }
.home-list .cell-value { font-size: var(--fs-body); }

/* ------------------------------------------- step 2: pushed screens */
/* glass circles remain for the right-side screen actions (search,
   the species menu); the back button itself is the labelled tint
   chevron above. */
.nav-btn.nav-circle {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  margin-left: 8px;
  border-radius: 50%;
  justify-content: center;
  color: var(--label);
  position: relative;
  background: var(--fill);
}
.nav-right .nav-btn.nav-circle { margin-left: 0; margin-right: 4px; }
.nav-btn.nav-circle svg { width: 20px; height: 20px; }
.nav-btn.nav-circle:active { opacity: 1; background: var(--press-pill); }
:root:not([data-glass="off"]) .nav-btn.nav-circle {
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-spec), 0 4px 14px rgba(0, 0, 0, .18);
}
@media (prefers-reduced-transparency: reduce) {
  :root:not([data-glass="off"]) .nav-btn.nav-circle {
    background: var(--card);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* detail screens carry a vertical tint: the canvas at the top melting
   into a very dark pass of the accent at the bottom, like Journal's
   entry pages. light rooms keep their plain canvas. */
:root { --bg-deep: var(--bg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg-deep: #131F33; }
}
:root[data-theme="dark"] { --bg-deep: #131F33; }
.screen.is-push {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 42%, var(--bg-deep) 100%);
  min-height: 100dvh;
}

/* push and pop, the brief's numbers: incoming rides in from the full
   right; outgoing steps back 28% and dims 15%. transform and opacity
   only. */
.screen.sc-exit-left { transform: translateX(-28%); opacity: 0.85; }

/* ---------------------------------- step 2: category entry cards */
/* species rows read like Journal entries: bold name, one secondary
   line, a metadata footer with an ellipsis that opens real actions. */
.jcards .list {
  background: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.jcards .cell {
  border-radius: 18px;
  padding: 12px 16px;
  align-items: flex-start;
}
.jcards .cell + .cell::before { display: none; }
.jcards .cell-emoji { margin-top: 2px; }
.jcards .cell-title { font-weight: 600; }
.cell-cover { position: absolute; inset: 0; border-radius: inherit; }
.cell-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--fs-footnote);
  letter-spacing: var(--ls-footnote);
  color: var(--label-2);
}
.cell-foot .meta { flex: 1 1 auto; min-width: 0; }
.cell-more {
  position: relative;
  z-index: 2;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--label-2);
  background: none;
  flex: none;
}
.cell-more svg { width: 18px; height: 18px; }
.cell-more:active { background: var(--fill); }
@supports (corner-shape: squircle) {
  .jcards .cell { corner-shape: squircle; }
}

/* the accent FAB on list screens: springs away as you scroll down,
   returns the moment you scroll back up */
.fab-log {
  position: fixed;
  right: 20px;
  bottom: calc(94px + var(--sa-bottom));
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--tint-fill);
  color: var(--on-tint);
  display: grid;
  place-items: center;
  z-index: 45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform var(--dur-snappy) var(--ease-snappy);
}
.fab-log svg { width: 26px; height: 26px; }
.fab-log.fab-hide { transform: translateY(150px) scale(.9); }
.fab-log:active { transform: scale(.94); }

/* ------------------------------------- step 2: bottom search pill */
/* a glass pill above the tab capsule, as Settings and Maps carry it.
   it opens the existing universal search. */
.bottom-search {
  position: fixed;
  left: 22px;
  right: 22px;
  bottom: calc(84px + var(--sa-bottom));
  margin: 0 auto;
  max-width: 560px;
  height: 46px;
  border-radius: 23px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  color: var(--label-2);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  text-decoration: none;
  z-index: 45;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 1px 0 var(--glass-spec), var(--glass-drop);
}
.bottom-search svg { width: 18px; height: 18px; flex: none; }
.bottom-search:active { background: var(--press-pill); }
.spacer-pill { height: 72px; }
@media (prefers-reduced-transparency: reduce) {
  .bottom-search { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 1100px) {
  .bottom-search, .fab-log { display: none; }
}

/* --------------------------------- step 2: species full-bleed hero */
/* the photo runs edge to edge under the transparent nav, melts into
   the page at its base, and the glass back circle floats on it. the
   emoji hero stays as the offline and photos-off fallback. */
.sp-hero { position: relative; }
.sp-hero.has-photo { margin-top: calc(-44px - var(--sa-top)); }
.sp-photo-full { display: none; }
.sp-hero.has-photo .sp-photo-full { display: block; }
.sp-photo-full .sp-photo-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(180deg, black 74%, transparent 100%);
  mask-image: linear-gradient(180deg, black 74%, transparent 100%);
}
.sp-photo-full .photo-credit { text-align: right; padding: 0 16px; margin-top: -14px; position: relative; }
.sp-hero.has-photo + .hero { padding-top: 0; }

/* -------------------------------------------- step 2: the map, maps */
/* full bleed: the map runs under the transparent header and the tab
   capsule; the control cluster becomes one vertical glass stack on
   the right, above the search pill. */
.map-wrap {
  margin-top: calc(-60px - var(--sa-top));
  height: 100dvh;
  min-height: 100dvh;
}
.map-wrap .map-card { top: calc(var(--sa-top) + 64px); }
.map-hint { top: calc(var(--sa-top) + 122px); }
.map-fabs {
  bottom: calc(var(--sa-bottom) + 148px);
  gap: 0;
  padding: 3px;
  border-radius: 16px;
  /* solid over the map: frosting live tiles costs frames on a phone */
  background: var(--card);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.map-fabs .fab,
.map-fabs .fab-bear,
:root:not([data-glass="off"]) .map-fabs .fab {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: none;
  box-shadow: none;
  font-size: 21px;
  color: var(--label);
}
.map-fabs .fab + .fab { position: relative; }
.map-fabs .fab + .fab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: 0.5px;
  background: var(--sep);
}
.map-note { bottom: calc(var(--sa-bottom) + 148px); }
@media (prefers-reduced-transparency: reduce) {
  .map-fabs { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (min-width: 1100px) {
  .map-wrap { margin-top: 0; height: calc(100dvh - 160px); min-height: 320px; }
  .map-wrap .map-card { top: 10px; }
  .map-fabs { bottom: 16px; }
}

/* --------------------------------------- step 2: sheets that breathe */
/* the page steps back while a sheet is up, and the sheet follows the
   finger down: past the threshold it dismisses, otherwise it springs
   back. reduced motion keeps the plain fade and no scale. */
@media (prefers-reduced-motion: no-preference) {
  #app { transition: transform 0.34s var(--ease-smooth); }
  html.sheet-lock #app { transform: scale(.965); border-radius: 14px; overflow: hidden; }
}
.sheet.dragging { transition: none; }
.sheet-grabber { position: relative; }
.sheet-grabber::after {
  content: "";
  position: absolute;
  top: -12px;
  left: -60px;
  right: -60px;
  height: 40px;
}

/* --------------------------------- step 2: results animate in */
.anim-in > * { animation: rise-in 0.3s var(--ease-snappy) both; }
.anim-in > *:nth-child(2) { animation-delay: 0.05s; }
.anim-in > *:nth-child(3) { animation-delay: 0.1s; }
.anim-in > *:nth-child(n+4) { animation-delay: 0.14s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
}


/* ------------------------------------------------ polish round */
/* the search pill goes solid while it floats over the live map */
.map-wrap .bottom-search {
  background: var(--card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* the iOS activity spinner: eight blades fading in turn */
.ios-spinner {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: none;
}
.ios-spinner span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.5px;
  height: 6.5px;
  margin-left: -1.25px;
  border-radius: 2px;
  background: var(--label-2);
  transform-origin: 50% 11px;
  animation: spinner-fade 0.8s linear infinite;
}
@keyframes spinner-fade { from { opacity: 1; } to { opacity: 0.15; } }
.map-msg { display: grid; place-items: center; gap: 10px; align-content: center; }
/* the account avatar breathes before the name card */
.account-avatar { margin: 6px auto 18px; }
/* journal spacing sits on the same rhythm as every other screen */
.lifecard { margin-top: 8px; }
.stat-grid { gap: 10px; }


/* the journal's category filter: a native select in a settings row, so the
   system menu does the picking and nine categories never scroll sideways.
   Right-aligned like any iOS value, with a drawn chevron on the row because
   an unstyled select carries no glyph once its appearance is reset. */
.field > .ios-select {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: -8px 0;
  padding: 0 16px 0 8px;
  border: 0;
  border-radius: var(--radius-btn);
  background: none;
  outline: none;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-body);
  color: var(--label-2);
  text-align: right;
  text-align-last: right;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.field:has(> .ios-select) { position: relative; }
.field:has(> .ios-select)::after {
  content: '';
  position: absolute;
  right: 19px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid var(--label-3);
  border-bottom: 2px solid var(--label-3);
  transform: rotate(45deg);
  pointer-events: none;
}