/* plot-digitizer: the chart stage with its zoom, the axis rows, the points table, the colour swatch. */
.pd-stage { position: relative; max-height: 70vh; overflow: auto; margin-top: var(--matrix-space-8); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); background: var(--matrix-surface-subtle); }
.pd-canvas { display: block; cursor: crosshair; touch-action: none; }
.pd-canvas:focus-visible { outline: 3px solid var(--matrix-focus); outline-offset: -3px; }
.pd-zoom { display: flex; flex-wrap: wrap; gap: var(--matrix-space-8); margin-top: var(--matrix-space-8); }
.pd-zoom [aria-pressed="true"], .pd-axis-row [aria-pressed="true"] { border-color: var(--matrix-brand); color: var(--matrix-brand); font-weight: 600; }
.pd-where, .pd-note { margin: var(--matrix-space-8) 0 0; font-size: var(--matrix-type-caption); font-variant-numeric: tabular-nums; }
.pd-where { min-height: 1.5em; } /* holds its line while empty: the first hover filling it would move the chart under the pointer */
.pd-note:empty { display: none; }
.pd-axis-row { display: grid; grid-template-columns: 6.5em minmax(6em, 10em) auto minmax(0, 1fr); align-items: center; gap: var(--matrix-space-8) var(--matrix-space-12); margin-top: var(--matrix-space-8); }
.pd-at { font-size: var(--matrix-type-caption); font-variant-numeric: tabular-nums; }
.matrix-ui .pd-value, .matrix-ui .pd-num { font-family: var(--matrix-font-mono); }
.matrix-ui .pd-num { width: 7em; }
.pd-table-wrap { max-height: 18rem; overflow: auto; margin-top: var(--matrix-space-8); border: 1px solid var(--matrix-border); border-radius: var(--matrix-radius-control); }
.pd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--matrix-type-table); }
.pd-table th, .pd-table td { padding: 4px var(--matrix-space-8); border-bottom: 1px solid var(--matrix-border); text-align: left; }
.pd-table th { position: sticky; top: 0; background: var(--matrix-surface); }
.pd-table .pd-check td { background: var(--matrix-warning-background); color: var(--matrix-text); }
.pd-swatch { display: inline-block; width: 1.5rem; height: 1.5rem; border: 1px solid var(--matrix-border); border-radius: 4px; }
.pd-swatch[hidden] { display: none; }
.pd-slider { flex: 1 1 10rem; min-width: 0; accent-color: var(--matrix-brand); }
.pd-list { margin: var(--matrix-space-8) 0 0; padding-left: 1.2em; }
.pd-list li { margin-top: var(--matrix-space-4); }
.pd-file-label { cursor: pointer; }
#pd-project:focus-visible + .pd-file-label { outline: 2px solid var(--matrix-focus); outline-offset: 2px; }
@media (max-width: 560px) {
  .pd-axis-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pd-axis-row .pd-at { grid-column: 1 / -1; }
}
.pd-project { margin-top: var(--matrix-space-16); } /* the options' own gap: it stands right after them */
/* the optional steps, folded until used (Jack's register T59-02) */
.pd-fold > summary { cursor: pointer; font-weight: 600; padding: var(--matrix-space-8) 0; }
.pd-fold[open] > summary { margin-bottom: var(--matrix-space-8); }
/* the magnifier a held finger shows (Jack's register T59-03): fixed over the page, above the finger, never under it */
.pd-loupe { position: fixed; z-index: 20; width: 120px; height: 120px; border: 2px solid var(--matrix-brand); border-radius: var(--matrix-radius-control); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); pointer-events: none; image-rendering: pixelated; }
.pd-loupe[hidden] { display: none; }