/* Page chrome only. Every colour is a custom property that theme.js sets at
   startup -- here with the dark palette, because this viewer is a dark inset on
   a light page. Same rule as everywhere else: no style decision lives in a
   stylesheet, they all live in notes/theme.py. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.9rem 0.6rem;
  gap: 0.5rem;
}

#stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* ---- the tree ----------------------------------------------------------- */
.edge {
  fill: none;
  stroke: var(--hairline-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* Outlined rather than left to sit on the background: a node whose state is near
   zero takes the dark middle of the diverging ramp and would otherwise vanish. */
.node { stroke: var(--hairline-strong); stroke-width: 1.4; }
.node:hover { stroke: var(--ink); }

/* The highlights are drawn last, over everything; they must not take the mouse
   away from the cell or the node underneath. */
#highlights { pointer-events: none; }

.trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}
.ring { fill: none; stroke-width: 2; }
.ring.q { stroke: var(--accent); }
.ring.k { stroke: var(--ink-muted); }

/* ---- the matrices ------------------------------------------------------- */
.cell { stroke: var(--bg); stroke-width: 0.6; }
.axis-mark { stroke: var(--hairline-strong); stroke-width: 0.7; }

.tick {
  fill: var(--ink-faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.title {
  fill: var(--ink);
  font-size: 15px;
}
.formula {
  fill: var(--ink-muted);
  font-size: 13.5px;
  font-style: italic;
}
.op {
  fill: var(--ink-faint);
  font-size: 26px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.row-hi { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.col-hi { fill: none; stroke: var(--ink-muted); stroke-width: 1.1; opacity: 0.8; }

/* ---- control ------------------------------------------------------------ */
/* One slider, and the number it is setting. There is nothing else to say. */
#controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
}
#controls span { font-style: italic; font-size: 20px; color: var(--ink); }
#controls b {
  font-size: 17px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 3.6rem;      /* the value is centred; it must not shift the slider */
}
#gamma { width: 18rem; accent-color: var(--accent); }