/* Truss atlas (/tools/truss-atlas/). Colours: tension = steel, compression = survey red (double line),
 * zero = grey dashed, loads = amber, reactions = green; never colour alone (T/C letters, line styles). */
.mx-atlas { --at-t: var(--mx-steel, #2A5A85); --at-c: var(--mx-survey, #C2362B); --at-z: #8A96A3; --at-load: var(--mx-brand-strong); --at-r: var(--mx-ok); --at-ink: var(--mx-ink); }
.mx-at-lib[hidden], .mx-at-view[hidden] { display: none !important; }

/* catalogue */
.mx-at-start { margin: 0 0 18px; }
.mx-at-path { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: none; }
.mx-at-path button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px 4px 6px; border: 1.5px solid var(--mx-line); border-radius: 999px; background: var(--mx-surface); color: var(--mx-ink); font: inherit; font-weight: 700; cursor: pointer; transition: border-color var(--mx-t-hover), transform var(--mx-t-press) var(--mx-ease-out); }
.mx-at-path button:hover { border-color: var(--mx-brand); }
.mx-at-path button:active { transform: scale(.97); }
.mx-at-step { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mx-brand); color: var(--mx-on-brand); font-family: var(--mx-font-tech, monospace); font-size: .875rem; }
.mx-at-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.mx-at-search { flex: 1 1 260px; }
.mx-at-search input, .mx-at-sel select, .mx-at-num select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-surface); color: var(--mx-ink); font: inherit; }
.mx-at-sel { display: inline-flex; align-items: center; gap: 8px; }
.mx-at-sel span { font-size: .875rem; color: var(--mx-ink-2, #3A4652); }
.mx-at-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 10px; }
.mx-at-seg > span { flex-basis: 100%; font-size: .875rem; font-weight: 700; }
.mx-at-cats { flex-basis: 100%; margin: 0; }
.mx-at-seg .mx-chip { min-height: 38px; padding: 6px 12px; font-size: .875rem; }
.mx-at-count { margin: 0; font-size: .875rem; color: var(--mx-ink-2, #3A4652); }
.mx-at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.mx-at-card { display: flex; flex-direction: column; text-align: start; padding: 0; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); background: var(--mx-surface); color: var(--mx-ink); font: inherit; cursor: pointer; overflow: hidden; transition: border-color var(--mx-t-hover), box-shadow var(--mx-t-hover), transform var(--mx-t-ui) var(--mx-ease-out); }
.mx-at-card:hover, .mx-at-card:focus-visible { border-color: var(--mx-brand); box-shadow: 0 14px 30px -22px rgba(13, 39, 66, .55); transform: translateY(-2px); }
.mx-at-card:active { transform: translateY(0) scale(.99); }
.mx-at-thumb { display: block; aspect-ratio: 760 / 440; background: var(--mx-paper); border-bottom: 1px solid var(--mx-line); }
.mx-at-thumb svg { display: block; width: 100%; height: 100%; }
.mx-at-card-b { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px; flex: 1; }
.mx-at-card-b b { font-size: 1.0625rem; line-height: 1.3; }
.mx-at-card-k { font-size: .8125rem; color: var(--mx-ink-2, #3A4652); }
.mx-at-en { font-size: .8125rem; color: var(--mx-ink-2, #55616D); font-weight: 400; }
.mx-at-learn { font-size: .875rem; line-height: 1.5; color: var(--mx-ink-2, #3A4652); flex: 1; }
.mx-at-badge { display: inline-block; align-self: flex-start; margin: 4px 0 0 6px; padding: 2px 8px; border-radius: 999px; background: var(--mx-tone); color: var(--mx-ink); font-size: .75rem; font-weight: 700; }
.mx-at-badge.is-calc { background: color-mix(in srgb, var(--mx-ok) 16%, transparent); color: var(--mx-ok); }
.mx-at-badge.is-illus { background: var(--mx-brand-soft); color: #7A4A00; }
.mx-at-badge.is-engine, .mx-at-badge.is-source { background: var(--mx-tone); color: var(--mx-ink-2, #3A4652); }
.mx-at-empty { grid-column: 1 / -1; }
/* thumbnails: drawn once; the hovered card redraws its members (no permanent animation) */
.mx-at-thumb .mx-at-bar { stroke: var(--at-ink); }
.mx-at-thumb .mx-at-m.is-t .mx-at-bar { stroke: var(--at-t); } .mx-at-thumb .mx-at-m.is-c .mx-at-bar { stroke: var(--at-c); }
@media (prefers-reduced-motion: no-preference) {
	.mx-at-card:hover .mx-at-thumb .mx-at-bar, .mx-at-card:focus-visible .mx-at-thumb .mx-at-bar, .mx-at-card:hover .mx-at-il { stroke-dasharray: 1; animation: mx-at-draw .7s var(--mx-ease-out) both; animation-delay: calc(var(--o, 0) * 14ms); }
}
.mx-at-more { margin: 28px 0 0; border-top: 1px solid var(--mx-line); padding-top: 12px; }
.mx-at-more summary { cursor: pointer; list-style: none; }
.mx-at-more summary h2 { display: inline; }
.mx-at-others { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.mx-at-oth { padding: 14px 16px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); background: var(--mx-surface); }
.mx-at-oth h3 { margin: 0 0 6px; font-size: 1.0625rem; }
.mx-at-oth ul { margin: 0; padding-inline-start: 18px; font-size: .9375rem; line-height: 1.8; }
.mx-at-need { font-size: .875rem; color: var(--mx-ink-2, #3A4652); margin: 8px 0 0; }
.mx-at-tablewrap { overflow-x: auto; }
.mx-at-cov { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mx-at-cov th, .mx-at-cov td { padding: 8px 10px; border-bottom: 1px solid var(--mx-line); text-align: start; vertical-align: top; }

/* workspace */
.mx-at-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 10px; }
.mx-at-title { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.2; }
.mx-at-badges { flex-basis: 100%; margin: 0; }
.mx-at-tabs { display: flex; gap: 2px; overflow-x: auto; margin: 0 0 14px; border-bottom: 1px solid var(--mx-line); scrollbar-width: thin; }
.mx-at-tabs button { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--mx-ink-2, #3A4652); font: inherit; font-weight: 700; cursor: pointer; transition: color var(--mx-t-hover), border-color var(--mx-t-ui) var(--mx-ease-out); }
.mx-at-tabs button[aria-selected="true"] { color: var(--mx-ink); border-bottom-color: var(--mx-brand); }
.mx-at-work { display: grid; gap: 18px; grid-template-columns: 1fr; grid-template-areas: "fig" "side" "ctrl"; }
.mx-at-figwrap { grid-area: fig; min-width: 0; }
.mx-at-ctrl { grid-area: ctrl; }
.mx-at-side { grid-area: side; min-width: 0; }
@media (min-width: 1100px) {
	.mx-at-work { grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "ctrl fig" "ctrl side"; }
}
.mx-at-ctrl fieldset { margin: 0 0 14px; padding: 0; border: 0; }
.mx-at-ctrl legend { margin: 0 0 6px; font-weight: 800; }
.mx-at-num { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: .9375rem; }
.mx-at-num-in { display: inline-flex; align-items: center; gap: 6px; }
.mx-at-num-in input { width: 88px; min-height: 40px; padding: 6px 8px; border: 1.5px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-surface); color: var(--mx-ink); font: 600 .9375rem var(--mx-font-tech, monospace); text-align: left; direction: ltr; }
.mx-at-num-in b { font-weight: 400; font-size: .8125rem; min-width: 34px; direction: ltr; }
.mx-at-num input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--mx-brand-strong); min-height: 28px; }
.mx-at-num select { grid-column: 1 / -1; }
.mx-at-tog { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: .9375rem; cursor: pointer; }
.mx-at-tog input { width: 18px; height: 18px; accent-color: var(--mx-brand-strong); }
.mx-at-fig { margin: 0; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); background: var(--mx-paper); overflow: hidden; }
.mx-at-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mx-at-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--mx-line); font-size: .8125rem; background: var(--mx-surface); }
.mx-at-legend span::before { content: ""; display: inline-block; width: 22px; height: 0; margin-inline-end: 6px; vertical-align: middle; border-top: 4px solid; }
.mx-at-legend .is-t::before { border-color: var(--at-t); }
.mx-at-legend .is-c::before { border-top: 6px double var(--at-c); }
.mx-at-legend .is-z::before { border-top: 2px dashed var(--at-z); }
.mx-at-legend .is-load::before { border-color: var(--at-load); width: 14px; }
.mx-at-legend .is-r::before { border-color: var(--at-r); width: 14px; }
.mx-at-legend button { margin-inline-start: auto; }
.mx-at-info { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); border: 1px solid var(--mx-line); }
.mx-at-ih { margin: 0 0 8px; font-size: 1.0625rem; }
.mx-at-ih small { font-weight: 400; color: var(--mx-ink-2, #3A4652); margin-inline-start: 6px; }
.mx-at-hint { margin: 6px 0 0; font-size: .8125rem; color: var(--mx-ink-2, #3A4652); }
.mx-at-fbd { display: block; width: 300px; max-width: 100%; margin: 0 auto 6px; }
.mx-at-eq { margin: 4px 0; font: .8125rem/1.6 var(--mx-font-tech, monospace); overflow-wrap: anywhere; text-align: left; }
.mx-at-res { display: grid; gap: 6px; margin: 0; }
.mx-at-res div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-radius: var(--mx-radius); background: var(--mx-paper); }
.mx-at-res div.is-key { background: var(--mx-blue); color: #EAF1F8; }
.mx-at-res dt { font-size: .9rem; }
.mx-at-res dd { margin: 0; font: 600 .9rem var(--mx-font-tech, monospace); white-space: nowrap; }
.mx-at-kind { margin: 0 0 8px; font-size: .8125rem; color: var(--mx-ink-2, #3A4652); }
.mx-at-out { transition: opacity var(--mx-t-ui); }
.mx-at-out.is-pending { opacity: 0; }
.mx-at-warn { padding: 12px 14px; border-radius: var(--mx-radius-lg); background: color-mix(in srgb, var(--mx-err) 10%, var(--mx-surface)); border-inline-start: 4px solid var(--mx-err); }
.mx-at-warn p { margin: 6px 0; }
.mx-at-note { padding: 12px 14px; border-radius: var(--mx-radius-lg); background: var(--mx-brand-soft); color: #4A2E00; }
.mx-at-course { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--mx-radius); background: var(--mx-brand-soft); font-size: .9375rem; color: #3E2700; }
.mx-at-modebox { margin: 14px 0 0; }
.mx-at-modebox p { line-height: 1.7; }
.mx-at-task { padding: 10px 12px; border-inline-start: 3px solid var(--mx-brand); background: var(--mx-surface); }
.mx-at-src { font-size: .875rem; color: var(--mx-ink-2, #3A4652); }
.mx-at-steps { margin: 0; padding-inline-start: 22px; line-height: 1.7; }
.mx-at-steps li { margin: 0 0 12px; }
.mx-at-q { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--mx-line); border-radius: var(--mx-radius-lg); background: var(--mx-surface); }
.mx-at-q p { margin: 0 0 6px; }
.mx-chip.is-right { border-color: var(--mx-ok); background: color-mix(in srgb, var(--mx-ok) 14%, transparent); }
.mx-chip.is-wrong { border-color: var(--mx-err); background: color-mix(in srgb, var(--mx-err) 10%, transparent); }
.mx-at-why { font-size: .9375rem; }
.mx-at-cmpfig { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 8px 0; }
.mx-at-cmpfig figure { margin: 0; border: 1px solid var(--mx-line); border-radius: var(--mx-radius); background: var(--mx-paper); }
.mx-at-cmpfig svg { display: block; width: 100%; height: auto; }
.mx-at-cmpfig figcaption { padding: 4px 8px; font-size: .8125rem; font-weight: 700; }

/* drawing */
.mx-at-svg text, .mx-at-fbd text { font-family: var(--mx-font-tech, monospace); font-size: calc(13px * var(--fs, 1)); font-weight: 600; fill: var(--mx-ink); direction: ltr; }
.mx-at-load.is-eq { stroke-width: 1.8; stroke-dasharray: 3 2; }
.mx-at-load.is-eq-t { font-size: calc(11px * var(--fs, 1)) !important; }
.mx-at-grid path { stroke: var(--mx-line); stroke-width: .6; opacity: .55; fill: none; }
.mx-at-bar { stroke: var(--at-ink); stroke-linecap: round; fill: none; }
.mx-at-m.is-t .mx-at-bar { stroke: var(--at-t); }
.mx-at-m.is-c .mx-at-bar { stroke: var(--at-c); }
.mx-at-m.is-c .mx-at-core { stroke: var(--mx-paper); stroke-linecap: round; }
.mx-at-m.is-z .mx-at-bar { stroke: var(--at-z); stroke-dasharray: 6 5; stroke-width: 2.2; }
.mx-at-m.is-r .mx-at-bar { stroke: var(--at-z); stroke-dasharray: 2 6; opacity: .7; }
.mx-at-m.is-u .mx-at-bar { stroke: var(--at-ink); opacity: .55; }
.mx-at-hit { stroke: transparent; stroke-width: 16; fill: transparent; cursor: pointer; }
.mx-at-m:focus { outline: none; }
.mx-at-m:focus-visible .mx-at-bar, .mx-at-m.is-sel .mx-at-bar { filter: drop-shadow(0 0 3px var(--mx-focus)); }
.mx-at-m.is-sel .mx-at-bar { stroke-opacity: 1; }
.mx-at-flbl rect { fill: var(--mx-surface); stroke: var(--mx-line); }
.mx-at-flbl text { font-size: calc(11px * var(--fs, 1)); }
.mx-at-flbl.is-t text { fill: var(--at-t); } .mx-at-flbl.is-c text { fill: var(--at-c); } .mx-at-flbl.is-z text { fill: var(--at-z); }
.mx-at-j circle:first-child { fill: var(--mx-surface); stroke: var(--at-ink); stroke-width: 2; }
.mx-at-j.is-hinge circle:first-child { fill: var(--mx-brand); }
.mx-at-j.is-sel circle:first-child, .mx-at-j:focus-visible circle:first-child { stroke: var(--mx-focus); stroke-width: 3; }
.mx-at-j:focus { outline: none; }
.mx-at-j.is-free circle:first-child { fill: var(--mx-err); }
.mx-at-nid { font-size: calc(11px * var(--fs, 1)) !important; fill: var(--mx-ink-2, #3A4652) !important; }
.mx-at-tri { fill: var(--mx-tone); stroke: var(--at-ink); stroke-width: 1.6; stroke-linejoin: round; }
.mx-at-roll { fill: var(--mx-surface); stroke: var(--at-ink); stroke-width: 1.5; }
.mx-at-ground, .mx-at-wall { stroke: var(--at-ink); stroke-width: 2; }
.mx-at-hatch { stroke: var(--at-ink); stroke-width: 1; opacity: .6; }
.mx-at-pinhead { fill: var(--mx-surface); stroke: var(--at-ink); stroke-width: 2.4; }
.mx-at-load, .mx-at-pline { stroke: var(--at-load); stroke-width: 2.6; }
.mx-at-load-head, .mx-at-phead { fill: var(--at-load); }
.mx-at-load-t { fill: var(--at-load) !important; }
.mx-at-r { stroke: var(--at-r); stroke-width: 2.6; }
.mx-at-r-head { fill: var(--at-r); }
.mx-at-r-t { fill: var(--at-r) !important; }
.mx-at-mov { cursor: grab; }
.mx-at-mov:active { cursor: grabbing; }
.mx-at-grip { fill: var(--mx-brand); stroke: var(--mx-surface); stroke-width: 3; }
.mx-at-mov:focus { outline: none; }
.mx-at-mov:focus-visible .mx-at-grip { stroke: var(--mx-focus); }
.mx-at-xlbl { fill: var(--mx-ink-2, #3A4652) !important; font-size: calc(12px * var(--fs, 1)) !important; }
.mx-at-deck line { stroke: var(--at-ink); stroke-width: 1.4; opacity: .55; }
.mx-at-q-t { fill: var(--at-load) !important; }
.mx-at-def line { stroke: #6B3FA0; stroke-width: 2; stroke-dasharray: 3 3; opacity: .9; }
.mx-at-scale { font-size: calc(12px * var(--fs, 1)) !important; fill: #6B3FA0 !important; }
.mx-at-freering { fill: none; stroke: var(--mx-err); stroke-width: 2.5; stroke-dasharray: 4 3; }
.mx-at-nod { fill: var(--mx-ink-2, #3A4652) !important; font-family: var(--mx-font) !important; font-size: 18px !important; }
.mx-at-il { stroke: var(--at-ink); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.mx-at-il.role-tie, .mx-at-il.role-counter { stroke: var(--at-t); stroke-width: 1.6; }
.mx-at-il.role-arch { stroke: var(--mx-rust, #9A4A1E); stroke-width: 4; }
.mx-at-il.role-deck { stroke: var(--mx-brand-strong); stroke-width: 2; }
.mx-at-plane { fill: var(--mx-brand-soft); opacity: .7; }
.mx-at-room { fill: var(--mx-steel-soft, #E4ECF4); }
/* context ("where you meet it") */
.mx-at-ctx { opacity: 1; transition: opacity .6s; }
.mx-at-ctx.is-intro { animation: mx-at-ctx 1.4s var(--mx-ease-out) both; }
.mx-at-bank { fill: #C9B79C; opacity: .55; stroke: none; }
.mx-at-water { fill: none; stroke: #6E9CC4; stroke-width: 2.4; opacity: .7; }
.mx-at-slab { fill: #9AA5B1; opacity: .45; }
.mx-at-wallb { fill: #C9B79C; opacity: .55; }
.mx-at-cover { fill: none; stroke: #9A4A1E; stroke-width: 5; opacity: .45; stroke-linejoin: round; }
@keyframes mx-at-ctx { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
/* "how it is built" highlight */
.mx-at-svg.is-hl .mx-at-m:not(.is-lit) { opacity: .18; }
.mx-at-svg.is-hl .mx-at-m.is-lit .mx-at-bar { stroke-width: 5; }
.mx-at-svg.hl-joints .mx-at-m, .mx-at-svg.hl-sup .mx-at-m { opacity: .25; }
.mx-at-svg.hl-joints .mx-at-j circle:first-child { r: 7; fill: var(--mx-brand); }
.mx-at-svg.hl-sup .mx-at-sup { filter: drop-shadow(0 0 4px var(--mx-brand)); }

/* building a model: supports, joints, members (in construction order), loads, then results */
@keyframes mx-at-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mx-at-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mx-at-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.mx-at-svg.is-building .mx-at-sup { animation: mx-at-fade .25s var(--mx-ease-out) both; }
	.mx-at-svg.is-building .mx-at-j { transform-box: fill-box; transform-origin: center; animation: mx-at-pop .28s var(--mx-ease-out) both; animation-delay: calc(120ms + var(--o) * 18ms); }
	.mx-at-svg.is-building .mx-at-bar { stroke-dasharray: 1; animation: mx-at-draw .42s var(--mx-ease-out) both; animation-delay: calc(260ms + var(--o) * 22ms); }
	.mx-at-svg.is-building .mx-at-m .mx-at-core, .mx-at-svg.is-building .mx-at-flbl { animation: mx-at-fade .3s both; animation-delay: 1000ms; }
	.mx-at-svg.is-building .mx-at-m.is-t .mx-at-bar, .mx-at-svg.is-building .mx-at-m.is-c .mx-at-bar { animation-name: mx-at-draw-solve; }
	.mx-at-svg.is-building .mx-at-loads, .mx-at-svg.is-building .mx-at-mov, .mx-at-svg.is-building .mx-at-q { animation: mx-at-fade .3s both; animation-delay: 800ms; }
	.mx-at-svg.is-building .mx-at-reac, .mx-at-svg.is-building .mx-at-def { animation: mx-at-fade .3s both; animation-delay: 1050ms; }
	@keyframes mx-at-draw-solve { 0% { stroke-dashoffset: 1; stroke: var(--at-ink); } 70% { stroke-dashoffset: 0; stroke: var(--at-ink); } 100% { stroke-dashoffset: 0; } }
	.mx-at-svg.is-building .mx-at-m.is-z .mx-at-bar { stroke-dasharray: 6 5; animation: mx-at-fade .4s both; animation-delay: calc(260ms + var(--o) * 22ms); }
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .mx-atlas { --at-t: #7FB2E5; --at-c: #FF8A7A; --at-z: #8A96A3; }
	:root:not([data-theme="light"]) .mx-at-def line { stroke: #C7A6F0; } :root:not([data-theme="light"]) .mx-at-scale { fill: #C7A6F0 !important; }
}
:root[data-theme="dark"] .mx-atlas { --at-t: #7FB2E5; --at-c: #FF8A7A; }
@media print { .mx-at-tabs, .mx-at-ctrl, .mx-at-lib { display: none !important; } }
/* free-body diagram arrows: tension pulls away from the joint, compression pushes towards it */
.mx-at-fbd-bar { stroke: var(--mx-line); stroke-width: 1.4; stroke-dasharray: 3 3; }
.mx-at-fbd-j { fill: var(--mx-ink); }
.mx-at-fa { stroke-width: 2.6; stroke: var(--at-ink); }
.mx-at-fa.is-t { stroke: var(--at-t); } .is-t-head { fill: var(--at-t); } .is-t-t { fill: var(--at-t) !important; }
.mx-at-fa.is-c { stroke: var(--at-c); } .is-c-head { fill: var(--at-c); } .is-c-t { fill: var(--at-c) !important; }
.mx-at-fa.is-l { stroke: var(--at-load); } .is-l-head { fill: var(--at-load); } .is-l-t { fill: var(--at-load) !important; }
.mx-at-fa.is-r { stroke: var(--at-r); } .is-r-head { fill: var(--at-r); } .is-r-t { fill: var(--at-r) !important; }
.mx-at-fa-head { fill: var(--at-ink); }
.mx-at-fbd-t { fill: var(--at-z) !important; }
.is-eq-head { fill: var(--at-load); }
.mx-at-mov line, .mx-at-mov path, .mx-at-mov text, .mx-at-loads, .mx-at-reac, .mx-at-q, .mx-at-deck, .mx-at-ctx, .mx-at-def { pointer-events: none; }
/* layout stability: room for the catalogue before the script fills it (CLS was 0.29–0.39) */
.mx-atlas:not(.is-ready) .mx-at-path { min-height: 96px; }
.mx-atlas:not(.is-ready) .mx-at-cats { min-height: 44px; }
.mx-atlas:not(.is-ready) .mx-at-grid { min-height: 1400px; }
.mx-at-thumb { contain: strict; }

/* 19.10.2026 (owner): shape on the drawing, steppers, coloured sliders. Typing stays. */
.mx-at-geo { cursor: grab; outline: none; }
.mx-at-geo.is-L { --gc: #1D6FD8; cursor: ew-resize; }
.mx-at-geo.is-h { --gc: #1E8A4C; cursor: ns-resize; }
.mx-at-geo-dot { fill: var(--gc); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 3px 6px rgba(13, 39, 66, .35)); transition: r 160ms ease; }
.mx-at-geo-ic { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.mx-at-geo-t { fill: var(--gc); font-weight: 800; font-size: calc(13px * var(--fs, 1)); pointer-events: none; paint-order: stroke; stroke: var(--mx-surface, #fff); stroke-width: 4px; }
.mx-at-geo:hover .mx-at-geo-dot, .mx-at-geo:focus-visible .mx-at-geo-dot { r: 16; }
.mx-at-geo:focus-visible .mx-at-geo-dot { stroke: var(--mx-ink, #10181F); }
svg.is-shaping { cursor: grabbing; }
svg.is-shaping .mx-at-m { transition: none !important; }
@media (prefers-reduced-motion: no-preference) { .mx-at-geo .mx-at-geo-dot { animation: mx-at-geo-pulse 2.6s ease-in-out infinite; } }
@keyframes mx-at-geo-pulse { 0%, 100% { stroke-width: 3; } 50% { stroke-width: 6; } }
.mx-at-num-in { display: flex; align-items: center; gap: 6px; }
.mx-at-step { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--mx-line, #CDD5DD); background: var(--mx-surface, #fff); font: 800 1.125rem/1 inherit; color: var(--mx-ink, #10181F); cursor: pointer; display: grid; place-items: center; transition: background-color 150ms ease, border-color 150ms ease, transform 120ms ease; }
.mx-at-step:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .mx-at-step:hover { border-color: var(--mx-brand, #F5A000); background: var(--mx-brand-soft, #FFF4DC); } }
.mx-at-num input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; border-radius: 99px; background: linear-gradient(to left, var(--mx-at-c, #F5A000) var(--pct, 50%), var(--mx-tone, #ECEFF3) var(--pct, 50%)); }
.mx-at-num input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--mx-at-c, #F5A000); box-shadow: 0 2px 6px rgba(13, 39, 66, .3); cursor: grab; }
.mx-at-num input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--mx-at-c, #F5A000); cursor: grab; }
.mx-at-num[data-num="p.L"] { --mx-at-c: #1D6FD8; }
.mx-at-num[data-num="p.h"] { --mx-at-c: #1E8A4C; }
.mx-at-num[data-num="P"], .mx-at-num[data-num="x"] { --mx-at-c: #F5A000; }
.mx-at-num[data-num="q"] { --mx-at-c: #C2410C; }
.mx-at-num[data-num="E"], .mx-at-num[data-num="A"] { --mx-at-c: #6D28D9; }
.mx-at-geo-lead { stroke: var(--gc); stroke-width: 1.5; stroke-dasharray: 3 3; pointer-events: none; }
.mx-at-geo:focus-visible { outline: none; }
.mx-at-geo:focus-visible .mx-at-geo-dot { stroke: var(--mx-ink, #10181F); stroke-width: 4; }