/* bio-kg-insights.css — the BioKGInsights ("What I Know about X") overlay.
 *
 * EXTRACTED from admin-documentation.css by converging-vault-destinations S3-D3
 * (2026-07-25, Route B). The .bkg-* rules were born inside the ADMIN docs-library
 * stylesheet (jaunty-chasing-bubble S4) because the control's only two call sites
 * were admin/desktop surfaces. Route B puts the control on the family-facing
 * biography surface, which meant produced story pages would have had to load an
 * ADMIN stylesheet to get one modal — the kind of thing that is cheap now and
 * expensive later (S1-D4 § 3 caveat, verbatim).
 *
 * So the component's styles now live with the component: bio-kg-insights.js pairs
 * with bio-kg-insights.css, and BOTH load on the app shell AND on the 26 produced
 * story pages. admin-documentation.css keeps only its actual admin-docs rules.
 *
 * Contains the desktop centre-panel layout AND the .bkg-mobile bottom-sheet
 * layout (selected at bio-kg-insights.js via FFAMobile.isMobile()).
 */

/* ──────────────────────────────────────────────────────────────────────
 * BioKGInsights modal overlay (.bkg-*)
 * Used by app/js/features/bio-kg-insights.js
 * ────────────────────────────────────────────────────────────────────── */

.bkg-overlay {
  position: fixed;
  inset: 0;
  z-index: 10500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bkg-overlay.bkg-open {
  opacity: 1;
  pointer-events: auto;
}

.bkg-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 36, 0.55);
  backdrop-filter: blur(4px);
}

.bkg-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 10px));
  width: min(720px, calc(100vw - 32px));
  max-height: min(82vh, 900px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  overflow: hidden;
  transition: transform 0.22s ease;
}

.bkg-overlay.bkg-open .bkg-panel {
  transform: translate(-50%, -50%);
}

.bkg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem 0.9rem;
  background: linear-gradient(135deg, #6a3aa8, #8e60d4);
  color: #fff;
}

.bkg-title-wrap {
  flex: 1;
  min-width: 0;
}

.bkg-eyebrow {
  font-size: calc(0.7rem * var(--type-scale, 1));
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.15rem;
}

.bkg-title {
  margin: 0;
  font-size: calc(1.35rem * var(--type-scale, 1));
  line-height: 1.2;
  font-weight: 600;
  word-break: break-word;
}

.bkg-subtitle {
  margin-top: 0.3rem;
  font-size: calc(0.85rem * var(--type-scale, 1));
  opacity: 0.85;
}

/* The Living Portrait's one voice — a hero Say It in the fixed header
   (unifying-portrait-voice S2, Joe R4: "a large SayIt in the fixed top panel of that
   modal, always visible"). The header is outside .bkg-body, so it never scrolls away. */
.bkg-sayit-slot {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
}
.bkg-sayit-slot:empty { display: none; }

.bkg-close {
  appearance: none;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: calc(1.3rem * var(--type-scale, 1));
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.bkg-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.bkg-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.4rem;
  color: #1c1430;
  font-size: calc(0.92rem * var(--type-scale, 1));
  line-height: 1.45;
}

.bkg-loading,
.bkg-empty,
.bkg-error {
  margin: 0;
  padding: 0.5rem 0;
  color: #4b3a6e;
}

.bkg-error-detail {
  font-family: SFMono-Regular, Consolas, monospace;
  font-size: calc(0.78rem * var(--type-scale, 1));
  background: #f5f3fa;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  margin-top: 0.4rem;
}

.bkg-bucket {
  margin: 0 0 1.2rem;
}

.bkg-bucket:last-child {
  margin-bottom: 0;
}

.bkg-bucket-label {
  margin: 0 0 0.5rem;
  font-size: calc(0.8rem * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6a3aa8;
  font-weight: 700;
  border-bottom: 1px solid #ece4f8;
  padding-bottom: 0.3rem;
}

.bkg-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bkg-insight {
  padding: 0.7rem 0.85rem;
  background: #faf8fd;
  border: 1px solid #ece4f8;
  border-radius: 8px;
}

.bkg-insight-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.bkg-insight-label {
  flex: 1;
  font-weight: 600;
  font-size: calc(0.88rem * var(--type-scale, 1));
  color: #2c1f4d;
}

.bkg-pill {
  display: inline-block;
  font-size: calc(0.7rem * var(--type-scale, 1));
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #eee5fb;
  color: #4f2f8a;
  white-space: nowrap;
}

.bkg-pill-rel {
  background: #e6f4ec;
  color: #2a6b48;
}

.bkg-insight-value {
  color: #2a213d;
  font-size: calc(0.92rem * var(--type-scale, 1));
  margin-bottom: 0.35rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bkg-insight-meta {
  font-size: calc(0.75rem * var(--type-scale, 1));
  color: #6b5e8a;
}

.bkg-edges {
  margin-top: 0.4rem;
}

.bkg-edge-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1rem;
}

.bkg-edge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(0.82rem * var(--type-scale, 1));
  padding: 0.35rem 0.55rem;
  background: #f5f3fa;
  border-radius: 6px;
}

.bkg-edge-type {
  color: #4b3a6e;
  word-break: break-word;
}

.bkg-edge-count {
  font-weight: 700;
  color: #6a3aa8;
}

.bkg-footer {
  padding: 0.7rem 1.4rem 1rem;
  border-top: 1px solid #ece4f8;
  background: #faf8fd;
}

.bkg-footer-note {
  color: #6b5e8a;
  font-size: calc(0.78rem * var(--type-scale, 1));
  line-height: 1.45;
}

/* ──────────────────────────────────────────────────────────────────────
 * Merged Living Portrait surface (collapsing-portrait-readouts S1)
 * Narrative layer (.lp-*) over the claim-record layer (.bkg-record).
 * The .lp-* classes are emitted by FFALivingPortrait.renderBody /
 * FFAAttributionFootnote (js/core/utils.js) — styled here because this
 * stylesheet loads everywhere the overlay does (app shell + story pages).
 * ────────────────────────────────────────────────────────────────────── */

.lp-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-size: calc(0.82rem * var(--type-scale, 1));
}

.lp-banner-new,
.lp-banner-stale {
  background: #fdf6e7;
  border: 1px solid #f0dfb4;
  color: #7a5c14;
}

.lp-banner-fresh {
  background: #f0f7f2;
  border: 1px solid #d4e8dc;
  color: #2a6b48;
}

/* The vault is composing this portrait right now, unasked (auto-compose on
   open — magnitude-of-staleness S2/S3 D6). Reads as calm activity rather than
   as a warning: nothing is wrong, and the member did not ask for this, so it
   must not look like something they need to act on. Carries no button, so it
   is the one banner variant that fills its full width. */
.lp-banner-updating {
  background: #f3f0fa;
  border: 1px solid #ddd4ee;
  color: #533089;
  justify-content: flex-start;
}

.lp-recompose {
  appearance: none;
  border: none;
  background: #6a3aa8;
  color: #fff;
  font-weight: 600;
  font-size: calc(0.78rem * var(--type-scale, 1));
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.lp-recompose:hover {
  background: #5a2f92;
}

.lp-recompose-ghost {
  background: transparent;
  color: #2a6b48;
  border: 1px solid #b9d9c6;
}

.lp-recompose-ghost:hover {
  background: #e2f0e8;
}

.lp-prose {
  margin-bottom: 1.2rem;
}

.lp-seg {
  margin: 0 0 1rem;
}

.lp-seg-label {
  margin: 0 0 0.35rem;
  font-size: calc(0.8rem * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6a3aa8;
  font-weight: 700;
}

.lp-seg-body {
  margin: 0;
  color: #2a213d;
  font-size: calc(0.95rem * var(--type-scale, 1));
  line-height: 1.6;
}

/* One paragraph per stored paragraph (unifying-portrait-voice S4, R10) — a segment
   used to be ONE <p>, 38 sentences long for Chris Ferguson's work section. */
.lp-para {
  margin: 0 0 0.8em;
}

.lp-para:last-child {
  margin-bottom: 0;
}

.lp-fn {
  cursor: pointer;
  color: #6a3aa8;
  font-weight: 700;
  font-size: 0.72em;
  padding: 0 0.1em;
}

/* A finger, not a cursor (Greg G-148, FergiPhone 2026-10-24): the markers measured 17–19 × 13 px, so [1][2][3]
   in a row were three targets a fingertip could not tell apart. On touch each marker owns a ≥24 px-wide slot and a
   44 px-tall hit band (the ::after), without moving a single line of the prose. */
/* …and a mouse gets the WCAG 2.5.8 minimum (24 px) too: on desktop [1][2][3] in a row were 17–19 × 13 px. */
.lp-fn { position: relative; display: inline-block; min-width: 24px; text-align: center; }
.lp-fn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 24px; transform: translateY(-50%); }
@media (pointer: coarse) {
  .lp-fn { position: relative; display: inline-block; min-width: 24px; text-align: center; padding: 0 0.15em; }
  .lp-fn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}

.lp-fn:hover,
.lp-fn:focus {
  color: #4f2f8a;
  text-decoration: underline;
}

.lp-fallback {
  color: #4b3a6e;
  font-size: calc(0.92rem * var(--type-scale, 1));
  line-height: 1.55;
}

.lp-note {
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  background: #f5f3fa;
  border: 1px solid #ece4f8;
  color: #6b5e8a;
  font-size: calc(0.8rem * var(--type-scale, 1));
  margin-bottom: 1rem;
}

.lp-meta {
  margin: 0.4rem 0 1.1rem;
  color: #8a7fa8;
  font-size: calc(0.74rem * var(--type-scale, 1));
}

/* The claim record — the re-hosted KG-Insights detail layer. */
.bkg-record {
  border-top: 2px solid #ece4f8;
  padding-top: 0.9rem;
}

.bkg-record-label {
  margin: 0 0 0.9rem;
  font-size: calc(0.86rem * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4f2f8a;
  font-weight: 700;
}

.bkg-insight-linked {
  cursor: pointer;
}

.bkg-insight-linked:hover,
.bkg-insight-linked:focus {
  border-color: #c9b3ec;
  background: #f5effd;
  outline: none;
}

/* Per-claim source footnote popover (FFAAttributionFootnote, utils.js). */
.lp-fn-popover {
  z-index: 10600; /* above .bkg-overlay (10500) */
  width: min(360px, calc(100vw - 24px));
  background: #fff;
  border: 1px solid #ece4f8;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(20, 16, 36, 0.24);
  padding: 0.85rem 0.95rem 0.9rem;
  font-size: calc(0.82rem * var(--type-scale, 1));
  color: #2a213d;
}

.lp-fn-close {
  appearance: none;
  border: none;
  background: transparent;
  color: #6b5e8a;
  font-size: calc(1.05rem * var(--type-scale, 1));
  line-height: 1;
  cursor: pointer;
  float: right;
  padding: 0 0 0.2rem 0.4rem;
}

.lp-fn-claim {
  font-weight: 600;
  color: #2c1f4d;
  margin-bottom: 0.4rem;
  overflow-wrap: anywhere;
}

.lp-fn-srccount {
  font-size: calc(0.72rem * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6a3aa8;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.lp-fn-srclist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-fn-src {
  padding: 0.5rem 0.6rem;
  background: #faf8fd;
  border: 1px solid #ece4f8;
  border-radius: 7px;
}

.lp-fn-src-label {
  font-weight: 600;
  color: #2c1f4d;
  overflow-wrap: anywhere;
}

.lp-fn-src-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.lp-fn-chip {
  display: inline-block;
  font-size: calc(0.66rem * var(--type-scale, 1));
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #eee5fb;
  color: #4f2f8a;
  white-space: nowrap;
}

.lp-fn-chip-rel {
  background: #e6f4ec;
  color: #2a6b48;
}

.lp-fn-src-link {
  display: inline-block;
  margin-top: 0.35rem;
  color: #6a3aa8;
  font-weight: 600;
  text-decoration: none;
}

.lp-fn-src-link:hover {
  text-decoration: underline;
}

.lp-fn-empty {
  margin: 0;
  color: #6b5e8a;
}

/* ──────────────────────────────────────────────────────────────────────
 * Mobile bottom-sheet layout
 * ────────────────────────────────────────────────────────────────────── */

.bkg-overlay.bkg-mobile .bkg-panel {
  top: auto;
  bottom: 0;
  left: 0;
  transform: translateY(20px);
  width: 100vw;
  max-width: 100vw;
  max-height: 85vh;
  border-radius: 18px 18px 0 0;
}

.bkg-overlay.bkg-mobile.bkg-open .bkg-panel {
  transform: translateY(0);
}

.bkg-overlay.bkg-mobile .bkg-header {
  padding: 1rem 1.1rem 0.8rem;
  align-items: center;
}

.bkg-overlay.bkg-mobile .bkg-body {
  padding: 1rem 1.1rem;
  -webkit-overflow-scrolling: touch;
}

.bkg-overlay.bkg-mobile .bkg-footer {
  padding: 0.6rem 1.1rem 0.9rem;
}

.bkg-overlay.bkg-mobile .bkg-edge-list {
  grid-template-columns: 1fr;
}

/* Touch floors on a finger (Greg 2026-10-17, FergiPhone + FergiPAD probes): the
   portrait's close was 32 px and Update Portrait 29 px tall — under the 44 px floor.
   The desktop keeps its drawn sizes. The footnote markers sit INSIDE running prose
   (the inline-target exception), so they keep their size and gain a taller,
   invisible hit area that does not move the text. */
@media (pointer: coarse) {
  .bkg-close { width: 44px; height: 44px; }
  .lp-recompose { min-height: 44px; }
  .lp-fn { position: relative; }
  .lp-fn::after { content: ''; position: absolute; left: -2px; right: -2px; top: -12px; bottom: -12px; }
}

/* R17 (settling-prerelease-rulings S4): on the desktop .bkg-overlay is clipped to the App Panel so the Control
   Panel stays live. The rule lives in ONE place, css/modal-foundation.css § "Surfaces that live in the App
   Panel"; do not restate it here. */