/* Labware viewer. Styles the app that labware.js builds under main.doc, after the article, on the
 * MCAM docs' design system (docs.css): its tokens, square corners, hairline borders, Inter, the 4px
 * scale and the same breakpoints. It depends on docs.css being loaded first and adds nothing to it.
 *
 * PALETTE. Every colour is a docs.css token or one of its literals. Plate A is grey; plate B and glass
 * are the one blue (#1A5282 light, #A8CCF0 dark) that docs.css already uses for syntax names. Green is
 * the A1 ring and focus, nothing else. No alpha literals: the loading and error covers are opaque --bg.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --lw-plate-fill: var(--fill); --lw-plate-edge: var(--muted);
  --lw-well-fill: var(--bg); --lw-well-edge: var(--muted); --lw-well-hover: var(--line); --lw-well-pin: var(--ink);
  --lw-a1: var(--green);
  --lw-wall-black: var(--ink); --lw-wall-white: var(--line);
  --lw-b: #1A5282; --lw-glass: #A8CCF0; --lw-dim: var(--muted);
  /* A material recorded as clear is drawn partly transparent, in the drawings and in 3D alike. */
  --lw-clear-opacity: 0.5; --lw-3d-well-opacity: 0.4;
  /* Read by labware.js for the three.js materials; not used by any rule below. */
  /* The plastic is translucent so the wells and the floor under them show through it; the wells are the one blue. */
  --lw-3d-body: #DDDDDD; --lw-3d-body-opacity: 0.32; --lw-3d-well: #A8CCF0; --lw-3d-floor: #BBBBBB; --lw-3d-glass: #A8CCF0; --lw-3d-glass-opacity: 0.3; --lw-3d-floor-opacity: 0.3;
  --lw-3d-black: #1D1D1D; --lw-3d-white: #FFFFFF; --lw-3d-edge: #767676; --lw-3d-a1: #20CC4B; --lw-3d-b: #1A5282;
  --lw-control: 36px; --lw-button: 32px; --lw-chip: 28px;
}
html[data-theme="dark"] {
  --lw-well-hover: #767676;
  --lw-wall-black: #000000; --lw-wall-white: var(--ink);
  --lw-b: #A8CCF0; --lw-glass: #1A5282;
  --lw-3d-body: #767676; --lw-3d-body-opacity: 0.3; --lw-3d-well: #A8CCF0; --lw-3d-floor: #3D3D3D; --lw-3d-glass: #1A5282; --lw-3d-glass-opacity: 0.35; --lw-3d-floor-opacity: 0.3;
  --lw-3d-black: #000000; --lw-3d-white: #BBBBBB; --lw-3d-edge: #BBBBBB; --lw-3d-b: #A8CCF0;
}

/* -------------------------------------------------------------- page shell */
/* The app sits beside the 768px article, not inside it, and takes the whole document column. labware.js adds
 * .doc--labware to main.doc and .shell--labware to .shell; the :has() forms cover a missing class. */
main.doc.doc--labware > .lw-app, main.doc:has(> .lw-app) > .lw-app { max-width: none; }
/* The rail column goes too: at full width the app would otherwise stop 240px short of the right edge. */
.shell.shell--labware, .shell:has(> main.doc--labware), .shell:has(.lw-app) { grid-template-columns: 300px minmax(0, 1fr); }
html[data-sidenav="hidden"] .shell.shell--labware { grid-template-columns: minmax(0, 1fr); }
.shell--labware > .onpage, .shell:has(.lw-app) > .onpage, .doc--labware .onpage-m, .doc:has(.lw-app) .onpage-m { display: none; }
/* If the app is ever left inside the article, the whole document column widens instead. */
main.doc:has(.prose .lw-app) > * { max-width: none; }

/* The mount inside the article carries only the no-JavaScript text; labware.js hides it once the app is up. */
.lw-mount p { margin: 16px 0; }

/* --------------------------------------------------------------------- app */
.lw-app { margin-top: 32px; font-family: var(--font); font-size: 0.875rem; line-height: 1.5; color: var(--ink); }
.lw-app *, .lw-app *::before, .lw-app *::after { box-sizing: border-box; }
.lw-app p { margin: 0; }
.lw-app a { color: inherit; }
.lw-app button, .lw-app input, .lw-app select { font: inherit; color: inherit; border-radius: 0; }
.lw-app [hidden] { display: none !important; }
.lw-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lw-ico { flex-shrink: 0; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lw-label { display: block; margin: 0 0 4px; font-size: 0.8125rem; line-height: 1.25; color: var(--muted); }
.lw-inline { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }

/* ----------------------------------------------------------------- buttons */
/* The theme's .btn: 32px, hairline, ink border on hover. Primary is ink-filled, quiet has no border until hovered. */
.lw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--lw-button); padding: 0 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.875rem; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: border-color 0.1s, background-color 0.1s, color 0.1s; }
.lw-btn:hover { border-color: var(--ink); }
.lw-btn:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
/* Carries .lw-app so it outranks the theme's link colour. */
.lw-app .lw-btn--primary { height: var(--lw-control); padding: 0 16px; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lw-app .lw-btn--primary:hover { background: var(--bg); color: var(--ink); }
.lw-btn--quiet { border-color: transparent; background: transparent; color: var(--muted); }
.lw-btn--quiet:hover { border-color: var(--line); background: var(--bg); color: var(--ink); }
.lw-btn--quiet[aria-pressed="true"] { color: var(--ink); background: var(--fill); border-color: var(--line); }
.lw-btn--toggle[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.lw-btn--external { justify-content: space-between; width: 100%; }
.lw-btn--external .lw-ico { margin-left: 8px; }
/* Copy link: the check replaces the link icon and the label turns green for a moment; labware.js flips data-state. */
.lw-btn .lw-ico--done, .lw-btn[data-state="done"] .lw-ico--idle { display: none; }
.lw-btn[data-state="done"] .lw-ico--done { display: block; }
.lw-btn[data-state="done"] { color: var(--ok); border-color: var(--ok-line); }

/* ----------------------------------------------------------- control strip */
/* One row that wraps: picker, maker, chips, then the tabs and Compare pushed right. */
.lw-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lw-picker { flex: 1 1 320px; max-width: 420px; }
.lw-field { flex: 0 1 240px; }

/* Inputs share the sidebar search field's 36px box. */
.lw-input, .lw-select { display: block; width: 100%; height: var(--lw-control); padding: 0 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 0.875rem; transition: border-color 0.1s; }
.lw-input:hover, .lw-select:hover { border-color: var(--ink); }
.lw-input:focus, .lw-select:focus { border-color: var(--ink); outline: 2px solid var(--green); outline-offset: 2px; }
.lw-input::placeholder { color: var(--muted); }
.lw-select { padding-right: 32px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
html[data-theme="dark"] .lw-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BBBBBB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.lw-select--sm { height: 28px; width: auto; padding: 0 28px 0 8px; font-size: 0.8125rem; }

/* Combobox: the search icon and clear button sit inside the field; the listbox hangs below it. */
.lw-combobox { position: relative; }
.lw-combobox > .lw-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.lw-combobox .lw-input { padding-left: 34px; padding-right: 34px; }
.lw-clear { position: absolute; right: 2px; top: 2px; display: flex; align-items: center; justify-content: center; width: calc(var(--lw-control) - 4px); height: calc(var(--lw-control) - 4px); padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.lw-clear:hover { color: var(--ink); background: var(--fill); }
.lw-listbox { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: max(100%, 20rem); max-height: min(24rem, 60vh); overflow-y: auto; padding: 4px 0; background: var(--bg); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.lw-group { padding: 8px 12px 4px; font-size: 0.75rem; color: var(--muted); }
.lw-option { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 36px; padding: 8px 12px; cursor: pointer; }
.lw-option:hover, .lw-option--active { background: var(--fill); }
.lw-option[aria-selected="true"] { background: var(--fill); box-shadow: inset 2px 0 0 var(--ink); }
.lw-option-name { min-width: 0; font-weight: 500; overflow-wrap: break-word; }
.lw-option-meta { flex-shrink: 0; max-width: 45%; color: var(--muted); font-size: 0.75rem; text-align: right; font-variant-numeric: tabular-nums; }
.lw-empty { padding: 12px; color: var(--muted); }

/* Chips: the theme's uppercase small-caps chips. Pressed reads as filled. */
.lw-filters { display: flex; flex-wrap: wrap; gap: 4px; align-self: center; }
.lw-chip { height: var(--lw-chip); padding: 0 10px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: border-color 0.1s, background-color 0.1s, color 0.1s; }
.lw-chip:hover { border-color: var(--ink); color: var(--ink); }
.lw-chip[aria-pressed="true"] { border-color: var(--ink); background: var(--fill); color: var(--ink); }

/* Tabs: one bordered group, the selected tab in fill with an ink bar, as the sidebar marks the current page. */
.lw-views { display: inline-flex; margin-left: auto; border: 1px solid var(--line); }
.lw-tab { height: calc(var(--lw-control) - 2px); padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.1s, color 0.1s; }
.lw-tab + .lw-tab { border-left: 1px solid var(--line); }
.lw-tab:hover { color: var(--ink); background: var(--fill); }
.lw-tab[aria-selected="true"] { color: var(--ink); background: var(--fill); box-shadow: inset 0 -2px 0 var(--ink); }
.lw-tab[aria-disabled="true"] { color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
.lw-tab:focus-visible { outline-offset: -2px; }

/* ------------------------------------------------------------- compare row */
.lw-compare-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lw-compare-row .lw-picker { flex: 1 1 260px; max-width: 360px; }
.lw-compare-a { font-weight: 500; margin-right: 8px; }
/* A and B keys: a filled square for A (grey), an outlined one for B (blue), the same pair the legend and dl use. */
.lw-key { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 0.6875rem; font-weight: 600; line-height: 1; }
.lw-key--a { background: var(--fill); color: var(--ink); border: 1px solid var(--muted); }
.lw-key--b { background: var(--bg); color: var(--lw-b); border: 1px dashed var(--lw-b); }

/* -------------------------------------------------------------------- body */
/* The drawing and its hint share the first column, so the facts panel's height never opens a gap between them. */
.lw-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 16px; }
.lw-main { min-width: 0; }
/* Two plates' facts side by side need a wider panel than one plate's. */
.lw-app[data-compare="on"] .lw-body { grid-template-columns: minmax(0, 1fr) 400px; }
.lw-hint { margin: 8px 0 0; color: var(--muted); font-size: 0.75rem; }
.lw-facts { position: sticky; top: calc(var(--topbar) + 16px); }

/* Stage: a bordered box the plate's shape, never taller than the viewport. */
.lw-stage { position: relative; aspect-ratio: 3 / 2; min-height: 320px; max-height: calc(100dvh - var(--topbar) - 176px); overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.lw-panel { position: absolute; inset: 0; }
.lw-panel:focus-visible { outline-offset: -2px; }
.lw-svg { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-select: none; touch-action: none; }
.lw-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.lw-svg--top[data-zoomed="true"] { cursor: grab; }
.lw-svg--top[data-panning="true"] { cursor: grabbing; }

/* ---- top view
 * The viewBox is in millimetres, so no text size or dash length is set here: a CSS px would be a millimetre.
 * labware.js sets font-size and stroke-dasharray in user units from the plate's scale. Strokes are hairlines
 * in screen pixels at any zoom through vector-effect. */
.lw-plate-body { fill: var(--lw-plate-fill); stroke: var(--lw-plate-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-well-shape { fill: var(--lw-well-fill); stroke: var(--lw-well-edge); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill 0.1s; }
.lw-plate[data-wall="clear"] .lw-plate-body { fill-opacity: var(--lw-clear-opacity); }
.lw-plate[data-wall="black"] .lw-well-shape { stroke: var(--lw-wall-black); stroke-width: 2; }
.lw-plate[data-wall="white"] .lw-well-shape { stroke: var(--lw-wall-white); stroke-width: 2; }
/* A tapered well also shows its floor's outline, dashed and fainter, inside the opening. */
.lw-well-bottom { fill: none; stroke: var(--lw-well-edge); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.lw-well { cursor: pointer; outline: none; }
.lw-well:hover .lw-well-shape, .lw-well:focus-visible .lw-well-shape { fill: var(--lw-well-hover); }
.lw-well:focus-visible .lw-well-shape { stroke: var(--green); stroke-width: 2; }
.lw-well[aria-pressed="true"] .lw-well-shape { stroke: var(--lw-well-pin); stroke-width: 2; }
/* A1 keeps its green ring under hover, focus and pin: it is a fixed landmark, not a state. */
.lw-well--a1 .lw-well-shape, .lw-well--a1[aria-pressed="true"] .lw-well-shape { stroke: var(--lw-a1); stroke-width: 2; }
.lw-well-label { font-family: var(--font); font-weight: 500; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.lw-svg[data-labels="off"] .lw-well-label { display: none; }
.lw-axis-text { font-family: var(--font); font-weight: 500; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.lw-dim-line, .lw-scale-line { stroke: var(--lw-dim); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-dim-text { font-family: var(--mono); font-weight: 400; fill: var(--muted); font-variant-numeric: tabular-nums; dominant-baseline: central; }
.lw-dim-text--h, .lw-dim-text--v { text-anchor: middle; }
.lw-dim-text--left, .lw-dim-text--scale { text-anchor: start; }
.lw-dim-text--right { text-anchor: end; }
.lw-dim-dot { fill: var(--lw-dim); }
/* The skirt's footprint on the bench, under the wells: a hairline inside the plate's edge. */
.lw-skirt { fill: none; stroke: var(--lw-plate-edge); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.7; }

/* Plate B: outline only, dashed, blue, no labels, not interactive. */
.lw-plate--b { pointer-events: none; }
.lw-plate--b .lw-plate-body { fill: none; stroke: var(--lw-b); }
.lw-plate--b .lw-well-shape { fill: none; stroke: var(--lw-b); stroke-width: 1.5; }
.lw-plate--b .lw-well-label, .lw-plate--b .lw-axes { display: none; }
.lw-plate--b .lw-well-bottom { stroke: var(--lw-b); }

/* ---- cross-section */
.lw-sec-wall { fill: var(--lw-plate-fill); stroke: var(--lw-plate-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-sec[data-wall="clear"] .lw-sec-wall { fill-opacity: var(--lw-clear-opacity); }
.lw-sec[data-wall="black"] .lw-sec-wall { fill: var(--lw-wall-black); stroke: var(--lw-wall-black); }
.lw-sec[data-wall="white"] .lw-sec-wall { fill: var(--lw-well-fill); stroke: var(--lw-wall-white); stroke-width: 2; }
.lw-sec-cavity { fill: var(--lw-well-fill); stroke: none; }
.lw-sec-bottom { stroke: var(--lw-plate-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-sec-bottom[data-material="clear"] { fill: var(--lw-glass); fill-opacity: var(--lw-clear-opacity); }
.lw-sec-bottom[data-material="black"] { fill: var(--lw-wall-black); }
.lw-sec-bottom[data-material="white"] { fill: var(--lw-well-fill); stroke: var(--lw-wall-white); }
.lw-sec-bottom[data-material="opaque"] { fill: var(--lw-plate-fill); }
.lw-sec-top { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lw-sec--b { pointer-events: none; }
.lw-sec--b .lw-sec-wall, .lw-sec--b .lw-sec-bottom, .lw-sec--b .lw-sec-cavity { fill: none; stroke: var(--lw-b); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lw-sec--b .lw-sec-top { display: none; }
.lw-sec--b .lw-sec-break, .lw-sec--b .lw-sec-break-mask { display: none; }
/* Where a long plate is cut off, a break mark says it continues. */
.lw-sec-break-mask { fill: var(--bg); stroke: none; }
.lw-sec-break { fill: none; stroke: var(--lw-plate-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* ---- overlays inside the stage */
.lw-stage-tools { position: absolute; top: 8px; right: 8px; z-index: 3; display: flex; align-items: center; gap: 4px; }
.lw-stage-tools [data-for] { display: none; }
/* The cut-away toggle carries its own checkbox; the row picker only appears once the cut is on. */
.lw-btn--check { gap: 6px; }
.lw-check { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lw-check-mark { display: none; }
.lw-btn--check[aria-pressed="true"] { color: var(--ink); }
.lw-btn--check[aria-pressed="true"] .lw-check-box { fill: var(--ink); stroke: var(--ink); }
.lw-btn--check[aria-pressed="true"] .lw-check-mark { display: block; stroke: var(--bg); }
.lw-app[data-view="3d"]:not([data-cut="on"]) .lw-stage-tools .lw-inline[data-for~="3d"] { display: none; }
/* Opacity: a short slider, and a reset that appears only once it has been moved. */
.lw-opacity { align-items: center; gap: 6px; padding: 0 4px; }
.lw-app[data-view="3d"] .lw-stage-tools .lw-opacity[data-for="3d"] { display: inline-flex; }
.lw-opacity .lw-inline { display: inline-flex; }
.lw-range { width: 88px; height: 16px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.lw-btn--icon { width: var(--lw-button); padding: 0; }
.lw-btn--icon[hidden] { display: none; }
.lw-zoom { display: inline-flex; }
.lw-zoom .lw-btn { min-width: 32px; padding: 0 8px; }
.lw-zoom .lw-btn + .lw-btn { margin-left: -1px; }
.lw-app[data-view="top"] .lw-stage-tools .lw-zoom[data-for="top"] { display: inline-flex; }
.lw-app[data-view="top"] .lw-stage-tools [data-for~="top"], .lw-app[data-view="3d"] .lw-stage-tools [data-for~="3d"], .lw-app[data-view="section"] .lw-stage-tools [data-for~="section"] { display: inline-flex; }

.lw-tip { position: absolute; z-index: 4; display: grid; gap: 2px; max-width: 16rem; padding: 6px 10px; background: var(--bg); border: 1px solid var(--ink); box-shadow: var(--shadow); pointer-events: none; white-space: nowrap; }
.lw-tip-name { font-size: 0.8125rem; font-weight: 500; }
.lw-tip-xy { font: 400 0.75rem/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.lw-tip-b { font: 400 0.75rem/1.4 var(--mono); color: var(--lw-b); }
.lw-tip-note { color: var(--muted); font-size: 0.6875rem; }

.lw-legend { position: absolute; right: 8px; bottom: 8px; z-index: 3; display: flex; gap: 16px; padding: 6px 10px; background: var(--bg); border: 1px solid var(--line); font-size: 0.75rem; }
.lw-legend-item { display: inline-flex; align-items: center; gap: 8px; }
.lw-swatch { display: inline-block; width: 16px; height: 10px; }
.lw-swatch--a { background: var(--lw-plate-fill); border: 1px solid var(--lw-plate-edge); }
.lw-swatch--b { border: 1.5px dashed var(--lw-b); }

/* Loading and error cover the stage; the no-WebGL cover sits over the canvas only. All opaque, all quiet. */
.lw-state { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: var(--bg); color: var(--muted); text-align: center; }
.lw-state-title { color: var(--ink); font-weight: 600; }
.lw-state .lw-btn { margin-top: 8px; }
.lw-state a { text-decoration: underline; text-underline-offset: 3px; }
.lw-app:not([data-state="loading"]) .lw-state--loading, .lw-app:not([data-state="error"]) .lw-state--error { display: none; }

/* ------------------------------------------------------------------- facts */
.lw-kicker { color: var(--muted); font-size: 0.8125rem; }
.lw-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.lw-sub { margin: 0 0 16px; color: var(--muted); }
.lw-facts > .lw-btn--primary { margin-bottom: 16px; }

/* Definition list as label/value rows on hairlines. Values are tabular so millimetres line up. */
.lw-dl { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.lw-row { display: contents; }
.lw-dl > .lw-row > dt, .lw-dl > .lw-row > dd { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lw-dl > .lw-row > dt { padding-right: 16px; color: var(--muted); font-size: 0.8125rem; font-weight: 400; }
.lw-dl > .lw-row > dd { font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lw-dl--compare { grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr) minmax(0, 1fr); }
.lw-dl--compare > .lw-row > dd + dd { padding-left: 12px; }
.lw-dl--compare > .lw-row--head > dt, .lw-dl--compare > .lw-row--head > dd { padding: 4px 0; }
.lw-dl--compare > .lw-row--head > dd + dd { padding-left: 12px; }
.lw-dl--compare > .lw-row[data-differs] > dd + dd { color: var(--lw-b); }

.lw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.lw-notes { margin-top: 16px; font-size: 0.8125rem; }
.lw-notes summary { color: var(--muted); cursor: pointer; }
.lw-notes summary:hover { color: var(--ink); }
.lw-notes p { margin-top: 8px; color: var(--muted); line-height: 1.55; }
.lw-fineprint { margin-top: 16px; color: var(--muted); font-size: 0.75rem; line-height: 1.5; }

/* --------------------------------------------------------------------- CTA */
/* A fill band, the same treatment as the page-nav cards: quiet, no shadow. */
.lw-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 32px; padding: 24px; border: 1px solid var(--line); background: var(--fill); }
.lw-cta-title { font-weight: 600; }
.lw-cta-text { color: var(--muted); }
.lw-cta-text a { text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; }
.lw-cta-text a:hover { text-decoration-color: var(--ink); }
.lw-cta .lw-btn { flex-shrink: 0; }

/* --------------------------------------------------------------- responsive */
/* Below the theme's rail breakpoint (tablets in landscape, small laptops) the sidebar still takes 300px, which
 * leaves no room for a facts column beside the drawing: the facts move under it and nothing is sticky. */
@media (max-width: 85.75em) {
  .lw-body, .lw-app[data-compare="on"] .lw-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lw-facts { position: static; }
  .lw-stage { min-height: 0; }
}
/* Below 1024 the sidebar is a drawer and the article is the whole width: one column, facts under the drawing,
 * nothing sticky, and the theme's 44px targets. */
@media (max-width: 63.99em) {
  .lw-facts { position: static; }
  .lw-stage { max-height: none; }
  .lw-controls { align-items: stretch; }
  .lw-picker, .lw-field { flex-basis: 100%; max-width: none; }
  .lw-views { margin-left: 0; }
  .lw-input, .lw-select, .lw-btn--primary { height: 44px; }
  .lw-clear { width: 40px; height: 40px; }
  .lw-tab { height: 42px; }
  .lw-btn { min-height: 44px; }
  .lw-btn--quiet { min-height: 36px; }
  .lw-chip { height: 36px; }
  .lw-option { min-height: 44px; }
  .lw-notes summary { display: flex; align-items: center; min-height: 44px; }
}
/* Phones: the chips scroll in one line, tabs stretch, and each fact is a label over its value. */
@media (max-width: 40em) {
  .lw-app { margin-top: 24px; }
  .lw-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 0 24px; scrollbar-width: none; }
  .lw-filters::-webkit-scrollbar { display: none; }
  .lw-views { display: flex; width: 100%; }
  .lw-tab { flex: 1; padding: 0 8px; }
  .lw-compare-row .lw-combobox { flex-basis: 100%; max-width: none; }
  /* A fixed height rather than an aspect ratio: a minimum height on a 3:2 box would widen it past the viewport. */
  .lw-stage { aspect-ratio: auto; height: calc(70vw + 48px); min-height: 0; }
  .lw-stage-tools { top: 4px; right: 4px; left: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .lw-panel { top: 48px; }
  .lw-legend { position: static; margin-top: 8px; }
  .lw-dl, .lw-dl--compare { grid-template-columns: minmax(0, 1fr); }
  .lw-dl > .lw-row > dt { padding: 8px 0 0; border-bottom: 0; }
  .lw-dl > .lw-row > dd { padding-top: 2px; }
  .lw-dl--compare > .lw-row > dd + dd { padding-left: 0; padding-top: 0; }
  .lw-dl--compare > .lw-row > dd + dd::before { content: "B "; color: var(--muted); font-weight: 400; }
  .lw-dl--compare > .lw-row > dt + dd::before { content: "A "; color: var(--muted); font-weight: 400; }
  .lw-dl--compare > .lw-row--head { display: none; }
  .lw-dl--compare > .lw-row > dt + dd { border-bottom: 0; }
  .lw-actions .lw-btn { flex: 1 1 auto; }
  .lw-cta { padding: 16px; }
  .lw-cta .lw-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .lw-app * { transition: none !important; }
}

/* ------------------------------------------------------------------- print */
/* The drawing and the numbers; none of the controls. The vendor link prints its address. */
@media print {
  .lw-controls, .lw-compare-row, .lw-stage-tools, .lw-hint, .lw-tip, .lw-legend, .lw-actions, .lw-notes, .lw-cta, .lw-state, .lw-clear { display: none !important; }
  .lw-app { margin-top: 16px; }
  .lw-body { display: block; }
  .lw-stage { aspect-ratio: auto; height: auto; min-height: 0; max-height: none; overflow: visible; border: 0; break-inside: avoid; }
  .lw-panel { position: static; }
  .lw-svg { height: auto; max-height: 60vh; }
  .lw-canvas { max-height: 60vh; }
  .lw-facts { position: static; margin-top: 16px; break-inside: avoid; }
  .lw-dl { columns: 2; column-gap: 32px; display: block; border-top: 0; }
  .lw-row { display: grid; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); break-inside: avoid; }
  .lw-btn--external { width: auto; height: auto; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; }
  .lw-btn--external .lw-ico { display: none; }
  .lw-btn--external::after { content: " (" attr(href) ")"; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }
}