/* Layout scaffolding only — .stax-card/.stax-photo/.stax-info/.stax-name/
   .stax-common-name/.subtaxa-grid (bos-taxon.css, already loaded on this
   page) provide the actual card look, reused as-is for "similar look and
   feel to subtaxa" per the design spec. */

.idkey-instance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* default stretch made the shorter panel (usually
    the left one) grow to match its taller sibling's height, leaving a
    block of empty space below its own content */
  /* row-gap (title -> trail -> panels) separate from column-gap (the two
     panels side by side) — a single gap value applied both, stacking a
     24px vertical gap on top of the title's/trail's own margin-bottom and
     leaving a large empty band above the questions even with no
     breadcrumb to show. */
  row-gap: 4px;
  column-gap: 24px;
  margin: 16px 0;
}

.idkey-key-title {
  flex: 0 0 100%;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.idkey-key-lit-citation {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--text-secondary);
  /* Extra space below (beyond .idkey-instance's row-gap, which stays tight
     against the title above) so the citation doesn't crowd the questions
     that follow. */
  margin-bottom: 8px;
}
.idkey-key-lit-citation a { color: var(--link); text-decoration: none; }

.idkey-key-trail {
  flex: 0 0 100%;
  font-size: 13px;
  color: var(--text-secondary);
}

.idkey-key-trail-item {
  background: none;
  border: none;
  padding: 0;
  color: var(--link);
  cursor: pointer;
  font-size: 13px;
}
.idkey-key-trail-item:hover { text-decoration: underline; }

/* The trail's final, non-clickable segment — the key currently being
   viewed, same "path ending in the current page" convention as
   .taxon-breadcrumb-current elsewhere on this page. */
.idkey-key-trail-current { color: var(--text-primary); font-weight: 600; }

/* Two visually distinct panels, 60:40 (left:right) — flex-basis 0 with
   grow ratios 60/40 divides the available space by that ratio regardless
   of content width, then min-width forces a wrap to stacked full-width
   panels once the row gets too narrow for both. */
.idkey-panel {
  background: var(--cream-dark);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  min-width: 280px;
}
.idkey-panel-left { flex: 60 1 0; }
.idkey-panel-right {
  flex: 40 1 0;
  /* By the time a visitor has scrolled down into tab content, .taxon-
     breadcrumb (bos-taxon.css) has already switched to its own
     position:fixed pinned mode (bttInitBreadcrumbPin(), bos-taxon-
     tabs.js) at top: var(--site-header-h, 96px) — same offset #bttDrawer
     above uses, but that breadcrumb bar itself now also occupies ~62px
     there. #bttPage .specimen-filters (bos-taxon-tabs.css) already solves
     this identical problem the same way — stack the breadcrumb's own
     literal height on top of the header offset, rather than sticking
     underneath it. */
  position: sticky;
  top: calc(var(--site-header-h, 96px) + 62px);
  max-height: calc(100vh - var(--site-header-h, 96px) - 62px - 24px);
  overflow-y: auto;
  /* Themed scrollbar, not the browser default — same tokens/pattern as
     #bttDrawer .btt-drawer-inner (bos-taxon-tabs.css), this page's other
     vertically-scrolling element. */
  scrollbar-width: thin;
  scrollbar-color: var(--stone-dark, #8b96ac) var(--cream-dark, #16202f);
}
.idkey-panel-right::-webkit-scrollbar { width: 8px; }
.idkey-panel-right::-webkit-scrollbar-track { background: var(--cream-dark, #16202f); }
.idkey-panel-right::-webkit-scrollbar-thumb { background: var(--stone-dark, #8b96ac); border-radius: 4px; }
.idkey-panel-right::-webkit-scrollbar-thumb:hover { background: var(--navy, #5b8dee); }

.idkey-panel-heading {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-strong);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

/* .subtaxa-grid's shared rule (bos-taxon.css) is a fixed column COUNT keyed
   to viewport-width breakpoints, sized for the page's wide species-section
   area. This panel isn't full page width and doesn't track those
   breakpoints, so a fixed count either crams cards too narrow (this panel
   width, more columns than fit well) or leaves unused track space when a
   result set is short of that count. auto-fit sizes columns off the
   panel's own actual width and collapses columns with no card into it
   instead of reserving their space — the two-class selector outweighs the
   shared rule's specificity (including inside its media queries), so this
   wins at every viewport width without editing the shared class. */
.idkey-grid .subtaxa-grid {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

/* Each answered-or-current question, fully expanded and stacked — same
   spacing/divider pattern as .idkey-character below, for the "look like
   the matrix" consistency Nicky asked for. */
.idkey-question-block {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.idkey-question-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.idkey-question { margin-bottom: 12px; }
.idkey-question-prompt { font-weight: 600; margin: 6px 0; }

/* Position-in-the-displayed-list badge — Q1, Q2… — shared by every
   decision-tree question block (answered or current) and every matrix
   character. */
.idkey-q-number { color: var(--link); font-weight: 700; margin-right: 4px; }
.idkey-question-img,
.idkey-answer-img { max-width: 200px; display: block; }

/* Hover-revealed zoom trigger, top-right of the image — margin-bottom
   moved here from .idkey-question-img/.idkey-answer-img since the image
   is now wrapped rather than a direct sibling. */
/* display:block (not inline-block) so this stacks above the following
   text the same way the plain block <img> did before it was wrapped —
   inline-block flowed inline with the answer's text span instead of
   forcing a line break. width:fit-content keeps it shrink-wrapped to the
   image's own size regardless, so the zoom button's absolute top-right
   positioning still anchors to the image's corner, not a full-width box. */
.idkey-img-zoom-wrap { position: relative; display: block; width: fit-content; margin-bottom: 6px; }
.idkey-img-zoom-btn {
  position: absolute;
  top: 4px; right: 4px;
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.idkey-img-zoom-wrap:hover .idkey-img-zoom-btn,
.idkey-img-zoom-wrap:focus-within .idkey-img-zoom-btn { display: flex; }

/* Single-image overlay — deliberately separate from the page's own
   #lightbox (bos-common.css/bos-taxon-tabs.js), which is built around a
   multi-photo gallery array with prev/next + pinch-zoom that doesn't fit
   these standalone illustration images. Same visual language (dark
   backdrop, close-button style) as that lightbox for consistency. */
.idkey-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(5, 10, 18, 0.97);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.idkey-lightbox.open { display: flex; }
.idkey-lightbox img {
  max-width: calc(100vw - 80px);
  max-height: calc(100vh - 80px);
  object-fit: contain;
  cursor: default;
  transition: transform 0.1s ease-out;
}
/* Once zoomed past 1x, the image becomes draggable — grab/grabbing cursor
   signals that, and dropping the transition while actively dragging
   keeps the image tracking the cursor immediately instead of lagging. */
.idkey-lightbox img.idkey-lightbox-zoomed { cursor: grab; }
.idkey-lightbox img.idkey-lightbox-dragging { cursor: grabbing; transition: none; }
.idkey-lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 30px;
  cursor: pointer;
  font-family: inherit;
}
.idkey-lightbox-close:hover { color: #fff; }

.idkey-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.idkey-answer-btn {
  flex: 1 1 auto;
  min-width: 120px;
  border: 1px solid var(--border-strong);
  background: var(--cream-dark);
  color: var(--text-primary);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.idkey-answer-btn:hover { border-color: var(--link); }
.idkey-answer-btn--active { border-color: var(--link); background: rgba(91, 141, 238, 0.15); }

/* .idkey-card is applied alongside .stax-card on every result card,
   including <button> ones (drill-in leaves) — .stax-card's own rules
   assume an <a>, so reset the button-specific defaults here. cursor is
   set per-variant below, not here — a shared rule setting cursor:pointer
   here would outrank .idkey-card--info's cursor:default by specificity
   (two classes vs one) regardless of source order, since drill and info
   never apply to the same card. */
.idkey-card.idkey-card--drill,
.idkey-card.idkey-card--info {
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  padding: 0;
  font: inherit;
  display: block;
}
.idkey-card--drill { cursor: pointer; }
.idkey-card--info { opacity: 0.75; cursor: default; }

/* Same pill shape/sizing as .stax-count (bos-taxon.css, the established
   "small badge next to a card's name" convention) — --link instead of
   --stone-dark's muted tone since this marks an interactive affordance
   (leads to more questions), not a plain count. */
.idkey-drill-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--link);
  /* var(--cream-dark) matched .stax-card's own background (#bttPage
     .stax-card, bos-taxon-tabs.css), so the badge blended straight into
     the card instead of standing out. Same translucent-navy tint as
     .idkey-answer-btn--active for a background that's actually visible
     against the card. */
  background: rgba(91, 141, 238, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.5;
  white-space: nowrap;
}

.idkey-thumb-img { width: 100%; height: 100%; object-fit: cover; }

.idkey-empty { color: var(--stone-dark); font-style: italic; padding: 12px 0; }
.idkey-done { font-style: italic; color: var(--text-secondary); }

.idkey-character {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.idkey-character:last-child { border-bottom: none; }