/* font.css — single home for all typography. Generated by tools/_fontgen.js,
   then hand-tuned. Loaded BEFORE styles.css. All app font-size lives here.

   - --fs-* / --icon-* vars are the knobs; grouped rules below bind selectors.
     Edit a size in ONE place: its :root base below.
   - The -/+ UI buttons step every --fs-* along a shared size ladder (good sizes only,
     skips blurry ones), as an offset from base — handler in js/ui-init-startup.js.
     Export vars (--fs-export-*) are NOT stepped.
   - Icons are inline SVG sized by --icon-*; fixed by default, switch a group to
     var(--fs-*) to make it follow text. */

@font-face {
	font-family: "PT_Sans-Web-Regular";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/pt-sans-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "PT_Sans-Web-Regular";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/pt-sans-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "PT_Sans-Web-Regular";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/pt-sans-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "PT_Sans-Web-Regular";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/pt-sans-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--font-ui: "PT_Sans-Web-Regular", "pt-sans", "PT Sans", "PTSans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
	--font-mono: "Consolas", "Menlo", monospace;

	/* default level (= level 2) */
	--fs-heading: 22px;
	--fs-glyph: 18px;
	--fs-title: 14px;
	--fs-control: 14px;
	--fs-body: 14px;
	--fs-tab: 15px;
	--fs-menu: 14px;
	--fs-table: 14px;
	--fs-small: 12px;
	--fs-hint: 12px;
	--fs-badge: 10px;
	--fs-micro: 10px;
	--fs-mono: 12px;
	--fs-canvas-label: 12px;
	--fs-canvas-heading: 14px;
	--fs-popup: 14px;
	--fs-popup-small: 12px;
	--fs-sim-info: 14px;
	--fs-graph: 13px;
	--fs-export-label: 14px;
	--fs-export-chart: 14px;

	/* icon sizes — fixed; set to var(--fs-*) to follow text */
	--icon-tool: 14px;
	--icon-inline: 14px;
	--icon-sm: 12px;

	/* Top bar (#tabs) height — derived from the tab font so it grows with the −/+ font
	   step (--fs-tab is stepped). Layout offsets (#simulation / #parameters / #settings
	   heights) and #toolbar-top subtract/use this, so they all track the font. */
	--topbar-h: calc(var(--fs-tab) + 30px);
}

/* The −/+ UI font buttons do NOT hardcode level tables. They step every --fs-* var
   above along a shared ladder of "good" sizes (skipping blurry ones like 13px), as an
   offset from these base values — handler in js/ui-init-startup.js. Edit a size in ONE
   place: the :root base above. */

* {
	font-family: var(--font-ui);
	line-height: 1.5;
}

/* ===== grouped font-size (every rule references a var) ===== */
h2 {
	font-size: var(--fs-heading);
}

#loop-edit-toolbar button,
#loop-edit-toolbar .step-btn,
#tools button#loop-edit-tool,
.InversionZoneRow .InversionDeleteButton,
.InversionZoneRow .InversionToggleButton,
.add-row,
.amplifier-warning-legend .legend-symbol,
.change-password-row,
.compose-table-editor-head .cte-close,
.floating-window-close,
.layer-row .layer-rule-tilt-icon,
.modal-close,
.remove-row,
.stash-btn,
.step-btn,
.toast-close {
	font-size: var(--fs-glyph);
}

#right-top-window b,
.compose-objects h4,
.compose-sidebar h4,
.compose-topbar .compose-title,
.content b,
.dxf-export-head .dxf-export-title,
.floating-window-title,
.layer-row .layer-rule-remove,
.meCellClose,
.modal-title,
.qvm-detail-head h3,
.qvm-panel-detail .qvm-section-title,
.qvm-panel-detail .qvm-section-title::after,
.qvm-section-title {
	font-size: var(--fs-title);
}

#InversionOptimize,
#InversionAccept,
#InversionReject,
#InversionCancel,
#InversionImportTemplate,
#InversionManageTemplates,
#cross-section-fullscreen-btn,
#z-profile-fullscreen-btn,
#cross-section-warning,
#frequency-response-content .frequency-response-loop-title,
#inversion-toolbar button,
#layers-editor,
#loop-table input,
#loop-table select,
#markings-toolbar button,
#progress-text,
#session-switch-menu,
#tools button,
.InversionArchParamReset,
.InversionArchSettingsToggle,
.InversionMapBinsRow input[type="number"],
.InversionMapBinsRow select,
.InversionPanel,
.InversionPanel select,
.Toast,
.compose-list-remove,
.compose-objlist-remove,
.compose-table-editor-head span,
.compose-zoom-hud button,
.defaults-row .defaults-label,
.defaults-row input.short-field,
.dxf-group .dxf-row,
.export-link,
.floating-window,
.loop-name,
.modal-box,
.modal-buttons button,
.modal-field input[type=text],
.modal-field input[type=password],
.modal-field select,
.modal-field label,
.qvm-export-body,
.qvm-panel-root,
.session-header b,
.session-pagination button,
.viewer-3d-toolbar button,
.work-estimate,
html,
body,
input[type="button"] {
	font-size: var(--fs-control);
}

.InversionTab,
.rw-tab,
.tab {
	font-size: var(--fs-tab);
}

/* Form controls AND <table> don't inherit font-size from their container (they reset to
   a UA fixed default — controls ~13px, tables `medium` 16px), so an unstyled control
   (e.g. #default-wire) or table (e.g. #loop-table, whose th/td then inherit 16px) never
   scales with the UI. Bind them to the control size; region rules above are more specific
   and still win where set. */
button,
input,
select,
textarea,
table {
	font-size: var(--fs-control);
}

.menu,
.menu #export-file-name,
.settings-dropdown-item,
.user-dropdown-item {
	font-size: var(--fs-menu);
}

#autoTargetLayer,
#autoTargetLayerFront,
#compose-qvm-type,
.compose-filename-input,
#dxf-export-summary,
#export-base-zlayer,
#export-canvas-size-value,
#layers-buttons button,
#loops-info-content table,
#frequency-response-content .frequency-response-table,
#markings-toolbar,
#remove-all-sessions-btn,
#new-session-btn,
#load-session-btn,
#remove-buttons>button,
#sim-statusbar,
#sim-statusbar-abort,
.InversionArchetype,
.InversionArchetypeSelect,
.InversionArchetypeSettings,
.InversionLoopTitle,
.InversionPanel button,
.amplifier-warning-legend,
.amplifier-warning-legend .legend-title,
.compose-list-item span,
.compose-mark-popup .cmk-lbl,
.compose-mark-popup .cmk-row,
.compose-mark-popup button,
.compose-mark-popup select,
.compose-mark-popup input[type="number"],
.compose-mark-popup textarea,
.compose-objlist-item span,
.compose-selpopup-btns button,
.compose-selpopup-row label,
.compose-selpopup-tablerow button,
.compose-selpopup-imgrow button,
.compose-selpopup-datarow button,
.compose-table-editor input,
.compose-table-editor-head .cte-add,
.compose-tool,
.compose-topbar input,
.compose-topbar label,
.compose-zoom-hud span,
.composition-btn,
.cte-del,
.dxf-group .dxf-subrow,
.dxf-group legend,
.export-body #export-canvas-size-slider,
.export-body .export-zlayer-row,
.export-dialog .mangler-legend span,
.file-drop-selected,
.floating-window-action,
.layer-row .field,
.layer-row label,
.mangler-piece,
.qvm-bind-btn,
.qvm-bound-note,
.qvm-brief-value table,
.qvm-company .qvm-brief-value,
.qvm-panel-detail .qvm-section-bordered .qvm-brief-value,
.qvm-contact-name,
.qvm-existing-empty,
.qvm-existing-list li,
.qvm-export-name,
.qvm-export-type,
.qvm-export-warn,
.qvm-file-download,
.qvm-file-name,
.qvm-meta,
.qvm-task-name,
.qvm-unbind-btn,
.session-pagination,
.session-row,
.stash-btn::before,
#loop-edit-toolbar {
	font-size: var(--fs-table);
}

#z-height-label {
	font-size: var(--fs-canvas-heading);
}

#compose-image-upload,
#toolbar-top .output-section-spacer,
#toolbar-top .output-tool,
#sim-statusbar-log,
.InversionLocksContainer,
.InversionLoopControls,
.InversionLoopControls select,
.InversionModeBtn,
.InversionZoneRow button,
.InversionZoneRow input[type=number],
.compose-selpopup-hint,
.composition-thumb-btns button,
.composition-thumb-cap,
.loop-current-frame .loop-phase-shift-label,
.loop-current-frame .loop-wire,
.mangler-cut,
.meCellHeader,
.qvm-company .qvm-brief-label,
.qvm-panel-detail .qvm-section-bordered .qvm-brief-label,
.qvm-export-row-warn,
.qvm-file-import,
.qvm-task-bind,
.session-attention,
.session-buttons button,
.session-title-task,
.viewer-3d-proj,
.viewer-3d-check,
.viewer-3d-radio-group,
.z-layer-group-angle {
	font-size: var(--fs-small);
}

#session-switch-menu .ssm-task,
.InversionHint,
.InversionTabEmptyHint,
.InversionZoneListHint,
.compose-list-empty,
.composition-empty,
.layer-row .layer-rule-count-label,
.loop-current-frame .loop-current,
.loop-current-frame .loop-turns,
.loop-title>.loop-name-cell,
.mangler-note,
.qvm-task-meta,
.session-empty,
.session-time {
	font-size: var(--fs-hint);
}

#tools .tool-label,
.InversionGalleryCard,
.color-palette .palette-bar,
.meCard,
.meCard.refined::after,
.qvm-file-source,
.session-task-badge,
.viewer-3d-slider,
.viewer-3d-vecsel,
button#qvm-export-tool text,
button#dxf-export-tool text {
	font-size: var(--fs-badge);
}

.InversionMapElitesGridCell .meBadge,
.compose-mark-popup .cmk-group,
.compose-selpopup-grouplabel,
.unit {
	font-size: var(--fs-micro);
}

.layer-row .layer-rule-preview,
.meCardMeta,
.meCardMeta .meRank {
	font-size: var(--fs-mono);
}

.axis-line-label,
.cross-section-label,
.observation-label,
.strength-palette-tick,
.z-layer-label {
	font-size: var(--fs-canvas-label);
}

/* Simulation-info panel — its own group. EVERYTHING inside comes from --fs-sim-info,
   incl. JS-built content (loop-current controls, #indicators) that otherwise matches
   more-specific group rules or carries an inline font-size. !important overrides both. */
.simulation-info,
.simulation-info * {
	font-size: var(--fs-sim-info) !important;
}

.InversionSectionReset {
	font-size: var(--fs-control) !important;
}

#cross-section-warning b,
.add-row-select {
	font-size: inherit;
}

/* ===== font-weight ===== */
.compose-mark-popup .cmk-group,
.compose-selpopup-grouplabel,
.modal-field label {
	font-weight: 600;
}

#InversionOptimize,
#InversionAccept,
#inversion-toolbar button.active,
#progress-text,
#session-switch-menu .ssm-active,
.InversionArchParamBound--modified,
.InversionArchSettingsName,
.InversionArchSettingsTitle,
.InversionArchSettingsToggle,
.InversionArchetypeSelect>span,
.InversionLoopTitle,
.InversionMapElitesGridCell.hasBestFitness > .meBadge,
.InversionModeBtn.active,
.InversionPanel b,
.InversionPanel button.active,
.InversionTab.active,
.amplifier-warning-legend .legend-symbol,
.amplifier-warning-legend .legend-title,
.compose-dim-x,
.compose-table-editor-head span,
.compose-topbar .compose-title,
.content b,
.defaults-group legend,
.dxf-export-head .dxf-export-title,
.dxf-group legend,
.export-body .export-zlayer-row label,
.export-dialog .mangler-legend span,
.floating-window-title,
.layer-row .layer-rule-type,
.layer-row.layer-tilted .layer-rule-tilt-icon,
.meCard.pareto .meRank,
.meCellHeader,
.modal-buttons .modal-ok,
.modal-title,
.qvm-brief-label,
.qvm-company-name,
.qvm-contact-name,
.qvm-file-name,
.qvm-section-title,
.qvm-task-name,
.session-name,
.work-estimate.tall #work-estimate-value,
.work-estimate.tall #test-grid-size-value,
.z-layer-label.active,
button#qvm-export-tool text,
button#dxf-export-tool text {
	font-weight: bold;
}

.InversionLoopTitle label,
.qvm-company .qvm-brief-label,
.qvm-panel-detail .qvm-section-bordered .qvm-brief-label,
.qvm-file-source,
.qvm-file-type,
.session-title-task,
fieldset.loop-current-frame>.loop-title {
	font-weight: normal;
}

/* ===== font-family ===== */
#toolbar-top .output-tool,
#tools .tool-label,
.layer-row .layer-rule-preview,
.meCardMeta,
.z-layer-group-angle,
.z-layer-label,
button#qvm-export-tool text,
button#dxf-export-tool text {
	font-family: var(--font-mono);
}

.add-row-select,
.layer-row .field,
.session-attention {
	font-family: inherit;
}

.popup,
.popup button,
.popup input,
.popup textarea,
.popup select,
#remove-buttons>button,
#session-switch-menu,
#sim-statusbar,
#sim-statusbar-abort,
.axis-line-label,
.cross-section-label,
.observation-label {
	font-family: var(--font-ui);
}

/* line-height preserved from former `font:` shorthands (our * sets 1.5) */
.popup,
.popup button,
.popup input,
.popup textarea,
.popup select,
#toolbar-top .output-tool,
#remove-buttons>button,
#session-switch-menu,
#sim-statusbar,
#sim-statusbar-abort,
.axis-line-label,
.cross-section-label,
.observation-label,
button#qvm-export-tool text,
button#dxf-export-tool text {
	line-height: normal;
}

/* ===== icon sizing (inline SVG width/height) — all step with the UI font ===== */
/* Broad base: every icon inside a button/label/summary scales. More specific rules
   below (compose/floating/viewer) set their own size; both step on the font ladder. */
button > svg,
label > svg,
summary > svg { width: var(--icon-tool); height: var(--icon-tool); }
#tools .tool-row > button > svg { width: var(--icon-tool); height: var(--icon-tool); }
.floating-window-action svg,
.floating-window-close svg,
.compose-tool svg,
.compose-objlist-icon svg,
.compose-selpopup svg,
.compose-selpopup-row label svg,
.compose-selpopup-datarow button svg,
.compose-mark-popup svg,
.stash-corner-btn svg,
.stash-inline-btn svg,
.viewer-3d-toolbar button svg { width: var(--icon-inline); height: var(--icon-inline); }
/* loop current-direction arrows (inline SVG, was nuoli*.png) */
.current-arrow,
.loop-current-direction { width: 22px; height: 16px; cursor: pointer; vertical-align: middle; }
