/* tree-of-life.css — austras koks, the TreeOfLife component of skaists
   (docs/design/skaists/manifest.json). Every colour, face, size and corner is a
   skaists token from skaists.css (compiled from docs/design/skaists/tokens.json):
   the --tol-* names below are aliases, kept so hosts and the dev harness that
   read them keep working. new bee is the default; raver and cypherpunk ride
   body[data-reg] (the estate contract) or <html data-reg> on a standalone page,
   and skaists.css switches the --sk-* values under both.
   guard is lilac and never red; no honey here (honey is the colour of b only). */
@import url("skaists.css");
:root, :is(html, body)[data-reg] {
  --tol-bg: var(--sk-bg); --tol-card: var(--sk-bg-card); --tol-well: var(--sk-bg-well); --tol-line: var(--sk-line);
  --tol-ink: var(--sk-ink); --tol-mut: var(--sk-ink-mut); --tol-dim: var(--sk-ink-dim);
  --tol-sov: var(--sk-sovereign); --tol-sov-strong: var(--sk-sovereign-strong); --tol-sov-wash: var(--sk-sovereign-wash); --tol-sov-tint: var(--sk-sovereign-tint);
  --tol-primary: var(--sk-primary); --tol-on-primary: var(--sk-on-primary);
  --tol-guard: var(--sk-guard); --tol-guard-wash: var(--sk-guard-wash);
  --tol-life: var(--sk-biomass); --tol-ai: var(--sk-ai);
  --tol-mono: var(--sk-font-mono);
  /* new bee: soft corners, Instrument Sans, the reading floor 16 / 14 */
  --tol-face: var(--sk-font-bee-sans); --tol-radius: var(--sk-radius-xl); --tol-radius-control: var(--sk-radius-lg);
  --tol-fs-body: 16px; --tol-fs-label: 14px; --tol-fs-name: 14px; --tol-fs-small: 14px;
  --tol-card-name: 400 28px/1.1 var(--sk-font-bee-serif);
}
:is(html, body)[data-reg="raver"] {
  --tol-face: var(--sk-font-raver-body); --tol-radius: var(--sk-radius-xl); --tol-radius-control: var(--sk-radius-pill);
  --tol-fs-body: 14px; --tol-fs-label: 14px; --tol-fs-name: 14px; --tol-fs-small: 14px;
  --tol-card-name: 700 30px/1 var(--sk-font-raver-display);
}
:is(html, body)[data-reg="cypherpunk"] {
  --tol-face: var(--sk-font-mono); --tol-radius: var(--sk-radius-sm); --tol-radius-control: var(--sk-radius-sm);
  --tol-fs-body: 13px; --tol-fs-label: 12px; --tol-fs-name: 13px; --tol-fs-small: 12px;
  --tol-card-name: 600 15px/1.45 var(--sk-font-mono);
}

.tol { color: var(--tol-ink); font: 400 var(--tol-fs-body)/1.45 var(--tol-face); }
:where(.tol) button { font: inherit; color: inherit; } /* zero-specificity: component sizes win */
:where(.tol) :focus-visible { outline: 2px solid var(--sk-focus); outline-offset: 3px; }

.tol-lines { display: flex; flex-wrap: wrap; gap: var(--sk-s1); margin: 0 0 var(--sk-s2); padding: var(--sk-s1); background: var(--tol-well); border-radius: var(--tol-radius-control); }
.tol-tab { min-height: var(--sk-control-min); padding: 0 var(--sk-s3); border: 0; border-radius: var(--tol-radius-control); background: none; color: var(--tol-mut); cursor: pointer; font-size: var(--tol-fs-label); }
.tol-tab[aria-pressed="true"] { background: var(--sk-register-on); color: var(--tol-bg); font-weight: 600; }

.tol-focus { margin: 0 0 var(--sk-s1); color: var(--tol-mut); font-size: var(--tol-fs-label); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-s1) var(--sk-s2); }

.tol-stage { position: relative; aspect-ratio: 4 / 5; margin: 0 0 var(--sk-s2); border: 1px solid var(--tol-line); border-radius: var(--tol-radius); background: var(--tol-card); overflow: hidden; }
@media (min-width: 720px) { .tol-stage { aspect-ratio: 16 / 11; } }
.tol-stage[data-reading="raver"] { aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 50%, var(--tol-sov-wash) 0%, var(--tol-bg) 70%); }
.tol-art, .tol-hit { position: absolute; inset: 0; width: 100%; height: 100%; }
.tol-art { pointer-events: none; }
.tol-root { fill: none; stroke: var(--tol-life); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .7; }
.tol-branch { fill: none; stroke: var(--tol-sov); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tol-branch.is-held { stroke: var(--tol-guard); stroke-dasharray: 6 6; }
[data-reading="raver"] .tol-branch { stroke-width: 4; filter: drop-shadow(0 0 6px var(--tol-sov)); }
[data-reading="cypherpunk"] .tol-branch { stroke: var(--tol-ai); stroke-width: 1.5; }
.tol-limb { fill: none; stroke: transparent; stroke-width: 22; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: stroke; }
.tol-limb:hover, .tol-limb:focus-visible { stroke: var(--tol-sov-wash); outline: none; }
:is(html, body)[data-reg="cypherpunk"] .tol-limb:hover { stroke: color-mix(in srgb, var(--tol-ai) 18%, transparent); }

.tol-node { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; min-height: var(--sk-control-min); padding: var(--sk-s1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-align: center;
  border: 1.5px solid var(--tol-sov); border-radius: var(--tol-radius-control); background: var(--tol-sov-tint); cursor: pointer; }
.tol-node:hover { border-color: var(--tol-sov-strong); }
.tol-node.is-open { background: var(--tol-sov-wash); box-shadow: 0 0 0 2px var(--tol-sov) inset; }
.tol-node.has-claims::after { content: ""; position: absolute; inset-block-start: -4px; inset-inline-end: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--tol-life); }
.tol-name { font-weight: 600; font-size: var(--tol-fs-name); line-height: 1.2; color: var(--tol-sov-strong); overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } /* the whole name is the title, the card, and the panel */
.tol-cap { font-size: var(--tol-fs-small); line-height: 1.4; color: var(--tol-mut); overflow-wrap: anywhere; }
.tol-more { font-size: var(--tol-fs-small); line-height: 1.4; color: var(--tol-sov); }
.tol-climb { flex-basis: 100%; min-height: var(--sk-control-min); border: 0; background: none; color: var(--tol-guard); font-size: var(--tol-fs-small); text-decoration: underline; cursor: pointer; }
.tol-mono { font-family: var(--tol-mono); }
.tol-node > span { flex: none; max-width: 100%; } /* a clamped name keeps its own lines: nothing below it may ride up over it */
.tol-node.is-held { cursor: default; border: 1.5px dashed var(--tol-guard); background: var(--tol-guard-wash); flex-direction: row; flex-wrap: wrap; gap: 4px var(--sk-s1); }
.tol-node.is-held .tol-cap { color: var(--tol-guard); font-weight: 600; }
[data-reading="raver"] .tol-node:not(.is-held) { background: var(--tol-sov-wash); box-shadow: var(--sk-glow-sovereign); }
[data-reading="raver"] .tol-node:not(.is-held) .tol-cap { display: none; }
[data-reading="raver"] .tol-name { -webkit-line-clamp: 4; line-clamp: 4; } /* raver speaks in shape; dates wait on the card */
[data-reading="cypherpunk"] .tol-node { align-items: flex-start; text-align: start; padding: 4px var(--sk-s1); }
[data-reading="cypherpunk"] .tol-node:not(.is-held) { border-color: var(--tol-ai); background: var(--tol-card); }
[data-reading="cypherpunk"] .tol-name { color: var(--tol-ink); -webkit-line-clamp: 4; line-clamp: 4; }
[data-reading="cypherpunk"] .tol-cap, [data-reading="cypherpunk"] .tol-more { line-height: 1.3; }
@media (max-width: 520px) { .tol-node { padding: 4px; } }

.tol-lock { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--tol-guard); border-radius: 4px; position: relative; flex: none; }
.tol-lock::before { content: ""; position: absolute; left: 1px; top: -8px; width: 6px; height: 6px; border: 2px solid var(--tol-guard); border-bottom: 0; border-radius: var(--sk-radius-sm) var(--sk-radius-sm) 0 0; }

.tol-guard { display: flex; align-items: center; gap: var(--sk-s2); min-height: var(--sk-control-min); padding: var(--sk-s1) var(--sk-s3); margin: 0 0 var(--sk-s2);
  color: var(--tol-guard); font-weight: 600; font-size: var(--tol-fs-label); background: var(--tol-guard-wash); border: 1.5px dashed var(--tol-guard); border-radius: var(--tol-radius-control); }
.tol-note { color: var(--tol-mut); margin: 0 0 var(--sk-s2); }

.tol-card { background: var(--tol-card); border: 1px solid var(--tol-line); border-radius: var(--tol-radius); padding: var(--sk-s3) var(--sk-s4); margin: 0 0 var(--sk-s3); }
.tol-card-name { margin: 0; font: var(--tol-card-name); color: var(--tol-sov-strong); overflow-wrap: anywhere; }
.tol-card-dates { margin: 0 0 var(--sk-s2); color: var(--tol-mut); }
.tol-card-support { display: none; margin: calc(-1 * var(--sk-s1)) 0 var(--sk-s2); font: 400 var(--tol-fs-small)/1.45 var(--tol-mono); color: var(--tol-mut); }
:is(html, body)[data-reg="cypherpunk"] .tol-reg-cypherpunk { display: block; }
.tol-card-head { margin: 0 0 var(--sk-s1); font-size: var(--tol-fs-label); font-weight: 600; color: var(--tol-mut); }
.tol-claims { list-style: none; margin: 0 0 var(--sk-s3); padding: 0; display: grid; gap: var(--sk-s1); }
.tol-claims li { padding: var(--sk-s1) var(--sk-s2); border-inline-start: 3px solid var(--tol-life); background: var(--tol-bg); border-radius: var(--sk-radius-sm); }
.tol-kind { color: var(--tol-mut); }
.tol-when { color: var(--tol-mut); }
.tol-src { display: block; font-size: var(--tol-fs-small); color: var(--tol-mut); }
.tol-actions { display: flex; flex-wrap: wrap; gap: var(--sk-s2); }
.tol-primary { min-height: var(--sk-control-primary); padding: 0 var(--sk-s4); border: 0; border-radius: var(--tol-radius-control); background: var(--tol-primary); color: var(--tol-on-primary) !important; font-weight: 600; cursor: pointer; }
.tol-quiet { min-height: var(--sk-control-min); padding: 0 var(--sk-s3); border: 1.5px solid var(--tol-ink); border-radius: var(--tol-radius-control); background: none; cursor: pointer; }
.tol-focus .tol-quiet { min-height: var(--sk-control-min); }

@media (prefers-reduced-motion: no-preference) {
  .tol-node, .tol-tab { transition: background-color 140ms ease-out, border-color 140ms ease-out; }
}
/* Spatial Austras koks: one XYZ family graph, with HTML controls for names. */
.tol-space{position:relative;height:clamp(440px,65vh,760px);overflow:hidden;border:1px solid var(--tol-line);border-radius:var(--tol-radius);background:radial-gradient(ellipse at 50% 40%,var(--tol-sov-wash),var(--tol-bg) 75%);touch-action:none;cursor:grab}
.tol-space:active{cursor:grabbing}.tol-space canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tol-camera{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.tol-camera button{min-width:44px;min-height:44px;padding:8px 14px;color:var(--tol-ink);background:var(--tol-card);border:1px solid var(--tol-line);border-radius:8px;cursor:pointer}
.tol-orbit-person{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;color:var(--tol-ink)}
.tol-orbit-person span{display:none;position:absolute;top:31px;left:50%;transform:translateX(-50%);width:max-content;max-width:min(230px,55vw);padding:5px 8px;background:var(--tol-card);border:1px solid var(--branch-color);border-radius:6px;font:14px/1.35 var(--tol-face);white-space:normal;box-shadow:0 2px 10px #0003;pointer-events:none}
.tol-orbit-person.show-label span,.tol-orbit-person:hover span,.tol-orbit-person:focus-visible span{display:block}.tol-orbit-person:hover,.tol-orbit-person:focus-visible{z-index:300!important}.tol-orbit-person[aria-pressed=true]{outline:2px solid var(--tol-sov);border-radius:50%}
.pp-marriage{margin:16px 0;padding:12px;border:1px solid var(--line,var(--sk-line));border-radius:10px}.pp-branch{font-size:1.2em;margin:12px 0}
.tol-family-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:12px 0}.tol-family-key button{min-height:48px;padding:10px;text-align:left;background:var(--tol-card);color:var(--tol-ink);border:1px solid var(--tol-line);border-radius:8px;cursor:pointer;white-space:normal}