/* ==========================================================================
   Meta Engitech - Tube Weight Calculator
   SNC Digital - https://sncdigital.com

   EVERY NUMBER IN THIS FILE WAS SCANNED OFF THE DESIGN EXPORT,
   raw-images/support/Support full page.png (1440 x 2622), calculator band.
   Absolute page coordinates from that scan, for anyone re-deriving them:

     H2 "Tube Weight Calculator" ink   y 671..709   x 107..581   (w 475, h 39)
     LEFT card                         y 759..1301  x 107..942   (836 x 543)
     RIGHT card                        y 759..1282  x 964..1328  (365 x 524)
     row span                          x 107..1328  = 1222

   LEFT card, all offsets from its own top-left (759, 107):
     padding                           32 on all four sides - CONFIRMED, not
                                       assumed: the H3's own line box lands at
                                       790.4 against a card top of 759.
     H3 ink                            795..821     x 141..781  (w 641)
     lead ink                          833..847     x 140..847  (w 708)
     label / field rows, pitch 86:
       label ink 880..893   field 900..941   (42 tall)
       label ink 966..979   field 986..1027
       label ink 1052..1063 field 1072..1113
       label ink 1138..1151 field 1158..1199
     field                             x 139..514 and 538..910 -> 374 wide,
                                       24 gap, 1px #E2E8F0, r6, white
     placeholder ink starts            x 154  -> 14px padding + 1px border
     chevron ink                       x 491..498, y 918..923 -> 8 x 6,
                                       15px off the field's right edge
     button                            y 1228..1269 x 139..293 (155 x 42),
                                       SQUARE corners (the corner walk reads
                                       x 139 on its very first row), #FA7118
       label ink   x 167..224   arrow ink x 251..265 (15 x 10)
       -> padding 28, gap 27

   RIGHT card, offsets from (759, 964):
     padding                           32 - the tiles land on 996 and 1296
     "Estimated Output" ink            795..820     x 998..1239 (w 242)
     tiles                             y 843, 950, 1057, 1164 - 87 tall,
                                       pitch 107 -> 20 gap
     tile                              x 996..1296 (301), 1px #E5E7EB, r6, white
     icon disc                         44 x 44 at 20 in, vertically centred
     label ink                         x 1077 (16 past the disc)
     label ink y 867..881  value ink y 895..907  -> the pair is centred in 87

   TYPE - solved by string width against a canvas, matching ink width AND ink
   height, never cap height (scratchpad/measure_support_calc.html), with
   stroke-run histograms against the export's own ink to settle every weight
   (scratchpad/measure_support_stroke.html):

     H2 "Tube Weight Calculator"  475 x 39 -> Montserrat 600 at ZERO tracking
        @ 38.98, ink h 39.0 EXACT. The site's standard 28 -> 40 step. (Built
        as an Elementor Heading widget, not here.)
     H3 + "Estimated Output"      641 / 242 -> Montserrat *700* @ 25.94 /
        25.76, "Estimated Output" ink h 26 EXACT. The histogram is decisive:
        the design's runs are 3:4 4:362 5:180, Montserrat 700 renders
        3:7 4:350 5:198 and Montserrat 600 renders 3:245 4:353 5:53 - the
        600 candidate puts a quarter of its runs at 3px where the design has
        almost none. So this page's CARD headings are 700 while its section
        H2 is 600 (whose own histogram, 5:391 6:94 against the design's
        5:318 6:181, rules 700 out). A designer bumping weight as size drops.
     lead                         708 -> Inter 400 @ 14.52, ink h 15 EXACT.
        Built on the Contact page's UI-14 ramp (12 -> 14), so 3.6% narrow -
        the alternative was a seventh bespoke UI ramp for one string.
     field labels (7 strings)     51/77/38/107/168/123/66 -> Open Sans *600*
        @ 12.25-12.90, a 5.3% spread with SIX OF SEVEN ink heights exact.
        Open Sans 400 spreads 7.4% and its histogram inverts (1px-dominant
        where the design is 2px-dominant, 2.8 against 0.51). Inter 600 spreads
        6.8% with 4/7. Built on UI-13 (11.5 -> 13).
     inputs / placeholders        81 -> Open Sans 400 @ 13.72, ink h 11 exact.
        UI-14 (12 -> 14).
     tile labels (4 strings)      144/100/146/141 -> Montserrat *500* @
        16.00-16.17 - a 1.1% SPREAD, the tightest measurement in the section.
        Open Sans 400 spreads 2.9%, Inter 400 9.4%, Poppins 8.7%. Weight
        within Montserrat from the histogram: the design's 1:2 ratios are
        0.32 and 0.67, and Montserrat renders 1.45/2.19 at 400, 0.30/0.39 at
        500 and 0.04/0.04 at 600. Built on the Footer-link step (14 -> 16).
     tile value + unit            kg/m 32, mm 22, mm2 28 -> Inter 400 @
        13.45 / 12.56 / 12.56, a 7% spread. Open Sans spreads 13% and
        Montserrat 25% (its 'm' is far too wide for the 22px "mm"). UI-13.
     button "Calculate"           57, ink h 10 EXACT -> Open Sans 600 @ 12.64.
        UI-13. NOTE this is NOT the site's shared 1rem pill size - this is a
        form control inside a card, on the same UI ramp as the Contact page's
        own form, and 1rem would render it 26% over.

   COLOUR, sampled off the export:
     H2                     pure black   -> the page's own #1D1D1D
     H3 / Estimated Output  30,37,43     -> #1E252B  (the Contact page's slate)
     lead / placeholder     110,119,135  -> #6E7787  (same ramp)
     field labels           pure black   -> the page's own #1A1A1A
     chevron                74,85,104    -> #4A5568  (same ramp)
     field border           226,232,240  -> #E2E8F0  (same ramp)
     card ground            245,245,245  -> #F5F5F5
     tile border            229,231,235  -> #E5E7EB
     tile label             22,22,22     -> #1D1D1D
     tile value             31,31,31     -> #1D1D1D ; unit 97,97,97 -> #616161
     button                 250,113,24   -> #FA7118 EXACTLY, the brand orange
                            (unlike the hero's eyebrow, which samples #E87722)

   ADDITIONS THAT ARE NOT IN THE EXPORT, all flagged rather than smuggled in:
     - focus-visible rings. The export draws no focus state at all, which
       would leave a keyboard user with nothing.
     - hover states on the button and the controls, same reasoning.
     - error styling (#B42318). The export draws no error state; a form that
       validates has to be able to say so.
     - a busy state on the button while the request is in flight.

   WHY EVERY CONTROL RULE CARRIES `.mtc ` IN FRONT OF IT. Astra's own dynamic
   CSS sets, at (0,1,1):

       input[type="text"],input[type="number"],...,select {
           font-size:16px; line-height:24px; padding:12px 16px;
           border-radius:4px; box-shadow:...;
           color: var(--ast-form-input-text,#475569);
       }
       input[type="text"],input[type="number"],...,select { height:40px; }

   A bare `.mtc-input` is (0,1,0) and LOSES to that on specificity whatever
   the source order - and it loses SELECTIVELY, which is the trap: the three
   `<select>`s are only matched by Astra's bare `select` (0,0,1) so they took
   this file's 42px height and 14px type, while every `<input type="number">`
   beside them silently took Astra's 40px, 16px and #475569. The first render
   had two field heights and two text colours in one grid, and nothing in
   this stylesheet said why. `.mtc .mtc-input` is (0,2,0) and clears it.
   Add `.mtc ` to any new control rule for the same reason.
   ========================================================================== */

.mtc,
.mtc *,
.mtc *::before,
.mtc *::after {
	box-sizing: border-box;
}

.mtc {
	/* Type ramps. The site pins html{font-size:100%} at every breakpoint
	   (Astra drops the root to 91.2% below 921px otherwise), so 1rem is 16px
	   and these clamps interpolate 375 -> 1440 like every other step on the
	   build. The first three are the Contact page's own ramps, reused
	   verbatim rather than minted again. */
	--mtc-step-h3: clamp(1.25rem, 1.11796rem + 0.56338vw, 1.625rem);      /* 20   -> 26   */
	--mtc-ui-14: clamp(0.75rem, 0.70599rem + 0.18779vw, 0.875rem);        /* 12   -> 14   */
	--mtc-ui-13: clamp(0.71875rem, 0.68574rem + 0.14085vw, 0.8125rem);    /* 11.5 -> 13   */
	--mtc-step-16: clamp(0.875rem, 0.831rem + 0.188vw, 1rem);             /* 14   -> 16   */

	--mtc-orange: #fa7118;
	--mtc-orange-dark: #e2620f;
	--mtc-ink: #1d1d1d;
	--mtc-ink-label: #1a1a1a;
	--mtc-ink-head: #1e252b;
	--mtc-muted: #6e7787;
	--mtc-unit: #616161;
	--mtc-chevron: #4a5568;
	--mtc-card: #f5f5f5;
	--mtc-field-border: #e2e8f0;
	--mtc-tile-border: #e5e7eb;
	--mtc-error: #b42318;

	display: flex;
	align-items: flex-start;          /* the export tops both cards at y 759 */
	justify-content: space-between;   /* 68.412 + 29.870 = 98.282; the 1.718
	                                     left over IS the design's 21px gap,
	                                     so the row stays closed at any width */
	width: 100%;
}

/* ------------------------------------------------------------- the cards */

.mtc-form,
.mtc-output {
	background: var(--mtc-card);
	border-radius: 12px;   /* corner walk 115 -> 107 over 8 rows */
	padding: 32px;
	margin: 0;
}

.mtc-form {
	width: 68.412%;   /* 836 / 1222 */
}

.mtc-output {
	width: 29.870%;   /* 365 / 1222 */
}

/* ------------------------------------------------- the left card's header */

.mtc-form__title,
.mtc-output__title {
	margin: 0;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-weight: 700;
	font-size: var(--mtc-step-h3);
	line-height: 1.2;
	letter-spacing: 0;   /* the kit's Primary global leaks -0.032em otherwise */
	color: var(--mtc-ink-head);
	text-transform: none;
}

.mtc-form__title {
	margin-bottom: 6px;   /* H3 box bottom 821.6 -> lead box top 828 */
}

.mtc-form__lead {
	margin: 0 0 26px;     /* lead box bottom 849 -> first label box top 875.2 */
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: var(--mtc-ui-14);
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--mtc-muted);
}

/* --------------------------------------------------------------- the grid */

.mtc-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;   /* 538 - 514 */
	row-gap: 19px;      /* 86 pitch - (18.2 label box + 7 + 42 field) */
}

/* Length owns its own row whenever the rectangular-only height field is
   hidden, and gives it up when that field appears. That one rule is what
   keeps the grid free of orphans in BOTH shapes, with or without the two unit
   selects - the cell counts only come out even in this arrangement:

     units on,  not rectangular   8 half-cells + Length full   = 5 whole rows
     units on,  rectangular      10 half-cells                 = 5 whole rows
     units off, not rectangular   6 half-cells + Length full   = 4 whole rows
     units off, rectangular       8 half-cells                 = 4 whole rows

   The DOM order the template emits is load-bearing here: Length unit comes
   BEFORE Length, so that it pairs with Dimension unit in the first case and
   with Length itself in the second. */
.mtc-field--length {
	grid-column: 1 / -1;
}

.mtc.is-rectangular .mtc-field--length {
	grid-column: auto;
}

.mtc-field {
	min-width: 0;
}

.mtc-field[hidden] {
	display: none;
}

.mtc-label {
	display: block;
	margin: 0 0 7px;   /* label box bottom 893.4 -> field top 900 */
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: var(--mtc-ui-13);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--mtc-ink-label);
}

.mtc-req {
	color: var(--mtc-orange);
}

/* ----------------------------------------------------------- the controls */

.mtc-control {
	position: relative;
}

.mtc .mtc-input {
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--mtc-field-border);
	border-radius: 6px;
	background: #fff;
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: var(--mtc-ui-14);
	line-height: 40px;
	letter-spacing: 0;
	color: var(--mtc-ink-head);
	box-shadow: none;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

/* The chevron is drawn as an SVG sibling, so the native one has to go. */
.mtc .mtc-control--select .mtc-input {
	padding-right: 38px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
}

.mtc .mtc-control--select .mtc-input::-ms-expand {
	display: none;
}

/* A select showing its placeholder option reads as a placeholder. */
.mtc .mtc-input:invalid,
.mtc .mtc-input option[value=""] {
	color: var(--mtc-muted);
}

.mtc .mtc-input option {
	color: var(--mtc-ink-head);
}

.mtc .mtc-input::placeholder {
	color: var(--mtc-muted);
	opacity: 1;   /* Firefox dims placeholders by default */
}

.mtc .mtc-input:hover {
	border-color: #cbd5e1;
}

.mtc .mtc-input:focus,
.mtc .mtc-input:focus-visible {
	outline: none;
	border-color: var(--mtc-orange);
	box-shadow: 0 0 0 3px rgba(250, 113, 24, 0.18);
}

/* Spin buttons put a control the design does not draw inside a 42px box and
   steal 16px of measure from the number. */
.mtc .mtc-input[type="number"] {
	-moz-appearance: textfield;
}

.mtc .mtc-input[type="number"]::-webkit-outer-spin-button,
.mtc .mtc-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.mtc-chevron {
	position: absolute;
	top: 50%;
	right: 14px;   /* design ink ends x 498 in a field ending 514 -> 16 clear */
	width: 10px;
	height: 6px;
	margin-top: -3px;
	color: var(--mtc-chevron);
	pointer-events: none;
}

/* ------------------------------------------------------------- validation */

.mtc-field__error {
	display: none;
	margin: 6px 0 0;
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: var(--mtc-ui-13);
	line-height: 1.4;
	color: var(--mtc-error);
}

.mtc-field.is-invalid .mtc-field__error {
	display: block;
}

.mtc .mtc-field.is-invalid .mtc-input {
	border-color: var(--mtc-error);
}

.mtc .mtc-field.is-invalid .mtc-input:focus {
	box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

.mtc-form__alert {
	display: none;
	margin: 20px 0 0;
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: var(--mtc-ui-13);
	line-height: 1.5;
	color: var(--mtc-error);
}

.mtc-form__alert.mtc-form__alert--is-visible {
	display: block;
}

/* --------------------------------------------------------------- the CTA */

/* The 29px that used to sit on the button itself: the design's last field
   bottom is 1199 and its button top 1228, and the row wrapper now owns that
   seam. The alert above is display:none until it has something to say, so it
   contributes nothing to the gap either way.

   RESET IS NOT IN THE DESIGN EXPORT - it is a client request. It is styled as
   a secondary of the Calculate button rather than invented from scratch: same
   42px box, same square corners, same UI-13 Open Sans 600, on the card
   system's own #E2E8F0 border and #4A5568 slate. */
.mtc .mtc-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 29px;
}

.mtc .mtc-submit {
	display: inline-flex;
	align-items: center;
	gap: 27px;          /* label ink ends 224, arrow ink starts 251 */
	height: 42px;
	margin-top: 0;
	padding: 0 28px;    /* button 139, label ink 167 */
	border: 0;
	border-radius: 0;   /* the corner walk reads x 139 on the FIRST row */
	background: var(--mtc-orange);
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: var(--mtc-ui-13);
	line-height: 1;
	letter-spacing: 0;
	color: #fff;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.mtc .mtc-submit:hover {
	background: var(--mtc-orange-dark);
}

.mtc .mtc-submit:focus-visible {
	outline: 2px solid var(--mtc-ink);
	outline-offset: 2px;
}

.mtc .mtc-submit[aria-busy="true"] {
	opacity: 0.75;
	cursor: progress;
}

.mtc .mtc-reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	margin-top: 0;
	padding: 0 28px;
	border: 1px solid var(--mtc-field-border);
	border-radius: 0;
	background: #fff;
	font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
	font-weight: 600;
	font-size: var(--mtc-ui-13);
	line-height: 1;
	letter-spacing: 0;
	color: var(--mtc-chevron);
	cursor: pointer;
	transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
}

.mtc .mtc-reset:hover {
	border-color: var(--mtc-chevron);
	background: var(--mtc-card);
	color: var(--mtc-ink-head);
}

.mtc .mtc-reset:focus-visible {
	outline: 2px solid var(--mtc-ink);
	outline-offset: 2px;
}

.mtc .mtc-reset:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.mtc .mtc-submit__arrow {
	width: 15px;   /* design arrow ink 15 x 10 */
	height: 10px;
	flex: 0 0 auto;
}

/* ------------------------------------------------------ the output tiles */

.mtc-output__title {
	margin-bottom: 21px;   /* head box bottom 822.2 -> tile 1 top 843 */
}

.mtc-tiles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;   /* 107 pitch - 87 tile */
	margin: 0;
	padding: 0;
	list-style: none;
}

.mtc-tile {
	display: flex;
	align-items: center;
	gap: 16px;             /* disc ends 1060, label ink starts 1077 */
	min-height: 87px;
	margin: 0;
	padding: 12px 20px;    /* disc starts 20 in from the tile edge */
	border: 1px solid var(--mtc-tile-border);
	border-radius: 6px;
	background: #fff;
	list-style: none;
}

.mtc-tile::marker,
.mtc-tile::before {
	content: none;   /* Astra decorates <li> in some contexts */
}

/* The peach disc is baked into each PNG's own alpha (a ~8% orange fill over
   the glyph), exactly like the Our Values cards and plant-3.png - so there is
   no border-radius, no background and no mask here. */
.mtc-tile__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: block;
}

.mtc-tile__body {
	min-width: 0;
}

.mtc-tile__label {
	display: block;
	font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	font-size: var(--mtc-step-16);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--mtc-ink);
}

.mtc-tile__value {
	display: block;
	margin-top: 6px;   /* label box bottom 885 -> value box top 891 */
	font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	font-size: var(--mtc-ui-13);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--mtc-ink);
	overflow-wrap: anywhere;   /* a six-figure total must not overflow the tile */
}

.mtc-tile__unit {
	color: var(--mtc-unit);
	margin-left: 6px;   /* dash ink ends 1090, unit ink starts 1097 */
}

/* --------------------------------------------------------------- narrow */

/* Two columns above 1024, stacked at and below it - the call every other
   two-column band on this build makes. At 1024 the form still gets 668 and
   the output 291, which holds a 44px disc + 16 gap + a 146px label inside a
   227px tile, so the pair survives the whole tablet range side by side. */
@media (max-width: 1024px) {
	.mtc {
		flex-direction: column;
		gap: 24px;
	}

	.mtc-form,
	.mtc-output {
		width: 100%;
	}
}

/* STACKED, A SINGLE COLUMN OF TILES IS TOO SPARSE TO SHIP. Once the output
   card goes full width a tile runs 897 at 1024 and 641 at 768, against a
   design of 301 - a 44px disc and a two-word label marooned at the left of a
   very wide box. Two up through that range puts a tile back at 440..320, i.e.
   the design's own measure, and it costs no duplicated content: the same four
   <li> serve every width. Below 768 it has to go back to one - at 600 a
   half-width tile is 240, of which the disc and its gap take 60, leaving 180
   for a label that needs 146 at the step's own 16px and wraps by 520. */
@media (min-width: 768px) and (max-width: 1024px) {
	.mtc-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.mtc-form,
	.mtc-output {
		padding: 20px;
	}
}

/* At 375 the grid is 335 and the card's inner measure 295, so a two-column
   row would be 135 per cell - narrower than "Outer diameter / size (mm)"
   needs at the label step's own 11.5px floor. One column below 520. */
@media (max-width: 520px) {
	.mtc-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.mtc-field--length,
	.mtc.is-rectangular .mtc-field--length {
		grid-column: auto;
	}

	/* Two buttons on one row still fit here - at 375 the card's inner measure
	   is 295, so each takes 139.5 against the 90 "Calculate" plus its arrow
	   needs. Stacking them would push the output card a whole row further
	   down for nothing. */
	.mtc .mtc-submit,
	.mtc .mtc-reset {
		flex: 1 1 0;
		min-width: 0;
		padding: 0 12px;
		justify-content: center;
	}

	.mtc .mtc-submit {
		gap: 12px;
	}
}