/* MarathonX engineering lab (/tools/ and /tools/<tool>/). Uses the tokens from mx.css. */

/* ---------- layout: side rail + main ---------- */
.mx-tools-page, .mx-tool-page { padding-block: 8px var(--mx-section); }
.mx-tool-page { padding-top: clamp(20px, 3vw, 36px); }
.mx-lab-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.mx-lab-main { min-width: 0; }
.mx-lab-side { position: sticky; top: 92px; display: grid; gap: 4px; padding: 14px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-tone-2); }
.mx-lab-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mx-lab-side a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 8px; border-radius: var(--mx-radius); color: var(--mx-ink); text-decoration: none; font-weight: 600; transition: background var(--mx-t-hover) ease; }
.mx-lab-side a .mx-tools-ico { width: 40px; height: 30px; padding: 2px; flex: none; }
@media (hover: hover) and (pointer: fine) { .mx-lab-side a:hover { background: var(--mx-paper); } }
.mx-lab-side a.is-on { background: var(--mx-blue); color: #fff; }
.mx-lab-side a.is-on .mx-tools-ico { background: rgba(255, 255, 255, .1); color: #fff; }
.mx-lab-side-home { font-weight: 800 !important; }
.mx-lab-side-k { margin: 12px 8px 2px; font-size: .8125rem; font-weight: 700; color: var(--mx-ink-3); }
.mx-lab-side-ask { margin-top: 10px; justify-content: center; color: var(--mx-brand-strong) !important; box-shadow: inset 0 0 0 1.5px var(--mx-brand); }
@media (max-width: 960px) {
	.mx-lab-layout { grid-template-columns: 1fr; }
	.mx-lab-side { position: static; display: flex; gap: 6px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
	.mx-lab-side::-webkit-scrollbar { display: none; }
	.mx-lab-side ul { display: flex; gap: 6px; }
	.mx-lab-side a { white-space: nowrap; flex: none; }
	.mx-lab-side a .mx-tools-ico, .mx-lab-side-k { display: none; }
	.mx-lab-side-ask { margin-top: 0; }
}

/* ---------- cards on the library page ---------- */
.mx-tools-domain { margin: clamp(28px, 4vw, 44px) 0 12px; }
.mx-tools-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.mx-tools-card { display: flex; flex-direction: column; border-radius: var(--mx-radius-lg); background: var(--mx-surface); box-shadow: inset 0 0 0 1px var(--mx-tone-2); transition: box-shadow var(--mx-t-hover) ease, transform var(--mx-t-press) var(--mx-ease-out); }
@media (hover: hover) and (pointer: fine) { .mx-tools-card:hover { box-shadow: inset 0 0 0 2px var(--mx-brand); } }
.mx-tools-card:active { transform: scale(.98); }
.mx-tools-card-main { display: grid; gap: 8px; padding: 18px 18px 8px; color: var(--mx-ink); text-decoration: none; }
.mx-tools-card-main .mx-tools-ico { width: 72px; height: 54px; }
.mx-tools-card h3 { margin: 4px 0 0; font-size: 1.1875rem; font-weight: 800; }
.mx-tools-card p { margin: 0; color: var(--mx-ink-2); font-size: .9375rem; line-height: 1.55; }
.mx-tools-task { padding: 8px 10px; border-radius: var(--mx-radius); background: var(--mx-paper); color: var(--mx-ink) !important; }
.mx-tools-card-course { margin: auto 18px 16px !important; padding-top: 10px; font-size: .875rem !important; }
.mx-tools-card-course a { color: var(--mx-ink); font-weight: 700; }
.mx-tools-ico { display: block; width: 64px; height: 48px; padding: 4px; border-radius: var(--mx-radius); background: var(--mx-paper); color: var(--mx-ink); }
.mx-tools-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: clamp(32px, 5vw, 56px) 0; }
.mx-tools-info > div { padding: 20px 22px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); }
.mx-tools-info ul { margin: 10px 0 0; padding-inline-start: 20px; color: var(--mx-ink-2); display: grid; gap: 6px; }
.mx-tools-faq { margin-top: clamp(32px, 5vw, 56px); }
.mx-tools-faq details { border-bottom: 1px solid var(--mx-tone-2); }
.mx-tools-faq summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.mx-tools-faq details p { margin: 0 0 14px; color: var(--mx-ink-2); }
.mx-tools-cta { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.mx-tools-ask { padding: clamp(22px, 3vw, 30px); border-radius: var(--mx-radius-lg); background: var(--mx-rust-soft); }
.mx-tools-ask p { margin: 8px 0 18px; }
@media (max-width: 860px) { .mx-tools-cta { grid-template-columns: 1fr; } }
.mx-tools-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: clamp(28px, 4vw, 44px); }
.mx-tools-nav a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 0 10px; align-items: center; padding: 10px 12px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); color: var(--mx-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--mx-tone-2); }
.mx-tools-nav a .mx-tools-ico { grid-row: span 2; width: 48px; height: 36px; }
.mx-tools-nav a span { color: var(--mx-ink-3); font-size: .875rem; }

/* ---------- share box ---------- */
.mx-lab-share { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 22px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: var(--mx-radius-lg); overflow: hidden; color: #EAF1F8; background-color: #0D2742; background-color: var(--mx-blue); background-image: linear-gradient(rgba(234, 241, 248, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(234, 241, 248, .06) 1px, transparent 1px); background-size: 20px 20px; }
.mx-lab-share-art { width: 160px; height: auto; }
.mx-lab-share-k { margin: 0; font-family: var(--mx-font-tech); font-size: .875rem; color: var(--mx-brand); }
.mx-lab-share .mx-h3 { margin: 4px 0 8px; color: #fff; }
.mx-lab-share p { margin: 0 0 10px; }
.mx-lab-share-code { padding: 10px 12px; border-radius: var(--mx-radius); background: rgba(234, 241, 248, .08); font-size: .9375rem; }
.mx-lab-share-code b { color: var(--mx-brand); font-family: var(--mx-font-tech); }
.mx-lab-share-code a { color: #fff; font-weight: 700; }
.mx-lab-share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mx-lab-share .mx-btn-line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(234, 241, 248, .5); }
.mx-tool-page .mx-lab-share { margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 640px) { .mx-lab-share { grid-template-columns: 1fr; } .mx-lab-share-art { width: 120px; } }

/* ---------- a tool ---------- */
.mx-tool-crumbs { margin-bottom: 14px; font-size: .9375rem; color: var(--mx-ink-3); }
.mx-tool-crumbs a { color: var(--mx-ink-2); }
.mx-tool { scroll-margin-top: 96px; padding: clamp(18px, 2.6vw, 30px); margin: 0 0 clamp(24px, 3vw, 36px); border-radius: var(--mx-radius-lg); background: var(--mx-surface); }
.mx-tool-head { max-width: 72ch; margin-bottom: 18px; }
.mx-tool-head .mx-h1 { margin: 6px 0 10px; font-size: clamp(2rem, 4vw, 3rem); }
.mx-tool-k { margin: 0 0 6px; font-family: var(--mx-font-tech); color: var(--mx-brand-strong); font-weight: 600; font-size: .9375rem; }
.mx-tool-head .mx-h2 { margin: 0 0 6px; }
.mx-tool-lead { margin: 0; color: var(--mx-ink-2); font-size: 1.0625rem; }
.mx-tool-body { display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr); grid-template-areas: "ctrl fig" "out fig"; gap: 16px 26px; align-items: start; }
.mx-tool-ctrl { grid-area: ctrl; display: grid; gap: 12px; }
.mx-tool-fig { grid-area: fig; margin: 0; border-radius: var(--mx-radius); background: var(--mx-paper); overflow: hidden; }
.mx-tool-cap { margin: 0; padding: 8px 12px 10px; font-size: .875rem; color: var(--mx-ink-3); }
.mx-tool-out { grid-area: out; margin: 0; display: grid; gap: 6px; }
.mx-tool-out 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-tool-out div.is-key { background: var(--mx-blue); color: #EAF1F8; }
.mx-tool-out dt { font-size: .9375rem; }
.mx-tool-out dd { margin: 0; font-family: var(--mx-font-tech); font-weight: 600; white-space: nowrap; font-size: .9375rem; }
.mx-tool-body-units { display: block; }
.mx-tool-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-tool-row .mx-chip { min-height: 38px; padding: 6px 12px; font-size: .875rem; }
.mx-tool-num { display: grid; gap: 4px; font-size: .9375rem; color: var(--mx-ink-2); }
.mx-tool-num-in { display: flex; align-items: stretch; border-radius: var(--mx-radius); box-shadow: inset 0 0 0 1.5px var(--mx-tone-2); background: var(--mx-surface); overflow: hidden; direction: ltr; }
.mx-tool-num-in:focus-within { box-shadow: inset 0 0 0 2px var(--mx-focus); }
.mx-tool-num-in input { flex: 1; min-width: 0; min-height: 44px; padding: 6px 12px; border: 0; background: transparent; font: 600 1rem/1 var(--mx-font-tech); color: var(--mx-ink); outline: none; text-align: left; }
.mx-tool-num-in b { display: grid; place-items: center; padding: 0 12px; background: var(--mx-paper); font: 600 .875rem var(--mx-font-tech); color: var(--mx-ink-2); }
.mx-tool-slider { width: 100%; min-height: 32px; accent-color: var(--mx-brand-strong); direction: ltr; }
.mx-tool-more { border-radius: var(--mx-radius); background: var(--mx-paper); padding: 4px 12px; }
.mx-tool-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--mx-ink); }
.mx-tool-more[open] { padding-bottom: 12px; }
.mx-tool-more > * + * { margin-top: 10px; }
.mx-tool-hint { margin: 0; font-size: .875rem; color: var(--mx-ink-3); }
.mx-tool-btn { justify-self: start; }
.mx-tool-svg { display: block; width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.mx-tool-svg text { font-family: var(--mx-font-tech); font-size: 14px; font-weight: 600; fill: var(--mx-ink); direction: ltr; }
.mx-tool-grid path { stroke: var(--mx-tone); stroke-width: 1; fill: none; opacity: .7; }
.mx-tool-course { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--mx-tone); color: var(--mx-ink-2); }
.mx-tool-course .mx-i { color: var(--mx-brand-strong); }
.mx-tool-course a { color: var(--mx-ink); font-weight: 700; }
.mx-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--mx-tone); }
.mx-tool-actions .mx-btn { min-height: 40px; padding: 8px 14px; font-size: .9375rem; }
.mx-tool-toast { margin-inline-start: auto; font-weight: 700; color: var(--mx-green); }
.mx-tool-docs { display: grid; gap: 12px; }
.mx-tool-docs details { padding: 4px 20px; border-radius: var(--mx-radius-lg); background: var(--mx-surface); }
.mx-tool-docs summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; }
.mx-tool-docs summary::-webkit-details-marker { display: none; }
.mx-tool-docs summary .mx-h3 { margin: 0; }
.mx-tool-docs summary::after { content: "+"; margin-inline-start: auto; font: 700 1.5rem/1 var(--mx-font); color: var(--mx-ink-3); }
.mx-tool-docs details[open] summary::after { content: "−"; }
.mx-tool-docs details[open] { padding-bottom: 16px; }
.mx-tool-how-body h3 { margin: 18px 0 6px; font-size: 1rem; }
.mx-tool-how-body p { margin: 6px 0; }
.mx-eq { margin: 6px 0 !important; padding: 8px 12px; border-radius: var(--mx-radius); background: var(--mx-paper); font: 500 .9375rem/1.6 var(--mx-font-tech); text-align: left; overflow-x: auto; }
.mx-eq b { color: var(--mx-steel); }
.mx-tool-table { overflow-x: auto; margin: 8px 0; }
.mx-tool-table table { border-collapse: collapse; width: 100%; font: 500 .875rem var(--mx-font-tech); }
.mx-tool-table th, .mx-tool-table td { padding: 6px 10px; border-bottom: 1px solid var(--mx-tone-2); text-align: right; }
.mx-tool-table td:first-child, .mx-tool-table th:first-child { text-align: left; font-family: var(--mx-font); }
.mx-tool-assume ul { margin: 4px 0 0; padding-inline-start: 20px; display: grid; gap: 6px; color: var(--mx-ink-2); }
.mx-tool-meta { padding: 14px 20px; font-size: .9375rem; color: var(--mx-ink-2); }
.mx-tool-meta p { margin: 4px 0; }
.mx-link-btn { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--mx-ink); text-decoration: underline; cursor: pointer; min-height: 32px; }
.mx-tool-attach { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--mx-radius); background: var(--mx-paper); }

/* ---------- beam ---------- */
.mx-beam-line { stroke: var(--mx-ink); stroke-width: 8; stroke-linecap: round; }
.mx-beam-sup path, .mx-beam-sup circle { fill: none; stroke: var(--mx-ink); stroke-width: 2.5; stroke-linejoin: round; }
.mx-beam-q path { stroke: var(--mx-steel); stroke-width: 2; fill: none; }
.mx-beam-q .mx-beam-head { fill: var(--mx-steel); stroke: none; }
.mx-tool-svg .mx-beam-q text { fill: var(--mx-steel); }
.mx-beam-load { cursor: grab; outline: none; }
.is-drag .mx-beam-load { cursor: grabbing; }
.mx-beam-load path { stroke: var(--mx-brand-strong); stroke-width: 4; fill: none; stroke-linecap: round; }
.mx-beam-load .mx-beam-head { fill: var(--mx-brand-strong); stroke: none; }
.mx-beam-hit { fill: transparent; }
.mx-beam-grip { fill: var(--mx-brand); stroke: var(--mx-surface); stroke-width: 3; transition: transform var(--mx-t-ui) var(--mx-ease-out); transform-box: fill-box; transform-origin: center; }
.mx-beam-load:hover .mx-beam-grip, .is-drag .mx-beam-grip { transform: scale(1.2); }
.mx-beam-load:focus-visible .mx-beam-grip { stroke: var(--mx-focus); stroke-width: 4; }
.mx-beam-react path { stroke: var(--mx-blue-2, var(--mx-steel)); stroke-width: 3.5; fill: none; }
.mx-beam-react .mx-beam-head { fill: var(--mx-blue-2, var(--mx-steel)); stroke: none; }
.mx-tool-svg .mx-beam-react text { fill: var(--mx-blue-2, var(--mx-steel)); }
.mx-beam-deflp { fill: none; stroke: var(--mx-brand-strong); stroke-width: 2; stroke-dasharray: 6 5; opacity: .85; }
.mx-tool-svg .mx-beam-deflt { fill: var(--mx-ink-2); font-size: 12.5px; }
.mx-beam-dims path { stroke: var(--mx-ink-3); stroke-width: 1.5; fill: none; }
.mx-tool-svg .mx-beam-dims text { fill: var(--mx-ink-2); }
.mx-beam-dia-base { stroke: var(--mx-ink-3); stroke-width: 1.5; }
.mx-beam-V .mx-beam-dia-fill { fill: color-mix(in srgb, var(--mx-survey) 14%, transparent); stroke: var(--mx-survey); stroke-width: 2; stroke-linejoin: round; }
.mx-beam-M .mx-beam-dia-fill { fill: color-mix(in srgb, var(--mx-steel) 16%, transparent); stroke: var(--mx-steel); stroke-width: 2; stroke-linejoin: round; }
.mx-beam-dia-dot { fill: var(--mx-ink); }
.mx-tool-svg .mx-beam-dia-k { font-family: var(--mx-font); font-size: 18px; font-weight: 800; }
.mx-tool-svg .mx-beam-V .mx-beam-dia-k { fill: var(--mx-survey); }
.mx-tool-svg .mx-beam-M .mx-beam-dia-k { fill: var(--mx-steel); }
.mx-tool-svg .mx-beam-dia-u { font-size: 11px; fill: var(--mx-ink-3); }
.mx-tool-svg .mx-beam-dia-v { font-size: 13px; }
.mx-tool-svg .mx-beam-ma { fill: var(--mx-steel); }
.mx-beam-curline { stroke: var(--mx-ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.mx-tool-svg .mx-beam-curv, .mx-tool-svg .mx-beam-curm { font-size: 13px; paint-order: stroke; stroke: var(--mx-paper); stroke-width: 4px; }

/* ---------- section ---------- */
.mx-tool-fields { display: grid; gap: 10px; }
.mx-sec-shape rect, .mx-sec-shape circle { fill: color-mix(in srgb, var(--mx-steel) 22%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2; }
.mx-sec-shape .mx-sec-hole { fill: var(--mx-paper); }
.mx-sec-ax { stroke: var(--mx-survey); stroke-width: 1.6; stroke-dasharray: 10 5 2 5; fill: none; }
.mx-tool-svg .mx-sec-ax-t { fill: var(--mx-survey); }
.mx-sec-c { fill: var(--mx-brand); stroke: var(--mx-ink); stroke-width: 2; }
.mx-sec-dim { stroke: var(--mx-ink-3); stroke-width: 1.4; fill: none; }
.mx-tool-svg .mx-sec-dim-t { fill: var(--mx-ink-2); font-size: 13px; }

/* ---------- Mohr ---------- */
.mx-mohr-axis { stroke: var(--mx-ink-3); stroke-width: 1.5; fill: none; }
.mx-tool-svg .mx-mohr-ax { fill: var(--mx-ink-2); font-size: 14px; }
.mx-mohr-circle { fill: color-mix(in srgb, var(--mx-steel) 10%, transparent); stroke: var(--mx-steel); stroke-width: 2.5; }
.mx-mohr-dia0 { stroke: var(--mx-ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mx-mohr-dia { stroke: var(--mx-brand-strong); stroke-width: 3; }
.mx-mohr-pt0 { fill: var(--mx-ink-3); }
.mx-mohr-pt { fill: var(--mx-brand); stroke: var(--mx-ink); stroke-width: 2; }
.mx-mohr-pt.is-y { fill: var(--mx-surface); }
.mx-mohr-pr { fill: var(--mx-steel); }
.mx-tool-svg .mx-mohr-prt { fill: var(--mx-steel); }
.mx-tool-svg .mx-mohr-lbl { font-size: 14px; }
.mx-mohr-arc { fill: none; stroke: var(--mx-brand-strong); stroke-width: 2; }
.mx-tool-svg .mx-mohr-arct { fill: var(--mx-brand-strong); font-size: 13px; }
.mx-mohr-ref { stroke: var(--mx-ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.mx-mohr-xaxis { stroke: var(--mx-ink-2); stroke-width: 1.4; stroke-dasharray: 5 3; }
.mx-mohr-el { fill: color-mix(in srgb, var(--mx-brand) 16%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2; }
.mx-mohr-arr { stroke: var(--mx-steel); stroke-width: 3; fill: none; stroke-linecap: round; }
.mx-mohr-arr.is-y { stroke: var(--mx-survey); }
.mx-mohr-shear { stroke: var(--mx-brand-strong); stroke-width: 3; fill: none; stroke-linecap: round; }

/* ---------- units ---------- */
.mx-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 12px; }
.mx-unit { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; }
.mx-unit label { grid-column: 1 / -1; display: flex; align-items: stretch; border-radius: var(--mx-radius); box-shadow: inset 0 0 0 1.5px var(--mx-tone-2); background: var(--mx-surface); overflow: hidden; }
.mx-unit label:focus-within { box-shadow: inset 0 0 0 2px var(--mx-focus); }
.mx-unit input { flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; border: 0; background: transparent; font: 600 1rem/1 var(--mx-font-tech); color: var(--mx-ink); outline: none; }
.mx-unit label span { padding: 0 12px; display: grid; place-items: center; background: var(--mx-paper); color: var(--mx-ink-2); font-family: var(--mx-font-tech); font-size: .875rem; white-space: nowrap; }
.mx-unit small { font: 500 .8125rem var(--mx-font-tech); color: var(--mx-ink-3); }
.mx-unit-copy { border: 0; background: none; font: 600 .8125rem var(--mx-font); color: var(--mx-ink-2); text-decoration: underline; cursor: pointer; min-height: 32px; }

/* ---------- entrance (reduced motion: shown at once) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .mx-tool .mx-tool-fig { opacity: 0; transform: translateY(12px); transition: opacity 600ms ease, transform 600ms var(--mx-ease-out); }
	.js .mx-tool.is-in .mx-tool-fig { opacity: 1; transform: none; }
}

@media (max-width: 860px) {
	.mx-tool-body { grid-template-columns: 1fr; grid-template-areas: "fig" "ctrl" "out"; }
	.mx-tool-svg text { font-size: 18px; }
	.mx-tool-svg .mx-beam-dia-u { font-size: 14px; }
	.mx-tool-svg .mx-beam-deflt, .mx-tool-svg .mx-beam-dia-v, .mx-tool-svg .mx-beam-curv, .mx-tool-svg .mx-beam-curm, .mx-tool-svg .mx-sec-dim-t, .mx-tool-svg .mx-mohr-arct { font-size: 16px; }
}

/* ---------- print: drawing, data, results and assumptions ---------- */
@media print {
	.mx-header, .mx-footer, .mx-deals-bar, .mx-lab-side, .mx-tool-actions, .mx-lab-share, .mx-tools-nav, .mx-suggest-wrap, .mx-tool-crumbs, .mx-wa, .mx-rail { display: none !important; }
	.mx-lab-layout { display: block; }
	.mx-tool, .mx-tool-docs details { box-shadow: none; padding: 0; background: none; }
	.mx-tool-body { grid-template-columns: 1fr; grid-template-areas: "fig" "ctrl" "out"; }
	.mx-tool-fig { opacity: 1 !important; transform: none !important; }
}
.mx-lab-share .mx-btn.mx-btn-line { color: #fff !important; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(234, 241, 248, .55) !important; }
.mx-lab-share .mx-lab-share-k { font-family: var(--mx-font); font-weight: 700; }

/* ---------- formula tools: drawings (mx-lab-extra.js) ---------- */
.mx-tool-err { margin: 0; padding: 10px 12px; border-radius: var(--mx-radius); background: var(--mx-rust-soft); color: var(--mx-rust); font-weight: 700; }
.is-err .mx-tool-fig { opacity: .35; }
.lx text { font-family: var(--mx-font-tech); font-size: 14px; font-weight: 600; fill: var(--mx-ink); direction: ltr; }
.lx .lx-big { font-size: 17px; font-weight: 700; }
.lx .lx-note, .lx .lx-k { font-family: var(--mx-font); font-size: 13px; fill: var(--mx-ink-3); direction: rtl; }
.lx .lx-k { font-weight: 700; fill: var(--mx-ink-2); }
.lx .lx-warn { font-family: var(--mx-font); fill: var(--mx-survey); direction: rtl; }
.lx .lx-brand-t { fill: var(--mx-brand-strong); }
.lx-line, .lx-axis { stroke: var(--mx-ink-3); stroke-width: 1.4; }
.lx-wall { stroke: var(--mx-ink); stroke-width: 3; }
.lx-hatch { stroke: var(--mx-ink-3); stroke-width: 1.2; }
.lx-body { fill: color-mix(in srgb, var(--mx-steel) 30%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2; }
.lx-body.lx-comp { fill: color-mix(in srgb, var(--mx-survey) 22%, var(--mx-surface)); }
.lx-body.lx-tens { fill: color-mix(in srgb, var(--mx-steel) 40%, var(--mx-surface)); }
.lx-hole { fill: var(--mx-paper); stroke: var(--mx-ink); stroke-width: 2; }
.lx-ghost { fill: none; stroke: var(--mx-brand-strong); stroke-width: 2; stroke-dasharray: 6 4; }
.lx-ghostl { stroke: var(--mx-ink-3); stroke-width: 2; stroke-dasharray: 5 5; }
.lx-curve { fill: none; stroke: var(--mx-brand-strong); stroke-width: 3.5; stroke-linecap: round; }
.lx-sup { fill: none; stroke: var(--mx-ink); stroke-width: 2.4; }
.lx-arr { stroke: var(--mx-ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.lx-arr.lx-head { stroke: none; fill: var(--mx-ink); }
.lx-arr.lx-brand { stroke: var(--mx-brand-strong); } .lx-arr.lx-brand.lx-head { fill: var(--mx-brand-strong); stroke: none; }
.lx-arr.lx-steel { stroke: var(--mx-steel); } .lx-arr.lx-steel.lx-head { fill: var(--mx-steel); stroke: none; }
.lx-arr.lx-red { stroke: var(--mx-survey); } .lx-arr.lx-red.lx-head { fill: var(--mx-survey); stroke: none; }
.lx-arr.lx-thin { stroke-width: 1.8; } .lx-arr.lx-thick { stroke-width: 4.5; }
.lx-dash { stroke: var(--mx-ink-3); stroke-width: 1.4; stroke-dasharray: 5 4; }
.lx-fill { fill: color-mix(in srgb, var(--mx-steel) 18%, transparent); stroke: var(--mx-steel); stroke-width: 2; }
.lx-dot { fill: var(--mx-brand); stroke: var(--mx-ink); stroke-width: 2; }
.lx-water { fill: color-mix(in srgb, var(--mx-steel) 18%, transparent); }
.lx-wallp, .lx-pipe { fill: none; stroke: var(--mx-ink); stroke-width: 3; }
.lx-pipe { stroke-width: 10; stroke: color-mix(in srgb, var(--mx-steel) 45%, var(--mx-surface)); stroke-linecap: round; stroke-linejoin: round; }
.lx-tracer { fill: var(--mx-brand-strong); }
.lx-piezo { stroke: var(--mx-steel); stroke-width: 6; stroke-linecap: round; opacity: .7; }
.lx-hgl { stroke: var(--mx-steel); stroke-width: 2; stroke-dasharray: 8 4; }
.lx-egl { stroke: var(--mx-brand-strong); stroke-width: 2; stroke-dasharray: 3 3; fill: none; }
.lx-surface { stroke: var(--mx-steel); stroke-width: 2; }
.lx-surf { fill: none; stroke: var(--mx-steel); stroke-width: 1.6; }
.lx-plate { stroke: var(--mx-brand-strong); stroke-width: 6; }
.lx-dashp { fill: color-mix(in srgb, var(--mx-steel) 10%, transparent); stroke: var(--mx-steel); stroke-width: 1.4; stroke-dasharray: 4 3; }
.lx-lam { fill: color-mix(in srgb, var(--mx-green) 40%, transparent); }
.lx-trans { fill: color-mix(in srgb, var(--mx-brand) 50%, transparent); }
.lx-turb { fill: color-mix(in srgb, var(--mx-survey) 35%, transparent); }
.lx-mark { fill: var(--mx-ink); }
.lx-spring { fill: none; stroke: var(--mx-ink); stroke-width: 2.4; stroke-linejoin: round; }
.lx-mass { fill: color-mix(in srgb, var(--mx-brand) 40%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2.4; }
.lx-arc { fill: none; stroke: var(--mx-brand-strong); stroke-width: 2; }
.lx-sec { fill: color-mix(in srgb, var(--mx-steel) 25%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2; }
.lx-top { fill: color-mix(in srgb, var(--mx-tone-2) 70%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2; }
.lx-side { fill: var(--mx-tone-2); stroke: var(--mx-ink); stroke-width: 2; }
.lx-side2 { fill: color-mix(in srgb, var(--mx-ink-3) 30%, var(--mx-surface)); stroke: var(--mx-ink); stroke-width: 2; }
@media (max-width: 860px) { .lx text { font-size: 17px; } .lx .lx-big { font-size: 19px; } .lx .lx-note, .lx .lx-k { font-size: 15px; } }

/* Educational-use notice on every tool (owner, 18.10.2026) */
.mx-tool-disclaimer { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: var(--mx-radius); background: var(--mx-paper); font-size: .875rem; color: var(--mx-ink-2); }
.mx-tool-disclaimer .mx-i { flex: none; margin-top: 2px; color: var(--mx-ink-3); }
@media print { .mx-tool-disclaimer { display: block !important; } }

/* collapsible categories in the lab rail (owner 20.10.2026) */
.mx-lab-side-g > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 8px; border-radius: var(--mx-radius); cursor: pointer; }
.mx-lab-side-g > summary::-webkit-details-marker { display: none; }
.mx-lab-side-g > summary bdi { margin-inline-start: auto; font-size: .75rem; font-weight: 800; color: var(--mx-ink-3); background: var(--mx-tone); border-radius: 99px; padding: 0 8px; }
.mx-lab-side-g > summary::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--mx-t-ui, 200ms) ease; flex: none; opacity: .6; }
.mx-lab-side-g[open] > summary::after { transform: rotate(-135deg); }
@media (hover: hover) and (pointer: fine) { .mx-lab-side-g > summary:hover { background: var(--mx-paper); } }
.mx-lab-side-build { background: var(--mx-brand-soft, #FFF4DC); font-weight: 800 !important; }
.mx-lab-side-g[open] > summary::after { transform: rotate(-135deg) translateY(-2px) !important; }