/* The family tree (js/aesthetics-graph.js): #/web, #/web/node/<id>, #/web/focus/<id>. */
/* fixed, not relative-in-flow: .screen.article carries its own side padding, which would offset the canvas from
   the real viewport box that el.getBoundingClientRect() (js/aesthetics-graph.js agMount) measures against,
   miscentering every pan/zoom/hit-test calculation by exactly that padding */
.ag-screen { position: fixed; inset: 0; overflow: hidden; background: var(--ground); z-index: 1; }
.ag-screen .art-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; }
.ag-label { position: absolute; left: var(--s4); top: calc(var(--top) + 64px); z-index: 2; margin: 0; display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 13px; pointer-events: none; }
.ag-label svg { width: 16px; height: 16px; opacity: .8; }
.ag-canvas { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.ag-hint { position: absolute; left: 50%; bottom: calc(var(--bottom) + var(--s5)); transform: translate(-50%, 6px); color: var(--soft); font-size: 13px; background: rgba(23, 22, 15, .78); backdrop-filter: blur(8px); padding: var(--s2) var(--s4); border-radius: var(--r-pill); opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; white-space: nowrap; }
.ag-hint.in { opacity: 1; transform: translate(-50%, 0); }

.ag-sheet h3 { margin: 0 0 var(--s3); font-family: var(--serif); font-size: 22px; }
.ag-sheet .eyebrow { margin: var(--s4) 0 var(--s2); color: var(--faint); }
.ag-f-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ag-f-chip { font: inherit; font-size: 13px; padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--rule); background: var(--surface-1); color: var(--soft); }
.ag-f-chip.on { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.ag-years-val { float: right; font-weight: 400; color: var(--ink); }
.ag-years-val b { font-weight: 600; }
/* a dual-handle slider: two native range inputs stacked on one track, each thumb independently draggable, the
   track itself transparent so only the thumbs (and the native focus ring) are interactive (the standard
   two-<input type=range>-overlaid technique -- no extra JS pointer math, so it stays as responsive as any
   other slider in the app) */
.ag-range2 { position: relative; height: 32px; margin: var(--s2) 0 var(--s3); }
.ag-range2 input[type="range"] { position: absolute; left: 0; top: 10px; width: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.ag-range2 input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--rule); border-radius: var(--r-pill); }
.ag-range2 input[type="range"]:first-child::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--rule) 0%, var(--ink) 0%); }
.ag-range2 input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 2px solid var(--ground); margin-top: -8px; pointer-events: auto; cursor: pointer; }
.ag-range2 input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.ag-range2 input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid var(--ground); pointer-events: auto; cursor: pointer; }
.ag-sheet select { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--r-1); border: 1px solid var(--rule); background: var(--surface-1); color: var(--ink); }
.ag-sheet .btn { margin-top: var(--s4); width: 100%; }

.ag-nodehero { display: flex; height: 64px; border-radius: var(--r-2); overflow: hidden; margin: var(--s3) 0; }
.ag-nodehero i { flex: 1; }
.ag-rel { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s3); }
.ag-chip { text-align: left; font: inherit; padding: var(--s3); border-radius: var(--r-2); border: 1px solid var(--rule); background: var(--surface-1); border-left: 4px solid var(--c, var(--rule)); display: flex; flex-direction: column; gap: 2px; }
.ag-chip b { color: var(--ink); font-size: 15px; }
.ag-chip small { color: var(--soft); font-size: 12.5px; line-height: 1.4; }

@media (prefers-reduced-motion: no-preference) { .ag-canvas { transition: none; } }