/* =====================================================================
   Connections (js/whoswho.js): each section's graph of entries, the tabs that
   switch between sections, and the quick view of a card's page. Same background as the timeline: the group's colour (--c) glowing
   over its image background (--bgc), a 45° checkerboard fading out below.
   ===================================================================== */
@property --c { syntax: '<color>'; inherits: true; initial-value: #7fe6ff; }
@property --bgc { syntax: '<color>'; inherits: true; initial-value: #070b2b; }

html.ww-open, html.ww-open body { overflow: hidden; }

.ww { --c: #7fe6ff; --bgc: #070b2b; --ww-glass: linear-gradient(180deg, rgba(18, 30, 78, 0.82), rgba(6, 12, 40, 0.9)); --ww-edge: rgba(180, 225, 255, 0.4);
  position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: #fff; background: #03041a; font-family: var(--font-menu, 'Nunito Sans', sans-serif);
  opacity: 0; transition: opacity .28s ease; outline: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }   /* nothing highlights while dragging around */
.ww img { -webkit-user-drag: none; user-select: none; }
.ww.shown { opacity: 1; }
.ww[hidden] { display: none; }

.ww-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; transition: --c .7s ease, --bgc .7s ease;
  background: radial-gradient(ellipse 65% 60% at 50% 45%, color-mix(in srgb, var(--c) 26%, transparent), transparent 70%), var(--bgc); }
.ww-grid { position: absolute; inset: -80%; opacity: .055; transform: rotate(45deg); will-change: transform;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 75%, #fff) 0 25%, transparent 0 50%); background-size: 64px 64px; }
.ww-bg::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, rgba(2, 3, 16, 0.6)), linear-gradient(180deg, transparent 30%, var(--bgc) 88%); }

/* ---------- title and close ---------- */
.ww-head { position: absolute; left: 28px; top: 22px; z-index: 3; max-width: min(560px, calc(100% - 120px)); pointer-events: none; }
.ww-eyebrow { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 65%, #fff); }
.ww-head h2 { position: relative; display: inline-block; overflow: hidden; margin: 6px 0 0; padding: 7px 40px 7px 20px; font-size: 1.35rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 35%, transparent), rgba(42, 99, 216, 0.2) 60%, rgba(12, 24, 70, 0.6));
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--ww-edge)); border-radius: 16px 0 16px 0; text-shadow: 0 0 14px color-mix(in srgb, var(--c) 80%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.ww-head h2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #fff, var(--c) 45%, transparent); }
.ww-close { position: absolute; top: 20px; right: 22px; z-index: 6; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  background: var(--ww-glass); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--ww-edge)); border-radius: 14px 0 14px 0;
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 35%, transparent); transition: transform .2s ease, box-shadow .2s ease; }
.ww-close:hover { transform: rotate(90deg); box-shadow: 0 0 24px color-mix(in srgb, var(--c) 65%, transparent); }
.ww-close svg { width: 22px; height: 22px; }
.ww button:focus-visible, .ww a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.ww-main { position: absolute; inset: 0; z-index: 2; overflow-y: auto; overflow-x: hidden; padding: 150px 28px 48px; overscroll-behavior: contain; }

/* ---------- faces: the card thumbnail look ---------- */
.ww-face { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; aspect-ratio: 4 / 3; border-radius: 10px 0 10px 0;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fc) 30%, transparent), transparent 70%), var(--fbg, rgba(0, 0, 0, 0.4));
  border: 1.5px solid color-mix(in srgb, var(--fc) 55%, transparent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); }
.ww-face::before { content: ""; position: absolute; inset: -60%; pointer-events: none; opacity: .05; transform: rotate(45deg);
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.6) 0 25%, transparent 0 50%); background-size: 48px 48px; }   /* about the card thumbnails' size at the usual zoom */
.ww-face img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ww-initials { position: relative; font-weight: 800; letter-spacing: .06em; color: color-mix(in srgb, var(--fc) 55%, #fff); text-shadow: 0 0 10px color-mix(in srgb, var(--fc) 70%, transparent); }

/* ---------- tabs: every section, at the top like the timeline's order buttons ---------- */
.ww-tabs { position: absolute; left: 50%; top: 24px; z-index: 6; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; max-width: calc(100% - 520px); overflow-x: auto; scrollbar-width: none;
  background: rgba(4, 8, 30, 0.65); border: 1px solid color-mix(in srgb, var(--c) 45%, var(--ww-edge)); border-radius: 14px 0 14px 0; box-shadow: 0 0 16px color-mix(in srgb, var(--c) 25%, transparent); }
.ww-tabs[hidden] { display: none; }
.ww-tabs::-webkit-scrollbar { display: none; }
.ww-tabs button { flex: none; padding: 8px 16px; cursor: pointer; color: #b9c6ec; font: 800 .7rem/1 var(--font-menu, sans-serif); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  background: transparent; border: 1px solid transparent; border-radius: 10px 0 10px 0; transition: color .2s ease, background .2s ease, box-shadow .2s ease; }
.ww-tabs button:hover { color: #fff; }
.ww-tabs button.active { color: #fff; border-color: color-mix(in srgb, var(--tc, var(--c)) 60%, var(--ww-edge)); text-shadow: 0 0 10px color-mix(in srgb, var(--tc, var(--c)) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc, var(--c)) 40%, rgba(36, 60, 130, 0.9)), rgba(12, 24, 70, 0.9)); box-shadow: 0 0 14px color-mix(in srgb, var(--tc, var(--c)) 45%, transparent); }

/* ---------- a section: a world to drag around and zoom ---------- */
.ww-main.ww-pan { overflow: hidden; padding: 0; }
.ww-zoom button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; cursor: pointer; color: #fff; font: 800 .72rem/1 var(--font-menu, sans-serif); letter-spacing: .12em; text-transform: uppercase;
  background: var(--ww-glass); border: 1px solid color-mix(in srgb, var(--gc) 40%, var(--ww-edge)); border-radius: 12px 0 12px 0; transition: box-shadow .2s ease, background .2s ease; }
.ww-zoom button:hover { box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 50%, transparent); }
.ww-stage { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.ww-stage.dragging, .ww-stage.dragging .ww-node { cursor: grabbing; }
.ww-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }   /* no will-change: the pictures re-render sharp at every zoom */
.ww-world.ww-ease { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.ww-zoom { position: absolute; z-index: 4; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 6px; }
.ww-zoom button { width: 38px; height: 38px; padding: 0; font-size: 1.1rem; letter-spacing: 0; }
.ww-zoom svg { width: 18px; height: 18px; }

/* the section's name and summary, then each subsection's title, all floating on the background */
.ww-sec-head { position: absolute; left: 0; width: 1800px; transform: translateX(-50%); text-align: center; pointer-events: none; }
.ww-title { margin: 0; font-size: 3.2rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 16px color-mix(in srgb, var(--gc) 70%, transparent), 0 1px 3px #000; }
.ww-summary { white-space: pre-line; margin: 16px auto 0; max-width: 1240px; color: #c9d3f5; font-size: 1.84rem; line-height: 1.5; text-transform: none; letter-spacing: normal; font-weight: 400; text-shadow: 0 1px 3px #000; }
.ww-subdesc { white-space: pre-line; position: absolute; left: 0; width: 1120px; transform: translateX(-50%); margin: 0; text-align: center; pointer-events: none;
  font-family: var(--font-menu, 'Nunito Sans', sans-serif); font-weight: 400; letter-spacing: normal; text-transform: none; font-size: 1.72rem; line-height: 42px; color: #c9d3f5; text-shadow: 0 1px 3px #000; }
.ww-subtitle { position: absolute; left: 0; transform: translateX(-50%); margin: 0; padding: 12px 44px; white-space: nowrap; pointer-events: none;
  font-size: 1.64rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #fff;
  border-top: 1px solid color-mix(in srgb, var(--gc) 50%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--gc) 50%, transparent);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gc) 22%, transparent), transparent); text-shadow: 0 0 12px color-mix(in srgb, var(--gc) 70%, transparent); }

/* connections: a line with an arrow toward the entry it points at, and its label halfway */
.ww-links { position: absolute; overflow: visible; pointer-events: none; }
.ww-links path { stroke-linejoin: round; fill: none; stroke: color-mix(in srgb, var(--gc) 75%, transparent); stroke-width: 2; vector-effect: non-scaling-stroke; transition: stroke .2s ease, opacity .2s ease; }
.ww-links path.ww-head { fill: color-mix(in srgb, var(--gc) 70%, transparent); stroke: none; }
.ww-links g.lit path { stroke: color-mix(in srgb, var(--gc) 50%, #fff); stroke-width: 3; }
.ww-links g.lit path.ww-head { fill: color-mix(in srgb, var(--gc) 50%, #fff); }
.ww-label { position: absolute; transform: translate(-50%, -50%); z-index: 1; padding: 6px 20px; white-space: nowrap; pointer-events: none;
  font-size: 1.28rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 45%, #fff);
  background: rgba(5, 8, 30, 0.88); border: 1px solid color-mix(in srgb, var(--gc) 50%, transparent); border-radius: 999px; transition: opacity .2s ease, box-shadow .2s ease; }
.ww-label.lit { color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--gc) 55%, transparent); background: color-mix(in srgb, var(--gc) 30%, #070b26); }
.ww-world.has-sel .ww-links g:not(.lit), .ww-world.has-sel .ww-label:not(.lit) { opacity: .25; }
.ww-world.has-sel .ww-node:not(.near) { opacity: .45; }

.ww-node { position: absolute; width: 320px; transform: translate(-50%, -120px); display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0; cursor: pointer; color: #fff; font: inherit; background: none; border: 0; transition: opacity .2s ease; }
.ww-node .ww-face.node { width: 320px; border-width: 3px; border-radius: 20px 0 20px 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ww-node .ww-face.node .ww-initials { font-size: 2.6rem; }
.ww-node:hover .ww-face.node { transform: translateY(-6px); border-color: var(--fc); }
.ww-node.sel .ww-face.node { border-color: #fff; box-shadow: 0 0 0 4px var(--gc), 0 0 48px color-mix(in srgb, var(--gc) 70%, transparent); }
.ww-node-name { font-size: 1.6rem; font-weight: 700; line-height: 1.25; text-align: center; text-shadow: 0 1px 3px #000, 0 0 8px #000; }
.ww-node.sel .ww-node-name { color: color-mix(in srgb, var(--gc) 35%, #fff); }

/* ---------- quick view: the card's page over everything ---------- */
.ww-quick { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 36px; background: rgba(2, 3, 16, 0.62); backdrop-filter: blur(6px); }
.ww-quick[hidden] { display: none; }
.ww-quick-panel { width: min(1080px, 100%); max-height: calc(100vh - 72px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 20, 58, 0.97), rgba(6, 9, 32, 0.98)); border: 1px solid color-mix(in srgb, var(--gc) 45%, var(--ww-edge)); border-radius: 20px 0 20px 0;
  box-shadow: 0 0 40px color-mix(in srgb, var(--gc) 25%, transparent), 0 30px 70px rgba(0, 0, 0, 0.6); }
.ww-quick-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(180, 225, 255, 0.15); background: rgba(0, 0, 0, 0.25); }
.ww-qchips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.ww-qchip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; cursor: pointer; color: #fff; font: 700 .8rem/1.2 var(--font-menu, sans-serif);
  background: rgba(0, 0, 0, 0.3); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); border-radius: 10px 0 10px 0; transition: background .2s ease, border-color .2s ease; }
.ww-qchip:hover { background: color-mix(in srgb, var(--gc) 22%, rgba(0, 0, 0, 0.3)); border-color: var(--gc); }
.ww-qchip small { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 45%, #b9c6ec); }
.ww-qopen { display: inline-flex; align-items: center; gap: 4px; flex: none; font: 800 .7rem/1 var(--font-menu, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--gc) 45%, #fff); }
.ww-qopen:hover { color: #fff; }
.ww-qopen svg { width: 15px; height: 15px; }
.ww-qclose { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  background: rgba(0, 0, 0, 0.35); border: 1px solid color-mix(in srgb, var(--gc) 45%, var(--ww-edge)); border-radius: 10px 0 10px 0; }
.ww-qclose:hover { box-shadow: 0 0 14px color-mix(in srgb, var(--gc) 55%, transparent); }
.ww-qclose svg { width: 18px; height: 18px; }
/* the card page inside, as on the site */
.ww-quick-body { overflow-y: auto; overscroll-behavior: contain; padding: 14px; font-family: var(--font-body, 'Nunito Sans', sans-serif); text-align: left; }
.ww-quick-body .view { animation: none; }
.ww-quick-body .panel { margin: 0; }
.ww-empty { margin: 160px 0 0; text-align: center; color: #aab8e0; position: relative; z-index: 1; }

/* ---------- the old-paper background (a section's "Background: Old paper" in the editor) ----------
   A faded parchment page like the Book of Prophecies: the paper tile from assets/img/paperTiled.webp
   repeated across the screen, a slight tint of the section's colour and darkened edges. Names,
   titles, lines and labels turn to sepia ink; the pictures fade a little to sit in the page. */
.ww.paper { --ink: #1c1008; --ink-soft: #4a3219; --paper: #e6d4aa; color: var(--ink); background: #cdb184; }
.ww.paper .ww-bg { transition: none;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, color-mix(in srgb, var(--c) 7%, transparent), transparent 75%),
    url("../assets/img/paperTiled.webp") 0 0 / auto repeat, #d9c296; }   /* the paper tile (assets/img/paperTiled.webp) at its own size, repeated */
.ww.paper .ww-grid { display: none; }
.ww.paper .ww-bg::after { background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 45%, rgba(110, 70, 30, 0.28) 78%, rgba(70, 40, 15, 0.62) 100%); }

/* ink */
.ww.paper .ww-title, .ww.paper .ww-node-name, .ww.paper .ww-subtitle { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 248, 225, 0.35); }
.ww.paper .ww-summary, .ww.paper .ww-subdesc { color: var(--ink); text-shadow: none; font-weight: 600; }
/* heavier text on paper, so it reads clearly against the texture */
.ww.paper .ww-node-name { font-weight: 800; }
.ww.paper .ww-title, .ww.paper .ww-subtitle, .ww.paper .ww-label, .ww.paper .ww-tabs button, .ww.paper .ww-eyebrow { font-weight: 900; }
.ww.paper .ww-subtitle { border-color: rgba(110, 81, 49, 0.55); background: linear-gradient(90deg, transparent, rgba(110, 81, 49, 0.14), transparent); }
.ww.paper .ww-links path { stroke: rgba(78, 55, 30, 0.75); }
.ww.paper .ww-links path.ww-head { fill: rgba(78, 55, 30, 0.85); stroke: none; }
.ww.paper .ww-links g.lit path { stroke: #2a1a0a; }
.ww.paper .ww-links g.lit path.ww-head { fill: #2a1a0a; }
.ww.paper .ww-label { color: var(--ink); background: #efe2bf; border-color: rgba(110, 81, 49, 0.6); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.25); }
.ww.paper .ww-label.lit { color: #f6ecd2; background: var(--ink-soft); box-shadow: 0 0 10px rgba(60, 40, 20, 0.35); }

/* pictures: a little faded, with an inked border */
.ww.paper .ww-face { border-color: rgba(70, 48, 25, 0.7); box-shadow: 0 4px 12px rgba(60, 40, 20, 0.35); }
/* on paper the picture keeps its usual background (the card's colour and glow over its image
   background, with the checkerboard) at 75%, so the page shows through; the image stays at full strength */
.ww.paper .ww-face { background: transparent; isolation: isolate; }
.ww.paper .ww-face::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--fc) 30%, transparent), transparent 70%), var(--fbg, rgba(0, 0, 0, 0.4)); }
.ww.paper .ww-face::before { opacity: .0375; }   /* the checkerboard (.05 normally) at 75% as well */
.ww.paper .ww-face img { filter: sepia(.28) saturate(.8) contrast(.96); }
.ww.paper .ww-node:hover .ww-face.node { border-color: var(--ink); }
.ww.paper .ww-node.sel .ww-face.node { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(110, 81, 49, 0.7), 0 6px 18px rgba(60, 40, 20, 0.45); }

/* the title, tabs, × and zoom buttons on paper */
.ww.paper .ww-eyebrow { color: var(--ink-soft); }
.ww.paper .ww-head h2 { color: var(--ink); text-shadow: none; background: rgba(250, 240, 212, 0.55); border-color: rgba(110, 81, 49, 0.6); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.2); }
.ww.paper .ww-head h2::before { background: linear-gradient(90deg, var(--ink), var(--ink-soft) 45%, transparent); }
.ww.paper .ww-tabs { background: rgba(250, 240, 212, 0.7); border-color: rgba(110, 81, 49, 0.55); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.2); }
.ww.paper .ww-tabs button { color: var(--ink-soft); }
.ww.paper .ww-tabs button:hover { color: var(--ink); }
.ww.paper .ww-tabs button.active { color: #f6ecd2; text-shadow: none; background: var(--ink-soft); border-color: var(--ink); box-shadow: none; }
.ww.paper .ww-close, .ww.paper .ww-zoom button { color: var(--ink); background: rgba(250, 240, 212, 0.8); border-color: rgba(110, 81, 49, 0.6); box-shadow: 0 2px 8px rgba(60, 40, 20, 0.2); }
.ww.paper .ww-close:hover, .ww.paper .ww-zoom button:hover { background: #f6ecd2; box-shadow: 0 2px 12px rgba(60, 40, 20, 0.35); }
.ww.paper .ww-empty { color: var(--ink-soft); }

/* a custom node's quick view: its picture, name and text (it has no card page) */
.ww-own { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 18px 28px; text-align: center; }
.ww-own .ww-face.own { position: relative; width: 240px; height: 180px; }
.ww-own-name { margin: 0; font: 400 1.7rem/1.2 var(--font-display, serif); letter-spacing: .06em; color: #fff; }
.ww-own-text { margin: 0; max-width: 640px; white-space: pre-line; color: #c9d3f5; font-size: 1.02rem; line-height: 1.6; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  .ww-head { left: 16px; top: 14px; }
  .ww-head h2 { font-size: 1rem; padding: 6px 26px 6px 14px; }
  .ww-close { top: 14px; right: 16px; width: 42px; height: 42px; }
  .ww-main { padding: 150px 12px 32px; }
  .ww-tabs { left: 16px; right: 16px; top: 74px; transform: none; max-width: none; }
  .ww-main { padding-top: 130px; }
  .ww-zoom { right: 12px; bottom: 12px; }
  .ww-quick { padding: 6px; }
  .ww-quick-panel { max-height: calc(100vh - 12px); }
  .ww-quick-body { padding: 6px; }
  }
@media (prefers-reduced-motion: reduce) { .ww, .ww *, .ww-bg { transition-duration: .01s !important; animation: none !important; } }

/* ---------- editor preview (KH4.whoswho.preview): the section, with entries to drag into place ---------- */
.ww.ww-static { position: relative; inset: auto; z-index: auto; padding: 14px; border-radius: 14px; }
.ww-static-hint { position: relative; z-index: 1; margin: 0 0 6px; font-size: .74rem; color: #aab8e0; }
.ww-static .ww-static-stage { position: relative; inset: auto; cursor: default; touch-action: none; }
.ww-static .ww-node { cursor: move; }
.ww-static .ww-node.dragging { z-index: 5; opacity: .85; }
.ww-static .ww-node.dragging .ww-face.node { border-color: #fff; box-shadow: 0 0 0 2px var(--gc), 0 0 24px color-mix(in srgb, var(--gc) 70%, transparent); }