/**
 * What-We-Know — The Cartographer of a Life (Modal Renaissance S2).
 *
 * Born lucid-sourcing-constellation S3; retuned 2026-07-21 onto the
 * .ffv-theme-kg star-chart tokens (forging-modal-renaissance S2, plan D3).
 * The KG's view of ANY person: a star-chart plate — cited knowledge laid out
 * like a night sky, citation numbers as faint stars that brighten when you
 * reach for them, source filters as constellation toggles.
 *
 * Every class is unchanged (`.wwk-*` namespace, same markup contract from
 * what-we-know-renderer.js); only the dress moved. Colors fall back to the
 * chart palette so the renderer's no-orchestrator panel path reads the same.
 */

/* ── root + header ────────────────────────────────────────────────────── */

.wwk-root {
  padding: 20px 22px 32px;
  font-family: var(--ffv-body-font, 'Source Sans 3', 'Inter', sans-serif);
  font-size: calc(15px * var(--type-scale, 1));
  line-height: 1.45;
  color: var(--ffv-chart-text, #dce9f7);
}

.wwk-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(64, 226, 210, 0.16);
}

.wwk-person-photo,
.wwk-person-photo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(53, 170, 232, 0.25), rgba(157, 95, 224, 0.25));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ffv-starlight, #bfe7ff);
  font-size: calc(28px * var(--type-scale, 1));
  font-weight: 600;
  border: 1px solid rgba(53, 170, 232, 0.45);
  box-shadow: 0 0 18px rgba(53, 170, 232, 0.22);
}

.wwk-header-body {
  flex: 1;
  min-width: 0;
}

.wwk-person-name {
  font-family: var(--ffv-display-font, 'Playfair Display', Georgia, serif);
  font-size: calc(24px * var(--type-scale, 1));
  font-weight: 600;
  margin: 0 0 4px;
  color: #eaf4ff;
  letter-spacing: 0.012em;
  text-shadow: 0 0 22px rgba(53, 170, 232, 0.25);
}

.wwk-header-stats {
  font-size: calc(13px * var(--type-scale, 1));
  color: var(--ffv-chart-muted, #93aecb);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.wwk-stat-sep {
  opacity: 0.5;
}

/* the soul cue — the plate's engraved motto */
.wwk-soul-cue {
  margin: 2px 0 6px;
  font-size: calc(12px * var(--type-scale, 1));
  font-style: italic;
  letter-spacing: 0.06em;
  color: rgba(64, 226, 210, 0.72);
}

.wwk-person-bio {
  font-size: calc(13px * var(--type-scale, 1));
  color: var(--ffv-chart-muted, #93aecb);
  margin: 6px 0 0;
  line-height: 1.5;
}

.wwk-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(53, 170, 232, 0.16);
  color: #8fd0f5;
  font-size: calc(11px * var(--type-scale, 1));
  font-weight: 500;
}

.wwk-badge-muted {
  background: rgba(147, 174, 203, 0.14);
  color: var(--ffv-chart-muted, #93aecb);
}

/* ── filter chips — constellation toggles ─────────────────────────────── */

.wwk-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 0 16px;
  border-bottom: 1px solid rgba(64, 226, 210, 0.12);
  margin-bottom: 16px;
}

.wwk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 14px;
  background: rgba(53, 170, 232, 0.08);
  color: #a9d4f2;
  border: 1px solid rgba(53, 170, 232, 0.22);
  font-size: calc(12px * var(--type-scale, 1));
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* each constellation carries its guide star */
.wwk-chip::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(191, 231, 255, 0.45);
  box-shadow: 0 0 4px rgba(191, 231, 255, 0.35);
  transition: background 0.15s, box-shadow 0.15s;
}

.wwk-chip:hover {
  background: rgba(53, 170, 232, 0.16);
  border-color: rgba(53, 170, 232, 0.45);
}

.wwk-chip.active {
  background: rgba(53, 170, 232, 0.3);
  color: #eaf6ff;
  border-color: rgba(64, 226, 210, 0.6);
  box-shadow: 0 0 14px rgba(53, 170, 232, 0.28);
}

.wwk-chip.active::before {
  background: var(--ffv-aqua, #40e2d2);
  box-shadow: 0 0 6px rgba(64, 226, 210, 0.8);
}

.wwk-chip-count {
  background: rgba(191, 231, 255, 0.14);
  padding: 0 5px;
  border-radius: 8px;
  font-size: calc(11px * var(--type-scale, 1));
  font-weight: 600;
}

.wwk-chip:not(.active) .wwk-chip-count {
  background: rgba(53, 170, 232, 0.14);
}

/* ── sections ─────────────────────────────────────────────────────────── */

.wwk-section {
  margin-bottom: 12px;
  border: 1px solid rgba(53, 170, 232, 0.16);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.025);
}

.wwk-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(53, 170, 232, 0.07);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.wwk-section-header:hover {
  background: rgba(53, 170, 232, 0.13);
}

.wwk-section-caret {
  font-size: calc(11px * var(--type-scale, 1));
  color: rgba(64, 226, 210, 0.7);
  width: 10px;
  display: inline-block;
}

.wwk-section-title {
  flex: 1;
  font-size: calc(14px * var(--type-scale, 1));
  font-weight: 600;
  margin: 0;
  color: #d7ebfb;
  letter-spacing: 0.02em;
}

.wwk-section-count {
  background: rgba(53, 170, 232, 0.16);
  color: #8fd0f5;
  font-size: calc(11px * var(--type-scale, 1));
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.wwk-section-body {
  padding: 6px 0;
}

.wwk-collapsed .wwk-section-body {
  display: none;
}

/* ── claim row ────────────────────────────────────────────────────────── */

.wwk-claim {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(191, 231, 255, 0.05);
  cursor: pointer;
  transition: background 0.12s;
}

.wwk-claim:hover {
  background: rgba(53, 170, 232, 0.07);
}

.wwk-claim:last-child {
  border-bottom: 0;
}

.wwk-claim-pred {
  font-size: calc(11px * var(--type-scale, 1));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(64, 226, 210, 0.8);
  margin-bottom: 3px;
}

.wwk-claim-value {
  font-size: calc(14px * var(--type-scale, 1));
  line-height: 1.5;
  color: var(--ffv-chart-text, #dce9f7);
  margin-bottom: 5px;
}

.wwk-claim-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: calc(11px * var(--type-scale, 1));
  color: rgba(147, 174, 203, 0.75);
}

.wwk-asserted {
  font-variant-numeric: tabular-nums;
}

/* ── citation chip — a faint star that brightens when reached for ─────── */

.wwk-cite-chip {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: rgba(191, 231, 255, 0.55);
  border: 0;
  padding: 0 6px;
  height: 18px;
  font-size: calc(11px * var(--type-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  cursor: pointer;
  vertical-align: baseline;
  margin-left: 2px;
  text-shadow: 0 0 6px rgba(53, 170, 232, 0.3);
  transition: color 0.15s, background 0.15s, text-shadow 0.15s;
}

.wwk-cite-chip:hover {
  color: #eaf6ff;
  background: rgba(53, 170, 232, 0.2);
  text-shadow: 0 0 10px rgba(127, 212, 255, 0.9), 0 0 20px rgba(53, 170, 232, 0.5);
}

/* ── confidence badge ─────────────────────────────────────────────────── */

.wwk-conf {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: calc(10px * var(--type-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(147, 174, 203, 0.14);
  color: var(--ffv-chart-muted, #93aecb);
}

.wwk-conf-high { background: rgba(64, 226, 210, 0.16);  color: #7fe8db; }
.wwk-conf-med  { background: rgba(240, 198, 106, 0.16); color: #ecd39a; }
.wwk-conf-low  { background: rgba(239, 99, 132, 0.16);  color: #f2a3b4; }

/* ── citations (bottom) — the star catalog ────────────────────────────── */

.wwk-citations {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(64, 226, 210, 0.14);
}

.wwk-citations .wwk-section-title {
  margin-bottom: 10px;
}

.wwk-citation-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: none;
}

.wwk-cit {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border: 1px solid rgba(53, 170, 232, 0.12);
  border-radius: 8px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.3s;
}

.wwk-cit:hover {
  background: rgba(53, 170, 232, 0.08);
  border-color: rgba(53, 170, 232, 0.35);
}

/* the star flare — extends the original flash into a bloom of starlight */
.wwk-cit-flash {
  animation: wwk-star-flare 1.4s ease-out;
  border-color: rgba(127, 212, 255, 0.85) !important;
}

@keyframes wwk-star-flare {
  0% {
    background: rgba(127, 212, 255, 0.3);
    box-shadow: 0 0 26px rgba(127, 212, 255, 0.55), inset 0 0 14px rgba(53, 170, 232, 0.3);
  }
  100% {
    background: rgba(53, 170, 232, 0.06);
    box-shadow: 0 0 0 rgba(127, 212, 255, 0), inset 0 0 0 rgba(53, 170, 232, 0);
  }
}

.wwk-cit-flash .wwk-cit-number {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(191, 231, 255, 1), 0 0 24px rgba(53, 170, 232, 0.8);
}

.wwk-cit-number {
  font-weight: 700;
  color: rgba(191, 231, 255, 0.66);
  font-size: calc(13px * var(--type-scale, 1));
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-shadow: 0 0 7px rgba(53, 170, 232, 0.4);
  transition: color 0.15s, text-shadow 0.15s;
}

.wwk-cit:hover .wwk-cit-number {
  color: #eaf6ff;
  text-shadow: 0 0 10px rgba(127, 212, 255, 0.9), 0 0 20px rgba(53, 170, 232, 0.5);
}

.wwk-cit-label {
  font-size: calc(11px * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(64, 226, 210, 0.72);
  font-weight: 600;
  padding: 1px 8px;
  background: rgba(64, 226, 210, 0.08);
  border-radius: 8px;
}

.wwk-cit-link {
  color: #7fc4e8;
  text-decoration: none;
  font-weight: 500;
}

.wwk-cit-link:hover {
  text-decoration: underline;
}

.wwk-cit-url {
  font-size: calc(11px * var(--type-scale, 1));
  color: rgba(147, 174, 203, 0.65);
  flex-basis: 100%;
  word-break: break-all;
}

.wwk-cit-title {
  font-weight: 500;
  color: var(--ffv-chart-text, #dce9f7);
}

.wwk-cit-raw {
  font-size: calc(12px * var(--type-scale, 1));
  color: var(--ffv-chart-muted, #93aecb);
  flex-basis: 100%;
}

/* ── source drawer ────────────────────────────────────────────────────── */

.wwk-drawer {
  position: fixed;
  inset: 0;
  /* Above its own star-chart child (bespoke band 10330), below Fergi
     (10350) per the universal z-cap. Was 10010 — buried behind the bespoke
     modal it is launched from (defect found + fixed, Modal Renaissance S2). */
  z-index: 10340;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.wwk-drawer.open {
  pointer-events: auto;
  opacity: 1;
}

.wwk-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 10, 20, 0.5);
}

.wwk-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 90vw);
  background: var(--ffv-glass-bg, linear-gradient(145deg,
      rgba(12, 20, 36, 0.97), rgba(16, 26, 51, 0.98) 38%,
      rgba(13, 18, 41, 0.98) 72%, rgba(22, 18, 58, 0.97)));
  border-left: 1px solid rgba(53, 170, 232, 0.3);
  box-shadow: -8px 0 40px rgba(4, 8, 18, 0.6), -1px 0 18px rgba(53, 170, 232, 0.12);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.24s ease-out;
  color: var(--ffv-chart-text, #dce9f7);
}

.wwk-drawer.open .wwk-drawer-panel {
  transform: translateX(0);
}

/* Seated BELOW the Header on the desktop shell (routing-modal-cohort S1). The drawer is
   now a ModalManager window, so its z is the window band's (10300+, by focus order), and
   it always opens from a Fergi bespoke window — which lifts the Header to 10335 (styles.css
   § the header lifted above the overlays). At its old fixed 10340 the drawer covered the
   Header; in the band the Header covers the drawer's top, ✕ included (measured: the ✕ hit
   #userMenuToggle). The panel is absolutely placed inside its own fixed root, not
   FFASpatial-seated, so moving it down is safe. The phone keeps its own geometry. */
body:not(.has-mobile-tab-bar) .wwk-drawer-panel {
  top: var(--nav-height, 60px);
  height: calc(100% - var(--nav-height, 60px));
}

.wwk-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(64, 226, 210, 0.14);
  background: linear-gradient(90deg, rgba(53, 170, 232, 0.1), rgba(157, 95, 224, 0.08));
}

.wwk-drawer-title {
  margin: 0;
  font-family: var(--ffv-display-font, 'Playfair Display', Georgia, serif);
  font-size: calc(16px * var(--type-scale, 1));
  font-weight: 600;
  color: #dff1ff;
}

.wwk-drawer-close {
  background: transparent;
  border: 0;
  font-size: calc(18px * var(--type-scale, 1));
  color: var(--ffv-chart-muted, #93aecb);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}

.wwk-drawer-close:hover {
  color: #eaf6ff;
  background: rgba(53, 170, 232, 0.18);
}

.wwk-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  font-size: calc(14px * var(--type-scale, 1));
  line-height: 1.55;
}

.wwk-drawer-label {
  font-size: calc(11px * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(64, 226, 210, 0.7);
  font-weight: 600;
  margin-bottom: 4px;
}

.wwk-drawer-title-main {
  font-size: calc(16px * var(--type-scale, 1));
  font-weight: 600;
  margin: 2px 0 12px;
  color: #eaf4ff;
}

.wwk-drawer-link {
  margin-bottom: 16px;
}

.wwk-drawer-link a {
  color: #7fc4e8;
  font-size: calc(13px * var(--type-scale, 1));
  word-break: break-all;
}

.wwk-drawer-claim {
  padding: 12px;
  background: rgba(53, 170, 232, 0.07);
  border: 1px solid rgba(53, 170, 232, 0.14);
  border-radius: 8px;
  margin-bottom: 16px;
}

.wwk-drawer-pred {
  font-size: calc(11px * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(64, 226, 210, 0.8);
  font-weight: 600;
  margin-bottom: 4px;
}

.wwk-drawer-value {
  font-size: calc(14px * var(--type-scale, 1));
  color: var(--ffv-chart-text, #dce9f7);
  margin-bottom: 8px;
}

.wwk-drawer-quoteblock {
  margin-bottom: 16px;
}

.wwk-drawer-quote {
  font-style: italic;
  padding: 10px 14px;
  border-left: 3px solid var(--ffv-azure, #35aae8);
  background: rgba(53, 170, 232, 0.07);
  border-radius: 0 6px 6px 0;
  color: var(--ffv-chart-text, #dce9f7);
}

.wwk-drawer-quote[data-loading="1"] {
  color: rgba(147, 174, 203, 0.65);
  font-style: normal;
}

.wwk-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: calc(12px * var(--type-scale, 1));
  color: var(--ffv-chart-muted, #93aecb);
  margin-bottom: 16px;
}

.wwk-drawer-meta code {
  background: rgba(53, 170, 232, 0.12);
  color: #8fd0f5;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: calc(11px * var(--type-scale, 1));
}

.wwk-drawer-raw pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: calc(11px * var(--type-scale, 1));
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(53, 170, 232, 0.1);
  padding: 10px;
  border-radius: 6px;
  color: var(--ffv-chart-muted, #93aecb);
}

/* ── blocked state ────────────────────────────────────────────────────── */

.wwk-blocked {
  padding: 60px 32px;
  text-align: center;
  color: var(--ffv-chart-muted, #93aecb);
}

.wwk-blocked-icon {
  font-size: calc(48px * var(--type-scale, 1));
  margin-bottom: 16px;
}

.wwk-blocked h2 {
  font-family: var(--ffv-display-font, 'Playfair Display', Georgia, serif);
  font-size: calc(20px * var(--type-scale, 1));
  margin: 0 0 12px;
  color: #eaf4ff;
}

.wwk-blocked p {
  margin: 6px 0;
  line-height: 1.55;
}

.wwk-blocked-small {
  font-size: calc(13px * var(--type-scale, 1));
}

/* ── Supporting Documents shelf (S4 D5) ───────────────────────────────── */

.wwk-supporting-docs {
  margin-top: 18px;
}

.wwk-supporting-docs:empty {
  display: none;
}

.wwk-supporting-docs-title {
  margin: 0 0 8px;
  font-size: calc(14px * var(--type-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(220, 233, 247, 0.7);
}

.wwk-doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wwk-doc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(53, 170, 232, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.wwk-doc:hover {
  background: rgba(53, 170, 232, 0.08);
  border-color: rgba(53, 170, 232, 0.35);
}

.wwk-doc-thumb,
.wwk-doc-thumb-placeholder {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(11px * var(--type-scale, 1));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(191, 231, 255, 0.5);
  object-fit: cover;
}

.wwk-doc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wwk-doc-title {
  font-size: calc(0.92rem * var(--type-scale, 1));
  font-weight: 600;
  color: var(--ffv-chart-text, #dce9f7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wwk-doc-description {
  font-size: calc(0.8rem * var(--type-scale, 1));
  color: rgba(220, 233, 247, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wwk-doc-meta {
  display: flex;
  gap: 8px;
  font-size: calc(0.72rem * var(--type-scale, 1));
  color: rgba(220, 233, 247, 0.55);
}

.wwk-doc-role {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.wwk-doc-role-corroborating { background: rgba(140, 200, 255, 0.18); color: #b6dcff; }
.wwk-doc-role-contradicting { background: rgba(246, 184, 176, 0.18); color: #f6b8b0; }

/* ── motion discipline ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wwk-cit-flash {
    animation: none;
    background: rgba(53, 170, 232, 0.18) !important;
  }
}

/* ── mobile tweaks ────────────────────────────────────────────────────── */

@media (max-width: 767px) {
  .wwk-root {
    padding: 16px 14px 28px;
    font-size: calc(14px * var(--type-scale, 1));
  }

  .wwk-person-name {
    font-size: calc(19px * var(--type-scale, 1));
  }

  .wwk-person-photo,
  .wwk-person-photo-placeholder {
    width: 56px;
    height: 56px;
    font-size: calc(22px * var(--type-scale, 1));
  }

  .wwk-drawer-panel {
    width: 100%;
  }
}