/**
 * The /tools/ hub (docs/14-DETAILED-PAGES.md §16.1; 13 §7.8): the calculators' line drawings (the hero's chart plate
 * and the tool cards; their cards' layout is in calc-more.css) and the hero's plate. Render-blocking on the hub only,
 * because the plate is on its first screen (inc/calc.php).
 */

.mn-tart { position: relative; inline-size: min(100%, 15rem); block-size: auto; overflow: visible; transition: transform var(--wp--custom--motion--panel) var(--wp--custom--motion--ease-out); }
.mn-tart :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.mn-tart__base { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.5; }
.mn-tart__line { fill: none; stroke: var(--wp--preset--color--white); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mn-tart__accent { fill: none; stroke: var(--wp--preset--color--cyan); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mn-tart__dash { fill: none; stroke: var(--wp--preset--color--cyan-300); stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
.mn-tart__fill { fill: var(--wp--preset--color--cyan); }
.mn-tart__ghost { fill: rgba(255, 255, 255, 0.22); }
.mn-tart__ghost2 { fill: rgba(255, 255, 255, 0.4); }
.mn-tart__dashbox { fill: rgba(var(--wp--custom--cyan-rgb), 0.12); stroke: var(--wp--preset--color--cyan-300); stroke-width: 1.5; stroke-dasharray: 3 3; }
.mn-tart__line-box { fill: none; stroke: var(--wp--preset--color--white); stroke-width: 2; }
.mn-tart__dot { fill: var(--wp--preset--color--white); stroke: var(--wp--preset--color--cyan); stroke-width: 3; }

/* The hub hero's chart plate: three tools' drawings on glass in the hero's right column (decorative; desktop only). */
.mn-thero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mn-thero__card {
	position: relative;
	display: grid;
	gap: 14px;
	padding: 18px 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--wp--custom--radius--lg);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
	box-shadow: var(--wp--preset--shadow--deep);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.mn-thero__card--a { grid-column: 1 / -1; border-color: rgba(var(--wp--custom--cyan-rgb), 0.35); }
.mn-thero__card .mn-tart { inline-size: 100%; }
.mn-thero__card--a .mn-tart { max-inline-size: 17rem; justify-self: center; }
.mn-thero__label { color: var(--wp--preset--color--cyan-300); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
@media (max-width: 959px) { .mn-page-hero__aside:has(.mn-thero) { display: none; } }