/* highlights.css — "Highlights" hero slider of favourite camera images. */
.ik-hero-title { margin: 0 0 0.1rem; }
.ik-hero-lead  { color: var(--bs-secondary-color, #6c757d); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; max-width: 60rem; }
.ik-hero-empty { color: var(--bs-secondary-color, #6c757d); font-style: italic; }
.ik-hero-controls { display: flex; justify-content: flex-end; align-items: center; gap: 0.7rem; margin: -0.2rem 0 0.7rem; }
.ik-hero-controls .shiny-input-container, .ik-hero-controls .form-group { margin-bottom: 0; width: auto; }
.ik-hero-controls .checkbox { margin: 0; white-space: nowrap; }

/* Full-screen toggle — a bare icon button; the expand/compress icons swap on `.is-fs` (set by highlights.js
   on fullscreenchange). Sits in the floating controls pill alongside the "Dramatise" toggle. */
.ik-hero-fs-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.12rem 0.2rem;
  background: transparent; border: 0; color: #fff; cursor: pointer; line-height: 1; font-size: 0.95rem;
  opacity: 0.85; transition: opacity 0.15s, transform 0.15s; }
.ik-hero-fs-btn:hover { opacity: 1; transform: scale(1.08); }
.ik-hero-fs-btn .ik-fs-ico { display: inline-flex; }
.ik-hero-fs-btn .ik-fs-ico--close { display: none; }
.ik-hero-fs-btn.is-fs .ik-fs-ico--open  { display: none; }
.ik-hero-fs-btn.is-fs .ik-fs-ico--close { display: inline-flex; }

.ik-hero-carousel { max-width: 1100px; margin: 0 auto; border-radius: 0.6rem; overflow: hidden;
  background: #0b0b0b; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
/* Cinematic stage: the WHOLE image (object-fit: contain — never cropped, so subjects at the top/bottom of
   a 4:3 frame stay visible) over a blurred, darkened zoom of the SAME photo filling the wide band. Bootstrap
   display:none's inactive items, so only one backdrop paints at a time (no per-slide blur cost). */
.ik-hero-stage { position: relative; width: 100%; height: 80vh; min-height: 320px; overflow: hidden; background: #0b0b0b; }
.ik-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center;
  filter: blur(30px) brightness(0.5) saturate(1.08); transform: scale(1.18); }
.ik-hero-img { position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: center; cursor: zoom-in; }

/* Mission badge (top-left over the photo): the species' conservation role — predator = target (a control
   target), protected = shield (a species we defend). A dark glass pill so it reads on any photo. */
.ik-hero-tag { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem; line-height: 1;
  padding: 0.32rem 0.66rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ik-hero-tag i { font-size: 0.85rem; }
.ik-hero-tag--predator  { border-color: rgba(232, 90, 68, 0.9); }
.ik-hero-tag--predator i { color: #ff6f57; }
.ik-hero-tag--protected  { border-color: rgba(60, 194, 116, 0.9); }
.ik-hero-tag--protected i { color: #49d68d; }

/* ── Dramatic targeting HUD (the dramatic_effect flourish) ────────────────────────────────────────────
   A Terminator/sniper overlay. pointer-events:none so the image click still opens the lightbox. Colour +
   tone come from the role: predator = red target (crosshair + lock), protected = green protective frame
   (shield, no crosshair). Elements live mostly in the wings/corners so the animal stays clear. */
.ik-hero-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)); }
.ik-hero-hud--predator  { --hud: rgba(255, 82, 66, 0.88); }
.ik-hero-hud--pest      { --hud: rgba(255, 170, 58, 0.92); }   /* amber — a controlled pest (boar, possum) */
.ik-hero-hud--caution   { --hud: rgba(255, 199, 71, 0.95); }   /* gold — a managed risk (dog): not a kill target */
.ik-hero-hud--protected { --hud: rgba(58, 214, 130, 0.9); }
.ik-hero-hud--neutral   { --hud: rgba(94, 202, 255, 0.92); }   /* cyan — incidental / the playful treatment */
/* viewfinder corner brackets */
.ik-hud-bracket { position: absolute; width: 30px; height: 30px; border: 2px solid var(--hud); }
.ik-hud-tl { top: 9%;    left: 4%;  border-right: 0; border-bottom: 0; }
.ik-hud-tr { top: 9%;    right: 4%; border-left: 0;  border-bottom: 0; }
.ik-hud-bl { bottom: 9%; left: 4%;  border-right: 0; border-top: 0; }
.ik-hud-br { bottom: 9%; right: 4%; border-left: 0;  border-top: 0; }
/* predator crosshair — GAPPED over the centre so the animal is clear; the visible ends sit in the wings */
.ik-hud-cross { position: absolute; top: 50%; left: 4%; right: 4%; height: 0; border-top: 1px solid var(--hud);
  -webkit-mask: linear-gradient(90deg, #000 0 30%, transparent 30% 70%, #000 70% 100%);
          mask: linear-gradient(90deg, #000 0 30%, transparent 30% 70%, #000 70% 100%); }
/* predator centre lock: ring + short plus */
.ik-hud-reticle { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid var(--hud); border-radius: 50%; }
.ik-hud-reticle::before, .ik-hud-reticle::after { content: ""; position: absolute; background: var(--hud); }
.ik-hud-reticle::before { top: 50%; left: -10px; right: -10px; height: 1px; margin-top: -0.5px; }
.ik-hud-reticle::after  { left: 50%; top: -10px; bottom: -10px; width: 1px; margin-left: -0.5px; }
/* single centre mark (no crosshair): protected = shield, neutral = heart, caution = alert triangle */
.ik-hud-shield, .ik-hud-heart, .ik-hud-alert { position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); color: var(--hud); font-size: 1.6rem; }
/* terminal readout — monospace, in the left wing */
.ik-hud-readout { position: absolute; left: 4.5%; top: 17%; text-transform: uppercase;
  font: 700 0.72rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em;
  color: var(--hud); }
.ik-hud-key { opacity: 0.7; margin-right: 0.45em; }
.ik-hud-mission { font-weight: 800; }
.ik-hud-caret { display: inline-block; width: 0.5em; height: 0.95em; margin-left: 0.25em; vertical-align: -0.1em;
  background: var(--hud); animation: ik-hud-blink 1.05s steps(1) infinite; }
@keyframes ik-hud-blink { 50% { opacity: 0; } }

/* Caption: a readable gradient panel, always visible (Bootstrap hides it below md by default). z-index sits
   it ABOVE the photo (.ik-hero-img is position:relative z-index:1 — without this the opaque image paints over
   the caption and hides it). */
.ik-hero-cap { left: 0; right: 0; bottom: 0; z-index: 4; padding: 2.4rem 1.5rem 1.1rem; text-align: left;
  display: block !important; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); }
.ik-hero-cap h5 { font-weight: 700; margin: 0; font-size: 1.25rem; }
.ik-hero-cap p  { margin: 0.1rem 0 0; opacity: 0.92; font-size: 0.92rem; }
/* Dramatised caption (HUD mode) — a monospace terminal line, matching the targeting readout. */
.ik-hero-cap--hud h5 { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 1.02rem; }
.ik-hero-cap--hud h5::before { content: "> "; opacity: 0.62; }
.ik-hero-cap--hud p { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; opacity: 0.82; }

/* Controls a touch larger / more visible over photos. */
.ik-hero-carousel .carousel-control-prev, .ik-hero-carousel .carousel-control-next { width: 8%; }
.ik-hero-carousel .carousel-control-prev-icon, .ik-hero-carousel .carousel-control-next-icon {
  width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }

/* Homepage hero band (.ik-hero-home) — a shorter, full-width version leading the landing scorecard, so
   the digest below stays in view (the full Highlights page keeps its 80vh takeover). */
.ik-hero-home-wrap { position: relative; margin: 0 0 1.15rem; }
/* Mini "Dramatic" toggle on the homepage hero band — smaller + subtler than the Highlights one. */
.ik-hero-controls--mini { position: absolute; z-index: 5; top: 0.5rem; right: 0.6rem; margin: 0;
  background: rgba(0, 0, 0, 0.4); border-radius: 999px; padding: 0.02rem 0.62rem; backdrop-filter: blur(3px); }
.ik-hero-controls--mini label { color: #fff; margin: 0; font-size: 0.72rem; opacity: 0.9; }
.ik-hero-controls--mini input[type="checkbox"] { transform: scale(0.82); }
.ik-hero-carousel.ik-hero-home { max-width: 100%; margin: 0; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14); }
/* Shorter band on the landing — the scorecard below needs the vertical room. `contain` shows the whole
   4:3 image even at this height, so it can be short without hiding the subject. */
.ik-hero-carousel.ik-hero-home .ik-hero-stage { height: clamp(230px, 38vh, 380px); min-height: 230px; }
/* A gentle zoom ANCHORED AT THE TOP: it crops the bottom of frame — exactly where bush cameras stamp their
   info bar — and adds a little drama, while the top (where subjects usually sit) is never cut. Tune
   --ik-hero-zoom: 1 = the whole frame, higher = more zoom + more bottom cropped. */
.ik-hero-carousel.ik-hero-home .ik-hero-img { transform: scale(var(--ik-hero-zoom, 1.28)); transform-origin: 50% 0; }
.ik-hero-carousel.ik-hero-home .ik-hero-cap { padding: 1.9rem 1.3rem 0.85rem; }
.ik-hero-carousel.ik-hero-home .ik-hero-cap h5 { font-size: 1.12rem; }
.ik-hero-carousel.ik-hero-home .ik-hero-cap p  { font-size: 0.86rem; }

/* Species-page favourites — a moderate carousel on the Summary tab (not the full-page hero height). */
.ik-hero-carousel.ik-hero-species { max-width: 100%; margin: 0.4rem 0 1.3rem; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14); }
.ik-hero-carousel.ik-hero-species .ik-hero-stage { height: clamp(240px, 40vh, 420px); min-height: 240px; }

/* Click-to-enlarge lightbox — one shared overlay (built by highlights.js) shows the clicked photo at full
   viewport size; the hero itself is contain-fit in the band, so this is a real zoom. Click / Esc to close. */
.ik-hero-lightbox { position: fixed; inset: 0; z-index: 4000; display: none;
  align-items: center; justify-content: center; padding: 3vh 3vw;
  background: rgba(0, 0, 0, 0.9); cursor: zoom-out; }
.ik-hero-lightbox.open { display: flex; }
.ik-hero-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 0.4rem; box-shadow: 0 6px 34px rgba(0, 0, 0, 0.6); }
body.ik-hero-lightbox-lock { overflow: hidden; }

/* ── Highlights: FULL-BLEED in BOTH modes — full width + as tall as the display allows (no title/intro) ── */
.ik-hero-full { max-width: 100%; }
.ik-hero-full .ik-hero-stage { height: calc(100vh - 88px); min-height: 400px; }   /* image contain-centred by height */
/* Camera photos aren't the screen's shape, so `contain` leaves a strip on one axis. Keep the photo CENTRED
   (Blair prefers it balanced in the frame over anchored to an edge) and soften the blurred backdrop that fills
   the strip so it reads as a cinematic blur of the same photo, not a black void (the old brightness(0.5) went
   pure-black on night IR shots). */
.ik-hero-full .ik-hero-bg { filter: blur(26px) brightness(0.72) saturate(1.12); }
/* Lift the app caption clear of the camera's baked-in info bar (kept — it's source data) along the photo's
   bottom edge: a `vh` offset roughly tracks the bar's proportional height (a fixed fraction of the photo) so
   it scales with the screen. Reads as a lower-third title. Only the plain slider has this caption (dramatise
   mode uses the dossier panel instead), so this can't affect that layout. */
.ik-hero-full .ik-hero-cap { bottom: 6.5vh; }

/* Native full screen: highlights.js adds .ik-hero--fs to the fullscreen hero (a plain JS class, NOT the
   :fullscreen pseudo — a selector list mixing the unprefixed and -webkit- pseudo forms is dropped wholesale
   by any browser that doesn't know one of them, which silently defeated this override and left an 88px black
   strip at the bottom). The stage must fill the WHOLE viewport: there's no navbar in fullscreen, so the base
   calc(100vh - 88px) comes up 88px short. Plain block layout fills without centering; overflow:hidden guards a
   sub-pixel scroll. */
.ik-hero--bare.ik-hero--fs { background: #0b0b0b; overflow: hidden; }
.ik-hero--bare.ik-hero--fs .ik-hero-full { width: 100%; border-radius: 0; }
.ik-hero--bare.ik-hero--fs .ik-hero-full .ik-hero-stage { height: 100vh; }
/* Bare page: the "Dramatic mode" toggle floats over the slider, top-right (clear of the left dossier). */
.ik-hero--bare { position: relative; }
.ik-hero--bare .ik-hero-controls { position: absolute; z-index: 5; top: 0.7rem; right: 0.9rem; margin: 0;
  background: rgba(0, 0, 0, 0.52); border-radius: 999px; padding: 0.1rem 0.85rem; backdrop-filter: blur(3px); }
.ik-hero--bare .ik-hero-controls label { color: #fff; margin: 0; font-size: 0.85rem; }
/* Dramatic mode adds the green-terminal dossier OVERLAY (width + stage height come from .ik-hero-full). */
.ik-hero-item--dz { position: relative; }
/* The dossier — a translucent phosphor-green CRT terminal overlaid on the LEFT, fading to clear so the
   full-width image reads behind it (its subject usually sits centre / right). */
.ik-hero-dossier { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: min(360px, 34%);
  overflow: auto; color: #6bf0a6; padding: 1.7rem 1.8rem;
  font: 0.84rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 6px rgba(88, 227, 148, 0.45);
  background: linear-gradient(90deg, rgba(3, 16, 10, 0.92) 0%, rgba(3, 16, 10, 0.8) 68%, rgba(3, 16, 10, 0) 100%); }
.ik-hero-dossier::after { content: ""; position: absolute; inset: 0; pointer-events: none;   /* CRT scanlines */
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.17) 0 1px, transparent 1px 3px); }
.ik-dz-head { font-weight: 700; letter-spacing: 0.1em; margin-bottom: 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(107, 240, 166, 0.4); }
.ik-dz-cursor { display: inline-block; width: 0.6em; height: 1em; margin-left: 0.35em; vertical-align: -0.12em;
  background: #6bf0a6; animation: ik-hud-blink 1.05s steps(1) infinite; }
.ik-dz-row { display: flex; gap: 0.7em; }
.ik-dz-key { flex: 0 0 5.6em; opacity: 0.62; letter-spacing: 0.04em; }
.ik-dz-val { flex: 1 1 auto; font-weight: 600; word-break: break-word; }
.ik-dz-rule { height: 0; border-top: 1px dashed rgba(107, 240, 166, 0.34); margin: 0.65rem 0; }
.ik-dz-note p { margin: 0.4rem 0 0; opacity: 0.92; font-style: italic; line-height: 1.6; }
.ik-dz-spark-row { align-items: center; }
.ik-dz-spark { width: 120px; height: 20px; display: block; color: #8effc0; filter: drop-shadow(0 0 3px rgba(88, 227, 148, 0.5)); }
/* "> LOOKUP DATABASE" — routes to the species dashboard; a T2 terminal button. */
.ik-dz-link { display: inline-block; margin-top: 1rem; padding: 0.35rem 0.9rem; cursor: pointer; pointer-events: auto;
  color: #6bf0a6; text-decoration: none; letter-spacing: 0.08em; font-weight: 700;
  border: 1px solid rgba(107, 240, 166, 0.55); border-radius: 3px; transition: background 0.15s, box-shadow 0.15s; }
.ik-dz-link:hover { color: #eafff3; background: rgba(107, 240, 166, 0.18); box-shadow: 0 0 12px rgba(107, 240, 166, 0.45); }
/* Narrow screens: the dossier spans the BOTTOM instead of a side column (33% would be unreadable). */
@media (max-width: 640px) {
  .ik-hero-dossier { top: auto; width: 100%; height: auto; max-height: 62%; padding: 1.1rem 1.2rem;
    background: linear-gradient(0deg, rgba(3,16,10,0.95) 0%, rgba(3,16,10,0.72) 78%, rgba(3,16,10,0) 100%); }
}