/* Match the homepage's neutral palette, 1280px canvas and six-pixel controls.
 * Keep the existing tool variable names for settings, diagrams and equations.
 */
:root {
    --ink: #171a1f;
    --muted: #68717b;
    --line: #d9dde2;
    --line-strong: #a6adb5;
    --card: #ffffff;
    --wash: #f0f2f4;
    --inverse-ink: #ffffff;
    --wordmark: #616a74;
    --control-label: #58616b;
    --placeholder: #858c95;
    --description: #505861;
    --font-sans: 'Helvetica Neue', 'Avenir Next', 'Helvetica', system-ui, sans-serif;
}
body[data-theme="dark"] {
    --ink: #f3f4f6;
    --muted: #aeb5bf;
    --line: #2d333d;
    --line-strong: #596270;
    --card: #0b0d12;
    --wash: #151a22;
    --inverse-ink: #0b0d12;
    --wordmark: #b8c0ca;
    --control-label: #b4bcc6;
    --placeholder: #8f99a5;
    --description: #c0c6ce;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    body[data-theme="system"] {
        --ink: #f3f4f6;
        --muted: #aeb5bf;
        --line: #2d333d;
        --line-strong: #596270;
        --card: #0b0d12;
        --wash: #151a22;
        --inverse-ink: #0b0d12;
        --wordmark: #b8c0ca;
        --control-label: #b4bcc6;
        --placeholder: #8f99a5;
        --description: #c0c6ce;
        color-scheme: dark;
    }
}
body, body[data-theme] {
    --primary-color: var(--ink);
    --primary-light: var(--wash);
    --secondary-color: var(--description);
    --accent-color: var(--ink);
    --text-color: var(--ink);
    --text-light: var(--muted);
    --border-color: var(--line);
    --bg-color: var(--card);
    --bg-card: var(--card);
    --border-radius: 6px;
    --btn-primary-bg: var(--ink);
    --btn-primary-text: var(--inverse-ink);
    --shadow: none;
}
.container, .nav-container { width: min(calc(100% - 48px), 1280px); max-width: 1280px; }
.container { padding: 27px 0 48px; }
.nav-container { height: 52px; }
.nav-brand { color: var(--wordmark); font-size: .94rem; font-weight: 620; letter-spacing: -.01em; }
.nav-brand:hover { color: var(--ink); }
.nav-actions { gap: 4px; }
.settings-button, .quiet-button { border-color: transparent; border-radius: 6px; font-size: .8rem; padding: 9px 10px; }
.tool-header { max-width: none; margin: 0 0 22px; text-align: left; }
.tool-header h1 { font-size: clamp(1.85rem, 2.5vw, 2rem); font-weight: 640; letter-spacing: -.035em; line-height: 1.1; }
.tool-description { max-width: none; margin: 0; color: var(--description); font-size: .88rem; }
.card { box-shadow: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
.primary-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 650px);
    gap: 4px;
    padding: 4px;
    margin: 0 0 20px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--wash);
}
.primary-tab {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 9px 12px;
    background: transparent;
    color: var(--control-label);
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    white-space: normal;
    cursor: pointer;
}
.primary-tab:hover { background: var(--card); border-color: var(--line); }
.primary-tab[aria-selected="true"] { color: var(--inverse-ink); background: var(--ink); border-color: var(--ink); }
.primary-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.spec-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.measurement-sketch { width: 100%; max-height: 105px; color: var(--ink); margin: -6px 0 12px; }
.measurement-sketch path { fill: var(--wash); stroke: currentColor; stroke-width: 1; }
.measurement-sketch .measurement-line { fill: none; stroke-width: .7; }
.measurement-sketch .measurement-tip { fill: currentColor; stroke: none; }
.measurement-sketch text { fill: currentColor; font-size: 10px; }
.export-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#find-results { margin-bottom: 18px; }
#find-summary { font-size: .9rem; margin: 0 0 12px; }
.find-candidate { border: 1px solid var(--line); border-radius: 6px; margin-bottom: 7px; overflow: hidden; }
.candidate-confirm { padding: 8px; background: var(--wash); font-size: .8rem; }
.candidate-confirm p { margin: 0 0 6px; }
.candidate-confirm .btn-secondary { margin: 0 6px 0 0; }
.candidate-select { width: 100%; text-align: left; display: grid; gap: 3px; background: var(--card); color: var(--ink); padding: 11px 13px; border: 0; cursor: pointer; font: inherit; }
.candidate-select span { font-size: .76rem; color: var(--muted); }
.candidate-select[aria-pressed="true"] { background: var(--wash); box-shadow: inset 3px 0 var(--ink); }
.candidate-select:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.find-candidate > .btn-secondary { margin: 0 12px 10px; }
#find-explanation { font-size: .79rem; overflow-wrap: anywhere; }
.spec-inputs, .spec-output { padding: 22px; min-width: 0; }
.spec-inputs .section-heading { font-size: .92rem; margin-bottom: 12px; }
.spec-inputs .input-row { gap: 16px; }
.spec-inputs .input-group { min-width: 0; margin-bottom: 16px; }
.spec-inputs input, .spec-inputs select { border-color: var(--line-strong); padding: 9px 11px; min-height: 44px; font-size: .87rem; }
.spec-inputs input::placeholder { color: var(--placeholder); }
.spec-inputs label { display: flex; align-items: baseline; gap: 6px; }
.spec-inputs .input-group label { color: var(--control-label); font: 500 .7rem/1.4 var(--font-mono); letter-spacing: .025em; text-transform: uppercase; }
.spec-inputs .field-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; }
.spec-inputs .field-label-row > label { flex: 1; min-width: 0; min-height: 0; margin: 0; }
.thread-help-trigger {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--text-color);
    font: 600 .78rem/1 var(--font-sans);
    cursor: help;
}
.thread-help-trigger:hover, .thread-help-trigger[aria-expanded="true"] { border-color: var(--text-light); }
.thread-help-trigger:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }
.thread-field-tooltip {
    position: fixed;
    z-index: 900;
    box-sizing: border-box;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    box-shadow: var(--shadow-lg);
    font: 400 .83rem/1.6 var(--font-sans);
    white-space: pre-line;
    overflow-wrap: anywhere;
    overflow-y: auto;
}
.spec-help { color: var(--text-light); font-size: .78rem; text-decoration: underline dotted; cursor: help; }
.spec-help:hover::after, .spec-help:focus-visible::after {
    content: attr(title);
    position: absolute;
    z-index: 10;
    top: 28px;
    left: 0;
    width: min(300px, 80vw);
    padding: 12px;
    border-radius: 6px;
    background: var(--tooltip-bg);
    color: var(--tooltip-text);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.6;
    box-shadow: var(--shadow-lg);
}
.spec-guidance { color: var(--text-light); font-size: .86rem; line-height: 1.65; margin: -2px 0 20px; }
.spec-fit-help { padding: 12px 14px; border-left: 2px solid var(--border-color); background: var(--primary-light); margin: 0 0 20px; }
.spec-inputs .advanced-content { padding-top: 16px; }
.spec-output header { display: flex; gap: 12px; align-items: start; justify-content: space-between; margin-bottom: 10px; }
.spec-output h2 { font-size: .98rem; margin: 0 0 3px; }
.spec-output .spec-caption { font-size: .78rem; color: var(--text-light); line-height: 1.5; }
.spec-status { border: 1px solid var(--border-color); padding: 4px 8px; font-size: .72rem; color: var(--text-light); white-space: nowrap; }
.callout-sheet { display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; align-items: start; gap: 4px; padding: 10px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.callout-symbol { width: 76px; height: 60px; color: var(--thread-solid); }
.callout-symbol .outline { fill: none; stroke: currentColor; stroke-width: 1.8; }
.callout-symbol .thin { fill: none; stroke: currentColor; stroke-width: .8; }
.callout-symbol .axis { fill: none; stroke: var(--dimension-color); stroke-width: .7; stroke-dasharray: 12 3 2 3; }
.callout-symbol .leader { fill: none; stroke: currentColor; stroke-width: .85; }
.drawing-callout { font: 600 clamp(.92rem, 1.5vw, 1.2rem)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0 0; min-width: 0; color: var(--text-color); }
.callout-sheet.product-note { grid-template-columns: minmax(0, 1fr) 44px; }
.copy-icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--control-label); cursor: pointer; }
.copy-icon-button svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon-button:hover:not(:disabled) { background: var(--wash); border-color: var(--line); color: var(--ink); }
.copy-icon-button:disabled { opacity: .35; cursor: not-allowed; }
.copy-icon-button .copied-glyph { display: none; }
.copy-icon-button[data-copied="true"] .copy-glyph { display: none; }
.copy-icon-button[data-copied="true"] .copied-glyph { display: block; }
.spec-copy-status { min-height: 0; margin: 0; color: var(--text-light); font-size: .75rem; }
.spec-copy-status:not(:empty) { margin: 5px 0; }
.spec-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; margin: 14px 0 20px; }
.spec-breakdown div { padding: 10px 0; border-bottom: 1px solid var(--border-color); min-width: 0; }
.spec-breakdown dt { color: var(--text-light); font-size: .73rem; margin-bottom: 4px; }
.spec-breakdown dd { margin: 0; font-size: .87rem; overflow-wrap: anywhere; }
/* The schematic reuses the .thread-svg drawing vocabulary defined in
   index.html so pipe and product figures read as the same drawing as the
   calculated metric and Unified profiles. Only the guide line is extra. */
#schematic-profile { max-width: 620px; margin-inline: auto; }
#family-profile-svg { width: 100%; height: auto; min-height: 0; max-height: none; }
#family-profile-svg .guide-line { fill: none; stroke: var(--dimension-color); stroke-width: .9; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.spec-note-section { margin-top: 14px; border-top: 1px solid var(--line); }
.spec-note-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spec-note-heading h3 { margin: 0; font-size: .84rem; font-weight: 600; }
.spec-output pre.spec-note { font: .75rem/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; background: var(--wash); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; margin: 0; }
.spec-output > .spec-guidance { margin: 18px 0 0; }
.spec-error { color: var(--danger-color); font-size: .88rem; margin: 14px 0; }
.spec-output[data-stale="true"] .callout-sheet { opacity: .45; }
.spec-output[data-stale="true"] .profile-closeup { opacity: .45; }
.spec-output[data-stale="true"] .spec-note { opacity: .45; }
.task-intro { color: var(--text-light); font-size: .84rem; line-height: 1.5; margin: -2px 0 16px; }
.task-assumptions { color: var(--text-light); font-size: .77rem; line-height: 1.6; margin: 14px 0 0; }
.spec-inputs .advanced-options { margin: 0 0 14px; }
.spec-inputs .advanced-options summary { font-size: .86rem; }
.spec-inputs .advanced-options summary span { display: block; margin: 5px 0 0 19px; font-size: .75rem; font-weight: 400; color: var(--text-light); }
.family-explanation { margin: 0 0 14px; }
.family-explanation summary { color: var(--text-light); cursor: pointer; }
.family-explanation p { margin: 12px 0 0; }
.spec-inputs .check-label { align-items: center; font-size: .85rem; }
.spec-inputs .check-label input { width: auto; min-height: 20px; }
.profile-closeup { margin-top: 10px; }
.profile-closeup .diagram-toolbar { padding: 0; }
.profile-closeup .view-switch { border-radius: 5px; padding: 2px; gap: 2px; background: var(--wash); }
.profile-closeup .view-button { border-radius: 3px; box-shadow: none; }
.profile-closeup .view-button[aria-pressed="true"] { background: var(--card); outline: 1px solid var(--line); }
.profile-closeup .diagram-wrap { padding: 8px 0 0; }
.profile-closeup .diagram-note { padding: 0; margin: 4px 0 0; min-height: 0; font-size: .72rem; }
.profile-closeup .thread-section { fill: var(--thread-fill); }
.profile-closeup .thread-outline { fill: none; stroke: var(--thread-solid); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.spec-output .ledger-content { margin-top: 0; }
.spec-output .ledger-row { padding: 0; margin: 0; }
.spec-output .ledger-content .ledger-math { overflow-x: auto; }
.result-evidence { padding: 10px 12px; margin: 0 0 12px; border-left: 2px solid var(--accent-color); background: var(--primary-light); font-size: .8rem; line-height: 1.5; }
.thread-reference-area { margin: 30px 0 0; }
.thread-reference-area > h2 { margin: 0 0 12px; font-size: .9rem; color: var(--text-light); font-weight: 500; }
.thread-reference-area .handbook { max-width: none; margin: 0 0 10px; padding: 16px 22px; }
.thread-reference-area .handbook > summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
.handbook-content { padding-top: 24px; }
.handbook-content > h2 { font-size: 1.1rem; margin-bottom: 12px; }
.reference-sources .note-content { padding: 14px 0 0; }
.spec-output :focus-visible, .spec-inputs summary:focus-visible, .handbook summary:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 4px; }
.handbook { max-width: 1000px; padding: 28px; margin: 0 auto; }
.handbook > h2 { margin: 0 0 14px; font-size: 1.3rem; }
.handbook h3 { margin: 32px 0 12px; font-size: 1.05rem; scroll-margin-top: 28px; }
.handbook p, .handbook li { font-size: .92rem; line-height: 1.8; }
.handbook p + p { margin-top: 12px; }
.handbook ul, .handbook ol { padding-left: 22px; margin: 12px 0; }
.handbook a, .spec-output a { color: var(--text-color); text-underline-offset: 3px; }
.handbook-toc { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 16px 0; margin-bottom: 20px; border-block: 1px solid var(--border-color); font-size: .88rem; }
.handbook table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.handbook th, .handbook td { padding: 12px; border-bottom: 1px solid var(--border-color); text-align: left; vertical-align: top; }
.handbook th { background: var(--primary-light); }
.handbook .notes-stack { display: block; margin-top: 24px; }
.handbook .note-card { margin-top: 12px; }
.calc-intro { color: var(--text-light); font-size: .88rem; margin: -8px 0 20px; }
.print-choices { border: 1px solid var(--border-color); padding: 10px 12px; margin: 12px 0; min-width: 0; }
.print-choices legend { color: var(--text-color); font-size: .85rem; padding: 0 4px; }
.print-choice { display: flex; align-items: center; gap: 10px; min-height: 36px; min-width: 0; font-size: .84rem; color: var(--text-color); cursor: pointer; }
.print-choice input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--text-color); }
.print-choice span { overflow-wrap: anywhere; }
.print-add-list { max-height: 230px; overflow: auto; }
#print-add-options { padding: 0 0 12px; }
#print-add-options > summary { font-size: .85rem; }
#print-preview { margin-top: 16px; }
.print-preview-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.print-preview-toolbar .btn-secondary { font-size: .8rem; padding: 8px 12px; min-height: 40px; }
#print-page-label { font-size: .85rem; color: var(--text-color); }
.print-preview-page { border: 1px solid var(--border-color); background: #fff; width: 100%; overflow: hidden; }
#print-canvas { display: block; width: 100%; height: auto; }
#print-page-description { overflow-wrap: anywhere; }
.standards-table-wrap { overflow-x: auto; }
#standards-coverage { table-layout: fixed; }
#standards-coverage caption { text-align: left; font-weight: 600; padding-bottom: 12px; }
#standards-coverage th, #standards-coverage td { overflow-wrap: anywhere; }
.step-view { width: 100%; height: 390px; background: var(--bg-color); border: 1px solid var(--border-color); }
.step-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.step-view canvas:focus-visible { outline: 2px solid var(--text-color); outline-offset: -3px; }
.step-preview-callout { font-family: var(--font-mono); color: var(--text-color); font-size: .8rem; overflow-wrap: anywhere; }
.step-preview-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.step-preview-toolbar .btn-secondary { padding: 8px 12px; min-height: 40px; }
.step-preview-toolbar [aria-pressed="true"] { color: var(--bg-card); background: var(--text-color); }
#step-preview { margin-top: 16px; }
#step-end-options { margin: 8px 0; }

/* A specification sheet: visible results, one derivation per result. */
.output-section-heading { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; justify-content: space-between; padding: 10px 0 6px; }
.output-section-heading h3 { margin: 0; font-size: .84rem; color: var(--text-color); }
.output-section-heading span { font-size: .72rem; color: var(--text-light); }
#dimension-details { margin-top: 10px; border-top: 1px solid var(--line); }
.spec-output .ledger-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; column-gap: 16px; }
.dimension-static, .spec-output .ledger-row > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; gap: 8px; align-items: center; min-height: 44px; padding: 7px 8px; }
.dimension-static { border-bottom: 1px solid var(--line); font-size: .8rem; }
.dimension-static output, .spec-output .equation-result { font: 500 .78rem/1.4 var(--font-mono); color: var(--text-color); white-space: nowrap; }
.spec-output .ledger-row { min-width: 0; border-bottom: 1px solid var(--line); border-radius: 0; overflow: visible; }
.spec-output .ledger-row > summary { font-weight: 400; }
.spec-output .ledger-row .equation-name { font-size: .8rem; font-weight: 400; }
.spec-output .ledger-row > summary .equation-result { grid-column: 2; }
.spec-output .ledger-row[open] { grid-column: 1 / -1; background: var(--wash); }
.spec-output .ledger-detail { background: var(--wash); padding: 12px; overflow-x: auto; }
.spec-output .ledger-row[hidden], .dimension-static[hidden] { display: none; }
.spec-output .mode-evidence { margin: 0 0 8px; padding: 8px 0; border: 0; background: transparent; }
.spec-output .mode-evidence[hidden] { display: none; }
.spec-output .spec-breakdown { margin: 0; gap: 0 16px; }
.spec-output .spec-breakdown[hidden] { display: none; }
.spec-output .spec-breakdown div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 8px; }
.spec-output .spec-breakdown dt, .spec-output .spec-breakdown dd { margin: 0; font-size: .8rem; }
.profile-closeup .diagram-wrap { max-width: 620px; margin-inline: auto; }
.spec-note-section { margin-top: 12px; }
.spec-output[data-stale="true"] #dimension-details { opacity: .45; }

/* The same visible chevron for every disclosure; static headings have none. */
:is(.spec-inputs, .spec-output, .thread-reference-area, .export-panel) details > summary {
    display: flex; align-items: center; gap: 10px; min-height: 44px;
    padding: 8px; margin: 0; cursor: pointer; list-style: none;
    color: var(--text-color); font-size: .84rem; font-weight: 500;
}
:is(.spec-inputs, .spec-output, .thread-reference-area, .export-panel) details > summary::-webkit-details-marker { display: none; }
:is(.spec-inputs, .spec-output, .thread-reference-area, .export-panel) details > summary::after {
    content: ''; display: block; flex: 0 0 7px; width: 7px; height: 7px;
    margin-left: auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
    transform: rotate(-45deg); grid-column: 3;
}
:is(.spec-inputs, .spec-output, .thread-reference-area, .export-panel) details[open] > summary::after { transform: rotate(45deg); }
:is(.spec-inputs, .spec-output, .thread-reference-area, .export-panel) details > summary:hover { background: var(--wash); }
:is(.spec-inputs, .spec-output, .thread-reference-area, .export-panel) details[open] > summary { background: var(--wash); }
.spec-output .ledger-row > summary { display: grid; }
.spec-inputs .advanced-options > summary span { margin: 0 0 0 auto; }
.spec-inputs .advanced-options > summary::after { margin-left: 0; }
.thread-reference-area .handbook { padding: 0 14px; }
.thread-reference-area .handbook-content, .thread-reference-area .note-content { padding: 14px 8px; }
.thread-reference-area .handbook-content { overflow-wrap: anywhere; }
.field-label-row:has(> label[hidden]) { display: none; }

/* Inline export drawers: one shaded header per workflow, no overlay. */
#thread-export-controls { display: grid; gap: 4px; margin-top: 10px; }
.export-panel { min-width: 0; border: 1px solid var(--line-strong); border-radius: 4px; overflow: clip; }
.spec-output .export-panel > summary { background: var(--wash); padding: 6px 10px; min-height: 36px; }
.export-label { font-weight: 600; }
.export-summary { margin-left: auto; font-size: .73rem; color: var(--muted); }
.spec-output .export-panel > summary::after { margin-left: 4px; }
.spec-output .export-panel > summary:hover { box-shadow: inset 3px 0 var(--ink); }
.export-panel[open] > summary { border-bottom: 1px solid var(--line-strong); }
.export-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px; }
.export-panel-body:has(.export-preview:not([hidden])) { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); }
.export-settings, .export-preview { min-width: 0; }
.export-panel .export-preview { margin: 0; }
.export-panel .input-group { margin-bottom: 8px; min-width: 0; }
.export-panel .input-row { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.export-panel .input-row .input-group:not([hidden]) { display: flex; flex-direction: column; }
.export-panel .input-row .field-label-row { flex: 1; }
.export-panel .field-label-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.export-panel .field-label-row > label { margin: 0; flex: 1; font-size: .78rem; }
.export-panel .check-label { font-size: .78rem; }
.export-panel .field-hint { font-size: .73rem; line-height: 1.4; margin: 6px 0; }
.export-panel .field-hint:empty { display: none; }
.export-panel .btn-secondary { min-height: 34px; padding: 5px 9px; font-size: .76rem; }
.export-panel .input-group :is(input, select) { min-height: 34px; padding: 6px 8px; font-size: .8rem; }
.export-panel details { border-block: 1px solid var(--line); }
.export-panel .advanced-content { padding: 8px 0; }
.export-panel :focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
.export-panel a { color: var(--ink); text-underline-offset: 3px; }
.export-panel .step-view { height: 300px; }
.export-panel .print-preview-toolbar, .export-panel .step-preview-toolbar { margin: 0; padding: 0 0 6px; gap: 4px; }
.export-panel .step-preview-callout { margin: 0 0 6px; font-size: .73rem; }
.export-panel .print-choices { padding: 4px 8px; margin: 6px 0; }
.export-panel .print-choice { min-height: 30px; }
.export-panel:not(:has(.export-preview:not([hidden]))) .export-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }
.export-settings > .field-hint:first-child { grid-column: 1 / -1; }
#step-options:not(:has(.export-preview:not([hidden]))) #step-fields { display: contents; }
#step-options:not(:has(.export-preview:not([hidden]))) :is(#step-end-options, #step-blind-group, .export-actions, .export-settings > p) { grid-column: 1 / -1; }
.export-panel:not(:has(.export-preview:not([hidden]))) #print-size-options { grid-column: 2; grid-row: 2 / span 5; }
.export-panel:not(:has(.export-preview:not([hidden]))) #preview-thread-pdf { justify-self: start; }
@container thread-output (max-width: 620px) {
    .export-panel-body:has(.export-preview:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
    .export-panel:not(:has(.export-preview:not([hidden]))) .export-settings { display: block; }
    .export-summary { display: none; }
    .spec-output .export-panel > summary::after { margin-left: auto; }
}
@media (max-width: 600px) { .step-view { height: 320px; } }
body[data-density="compact"] .spec-inputs, body[data-density="compact"] .spec-output { padding: 12px; }
@media (max-width: 1000px) {
    .spec-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .container, .nav-container { width: calc(100% - 32px); }
    .nav-container { gap: 6px; }
    .nav-brand { font-size: .85rem; }
    .settings-button, .quiet-button { font-size: .74rem; padding-inline: 7px; }
    .tool-description { font-size: .83rem; }
    .primary-tabs { gap: 3px; margin-bottom: 16px; padding: 3px; }
    .primary-tab { font-size: .73rem; line-height: 1.35; padding: 8px 4px; }
    .spec-inputs, .spec-output, .handbook { padding: 16px; }
    .callout-sheet { grid-template-columns: 52px minmax(0, 1fr) 44px; }
    .callout-symbol { width: 52px; height: 50px; }
    .drawing-callout { font-size: .83rem; }
    .spec-output header { flex-wrap: wrap; }
    .spec-breakdown { gap: 0 14px; }
    .spec-inputs .input-row { grid-template-columns: 1fr 1fr; }
    .spec-inputs .input-row label { min-height: 2.7em; }
    .profile-closeup .diagram-toolbar { flex-wrap: wrap; gap: 8px; }
    .thread-reference-area .handbook { padding: 0 10px; }
    .handbook th, .handbook td { padding: 8px 5px; font-size: .78rem; }
}

/* Dense worksheet: drawing and values share a row when the output is wide. */
.spec-output { container: thread-output / inline-size; padding: 14px; }
.spec-inputs { padding: 18px; }
.spec-output > header { align-items: center; margin-bottom: 6px; }
.spec-output .spec-caption { font-size: .73rem; }
.spec-header-actions { display: flex; align-items: center; gap: 6px; }
.spec-header-actions .btn-secondary { min-height: 32px; padding: 4px 8px; font-size: .73rem; }
.callout-sheet { grid-template-columns: 60px minmax(0, 1fr) 36px; padding: 4px 0; align-items: center; }
.callout-symbol { width: 60px; height: 48px; }
.drawing-callout { margin: 0; font-size: 1rem; }
.spec-output .copy-icon-button { width: 36px; height: 36px; }
.spec-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.spec-overview > * { min-width: 0; }
.profile-closeup { margin-top: 6px; }
.profile-closeup .view-button { min-height: 32px; padding: 4px 8px; }
.profile-closeup .diagram-wrap { padding: 2px 0 0; }
.profile-closeup .diagram-note { font-size: .7rem; line-height: 1.4; margin: 0; }
#dimension-details { margin-top: 0; }
.output-section-heading { padding: 6px 0 4px; gap: 0 8px; }
.dimension-static, .spec-output .ledger-row > summary { min-height: 32px; padding: 4px 6px; gap: 6px; }
.spec-output .ledger-row .equation-name, .dimension-static { font-size: .76rem; }
.spec-output .ledger-detail { padding: 8px; }
.spec-output .spec-note-section { margin-top: 8px; }
.spec-output pre.spec-note { padding: 8px 10px; font-size: .75rem; line-height: 1.4; }
.spec-output .spec-note-heading h3 { font-size: .8rem; }
.spec-output .mode-evidence { margin: 0; padding: 4px 0; }
.profile-closeup .mode-evidence:not([hidden]) { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.spec-output .evidence-summary { margin: 2px 0; }
.spec-output .candidate-list { margin-top: 4px; }
.spec-output .candidate-row { padding: 6px 8px; gap: 6px; }
.spec-output .screen-limit { margin-top: 6px; padding: 8px; line-height: 1.45; }
@container thread-output (min-width: 850px) {
    .spec-overview { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 6px; }
    .spec-overview #dimension-details { border-top: 0; border-left: 1px solid var(--line); padding-left: 10px; }
    .spec-overview .ledger-list { grid-template-columns: minmax(0, 1fr); }
    .spec-overview .output-section-heading { padding-top: 0; }
    .spec-overview #dimension-help { font-size: .67rem; }
    .spec-overview .spec-breakdown { grid-template-columns: minmax(0, 1fr); }
    .spec-overview .profile-closeup { margin-top: 0; }
}
@media (pointer: coarse) {
    .spec-output .ledger-row > summary, .spec-output .export-panel > summary,
    .profile-closeup .view-button, .export-panel .btn-secondary,
    .export-panel .input-group :is(input, select), .spec-header-actions .btn-secondary { min-height: 44px; }
    .spec-output .copy-icon-button { width: 44px; height: 44px; }
    .callout-sheet { grid-template-columns: 60px minmax(0, 1fr) 44px; }
}
@media (max-width: 640px) {
    .spec-output, body[data-density="compact"] .spec-output { padding: 10px; }
    .spec-output .ledger-list { grid-template-columns: minmax(0, 1fr); }
    .spec-output > header { gap: 4px; }
    .spec-header-actions { margin-left: auto; }
    .drawing-callout { font-size: .82rem; }
}

/* Preferences also expand in normal document flow, without trapping focus. */
.settings-panel { position: static; width: min(calc(100% - 48px), 1280px); height: auto; margin: 12px auto 0; padding: 10px 14px; transform: none; transition: none; border: 1px solid var(--line); border-radius: 4px; box-shadow: none; }
.settings-header { padding: 0 0 6px; }
.settings-header h2 { font-size: .9rem; }
.settings-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px; padding: 8px 0; }
.settings-section { margin: 0; }
.settings-section h3 { margin: 0 0 6px; }
.settings-panel .setting-row { margin-bottom: 6px; }
.settings-footer { padding: 6px 0 0; }
.settings-reset { width: auto; }
@media (max-width: 640px) {
    .settings-panel { width: calc(100% - 32px); }
    .settings-content { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}