/* P0 is a white special tier in both themes, with an outline for light surfaces. */
.P0 { color:#fff; text-shadow:0 0 2px #555, 0 1px 2px #555; }
.viz .zP0 { fill:#fff; stroke:#555; stroke-width:.5px; paint-order:stroke; }
.graph-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:760px; padding:0 2px 4px; }
.graph-legend { display:flex; flex-wrap:wrap; gap:6px 14px; font-size:11px; }
.graph-legend .zP { color:var(--p); }
.graph-peaks { display:grid; grid-template-columns:max-content max-content minmax(0,1fr); align-items:baseline; gap:4px 12px; max-width:760px; padding:4px 2px; font-size:12px; font-variant-numeric:tabular-nums; }
.graph-peak-group, .graph-peak { display:contents; }
.graph-peak-series { grid-column:1/-1; min-width:0; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.graph-peak-group + .graph-peak-group .graph-peak-series { margin-top:4px; }
.graph-peak strong { font-weight:500; }
.graph-peak span { white-space:nowrap; }
.graph-settings { flex:none; border:1px solid var(--line); border-radius:4px; background:var(--surface); color:var(--ink); width:30px; height:28px; padding:0; font:18px/1 system-ui; cursor:pointer; }
.graph-settings:hover { background:var(--tint); }
.graph-settings:focus-visible, .graph-dialog :focus-visible { outline:2px solid var(--p); outline-offset:2px; }
.graph-message { color:var(--muted); font-size:12px; margin:8px 0; }
.graph-viewport-probe { position:fixed; inset:0; pointer-events:none; visibility:hidden; }
.graph-dialog { position:fixed; inset:auto; left:var(--graph-view-x,50%); top:var(--graph-view-y,50%); transform:translate(-50%,-50%); margin:0; box-sizing:border-box; width:min(1180px,calc(var(--graph-view-width,100vw) - 24px)); max-width:none; max-height:calc(var(--graph-view-height,100dvh) - 24px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:9px; padding:20px; background:var(--surface); color:var(--ink); font:13px/1.5 Rubik,system-ui,sans-serif; box-shadow:0 14px 60px #0006; }
.graph-dialog::backdrop { background:#0007; }
.graph-dialog-head { position:sticky; top:0; z-index:3; background:var(--surface); box-shadow:0 -20px 0 var(--surface); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:17px; }
.graph-dialog button { color:var(--ink); background:var(--tint); border:1px solid var(--line); border-radius:4px; padding:6px 12px; cursor:pointer; font:inherit; }
.graph-dialog p { color:var(--muted); margin:8px 0 12px; font-size:12px; }
.graph-dialog-layout { display:grid; grid-template-columns:minmax(260px,310px) minmax(0,1fr); align-items:start; gap:24px; }
.graph-controls { min-width:0; }
.graph-preview { min-width:0; position:sticky; top:0; padding:16px; border:1px solid var(--line); border-radius:6px; background:var(--bg); }
.graph-preview-label { overflow-wrap:anywhere; }
.graph-preview .viz { margin:16px 0 8px; }
.graph-preview .viz svg { min-width:0; }
.graph-preview .gtip { max-width:100%; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; }
.graph-preview > p:last-child { margin-bottom:0; }
.graph-dialog fieldset { border:1px solid var(--line); border-radius:4px; padding:8px 12px 12px; margin:12px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.graph-dialog legend { padding:0 5px; font-weight:500; }
.graph-dialog label { display:flex; gap:8px; align-items:center; cursor:pointer; }
.graph-dialog input[type=checkbox] { width:16px; height:16px; margin:0; accent-color:var(--p); }
.graph-dialog input[type=color] { width:34px; height:28px; padding:2px; border:1px solid var(--line); background:var(--surface); border-radius:4px; cursor:pointer; }
.graph-dialog .graph-window-label { display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:16px; }
.graph-dialog output { color:#a781d4; font-variant-numeric:tabular-nums; }
.graph-dialog input[type=range] { width:100%; accent-color:#7651a8; }
.graph-dialog-actions { display:flex; justify-content:space-between; gap:10px; margin-top:16px; }
@media(max-width:800px) {
  .graph-dialog { padding:16px; }
  .graph-dialog-layout { grid-template-columns:minmax(0,1fr); gap:12px; }
  .graph-preview { grid-row:1; position:static; padding:12px; }
  .graph-preview .viz svg { min-width:520px; }
  .graph-preview .viz { overflow-x:auto; }
}