/* Data kit: plotting, charts, line fitting, levelling bars. Colours come from the app tokens (light and dark). */
.xd { display: block; max-width: 100%; height: auto; color: var(--ink); font-family: var(--font); }
.xd-live { touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.xd-wrap { display: grid; gap: 10px; justify-items: center; width: 100%; }
.xd-wrap.locked .xd-live { cursor: default; }
.xd-board { width: 100%; display: flex; justify-content: center; }
.xd-plane { width: min(100%, 420px); }
.xd-chart { width: min(100%, 560px); }
.xd-level { width: min(100%, 440px); }
.step-vis > .xd, .fb-vis > .xd, .model .xd { color: var(--ink); }
.step-vis > .xd-plane { width: min(100%, 340px); }
.step-vis > .xd-chart { width: min(100%, 480px); max-height: none; }
.fb-vis > .xd-plane, .fb-vis > .xd-chart { max-height: 220px; }
.step-vis > .xd-tallyv, .step-vis > .xd-pictov { width: min(100%, 380px); max-height: none; }
.step-vis > .xd-nums { width: min(100%, 420px); max-height: none; }
.step-vis > .xd-normal, .step-vis > .xd-dist, .model .xd-normal, .model .xd-dist { width: min(100%, 440px); }
.xd:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 8px; }

/* frame */
.xd-bg { fill: var(--surface); }
.xd-gl { stroke: var(--line); stroke-width: 1; }
.xd-gl.xd-ax { stroke: var(--ink-3); stroke-width: 1.6; }
.xd-tx { font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.xd-nm { font-size: 12.5px; font-weight: 650; fill: var(--ink-2); }
.xd-cat { font-size: 13.5px; font-weight: 650; fill: var(--ink-2); }
.xd-key { font-size: 16px; font-weight: 750; fill: var(--ink); }
.xd-val { font-size: 13px; font-weight: 750; fill: var(--ink); font-variant-numeric: tabular-nums; }
.xd-num { font-size: 16px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.xd-numv { font-size: 16px; font-weight: 650; fill: var(--ink); font-variant-numeric: tabular-nums; }
.xd-big { font: 800 22px var(--round); fill: var(--ink); }

/* points */
.xd-pt { fill: var(--accent-2); stroke: var(--surface); stroke-width: 2.5; }
.xd-pt.on { r: 11px; }
.xd-pt.off { fill: var(--warm); }
.xd-given { fill: var(--ink-2); }
.xd-lab { font-size: 14px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.xd-coord { font-size: 14px; font-weight: 750; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; font-variant-numeric: tabular-nums; }
.xd-guide { stroke: var(--accent-2); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.xd-poly { fill: color-mix(in srgb, var(--accent-2) 14%, transparent); stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; }
polyline.xd-poly { fill: none; }
.xd-ans { fill: none; stroke: var(--sun); stroke-width: 3; stroke-dasharray: 5 4; }
.xd-cur { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 3 3; }

/* readouts under a board */
.xd-read { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 44px; font-size: 16px; color: var(--ink-2); }
.xd-read b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.xd-read:empty { display: none; }
.xd-pts { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-variant-numeric: tabular-nums; }
.xd-pair { font-weight: 650; color: var(--ink); }
.xd-count { color: var(--ink-3); font-weight: 650; }
.xd-full { animation: xd-nudge .3s; }
@keyframes xd-nudge { 30% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }
.xd-undo:disabled { opacity: .35; }

/* chips (scale, bin width) */
.xd-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.xd-chipl { font-weight: 700; color: var(--ink-2); margin-right: 2px; }
.xd-chips .toggle { min-width: 52px; font-variant-numeric: tabular-nums; }

/* bars, icons, lines */
.xd-col { fill: transparent; cursor: ns-resize; }
.xd-col:focus-visible { outline: none; fill: color-mix(in srgb, var(--sun) 16%, transparent); }
.xd-col.fixed { cursor: default; }
.xd-bar { stroke: none; }
.c0 { fill: var(--accent-2); } .c1 { fill: var(--sun); } .c2 { fill: var(--coral); } .c3 { fill: var(--sky); } .c4 { fill: var(--leaf); } .c5 { fill: var(--berry); }
.xd-bar.on, .xd-blk.on { stroke: var(--ink); stroke-width: 2; }
.xd-grip { fill: var(--ink-3); opacity: .55; }
.xd-wrap.locked .xd-grip { display: none; }
.xd-ico { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1.5; }
.xd-eye { fill: #2A3033; }
.xd-smile { fill: none; stroke: #2A3033; stroke-width: 1.6; stroke-linecap: round; }
.xd-lline { fill: none; stroke: var(--accent-2); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.xd-lpt { fill: var(--surface); stroke: var(--accent-2); stroke-width: 3.5; }
.xd-lpt.on { fill: var(--accent-2); }
.xd-ansl { stroke: var(--sun); stroke-width: 3; stroke-dasharray: 6 4; }
.xd-tally { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }

/* line fitting */
.xd-dot { fill: var(--sky); fill-opacity: .9; }
.xd-fit { stroke: var(--accent-2); stroke-width: 3.5; stroke-linecap: round; }
.xd-bestl { stroke: var(--sun); stroke-width: 3; stroke-dasharray: 7 5; }
.xd-res { stroke: var(--coral); stroke-width: 2; opacity: .8; }
.xd-res.up { stroke: var(--leaf); }
.xd-handle { fill: var(--surface); stroke: var(--accent-2); stroke-width: 4; cursor: grab; }
.xd-handle.on { fill: var(--accent-2); }
.xd-wrap.locked .xd-handle { display: none; }
.xd-cross { fill: var(--sun); stroke: var(--surface); stroke-width: 2; }
.xd-predict { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink-2); }
.xd-predict .numfield { width: 120px; min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 12px; font-size: 18px; font-weight: 700; }
.xd-predict .numfield:focus { outline: none; border-color: var(--accent); }

/* levelling */
.xd-blk { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1.2; }
.xd-blk.fixed { opacity: .55; }
.xd-blk.lift { opacity: .9; stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.xd-meanl { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 6 5; }

/* normal curve and simulated distributions */
.xd-curve { fill: none; stroke: var(--accent-2); stroke-width: 3; }
.xd-area { fill: color-mix(in srgb, var(--accent-2) 24%, transparent); }
.xd-markl { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 4 3; }

/* explore models */
.xd-model { width: 100%; display: grid; gap: 12px; justify-items: center; }
.xd-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* tables and word lists */
.xd-thead { fill: var(--surface-2); }
.xd-chipbg { fill: var(--surface-2); stroke: var(--line); }
.xd-word { font-size: 13.5px; font-weight: 650; fill: var(--ink); }
.step-vis > .xd-table { width: min(100%, 460px); max-height: none; }
.step-vis > .xd-words { width: min(100%, 380px); max-height: none; }
.xd-cat.sm { font-size: 10px; letter-spacing: -.02em; }