/* occupancy.css — the Occupancy (Insights) page. Only the focus-species headline needs bespoke styling;
   the forest plot and table use the shared card/plot chrome. Theme-aware via the app's grey rgba tokens. */

.ik-occ-headline {
  display: flex;
  gap: 1.15rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  margin: 0.35rem 0 0.9rem;
  border: 1px solid rgba(128, 128, 128, 0.22);
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.05);
}
.ik-occ-hl-stat { flex: 0 0 auto; min-width: 118px; text-align: center; }
.ik-occ-hl-psi  { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.ik-occ-hl-psi.ik-occ-hl-na { font-size: 2rem; color: #8a8a8a; }
.ik-occ-hl-ci   { margin-top: 0.25rem; font-size: 0.8rem; color: #888; }

.ik-occ-hl-body  { min-width: 0; }
.ik-occ-hl-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.08rem; font-weight: 600; }
.ik-occ-hl-role {
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  background: rgba(128, 128, 128, 0.16);
  color: #6b6b6b;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* No ch cap: let the verdict fill the headline banner's real width and wrap only at the true edge, rather
   than at a fixed measure that leaves visible whitespace on a wide screen. The short one-line verdict fits
   easily; the longer two-sentence variants (ubiquitous / absent / unstable-fit) use the full width and wrap
   once near the edge. The banner is bounded by the content column, so this doesn't run full-bleed. */
.ik-occ-hl-msg { margin-top: 0.3rem; line-height: 1.5; opacity: 0.85; }

/* Multi-season pooling caveat, shown under the headline when the scope spans >1 season. */
.ik-occ-caveat {
  margin: -0.4rem 0 0.9rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--ik-accent, #cf6819);
  background: rgba(207, 104, 25, 0.07);
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
  line-height: 1.45;
  max-width: 90ch;
}
.ik-occ-caveat .fa, .ik-occ-caveat svg { margin-right: 0.35rem; opacity: 0.75; }

[data-bs-theme="dark"] .ik-occ-hl-role { color: #b8b8b8; }

/* Global "not enough data" gate. */
.ik-occ-gate {
  max-width: 62ch;
  margin: 1.75rem auto;
  padding: 1.5rem 1.75rem;
  text-align: center;
  line-height: 1.55;
  border: 1px dashed rgba(128, 128, 128, 0.35);
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.04);
}
.ik-occ-gate-h { margin-bottom: 0.5rem; font-size: 1.15rem; font-weight: 600; }
.ik-occ-gate-h .fa, .ik-occ-gate-h svg { margin-right: 0.4rem; opacity: 0.7; }

/* Row-click focus + "show the numbers" drill-down. */
.ik-occ-shownum  { float: right; font-size: 0.85rem; font-weight: 500; text-decoration: none; }
.ik-occ-shownum-wrap { margin-top: 0.3rem; overflow: hidden; }   /* contain the floated link (species Occupancy tab) */
.ik-occ-tbl-hint { float: right; font-weight: 400; font-size: 0.78rem; opacity: 0.6; }
.ik-occ-detail-h     { margin: 1.1rem 0 0.4rem; }
.ik-occ-detail-cap   { margin: -0.1rem 0 0.5rem; font-size: 0.85rem; opacity: 0.7; }
.ik-occ-detail-tbl   { font-size: 0.88rem; margin-bottom: 0.4rem; }
.ik-occ-detail-tbl td:not(:first-child), .ik-occ-detail-tbl th:not(:first-child) { text-align: right; }
/* A site the species was NOT detected at — the other half of the naïve rate, and the half a reader
   checking "why only 18 of 36?" came for. Muted rather than hidden or coloured: it is not a warning,
   it is the denominator. */
.ik-occ-site-unseen td { color: var(--bs-secondary-color, #6c757d); }
/* Year-over-year table grouped by season of the year: rows within a season-group sit flush together, and a
   faint rule + a little space precedes each new season-group — so like-season comparisons read at a glance. */
.ik-occ-detail-paired > tbody > tr > td { border-top: none; }
.ik-occ-detail-paired > tbody > tr.ik-occ-grp > td {
  border-top: 1px solid rgba(128, 128, 128, 0.28);
  padding-top: 0.55rem;
}
.ik-occ-detail-intro { line-height: 1.55; margin-bottom: 0.5rem; }
.ik-occ-detail-expl  { line-height: 1.55; margin-bottom: 0.5rem; }
.ik-occ-detail-expl li { margin-bottom: 0.4rem; }
.ik-occ-detail-trend { line-height: 1.55; }
/* Synthesis line tying the two comparison timescales together — set slightly apart + muted. */
.ik-occ-detail-both  { line-height: 1.55; margin-top: 0.6rem; padding-top: 0.5rem;
                       border-top: 1px solid rgba(128, 128, 128, 0.2); opacity: 0.85; }
.ik-occ-detail-note {
  padding: 0.6rem 0.85rem;
  border-left: 3px solid var(--ik-accent, #cf6819);
  background: rgba(207, 104, 25, 0.07);
  border-radius: 0 6px 6px 0;
  line-height: 1.5;
}