/* Brain: Runbooks/watts-bar (prototype, local-only)
   Repo: watts.bar/prototypes/water-system/wildlife.css
   Purpose: the "Watts Bar Wildlife" card — one editorial card, two living readouts:
   "What's Singing" (live dock-mic bird detections) over "What's Biting" (this month's
   fish almanac). Reuses the shared :root tokens from styles.css and the section-header
   idiom (.wx-tl-head) from weather.css; carries its own moss-green nature accent. */

:root {
  --wl-accent: #6b8e3d;        /* moss/foliage accent (vs lake teal + weather gold) */
  --wl-accent-text: #4f6b2a;   /* deeper moss for small header text on white (AA) */
  --wl-bar: #7ba33f;           /* caller rank bars */
  --wl-bar-soft: rgba(123, 163, 63, 0.16);
  --wl-now: #ad4c2b;           /* NOW divider + label on the activity chart. Darkened from #c25b3a (4.33:1) so the small NOW text clears AA (~4.8:1) on white; still warm terracotta on the green bars */
}
@media (prefers-color-scheme: dark) {
  :root {
    --wl-accent: #9bbf60;
    --wl-accent-text: #b2d479;
    --wl-bar: #93bb55;
    --wl-bar-soft: rgba(155, 191, 96, 0.20);
    --wl-now: #e08a64;
  }
}

/* ── card frame (same family as .wx-card) ─────────────────────────────────────── */
/* Wildlife section = ONE card in the page's design language (the .wx-card idiom): title +
   live chip + sub inside it, then What's Singing + What's Biting as MODULES with
   wx-mod-head-style headers -- the same pattern as the weather card's Hourly / UV modules. (Eli) */
.wl-card { position: relative; display: flex; flex-direction: column; gap: 13px; background: var(--paper-inset); border-radius: 4px 4px 14px 14px; box-shadow: var(--shadow-light); overflow: hidden; margin-bottom: 18px; padding: 0 16px 16px; }
.wl-card[hidden] { display: none; }
.wl-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--wl-accent), transparent); }

.wl-cardhead { padding: 14px 0 0; }
.wl-cardtitle { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-family: var(--body); font-weight: 700; font-size: clamp(20px, 4.4vw, 26px); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); line-height: 1.1; }
.wl-cardtitle-icon { width: 23px; height: 23px; color: var(--wl-accent); flex: 0 0 auto; }
/* live provenance line, same pulsing-dot idiom as the weather + water sections */
.wl-prov { display: flex; align-items: center; gap: 8px; margin: 7px 0 2px; font-family: var(--body); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.wl-prov { margin: 6px 0 0; }
.wl-cardsub { font-family: var(--body); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); margin: 3px 0 2px; text-wrap: pretty; }

/* What's Singing + What's Biting are .wx-mod outlined modules -- laid out exactly like the
   UV Index + Precipitation chart cards (Eli). wx-mod carries the surface/padding; the
   wl-card flex gap spaces them. */
.wl-chartwrap { margin-top: 2px; }
/* biting: same 2-column idea -- platform recommendation left, this month's fish right
   (as horizontal rows so the full cutout shows at a good size, not tiny in a big card) */
.wl-bite-grid { display: grid; grid-template-columns: 1fr; }
.wl-bite-left, .wl-bite-right { min-width: 0; }
@media (min-width: 960px) {
  .wl-bite-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 38px; align-items: start; }
  .wl-bite-right .wl-fish { grid-template-columns: 1fr; gap: 10px; }
  .wl-bite-right .wl-fishcard { flex-direction: row; align-items: center; }
  .wl-bite-right .wl-fishcard-photo { flex: 0 0 158px; aspect-ratio: 3 / 2; }
  .wl-bite-right .wl-fishcard-why { -webkit-line-clamp: 5; }   /* the longest tip fits, no uneven ellipsis */
}

.wl-sing-wrap .wx-tl-head { color: var(--wl-accent-text); display: flex; }
.wl-sing-wrap .wx-tl-head svg { color: var(--wl-accent); }
/* link out to the full /birds stats page, pinned to the right of the What's Singing head (Eli) */
/* "more bird stats" now sits on its own line under the species list (Eli), not in the head */
.wl-more-line { margin: 13px 0 0; }
.wl-sing-more { font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--wl-accent-text); text-decoration: none; }
.wl-sing-more:hover { text-decoration: underline; text-underline-offset: 2px; }
.wl-sing-more:focus-visible { outline: 2px solid var(--wl-accent); outline-offset: 2px; border-radius: 3px; }
/* the "July on Watts Bar" qualifier on its own line under the What's Biting head (Eli) */
.wl-half-sub { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.07em; font-size: 11px; font-weight: 600; color: var(--ink-faint); margin: 1px 0 10px; }
.wl-half-sub:empty { display: none; }
.wl-bite-wrap .wx-tl-head { color: var(--water-text); }
.wl-bite-wrap .wx-tl-head svg { color: var(--water); }

/* ── HIERARCHY: the two halves are MAJOR sections (a level above the mono eyebrows
   used for minor subsections). Promote them to display-serif headlines -- a family +
   size + case jump that reads instantly as "major section", distinct from both the
   sans card title above and the small mono labels/controls below. */
/* module header matching the weather card's .wx-mod-head (mono caps + small icon) so the
   Wildlife modules read in the same design language as the rest of the page (Eli) */
.wl-half-head { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; line-height: 1; gap: 7px; align-items: center; margin: 2px 0 5px; }
.wl-half-head svg { width: 15px; height: 15px; stroke-width: 2; flex: 0 0 auto; }

/* the one-line lead under each section header (number emphasized, plain voice) */
.wl-lead { font-family: var(--body); font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); margin: 7px 0 12px; text-wrap: pretty; }
.wl-lead b { color: var(--ink); font-weight: 700; }
.wl-lead .wl-em { font-family: var(--mono); font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }

/* ── 24h dawn-chorus activity chart ───────────────────────────────────────────── */
/* full-width + taller now that the "loudest around" caption is gone (Eli) */
.wl-birdchart { display: block; width: 100%; height: 200px; cursor: crosshair; }
@media (max-width: 680px) { .wl-birdchart { height: 150px; } }
.wl-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 8px; }
.wl-leg-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body); font-size: 11.5px; color: var(--ink-soft); }
.wl-leg-bar { width: 11px; height: 9px; border-radius: 2px; background: var(--wl-bar); }
.wl-leg-base { width: 16px; border-top: 2px dashed var(--ink-faint); height: 2px; }
.wl-leg-now { width: 16px; border-top: 2px solid var(--wl-now); height: 2px; }

/* ── top callers: top-10 photo cards, a horizontal strip you can scroll (Eli) ────── */
/* no edge bleed: the module's own padding gives the first bird space from the border (Eli);
   bleeding + scroll-snap:start negated the left padding and shoved the first bird flush. */
.wl-callers { display: flex; gap: 10px; margin: 14px 0 0; padding: 2px 0 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rule-faint) transparent; }
/* no card surface behind the birds -- just the photo + text (Eli) */
.wl-caller { position: relative; flex: 0 0 150px; scroll-snap-align: start; display: flex; flex-direction: column; background: none; border: 0; border-radius: 9px; overflow: hidden; text-decoration: none; color: inherit; min-width: 0; }
/* the photo (and its play button) sit above the stretched name-link below */
.wl-caller-photo { position: relative; z-index: 1; aspect-ratio: 3 / 2; background: var(--wl-bar-soft); overflow: hidden; }
/* the whole card is the bird's link now -> a gentle photo push-in + moss border on
   hover/focus signals that, echoing the cabin block's motion language. */
.wl-caller { transition: border-color 0.2s ease; }
.wl-caller-photo img { transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.wl-caller:hover, .wl-caller:focus-within { border-color: var(--wl-accent); }
.wl-caller:hover .wl-caller-photo img, .wl-caller:focus-within .wl-caller-photo img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .wl-caller-photo img { transition: none; }
  .wl-caller:hover .wl-caller-photo img, .wl-caller:focus-within .wl-caller-photo img { transform: none; }
}
.wl-caller-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-caller-rank { position: absolute; top: 6px; left: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; line-height: 1; color: #fff; background: rgba(20,30,12,0.72); border-radius: 999px; padding: 3px 6px; letter-spacing: 0.02em; }  /* 0.62 -> 0.72: the rank badge sits on a bird photo that may be bright; the deeper scrim keeps the white numeral legible over any frame */
.wl-caller-tier { position: absolute; top: 6px; right: 6px; font-family: var(--mono); font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; background: rgba(107,142,61,0.92); border-radius: 999px; padding: 3px 6px; }
.wl-caller-body { padding: 8px 2px 4px; display: flex; flex-direction: column; gap: 5px; }
.wl-caller-name { font-family: var(--body); font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.2; text-decoration: none; }
/* stretched link: the whole caller card (minus the photo/play button, z-index 1) is the name's
   tap target, so it clears the 24px AA target-size minimum instead of just the 15px text line */
.wl-caller-name::after { content: ""; position: absolute; inset: 0; }
.wl-caller-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.wl-caller-name:focus-visible { outline: 2px solid var(--wl-accent); outline-offset: 2px; border-radius: 3px; }
.wl-caller-meta { display: flex; align-items: baseline; gap: 5px; }
.wl-caller-count { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--wl-accent-text); }
.wl-caller-unit { font-family: var(--body); font-size: 11.5px; color: var(--ink-soft); }
.wl-caller-track { height: 4px; background: var(--rule-ghost); border-radius: 3px; overflow: hidden; margin-top: 1px; }
.wl-caller-fill { display: block; height: 100%; background: var(--wl-bar); border-radius: 3px; }

/* the chart, said in plain words (a11y text alt + the glance answer) */
.wl-chart-say { font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); margin: 7px 0 0; }
.wl-chart-say:empty { display: none; }

/* ── audio: play the bird's call (people love this). A circular button with a
   progress ring + play/pause, overlaid on the photo. CC attribution in the footer. */
.wl-play { position: absolute; bottom: 6px; right: 6px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,30,12,0.6); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.wl-play:hover { background: rgba(20,30,12,0.8); }
.wl-play:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.wl-play-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.wl-play-ring-bg { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 2; }
.wl-play-ring-prog { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset 0.12s linear; }
.wl-play-ico { width: 13px; height: 13px; fill: #fff; position: relative; }
.wl-play .wl-play-pause { display: none; }
.wl-play.is-playing .wl-play-play { display: none; }
.wl-play.is-playing .wl-play-pause { display: inline; }
.wl-note-photowrap { position: relative; flex: 0 0 auto; }
.wl-note-photowrap .wl-play { width: 24px; height: 24px; bottom: 3px; right: 3px; }
.wl-note-photowrap .wl-play-ico { width: 10px; height: 10px; }
@media (prefers-reduced-motion: reduce) { .wl-play-ring-prog { transition: none; } }

/* ── field notes: the almanac delights, set as a SERIF notes list (a naturalist's
   margin notes), distinct from the sans photo cards and readable (panel: Olivia +
   Miss Nell). A bordered list, not a card grid; the species name is the serif voice. */
/* borderless + spaced so it reads as scribbled margin notes, NOT a ruled index -- the
   "see all species" list below is the ruled list, so the two don't share a silhouette
   (panel: Olivia). The 48px photo + serif name anchor each note. */
/* field notes: a horizontal strip of "cool things" cards you scroll from the right (Eli),
   populated from the last-24h feed so it's never empty. */
.wl-notes { display: flex; gap: 10px; margin: 14px 0 4px; padding: 2px 0 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--rule-faint) transparent; }
/* no card surface behind the field notes either -- photo + text on the module (Eli) */
.wl-note { flex: 0 0 auto; min-width: 224px; max-width: 288px; scroll-snap-align: start; display: flex; align-items: center; gap: 12px; padding: 2px 0; border: 0; background: none; text-decoration: none; color: inherit; }
.wl-note:hover .wl-note-name { text-decoration: underline; text-underline-offset: 2px; }
.wl-note-photo { width: 58px; height: 58px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: var(--wl-bar-soft); }
.wl-note-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-note-label { font-family: var(--mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--wl-accent-text); }
.wl-note-name { font-family: var(--display); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.12; letter-spacing: 0.005em; }
.wl-note-detail { font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.35; }

/* ── see all the birds: progressive-disclosure full species list (Eli) ─────────── */
.wl-all { margin-top: 14px; }
.wl-all[style*="none"] { display: none; }
/* a disclosure CONTROL, not a heading: sentence-case body link (was a mono-uppercase
   eyebrow that competed with the section heads). reads as "tap to expand". */
.wl-all-sum { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; padding: 8px 2px; font-family: var(--body); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; color: var(--wl-accent-text); }
.wl-all-sum::-webkit-details-marker { display: none; }
.wl-all-sum::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.18s ease; flex: 0 0 auto; margin-bottom: 2px; }
.wl-all[open] .wl-all-sum::before { transform: rotate(45deg); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .wl-all-sum::before { transition: none; } }
/* CSS columns (not grid) so the ranked list reads top-to-bottom down each column,
   then to the next -- the order people actually read a numbered list. (Eli) */
.wl-all-list { columns: 232px 3; column-gap: 30px; padding: 4px 0 6px; }
/* a ranked visual (count bar echoing the gallery), not a ruled spreadsheet -- no
   per-row borders, so uneven column lengths don't leave hanging rules */
.wl-allrow { display: grid; grid-template-columns: 1.7em 1fr 46px auto; align-items: center; gap: 9px; padding: 6px 5px; border-radius: 6px; text-decoration: none; color: inherit; break-inside: avoid; transition: background 0.15s ease, transform 0.1s ease; }
.wl-allrow-num { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; text-align: right; transition: color 0.15s ease; }
.wl-allrow-name { font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--ink); min-width: 0; }
.wl-allrow-bar { height: 4px; background: var(--rule-ghost); border-radius: 3px; overflow: hidden; }
.wl-allrow-fill { display: block; height: 100%; background: var(--wl-bar); border-radius: 3px; opacity: 0.72; transform-origin: left center; transition: opacity 0.18s ease; }
.wl-allrow-count { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--wl-accent-text); font-variant-numeric: tabular-nums; text-align: right; }
/* delight: hover lifts the row + brightens its bar + warms the rank; tap presses */
.wl-allrow:hover { background: var(--wl-bar-soft); }
.wl-allrow:hover .wl-allrow-name { color: var(--wl-accent-text); }
.wl-allrow:hover .wl-allrow-num { color: var(--wl-accent-text); }
.wl-allrow:hover .wl-allrow-fill { opacity: 1; }
.wl-allrow:active { transform: scale(0.99); }
.wl-allrow:focus-visible .wl-allrow-name { text-decoration: underline; text-underline-offset: 2px; }
/* delight: when "see all" opens, the ranked bars sweep in from the left */
.wl-all[open] .wl-allrow-fill { animation: wl-bar-grow 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes wl-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .wl-allrow, .wl-allrow-num, .wl-allrow-fill { transition: none; }
  .wl-allrow:active { transform: none; }
  .wl-all[open] .wl-allrow-fill { animation: none; }
}
.wl-allrow:focus-visible { outline: 2px solid var(--wl-accent); outline-offset: 1px; border-radius: 3px; }

/* ── platform-specific recommendation: a segmented control (shore / pontoon / fishing
   boat) + the read for the selected platform. Teal to tie it to the biting half. ──── */
.wl-plat-wrap { margin: 6px 0 14px; }
.wl-plat-q { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 7px; }
/* the platform selector spans the same width as the recommendation box below it (Eli):
   no max-width cap, so the pill track and the tips panel share one edge-to-edge column. */
.wl-plat { display: flex; gap: 3px; background: var(--water-soft); border-radius: 999px; padding: 3px; }
.wl-plat-btn { flex: 1; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px; font-weight: 600; color: var(--ink-soft); background: none; border: 0; border-radius: 999px; padding: 7px 6px; cursor: pointer; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.wl-plat-btn[aria-selected="true"] { background: var(--paper-inset); color: var(--water-text); box-shadow: 0 1px 3px rgba(0,0,0,0.14); }
@media (prefers-color-scheme: dark) { .wl-plat-btn[aria-selected="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 1px 4px rgba(0,0,0,0.45); } }
.wl-plat-btn:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .wl-plat-btn { transition: none; } }
/* min-height holds the box steady when switching between reads of different lengths
   (no layout jump -- panel: Miss Nell loses her place when the page shifts). */
/* min-height sized to the LONGEST read (Shore) so switching tabs doesn't shift the box;
   the bump at the 2-col width covers Shore wrapping taller in the narrower column */
/* the recommendation lives in its own labelled, bordered panel so it's obvious this
   read is the answer FOR the selected tab (Eli: "not clear what changes"). */
.wl-plat-recbox { margin-top: 10px; border: 1px solid var(--rule-faint); border-radius: 10px; background: var(--water-soft); padding: 11px 14px 13px; }
.wl-plat-rec { font-family: var(--body); font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--ink); margin: 0; text-wrap: pretty; min-height: 5.4em; transition: opacity 0.18s ease; }
@media (min-width: 960px) { .wl-plat-rec { min-height: 116px; } }

/* TWRA creel limits: a clean emphasized strip (tinted, labelled), not buried in the footer */
.wl-regs-box { margin: 16px 0 9px; padding: 11px 14px 12px; background: var(--wl-bar-soft); border-radius: 9px; }
.wl-regs-box[hidden] { display: none; }
.wl-regs-label { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; font-weight: 700; color: var(--wl-accent-text); margin-bottom: 3px; }
.wl-regs-text { font-family: var(--body); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.wl-regs-text b { color: var(--ink); font-weight: 700; }
.wl-regs-text a { color: var(--wl-accent-text); text-underline-offset: 2px; }
.wl-regs { display: block; margin-top: 4px; color: var(--ink-soft); }

/* ── biting: this month's species (editorial photo cards) ─────────────────────── */
.wl-fish { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px; }
@media (max-width: 560px) { .wl-fish { grid-template-columns: 1fr; } }
/* no card surface behind the fish -- the cutout + text on the module (Eli, same as birds) */
.wl-fishcard { display: flex; flex-direction: column; background: none; border: 0; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; min-width: 0; }
/* the fish art is uniform, transparent cutouts (RGBA PNGs) -- show the WHOLE fish
   (contain) on a clean tint, not a cropped fill (Eli) */
.wl-fishcard-photo { aspect-ratio: 16 / 10; background: linear-gradient(160deg, rgba(0,136,148,0.10), rgba(0,136,148,0.02)); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 7px; }
.wl-fishcard-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 560px) { .wl-fishcard { flex-direction: row; align-items: stretch; } .wl-fishcard-photo { flex: 0 0 40%; aspect-ratio: auto; } }
.wl-fishcard-body { padding: 9px 2px 12px; display: flex; flex-direction: column; gap: 4px; }
.wl-fishcard-name { font-family: var(--body); font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.wl-fishcard-why { font-family: var(--body); font-size: 11.5px; font-weight: 500; color: var(--ink-soft); line-height: 1.4; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .wl-fishcard-why { -webkit-line-clamp: 5; } }
.wl-fishcard-temp { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--water-text); margin-top: 1px; }

/* a quiet provenance + freshness footer under each half. These are the honest
   disclaimers (the most important text on the card), so they read at --ink-soft, not
   the faint tone (panel: Miss Nell could not read them; Sherry flagged the contrast). */
.wl-foot { font-family: var(--body); font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; text-wrap: pretty; }

/* focus states: match the prototype's teal/moss outline convention (not the thin
   default-blue over photos). Section-scoped so Biting picks up teal, Singing moss. */
.wl-caller:focus-visible, .wl-note:focus-visible, .wl-fishcard:focus-visible { outline: 2px solid var(--wl-accent); outline-offset: 2px; border-radius: 9px; }
.wl-bite-wrap .wl-fishcard:focus-visible { outline-color: var(--water); }

/* ── INTERACTIONS: hover lift + tactile tap-press (reads great on a phone) ───── */
/* fish cards are links to the guide: same photo push-in + border cue as callers */
.wl-fishcard { transition: border-color 0.2s ease, transform 0.12s ease; }
.wl-fishcard-photo img { transition: transform 0.5s cubic-bezier(0.2,0.7,0.2,1); }
.wl-fishcard:hover, .wl-fishcard:focus-within { border-color: var(--water); }
.wl-fishcard:hover .wl-fishcard-photo img, .wl-fishcard:focus-within .wl-fishcard-photo img { transform: scale(1.05); }
/* tap-press: a quick scale-down acknowledges the touch the instant a finger lands */
.wl-caller { transition: border-color 0.2s ease, transform 0.12s ease; }
.wl-caller:active, .wl-fishcard:active { transform: scale(0.978); }
.wl-play { transition: background 0.15s ease, transform 0.12s ease; }
.wl-play:active { transform: scale(0.88); }
.wl-plat-btn:active { transform: scale(0.95); }
.wl-all-sum:active, .wl-foot-link:active { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .wl-fishcard, .wl-fishcard-photo img, .wl-caller, .wl-play { transition: border-color 0.2s ease; }
  .wl-fishcard:hover .wl-fishcard-photo img, .wl-fishcard:focus-within .wl-fishcard-photo img,
  .wl-caller:active, .wl-fishcard:active, .wl-play:active, .wl-plat-btn:active { transform: none; }
}

/* photo-404 fallback: window.__wlImgFail swaps the broken <img> for this intentional
   feather placeholder (moss glyph on the tint) so a missing crop never reads as broken. */
.wl-photo-ph { background: var(--wl-bar-soft); display: flex; align-items: center; justify-content: center; }
.wl-photo-ph::after { content: ""; width: 38%; height: 38%; max-width: 30px; max-height: 30px; background: var(--wl-accent); opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.67 19a2 2 0 0 0 1.42-.59l6.16-6.17a6 6 0 0 0-8.49-8.49L5.6 9.93A2 2 0 0 0 5 11.34V18a1 1 0 0 0 1 1z'/%3E%3Cpath d='M16 8 2 22'/%3E%3Cpath d='M17.5 15H9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.67 19a2 2 0 0 0 1.42-.59l6.16-6.17a6 6 0 0 0-8.49-8.49L5.6 9.93A2 2 0 0 0 5 11.34V18a1 1 0 0 0 1 1z'/%3E%3Cpath d='M16 8 2 22'/%3E%3Cpath d='M17.5 15H9'/%3E%3C/svg%3E") center / contain no-repeat; }
.wl-caller-photo .wl-photo-ph, .wl-fishcard-photo .wl-photo-ph { width: 100%; height: 100%; }
.wl-note > .wl-photo-ph { width: 46px; height: 46px; border-radius: 7px; flex: 0 0 auto; }

/* the calm "data catching up" line shown in place of a half when its feed is unavailable */
.wl-empty { font-family: var(--body); font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); margin: 7px 0 2px; }
.wl-foot a { color: var(--ink-soft); text-underline-offset: 2px; }
.wl-foot .wl-fresh { color: var(--ink-soft); font-weight: 600; }
/* attributions as a quieter second tier, not part of the gray wall */
/* credits collapsed behind a click-to-show summary (Eli: saves mobile space) */
.wl-credits-d { margin-top: 5px; }
.wl-credits-sum { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--ink-soft); cursor: pointer; list-style: none; width: fit-content; }
.wl-credits-sum::-webkit-details-marker { display: none; }
.wl-credits-sum::after { content: "\25be"; font-size: 8px; transition: transform 0.15s ease; }
.wl-credits-d[open] .wl-credits-sum::after { transform: rotate(180deg); }
.wl-credits { display: block; margin-top: 4px; font-size: 9px; line-height: 1.4; color: var(--ink-faint); }
.wl-credits a { color: var(--ink-soft); }

/* live heartbeat dot (matches the rest of the prototype's .nl-live) sized for inline use */
.wl-live { position: relative; display: inline-block; width: 7px; height: 7px; margin-right: 5px; vertical-align: 1px; border-radius: 50%; background: var(--live-green); }
.wl-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live-green); animation: wl-beat 2.8s cubic-bezier(.22,1,.36,1) infinite; }
@keyframes wl-beat { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wl-live::after { animation: none; display: none; } }
@media (prefers-color-scheme: dark) { .wl-live, .wl-live::after { background: var(--live-green); } }


/* --- html[data-night="1"] mirror of the prefers-color-scheme:dark rules above, so the
   site's time-based night theme also darkens this homepage (added at homepage cutover) --- */
html[data-night="1"] {
    --wl-accent: #9bbf60;
    --wl-accent-text: #b2d479;
    --wl-bar: #93bb55;
    --wl-bar-soft: rgba(155, 191, 96, 0.20);
    --wl-now: #e08a64;
  }
html[data-night="1"] .wl-plat-btn[aria-selected="true"] { box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 1px 4px rgba(0,0,0,0.45); }
html[data-night="1"] .wl-live, html[data-night="1"] .wl-live::after { background: var(--live-green); }