/* Field Guide — Citation modal (Reference doc, Phase 2). Page-scoped to
   results.html (modal-citation.js's own header comment explains the
   scoping call) — pulls only from tokens.css, the same portability rule
   every components/*.css file already follows, plus one intentional
   direct reuse of search.css's own real, established card-filter
   panel styling (this file's own comments below name each exact value
   and where it's reused from — nothing here is a fresh guess).

   Backdrop dim value: color-mix(in srgb, var(--color-ink) 10%,
   transparent) is not a new modal-scrim invented for this component —
   it's the map's own real selected-region highlight, confirmed
   directly against region-selection.js's own MapLibre paint
   expression ('fill-opacity': 0.10 against fill-color: token(
   '--color-ink')), reused verbatim per the task's own explicit
   instruction not to approximate a different dim value.

   z-index: 5/6 (backdrop/panel) — revised down twice while fixing the
   masthead-clearance bug below, and worth recording both revisions
   since the first one looked right but wasn't. The masthead bar itself
   is fully outside this modal's own vertical space regardless of
   stacking order now (the top-offset fix below), but its PROFILE MENU
   DROPDOWN is taller than the bar and, once open, extends down into
   the space the modal occupies — confirmed live, at the original
   30/31, the modal rendered on top of that overlap and silently ate
   clicks on whichever menu items fell inside it. First attempted fix:
   drop the modal below the dropdown's own nominal z-index: 20
   (search.css) to 15/16 — confirmed LIVE this still didn't work, via
   `document.elementFromPoint()` on an overlapping menu item, which
   still returned the modal's own topbar. Root cause: .masthead has
   `position: sticky` + its own `z-index: 10` (masthead.css), which per
   the CSS spec creates a real stacking context — everything inside it,
   including the dropdown's nominally-higher z-index: 20, is capped at
   effectively "10" as compared against elements OUTSIDE .masthead
   (like this modal, appended to <body> directly, Section 61). The
   dropdown's own z-index was never actually being compared against the
   modal's at all. Real fix: keep this modal's own z-index below
   .masthead's real 10 (5/6, chosen over raising the shared masthead's
   own z-index in masthead.css, since that file is shared by every
   other page and this task's own scope is modal-citation.js/.css
   specifically) — confirmed live post-fix via the same
   elementFromPoint() check, now correctly returning the real profile-
   menu-item at that point. */

/* Top offset — a real bug fix, not cosmetic (Reference doc): the panel
   below used to start at the very top of the viewport, which meant it
   sat over the masthead. Fixed by starting it at the same real top
   offset every other element on this page already uses —
   .results-body's own `masthead height + var(--space-6)` (confirmed
   live: 45px + 24px = 69px at the masthead's current rendered height,
   results.css). The masthead's own height isn't a fixed token CSS can
   reference on its own, so modal-citation.js's own updateTopOffset()
   measures the real element and hands it in as
   --modal-citation-masthead-height; this file only adds the real
   var(--space-6) token on top via calc(), rather than baking a second,
   JS-computed px value for that too. */

/* .modal-citation-backdrop has NO rule here anymore (Reference doc,
   this backdrop's third fix attempt) — every positioning/paint
   property is now set directly as an inline style by modal-
   citation.js's own buildModal()/updateBackdropGeometry(), on purpose.
   Root cause of the actual bug this replaces, found live: the
   previous class-toggled `opacity` transition got measurably stuck
   permanently at animation currentTime: 0 under a real, reproducible
   browser condition (a backgrounded/unfocused tab — Chrome throttles
   CSS transitions there), leaving the backdrop at true zero opacity
   indefinitely even with the is-open class correctly applied and
   confirmed topmost in real paint order. The fix removes the
   transition (and the class-cascade it depended on) entirely, not
   just this one symptom of it — nothing about whether this element is
   visible should depend on an animation reaching completion. See
   modal-citation.js's own comment on this exact element for the full
   diagnostic trail. */

/* Panel itself — right-edge slide-in, over page content (task's own
   explicit positioning). Border/radius/shadow/background are
   search.css's own .card-filter__panel values, reused exactly rather
   than re-derived: border-radius: var(--radius-card); border:
   var(--border-width-hairline) solid var(--color-hairline); box-
   shadow: 0 var(--space-1) var(--space-2) color-mix(in srgb,
   var(--color-faint) 35%, transparent); background: var(--color-
   surface) — the identical "styled panel floating over other content"
   treatment this project already established for exactly that visual
   role.

   Width tracks --modal-citation-page-width, set live by modal-
   citation.js's own renderPage() from the actual rendered PDF page's own
   real pixel width (that file's own computeScale() comment explains
   the derivation, including its 760px fallback) — plus this panel's
   own left/right padding on top, so the visible page content sits
   inset from the panel's edges the same way the card-filter's own
   content sits inset from ITS edges (--space-5, matching .card-
   filter__topbar's own horizontal padding, search.css). Some overlap
   with underlying page content at this width is expected and
   accepted (task's own explicit instruction not to prevent it) — no
   responsive width-capping logic here beyond the two real cases
   computeScale() itself already handles. */
.modal-citation {
  position: fixed;
  top: calc(var(--modal-citation-masthead-height, 0px) + var(--space-6));
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 6;
  display: flex;
  flex-direction: column;
  width: calc(var(--modal-citation-page-width, 760px) + (2 * var(--space-5)));
  max-width: calc(100vw - (2 * var(--space-5)));
  border: var(--border-width-hairline) solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-faint) 35%, transparent);
  background: var(--color-surface);
  overflow: hidden;
  transform: translateX(calc(100% + var(--space-6)));
  transition: transform 0.25s ease;
}

.modal-citation.is-open {
  transform: translateX(0);
}

/* Top controls row — same padding/background convention as .card-
   filter__topbar (search.css): padding: var(--space-3) var(--space-4);
   background: var(--color-surface-sunken). Two independent clusters
   (document Previous/Next+label on the left, Download+Dismiss on the
   right) split by justify-content: space-between, the same layout
   shape .card-datapoint-header already uses for its own two-cluster
   header row. */
.modal-citation-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-bottom: var(--border-width-hairline) solid var(--color-hairline);
  flex-shrink: 0;
}

.modal-citation-doc-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-citation-doc-label {
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  font-weight: var(--w-medium);
  color: var(--color-ink);
  white-space: nowrap;
}

.modal-citation-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Icon buttons — same square-icon-button treatment already used
   elsewhere in this system (.results-jump-fab, .controls-map'
   own buttons in search.css): no border/background at rest, a
   sunken-surface hover tint, focus-visible outline matching every
   other interactive control in this project. */
.modal-citation-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  border: none;
  border-radius: var(--radius-card);
  background: none;
  color: var(--color-ink-secondary);
  cursor: pointer;
}

.modal-citation-icon-btn:hover {
  background: var(--color-surface);
  color: var(--color-ink);
}

.modal-citation-icon-btn:focus-visible {
  outline: var(--border-width-active) solid var(--color-ink-secondary);
  outline-offset: -2px;
}

.modal-citation-icon {
  display: flex;
  width: var(--space-4);
  height: var(--space-4);
}

.modal-citation-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Body — the one real scroll surface, for a rendered page taller than
   the modal's own available height (modal-citation.js's own
   "modal body itself scrolls if a single rendered page is taller
   than the modal's own viewport" decision). Centered horizontally so
   a page narrower than the panel (the 760px-fallback case) doesn't
   look stranded against the left edge. */
.modal-citation-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: var(--space-5);
  background: var(--color-surface-sunken);
}

/* align-self: flex-start — a real bug, diagnosed live before fixing,
   not assumed. .modal-citation-body (above) is display:flex with no
   align-items of its own, so this wrap — its flex child — inherited
   the default align-items: stretch, forcing it to fill the body's own
   full cross-axis (vertical) height regardless of its content's real
   size. The image inside it (.modal-citation-image, below) is capped
   by its own max-height and scales via width:auto — it does NOT grow
   to fill extra vertical space the way its stretched parent wrap did,
   so at a genuinely tall viewport (where .modal-citation-body has real
   height to spare beyond what the image actually needs) the wrap's own
   visible bounds — and its box-shadow below, since that shadow is
   painted against the wrap's own box, not the image's — extended
   visibly past the image's real bottom edge. flex-shrink: 0 alone
   never addressed this: shrinking below natural size and stretching
   past it are two different, unrelated flex behaviors. flex-start
   (not center) matches how a document reader naturally starts at the
   top rather than floating vertically centered in the available body
   height; .modal-citation-body's own justify-content: center already
   handles horizontal centering on the row's main axis, unaffected by
   this cross-axis change. */
.modal-citation-page-wrap {
  position: relative;
  flex-shrink: 0;
  align-self: flex-start;
  box-shadow: 0 var(--space-1) var(--space-2) color-mix(in srgb, var(--color-faint) 35%, transparent);
}

/* Static, already-highlighted screenshot (Reference doc — replaces the
   prior live PDF.js canvas + text-layer entirely, Section 61-63's own
   abandoned approach). width: auto lets it scale proportionally from
   its own real natural size — modal-citation.js's own `load` listener
   samples the resulting rendered width afterward to size the panel
   around it, the same "derive from the document's own natural width"
   instruction as before, just reading a real <img> instead of a
   PDF.js viewport. The highlight itself is real image content
   (already baked into the supplied screenshot) — there is no separate
   highlight element or text-layer search happening in this file
   anymore.

   max-height, Phase 5 batch 8 — no longer a flat 85vh. That fraction
   was measured against the raw VIEWPORT, but the image doesn't get
   the whole viewport: it renders inside .modal-citation-body, itself
   already reduced by the masthead offset, this modal's own top/bottom
   position offsets, the topbar and pagination bars above/below it,
   and the body's own padding on both edges — real chrome an 85vh cap
   has no awareness of. Confirmed live, a real bug, not a theoretical
   one: at a genuinely short real browser window, the image rendered
   taller than its actual available space, forcing .modal-citation-
   body's own overflow:auto to scroll vertically — which in turn
   trimmed a real, visible sliver of width for the vertical scrollbar
   itself, reading as "the image causes horizontal scroll" exactly as
   reported, even though the image's own rendered width never actually
   exceeded the body's available width on its own. Fixed at the real
   root cause (the height budget was wrong, not the width) rather than
   suppressing the symptom (e.g. overflow-x: hidden, which would just
   silently crop part of the image instead of genuinely fitting it).
   The subtracted terms below are every other real element sharing
   this modal's own vertical space: var(--modal-citation-masthead-
   height) + var(--space-6) + var(--space-5) (this modal's own real
   top/bottom position offsets, mirroring its own position rule above)
   plus 154px — the topbar's and pagination bar's own real combined
   rendered height (57px each, measured live) plus the body's own
   real padding on both edges (2 × var(--space-5) = 40px) folded into
   one literal, the same "measure the real chrome, don't guess"
   discipline this project's own masthead-offset fixes already
   established elsewhere. Confirmed visually afterward, not just by
   the arithmetic: both real live images (WDFW- and USFWS-sourced,
   the two source formats currently wired) render with real headroom
   to spare at a genuinely short window and still read as a normal,
   legible document page at a tall one — this scales with the real
   viewport height dynamically, unlike a flat percentage, so it stays
   correct across the whole realistic range rather than only the one
   height it was tuned against. */
.modal-citation-image {
  display: block;
  max-height: calc(100vh - var(--modal-citation-masthead-height, 45px) - var(--space-6) - var(--space-5) - 154px);
  width: auto;
}

/* Bottom bar — pagination (real document page number, Reference doc)
   left-aligned, the new zoom control right-aligned, matching the top
   bar's own two-cluster space-between layout (.modal-citation-topbar,
   above) rather than the single centered group this row used to be —
   there are genuinely two independent, unrelated controls sharing this
   row now, not one. Same padding/background/hairline-border treatment
   as the top bar, just on the opposite edge. */
.modal-citation-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-sunken);
  border-top: var(--border-width-hairline) solid var(--color-hairline);
  flex-shrink: 0;
}

/* Pagination's own two arrows are deliberately inert now (Reference
   doc, modal-citation.js's own comment on why) — no separate visual
   "disabled" treatment applied here on purpose, matching the same
   real-focusable-just-unwired precedent as search.html's own Layers/
   Draw buttons (Section 11): these aren't broken, they're a real,
   deliberate prototype boundary, and look identical to every other
   real icon button in this modal (.modal-citation-icon-btn, unchanged)
   rather than visually flagged as different. */
.modal-citation-page-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.modal-citation-page-label {
  min-width: 6.5rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Zoom control (Reference doc, new — styled and focusable only, the
   same inert-but-real treatment as the pagination arrows right next
   to it, no functional zoom behavior wired). Same gap/alignment
   convention as .modal-citation-page-nav for visual symmetry between
   the bar's two halves. */
.modal-citation-zoom-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.modal-citation-zoom-label {
  min-width: 2.5rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--ui-caption-size);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 592px) {
  .modal-citation {
    top: calc(var(--modal-citation-masthead-height, 0px) + var(--space-6));
    right: var(--space-4);
    bottom: var(--space-4);
    left: var(--space-4);
    width: auto;
    max-width: none;
  }
}

/* Inert-citation tooltip — as of Phase 5 batch 9, this now delegates to
   the shared .tooltip-inert rule (components/tooltip-inert.css) instead
   of keeping its own duplicate copy. This was the first, single-
   consumer version of that exact pattern (Reference doc, Section 64);
   extracted once a second real consumer (every other inert control
   site-wide) showed up, per NAMING.md's own "duplicate once, extract at
   the 2nd/3rd" discipline. See tooltip-inert.css for the rule itself. */