.workbench {
  --wb-cols: 264px minmax(0, 1.3fr) minmax(0, 1fr);
  --wb-cols-lg: 248px minmax(0, 1.2fr) minmax(0, 1fr);
  --wb-cols-md: minmax(0, 1fr) minmax(0, 1fr);
}

/* Source: the file's facts under the drop, the geometry picker under those. */
.source-meta { margin-top: var(--sp-3); }
.drop.is-error .drop-copy small { color: var(--error); }
.transform-grid { margin-bottom: var(--sp-3); }
.axes-field { margin-bottom: var(--sp-2); }
.axes-field input { font-family: var(--font-mono); }
.axes-field input:read-only { color: var(--muted); }
.axes-field.is-error input { border-color: var(--error); color: var(--error); }
#importControls:disabled { opacity: .55; }

/* Preview: the head holds the checks and the up axis; the views wrap under it. */
.pane-head > .check { flex: none; }
.pane-head > select { flex: none; }
.pane-title .mono-label { overflow: hidden; text-overflow: ellipsis; }
.preview-stage { --stage-ratio: 4 / 3; touch-action: none; }
.preview-stage > canvas { position: absolute; inset: 0; }
.preview-stage:not(.is-ready) > canvas { visibility: hidden; }
.preview-stage.is-unsupported .empty { display: grid; }
/* A view the file cannot show (no colours, no bones). */
.tabs input:disabled + span { opacity: .35; }

/* The vertex inspector: a tap on the mesh lists every vertex the file keeps
   at that point; the columns follow the file's lanes, the cells that differ
   from the picked vertex take the accent. */
.preview-stage.is-inspecting > canvas { cursor: crosshair; }
.inspector { padding: 8px 10px 10px; border-top: 1px solid var(--line); background: var(--panel-2); max-height: 200px; overflow: auto; }
.inspector-head { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin-bottom: 6px; font-size: var(--fs-sm); }
.inspector-head strong { flex: none; white-space: nowrap; }
.inspector-head .mono-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspect-table { white-space: nowrap; }
.inspect-table td:nth-child(n + 3) { text-align: left; }
.inspect-table [data-col="uv1"], .inspect-table [data-col="colour"], .inspect-table [data-col="bones"] { display: none; }
.inspect-table.has-uv1 [data-col="uv1"], .inspect-table.has-colour [data-col="colour"], .inspect-table.has-bones [data-col="bones"] { display: table-cell; }
.inspect-table tr.is-picked th { color: var(--accent); }
.inspect-table td.is-diff { color: var(--accent); }

/* Report: four sections, the tabs pick one. */
.report-body { padding: 12px; max-height: calc(100vh - var(--suitebar-h) - 120px); overflow: auto; }
.report-section { display: none; }
.report-pane:has(input[name="report"][value="summary"]:checked) [data-report="summary"],
.report-pane:has(input[name="report"][value="health"]:checked) [data-report="health"],
.report-pane:has(input[name="report"][value="skeleton"]:checked) [data-report="skeleton"],
.report-pane:has(input[name="report"][value="header"]:checked) [data-report="header"] { display: block; }
/* Without :has() the tabs cannot switch; keep the summary visible. */
@supports not selector(:has(*)) {
  [data-report="summary"] { display: block; }
}
.report-title { margin: 12px 0 6px; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.attr-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--fs-xs); }
.attr-table :is(td, th) { padding: 3px 6px; border-bottom: 1px solid var(--line-faint); text-align: left; }
.attr-table thead th { color: var(--dim); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; }
.attr-table tbody th { font-weight: 600; }
.attr-table td:nth-child(n + 3) { text-align: right; }
.health-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.health-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: var(--fs-sm); line-height: 1.4; }
.health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); transform: translateY(-1px); }
.health-list li.is-info .health-dot { background: var(--ok); }
.health-list li.is-warn .health-dot { background: var(--warn); }
.health-list li.is-error .health-dot { background: var(--error); }
.health-list li.is-error .health-text { color: var(--error); }
.bone-tree, .bone-tree ul { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: var(--fs-xs); }
.bone-tree ul { padding-left: 14px; border-left: 1px solid var(--line-faint); margin-left: 4px; }
.bone-tree li { padding: 2px 0; }
.bone-tree li > span::before { content: "· "; color: var(--dim); }
.header-text { margin: 0; white-space: pre; overflow: auto; color: var(--muted); font-family: var(--font-mono); font-size: var(--fs-2xs); line-height: 1.45; }