/* =====================================================================
   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, .60);
  --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;

  /* 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, .60);
  --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: 44px;
  height: 44px;
  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: 44px;
  height: 44px;
  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;
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: var(--ls-title1);
  line-height: var(--lh-title1);
  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; }

/* =====================================================================
   Leaflet 1.9.x (vendored), folded in so every page loads one
   stylesheet. Image urls point back at the vendored copy under
   vendor/leaflet/images; the rules are upstream, unchanged apart from
   the type sweep: families on var(--font-sys), sizes on the scale.
   ===================================================================== */
/* 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 17px var(--font-sys);
	text-indent: 1px;
	}

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


/* layers control */

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

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


/* attribution and scale controls */

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

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


/* popup */

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

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

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

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

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

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


/* div icon */

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


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

/* Directions */

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

/* Printing */

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

/* =====================================================================
   ios.css, part 2 of 2: on-fishing app styles.
   Ported from the retired styles.css. All colour comes from the core
   token blocks at the top of this file; only layout tokens live here.
   The zone map keeps its own treatment (tile filters, label halos).
   ===================================================================== */
:root{
  /* app layout tokens, no colours */
  --r:16px; --r-sm:12px; --r-xs:10px;
  --sa-top:env(safe-area-inset-top,0px); --sa-bottom:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.32,.72,0,1);
  /* older app rules and the park pin read these names */
  --forest:var(--tint); --ink:var(--label); --shadow:var(--shadow-float);
}

  *{-webkit-tap-highlight-color:transparent}
  html,body{height:100%}
  /* the panel is the scroller here, not the body; its footer carries the
     88px clearance for the floating tab bar instead */
  body{padding-bottom:0}
  button,input,select{font-family:inherit;color:inherit}

  /* layout ------------------------------------------------------------- */
  #app{display:flex;height:100dvh;width:100%}
  #mapwrap{position:relative;flex:1 1 auto;min-width:0;isolation:isolate;z-index:0}
  #map{position:absolute;inset:0;background:var(--bg-secondary);-webkit-touch-callout:none;-webkit-user-select:none}
  #panel{flex:0 0 44%;max-width:560px;min-width:340px;height:100%;overflow-y:auto;
    background:var(--bg);border-left:.5px solid var(--separator);display:flex;flex-direction:column}
  .inner{width:100%;max-width:720px;margin:0 auto;padding:0 16px;flex:1 0 auto}
  .pullwrap{display:none}
  @media (max-width:860px){
    #app{display:block;height:100dvh}
    #mapwrap{position:fixed;inset:0;z-index:0}
    #panel{position:fixed;left:0;right:0;top:0;bottom:0;width:100%;max-width:none;min-width:0;
      height:auto;z-index:20;border-left:none;background:var(--bg);
      overflow-y:auto;overscroll-behavior:contain;
      transform:none !important;border-radius:0;box-shadow:none}
    #panel.min,#panel.drag{transform:none !important;border-radius:0;box-shadow:none}
    #panel .appbar,#panel.min .appbar{transform:none !important}
    body.tab-map #panel{display:none}
  }

  /* ios chrome inside the panel: .inner already carries the 16px gutter */
  #panel .ios-header{flex:none}
  .inner .ios-section-title{padding-left:0}
  .inner .ios-section-title .ios-overflow{margin-right:0}
  .inner .ios-group{margin-left:0;margin-right:0}
  .inner .ios-group-foot{margin-left:0;margin-right:0}
  .group .ios-group{margin-bottom:0}
  .ios-row .segmented{width:100%}
  /* accordion rows inside an inset group */
  .ios-group>details>summary{list-style:none;cursor:pointer}
  .ios-group>details>summary::-webkit-details-marker{display:none}
  .ios-group>details>summary .ios-chevron{transition:transform .2s var(--ease)}
  .ios-group>details[open]>summary .ios-chevron{transform:rotate(90deg)}
  .ios-group details+details>.ios-row::before,
  .ios-group .ios-row--plain+details>.ios-row::before{content:"";position:absolute;top:0;left:14px;right:0;
    height:.5px;background:var(--sep)}
  .ios-group .aboutbody{padding:4px 14px}

  /* account view: the shared profile screen, identical across the apps -- */
  .acct-hero{display:flex;flex-direction:column;align-items:center;gap:8px;margin:14px 0 6px}
  .acct-avatar{width:84px;height:84px;border-radius:50%;background:var(--fill-strong);color:var(--label);
    display:flex;align-items:center;justify-content:center;font-size:var(--fs-large-title);font-weight:600;overflow:hidden}
  .acct-avatar svg{width:40px;height:40px;color:var(--label-2)}
  .acct-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 24px}
  .acct-stat{background:var(--card);border-radius:var(--r-sm);padding:12px 8px;text-align:center;min-width:0}
  .acct-stat b{display:block;font-size:var(--fs-title2);font-variant-numeric:tabular-nums;color:var(--label)}
  .acct-stat span{display:block;font-size:var(--fs-caption2);font-weight:600;color:var(--label-2);
    text-transform:uppercase;letter-spacing:.05em;margin-top:3px}
  .acct-input{flex:1;min-width:0;background:none;border:0;outline:none;font-size:var(--fs-body);
    color:var(--label);text-align:right;font-family:var(--font-sys);padding:8px 0}
  .acct-input::placeholder{color:var(--label-3)}
  .acct-input:focus-visible{outline:2px solid var(--tint);outline-offset:2px;border-radius:6px}
  label.ios-row{cursor:text}

  /* header ------------------------------------------------------------- */
  .appbar{padding:6px 0 8px}
  .eyebrow{font-size:13px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
  .titlebar{display:flex;align-items:baseline;justify-content:space-between;gap:9px}
  h1{font-weight:700;font-size:34px;line-height:41px;letter-spacing:var(--ls-large-title);margin:2px 0 0;cursor:pointer;min-height:44px;display:flex;align-items:center}
  .ver{position:relative;appearance:none;font-weight:600;font-size:15px;color:var(--tint);white-space:nowrap;padding:6px 4px;margin:0}
  /* Fitts: the label stays small and quiet, the thing you aim at does not. */
  .ver::after{content:"";position:absolute;top:50%;left:-6px;right:-6px;height:44px;transform:translateY(-50%)}
  .sub{color:var(--label-2);font-size:15px;margin-top:4px;line-height:var(--lh-subhead)}
  .sub a{color:var(--tint)}
  .seclabel{font-size:13px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;
    color:var(--label-2);margin:22px 4px 8px}
  .seclabel.grey{color:var(--label-2)}
  .zhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0 2px}
  .zhead h2{font-size:28px;font-weight:700;letter-spacing:var(--ls-title1);color:var(--label);margin:0;line-height:34px}
  .meta{font-size:13px;color:var(--label-2);margin:4px 0 0;font-variant-numeric:tabular-nums}
  .navback{appearance:none;display:inline-flex;align-items:center;gap:3px;color:var(--tint);
    font-weight:400;font-size:17px;padding:8px 10px 8px 0;margin:6px 0 2px;transition:opacity .14s}
  .navback:active{opacity:.4}
  .navback svg{flex:none}
  .vtitle{font-size:22px;font-weight:700;letter-spacing:var(--ls-title2);color:var(--label);margin:2px 0 0}
  .vhero{display:flex;gap:12px;align-items:flex-start;margin-top:2px}
  .empty{font-size:15px;color:var(--label-2);text-align:center;padding:40px 12px}

  /* controls ----------------------------------------------------------- */
  .gsearch{display:flex;align-items:center;gap:6px;background:var(--fill-strong);
    border-radius:10px;padding:0 10px;height:38px;margin:6px 0 12px}
  .gsearch svg{flex:none;color:var(--label-2);width:17px;height:17px}
  .gsearch input{border:none;background:none;outline:none;font-size:17px;width:100%;color:var(--label)}
  .gsearch input::placeholder{color:var(--label-2)}
  .gclear{position:relative;appearance:none;color:var(--label-2);font-size:16px;line-height:1;padding:2px 4px;display:none}
  /* Fitts: a clear "x" is a small glyph by convention, so the hit area is grown
     underneath it rather than the glyph being made ugly. */
  .gclear::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
  .gsearch.has .gclear{display:block}
  .gresults{margin:0 0 14px}
  .gresult{width:100%;text-align:left;appearance:none;background:var(--bg-elevated);
    border-radius:10px;padding:11px 14px;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:12px;
    transition:background .12s,transform .12s}
  .gresult:active{background:var(--fill);transform:scale(.99)}
  .tag{flex:0 0 46px;width:46px;height:22px;display:flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;line-height:1;padding:0;
    color:var(--on-tint);background:var(--tint);border-radius:99px}
  .tag.fish{background:var(--tint)} .tag.water{background:var(--blue)}
  .tag.town{background:var(--orange)} .tag.park{background:var(--green)} .tag.area{background:var(--orange)}
  .grow{flex:1;min-width:0}
  .gt{display:block;font-weight:400;font-size:17px;letter-spacing:var(--ls-body);color:var(--label)}
  .gs{display:block;font-size:13px;color:var(--label-2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gnone{color:var(--label-2);font-size:15px;padding:20px 8px;text-align:center;background:var(--bg-elevated);border-radius:10px}
  .filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
  .fchip{display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:var(--fill-strong);color:var(--label);font-weight:500;font-size:15px;
    border-radius:18px;padding:8px 15px;min-height:36px;cursor:pointer;transition:background .12s,transform .1s}
  .fchip.on{background:var(--tint);color:var(--on-tint)}
  .fchip:active{transform:scale(.95)}
  .fchip[disabled]{opacity:.4;cursor:default}
  a.fchip{text-decoration:none}
  /* zone tiles: iOS rounded squares */
  .zonegrid{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:12px 0 28px}
  .ztile{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
    background:var(--bg-elevated);color:var(--label);font-weight:600;font-size:16px;
    border-radius:10px;cursor:pointer;font-variant-numeric:tabular-nums;transition:transform .12s,background .12s}
  .ztile::after{content:"";position:absolute;inset:-6px}
  @media (max-width:520px){ .zonegrid{grid-template-columns:repeat(5,1fr)} }
  .ztile.on{background:var(--tint);color:var(--on-tint)}
  .ztile:active{transform:scale(.95)}
  .ztile[disabled]{opacity:.4;cursor:default}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--tint);color:var(--on-tint);font-weight:600;font-size:17px;
    border-radius:12px;padding:13px 20px;cursor:pointer;transition:transform .08s,background .12s}
  .btn:active{transform:scale(.975);background:var(--tint-press)}

  /* rows and cards ----------------------------------------------------- */
  .rrow{display:flex;justify-content:space-between;align-items:center;width:100%;
    background:var(--bg-elevated);color:var(--label);font-weight:400;font-size:17px;
    border-radius:10px;padding:12px 16px;margin-bottom:8px;gap:10px;letter-spacing:var(--ls-body)}
  .rcount{color:var(--label-2);font-weight:400;font-size:15px;text-align:right}
  .spwrap{display:flex;flex-wrap:wrap;gap:8px}
  .spchip{display:inline-flex;background:var(--fill-strong);color:var(--label);
    font-weight:500;font-size:13px;border-radius:99px;padding:6px 12px}
  .srow{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;
    background:var(--bg-elevated);border-radius:10px;padding:12px 16px;margin-bottom:8px;color:var(--label);
    transition:background .12s,transform .12s}
  button.srow{cursor:pointer}
  button.srow:active{background:var(--fill);transform:scale(.99)}
  .srow .col{flex:1;min-width:0}
  .srow .nm{font-size:17px;font-weight:400;letter-spacing:var(--ls-body);color:var(--label)}
  .srow[data-st="closed"] .nm{color:var(--label)}
  .srow .mt{font-size:13px;color:var(--label-2);margin-top:2px;line-height:var(--lh-footnote)}
  .pill{flex:none;font-weight:600;font-size:13px;border-radius:99px;
    padding:5px 12px;color:var(--label-2);background:var(--fill-strong);min-width:62px;text-align:center}
  .pill.open{background:var(--tint-soft);color:var(--tint)}
  .pill.closed{background:color-mix(in srgb, var(--red) 16%, transparent);color:var(--red)}
  .pill.unknown{background:var(--fill-strong);color:var(--label-2)}

  /* grouped lists ------------------------------------------------------
     The Apple Settings shape: a labelled group, a rounded elevated list, and
     rows that are all the same box no matter which element they are built
     from. .inner already carries the 16px page padding, so a group only takes
     its vertical margins; repeating the 16px here would inset the lists twice. */
  .group{margin:18px 0 8px}
  .group-header{padding:0 4px 7px;font-size:13px;font-weight:400;letter-spacing:.4px;
    text-transform:uppercase;color:var(--label-2)}
  .group-footer{padding:7px 4px 0;font-size:13px;color:var(--label-2);line-height:var(--lh-footnote)}
  .list{background:var(--bg-elevated);border-radius:var(--r-sm);overflow:hidden}
  .cell{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;
    padding:11px 16px;background:var(--bg-elevated);color:var(--label);text-align:left;
    transition:background .12s}
  /* A <button> is a form control, so its width is fit-content unless told
     otherwise. Left alone a button row shrink-wraps its label: the chevron ends
     up beside the text and the divider stops short, while the <a> rows around it
     run the full width. Force every row element into the same box. */
  a.cell,button.cell,summary.cell{width:100%;box-sizing:border-box}
  button.cell{-webkit-appearance:none;appearance:none;border:0;background:var(--bg-elevated);
    font:inherit;color:inherit;cursor:pointer}
  /* iOS divider: inset 16px on the left, flush to the right edge. */
  .cell+.cell::before,
  .list>details+details>summary.cell::before{content:'';position:absolute;top:0;left:16px;right:0;
    height:.5px;background:var(--separator)}
  .cell.tap:active{background:var(--fill)}
  .cell-body{flex:1 1 auto;min-width:0}
  .cell-title{display:block;font-size:17px;letter-spacing:var(--ls-body);color:var(--label)}
  .cell-sub{display:block;font-size:13px;color:var(--label-2);margin-top:1px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* margin-left:auto pins the value and the chevron to the right edge even on a
     row with no .cell-body to push them there, such as a plain version row. */
  .cell-value{flex:none;margin-left:auto;font-size:16px;color:var(--label-2);font-variant-numeric:tabular-nums}
  .chevron{flex:none;margin-left:auto;display:flex;color:var(--label-3)}
  .cell-value+.chevron{margin-left:8px}
  .chevron svg{width:14px;height:20px;display:block}
  /* a row that is only a control, so the control sets the height */
  .cell.control{padding:7px 12px}
  .cell.control .segmented{width:100%}
  /* a <details> row inside a list keeps the .cell metrics; the chevron turns */
  .list>details>summary{list-style:none;cursor:pointer}
  .list>details>summary::-webkit-details-marker{display:none}
  .list>details>summary .chevron{transition:transform .2s var(--ease)}
  .list>details[open]>summary .chevron{transform:rotate(90deg)}
  .cell-detail{padding:2px 16px 14px;border-top:.5px solid var(--separator)}
  .cell-detail p{margin:12px 0 0;font-size:15px;line-height:var(--lh-subhead);color:var(--label)}

  details.blk{background:var(--bg-elevated);border-radius:10px;margin-bottom:8px;overflow:hidden}
  details.blk>summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:400;
    font-size:17px;color:var(--label);display:flex;justify-content:space-between;align-items:center;gap:8px}
  details.blk>summary::-webkit-details-marker{display:none}
  details.blk>summary:active{background:var(--fill)}
  details.blk .body{padding:2px 16px 14px}
  .body ul{margin:0;padding-left:18px}
  .body li{font-size:15px;color:var(--label-2);line-height:var(--lh-subhead);margin-bottom:6px}
  .wb{padding:9px 0;border-bottom:.5px solid var(--separator)}
  .wb:last-child{border-bottom:none}
  .wb b{display:block;font-size:15px;color:var(--label);margin-bottom:4px;font-weight:600}

  /* map overlay controls: capsules on chrome fills, all at least 44px --- */
  .loading{position:absolute;top:calc(12px + env(safe-area-inset-top));left:64px;z-index:1000;
    background:var(--chrome);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border:.5px solid var(--sep);border-radius:99px;padding:8px 14px;font-size:13px;font-weight:500;color:var(--label);box-shadow:var(--shadow-float)}
  #togglezones,#toggleparks,#togglelabels{position:absolute;right:12px;z-index:1000;
    background:var(--bg-elevated);
    border:.5px solid var(--sep);border-radius:99px;padding:9px 16px;min-height:44px;font-size:13px;white-space:nowrap;font-weight:600;color:var(--label);
    cursor:pointer;box-shadow:var(--shadow-float);transition:background .12s,transform .1s}
  #togglezones{top:calc(12px + env(safe-area-inset-top))}
  #toggleparks{top:calc(62px + env(safe-area-inset-top))}
  #togglelabels{top:calc(112px + env(safe-area-inset-top))}
  #togglezones.on,#toggleparks.on,#togglelabels.on{background:var(--tint);border-color:var(--tint);color:var(--on-tint)}
  #togglezones:active,#toggleparks:active,#togglelabels:active{transform:scale(.96)}
  .leaflet-popup-content-wrapper{border-radius:12px;font-family:inherit}
  .leaflet-popup-content{font-size:13px;font-weight:600;color:var(--label)}
  .leaflet-container{font-family:inherit}
  /* map label halos are tied to the light tile imagery, not the app theme */
  .parklabel{background:none;border:none;box-shadow:none;padding:0;margin-top:-4px;
    font-weight:700;font-size:11px;color:var(--label);white-space:nowrap;
    text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;display:none}
  .parklabel::before{display:none}
  #map.zoomclose .parklabel{display:block}
  body.embed #panel{display:none}
  body.embed #mapwrap{position:fixed;inset:0;width:100%;height:100dvh}
  body.embed .ios-tabbar{display:none}
  .plabel{font-weight:700;font-size:11px;letter-spacing:.08em;color:var(--label-2);opacity:.85;
    white-space:nowrap;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;transform:translate(-50%,-50%)}
  .clabel{white-space:nowrap;color:var(--label);transform:translate(-4px,-50%);
    text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff}
  .clabel.t1{font-weight:700;font-size:13px}
  .clabel.t2{font-weight:500;font-size:11px}
  .cdot{display:inline-block;width:5px;height:5px;border-radius:99px;background:var(--label);
    opacity:.6;margin-right:4px;vertical-align:1px}
  .alabel{font-style:italic;font-weight:500;font-size:11px;color:var(--label-2);white-space:nowrap;
    text-shadow:0 0 3px #fff,0 0 3px #fff;transform:translate(-50%,-50%)}
  .z-far .clabel.t2{display:none}
  .z-hide .clabel,.z-hide .alabel{display:none}
  /* multiply lets lakes and rivers read through the zone colours */
  .leaflet-zonefill-pane canvas{mix-blend-mode:multiply}
  /* richer blue water on the base map */
  .leaflet-tile-pane{filter:saturate(1.85) contrast(1.05)}
  /* dark map: dark tiles, zone colours glow instead of multiply, halos flip */
  body.darkmap .leaflet-tile-pane{filter:none}
  body.darkmap .leaflet-zonefill-pane canvas{mix-blend-mode:screen;opacity:.5}
  body.darkmap .plabel,body.darkmap .alabel{color:#B9C6BD;text-shadow:0 0 3px #10171A,0 0 3px #10171A}
  body.darkmap .clabel{color:#E8EFEA;text-shadow:0 0 3px #10171A,0 0 3px #10171A,0 0 3px #10171A}
  body.darkmap .parklabel{color:#E8EFEA;text-shadow:0 0 3px #10171A,0 0 3px #10171A,0 0 3px #10171A}

  /* sheet --------------------------------------------------------------- */
  .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;
    transition:opacity .3s var(--ease);z-index:50}
  .backdrop.on{opacity:1;pointer-events:auto}
  .sheet{position:fixed;left:0;right:0;bottom:0;margin:0 auto;transform:translateY(102%);
    width:min(540px,100%);background:var(--bg);z-index:60;border-radius:12px 12px 0 0;
    padding:8px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--separator);
    transition:transform .34s var(--ease);overflow: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)}
  .sheet.on{transform:translateY(0)}
  /* the sheet carries its own 16px padding, so inset groups lose theirs */
  .sheet .ios-group{margin-left:0;margin-right:0}
  /* while a sheet is open the page behind must not move */
  html.sheet-lock body{overflow:hidden}
  html.sheet-lock #panel{overflow:hidden}
  .grabber{width:36px;height:5px;border-radius:3px;background:var(--label-3);margin:8px auto 16px}
  .verline{font-size:15px;color:var(--label);margin:0;line-height:var(--lh-subhead);padding:10px 0;
    border-bottom:.5px solid var(--separator);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .verline:last-child{border-bottom:none}
  .verline .vv{font-weight:600;color:var(--tint);margin-right:10px;font-variant-numeric:tabular-nums}
  .vv{flex:none;font-weight:600;font-size:15px;color:var(--tint);font-variant-numeric:tabular-nums;min-width:46px}
  .kind{font-size:13px;font-weight:400;letter-spacing:.4px;text-transform:uppercase;color:var(--label-2)}
  .sheet a{color:var(--tint)}
  .aboutbody p{margin:1em 0;font-size:16px;line-height:var(--lh-callout);color:var(--label)}
  .closing{font-size:13px;font-weight:400;color:var(--label-2);text-align:center;margin-top:16px;line-height:var(--lh-footnote)}
  /* fish id */
  .frow{display:block;width:100%;text-align:left;appearance:none;cursor:pointer;
    background:var(--bg-elevated);border-radius:10px;padding:12px 16px;margin-bottom:8px;
    font-weight:400;font-size:17px;color:var(--label);letter-spacing:var(--ls-body);transition:background .12s,transform .12s}
  .frow:active{background:var(--fill);transform:scale(.99)}
  .fgallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
  .fcard{appearance:none;cursor:pointer;text-align:left;background:var(--bg-elevated);
    border-radius:14px;padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .1s}
  .fcard:active{transform:scale(.97)}
  .fcard img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--bg-secondary)}
  .fcard span{font-weight:500;font-size:13px;color:var(--label);line-height:var(--lh-footnote);padding:8px 12px 12px}
  .idcard{background:var(--bg-elevated);border-radius:14px;overflow:hidden;margin-bottom:8px}
  .idcard img{width:100%;max-height:230px;object-fit:contain;background:var(--bg-secondary);display:block}
  .idcard .idbody{padding:12px 16px 14px}
  .idname{font-weight:700;font-size:17px;letter-spacing:var(--ls-headline)}
  .idtell{margin:6px 0 10px;padding-left:18px}
  .idtell li{font-size:15px;color:var(--label);line-height:var(--lh-subhead);margin:3px 0}
  .idrow{font-size:13px;color:var(--label-2);line-height:var(--lh-footnote);margin-top:4px}
  .idrow b{color:var(--label);font-weight:600}
  /* appearance segmented control */
  .segmented{display:flex;background:var(--fill-strong);border-radius:9px;padding:2px;gap:2px}
  /* Fitts: a segment is wide but was only 36px tall, a thin thing to hit from a
     moving boat. Flex centring holds the label while the segment grows. */
  .seg-opt{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;
    text-align:center;padding:6px 8px;border-radius:7px;font-size:13px;font-weight:500;
    color:var(--label);cursor:pointer;transition:background .15s}
  .seg-opt.on{background:var(--bg-elevated);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:600}

  /* the footer pads 88px so the last content clears the floating tab bar */
  footer{width:100%;max-width:720px;margin:auto auto 0;flex:0 0 auto;
    padding:28px 16px calc(88px + env(safe-area-inset-bottom));color:var(--label-2);
    font-size:13px;line-height:var(--lh-footnote)}
  footer a{color:var(--label-2);text-decoration:underline;text-underline-offset:2px}

  /* motion ------------------------------------------------------------- */
  @view-transition{navigation:auto}
  @keyframes vtOut{to{opacity:0;transform:scale(1.03)}}
  @keyframes vtIn{from{opacity:0;transform:scale(.94) translateY(14px)}}
  ::view-transition-old(root){animation:vtOut .26s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vtIn .40s cubic-bezier(.32,1.14,.38,1) both}
  @keyframes blockIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  #detail.anim{animation:blockIn .28s var(--ease)}
  @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}
    @view-transition{navigation:none}}

  /* note shown on a fish page when its season/limit is a shared, combined group */
  .combinednote{ margin-top:14px; padding:10px 12px; background:var(--fill-strong); border-radius:10px;
    font-size:13px; line-height:var(--lh-footnote); color:var(--label-2); }

  /* ---- catch log + share --------------------------------------------- */
  /* section label inside the catch form, so eight fields read as three chunks */
  .cl-sec{font-size:13px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
    color:var(--label-2);margin:14px 0 8px}
  .cl-sec:first-child{margin-top:4px}
  /* species-caught progress: a real count against a real ceiling, never padded */
  .clprog{background:var(--bg-elevated);border-radius:var(--r-sm);padding:13px 16px 15px;margin:12px 0 4px}
  .clprog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--label)}
  .clprog-n{font-size:13px;color:var(--label-2)}
  .clprog-bar{display:block;margin-top:10px;height:6px;border-radius:3px;background:var(--fill-strong);overflow:hidden}
  .clprog-fill{display:block;height:100%;border-radius:3px;background:var(--tint);transition:width .4s var(--ease)}
  .cl-field{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
  .cl-field>span{font-size:13px;font-weight:500;color:var(--label-2)}
  .cl-field input,.cl-field select,.cl-field textarea{width:100%;background:var(--fill);border:none;
    border-radius:9px;padding:11px 12px;font-size:16px;color:var(--label);outline:none;-webkit-appearance:none;appearance:none}
  .cl-field textarea{resize:vertical;line-height:1.4}
  .cl-field input:focus,.cl-field select:focus,.cl-field textarea:focus{box-shadow:0 0 0 2px var(--tint-soft)}
  .cl-row{display:flex;gap:10px}
  .cl-row .grow{flex:1}
  /* the day-grouped timeline: an uppercase day header with its share action
     over an inset group of catch rows, the same read as the wildlife journal */
  .cl-day{margin-top:14px}
  .cl-dayhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 7px;padding:0 4px}
  .cl-dayhead .group-header{padding:0}
  .cl-day .ios-group{margin-bottom:20px}
  .cl-fishtile{background:var(--fill-strong);overflow:hidden}
  .cl-fishtile img{width:100%;height:100%;object-fit:cover;display:block}
  .cl-share{position:relative;appearance:none;border:none;background:var(--tint-soft);color:var(--tint);
    font-weight:600;font-size:13px;border-radius:99px;padding:6px 14px;cursor:pointer}
  /* Fitts: the pill stays quiet, the thing you aim at is 44px tall */
  .cl-share::after{content:"";position:absolute;top:50%;left:50%;min-width:44px;width:100%;height:44px;
    transform:translate(-50%,-50%)}
  .cl-share:active{opacity:.55}
  /* catch detail sheet */
  .cd-img{width:100%;max-height:180px;object-fit:contain;background:var(--fill);border-radius:12px;
    display:block;margin-bottom:12px}
  .btn.ghost{background:var(--fill-strong);color:var(--tint)}
  .btn.ghost:active{background:var(--fill)}
  .cl-recv{max-width:420px;margin:6px auto 14px}
  .shared-card-wrap{max-width:420px;margin:0 auto}
  .shared-card{width:100%;height:auto;display:block;border-radius:22px;
    box-shadow:0 12px 34px rgba(0,0,0,.18);background:var(--fill)}
  .cl-toast{position:fixed;left:50%;bottom:calc(84px + var(--sa-bottom));transform:translate(-50%,10px);
    background:var(--label);color:var(--bg-elevated);font-size:13px;font-weight:500;
    padding:10px 18px;border-radius:99px;box-shadow:var(--shadow);opacity:0;transition:opacity .2s,transform .2s;
    z-index:2000;pointer-events:none;max-width:80vw;text-align:center}
  .cl-toast.on{opacity:1;transform:translate(-50%,0)}

  /* a11y: attribution links are in a text block, so they carry an underline */
  .leaflet-control-attribution a{text-decoration:underline}

/* =====================================================================
   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;
}

/* the parks palette signs its screens the way canada.ca signs a page:
   a 72px, 6px-thick rule in the flag red under the main title. only the
   top of screen large title carries it, never section heads or sheets.
   the h1 here is a flex row for its 44px tap target, so it turns into a
   column and the rule sits on its own line under the text. */
:root:not([data-palette="field"]):not([data-palette="granite"]) .titlebar h1 {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
:root:not([data-palette="field"]):not([data-palette="granite"]) .titlebar h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 6px;
  margin-top: 10px;
  background: var(--tone3);
}

/* -------------------------------------------------- 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;
}
: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;
}

/* --------------------------------------------------- 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,
: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 */
.pill-new, .badge-info.on { background: var(--tone2); }

/* ------------------------------------------- Appearance panel controls */
/* a settings row that carries a control on the right, Apple Settings shape */
.field { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px; }
.field-label { font-size: var(--fs-body); flex-shrink: 0; }

/* iOS switch */
.switch { position: relative; width: 51px; height: 31px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.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); }

/* 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; }

/* on phone widths a labelled segmented row stacks so every option keeps a
   comfortable target */
@media (max-width: 480px) {
  .field:has(> .segmented), .ap-row:has(.segmented) { flex-wrap: wrap; }
  .field:has(> .segmented) > .segmented, .ap-row > .segmented { width: 100% !important; margin-top: 6px; }
}

/* =====================================================================
   ios.css desktop layer: the responsive tablet and desktop arrangement.
   Phone under 700px keeps the app chrome exactly as it is today. From
   700px the bottom sheets become centred dialogs and the reading column
   relaxes wider. From 1100px the page reads as a normal website: a
   solid 60px top bar, the tab bar restyled as a 264px left sidebar of
   labelled rows, and the panel as one wide main column beside it.
   Plain media queries only, appended after the appearance layer, so a
   window resize reflows live and everything works with JS off. The
   header and tab bar rules are scoped to the app ids (#panel, #tabbar)
   so the styleguide demos keep their phone chrome; the ids also outweigh
   the glass layer selectors, which would otherwise win the cascade.
   ===================================================================== */

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

/* --------------------------------------------------- tablet, 700px up */
@media (min-width: 700px) {
  /* the reading column relaxes toward the shared 900px tablet width */
  .inner, footer { max-width: 900px; }
  .fgallery { grid-template-columns: repeat(3, 1fr); }

  /* bottom sheets become centred dialogs. the base sheet hides by
     sliding past the bottom edge; a dialog cannot, so the hidden state
     keeps a small drop and fades, and visibility flips once the fade
     ends so a closed sheet never sits invisibly over the page. */
  .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;
    visibility: hidden;
    transition: transform .34s var(--ease), opacity .34s var(--ease), visibility 0s .34s;
  }
  /* flat chrome trades the drawer hairline for a floating shadow; the
     glass sheet rule outweighs this and keeps its pane shadow */
  .sheet { box-shadow: var(--shadow-float); }
  .sheet.on {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform .34s var(--ease), opacity .34s var(--ease), visibility 0s 0s;
  }
}

/* -------------------------------------------------- desktop, 1100px up */
@media (min-width: 1100px) {
  /* the split view stands down: map and panel both pin to the area
     right of the sidebar and below the top bar. the panel stays the
     scroller, exactly as on the phone. */
  #app { display: block; }
  #mapwrap { position: fixed; top: 60px; left: 264px; right: 0; bottom: 0; }
  #panel {
    position: fixed; top: 60px; left: 264px; right: 0; bottom: 0;
    width: auto; max-width: none; min-width: 0; height: auto;
    border-left: none; z-index: 20;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* a touch drag must never transform the panel here: a transformed
     ancestor would capture the fixed top bar inside it */
  #panel, #panel.min, #panel.drag { transform: none !important; }
  /* the Map tab shows the map, but the top bar lives inside the panel:
     hiding by visibility keeps the bar visible and clickable while the
     hidden panel lets pointer events through to the map */
  body.tab-map #panel { visibility: hidden; }
  body.tab-map #panel .ios-header { visibility: visible; }

  /* one wide main column, the shared 1016px desktop width */
  .inner, footer { max-width: 1016px; }
  /* the title reads as a page heading now */
  .appbar { padding: 28px 0 8px; }

  /* the top bar: solid, full width, always frosted-free */
  #panel .ios-header,
  #panel .ios-header.is-scrolled, #panel .ios-header.scrolled,
  :root:not([data-glass="off"]) #panel .ios-header.is-scrolled,
  :root:not([data-glass="off"]) #panel .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;
  }
  #panel .ios-header-row { height: 60px; max-width: none; padding: 0 20px; justify-content: flex-start; gap: 12px; }
  #panel .ios-brand { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-headline); color: var(--label); }
  #panel .ios-header-actions { margin-left: auto; }

  /* the tab bar becomes the sidebar */
  #tabbar {
    left: 0; right: auto; top: 60px; bottom: 0;
    width: 264px; height: auto; max-width: none; margin: 0;
    border-radius: 0; border: 0; border-right: 1px solid var(--sep);
    background: var(--bg);
    background-image: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
    display: flex; flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 16px 12px;
  }
  /* the embedded map stays chromeless; restated because #tabbar above
     outweighs the body.embed rule */
  body.embed #tabbar { display: none; }
  #tabbar .ios-tab {
    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;
  }
  #tabbar .ios-tab svg { width: 18px; height: 18px; }
  #tabbar .ios-tab span { font-size: var(--fs-subhead); line-height: 1; }
  #tabbar .ios-tab:hover { background: var(--fill); }
  #tabbar .ios-tab[aria-current="page"], #tabbar .ios-tab.active { background: var(--tint-soft); color: var(--tint-text); }
}