/* The cross-reference room, on the GSA design system (gsa/tokens.css, gsa/base.css,
   vendored from homelab/gsa-dash/static; its DESIGN.md is the rulebook). Dark only.
   The arcs' colours are data, drawn in app.js; everything else here is tokens. */

body { padding-bottom: var(--s-8); }
h1, h2 { font-weight: 400; }

/* ---- head: Geist at display size heads a tool ---- */
.head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-4); padding: var(--s-7) var(--gutter) var(--s-5); }
h1 { font: 400 var(--t-display-sans)/var(--lh-tight) var(--display-sans); letter-spacing: var(--track-display-sans); }
.value { color: var(--ink-3); font-size: var(--t-sm); }
.meta { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.head .value { font-size: var(--t-md); color: var(--ink-2); }
/* the disclosure for the dek: bare italic text, a plate only on hover (the buttons' shape) */
.what { display: inline-flex; align-items: center; gap: var(--s-1); height: 30px; padding: 0 var(--s-2); margin-left: calc(-1 * var(--s-1));
  border-radius: var(--r-ctl); font: italic 400 var(--t-lg) var(--serif); color: var(--ink-2); transition: background var(--d-fast), color var(--d-fast); }
.what svg { color: var(--ink-3); transition: transform var(--d-fast) var(--ease); }
.what[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (hover: hover) { .what:hover { background: var(--fill); color: var(--ink); } }
.what:active { background: var(--fill-2); }
/* the page's one sentence of framing: content, read, so the serif, set as a dek under the head */
.dek { flex-basis: 100%; max-width: 68ch; font: italic 400 var(--t-body)/var(--lh-read) var(--serif); color: var(--ink-2); }
.dek a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge-hover); text-underline-offset: 3px; }
@media (hover: hover) { .dek a:hover { text-decoration-color: var(--ink-2); } }

/* ---- controls: one place per job (sections in the tree, sources and display in tools) ---- */
.seg button { white-space: nowrap; flex: none; }
.find { display: flex; align-items: center; gap: var(--s-2); height: var(--plate); width: 240px; padding: 0 var(--s-3); border-radius: var(--r-ctl);
  background: var(--fill); color: var(--ink-3); transition: background var(--d-fast); }
.find:focus-within { background: var(--surface); box-shadow: inset 0 0 0 1px var(--edge-hover); }
.find input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: var(--t-lg); }
.find input::placeholder { color: var(--ink-3); }
.find input::-webkit-search-cancel-button { display: none; }
.find[data-bad] { box-shadow: inset 0 0 0 1px var(--rubric); }
.find { position: relative; }
/* suggestions under the field: a frosted card of rows, concentric (16 = 10 + 6) */
.suggest { position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0; z-index: var(--z-sheet); display: flex; flex-direction: column; gap: 2px;
  padding: var(--card-pad); border-radius: var(--r-lg); }
.suggest .opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r-ctl); font-size: var(--t-md); color: var(--ink-2); cursor: pointer; }
.suggest .opt[aria-selected="true"] { background: var(--fill-2); color: var(--ink); }
@media (hover: hover) { .suggest .opt:hover { background: var(--fill); color: var(--ink); } }
.suggest .value { font-size: var(--t-xs); }
@media (hover: none) { .suggest .opt { min-height: var(--hit); } }   /* a thumb needs 44 */

/* ---- the chart and the section tree beside it ---- */
/* the tools over the chart: the tree's button (narrow screens), Sources, Display */
.tools { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-3); }
.tool { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; max-width: 100%; padding: 0 10px 0 var(--s-3); border-radius: var(--r-ctl);
  background: var(--fill); font: 500 var(--t-md) var(--sans); color: var(--ink); transition: background var(--d-fast); }
@media (hover: hover) { .tool:hover { background: var(--fill-2); } }
.tool[aria-expanded="true"] { background: var(--fill-2); }
.tool small { font-size: var(--t-sm); color: var(--ink-3); }
.tool svg { color: var(--ink-3); }
.tool > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tools #mode { margin-left: auto; }   /* about the arcs, so with the chart's tools; there once two sections are picked */
@media (max-width: 720px) { .tools #mode { margin-left: 0; } }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-5); padding: 0 var(--gutter); align-items: start; }
.stage { position: relative; }
.stage canvas { display: block; width: 100%; }
#over { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; }
#over[data-zoomed="1"] { cursor: grab; }
#over[data-zoomed="1"]:active { cursor: grabbing; }
.empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.tip { position: absolute; z-index: var(--z-sheet); pointer-events: none; max-width: 320px; padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  font-size: var(--t-sm); }
.tip b { font-weight: 500; color: var(--ink); }
.tip .value { margin-top: 2px; font-size: var(--t-xs); }
.foot { display: flex; align-items: center; gap: var(--s-2); min-height: var(--hit); margin-top: var(--s-2); }
.legend { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); font-size: var(--t-xs); color: var(--ink-3); }
.legend span { white-space: nowrap; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: var(--s-2); }
.legend .ramp { width: 112px; height: 4px; margin: 0 var(--s-2); }

/* the tree docked beside the chart on wide screens; below 1100px the same tree lives in the Sections layer */
aside.tree { position: sticky; top: var(--s-4); background: var(--surface); border-radius: var(--r-lg); padding: var(--card-pad); max-height: calc(100dvh - var(--s-6)); overflow: auto; }
/* its head: which section the counts are from, the total, and Between | All once there are several */
.tree-head { display: flex; align-items: center; gap: var(--s-2); min-height: 36px; margin-bottom: var(--s-1);
  padding-left: calc(3px + (30px - var(--icon-sm)) / 2); font: 500 var(--t-sm) var(--sans); color: var(--ink-3); }
.tree-head .from { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-head b { font-weight: 500; color: var(--ink); }
.tree-head .value { flex: none; padding-right: var(--s-2); }
.tree-head select { appearance: none; border: 0; padding: 2px 18px 2px 4px; margin-left: 2px; border-radius: var(--r-sm); font: 500 var(--t-sm) var(--sans); color: var(--ink);
  background: var(--fill) no-repeat right 4px center / 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A6A39B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }   /* lint-ok: the chevron is data, its stroke --ink-2 */
/* a section row: its chevron plate concentric in its left end (10 = 7 + 3); rows a plate's gap apart */
.rows { display: flex; flex-direction: column; gap: 2px; }
.trow { --in: 3px; display: flex; align-items: center; min-height: 36px; padding-left: var(--in); border-radius: var(--r-ctl); color: var(--ink-2); cursor: pointer;
  transition: color var(--d-fast); }
@media (hover: hover) { .trow:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--edge); } }
.trow[aria-pressed="true"] { background: var(--accent-wash); color: var(--ink); }
.trow[aria-disabled="true"] { cursor: default; opacity: .5; }
.trow .caret { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  border-radius: calc(var(--r-ctl) - var(--in)); transition: background var(--d-fast), color var(--d-fast); }
.trow .caret svg { width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--d-fast) var(--ease); transform: rotate(-90deg); }
.trow .caret[aria-expanded="true"] svg { transform: none; }
@media (hover: hover) { .trow .caret:hover { color: var(--ink); background: var(--fill-2); } }
.trow .caret.blank { visibility: hidden; }
.trow .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-md); }
.trow[data-depth="0"] .name { font-weight: 500; }
.trow .n { font-size: var(--t-sm); color: var(--ink-2); padding-left: var(--s-2); }
/* the share as a meter: a pill track with its fill, never a fill behind the whole row */
.trow .meter { width: 36px; height: 4px; flex: none; margin-left: var(--s-3); border-radius: var(--r-pill); background: var(--fill-2); overflow: hidden; }
.trow .meter i { display: block; height: 100%; width: var(--w); min-width: 2px; border-radius: inherit; background: var(--ink-3); }
.trow[aria-pressed="true"] .meter i { background: var(--accent); }
.trow .pct { width: 48px; text-align: right; padding-right: var(--s-2); font-size: var(--t-xs); color: var(--ink-3); }
.trow[data-depth="1"] { padding-left: calc(var(--in) + var(--s-5)); }
.trow[data-depth="2"] { padding-left: calc(var(--in) + 2 * var(--s-5)); }

/* ---- the Sources menu and the Display tool ---- */
.layer.popover .head { display: none; }   /* a popover closes on a click outside or Esc; its control names it */
#sources-layer.popover { width: 320px; }   /* source names run long: wider than the menu default */
#sources > button { gap: var(--s-3); }
#sources .menu-label { padding: var(--s-3) var(--s-3) var(--s-1); font: 500 var(--t-xs) var(--sans); color: var(--ink-3); }
#sources i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
#sources .name { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sources .value { font-size: var(--t-xs); }
#sources .check { color: var(--ink); visibility: hidden; }
#sources [aria-checked="true"] { color: var(--ink); }
#sources [aria-checked="true"] .check { visibility: visible; }
#sources [aria-checked="false"] i { opacity: .35; }
.field.run { padding: var(--s-3) var(--s-3) var(--s-1); }
#display .body { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field .label { font: 500 var(--t-xs) var(--sans); color: var(--ink-3); }
.field .seg { align-self: flex-start; }
#display.popover { width: 380px; }   /* four orders */
.dating { font-size: var(--t-xs); color: var(--ink-2); max-width: 44ch; }
.dating a { display: inline-block; color: var(--ink); text-decoration: underline; text-decoration-color: var(--edge-hover); text-underline-offset: 2px; }

/* ---- the links of a selection ---- */
.links { margin-top: var(--s-5); }
.links h2 { font: 400 var(--t-3xl)/var(--lh-snug) var(--serif); letter-spacing: var(--track-title); }
.links .value { margin: var(--s-1) 0 var(--s-4); }
.links .value a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--edge-hover); text-underline-offset: 3px; }
.links ol { list-style: none; padding: 0; columns: 2 380px; column-gap: var(--s-6); }
.links li { break-inside: avoid; padding: var(--s-3); margin: 0 calc(-1 * var(--s-3)); border-radius: var(--r-md); }
@media (hover: hover) { .links li:hover { background: var(--fill); } }
.refs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-2); font: 400 var(--t-body)/var(--lh-snug) var(--serif); }
.refs a { text-decoration: underline; text-decoration-color: var(--edge-hover); text-underline-offset: 3px; }
.refs .to { color: var(--ink-3); font-family: var(--sans); font-size: var(--t-sm); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-1); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--s-2); border-radius: var(--r-sm); background: var(--fill); font-size: var(--t-xs); color: var(--ink-2); }
.tag i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.quotes blockquote { margin-top: var(--s-2); font: 400 var(--t-lg)/var(--lh-read) var(--serif); color: var(--ink-2); }
.quotes cite { display: block; font: var(--t-xs) var(--sans); font-style: normal; color: var(--ink-3); }
.links details summary { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--ink-3); cursor: pointer; list-style: none; }
.links details summary::-webkit-details-marker { display: none; }
.links details[open] summary { display: none; }
.more { margin-top: var(--s-4); }
.btn.sm { height: 30px; padding: 0 var(--s-3); font-size: var(--t-sm); }
.btn { height: 36px; padding: 0 var(--s-4); border-radius: var(--r-ctl); background: var(--fill); font: 500 var(--t-md) var(--sans); color: var(--ink); }
@media (hover: hover) { .btn:hover { background: var(--fill-2); } }

/* ---- sources ---- */
.notes { padding: var(--s-8) var(--gutter) 0; max-width: 820px; color: var(--ink-2); font: var(--t-lg)/var(--lh-read) var(--serif); }
.notes h2 { font: 500 var(--t-2xl) var(--sans); color: var(--ink); margin-bottom: var(--s-3); }
.notes ul + h2 { margin-top: var(--s-6); }
.notes ul { list-style: none; padding: 0; margin-bottom: var(--s-4); }
.notes li { padding: var(--s-2) 0; }
.notes li b { font: 500 var(--t-md) var(--sans); color: var(--ink); }
.notes li .value { display: block; font-family: var(--sans); }
.notes a { text-decoration: underline; text-decoration-color: var(--edge-hover); text-underline-offset: 3px; }
.notes p { margin-bottom: var(--s-3); }
.notes p.value { font-family: var(--sans); }

/* the Sections layer: a panel at tablet widths, a sheet on phones (gsa/layers.css shapes it) */
#sections .body { overflow-y: auto; }
@media (min-width: 1101px) {
  .tool.narrow { display: none; }
}
@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  aside.tree { display: none; }
}
@media (max-width: 720px) {
  .head { padding-top: var(--s-6); gap: var(--s-3); }
  .find { width: 100%; height: var(--hit); }
  .find input { font-size: var(--t-body); }
  .tool.narrow { flex: 1 1 0; min-width: 0; justify-content: space-between; }
  .tree-head { font-size: var(--t-md); }
}