/* The charts on the whole screen (B324): a dotted stage, the chart to drag and zoom, floating glass panels – the app's
   chart frame (B283), read-only. Coordinates live in the SVG's attributes; only colours and type are here. */

.stage-page { overflow: hidden; }
.stage-main { padding: 0; }
.stage {
  position: fixed; inset: 0; overflow: hidden; background-color: #eef1f5;
  background-image: radial-gradient(#cfd6df 1.2px, transparent 1.2px); background-size: 22px 22px;
}
:root[data-theme='dark'] .stage { background-color: #12171d; background-image: radial-gradient(#2a2f37 1.2px, transparent 1.2px); }
.glass { position: absolute; z-index: 2; background: rgba(255, 253, 248, 0.94); border: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12); }
:root[data-theme='dark'] .glass { background: rgba(24, 33, 43, 0.94); }

.bar { top: 16px; left: 16px; right: 16px; min-height: 64px; border-radius: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 12px 8px 16px; }
.bar a { color: var(--heading); text-decoration: none; }
.bar .back { font-family: var(--serif); font-weight: 600; }
.bar .who { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--rule); }
.bar .who img, .bar .who .mono { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.bar .who .eyebrow { display: block; font-size: 0.7rem; }
.bar .who strong { font-family: var(--serif); font-size: 1.1rem; }
.bar .spacer { flex: 1 1 auto; }
.views { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--brass-soft); }
.views a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
.views a[aria-current='page'] { background: var(--navy); color: #ffffff; }
.depth { display: flex; align-items: center; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.depth a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--chip); font-size: 1.1rem; }

.canvas { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.canvas.dragging { cursor: grabbing; }
.canvas:focus-visible { outline: 3px solid var(--focus); outline-offset: -6px; }
.canvas svg { display: block; width: 100%; height: 100%; }

.more { top: 96px; left: 50%; transform: translateX(-50%); border-radius: 999px; padding: 10px 18px; font-weight: 700; color: #0e6872; text-decoration: none; }
.zoom { right: 16px; bottom: 96px; border-radius: 16px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.zoom button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--heading); font: inherit; font-size: 1.3rem; cursor: pointer; }
.zoom button:hover { background: var(--brass-soft); }

.panel { top: 96px; right: 16px; width: 330px; max-height: calc(100% - 200px); overflow: auto; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.panel .close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.4rem; color: var(--muted); cursor: pointer; }
.panel img { width: 132px; height: 160px; object-fit: cover; border-radius: 12px; border: 6px solid #ffffff; box-shadow: 0 8px 20px rgba(11, 45, 77, 0.18); transform: rotate(-1.5deg); }
.panel .mono.big { width: 96px; height: 96px; border-radius: 50%; font-size: 2.2rem; }
.panel h2 { margin: 0; font-size: 1.6rem; line-height: 1.15; color: var(--heading); }
.panel p { margin: 0; }
.panel .eyebrow:empty { display: none; }

.strip { left: 16px; right: 16px; bottom: 16px; min-height: 60px; border-radius: 18px; display: flex; align-items: center; gap: 12px; padding: 8px 16px; overflow-x: auto; }
.strip strong { white-space: nowrap; color: var(--heading); }
.strip ol { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.strip li { white-space: nowrap; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--card); font-size: 0.85rem; color: var(--muted); }
.strip li b { font-family: var(--serif); color: var(--heading); }
.strip > a { margin-left: auto; white-space: nowrap; font-weight: 700; }
.hint { left: 50%; bottom: 92px; transform: translateX(-50%); margin: 0; border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }

/* The fan */
.fan .segment { stroke: #eef1f5; stroke-width: 2.5; }
.fan .segment.father { fill: #2a8a93; } .fan .segment.father.g2 { fill: #3c9aa2; } .fan .segment.father.g3 { fill: #56aab0; }
.fan .segment.father.g4 { fill: #72babf; } .fan .segment.father.g5 { fill: #8fcacc; } .fan .segment.father.g6 { fill: #a9d7d8; }
.fan .segment.mother { fill: #c08a2c; } .fan .segment.mother.g2 { fill: #cb9a45; } .fan .segment.mother.g3 { fill: #d6ab62; }
.fan .segment.mother.g4 { fill: #e0bc80; } .fan .segment.mother.g5 { fill: #e8cc9c; } .fan .segment.mother.g6 { fill: #efdab7; }
.fan .segment.empty { fill: rgba(255, 253, 248, 0.55); stroke: #cfd6df; stroke-dasharray: 5 4; }
.fan .tint { stroke: #eef1f5; stroke-width: 2.5; }
.fan .tint.father { fill: rgba(11, 45, 77, 0.28); }
.fan .tint.mother { fill: rgba(92, 63, 13, 0.28); }
.fan a:hover .segment, .fan a:focus .segment, .fan .selected .segment, .fan .selected .tint { stroke: #0b2d4d; stroke-width: 5; }
.fan .hub { fill: #0b2d4d; }
.fan .hub-ring { fill: none; stroke: #78d4ca; stroke-width: 3; }
.fan .label { font-size: 13px; font-weight: 700; fill: #0b2d4d; text-anchor: middle; dominant-baseline: middle; }
.fan .label.g4, .fan .label.g5, .fan .label.g6 { font-size: 11px; }
.fan .label.root { fill: #f3f8fc; font-family: var(--serif); font-size: 17px; }
.fan .face-name, .fan .face-years { fill: #ffffff; text-anchor: middle; paint-order: stroke; stroke: rgba(11, 45, 77, 0.8); stroke-width: 4px; stroke-linejoin: round; }
.fan .face-name { font-size: 16px; font-weight: 700; }
.fan .face-name.g2 { font-size: 14px; }
.fan .face-years { font-size: 12px; }

/* Cards: the pedigree and the descendants */
.link { fill: none; stroke: #9aa4b2; stroke-width: 2; }
.card { fill: #fffdf8; stroke: #e6dcc7; stroke-width: 1.5; }
.card.root { stroke: #0b2d4d; stroke-width: 3; }
.card.empty { fill: rgba(255, 253, 248, 0.5); stroke: #b8c2cc; stroke-dasharray: 6 5; }
a:hover .card, a:focus .card, .selected .card { stroke: #0e6872; stroke-width: 3; }
.face-ring { fill: none; stroke: #2a8a93; stroke-width: 2.5; }
.face-ring.m { stroke: #c08a2c; }
.mono-disc { fill: #0b2d4d; }
.mono-text { fill: #78d4ca; font-family: var(--serif); font-size: 18px; font-weight: 600; text-anchor: middle; }
.chart .name { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: #0b2d4d; }
.chart .years { font-size: 13px; fill: #4f5b66; }
.chart .place { font-size: 12px; fill: #6b7480; }
.chip { fill: #fffdf8; stroke: #d9ccb2; }
.chip-text { font-size: 12px; font-weight: 700; fill: #6d4a10; text-anchor: middle; }

/* Livsløp */
.history-line { stroke: #8a5d14; stroke-width: 1.2; stroke-dasharray: 4 4; opacity: 0.7; }
.history-dot { fill: #8a5d14; }
.history-label { font-size: 12px; fill: #5c3f0d; }
.lifespans .tick { font-size: 12px; fill: #4f5b66; text-anchor: middle; }
.lifespans .axis { stroke: #0b2d4d; stroke-width: 1.5; }
.row-name { font-family: var(--serif); font-size: 14px; font-weight: 600; fill: #0b2d4d; text-anchor: end; }
.life { fill: #2a8a93; }
.life.mother { fill: #c08a2c; }
.life.root { fill: #0b2d4d; }
.life-years { font-size: 12px; font-weight: 700; fill: #ffffff; }
.lifespans a:hover .life, .lifespans .selected .life { stroke: #0b2d4d; stroke-width: 3; }
.empty-note { font-size: 16px; fill: #4f5b66; }

@media (max-width: 760px) {
  .bar { top: 8px; left: 8px; right: 8px; padding: 8px; }
  .bar .back { display: none; }
  .bar .who { padding-left: 0; border-left: 0; }
  .views { width: 100%; justify-content: space-between; }
  .views a { padding: 0 10px; font-size: 0.8rem; }
  .depth { display: none; }
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55%; border-radius: 22px 22px 0 0; }
  .panel img { width: 72px; height: 88px; }
  .strip, .hint { display: none; }
  .zoom { bottom: 16px; }
  .more { top: 150px; }
}