/**
 * Engine simulator overlay.
 *
 * A faithful port of the reference dial: thick dark bezel around a white face,
 * a large dark hub carrying the live readout in white, a tapered needle shaded
 * on both flanks, and a small gear disc tucked into the gap between the two
 * dials so it overlaps them.
 *
 * Everything that was a fixed pixel value in the original is expressed as a
 * fraction of --sc-dial, so the whole cluster scales to the viewport instead
 * of being locked to 20rem.
 *
 *   reference          fraction of the dial
 *   ring        3.5%   0.035
 *   needle    140px    0.4375
 *   hub         15%    0.15   (0.375 with the big readout)
 *   gear       5rem    0.25   with -2rem overlap = -0.10
 */

.sc-sim-overlay {
	/* Sized against whichever runs out first: the height left after the header
	   and the help line, or the width the three dials need side by side
	   (2 × dial + gear − overlap = 2.1 × dial). vmin alone was leaving most of
	   a wide screen unused. */
	--sc-dial:   min(
		27rem,
		calc((100vh - 210px) * 0.92),
		calc((100vw - 5rem) / 2.1)
	);
	--sc-ring:   calc(var(--sc-dial) * 0.035);
	--sc-needle-h: calc(var(--sc-dial) * 0.4375);

	/* The pedal row, as three figures rather than as numbers scattered
	   through the file. On a phone the cluster is centred on the screen and
	   the row is anchored to the foot, so the dial has to be sized against
	   this — see the responsive block. Change one of these and the dial
	   follows without anything else having to be edited. */
	--sc-pedal:  5.5rem;
	--sc-gear-btn: 3.4rem;
	--sc-pedal-inset: 1.25rem;
	/* Room to keep clear at the foot: the row, its inset, and a finger's
	   breadth of air above it. */
	--sc-pedal-room: calc(var(--sc-pedal) + var(--sc-pedal-inset) + 1rem);

	--sc-face:   #f6f4f0;
	--sc-bezel:  #2f3238;
	--sc-mark:   #555a60;
	--sc-hot:    #ee3300;
	--sc-hub-fg: #eeeeee;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #121417;
	color: #edeae4;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	overscroll-behavior: contain;
	touch-action: manipulation;
}

.sc-sim-overlay[hidden] {
	display: none;
}

.sc-sim-overlay *,
.sc-sim-overlay *::before,
.sc-sim-overlay *::after {
	box-sizing: border-box;
}

.sc-sim-overlay__inner {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(1.5rem, 4vh, 3rem);
	padding: clamp(1rem, 3vw, 2rem);
}

.sc-sim-overlay__head {
	position: absolute;
	top: 0;
	inset-inline: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem clamp(1rem, 3vw, 2rem);
}

.sc-sim-overlay__car {
	font-family: var(--sc-display, "Michroma", sans-serif);
	font-size: 20px;
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(237, 234, 228, 0.7);
}

/* A hairline circle with a cross drawn inside it. The glyph used to be a
   literal "×", which every font renders at a different weight and height and
   which the theme's own button styling framed in a red box — the two together
   read as a browser default rather than as part of the instrument. Two rotated
   bars are the same mark at a size and weight this file controls.
 *
 * Selected through the id rather than the class, and every colour marked
 * important. Both are deliberate. A single class scores 0-1-0, which loses to
 * a theme or Elementor-kit rule like `.elementor-kit-7 button` at 0-1-1 —
 * and since the kit stylesheet is enqueued after the plugin's, it also wins
 * every tie. The id puts this at 1-1-0, above anything the theme can write
 * without an id of its own, and the important flags cover the case where it
 * writes one anyway. This is a full-screen instrument panel: nothing outside
 * the plugin has any business colouring it. */
.sc-sim-overlay #sc-sim-close,
.sc-sim-overlay #sc-sim-close:link,
.sc-sim-overlay #sc-sim-close:visited,
.sc-sim-overlay #sc-sim-close:hover,
.sc-sim-overlay #sc-sim-close:focus,
.sc-sim-overlay #sc-sim-close:active {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(2.25rem, 3vw, 2.75rem);
	height: clamp(2.25rem, 3vw, 2.75rem);
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 1px solid rgba(237, 234, 228, 0.45) !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-image: none !important;
	color: #edeae4 !important;
	box-shadow: none !important;
	text-shadow: none;
	filter: none;
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.sc-sim-overlay #sc-sim-close:hover {
	border-color: #edeae4 !important;
	background: #edeae4 !important;
	color: #121417 !important;
}

.sc-sim-overlay #sc-sim-close:focus-visible {
	outline: 2px solid #edeae4;
	outline-offset: 3px;
}

.sc-sim-overlay #sc-sim-close .sc-sim-close__x {
	position: relative;
	display: block;
	width: 38%;
	height: 38%;
	background: none;
}

/* Both bars are the same element rotated in opposite directions, so the cross
   stays symmetrical whatever the button scales to. currentColor ties them to
   the rule above, which is what makes the hover invert cleanly. */
.sc-sim-overlay #sc-sim-close .sc-sim-close__x::before,
.sc-sim-overlay #sc-sim-close .sc-sim-close__x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	border-radius: 1px;
	background: currentColor !important;
}

.sc-sim-overlay #sc-sim-close .sc-sim-close__x::before {
	transform: translateY(-50%) rotate(45deg);
}

.sc-sim-overlay #sc-sim-close .sc-sim-close__x::after {
	transform: translateY(-50%) rotate(-45deg);
}

/* ----------------------------------------------------------------- Cluster */

.sc-dash {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* The bezel is a spread shadow rather than a z-index:-1 pseudo-element. Same
   picture, but it cannot be knocked out of order by a stacking context. */
.sc-meter {
	position: relative;
	flex: 0 0 auto;
	width: var(--sc-dial);
	height: var(--sc-dial);
	border-radius: 50%;
	background: var(--sc-face);
	box-shadow:
		inset 0 3px 6px rgba(0, 0, 0, 0.16),
		inset 0 3px 6px rgba(0, 0, 0, 0.23),
		0 0 0 var(--sc-ring) var(--sc-bezel),
		0 10px 20px rgba(0, 0, 0, 0.19),
		0 6px 6px rgba(0, 0, 0, 0.23);
}

/* On the limiter the bezel goes red — the same job a shift light does, and
   readable from the corner of the eye while you are watching the road. */
.sc-meter--rpm {
	transition: box-shadow 0.12s linear;
}

.sc-meter--rpm.is-limiting {
	box-shadow:
		inset 0 3px 6px rgba(0, 0, 0, 0.16),
		inset 0 3px 6px rgba(0, 0, 0, 0.23),
		0 0 0 var(--sc-ring) #b02000,
		0 0 26px 2px rgba(238, 51, 0, 0.5),
		0 10px 20px rgba(0, 0, 0, 0.19);
}

/* ---------------------------------------------------------------- Ticks */

/* The faces carry no numerals, so the ticks are the whole scale. The red ones
   still mark where the red zone starts. */
.sc-tick {
	position: absolute;
	display: block;
	width: 4px;
	height: calc(var(--sc-dial) * 0.0375);
	background: var(--sc-mark);
	transform-origin: 50% 0;
}

.sc-tick--half {
	width: 2px;
	height: calc(var(--sc-dial) * 0.025);
}

.sc-tick--quarter {
	width: 2px;
	height: calc(var(--sc-dial) * 0.0125);
}

.sc-tick.is-red {
	background: var(--sc-hot);
}

/* ------------------------------------------------------------------ Needle */

/* Solid bar with a triangle on each flank — one lighter, one darker. That
   asymmetry is what makes a flat rectangle read as a tapered needle. */
.sc-needle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 5px;
	height: var(--sc-needle-h);
	background: var(--sc-hot);
	transform: translate3d(-50%, 0, 0);
	transform-origin: 50% 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	will-change: transform;
}

.sc-needle::before,
.sc-needle::after {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
}

.sc-needle::before {
	left: -3px;
	border-width: 0 3px var(--sc-needle-h) 0;
	border-color: transparent #ff5722 transparent transparent;
}

.sc-needle::after {
	right: -3px;
	border-width: var(--sc-needle-h) 3px 0 0;
	border-color: #cc2a00 transparent transparent transparent;
}

/* --------------------------------------------------------------------- Hub */

/* The large hub is the resting state now, not a mode you click into. Nothing
   here toggles, so the pointer cursor and the size transition went with it. */
.sc-axle {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 37.5%;
	height: 37.5%;
	border-radius: 50%;
	background: var(--sc-bezel);
	transform: translate3d(-50%, -50%, 0);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.sc-label {
	position: absolute;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	text-align: center;
	color: var(--sc-mark);
}

.sc-label span {
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

/* The readout, centred on the hub.
 *
 * The tag used to be positioned absolutely, which took it out of the label's
 * height — so translateY(-50%) centred the number alone and the unit hung
 * below the middle of the hub. A flex column puts both lines back in the box
 * that gets centred.
 *
 * The remaining offset is optical and it goes UP, not down. Michroma declares
 * an ascent of 1.156 em against a descent of 0.266 em, so with line-height: 1
 * the half-leading is negative and the baseline lands 0.945 em below the top
 * of the line box. A digit reaching 0.766 em therefore has its ink centred at
 * 0.570 em — seven hundredths of an em BELOW the centre of the box that flex
 * so carefully centred. Measured on a rendered dial the whole two-line block
 * came out 0.0072 of the dial low, which is what this takes back.
 *
 * A future simplification: text-box-trim would trim the box to the cap height
 * and make the correction unnecessary, once it is safe to rely on. */
.sc-label--value {
	top: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--sc-dial) * 0.012);
	transform: translate3d(-50%, calc(-50% - var(--sc-dial) * 0.0072), 0);
	color: var(--sc-hub-fg);
	pointer-events: none;
}

.sc-label--value div {
	font-family: var(--sc-data);
	font-size: calc(var(--sc-dial) * 0.07);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.01em;
}

.sc-label--value span {
	display: block;
	position: static;
	transform: none;
	font-size: calc(var(--sc-dial) * 0.045);
	line-height: 1;
}

/* ------------------------------------------------------------ Gear display */

/* Pulled into both neighbours so the three dials read as one instrument
   binnacle rather than three separate circles — but dropped out of the
   horizontal centreline, where it sat on top of the graduations.
 *
 * The drop is geometry, not taste. In units of the dial: each face has radius
 * 0.5, the gear disc 0.125, and the two dial centres end up 1.05 apart (one
 * dial plus the 0.05 the negative margins leave), so the gear centre is 0.525
 * from each. Two circles stop overlapping once their centres are r1 + r2 =
 * 0.625 apart, and the vertical leg of that triangle is
 *
 *     √(0.625² − 0.525²) = 0.339
 *
 * At that offset the faces are exactly tangent: every number stays readable
 * and the disc's lowest point still lines up with the bottom of the dials, so
 * nothing hangs into the help text below. Only the dark bezels graze each
 * other near the rim, which is what keeps the cluster reading as one piece.
 *
 * Change the 0.25 size or the -0.1 margin and this number has to move with
 * them. */
.sc-meter--gear {
	z-index: 2;
	width: calc(var(--sc-dial) * 0.25);
	height: calc(var(--sc-dial) * 0.25);
	margin-inline: calc(var(--sc-dial) * -0.1);
	/* Transform rather than align-self: the flex row keeps measuring the disc
	   from the centreline, so the cluster's height does not change. */
	transform: translateY(calc(var(--sc-dial) * 0.34));
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Centred by the flex box above rather than by a line-height matched to the
   disc: line-height only lines up the box, and Michroma's box is 1.42 em tall
   against a digit of 0.766 em, so the numeral sat well below the middle of it.
   The correction is the same one the hub readout gets, here expressed in em
   because this line has a font size of its own: the digit's ink centre sits
   0.066 em under the centre of its line box, so the line box moves up by
   exactly that. */
.sc-gear-number {
	font-family: var(--sc-data);
	font-size: calc(var(--sc-dial) * 0.105);
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--sc-mark);
	transform: translateY(-0.066em);
}

.sc-gear-number.is-red {
	color: var(--sc-hot);
}

/* ---------------------------------------------------------------- Help text */

/* Anchored to the foot of the overlay, the way the car's name and the close
   button are anchored to its head. In the flow it travelled with the cluster
   and sat immediately beneath it, which crowded the dials and left a band of
   empty screen underneath. Out of the flow it also stops pushing the cluster
   off the vertical centre — the dials now sit in the true middle of the
   viewport rather than slightly above it.
 *
 * No measure: it is one line of key bindings, not a paragraph, and the 46ch
 * cap was breaking it in half on screens with room to spare. Narrow viewports
 * get the cap back in the responsive block below. */
.sc-sim-help {
	position: absolute;
	bottom: clamp(1.5rem, 5vh, 3.5rem);
	inset-inline: 0;
	margin: 0 auto;
	max-width: none;
	padding-inline: clamp(1rem, 3vw, 2rem);
	font-size: 0.85rem;
	font-style: italic;
	letter-spacing: 0.02em;
	text-align: center;
	color: rgba(237, 234, 228, 0.45);
}

/* ------------------------------------------------------------ Touch controls */

.sc-touch {
	display: none;
	width: 100%;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem;
}

/* Same specificity problem as the close button, same answer: scoped to the
   overlay so the theme's own <button> rules cannot repaint the pedals.
 *
 * The padding is zero, and flagged, and that is the whole fix for a label
 * that sat off centre in its circle. The theme gives every <button> roughly
 * eighteen pixels of inline padding; on the brake that leaves a content box
 * of 88 − 36 = 52px against a word 70px wide, and WebKit resolves a button
 * whose content overflows as if it were start-aligned rather than centred —
 * so HAMULEC started at the left padding edge and ran out past the middle,
 * ending up hard against the right rim. GAZ is short enough to fit inside
 * the same box, which is why only one of the four looked wrong. With no
 * padding the content box is the whole circle and every label fits.
 *
 * Flex centring rather than the button's own, because the button's is what
 * failed: `justify-content: center` here is under this file's control and
 * `align-items: center` replaces a line-height that would have to be kept in
 * step with three different button sizes. */
.sc-sim-overlay .sc-touch__btn,
.sc-sim-overlay .sc-touch__btn:hover,
.sc-sim-overlay .sc-touch__btn:focus,
.sc-sim-overlay .sc-touch__btn:active {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	border: 1px solid rgba(237, 234, 228, 0.35);
	background: rgba(237, 234, 228, 0.08);
	background-image: none;
	color: #edeae4;
	box-shadow: none;
	text-shadow: none;
	font-family: var(--sc-body, "Poppins", sans-serif);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	text-align: center;
	text-indent: 0;
	text-transform: uppercase;
	white-space: nowrap;
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	touch-action: none;
}

/* letter-spacing is added after the last glyph as well as between them, so
 * the line box is a tenth of an em wider on the right than the ink inside
 * it and centring the box leaves the ink half that far to the left. The
 * negative margin takes the trailing space back off the span's margin box,
 * which is what flex centring actually measures.
 *
 * Vertically nothing is needed. Poppins declares an ascent of 1.05 em
 * against a descent of 0.35 em, so with line-height: 1 the baseline lands
 * 0.85 em below the top of the line box; a capital reaching 0.70 em
 * therefore has its ink centred at exactly 0.50 em — the middle of the box.
 * The same holds for the plus and the minus, whose ink centres sit within
 * seven thousandths of an em of it. */
.sc-sim-overlay .sc-touch__label {
	display: block;
	margin-right: -0.1em;
	line-height: 1;
}

.sc-sim-overlay .sc-touch__btn--gas,
.sc-sim-overlay .sc-touch__btn--brake {
	width: var(--sc-pedal);
	height: var(--sc-pedal);
	flex: 0 0 auto;
}

.sc-sim-overlay .sc-touch__btn--gas,
.sc-sim-overlay .sc-touch__btn--gas:hover,
.sc-sim-overlay .sc-touch__btn--gas:focus,
.sc-sim-overlay .sc-touch__btn--gas:active {
	background: var(--sc-hot);
	border-color: var(--sc-hot);
	color: #fff;
}

.sc-sim-overlay .sc-touch__btn.is-pressed {
	transform: scale(0.94);
	filter: brightness(1.25);
}

.sc-touch__gears {
	display: flex;
	gap: 0.6rem;
}

.sc-sim-overlay .sc-touch__btn--gear {
	width: var(--sc-gear-btn);
	height: var(--sc-gear-btn);
	font-size: calc(var(--sc-gear-btn) * 0.44);
}

.sc-sim-overlay.is-touch .sc-touch {
	display: flex;
}

/* --------------------------------------------------------------- Responsive */

/* On a phone the panel reads as a dashboard: instruments in the middle of the
   screen, pedals along the bottom edge where a thumb already is. Both are out
   of each other's way because only the cluster is left in the flow — the head
   and the pedal row are positioned, so neither can push the dials off centre.

   The dial is sized against whichever runs out first. Sixteen rem is the cap;
   the width term is the 2.1 × dial the cluster needs in a row; the height
   term is the pedal reserve, doubled — a cluster centred on the screen has to
   clear the foot on both sides equally, and the row down there is the taller
   of the two things it has to clear. Dividing by 1.07 accounts for the bezel,
   which is drawn outside the face. The floor stops a very short screen from
   resolving the whole thing to nothing.

   Written twice on purpose. The first uses vh, which on iOS is measured
   against the viewport with the toolbars hidden and so overstates the room by
   about a toolbar; the second corrects that with dvh and is simply ignored by
   anything too old to parse it. */
@media (max-width: 767px) {
	.sc-sim-overlay {
		--sc-dial: max(7rem, min(
			16rem,
			calc((100vh - 2 * var(--sc-pedal-room)) / 1.07),
			calc((100vw - 2.5rem) / 2.1)
		));
		--sc-dial: max(7rem, min(
			16rem,
			calc((100dvh - 2 * var(--sc-pedal-room)) / 1.07),
			calc((100dvw - 2.5rem) / 2.1)
		));
	}

	.sc-sim-overlay__inner {
		justify-content: center;
		padding: 0;
		gap: 0;
	}

	/* Clears the status bar and the notch on a phone that has one. */
	.sc-sim-overlay__head {
		padding-top: max(1rem, env(safe-area-inset-top, 0px));
	}

	/* Anchored to the foot the way the title is anchored to the head. In the
	   flow the row sat directly under the dials and the rest of the screen
	   was empty below it. */
	.sc-sim-overlay.is-touch .sc-touch {
		position: absolute;
		inset-inline: 0;
		bottom: calc(var(--sc-pedal-inset) + env(safe-area-inset-bottom, 0px));
		width: auto;
		padding-inline: clamp(1rem, 4vw, 2rem);
	}

	/* The help line lists key bindings, and the script empties it on a touch
	   screen — but an empty paragraph still spans the foot of the overlay,
	   right where the pedals now are. */
	.sc-sim-overlay.is-touch .sc-sim-help {
		display: none;
	}

	.sc-sim-help {
		max-width: 46ch;
		font-size: 0.75rem;
	}
}

/* A phone turned on its side has about 330px of height to work with. At full
   size the pedal row and its air claim 7.75rem at the foot, and a cluster
   centred on the screen has to clear that twice over — which leaves less than
   nothing for the dials, so the floor took over and the two overlapped by a
   few pixels. Shrinking the row is the right trade at this height: the dial
   is the thing being read, the pedals only have to be hittable, and 4rem is
   still a comfortable target.
 *
 * Keyed on height rather than on orientation, because what actually matters
 * is the short axis — a tall narrow window on a desktop hits the same wall. */
@media (max-width: 767px) and (max-height: 460px) {
	.sc-sim-overlay {
		--sc-pedal: 4rem;
		--sc-gear-btn: 2.75rem;
		--sc-pedal-inset: 0.75rem;
		--sc-pedal-room: calc(var(--sc-pedal) + var(--sc-pedal-inset) + 0.75rem);
		--sc-dial: max(6rem, min(
			16rem,
			calc((100vh - 2 * var(--sc-pedal-room)) / 1.07),
			calc((100vw - 2.5rem) / 2.1)
		));
		--sc-dial: max(6rem, min(
			16rem,
			calc((100dvh - 2 * var(--sc-pedal-room)) / 1.07),
			calc((100dvw - 2.5rem) / 2.1)
		));
	}

	.sc-sim-overlay__car {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sc-needle {
		transition: none !important;
	}
}