/*
 * Self-hosted web fonts. Latin subset only — sourced from Google Fonts and
 * vendored under public/fonts/. Replaces the render-blocking
 * <link href="fonts.googleapis.com/..."> tags formerly in the layout head.
 *
 * font-display: swap — show fallback immediately, swap to web font when ready.
 * Prevents blank text on poor connections.
 *
 * To regenerate or refresh, see docs/perf-phase-3-fonts-and-css.md.
 */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/playfair-display.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/poppins-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/poppins-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/poppins-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/poppins-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/nunito-sans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
 * Font Awesome 6 subset — generated by `rake fa_subset:rebuild`.
 * Includes only the 102 icons actually referenced in this codebase
 * (2 regular, rest solid). Replaces the 172 KB
 * use.fontawesome.com bundle that was loaded as render-blocking external
 * CSS. Re-run the rake task after adding or removing icons.
 */

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(/fonts/fa-solid-900.woff2) format('woff2');
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/fonts/fa-regular-400.woff2) format('woff2');
}

.fa, .fas, .far, .fa-solid, .fa-regular {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  font-family: 'Font Awesome 6 Free';
}

.fa, .fas, .fa-solid { font-weight: 900; }
.far, .fa-regular   { font-weight: 400; }

.fa-fw { text-align: center; width: 1.25em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }

.fa-add::before { content: "\2b" }
.fa-address-book::before { content: "\f2b9" }
.fa-anchor::before { content: "\f13d" }
.fa-arrow-left::before { content: "\f060" }
.fa-arrow-right::before { content: "\f061" }
.fa-arrow-rotate-left::before { content: "\f0e2" }
.fa-bars::before { content: "\f0c9" }
.fa-bell::before { content: "\f0f3" }
.fa-book::before { content: "\f02d" }
.fa-bug::before { content: "\f188" }
.fa-building::before { content: "\f1ad" }
.fa-calendar::before { content: "\f133" }
.fa-calendar-days::before { content: "\f073" }
.fa-camera::before { content: "\f030" }
.fa-car::before { content: "\f1b9" }
.fa-check::before { content: "\f00c" }
.fa-chevron-right::before { content: "\f054" }
.fa-circle-check::before { content: "\f058" }
.fa-circle-exclamation::before { content: "\f06a" }
.fa-circle-info::before { content: "\f05a" }
.fa-circle-question::before { content: "\f059" }
.fa-circle-user::before { content: "\f2bd" }
.fa-clock::before { content: "\f017" }
.fa-cloud::before { content: "\f0c2" }
.fa-cloud-arrow-up::before { content: "\f0ee" }
.fa-cloud-sun::before { content: "\f6c4" }
.fa-cog::before { content: "\f013" }
.fa-compass::before { content: "\f14e" }
.fa-cookie-bite::before { content: "\f564" }
.fa-crosshairs::before { content: "\f05b" }
.fa-diamond-turn-right::before { content: "\f5eb" }
.fa-download::before { content: "\f019" }
.fa-droplet::before { content: "\f043" }
.fa-edit::before { content: "\f044" }
.fa-ellipsis::before { content: "\f141" }
.fa-envelope::before { content: "\f0e0" }
.fa-exclamation-triangle::before { content: "\f071" }
.fa-expand::before { content: "\f065" }
.fa-eye::before { content: "\f06e" }
.fa-eye-slash::before { content: "\f070" }
.fa-file-import::before { content: "\f56f" }
.fa-fish::before { content: "\f578" }
.fa-flag-checkered::before { content: "\f11e" }
.fa-flask::before { content: "\f0c3" }
.fa-globe::before { content: "\f0ac" }
.fa-heart::before { content: "\f004" }
.fa-heart-circle-minus::before { content: "\e4ff" }
.fa-heart-circle-plus::before { content: "\e500" }
.fa-image::before { content: "\f03e" }
.fa-images::before { content: "\f302" }
.fa-list::before { content: "\f03a" }
.fa-list-ol::before { content: "\f0cb" }
.fa-location-dot::before { content: "\f3c5" }
.fa-lock::before { content: "\f023" }
.fa-long-arrow-alt-right::before { content: "\f30b" }
.fa-magnifying-glass::before { content: "\f002" }
.fa-map::before { content: "\f279" }
.fa-map-location-dot::before { content: "\f5a0" }
.fa-map-marked::before { content: "\f59f" }
.fa-map-pin::before { content: "\f276" }
.fa-map-signs::before { content: "\f277" }
.fa-minus::before { content: "\f068" }
.fa-mobile::before { content: "\f3ce" }
.fa-mountain::before { content: "\f6fc" }
.fa-paper-plane::before { content: "\f1d8" }
.fa-pen-ruler::before { content: "\f5ae" }
.fa-pen-to-square::before { content: "\f044" }
.fa-pencil::before { content: "\f303" }
.fa-people-group::before { content: "\e533" }
.fa-person-hiking::before { content: "\f6ec" }
.fa-phone::before { content: "\f095" }
.fa-plus::before { content: "\2b" }
.fa-right-from-bracket::before { content: "\f2f5" }
.fa-right-left::before { content: "\f362" }
.fa-rocket::before { content: "\f135" }
.fa-rotate-left::before { content: "\f2ea" }
.fa-route::before { content: "\f4d7" }
.fa-ruler::before { content: "\f545" }
.fa-sailboat::before { content: "\e445" }
.fa-scale-balanced::before { content: "\f24e" }
.fa-search::before { content: "\f002" }
.fa-shield-halved::before { content: "\f3ed" }
.fa-ship::before { content: "\f21a" }
.fa-signal::before { content: "\f012" }
.fa-sliders::before { content: "\f1de" }
.fa-square-parking::before { content: "\f540" }
.fa-star::before { content: "\f005" }
.fa-sterling-sign::before { content: "\f154" }
.fa-store::before { content: "\f54e" }
.fa-stream::before { content: "\f550" }
.fa-tachometer-alt::before { content: "\f625" }
.fa-temperature-half::before { content: "\f2c9" }
.fa-ticket::before { content: "\f145" }
.fa-times::before { content: "\f00d" }
.fa-trash::before { content: "\f1f8" }
.fa-trash-can::before { content: "\f2ed" }
.fa-user::before { content: "\f007" }
.fa-user-gear::before { content: "\f4fe" }
.fa-wand-magic-sparkles::before { content: "\e2ca" }
.fa-water::before { content: "\f773" }
.fa-wind::before { content: "\f72e" }
.fa-xmark::before { content: "\f00d" }
/*
 * Bootstrap-utility compatibility layer — NOT part of the design system.
 *
 * Replaces the 16,831-line vendor `default.css` (Bootstrap 5.1 + theme) deleted
 * in reskin phase 11. The design system owns `.container` (components.css) and
 * `.btn` (components.css); base element styling is covered by scoped DS rules
 * (`.lf-legal__body`, `.field__input`, `.ct-info-item`). All that Bootstrap
 * actually still supplied to ported public pages was a handful of grid-free
 * utility classes — reproduced here at Bootstrap's real values so the views
 * need no edits. Some (e.g. `.d-none`) are load-bearing (JS show/hide toggles),
 * not cosmetic.
 *
 * This is a compat shim, not a design-system utility system. A future pass
 * could rename these onto DS spacing tokens; until then they keep their
 * Bootstrap names and values. Sits before tokens/components in the manifest so
 * a single-class utility never beats a DS component rule.
 *
 * Spacing scale (theme-extended): 0=0 · 1=.25 · 2=.5 · 3=1 · 4=1.5 · 5=3 · 6=6 (rem)
 */

/* Display */
.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }

/* Screen-reader-only — load-bearing: the #modal turbo-frame ships with this on
   every page (layouts/application) and JS toggles it (turbo_modal, remove-heart).
   Without it an empty fixed 400px #modal box would sit over the page centre. */
.visually-hidden {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.overflow-hidden { overflow: hidden !important; }

/* Flex */
.flex-column             { flex-direction: column !important; }
.flex-shrink-0           { flex-shrink: 0 !important; }
.align-items-center      { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center  { justify-content: center !important; }
@media (min-width: 576px) { .flex-sm-row { flex-direction: row !important; } }

/* Sizing */
.h-100 { height: 100% !important; }

/* Position */
.position-relative { position: relative !important; }

/* Effects */
.shadow    { box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.rounded-3 { border-radius: 0.6rem !important; }

/* Text (brand-neutral names → DS tokens where a colour is involved) */
.text-center           { text-align: center !important; }
.text-start            { text-align: left !important; }
.text-white            { color: #fff !important; }
.text-muted            { color: var(--muted) !important; }
.text-sm               { font-size: 0.875rem !important; }
.text-dark             { color: #212529 !important; }
.text-danger           { color: var(--error) !important; }
.text-decoration-none  { text-decoration: none !important; }
.small                 { font-size: 0.875em !important; }
.lh-sm                 { line-height: 1.5 !important; }

/* Borders (mapped to the DS border token) */
.border-bottom { border-bottom: 1px solid var(--border) !important; }
.border-light  { border-color: var(--border) !important; }

/* Background */
.bg-dark  { background-color: #212529 !important; }
.bg-white { background-color: #fff !important; }

/* Spinner — the one Bootstrap *component* reproduced here (the DS has no
   loader). JS-injected on the nearby "use my location" flow (current_location).
   Self-contained; drop if the DS gains a spinner. */
@keyframes spinner-border { to { transform: rotate(360deg); } }
.spinner-border {
  display: inline-block; width: 2rem; height: 2rem; vertical-align: -0.125em;
  border: 0.25em solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: 0.75s linear infinite spinner-border;
}
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; }

/* Margin-bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mb-6 { margin-bottom: 6rem !important; }

/* Margin-top (JS-set: lake-search results, homepage-search rows) */
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }

/* Margin-right / -left (logical: end / start) */
.me-1 { margin-right: 0.25rem !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-3 { margin-left: 1rem !important; }

/* Padding */
.p-2  { padding: 0.5rem !important; }
.p-4  { padding: 1.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
/* ==========================================================================
   Let's Fish — design tokens
   Single source of truth for colour + type across every brand mockup.
   Values are the FINAL brand assets:
     • Palette  → docs/colours.pdf  (and Brand guidelines v2.pdf, p.2)
     • Logo     → Gelica (Adobe Fonts) — baked into the logo SVGs as outlined
                  paths, so it is NEVER loaded as a webfont. Artwork only.
     • UI font  → Nunito Sans (Google Fonts) — body, headings, buttons, labels.
                  A friendly geometric sans chosen to harmonise with Gelica's
                  warm, rounded slab; per docs/brand-guide.md → Typography.
   New pages should @import or <link> this file and use the var() tokens below
   rather than re-typing hexes.

   The two-layer system (official brand palette vs. derived UI palette) is
   documented in palette.md — read it before adding or changing a token.
   ========================================================================== */

:root {
  /* ── Brand palette — PRIMARY (docs/colours.pdf) ────────────────────────── */
  --forest:  #22453F;   /* deep green — primary brand colour, headings        */
  --water:   #5E95AC;   /* river blue                                         */
  --sunset:  #DD9951;   /* sunset orange — accent / calls-to-action           */
  --stone:   #D0C7B5;   /* warm sand/stone neutral                            */

  /* ── Brand palette — SECONDARY (deeper shades + charcoal) ──────────────── */
  --taupe:       #BFB49F;   /* darker stone                                   */
  --deep-water:  #3E6B7D;   /* darker river blue                              */
  --burnt:       #C4813E;   /* darker sunset                                  */
  --charcoal:    #3C3833;   /* near-black — body text                         */

  /* 60% tints (palette shows each of these at 60% for soft fills/hovers).
     color-mix keeps them locked to the base hue. */
  --stone-60:  color-mix(in srgb, var(--stone)  60%, #fff);
  --water-60:  color-mix(in srgb, var(--water)  60%, #fff);
  --sunset-60: color-mix(in srgb, var(--sunset) 60%, #fff);
  --forest-60: color-mix(in srgb, var(--forest) 60%, #fff);

  /* 14% tints — soft fills (pale chip/badge/icon backgrounds), one ratio for
     all so they stay consistent across pages. Same color-mix construction as
     the 60% tier. Add a colour here only when a page actually uses its tint. */
  --water-tint:  color-mix(in srgb, var(--water)  14%, #fff);
  --forest-tint: color-mix(in srgb, var(--forest) 14%, #fff);

  /* ── Semantic tokens — what components actually reference ──────────────── */
  --primary:        var(--forest);
  --primary-hover:  color-mix(in srgb, var(--forest) 85%, #000);
  --accent:         var(--sunset);

  /* Neutrals are DERIVED from the palette — the colours.pdf set has no near-
     white, off-black, or hairline tones (its lightest is stone #D0C7B5, too
     dark for a page background). Each is a stone/forest/charcoal mix so every
     value still traces back to a brand colour; #fff / #000 are only mix ends. */
  --bg:        color-mix(in srgb, var(--stone) 16%, #fff);   /* warm paper white */
  --bg-alt:    color-mix(in srgb, var(--stone) 30%, #fff);   /* alternating band */

  --text:      var(--charcoal);
  --heading:   var(--forest);
  --muted:     color-mix(in srgb, var(--charcoal) 55%, var(--stone)); /* muted taupe-grey */
  --border:    color-mix(in srgb, var(--stone) 55%, #fff);   /* hairline */

  --chip-bg:   var(--stone-60);  /* tag / pill background */
  --chip-fg:   var(--forest);
  --cta-bg:    color-mix(in srgb, var(--stone) 28%, #fff);
  --cta-border:color-mix(in srgb, var(--stone) 45%, #fff);
  --footer-bg: color-mix(in srgb, var(--forest) 82%, #000);  /* deep forest */

  /* Hero photo overlays (forest-tinted so cream nav text reads over photos) */
  --hero-overlay-top:    rgba(34, 69, 63, 0.45);   /* forest #22453F */
  --hero-overlay-bottom: rgba(34, 69, 63, 0.20);

  /* ── Semantic — approved by Emma, July 2026 ─────────────────────────────
     The brand guide leaves error/success/warning as "designer's choice" and
     says they must sit in the earthy palette, not read as neon. Layer 2;
     each has a light tint for alert/field backgrounds. */
  --error:      #A8432E;   /* brick / rust red  */
  --success:    #4F7A48;   /* leaf green        */
  --warning:    #C8911F;   /* goldenrod amber   */
  --error-bg:   color-mix(in srgb, var(--error)   12%, #fff);
  --success-bg: color-mix(in srgb, var(--success) 12%, #fff);
  --warning-bg: color-mix(in srgb, var(--warning) 14%, #fff);

  /* ── Type ──────────────────────────────────────────────────────────────
     One family for everything that isn't the logo. The logo SVG carries the
     Gelica voice on every screen, so the UI font stays a clean sans. */
  --font-ui:      'Nunito Sans', system-ui, sans-serif;
  --heading-font: var(--font-ui);
  --display-font: var(--font-ui);   /* no separate display face in v1         */

  /* ── Spacing scale (rem) ────────────────────────────────────────────────
     Use these instead of ad-hoc rem values so vertical rhythm stays even. */
  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;    --space-7: 3rem;    --space-8: 4rem;

  /* ── Radius ── */
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-pill: 2rem;

  /* ── Elevation (forest-tinted, not flat black) ── */
  --shadow-sm: 0 2px 8px rgba(34, 69, 63, 0.10);
  --shadow-md: 0 6px 24px rgba(34, 69, 63, 0.12);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);

  /* ── Layout ── */
  --container: 1140px;   /* max content width */
  --nav-h: 72px;         /* header height (shared by nav + hero offset) */
}

body {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--bg);
}
/* ==========================================================================
   Let's Fish — component library (web design system)
   Shared, reusable chrome. Pages <link> tokens.css then components.css, and
   add only their page-specific CSS on top.

   SCOPE: seeded with the pieces that already repeat across pages — the site
   header (two variants) and the footer. Grow this file as patterns recur
   while building out the page mockups (Rule of Three). Buttons, form fields,
   alerts and badges are catalogued in components.html and move here when a
   real page uses them.

   PORTING: this file + tokens.css are the durable deliverable. Both drop into
   the Rails asset pipeline (CSS custom properties work natively, or translate
   to SCSS); the class names below get applied to the matching ERB partials
   (shared/_navigation, shared/_footer, …) during the reskin.
   ========================================================================== */

/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; }
a { color: var(--primary); text-decoration: none; transition: color 0.15s ease; }
a:hover { color: var(--primary-hover); }  /* colour-darken only — structural/card/button links must not underline; body copy opts in below */
ul { list-style: none; }

/* ── Text links ──
   Links inside body copy. Forest-on-charcoal is a hue-only difference, so the
   underline is the cue that doesn't depend on colour vision. Scoped to prose
   contexts — card bodies only through their <p>s, which keeps the legal
   Contents list and any .btn in a card body undecorated. */
.prose a,
.lf-info-card__body p a,
.lf-legal__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose a:hover,
.lf-info-card__body p a:hover,
.lf-legal__body a:hover { text-decoration-thickness: 2px; }

/* ── Layout ── */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

/* ==========================================================================
   Site header — two variants:
     .lf-nav--transparent  floats over a hero photo (white logo + links)
     .lf-nav--solid        forest bar for pages WITHOUT a hero (the standard)
   ========================================================================== */
.lf-nav { position: relative; z-index: 50; height: var(--nav-h); }
.lf-nav--transparent { background: transparent; }
.lf-nav--solid       { background: var(--footer-bg); }

.lf-nav__inner {
  max-width: var(--container); height: 100%; margin: 0 auto; padding: 0 var(--space-5);
  display: flex; align-items: center; justify-content: space-between;
}
.lf-nav__brand { display: flex; align-items: center; gap: 0.6rem; }
.lf-nav__brand .roundel  { height: 2.6rem; width: auto; }
.lf-nav__brand .wordmark { height: 1.3rem;  width: auto; }
/* over a photo the lockup needs separation from bright areas */
.lf-nav--transparent .lf-nav__brand .roundel  { filter: drop-shadow(0 1px 5px rgba(0,0,0,0.35)); }
.lf-nav--transparent .lf-nav__brand .wordmark { filter: drop-shadow(0 1px 6px rgba(0,0,0,0.45)); }

.lf-nav__actions { display: flex; align-items: center; gap: 0.9rem; }
.lf-nav__link { font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.lf-nav__link:hover { color: #fff; }
.lf-nav--transparent .lf-nav__link { color: rgba(255,255,255,0.92); text-shadow: 0 1px 6px rgba(0,0,0,0.25); }
.lf-nav--solid       .lf-nav__link { color: rgba(255,255,255,0.85); }

.lf-nav__btn {
  font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1.3rem; white-space: nowrap;
  border-radius: var(--radius-pill); transition: background 0.15s ease, color 0.15s ease;
}
/* small screens: drop the Add-your-fishery link (still in the CTA panel +
   footer) and tighten the buttons — logo + Sign in/Sign up fit a phone */
@media (max-width: 560px) {
  .lf-nav__link { display: none; }
  .lf-nav__actions { gap: 0.6rem; }
  .lf-nav__btn { padding: 0.45rem 1rem; }
}
.lf-nav__btn--outline { color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.lf-nav__btn--outline:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
/* primary CTA: forest over a photo (reads on the dark scrim), sunset on the forest bar */
.lf-nav--transparent .lf-nav__btn--primary { background: var(--primary); color: #fff; }
.lf-nav--transparent .lf-nav__btn--primary:hover { background: var(--primary-hover); }
.lf-nav--solid       .lf-nav__btn--primary { background: var(--sunset); color: var(--charcoal); }
.lf-nav--solid       .lf-nav__btn--primary:hover { background: var(--burnt); }

/* ── Signed-in state — avatar pill replacing the Sign in/Sign up buttons.
   Hamburger + avatar (image, or the default circle-user glyph) opening the
   account menu. Menu uses the native Popover API (light-dismiss + Escape,
   no JS); placement via CSS anchor positioning — thinner support, add a
   fallback when porting if needed (same caveat as the waters-show overflow). */
.lf-nav__avatar-btn {
  anchor-name: --lf-nav-account;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.35rem 0.3rem 0.85rem;
  border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,0.35);
  background: transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.lf-nav__avatar-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.6); }
.lf-nav__hamburger { color: rgba(255,255,255,0.85); font-size: 0.85rem; }
.lf-nav__avatar { width: 1.9rem; height: 1.9rem; border-radius: 50%; object-fit: cover; }
.lf-nav__avatar--default { color: rgba(255,255,255,0.85); font-size: 1.9rem; }

.lf-nav__menu { margin: 0; inset: auto; border: none; padding: 0.4rem; min-width: 220px;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  position: absolute; position-anchor: --lf-nav-account; top: calc(anchor(bottom) + 0.5rem); right: anchor(right); }
.lf-nav__menu:popover-open { display: flex; flex-direction: column; }
.lf-nav__menu-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; color: var(--forest); }
.lf-nav__menu-item:hover { background: var(--forest-tint); }
.lf-nav__menu-item i { color: var(--muted); }
.lf-nav__menu-divider { height: 1px; background: var(--border); margin: 0.35rem 0.5rem; }

/* ==========================================================================
   Buttons — the standard action button. Variants: primary (forest),
   accent (sunset CTA), secondary (forest outline), danger-outline
   (destructive actions — Clear route on edit-water), ghost (quiet text).
   States: :hover / .is-pressed / :disabled (or .is-disabled). Catalogued
   in components.html; lifted here once a real page (waters#show) used them.
   ========================================================================== */
.btn { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; padding: 0.6rem 1.4rem; border-radius: var(--radius-pill);
  border: 1.5px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; }
.btn--primary { background: var(--primary); color: var(--bg); }
.btn--primary:hover, .btn--primary.is-hover { background: var(--primary-hover); }
.btn--primary.is-pressed { background: color-mix(in srgb, var(--forest) 70%, #000); transform: translateY(1px); }
.btn--accent { background: var(--sunset); color: var(--charcoal); }
.btn--accent:hover, .btn--accent.is-hover { background: var(--burnt); }
.btn--accent.is-pressed { background: color-mix(in srgb, var(--burnt) 82%, #000); color: var(--bg); transform: translateY(1px); }
.btn--secondary { background: var(--bg); border-color: var(--primary); color: var(--primary); }
.btn--secondary:hover, .btn--secondary.is-hover { background: var(--primary); color: var(--bg); }
.btn--secondary.is-pressed { background: var(--primary-hover); color: var(--bg); transform: translateY(1px); }
.btn--danger-outline { background: transparent; border-color: var(--error); color: color-mix(in srgb, var(--error) 78%, #000); }
.btn--danger-outline:hover, .btn--danger-outline.is-hover { background: var(--error); color: #fff; }
.btn--danger-outline.is-pressed { background: color-mix(in srgb, var(--error) 80%, #000); color: #fff; transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--primary); }
.btn--ghost:hover, .btn--ghost.is-hover { color: var(--primary-hover); background: var(--forest-tint); }
.btn--ghost.is-pressed { color: color-mix(in srgb, var(--forest) 70%, #000); }
.btn.is-disabled, .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn--lg { padding: 0.8rem 2rem; font-size: 0.95rem; }  /* wizard CTAs: Get started / final submit */

/* ==========================================================================
   Form fields — label-above pattern (chosen over the app's current floating
   labels: no JS, label stays visible, plays well with autofill). States:
   focus / error / success / disabled, plus a native-checkbox row. Catalogued
   in components.html; lifted here when the auth pages used them.
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field__label { font-size: 0.78rem; font-weight: 700; color: var(--heading); }
.field__input { font-family: var(--font-ui); font-size: 0.9rem; padding: 0.6rem 0.85rem; border-radius: 0.6rem; max-width: 100%;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.field__input::placeholder { color: var(--muted); }
textarea.field__input { resize: vertical; }
.field__input:focus, .field__input.is-focus { border-color: var(--water); box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 25%, transparent); }
.field--error .field__input  { border-color: var(--error);   background: var(--error-bg); }
.field--success .field__input{ border-color: var(--success); background: var(--success-bg); }
.field__input:disabled, .field--disabled .field__input { background: var(--bg-alt); color: var(--muted); cursor: not-allowed; }
.field__msg { font-size: 0.74rem; display: flex; align-items: center; gap: 0.35rem; }
.field--error .field__msg   { color: color-mix(in srgb, var(--error) 78%, #000); }
.field--success .field__msg { color: color-mix(in srgb, var(--success) 72%, #000); }
/* checkbox row — native control, brand-tinted via accent-color */
.field--checkbox { flex-direction: row; align-items: center; gap: 0.55rem; }
.field__checkbox { width: 1rem; height: 1rem; accent-color: var(--forest); }
.field__checkbox-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
/* short field-tied note under a control (single-phrase hints go in the label;
   how-to guidance gets an .alert--info banner instead) */
.field__hint { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
/* two-up row of fields — collapses on small screens */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .field-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Auth pages — devise sign in / sign up. Full-viewport two-photo background
   with the forest hero scrim (the transparent nav's second legitimate home),
   a centred card of label-above fields, sunset submit, OAuth buttons
   (Google/Apple keep their own brand colours), cross-link footer. No site
   footer on auth pages, matching the Rails views.
   ========================================================================== */
.lf-auth { position: relative; min-height: 100vh; display: flex; flex-direction: column; }
.lf-auth__bg { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.lf-auth__bg img { width: 100%; height: 100%; object-fit: cover; }
.lf-auth__bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--hero-overlay-top), var(--hero-overlay-bottom)); }
@media (max-width: 640px) {
  .lf-auth__bg { grid-template-columns: 1fr; }
  .lf-auth__bg img + img { display: none; }
}
.lf-auth__main { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem 4rem; }

.lf-auth-card { width: 100%; max-width: 420px; background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.25rem 2rem; }
.lf-auth-card__title { font-size: 1.45rem; font-weight: 800; color: var(--heading); line-height: 1.25; margin-bottom: 1.5rem; }
/* subtitle sits between title and form (forgot password) — pull back up under the title */
.lf-auth-card__subtitle { font-size: 0.9rem; color: var(--muted); margin: -1.1rem 0 1.5rem; }
.lf-auth-card__note { font-size: 0.76rem; line-height: 1.55; color: var(--muted); margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.lf-auth-card__form { display: flex; flex-direction: column; gap: 1rem; }
.lf-auth-card__submit { justify-content: center; width: 100%; margin-top: 0.25rem; padding-top: 0.75rem; padding-bottom: 0.75rem; font-size: 0.95rem; }
.lf-auth-card__forgot { display: block; text-align: center; font-size: 0.82rem; font-weight: 600; margin-top: 1rem; }
.lf-auth-card__oauth { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.lf-auth-card__footer { text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 1.4rem; }
.lf-auth-card__footer a { font-weight: 700; }

/* OAuth buttons — provider brand colours, not ours */
.lf-oauth-btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600;
  padding: 0.7rem 1rem; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  cursor: pointer; transition: background 0.15s ease; }
.lf-oauth-btn--google { background: #fff; color: var(--charcoal); }
.lf-oauth-btn--google:hover { background: color-mix(in srgb, var(--charcoal) 5%, #fff); }
.lf-oauth-btn--apple { background: #000; color: #fff; border-color: #000; }
.lf-oauth-btn--apple:hover { background: #1a1a1a; }
/* "Continue with email" — not a provider, so it takes OUR colours (forest
   outline) while keeping the OAuth stack's shape and width */
.lf-oauth-btn--email { background: transparent; color: var(--forest); border-color: var(--forest); }
.lf-oauth-btn--email:hover { background: var(--forest-tint); }
/* Rails: button_to wraps each button in a <form class="button_to">, making
   the FORM the stretching flex child instead of the button. display:contents
   hides the wrapper from layout so the buttons fill the stack like the bare
   ones above. Inert in the mockups; load-bearing on the port. */
.lf-auth-card__oauth form.button_to { display: contents; }

/* ==========================================================================
   Modal — native <dialog>. The replacement for the old modal library, retired
   in reskin phase 10 (the JS bundle now leaves both layouts). Straight into
   components.css (the map-markers / conditions-kit precedent) — the Rails
   partials exist, there is no page to mock. Two states, both live specimens
   in components.html:

     • default    — dismissible (shared/_sign_in_modal): × close, backdrop
                    click, Escape. showModal() gives backdrop + focus trap.
     • --gated    — inescapable (shared/_sign_in_gate_modal, the usage wall):
                    no close button, no light-dismiss. A <dialog>'s backdrop is
                    inert, so Escape is the only exit to block — and since
                    preventDefault on the `cancel` event does NOT reliably hold
                    a modal open under Chromium's close-watcher, the usage-wall
                    controller swallows the Escape keydown at capture instead.

   COMPOSES .lf-auth-card — the markup is <dialog class="lf-auth-card
   lf-modal">, so the box (width, padding, radius, shadow, background) has
   ONE definition and the body is the auth card's own furniture reused
   (.lf-oauth-btn, __oauth, __footer, __submit). This class adds only what a
   <dialog> needs: UA resets, phone side-margin, backdrop, close button,
   "or" divider. (No logo — the app's logo-trout header is
   dropped on port.) Both Rails modals render one shared partial
   (shared/_sign_in_modal_body), so the body ports once. Catalogued as
   variants in the Auth card section of components.html.
   ========================================================================== */
.lf-modal {
  /* Don't touch `position` — dialog:modal's UA rule sets fixed + inset:0
     to center it. But the global `* { margin: 0 }` reset (line 19) wipes
     the UA's `margin: auto` that inset:0 centering depends on, so it must
     be restored explicitly here.
     width overrides the card's 100% so phones keep a side margin. */
  width: calc(100% - 2rem); margin: auto;
  border: none; color: var(--text);
}
/* forest scrim, matching the hero overlays (::backdrop sits in the top layer —
   a literal rgba, not a var(), so it can't depend on custom-property inheritance) */
.lf-modal::backdrop { background: rgba(34, 69, 63, 0.55); }
.lf-modal__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1.5px solid var(--border); color: var(--muted);
  font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.lf-modal__close:hover { background: var(--cta-bg); color: var(--forest); }
/* "or" rule — the one genuinely new bit of chrome; separates the primary
   Sign-up CTA from the alternatives below it */
.lf-modal__divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; }
.lf-modal__divider::before, .lf-modal__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.lf-modal__divider span { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
/* the divider already separates this stack — drop the auth card's own rule */
.lf-modal .lf-auth-card__oauth { margin-top: 0; padding-top: 0; border-top: none; }

/* ==========================================================================
   Search bar — pill input with a leading icon. Shared chrome: destinations
   index, nearby-waters toolbar, and other browse/search surfaces. The page
   sets the WIDTH (e.g. max-width on a wrapper); the component is the chrome.
   ========================================================================== */
.lf-search-bar {
  display: flex; align-items: center; width: 100%;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.65rem 1.1rem; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lf-search-bar:focus-within { border-color: var(--water); box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 22%, transparent); }
.lf-search-bar__icon { color: var(--water); margin-right: 0.6rem; }
.lf-search-bar__input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: 0.9rem; color: var(--text);
}
.lf-search-bar__input::placeholder { color: var(--muted); }

/* ==========================================================================
   List/Map toggle — segmented pill pairing a List and a Map view button.
   Shared by browse/search surfaces (nearby-waters toolbar, the water-show
   "Explore nearby" section). The page owns the toolbar layout around it.
   ========================================================================== */
.lf-toggle { display: inline-flex; background: var(--chip-bg); border: 1px solid var(--cta-border); border-radius: var(--radius-pill); padding: 0.25rem; }
.lf-toggle__btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--text);
  background: transparent; border: none; cursor: pointer;
  padding: 0.45rem 1.1rem; border-radius: var(--radius-pill);
  transition: background 0.15s ease, color 0.15s ease;
}
.lf-toggle__btn--active { background: var(--forest); color: #fff; box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Explore banner — contour-wave header band pairing a heading + result count
   with the List/Map search toolbar. The standard page-head band on every
   hero-less content page (nearby#waters, fisheries, fishlists, contact,
   legal, manage-account, the edit pages); also the embedded onward-journey
   section on waters#show. The contour texture (same motif as
   the homepage features section) is baked in as a ::before data-URI
   background — pages add NO markup for it.
   ========================================================================== */
.lf-explore-banner { position: relative; overflow: hidden; background: var(--bg-alt); border-bottom: 1px solid var(--border); padding: 2.5rem 0; }
.lf-explore-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.55;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 500'><g fill='none' stroke='%2322453F' stroke-opacity='0.08' stroke-width='1.5'><path d='M-50 80 C200 20 380 140 620 90 C860 40 1020 150 1250 100'/><path d='M-50 130 C200 70 380 190 620 140 C860 90 1020 200 1250 150'/><path d='M-50 180 C200 120 380 240 620 190 C860 140 1020 250 1250 200'/><path d='M-50 230 C200 170 380 290 620 240 C860 190 1020 300 1250 250'/><path d='M-50 280 C200 220 380 340 620 290 C860 240 1020 350 1250 300'/><path d='M-50 330 C200 270 380 390 620 340 C860 290 1020 400 1250 350'/><path d='M-50 380 C200 320 380 440 620 390 C860 340 1020 450 1250 400'/><path d='M-50 430 C200 370 380 490 620 440 C860 390 1020 500 1250 450'/></g></svg>") center / cover no-repeat; }
.lf-explore-banner .container { position: relative; z-index: 1; }
.lf-explore-banner__title { font-size: clamp(1.35rem, 1rem + 2vw, 2rem); font-weight: 800; color: var(--heading); letter-spacing: -0.015em; }
.lf-explore-banner__count { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--muted); margin-top: 0.5rem; }
.lf-explore-banner__count i { color: var(--sunset); }
.lf-explore-banner__toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* title-row with a right-aligned action — edit pages' View water / View fishery */
.lf-explore-banner__row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
.lf-explore-banner__search { flex: 1; min-width: 240px; max-width: 480px; }
.lf-explore-banner .lf-breadcrumb { margin-bottom: 0.6rem; }

/* Breadcrumb — Home / … / current. Shared trail; sits inside the explore banner. */
.lf-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.8rem; color: var(--muted); }
.lf-breadcrumb a { color: var(--muted); }
.lf-breadcrumb a:hover { color: var(--forest); }
.lf-breadcrumb__sep { color: var(--border); }
.lf-breadcrumb__current { color: var(--forest); font-weight: 600; }

/* ==========================================================================
   Card grid — the browse-surface grid wrapping .lf-water-card (nearby,
   waters#show explore-nearby, fishlists, fisheries#show). 4-up by default;
   --cols-3 for fisheries#index (Rails col-lg-4).
   ========================================================================== */
.lf-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding: 2rem 0 4rem; }
.lf-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .lf-card-grid, .lf-card-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .lf-card-grid, .lf-card-grid--cols-3 { grid-template-columns: 1fr; } }

/* Map placeholder — the List/Map toggle's alternate view. Live Leaflet can't
   be mocked statically; hidden by default like Rails' d-none. */
.lf-map-placeholder { display: none; height: 460px; margin: 2rem 0 4rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background:
  repeating-linear-gradient(45deg, var(--bg-alt), var(--bg-alt) 18px, var(--bg) 18px, var(--bg) 36px);
  align-items: center; justify-content: center; color: var(--muted); font-size: 0.9rem; gap: 0.5rem; }
/* --inline — visible embedded-map panel (waters-show route map; edit-water's
   lake-search / annotations / boats / parking / route maps). --sm is shorter. */
.lf-map-placeholder--inline { display: flex; height: 400px; margin: 0; }
.lf-map-placeholder--sm { height: 300px; }

/* ==========================================================================
   Water card — the app's most-reused card (shared/_waters partial: nearby,
   fisheries#show, fishlists, trips). Image with a numbered index + heart
   overlay, then title, location, description, and water-type / species tags.
   ========================================================================== */
.lf-water-card {
  position: relative;  /* anchor for the stretched title link below */
  display: flex; flex-direction: column; height: 100%;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lf-water-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.lf-water-card__image-wrap { position: relative; aspect-ratio: 65 / 38; overflow: hidden; }
.lf-water-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.lf-water-card:hover .lf-water-card__img { transform: scale(1.04); }

/* numbered index badge — ties each card to its map marker */
.lf-water-card__index {
  position: absolute; top: 0.7rem; left: 0.7rem;
  min-width: 1.7rem; height: 1.7rem; padding: 0 0.45rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--forest); color: #fff;
  font-size: 0.85rem; font-weight: 700; box-shadow: var(--shadow-sm);
}

/* heart / add-to-fishlist button — raised above the stretched title link so it stays clickable */
.lf-water-card__hearts { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; }
.lf-water-card__heart {
  border: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--forest); font-size: 0.95rem;
  box-shadow: var(--shadow-sm); transition: background 0.15s ease, color 0.15s ease;
}
.lf-water-card__heart:hover { background: #fff; color: var(--sunset); }
/* added — water is in a fishlist (Rails: the remove-from-fishlist heart) */
.lf-water-card__heart--active { background: var(--sunset); color: #fff; }
.lf-water-card__heart--active:hover { background: var(--burnt); color: #fff; }

.lf-water-card__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.15rem; }
.lf-water-card__title { font-size: 1.15rem; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; }
/* no title hover colour — the whole-card lift + image zoom is the hover affordance */
/* stretched link: the title anchor covers the whole card, making it all clickable
   (the heart sits above via z-index). No nested-anchor problem, no markup change. */
.lf-water-card__title-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.lf-water-card__location { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; }
.lf-water-card__desc { font-size: 0.86rem; line-height: 1.5; color: var(--text); margin-top: 0.6rem; }

.lf-water-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.85rem; }
.lf-water-card__tag {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill); background: var(--chip-bg); color: var(--chip-fg);
}
.lf-water-card__tag i { font-size: 0.75rem; }  /* icon inherits the chip text colour (forest), matching the label */

/* ==========================================================================
   Map markers — pins + cluster bubbles dropped on the Leaflet nearby map.
   The app currently hardcodes off-brand hexes in JS (mapIconHtml: water
   #3b82f6, location/selected #22c55e; clusterIconHtml: #3b82f6). These
   brand-tokened classes are the replacement to apply on port. White ring
   keeps a pin legible over busy satellite/hybrid tiles.
   ========================================================================== */
.lf-map-pin {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--water); color: #fff; font-size: 16px;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}
.lf-map-pin--location { background: var(--sunset); color: var(--charcoal); }  /* page focal point: fishery / water / fishlist centre */
.lf-map-pin--selected { background: var(--forest); }                          /* active water */
/* Conditions-overlay pins (coastal): tide station (fa-anchor) and salmon
   farm (fa-bug) — replace the JS-hardcoded #1e3a8a navy / #f59e0b amber.
   Farm takes the light-fill/charcoal-glyph convention (white fails on
   amber). Sized under the water pins so the centroid stays the loudest
   thing on the map; the farm popup carries the sea-lice count. */
.lf-map-pin--station { width: 32px; height: 32px; font-size: 14px; background: var(--deep-water); }
.lf-map-pin--farm    { width: 28px; height: 28px; font-size: 13px; background: var(--warning); color: var(--charcoal); }

.lf-map-cluster {
  width: 36px; height: 36px; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--forest); border: 3px solid #fff;
  color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
}
.lf-map-cluster--md { width: 44px; height: 44px; font-size: 15px; }   /* 10–49 waters */
.lf-map-cluster--lg { width: 52px; height: 52px; font-size: 15px; }   /* 50+ waters */

/* ==========================================================================
   Water-selection card — compact popup shown when a map marker is clicked
   (JS: water_card_template / .water-selection-card). Thumb + name + water-
   type + species, with a close button.
   ========================================================================== */
.lf-water-selection-card {
  position: relative; display: flex; width: 280px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md); overflow: hidden;
}
.lf-water-selection-card__link { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; padding: 0.6rem; }
.lf-water-selection-card__img { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; }
.lf-water-selection-card__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.lf-water-selection-card__name { font-size: 0.92rem; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-water-selection-card__type,
.lf-water-selection-card__species { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--muted); }
.lf-water-selection-card__type i,
.lf-water-selection-card__species i { color: inherit; }  /* icon matches its muted label text */
.lf-water-selection-card__close {
  position: absolute; top: 0.35rem; right: 0.35rem;
  width: 1.5rem; height: 1.5rem; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.85); color: var(--muted); font-size: 0.75rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lf-water-selection-card__close:hover { background: #fff; color: var(--forest); }

/* ==========================================================================
   Info card — titled panel with a trailing icon in a soft header band, then
   prose. The Rails "water-card", now the general card workhorse: waters#show
   sidebar, fisheries#show (Rules & Info, Contact), the contact form, credits
   attribution cards, the legal Contents box, and every form-page card
   (manage-account, edit-fishery, edit-water — see Form page below).
   The page owns the layout around it (sidebar stack, grid, max-width).
   ========================================================================== */
.lf-info-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.lf-info-card__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1.1rem; background: var(--cta-bg); border-bottom: 1px solid var(--border); }
.lf-info-card__title { font-size: 0.95rem; font-weight: 800; color: var(--heading); }
.lf-info-card__icon { color: var(--forest-60); font-size: 1rem; }
.lf-info-card__body { padding: 1.1rem; color: var(--text); font-size: 0.9rem; line-height: 1.6; }
.lf-info-card__body p + p { margin-top: 0.7rem; }

/* ==========================================================================
   Form page — single centred column of .lf-info-cards, each body a stack of
   .fields, closed by a right-aligned actions row (ghost Cancel + accent
   submit). manage-account, edit-water, edit-fishery — promoted on third use.
   --wide widens the column for forms whose cards hold maps (edit-water).
   ========================================================================== */
.lf-form-col { max-width: 46rem; margin: 0 auto; padding: 2.5rem 0 4rem; display: flex; flex-direction: column; gap: 1.5rem; }
.lf-form-col--wide { max-width: 52rem; }
.lf-form-col .lf-info-card__body { display: flex; flex-direction: column; gap: 1rem; }
.lf-form-col .lf-info-card__body > .btn { align-self: flex-start; }
.lf-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 0.75rem; }

/* ==========================================================================
   Alerts — inline banners. error/success/warning give system feedback;
   --info doubles as the form GUIDANCE banner (the app's blue
   .wizard__ai-hint, brand-toned): lead a form card/field with it when
   explaining how to use the thing — map instructions, season-override
   semantics. Short field-tied notes stay .field__hint. Lifted here on
   first real-page use (edit-water / edit-fishery guidance).
   ========================================================================== */
.alert { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.85rem 1.1rem; border-radius: 0.7rem; border-left: 4px solid; font-size: 0.85rem; line-height: 1.5; }
.alert i { margin-top: 0.15rem; }
.alert__title { font-weight: 700; }
.alert--error   { background: var(--error-bg);   border-color: var(--error);   color: color-mix(in srgb, var(--error) 80%, #000); }
.alert--success { background: var(--success-bg); border-color: var(--success); color: color-mix(in srgb, var(--success) 70%, #000); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning); color: color-mix(in srgb, var(--warning) 72%, #000); }
.alert--info    { background: color-mix(in srgb, var(--water) 14%, #fff); border-color: var(--water); color: var(--deep-water); }

/* ==========================================================================
   Tooltip — ONE bubble for everything Bootstrap tooltips did (Bootstrap is
   dropped on port): the conditions ⓘ cue explainers, the one-time nudge,
   the slider hint. Tap-to-reveal via the native Popover API (light-dismiss
   + Escape, no JS — the nav-menu precedent), NOT hover: the copy is
   load-bearing on mobile where hover doesn't exist. Plain title attributes
   remain the free desktop nicety. Placement: lf-popover-anchor.js (pages
   <script src> it next to this file; once in the layout on port) positions
   every .lf-tooltip popover — clamped inside the viewport (a bubble centred
   on an edge-hugging ⓘ would hang off-screen on phones, which CSS anchor
   positioning can't simply prevent) with the arrow offset to keep pointing
   at the trigger. No per-instance wiring beyond popovertarget. The nav menu
   still uses CSS anchor positioning, with the same script as its
   Safari/Firefox fallback. Product nudges reuse this bubble; their
   show/dismiss timing stays app JS. overflow: visible beats the UA popover
   default (overflow: auto), which otherwise clips the arrow; white-space:
   normal beats nowrap inherited from hosts like the conditions readouts row.
   ========================================================================== */
.lf-tooltip { margin: 0; inset: auto; border: none; position: absolute; overflow: visible; white-space: normal;
  width: max-content; max-width: min(30ch, calc(100vw - 1rem));
  background: var(--footer-bg); color: color-mix(in srgb, var(--bg) 92%, transparent);
  padding: 0.5rem 0.8rem; border-radius: var(--radius-sm);
  font-size: 0.8rem; font-weight: 500; line-height: 1.5; box-shadow: var(--shadow-md); }
/* arrow — --lf-tooltip-arrow-x (set by the script) keeps it over the trigger
   when the bubble has been clamped away from centre; 50% otherwise */
.lf-tooltip::after { content: ''; position: absolute; top: 100%; left: var(--lf-tooltip-arrow-x, 50%);
  transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--footer-bg); }

/* ==========================================================================
   Legal page — the pages# template (terms, privacy — credits turned out NOT
   to be this template; it's banner + attribution info-cards): sticky
   Contents .lf-info-card beside a prose body. Body covers every element the
   legal prose uses: h2 sections, h3 sub-sections, lists, links, data tables.
   ========================================================================== */
.lf-legal { display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start; padding: 2.5rem 0 4rem; }
@media (max-width: 880px) { .lf-legal { grid-template-columns: 1fr; gap: 2rem; } }
.lf-legal__toc { position: sticky; top: 1.5rem; }
@media (max-width: 880px) { .lf-legal__toc { position: static; } }
.lf-legal__toc-list { list-style: decimal inside; display: flex; flex-direction: column; gap: 0.35rem; }
.lf-legal__toc-list li { font-size: 0.82rem; color: var(--muted); }
.lf-legal__toc-list a { font-weight: 600; }
.lf-legal__body { max-width: 72ch; font-size: 0.95rem; line-height: 1.7; color: var(--text); }
/* body used without the Contents column (pages with no TOC — the bylaws
   pages on the Rails port); carries the grid's vertical padding itself */
.lf-legal__body--standalone { padding: 2.5rem 0 4rem; }
.lf-legal__body h2 { font-size: 1.2rem; font-weight: 800; color: var(--heading); margin: 2rem 0 0.75rem; scroll-margin-top: 1.5rem; }
.lf-legal__body h2:first-child { margin-top: 0; }
.lf-legal__body h3 { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 1.4rem 0 0.5rem; }
.lf-legal__body p + p { margin-top: 0.8rem; }
.lf-legal__body ul { list-style: disc; padding-left: 1.4rem; margin: 0.8rem 0; }
.lf-legal__body li + li { margin-top: 0.35rem; }
.lf-legal__body table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.88rem; }
.lf-legal__body th, .lf-legal__body td { border: 1px solid var(--border); padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; }
.lf-legal__body th { background: var(--cta-bg); color: var(--heading); font-weight: 800; }

/* ==========================================================================
   Add-fishery CTA — forest panel with contour texture, icon roundel, title +
   text and a sunset button. Rails renders the same section on the homepage
   and fisheries#index (hp-cta partial); lifted here on its second mockup use.
   The stone-stroke contour texture is a ::before data-URI background — pages
   add no markup for it.
   ========================================================================== */
.lf-cta { padding: 3rem 0 4rem; background: var(--bg-alt); }
.lf-cta__panel {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; gap: 2rem;
  background: var(--primary);
  border-radius: 1.25rem;
  padding: 2.5rem 3rem;
}
@media (max-width: 640px) { .lf-cta__panel { flex-direction: column; text-align: center; padding: 2rem 1.5rem; } }
.lf-cta__panel::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'><g fill='none' stroke='%23D0C7B5' stroke-opacity='0.08' stroke-width='1.5'><path d='M-50 60 C200 10 380 110 620 70 C860 30 1020 120 1250 80'/><path d='M-50 120 C200 70 380 170 620 130 C860 90 1020 180 1250 140'/><path d='M-50 180 C200 130 380 230 620 190 C860 150 1020 240 1250 200'/><path d='M-50 240 C200 190 380 290 620 250 C860 210 1020 300 1250 260'/></g></svg>") center / cover no-repeat; }
.lf-cta__mark { position: relative; z-index: 1; flex-shrink: 0; display: flex; }
/* "Put your waters on the map" — map/marker motif, outlined so it reads as
   decoration rather than a clickable button */
.lf-cta__plus {
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bg) 50%, transparent);
  color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
}
.lf-cta__content { position: relative; z-index: 1; flex: 1; }
.lf-cta__title {
  font-family: var(--display-font);
  font-size: 1.5rem; font-weight: 700; color: #fff;
  letter-spacing: -0.015em; line-height: 1.15; margin-bottom: 0.4rem;
}
.lf-cta__title em { font-style: italic; color: var(--accent); }
.lf-cta__text { font-size: 0.875rem; color: rgba(255,255,255,0.78); max-width: 64ch; }
.lf-cta__btn {
  position: relative; z-index: 1; flex-shrink: 0;
  padding: 0.7rem 1.75rem; border-radius: 2rem;
  background: var(--sunset); color: var(--charcoal);
  font-size: 0.875rem; font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.12s ease;
}
.lf-cta__btn:hover { background: var(--burnt); transform: translateY(-1px); }

/* ==========================================================================
   Form map panels — the interaction layouts shared by edit-water and the
   add-water wizard (promoted on second use). These layouts are design
   decisions from the Rails partials + Stimulus controllers and must survive
   the port: lake-search results LEFT / map RIGHT (result rows and map pins
   highlight/select each other), Geograph gallery LEFT / photo-pin map RIGHT
   (photos pinned where they were taken), annotations drawing map 58% /
   saved-entries panel. The page sets map heights (450 search / 500 route…).
   ========================================================================== */
.lf-lake-search { display: flex; gap: 1.5rem; }
.lf-lake-search__panel { flex: 0 0 40%; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.lf-lake-search__map { flex: 1; min-width: 0; }
.lf-search-group { display: flex; }
.lf-search-group .field__input { flex: 1; border-radius: 0.6rem 0 0 0.6rem; }
.lf-search-group .btn { border-radius: 0 0.6rem 0.6rem 0; }
/* result states: hover/map-highlight = tint (hovering a map pin highlights its
   row and vice versa); selected = SOLID forest */
.lf-lake-result { display: block; width: 100%; text-align: left; padding: 0.65rem 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-md); background: var(--bg);
  font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; }
.lf-lake-result + .lf-lake-result { margin-top: 0.45rem; }
.lf-lake-result:hover, .lf-lake-result--map-highlight { border-color: var(--forest); background: var(--forest-tint); }
.lf-lake-result--selected { border-color: var(--forest); background: var(--forest); color: #fff; }

/* Geograph photo picker — two states: BROWSING (thumbnail grid, add-water) and
   SELECTED (preview + attribution + change button, edit-water) in the left
   panel; the photo-location map is always on the right */
.lf-photo-layout { display: flex; gap: 1.5rem; }
.lf-photo-layout__gallery { flex: 0 0 40%; min-width: 0; }
.lf-photo-layout__gallery img { width: 100%; border-radius: var(--radius-md); }
.lf-photo-layout__map { flex: 1; min-width: 0; }
.lf-geograph-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.lf-geograph-thumb { border: 2px solid var(--border); border-radius: var(--radius-md); overflow: hidden; cursor: pointer; background: var(--bg); }
.lf-geograph-thumb:hover { border-color: var(--forest); }
.lf-geograph-thumb--selected { border-color: var(--forest); box-shadow: 0 0 0 3px var(--forest-tint); }
.lf-geograph-thumb__img { width: 100%; height: 110px; object-fit: cover; border-radius: 0; }
.lf-geograph-thumb__caption { padding: 0.4rem 0.6rem; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-upload-link { font-size: 0.88rem; font-weight: 600; color: var(--forest); }
.lf-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1.5rem;
  border: 2px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-alt); cursor: pointer;
  font-size: 0.8rem; font-weight: 600; color: var(--muted); text-align: center; max-width: 20rem; }
.lf-dropzone:hover { border-color: var(--forest); background: var(--forest-tint); }
.lf-dropzone i { font-size: 1.5rem; }
.lf-dropzone input { display: none; }

/* Map + side panel — drawing map LEFT (58%), entries panel RIGHT (annotations on both pages; the wizard's Boats step) */
.lf-map-split { display: flex; gap: 1.5rem; align-items: start; }
.lf-map-split__map { flex: 0 0 58%; min-width: 0; }
.lf-map-split__panel { flex: 1; min-width: 0; }
.lf-annotation-entry { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-size: 0.85rem; font-weight: 600; color: var(--heading); }
.lf-annotation-entry + .lf-annotation-entry { margin-top: 0.5rem; }

/* × button — instant JS removal (annotations, JS-added boats), not a
   deferred remove-on-save checkbox */
.lf-x-btn { flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center;
  justify-content: center; background: var(--bg); border: 1.5px solid var(--border); border-radius: 50%;
  color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; }
.lf-x-btn:hover { border-color: var(--error); color: var(--error); background: var(--error-bg); }

/* under-map drawing controls row (Undo / Clear / Finish) */
.lf-map-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Boat entry — recessed sub-panel (persisted boats on edit-water; JS-added
   boats on both pages, with an .lf-x-btn in the header) */
.lf-boat { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.25rem; background: var(--bg-alt);
  display: flex; flex-direction: column; gap: 1rem; }
.lf-boat__header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
  font-size: 0.88rem; font-weight: 700; color: var(--heading); }

/* Side-by-side panels stack on small screens */
@media (max-width: 720px) { .lf-lake-search, .lf-photo-layout, .lf-map-split { flex-direction: column; } }

/* ==========================================================================
   Choice pills — multi/single-select grids of native controls inside
   bordered pills (species checkboxes, water-type radios). Option cards —
   the bigger radio-as-card treatment for the important either/or choices
   (publish status). Both promoted on second use (edit-water → add-water).
   ========================================================================== */
.lf-choice-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lf-choice { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.8rem; border: 1.5px solid var(--border);
  border-radius: 2rem; font-size: 0.85rem; font-weight: 600; color: var(--text); cursor: pointer; }
.lf-choice:has(:checked) { border-color: var(--forest); background: var(--forest-tint); }
.lf-choice input { accent-color: var(--forest); }

.lf-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 640px) { .lf-option-grid { grid-template-columns: 1fr; } }
.lf-option { cursor: pointer; }
.lf-option input { position: absolute; opacity: 0; }
.lf-option__card { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 1rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-md); }
.lf-option:has(:checked) .lf-option__card { border-color: var(--forest); background: var(--forest-tint); }
.lf-option__card i { font-size: 1.1rem; color: var(--forest-60); }
.lf-option__card strong { display: block; font-size: 0.88rem; color: var(--heading); }
.lf-option__card small { font-size: 0.78rem; color: var(--muted); }

/* ==========================================================================
   Conditions overlay — the fishing-forecast overlay on waters#show: live map
   on top, controls sheet at the bottom (verdict pill + hour readouts, 7-day
   strip, hour slider over colour-banded strips; tide pill + tide band for
   coastal). Entirely JS-rendered in Rails (conditions.css/tide.css carry
   hardcoded off-brand hexes) — these brand-tokened classes are the port
   replacement, same deal as the map markers. Colour decisions: the verdict
   traffic light maps to the approved Layer-2 semantics (good=success,
   fair=warning, poor=error); tide signalling maps to the water tokens
   (prime=water, outside=taupe/stone). The fair pill and the tide pills take
   dark text — white fails contrast on the amber/water fills (the accent
   button sets the convention: light fill, charcoal text).
   ========================================================================== */
.lf-conditions-sheet { position: absolute; bottom: 0; left: 0; right: 0; height: 260px;
  background: var(--bg); display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem 1.25rem 1.5rem; box-shadow: 0 -2px 8px rgba(34, 69, 63, 0.10); }
.lf-conditions-sheet--no-tide { height: 220px; }
.lf-conditions-sheet .lf-pill-row { align-self: center; }

/* pill + its standalone info cue, side by side. The cue is a BUTTON opening
   an .lf-tooltip via popovertarget (tap-friendly), not a hover title */
.lf-pill-row { display: inline-flex; align-items: center; gap: 0.4rem; }
.lf-pill-cue { background: none; border: none; padding: 0; font-size: 0.95rem; color: var(--muted); cursor: help; }
.lf-pill-cue:hover { color: var(--forest); }

/* hour readouts row — verdict pill, temp / cloud / wind / precip */
.lf-conditions-readouts { display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-size: 0.95rem; white-space: nowrap; color: var(--text); }

.lf-verdict-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill); font-weight: 700; text-transform: capitalize;
  background: var(--muted); color: #fff; }
.lf-verdict-pill::before { content: '\f578'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.9em; }
.lf-verdict-pill--good { background: var(--success); }
.lf-verdict-pill--fair { background: var(--warning); color: var(--charcoal); }
.lf-verdict-pill--poor { background: var(--error); }

/* 7-day strip */
.lf-day-strip { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.lf-day-btn { min-width: 64px; padding: 0.4rem 0.75rem; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-ui); font-size: 0.9rem; font-weight: 600; line-height: 1.2; cursor: pointer; }
.lf-day-btn small { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.lf-day-btn:hover { border-color: var(--forest); color: var(--forest); }
.lf-day-btn--active, .lf-day-btn--active:hover { background: var(--forest); border-color: var(--forest); color: #fff; }
.lf-day-btn--active small { color: rgba(255, 255, 255, 0.85); }

/* hour slider over the banded strips */
.lf-hour-row { display: flex; align-items: flex-end; gap: 1rem; width: 100%; max-width: 480px; margin: 0.75rem auto 0; }
.lf-hour-label { min-width: 56px; padding-bottom: 2px; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--heading); }
.lf-hour-slider-wrap { flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 4px; }

.lf-hour-strip { display: flex; height: 8px; width: 100%; border-radius: 999px; overflow: hidden; background: var(--border); }
.lf-hour-strip__band { flex: 1 1 0; min-width: 0; }
.lf-hour-strip__band--good { background: var(--success); }
.lf-hour-strip__band--fair { background: var(--warning); }
.lf-hour-strip__band--poor { background: var(--error); }
.lf-hour-strip__band--tide-prime { background: var(--water); }
.lf-hour-strip__band--tide-outside { background: var(--taupe); }
.lf-hour-strip__band--tide-unknown { background: var(--bg-alt); }

.lf-hour-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin-top: 8px;
  border-radius: 999px; background: var(--border); outline: none; accent-color: var(--forest); }
.lf-hour-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; border: 2px solid var(--forest); box-shadow: var(--shadow-sm); cursor: grab; }
.lf-hour-slider::-webkit-slider-thumb:active { cursor: grabbing; }
.lf-hour-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 2px solid var(--forest); box-shadow: var(--shadow-sm); cursor: grab; }

/* tide pill — status colours mirror the tide strip bands so pill and band
   agree as the user scrubs */
.lf-tide-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem;
  border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: var(--bg-alt); color: var(--muted); }
.lf-tide-pill::before { content: '\f13d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.lf-tide-pill--prime { background: var(--water-60); color: color-mix(in srgb, var(--deep-water) 80%, #000); }
.lf-tide-pill--outside { background: var(--stone-60); color: var(--charcoal); }
.lf-tide-pill--loading, .lf-tide-pill--unknown { background: var(--bg-alt); color: var(--muted); }

/* wind marker — white circle with mph + perimeter arrow, charcoal-ringed so
   it reads over busy tiles (replaces the JS #1a1a1a) */
.lf-wind-icon { position: relative; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95); border: 1.5px solid var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: var(--charcoal); box-shadow: var(--shadow-sm); }
.lf-wind-icon__arrow-wrap { position: absolute; inset: 0; pointer-events: none; }
.lf-wind-icon__arrow-tip { position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 14px; display: block; overflow: visible; }

/* loading skeleton — stone-tinted shimmer while the forecast loads */
.lf-conditions-skeleton { display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  width: 100%; max-width: 480px; margin: 0 auto; padding-top: 0.25rem; }
.lf-conditions-skeleton__pill { display: block; width: 180px; height: 26px; border-radius: 999px; }
.lf-conditions-skeleton__row { display: flex; gap: 0.85rem; justify-content: center; }
.lf-conditions-skeleton__row > span { display: block; width: 52px; height: 20px; }
.lf-conditions-skeleton__days { display: flex; gap: 0.5rem; }
.lf-conditions-skeleton__days > span { display: block; width: 64px; height: 46px; }
.lf-conditions-skeleton__slider { width: 100%; height: 24px; margin-top: 0.25rem; }
.lf-conditions-skeleton__pill, .lf-conditions-skeleton__row > span,
.lf-conditions-skeleton__days > span, .lf-conditions-skeleton__slider {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--stone) 28%, #fff) 0%,
    color-mix(in srgb, var(--stone) 12%, #fff) 50%,
    color-mix(in srgb, var(--stone) 28%, #fff) 100%);
  background-size: 200% 100%; animation: lf-skeleton-shimmer 1.4s linear infinite; border-radius: 6px; }
@keyframes lf-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .lf-conditions-skeleton__pill, .lf-conditions-skeleton__row > span,
  .lf-conditions-skeleton__days > span, .lf-conditions-skeleton__slider { animation: none; }
}

@media (max-width: 480px) {
  .lf-conditions-sheet { padding: 0.75rem 0.875rem 1.25rem; }
  .lf-conditions-readouts { gap: 0.55rem; font-size: 0.82rem; }
  .lf-day-strip { gap: 0.35rem; flex-wrap: nowrap; }
  .lf-day-btn { flex: 1 1 0; min-width: 0; padding: 0.45rem 0.25rem; font-size: 0.85rem; }
  .lf-day-btn small { font-size: 0.7rem; }
}

/* ==========================================================================
   Wizard chrome — the stepped-flow shell shared by the add-water and
   add-fishery wizards (promoted on second use): 4px progress bar (sticky in
   Rails), header (surtitle / title + step counter / optional description +
   status line), stacked-fields body, and the nav row (Back left, Skip/Next
   right). One header pattern for both wizards — the counter sits right of
   the title ("Step 2" / "Step 2 of 4"). The info-left/fields-right band
   (.lf-wizard__band) is the wizard's grouping device for related fields.
   Wizard pages render no footer (focused flow).
   ========================================================================== */
.lf-wizard__progress { height: 4px; background: var(--border); }
.lf-wizard__progress-bar { height: 100%; background: var(--water); }

.lf-wizard__header { margin-bottom: 2rem; }
.lf-wizard__surtitle { font-size: 0.8rem; font-weight: 700; color: var(--forest); margin-bottom: 0.15rem; }
.lf-wizard__title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lf-wizard__title { font-size: 1.6rem; font-weight: 800; color: var(--heading); letter-spacing: -0.015em; }
.lf-wizard__counter { font-size: 1.3rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.lf-wizard__desc { font-size: 0.88rem; color: var(--muted); line-height: 1.6; margin-top: 0.35rem; max-width: 62ch; }
.lf-wizard__status { font-size: 0.85rem; font-weight: 600; color: var(--forest); margin-top: 0.5rem; }

.lf-wizard__fields { display: flex; flex-direction: column; gap: 1rem; }
.lf-wizard__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.5rem; margin-top: 1.75rem; border-top: 1px solid var(--border); }
.lf-wizard__nav-right { display: flex; align-items: center; gap: 0.75rem; }

/* Landing step — lead + icon feature list above the Get-started CTA */
.lf-wizard-landing__lead { font-size: 1rem; color: var(--text); line-height: 1.65; max-width: 54ch; margin-bottom: 2rem; }
.lf-wizard-landing__features { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 2.25rem; }
.lf-wizard-landing__feature { display: flex; gap: 1rem; align-items: flex-start; }
.lf-wizard-landing__icon { width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; background: var(--forest-tint); color: var(--forest);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lf-wizard-landing__feature strong { display: block; font-size: 0.9rem; color: var(--heading); margin-bottom: 0.15rem; }
.lf-wizard-landing__feature p { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

/* Info-left / fields-right band — groups related fields with their blurb */
.lf-wizard__band { display: flex; gap: 3rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
/* The band before the nav drops its divider — the nav's own border-top is the
   line above Back/Next. (:last-of-type can't be used: .lf-wizard__nav is the
   last <div> sibling, so the band is never last-of-type.) */
.lf-wizard__band:has(+ .lf-wizard__nav) { border-bottom: none; padding-bottom: 0; }
.lf-wizard__band-info { flex: 0 0 240px; }
.lf-wizard__band-info h3 { font-size: 1rem; font-weight: 800; color: var(--heading); margin-bottom: 0.5rem; }
.lf-wizard__band-info p { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin-bottom: 0.5rem; }
.lf-wizard__band-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 767px) { .lf-wizard__band { flex-direction: column; gap: 1.25rem; } .lf-wizard__band-info { flex: none; } }

/* ==========================================================================
   Photo credit — the © caption for CC-licensed imagery, rendered by Rails'
   shared/_photo_credit partial (water hero, homepage hero, destination
   cards). Typography ONLY: each context positions it itself (a scoped
   absolute + offsets, or in-flow inside a positioned container) — an
   unscoped `position` here breaks containers that shrink-wrap.
   ========================================================================== */
.photo-credit { font-size: 0.7rem; color: rgba(255,255,255,0.7); }
.photo-credit a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 2px; }
.photo-credit a:hover { color: #fff; }

/* ==========================================================================
   Mailer band — newsletter signup rendered inside the footer, site-wide.
   Forest band (one step lighter than --footer-bg so it reads as its own
   strip), centred copy, pill input group with a sunset submit — the .lf-cta
   button family. Rails renders three states from shared/_mailer: signed-out
   (email form → signup funnel), signed-in unsubscribed (Subscribe button),
   subscribed (confirmation line).
   ========================================================================== */
.lf-mailer { background: var(--primary); padding: 3.5rem 0; }
.lf-mailer__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.lf-mailer__title { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 0.5rem; }
.lf-mailer__text { font-size: 0.9rem; color: rgba(255,255,255,0.8); margin-bottom: 1.25rem; line-height: 1.6; }
.lf-mailer__form { max-width: 420px; margin: 0 auto; }
.lf-mailer__input-group { display: flex; border-radius: var(--radius-pill); overflow: hidden; box-shadow: var(--shadow-sm); }
.lf-mailer__input { flex: 1; min-width: 0; padding: 0.75rem 1.25rem; border: none; outline: none;
  font-family: var(--font-ui); font-size: 0.875rem; background: var(--bg); color: var(--text); }
.lf-mailer__input::placeholder { color: var(--muted); }
.lf-mailer__submit { flex-shrink: 0; padding: 0.75rem 1.5rem; border: none; cursor: pointer;
  background: var(--sunset); color: var(--charcoal);
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  transition: background 0.15s ease; }
.lf-mailer__submit:hover { background: var(--burnt); }
.lf-mailer__subscribe-btn { display: inline-flex; align-items: center; padding: 0.65rem 1.75rem;
  border: none; border-radius: var(--radius-pill); cursor: pointer;
  background: var(--sunset); color: var(--charcoal);
  font-family: var(--font-ui); font-size: 0.875rem; font-weight: 600;
  transition: background 0.15s ease; }
.lf-mailer__subscribe-btn:hover { background: var(--burnt); }
.lf-mailer__disclaimer { font-size: 0.75rem; font-style: italic; color: rgba(255,255,255,0.5); margin-top: 0.75rem; }

/* ==========================================================================
   Footer — forest, used site-wide
   ========================================================================== */
.lf-footer { background: var(--footer-bg); color: rgba(255,255,255,0.75); }
.lf-footer__main { padding: var(--space-7) 0 var(--space-6); }
.lf-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); }
@media (max-width: 640px) { .lf-footer__grid { grid-template-columns: 1fr; } }
.lf-footer__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.lf-footer__brand .roundel  { height: 2.6rem; width: auto; }
.lf-footer__brand .wordmark { height: 1.3rem;  width: auto; }
.lf-footer__tagline { font-size: 0.82rem; margin-top: 0.6rem; color: rgba(255,255,255,0.55); }
.lf-footer__heading { font-size: 0.8rem; font-weight: 600; color: #fff; margin-bottom: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.lf-footer__links li { margin-bottom: 0.45rem; }
.lf-footer__links a { font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.lf-footer__links a:hover { color: #fff; }
.lf-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.1rem 0; font-size: 0.75rem; color: rgba(255,255,255,0.45); }
/* ==========================================================================
   Manage account (devise/registrations#edit) — page-local components from
   the manage-account mockup. Everything else on the page is shared chrome
   (.lf-explore-banner, .lf-form-col, .lf-info-card, .field).
   ========================================================================== */

/* Profile photo — avatar preview beside the upload field */
.ma-avatar { display: flex; align-items: center; gap: 1.25rem; }
.ma-avatar__img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ma-avatar__img--default { font-size: 4.5rem; color: var(--forest-60); line-height: 1; }
.ma-avatar__upload { flex: 1; min-width: 0; }
.ma-avatar__hint { font-size: 0.8rem; color: var(--muted); margin-top: 0.35rem; }

@media (max-width: 640px) { .ma-avatar { flex-direction: column; align-items: flex-start; } }

/* Preferences — checkbox with a title + description label */
.ma-toggle { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; }
.ma-toggle .field__checkbox { margin-top: 0.2rem; }
.ma-toggle__title { font-size: 0.88rem; font-weight: 700; color: var(--heading); }
.ma-toggle__desc { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-top: 0.15rem; }
/* ==========================================================================
   Contact page (contact#new) — page-local layout from the contact mockup.
   The form itself is shared chrome (.lf-info-card + .field); this file is
   the two-column layout and the icon-roundel info sidebar.
   ========================================================================== */

.ct-layout { display: grid; grid-template-columns: 3fr 2fr; gap: 2.5rem; align-items: start; padding: 2.5rem 0 4rem; }
@media (max-width: 880px) { .ct-layout { grid-template-columns: 1fr; gap: 2rem; } }

.ct-form { display: flex; flex-direction: column; gap: 1rem; }
.ct-form .btn { align-self: flex-start; margin-top: 0.25rem; }

/* Info sidebar — icon roundel + heading + text per item */
.ct-info { display: flex; flex-direction: column; gap: 1.5rem; }
.ct-info-item { display: flex; gap: 1rem; align-items: flex-start; }
.ct-info-item__icon {
  width: 2.6rem; height: 2.6rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--forest-tint); color: var(--forest); font-size: 1rem;
}
.ct-info-item h3 { font-size: 0.9rem; font-weight: 800; color: var(--heading); margin-bottom: 0.2rem; }
.ct-info-item p { font-size: 0.87rem; line-height: 1.55; color: var(--muted); }
.ct-info-item a { font-weight: 600; }
/* ==========================================================================
   Cookie consent banner (shared/_cookie_banner, rendered sitewide) — moved
   out of the deleted static_pages.css during reskin phase 3, old-brand hexes
   swapped for tokens. No mockup exists; design pass queued for whenever the
   banner earns one.
   ========================================================================== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  padding: 1rem 1.25rem;
}

.cookie-banner__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  box-shadow: var(--shadow-md);
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .cookie-banner__inner {
    flex-wrap: nowrap;
  }
}

.cookie-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background: var(--forest-tint);
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--forest);
  font-size: 0.95rem;
}

.cookie-banner__text {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  min-width: 200px;
}

.cookie-banner__text a {
  color: var(--forest);
  text-decoration: underline;
}

.cookie-banner__text a:hover {
  color: var(--primary-hover);
}

.cookie-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.cookie-banner__btn {
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.cookie-banner__btn--accept {
  background: var(--primary);
  color: #fff;
}

.cookie-banner__btn--accept:hover {
  background: var(--primary-hover);
}

.cookie-banner__btn--decline {
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--border);
}

.cookie-banner__btn--decline:hover {
  border-color: var(--taupe);
  color: var(--text);
}
/* ==========================================================================
   Destinations index — page-local mosaic, from the destinations.html mockup.
   Tiled card grid: large = 2×2, small = 1×1, packing with no gaps.
   Shared chrome (banner, search bar, breadcrumb) lives in components.css.
   ========================================================================== */

.dh-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 1rem; grid-auto-flow: dense; padding: 2rem 0 4rem; }
@media (max-width: 880px) { .dh-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dh-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; } }
.dh-card { position: relative; }
.dh-card--lg { grid-column: span 2; grid-row: span 2; }
@media (max-width: 560px) { .dh-card--lg { grid-column: span 1; grid-row: span 1; } }
.dh-card__link { display: block; position: relative; width: 100%; height: 100%; border-radius: 1rem; overflow: hidden; }
.dh-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.dh-card__link:hover .dh-card__img { transform: scale(1.05); }
.dh-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(34,69,63,0.74) 0%, rgba(34,69,63,0.04) 55%); }
.dh-card__title { position: absolute; bottom: 1rem; left: 1.15rem; right: 1.15rem; font-size: 1.1rem; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.dh-card--lg .dh-card__title { font-size: 1.5rem; }

/* Positioning for the shared .photo-credit (typography in components.css). */
.dh-card .photo-credit { position: absolute; right: 0.7rem; bottom: 0.55rem; z-index: 5; font-size: 0.62rem; line-height: 1.3; color: rgba(255,255,255,0.78); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.dh-card .photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dh-card .photo-credit a:hover { color: #fff; }

/* Admin-only edit/delete overlay — no mockup (admin is out of reskin scope);
   minimal on-brand pills so the controls stay usable. */
.dh-card__admin-btn {
  position: absolute; right: 0.75rem; z-index: 10;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.75rem; font-weight: 600; padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: rgba(255,255,255,0.92); color: var(--text);
  text-decoration: none; box-shadow: var(--shadow-sm);
}
.dh-card__admin-btn--edit { top: 0.75rem; }
.dh-card__admin-btn--edit:hover { border-color: var(--forest); color: var(--forest); }
.dh-card__admin-btn--delete { top: 3.25rem; }
.dh-card__admin-btn--delete:hover { border-color: var(--error); color: var(--error); }
/* ==========================================================================
   Fishery show — page-specific layout only, from the fishery-show.html
   mockup (reskin phase 6). Banner, info cards, water cards, footer live in
   components.css; tokens in tokens.css. The sticky tabs are Rails buttons
   (tabs_controller drives scroll + active state), so the tab rule carries a
   button reset the mockup's plain anchors didn't need.
   ========================================================================== */

/* Owner/admin actions beside the banner title (the mockup's inline row) */
.fs-banner-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ── Sticky section tabs ── */
.fs-tabs-bar { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.fs-tabs { display: flex; gap: 0.25rem; overflow-x: auto; }
.fs-tab {
  padding: 0.95rem 1.1rem; white-space: nowrap;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 700; color: var(--muted);
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fs-tab:hover { color: var(--forest); }
.fs-tab--active { color: var(--forest); border-bottom-color: var(--sunset); }

/* ── Stacked sections ── */
.fs-section { padding: 2.75rem 0; scroll-margin-top: 3.5rem; }
.fs-section--shaded { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* ── Overview: prose + attributes left, claim card right ── */
.fs-overview { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .fs-overview { grid-template-columns: 1fr; gap: 2rem; } }
.fs-prose { color: var(--text); line-height: 1.65; max-width: 70ch; }
.fs-prose p + p { margin-top: 0.9rem; }
.fs-attrs { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: 1.5rem; }
.fs-attrs li { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; font-weight: 600; color: var(--heading); }
.fs-attrs li i { color: inherit; }

/* Claim card — "Is this your fishery?" conversion panel (fishery owners) */
.fs-claim-card {
  border: 1px solid var(--cta-border); border-radius: var(--radius-lg);
  background: var(--cta-bg); box-shadow: var(--shadow-sm);
  padding: 1.75rem 1.5rem; text-align: center;
}
.fs-claim-card__icon {
  width: 3.2rem; height: 3.2rem; margin: 0 auto 0.9rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--forest-tint); color: var(--forest); font-size: 1.2rem;
}
.fs-claim-card__title { font-size: 1.05rem; font-weight: 800; color: var(--heading); margin-bottom: 0.4rem; }
.fs-claim-card__text { font-size: 0.85rem; line-height: 1.55; color: var(--muted); margin-bottom: 1.1rem; }

/* ── Rules & Info grid (three slots; a fishery fills what it has) ── */
.fs-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 880px) { .fs-info-grid { grid-template-columns: 1fr; } }

/* Contact list inside the shared info card */
.fs-contact-list li { display: flex; align-items: baseline; gap: 0.7rem; }
.fs-contact-list li + li { margin-top: 0.6rem; }
.fs-contact-list i { width: 1rem; text-align: center; color: var(--forest-60); }

/* ── Waters — embedded explore banner + shared .lf-card-grid ── */
.fs-waters { border-top: 1px solid var(--border); scroll-margin-top: 3.5rem; }
/* ==========================================================================
   Fishlists — page-specific styles (reskin phase 7). Both pages are almost
   entirely shared chrome (banner, card grid, water cards, toggle in
   components.css). Page-local here: the show banner's title row +
   description (fishlist-show.html mockup), the index empty state (no
   mockup — designed from DS primitives), and the fishlist modals, carried
   token-swapped until phase 10's <dialog class="lf-modal"> pass designs
   them properly.
   ========================================================================== */

/* ── Show banner extras: title row with owner action, description ── */
.fl-headrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; flex-wrap: wrap; }
.fl-desc { max-width: 70ch; font-size: 0.95rem; line-height: 1.6; color: var(--text); margin-top: 1rem; }
.fl-desc__text--placeholder { color: var(--muted); font-style: italic; }
.fl-desc__edit { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.35rem;
  font-size: 0.8rem; font-weight: 600; color: var(--primary); }
.fl-desc__edit:hover { color: var(--primary-hover); }
/* right-aligned List/Map toggle (banner toolbar is left-aligned by default) */
.fl-toolbar { justify-content: flex-end; }

/* ── Index empty state — designed from DS primitives (no mockup) ── */
.fl-empty { text-align: center; max-width: 420px; margin: 0 auto; padding: 3.5rem 1rem 4.5rem; }
.fl-empty__icon { width: 3.2rem; height: 3.2rem; margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--forest-tint); color: var(--forest); font-size: 1.2rem; }
.fl-empty__title { font-size: 1.15rem; font-weight: 800; color: var(--heading); margin-bottom: 0.4rem; }
.fl-empty__text { font-size: 0.9rem; line-height: 1.55; color: var(--muted); margin-bottom: 1.25rem; }
.fl-empty__text i { color: var(--error); }

/* ==========================================================================
   Fishlist modals (new / add-to-existing / rename / description / flash) —
   carried token-swapped from the deleted fishlist_page.css; no mockup
   exists. Designed properly in reskin phase 10 with the modal shells.
   ========================================================================== */
/* Modal — fishlist modals (edit, add water, remove water)
   ========================================================================== */
.fishlist-modal {
  padding: 1.5rem;
}

.fishlist-modal__heading {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.25rem;
  padding-right: 1.5rem;
  line-height: 1.5;
}

.fishlist-modal__subheading {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.4;
}

/* Water name badge */
.fishlist-modal__water-name {
  display: inline;
  background: var(--forest-tint);
  color: var(--primary-hover);
  padding: 0.15rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 600;
}

/* Alerts */
.fishlist-modal__alert {
  padding: 0.6rem 0.875rem;
  font-size: 0.85rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.fishlist-modal__alert--warning {
  background: var(--warning-bg);
  border: 1px solid var(--warning-bg);
  color: var(--warning);
}

.fishlist-modal__alert--danger {
  background: var(--error-bg);
  border: 1px solid var(--error-bg);
  color: var(--error);
}

/* Form input */
.fishlist-modal__field {
  margin-bottom: 1rem;
}

.fishlist-modal__input {
  width: 100%;
  padding: 0.65rem 0.95rem;
  /* 16px minimum: anything smaller makes iOS Safari auto-zoom the page on
     focus and never zoom back out, leaving the page panned off-screen. */
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  color: var(--heading);
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fishlist-modal__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}

.fishlist-modal__input::placeholder {
  color: var(--border);
}

/* Create button */
.fishlist-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  border-radius: 2rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.fishlist-modal__btn--create {
  background: var(--primary);
  color: #fff;
  padding: 0.55rem 1.35rem;
}

.fishlist-modal__btn--create:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.fishlist-modal__btn--create:active {
  transform: translateY(0);
}

/* Divider */
.fishlist-modal__divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.fishlist-modal__divider::before,
.fishlist-modal__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.fishlist-modal__divider span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Fishlist items list */
.fishlist-modal__list {
  max-height: 240px;
  overflow-y: auto;
  padding-top: 0.125rem;
}

.fishlist-modal__list::-webkit-scrollbar {
  width: 4px;
}

.fishlist-modal__list::-webkit-scrollbar-track {
  background: transparent;
}

.fishlist-modal__list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.fishlist-modal__list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  margin-bottom: 0.5rem;
  text-align: left;
}

.fishlist-modal__list-item:last-child {
  margin-bottom: 0;
}

/* Add variant — green hover */
.fishlist-modal__list-item--add:hover {
  border-color: var(--primary);
  background: var(--forest-tint);
  transform: translateY(-1px);
}

.fishlist-modal__list-item--add:hover .fishlist-modal__list-icon {
  background: var(--primary);
  color: #fff;
}

/* Remove variant — red hover */
.fishlist-modal__list-item--remove:hover {
  border-color: var(--error);
  background: var(--error-bg);
  transform: translateY(-1px);
}

.fishlist-modal__list-item--remove:hover .fishlist-modal__list-icon--remove {
  background: var(--error);
  color: #fff;
}

/* List item icon circle */
.fishlist-modal__list-icon {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--forest-tint);
  color: var(--primary);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.fishlist-modal__list-icon--remove {
  background: var(--error-bg);
  color: var(--error);
}

/* List item title */
.fishlist-modal__list-title {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--heading);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Arrow indicator */
.fishlist-modal__list-arrow {
  color: var(--border);
  font-size: 0.65rem;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

.fishlist-modal__list-item:hover .fishlist-modal__list-arrow {
  transform: translateX(2px);
}

.fishlist-modal__list-item--add:hover .fishlist-modal__list-arrow {
  color: var(--primary);
}

.fishlist-modal__list-item--remove:hover .fishlist-modal__list-arrow {
  color: var(--error);
}

/* Actions row (edit modals) */
.fishlist-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Delete link (edit modals) */
.fishlist-modal__delete {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.fishlist-modal__delete:hover {
  color: var(--error);
}
/* ==========================================================================
   Homepage — page-specific layout only, from the index.html mockup (reskin
   phase 5). Header (.lf-nav), footer, CTA (.lf-cta) and mailer (.lf-mailer)
   live in components.css; palette/type/spacing tokens in tokens.css. The
   mockup's body.concept variants are baked in as the shipped styles.
   Skipped from the mockup (July 2026 user calls): the floating quicklinks
   card (2 of 4 target pages don't exist) and the destination-card waters
   count badge (needs new geo-count domain logic).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero — slides up behind the transparent nav; two stacked layers crossfade
   between destination photos (hero-rotator controller)
   -------------------------------------------------------------------------- */
.hp-hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-h));
  height: 78vh;
  min-height: 480px;
  max-height: 720px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Phones: 78vh + centred content strands the quicklinks card below the
   fold — svh respects the iOS URL bar where vh overshoots. */
@media (max-width: 640px) { .hp-hero { height: 66svh; min-height: 420px; padding-top: var(--nav-h); } }
.hp-hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1s ease;
}
.hp-hero__img.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hp-hero__img { transition: none; } }
/* Per-photo attribution — sits above the overlay, lifted clear of the floating card */
.hp-hero__credit {
  position: absolute; right: 1.5rem; bottom: 5.5rem; z-index: 10;
  max-width: 60%; text-align: right;
  font-size: 0.68rem; line-height: 1.3; letter-spacing: 0.01em;
  color: rgba(255,255,255,0.72);
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.hp-hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hp-hero__credit a:hover { color: #fff; }
@media (max-width: 640px) { .hp-hero__credit { bottom: 6.5rem; font-size: 0.62rem; } }
.hp-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--hero-overlay-top) 0%, var(--hero-overlay-bottom) 100%);
}
.hp-hero__content {
  position: relative; z-index: 10;
  text-align: left;
  width: 100%;
  max-width: var(--container);      /* align the search with header + cards */
  margin: 0 auto;
  padding: 0 var(--space-5) 5rem;   /* bottom pad lifts the title/search clear of the floating card */
}
.hp-hero__title {
  font-family: var(--display-font);
  font-size: clamp(2rem, 5vw + 1rem, 3rem);   /* mockup is 3rem; clamp is the mobile step */
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 1.9rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
  line-height: 1.12;
}
/* Rotating place name — two-tone accent half of the heading */
.hp-hero__rotator {
  display: inline-block;
  color: var(--accent);
  /* Pure crossfade — no transform, so thin curved glyphs (the "J" in Jura)
     don't shimmer from sub-pixel re-rasterisation during motion. */
  transition: opacity 0.4s ease;
  backface-visibility: hidden;
}
.hp-hero__rotator.is-out { opacity: 0; }
/* Wrapper (the Stimulus controller element) matches the bar's width so the
   JS results dropdown — which measures this element — lines up with the
   visible pill, not the full hero column. Rails-only: the mockup has no
   wrapper or live dropdown. */
.hp-hero__search { max-width: 520px; }
.hp-hero__search-bar {
  display: flex; align-items: center;
  max-width: 520px;                 /* narrow, left-aligned — not full container width */
  background: var(--bg);
  border-radius: 3rem;
  padding: 0.9rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.hp-hero__search-icon { color: var(--water); margin-right: 0.75rem; }
.hp-hero__search-input {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--text);
}
.hp-hero__search-input::placeholder { color: var(--muted); }
/* Clear (×) button — Rails behaviour the mockup doesn't carry */
.hp-hero__search-clear {
  background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 0; margin-left: 0.5rem; font-size: 1rem;
}
.hp-hero__search-clear:hover { color: var(--text); }

/* --------------------------------------------------------------------------
   Floating category card — overlaps the bottom edge of the hero.
   All Waters and Species are grayed-out "Coming soon" tiles (--soon) until
   their pages exist.
   -------------------------------------------------------------------------- */
.hp-quicklinks {
  position: relative;
  z-index: 20;
  background: transparent;          /* hero shows behind the straddle */
  margin-top: -4rem;                /* pull up so the card straddles the hero's lower edge */
}
.hp-quicklinks__card {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.15rem;
}
@media (max-width: 767px) { .hp-quicklinks__card { grid-template-columns: repeat(2, 1fr); } }
.hp-quicklink {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.85rem;
  transition: background 0.15s ease;
}
.hp-quicklink:hover { background: var(--bg-alt); }
.hp-quicklink__icon {
  width: 2.6rem; height: 2.6rem; border-radius: 0.8rem;   /* rounded square (squircle) */
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
/* tinted tile per category — each a light tint of one palette colour over its own deep shade */
.hp-quicklink:nth-child(1) .hp-quicklink__icon { background: color-mix(in srgb, var(--water)  22%, #fff); color: var(--deep-water); } /* water  */
.hp-quicklink:nth-child(2) .hp-quicklink__icon { background: color-mix(in srgb, var(--forest) 16%, #fff); color: var(--forest);     } /* forest */
.hp-quicklink:nth-child(3) .hp-quicklink__icon { background: color-mix(in srgb, var(--sunset) 26%, #fff); color: var(--burnt);      } /* sunset */
.hp-quicklink:nth-child(4) .hp-quicklink__icon { background: color-mix(in srgb, var(--stone)  45%, #fff); color: var(--charcoal);   } /* stone  */
.hp-quicklink__body { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.hp-quicklink__label {
  font-family: var(--heading-font);
  font-size: 0.9rem; font-weight: 600; color: var(--heading);
}
.hp-quicklink__link {
  font-size: 0.72rem; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 0.3rem;
}
.hp-quicklink__link i { font-size: 0.6rem; transition: transform 0.15s ease; }
.hp-quicklink:hover .hp-quicklink__link { color: var(--primary); }
.hp-quicklink:hover .hp-quicklink__link i { transform: translateX(2px); }
/* Coming-soon tiles — grayed out, inert */
.hp-quicklink--soon { opacity: 0.45; cursor: default; }
.hp-quicklink.hp-quicklink--soon .hp-quicklink__icon { background: var(--bg-alt); color: var(--muted); }  /* outweighs the nth-child tints */
.hp-quicklink--soon:hover { background: transparent; }
.hp-quicklink--soon:hover .hp-quicklink__link { color: var(--muted); }

/* --------------------------------------------------------------------------
   Sections shared
   -------------------------------------------------------------------------- */
.hp-section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.75rem; flex-wrap: wrap; gap: 0.5rem;
}
.hp-section-header__title {
  font-family: var(--display-font);
  font-size: 1.6rem; font-weight: 700; color: var(--heading);
  margin-bottom: 0.15rem;
}
.hp-section-header__subtitle { font-size: 0.85rem; color: var(--muted); }
.hp-section-header__link {
  font-size: 0.85rem; font-weight: 600; color: var(--primary);
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.35rem;
  border: 1.5px solid var(--primary);
  border-radius: 2rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.hp-section-header__link:hover { background: var(--primary); color: #fff; }
.hp-section-header__link i { transition: transform 0.15s ease; }
.hp-section-header__link:hover i { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Destinations
   -------------------------------------------------------------------------- */
.hp-destinations { padding: 3rem 0; background: var(--bg); }
.hp-destinations__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 767px) { .hp-destinations__grid { grid-template-columns: 1fr; } }
.hp-destination-card {
  display: block; position: relative;
  border-radius: 1rem; overflow: hidden;
  min-height: 230px;
}
/* Card is a div + stretched link (not the mockup's bare <a>) so the CC photo
   credit's links can sit beside the card link — the dh-card structure */
.hp-destination-card__link { display: block; position: absolute; inset: 0; }
.hp-destination-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hp-destination-card:hover .hp-destination-card__img { transform: scale(1.05); }
.hp-destination-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(34,69,63,0.72) 0%, rgba(34,69,63,0.05) 60%);
}
.hp-destination-card__title {
  position: absolute; bottom: 1.1rem; left: 1.25rem; right: 1.25rem;
  font-family: var(--display-font);
  font-size: 1.15rem; font-weight: 700; color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
/* CC attribution on card images — mirrors destinations_page.css's .dh-card
   scoping until the shared .photo-credit gets a home in phase 6 */
.hp-destination-card .photo-credit { position: absolute; right: 0.7rem; bottom: 0.55rem; z-index: 5; font-size: 0.62rem; line-height: 1.3; color: rgba(255,255,255,0.78); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.hp-destination-card .photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hp-destination-card .photo-credit a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Features — contour texture behind palette-tinted icons
   -------------------------------------------------------------------------- */
.hp-features { padding: 3.5rem 0; background: var(--bg-alt); position: relative; overflow: hidden; }
.hp-features__contours {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.55;
}
.hp-features .container { position: relative; z-index: 1; }
.hp-features__header { text-align: center; max-width: 520px; margin: 0 auto 2.5rem; }
.hp-features__title {
  font-family: var(--display-font);
  font-size: 1.6rem; font-weight: 700; color: var(--heading);
  margin-bottom: 0.35rem;
}
.hp-features__subtitle { font-size: 0.9rem; color: var(--muted); }
.hp-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 767px) { .hp-features__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
.hp-feature { text-align: center; padding: 1.5rem 1rem; }
.hp-feature__icon {
  width: 3rem; height: 3rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 0.875rem;
  font-size: 1.1rem;
}
/* each feature icon a distinct palette colour — light tint bg + deeper glyph */
.hp-feature:nth-child(1) .hp-feature__icon { background: color-mix(in srgb, var(--water)      22%, #fff); color: var(--deep-water); }
.hp-feature:nth-child(2) .hp-feature__icon { background: color-mix(in srgb, var(--sunset)     26%, #fff); color: var(--burnt);      }
.hp-feature:nth-child(3) .hp-feature__icon { background: color-mix(in srgb, var(--forest)     16%, #fff); color: var(--forest);     }
.hp-feature:nth-child(4) .hp-feature__icon { background: color-mix(in srgb, var(--deep-water) 20%, #fff); color: var(--deep-water); }
.hp-feature:nth-child(5) .hp-feature__icon { background: color-mix(in srgb, var(--burnt)      22%, #fff); color: var(--burnt);      }
.hp-feature:nth-child(6) .hp-feature__icon { background: color-mix(in srgb, var(--stone)      45%, #fff); color: var(--charcoal);   }
.hp-feature__title { font-size: 0.9rem; font-weight: 600; color: var(--heading); margin-bottom: 0.35rem; font-family: var(--heading-font); }
.hp-feature__text { font-size: 0.8rem; color: var(--muted); line-height: 1.55; }

/* --------------------------------------------------------------------------
   Fisheries cards — the mockup's page-local card (location meta + tags),
   not the shared .lf-water-card
   -------------------------------------------------------------------------- */
.hp-fisheries { padding: 3rem 0; background: var(--bg); }
.hp-fisheries__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 767px) { .hp-fisheries__grid { grid-template-columns: 1fr; } }
.fishery-card {
  border: 1.5px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--bg);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.fishery-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }
.fishery-card__img { width: 100%; height: 150px; object-fit: cover; }
.fishery-card__body { padding: 1rem 1.15rem 1.2rem; }
.fishery-card__title { font-size: 0.95rem; font-weight: 600; color: var(--heading); margin-bottom: 0.25rem; }
.fishery-card__meta { font-size: 0.78rem; color: var(--muted); display: flex; align-items: center; gap: 0.35rem; }
.fishery-card__meta i { color: var(--sunset); font-size: 0.7rem; }
/* Migratory run pill — freshwater rivers/lochs with salmon or sea trout.
   Blue tone, distinct from the amber sea-lice pill and the tide states.
   Shares the .info-pill base in sea_lice.css. */
.info-pill--run {
  background: #dbeafe;
  color: #1e3a8a;
  border-color: #bfdbfe;
}
/* Info pills row — read-only context blocks (tide, sea lice).
   Distinct from the rounded action buttons above. */

.water-info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.info-pill {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.85rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  min-width: 14rem;
  line-height: 1.25;
  cursor: help;
}

.info-pill__label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  opacity: 0.85;
}

.info-pill__headline {
  font-size: 1rem;
  font-weight: 600;
}

.info-pill__detail {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* Sea lice modifier — amber */
.info-pill--sea-lice {
  background: #fef3c7;
  color: #7c2d12;
  border-color: #fde68a;
}

/* Sea lice "clear" modifier — green. An editor has confirmed no nearby
   salmon farm; overrides the amber base for a positive, low-pressure tone. */
.info-pill--sea-lice-clear {
  background: #dcfce7;
  color: #14532d;
  border-color: #bbf7d0;
}

/* Generic states shared across info-pill flavours. */
.info-pill--unavailable,
.info-pill--loading {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #e5e7eb;
}

/* Show-page tide info-pill — same tokens as the overlay .lf-tide-pill and
   the .lf-hour-strip__band--tide-* bands (components.css), so tide
   signalling reads the same wherever it appears. */
.info-pill--tide,
.info-pill--tide-prime {
  background: var(--water-60);
  color: color-mix(in srgb, var(--deep-water) 80%, #000);
  border-color: var(--water);
}

.info-pill--tide-outside {
  background: var(--stone-60);
  color: var(--charcoal);
  border-color: var(--taupe);
}

.info-pill--tide-unknown {
  background: var(--bg-alt);
  color: var(--muted);
  border-color: var(--border);
}
/* ==========================================================================
   Flash toasts (shared/_flash_message + toast_controller, site-wide) — moved
   out of the deleted homepage.css during reskin phase 5, old-brand hexes
   swapped for tokens. No mockup exists; a design pass would go through the
   mockups first (the design system may fold these into .alert--* when the
   wizard's duplicate-lake toast dies in phase 9).
   ========================================================================== */
@keyframes toast-in {
  from { transform: translateX(-50%) translateY(-1rem); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to   { transform: translateX(-50%) translateY(-1rem); opacity: 0; }
}

.lf-toast {
  position: fixed;
  top: calc(var(--nav-h) + 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease forwards;
  white-space: nowrap;
}

.lf-toast--hiding {
  animation: toast-out 0.25s ease forwards;
}

.lf-toast--success {
  background: var(--primary);
  color: #fff;
}

.lf-toast--error {
  background: var(--error);
  color: #fff;
}

.lf-toast__icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.lf-toast__text {
  flex: 1;
}

.lf-toast__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
  font-size: 0.85rem;
  transition: color 0.15s ease;
}

.lf-toast__close:hover {
  color: #fff;
}
/* ==========================================================================
   Water show — page-specific layout only, from the waters-show.html mockup
   (reskin phase 6). Header, footer, info cards, explore banner, water cards
   live in components.css; tokens in tokens.css. Carried over token-swapped
   (no mockup): tooltip cue, OS-map chips, inline map container, gallery
   hover. Info pills (tide/sea-lice/migratory) keep their own files (die
   phase 8).
   ========================================================================== */

/* ── Hero ── */
.ws-hero { position: relative; height: 62vh; min-height: 420px; max-height: 640px; }
.ws-hero__img { width: 100%; height: 100%; object-fit: cover; }
.ws-hero__gradient { position: absolute; inset: 0; background:
  linear-gradient(to bottom, rgba(34,69,63,0) 55%, rgba(34,69,63,0.55) 100%); }

/* Photo credit — top-right, low-key over the photo */
.ws-hero__credit { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; font-size: 0.7rem; color: rgba(255,255,255,0.85); text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.ws-hero__credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Hero action bar — pinned to the hero's lower edge */
.ws-hero__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.25rem 0 1.5rem; }
.ws-hero__bar-inner { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.ws-actions--hero { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Save-nudge anchor wrap — the nudge tooltip attaches here */
.ws-save-wrap { display: inline-flex; gap: 0.6rem; }

/* Hero buttons — solid white pills, matching the save-heart so the controls read as one set */
.btn--hero { background: color-mix(in srgb, var(--charcoal) 8%, #fff); border: 1.5px solid transparent; color: var(--forest); box-shadow: var(--shadow-sm); }
.btn--hero:hover { background: color-mix(in srgb, var(--charcoal) 16%, #fff); color: var(--forest); }
.btn--hero-ghost { background: transparent; border-color: transparent; color: #fff; box-shadow: none; }
.btn--hero-ghost:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* "More" overflow — native Popover API: light-dismiss (click-outside) + Escape for
   free, and top-layer so it's never clipped. Placement uses CSS anchor positioning
   (newer support; lf-popover-anchor.js is the cross-browser fallback). No JS. */
.ws-more-btn { anchor-name: --ws-more; }
.ws-more__menu { margin: 0; inset: auto; border: none; padding: 0.4rem; min-width: 200px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  position: absolute; position-anchor: --ws-more; top: calc(anchor(bottom) + 0.5rem); right: anchor(right); }
.ws-more__menu:popover-open { display: flex; flex-direction: column; }
.ws-more__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 600; color: var(--forest); }
.ws-more__item:hover { background: var(--forest-tint); }

/* Small screens: collapse visible hero buttons to icon-only (menu items keep text) */
@media (max-width: 640px) {
  .ws-actions--hero .btn--hero .ws-btn-label { display: none; }
  .ws-actions--hero .btn--hero, .ws-save-wrap .btn--hero { padding-left: 0.85rem; padding-right: 0.85rem; }
  .ws-actions--hero .btn--hero i { font-size: 1.1rem; }
}

/* ── Title section — name block left, water-identity stats (Type/Species) right ── */
.ws-title { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1.25rem 2.5rem; padding: 1.75rem 0 0.5rem; }
.ws-title__stats { display: flex; gap: 1.75rem; }
.ws-title__stats .ws-stat { flex: 0 1 auto; min-width: 0; padding: 0; }
.ws-title__stats .ws-stat > div { min-width: 0; }
.ws-title__stats .ws-stat + .ws-stat { border-left: none; }
.ws-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-size: 0.8rem; color: var(--muted); }
.ws-breadcrumb a { color: var(--muted); }
.ws-breadcrumb a:hover { color: var(--forest); }
.ws-breadcrumb__sep { color: var(--border); }
.ws-name { font-size: 2.6rem; font-weight: 800; color: var(--heading); letter-spacing: -0.02em; line-height: 1.05; margin: 0.75rem 0 0; }
.ws-subtitle { font-size: 0.98rem; color: var(--muted); margin-top: 0.5rem; }
.ws-subtitle a { font-weight: 600; }

/* ── Quick-stats strip — framed top & bottom, vertical dividers between ── */
.ws-stats { display: flex; flex-wrap: wrap; margin-top: 1.5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ws-stat { display: flex; align-items: center; gap: 0.75rem; flex: 1 1 0; min-width: 160px; padding: 1.1rem 1.5rem; }
.ws-stat + .ws-stat { border-left: 1px solid var(--border); }
.ws-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--forest-tint); color: var(--forest); font-size: 0.95rem; }
.ws-stat__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.ws-stat__value { font-size: 0.9rem; font-weight: 600; color: var(--heading); line-height: 1.2; }

@media (max-width: 640px) {
  /* vh overshoots the iOS URL bar; svh keeps name + stats near the fold */
  .ws-hero { height: 52svh; min-height: 320px; }
  .ws-name { font-size: 2rem; }
  .ws-stat { flex-basis: 50%; }
  .ws-stat:nth-child(odd) { border-left: none; }
}

/* ── Lake data pills — equal-width, mint fill, centred, with a solid info badge ── */
.ws-lakedata { display: flex; flex-wrap: wrap; gap: 0.75rem; padding: 1rem 0 0.5rem; }
.ws-datum { flex: 1 1 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--water-tint); border-radius: var(--radius-md); padding: 0.85rem 1rem; cursor: help; }
.ws-datum__value { font-size: 0.9rem; font-weight: 700; color: var(--deep-water); }

/* ── Main content + sidebar ── */
.ws-content { padding: 2rem 0 4rem; }
.ws-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 880px) { .ws-layout { grid-template-columns: 1fr; gap: 2rem; } }

.ws-section + .ws-section { margin-top: 2.5rem; }
.ws-section__title { font-size: 1.15rem; font-weight: 800; color: var(--heading); margin-bottom: 1rem; }
.ws-prose { color: var(--text); line-height: 1.65; }
.ws-prose p + p { margin-top: 0.9rem; }

/* Route stats lead into the map (route is drawn on it) — no frame/dividers, just a clean row */
.ws-stats--route { margin-bottom: 1rem; border: none; }
.ws-stats--route .ws-stat + .ws-stat { border-left: none; }
.ws-stats--route .ws-stat { padding-left: 0; padding-right: 2rem; }

/* Photo gallery — simple thumbnail grid */
.ws-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ws-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md);
  transition: transform 0.2s ease, opacity 0.2s ease; }
.ws-gallery-grid a:hover img { transform: scale(1.03); opacity: 0.9; }

/* Sidebar stacks shared .lf-info-card (components.css) */
.ws-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.ws-sidebar h6 { font-size: 0.85rem; font-weight: 700; color: var(--heading); margin-bottom: 0.35rem; }
.ws-sidebar__divided { border-bottom: 1px solid var(--border); margin-bottom: 1rem; padding-bottom: 1rem; }

/* ── Explore nearby — the nearby-waters experience embedded as the onward
   journey. Banner + card grid are shared. Page-local: the top divider. ── */
.ws-nearby { border-top: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   Carried over token-swapped (no mockup)
   -------------------------------------------------------------------------- */

/* Space the info cue off the lake-datum value text (the cue's own style —
   size, colour — is the DS .lf-pill-cue). */
.ws-datum__value .lf-pill-cue { margin-left: 0.3rem; vertical-align: -0.1em; }

/* OS Map chips */
.water-os-map { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.5rem; }
.water-os-map__item { display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--forest); color: #fff; padding: 0.5rem 0.875rem;
  border-radius: var(--radius-sm); font-size: 0.8rem; max-width: fit-content; }
.water-os-map__item i { color: var(--sunset); }
.water-os-map__item a { color: #fff; }
.water-os-map__item a:hover { color: var(--sunset); }

/* Inline Leaflet map container (+ fullscreen control created by water_map_controller) */
.water-map-container { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.leaflet-bar a.water-map-fullscreen { display: flex; align-items: center; justify-content: center; color: #333; font-size: 15px; }
.leaflet-bar a.water-map-fullscreen:hover { color: #000; }
/* Page-local styles for the editor + wizard form pages (brand-reskin phase 9).
   These are the mockups' own page-local blocks (docs/brand-mockups/add-water.html
   and edit-water.html <style>) — everything shared lives in components.css. */

/* ── Add-water: water-type picker (big icon cards) ── */
.aw-type-picker {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.5rem 0 2rem;
}
.aw-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2.5rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.aw-type-btn:hover { border-color: var(--forest); box-shadow: var(--shadow-md); }
.aw-type-btn__circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--forest-tint);
  border: 2px solid color-mix(in srgb, var(--forest) 30%, #fff);
  color: var(--forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.aw-type-btn__label { font-size: 0.95rem; font-weight: 700; color: var(--heading); }
.aw-type-btn__sublabel { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.aw-type-btn--disabled { opacity: 0.35; cursor: default; }
.aw-type-btn--disabled:hover { border-color: var(--border); box-shadow: none; }

/* ── Add-water: name (wide) + address row ── */
.aw-name-row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .aw-name-row { grid-template-columns: 1fr; } }

/* Stack the edit-water boat entries (persisted + JS-added .lf-boat) with a gap
   — .lf-boat carries no outer margin, so consecutive cards would otherwise touch. */
#edit-boats-list { display: flex; flex-direction: column; gap: 1rem; }

/* ── Dashed empty-state hint (boats / annotations side panel) ── */
.aw-empty-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--bg-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}
.aw-empty-hint i { color: var(--muted); flex-shrink: 0; }

/* ── Edit-water: existing persisted photo entry (edit-only) ── */
.ew-photo-entry {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ew-photo-entry img {
  width: 280px;
  max-width: 45%;
  aspect-ratio: 14 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.ew-photo-entry__checks { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 0.25rem; }

/* Deferred remove-on-save checkboxes (photos, persisted boats) — red tint */
.ew-remove-check .field__checkbox { accent-color: var(--error); }
.ew-remove-check .field__checkbox-label { color: color-mix(in srgb, var(--error) 78%, #000); }

/* Manual-upload dropzone preview thumbnail (JS-inserted on file select) */
.lf-dropzone__preview { display: block; max-width: 100%; border-radius: var(--radius-sm); margin-bottom: 0.5rem; }

/* Wizard content column — the real page's breathing room above the header
   (the mockups get theirs from the specimen .af-screen/.aw-screen padding). */
.wizard-shell { padding: 2rem var(--space-5) 4rem; }

/* Edit-water wraps most cards in a Stimulus `description` mount element; make
   it layout-transparent so the cards are real children of .lf-form-col and
   inherit its inter-card gap (otherwise everything inside renders flush). */
.lf-form-col > [data-controller~="description"] { display: contents; }

/* Same one level down: the map/gallery partials mount on a Stimulus element
   inside a card body, whose stacked children (map → action row → field) get no
   gap and render tight. Give the mount its own flex column + gap rather than
   display:contents — geograph-gallery and lake-search detect visibility from
   the element's box, and a box-less display:contents element never initialises. */
.lf-form-col .lf-info-card__body > [data-controller] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/*
 * Explicit CSS manifest — cascade order is meaningful during the brand-reskin
 * transition (docs/brand-reskin.md), so no require_tree:
 *
 *   1. fonts + icon subset
 *   2. bootstrap_compat — utility-class compat shim; all that survives Bootstrap
 *      (vendor default.css deleted in reskin phase 11). NOT the design system.
 *   3. tokens, components — the design system; wins element-level ties. These
 *      are the SOURCE files — the mockup pages in docs/brand-mockups/ link them
 *      directly, so edits here show up there.
 *   4. legacy page files  — each deleted by its reskin phase
 *   5. require_self       — not-yet-homed rules, last
 *


















 */

/* Safari-specific fixes for background images */
.bg-cover {
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
  -webkit-background-position: center center !important;
  -moz-background-position: center center !important;
  -o-background-position: center center !important;
  background-position: center center !important;
  -webkit-background-repeat: no-repeat !important;
  -moz-background-repeat: no-repeat !important;
  -o-background-repeat: no-repeat !important;
  background-repeat: no-repeat !important;
}

/* Additional Safari fix for elements with background images and overflow hidden */
.card-img-top.bg-cover {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

#modal {
    z-index: 3000;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-width: calc(100vw - 2rem);
    background: transparent;
}

#modal .inner-modal {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 0.75rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    position: relative;
    max-height: calc(100vh - 4rem);
}

.inner-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #9CA3AF;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 1;
}

.inner-modal__close:hover {
    background: #F3F4F6;
    color: #36454F;
}


  /* Rails wraps errored inputs in this div; `contents` removes its box so the
     input stays a full-width flex child of .field instead of collapsing. */
  .field_with_errors {
    display: contents;
 }
 .field_with_errors .field__input {
    border-color: var(--error);
    background: var(--error-bg);
 }

 .mce_inline_error {
    background-color: #fae1e3;
    padding: 5px;
 }

 .username-pot { 
    position: absolute;
    visibility: hidden;
    left: -5000px;
    top: -5000px;
 }

 #map-search-box {
    background-color: #fff;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    margin-top: 10px;
    padding: 10px;
    text-overflow: ellipsis;
    width: 35%;
  }

  .fixed-bottom-center {
    position: fixed;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    z-index: 2000;
  }

.nav-add-fishery:hover {
  background-color: #f8f9fa;
}

/* Conditions overlay shell — the fullscreen JS-built overlay
   (conditions_view_controller): live map on top, .lf-conditions-sheet
   (components.css) at the bottom. The sheet and close button carry z-indexes
   because Leaflet's panes inside .conditions-map stack up to 1000. */
.conditions-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
}

.conditions-overlay .lf-conditions-sheet { z-index: 10001; }

/* Forecast-failure banner (.alert--error), floated over the map. */
.conditions-overlay > .alert {
  position: absolute;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10002;
  box-shadow: var(--shadow-md);
}

.conditions-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 260px;
}

.conditions-map--no-tide { bottom: 220px; }

/* Invisible span tracking the slider thumb — the drag-hint bubble's anchor.
   The wrap must be its containing block so the anchor's `left` is measured
   from the slider, not the sheet — the DS class isn't positioned because the
   mockup slider is static (no live thumb tracker). */
.lf-conditions-sheet .lf-hour-slider-wrap { position: relative; }
.conditions-hour-thumb-anchor {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 22px;
  transform: translateX(-50%);
  pointer-events: none;
}

/* Sign-in modal & close overlay */
.btn-close-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1.5px solid #E5E7EB;
  background: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #36454F;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-close-overlay:hover {
  background-color: #F3F4F6;
  border-color: #D1D5DB;
}

.btn-close-overlay--lg {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

button.gm-ui-hover-effect {
    position: absolute;
    top: 5px;
    background: none;
    border: none;
    cursor: pointer;
    width: 20px !important;
    height: 20px !important;
    margin: 0 0 7px 0 !important;
}

button.gm-ui-hover-effect span {
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
}


.progress-container {
    margin: 20px 0;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
  }
  
  .progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e9ecef;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  
  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #007bff, #0056b3, #007bff);
    background-size: 200% 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
    width: 0%;
    animation: shimmer 2s infinite;
  }

  .progress-text {
    text-align: center;
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
  }
  
  @keyframes shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

/* Map view — the nearby/show-page Leaflet chrome. Not-yet-homed: the live map
   has no mockup (it can't be mocked statically); its pins, clusters and the
   selection card's look come from components.css. These rules size the
   full-screen container, place the selection card over the canvas, and float
   the "Show list" button. Candidate for the design system if catalogued. */
#map.nearby-page__map {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 2;
}

/* The nav (.lf-nav, z-index 50) sits above this fixed fullscreen map and would
   cover the zoom control tucked at top:0. Push the top-left controls below it. */
#map.nearby-page__map .leaflet-top {
  top: var(--nav-h);
}

.nearby-page__map-inner {
  height: 100%;
}

.nearby-page__map-canvas {
  width: 100%;
  height: 100%;
}

#map .lf-water-selection-card {
  position: absolute;
  bottom: 7rem;
  left: 12px;
  z-index: 1000;
}

.nearby-page__map-list-btn {
  position: fixed;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1040;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.75rem;
  border: none;
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background 0.15s ease, transform 0.15s ease;
}

.nearby-page__map-list-btn:hover {
  background: var(--bg-alt);
  transform: translateX(-50%) translateY(-1px);
}

/* Not-yet-homed: the fisheries-index admin published/unpublished badge
   (shared/_fisheries; admin is out of reskin scope) — rescued from the
   deleted fishlist_page.css (reskin phase 7). Tidy with the admin pass. */
.water-card-item__admin-status {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.water-card-item__admin-status--published { color: var(--forest); }
.water-card-item__admin-status--unpublished { color: var(--muted); }

/* Not-yet-homed — rescued from editors.css (phase 9). Inline validation message
   injected by water_validation and manage_account_validation controllers
   (JS-managed; no mockup equivalent). Not Bootstrap-coupled. */
.water-edit-validation-msg {
  padding: 0.25rem 0;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  color: var(--error);
}