/**
 * Ballistics calculator — Choice Ammunition.
 *
 * Everything is scoped under .cab so it can sit inside a WordPress page, a
 * product accordion, or a comparison column without leaking. Layout switches
 * are CONTAINER queries, not viewport queries: the standalone page gives this
 * the full column width, the product-page embed will give it a narrow one, and
 * the right layout is a function of the space it is actually in.
 *
 * Palette: the live site's near-black grounds with the #eaa900 amber accent.
 * All of it is tokens at the top; nothing below hardcodes a colour.
 */

.cab {
	--cab-ink: #0e0f11;
	--cab-surface: #17191c;
	--cab-surface-2: #1f2226;
	--cab-line: #2e3237;
	--cab-line-soft: #23262a;
	--cab-text: #f2f2f0;
	--cab-muted: #9ba1a8;
	--cab-faint: #6e747b;
	--cab-gold: #eaa900;
	--cab-gold-bright: #ffbe1a;
	--cab-gold-dim: #b98600;
	--cab-gold-wash: #1c1a14;
	--cab-alert: #e0574a;
	--cab-alert-bg: #2a1614;
	--cab-alert-line: #4a2721;
	--cab-alert-text: #f0a196;
	--cab-ok-bg: #14211b;
	--cab-ok-line: #2c4438;
	--cab-ok-text: #8fd3b0;
	--cab-on-gold: #171310;

	--cab-ui: 'Roboto Condensed', -apple-system, 'Segoe UI', sans-serif;
	--cab-num: ui-monospace, 'SFMono-Regular', 'Roboto Mono', Menlo, Consolas, monospace;

	container-type: inline-size;
	container-name: cab;

	box-sizing: border-box;
	background: var(--cab-ink);
	color: var(--cab-text);
	font-family: var(--cab-ui);
	font-size: 15px;
	line-height: 1.5;
	padding: 18px 16px 28px;
	border: 1px solid var(--cab-line);
}

/* The calculator scrolls itself (and its error banner) to the top of the
   viewport on Calculate, on a share-link arrival and on the PDP. The site's
   header stays fixed over the top of the page (158px desktop, 162px phone),
   so without this the results heading and the banner land underneath it.
   --header-sticky-height is Blocksy's; it reads 158px at every width, so the
   16px also covers the 4px it under-reports on a phone. */
.cab,
.cab [data-cab-banner] {
	scroll-margin-top: calc(var(--header-sticky-offset, 0px) + var(--header-sticky-height, 0px) + 16px);
}

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

/* The site sets Roboto Condensed with !important in places, so the numeric
   face has to answer in kind. Narrowly scoped to the figures themselves. */
.cab .cab-num,
.cab .cab-tt td,
.cab .cab-tt th,
.cab input[type='text'],
.cab .cab-dial__num,
.cab .cab-card__val,
.cab .cab-vadj__big {
	font-family: var(--cab-num) !important;
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'tnum' 1;
}

.cab [hidden] {
	display: none !important;
}

/* ---------- headings and section furniture ---------- */

.cab-title {
	margin: 0 0 4px;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: var(--cab-text);
}

.cab-lede {
	margin: 0 0 20px;
	color: var(--cab-muted);
	font-size: 14px;
	max-width: 62ch;
}

.cab-group {
	margin-bottom: 20px;
}

.cab-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 2px solid var(--cab-gold);
	padding-bottom: 6px;
	margin-bottom: 14px;
}

.cab-group__head h3 {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cab-text);
}

.cab-group__idx {
	font-family: var(--cab-num);
	font-size: 11px;
	font-weight: 700;
	color: var(--cab-gold);
}

/* ---------- fields ---------- */

.cab-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

@container cab (min-width: 420px) {
	.cab-row--2 {
		grid-template-columns: 1fr 1fr;
	}

	/* A lone field that reads as a short number — a barrel length, a bullet
	   diameter — should not stretch to the full column width. It makes the
	   field look like it wants a sentence. */
	.cab-row--half {
		grid-template-columns: 1fr 1fr;
	}
}

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

.cab-field > label,
.cab-field__legend {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cab-muted);
	margin-bottom: 6px;
	padding: 0;
}

.cab-field__hint {
	font-size: 10.5px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--cab-faint);
	margin-left: 5px;
}

.cab-field__control {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	border-radius: 2px;
	transition: border-color 0.15s ease;
}

.cab-field__control:focus-within {
	border-color: var(--cab-gold);
}

.cab-input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	color: var(--cab-text);
	padding: 11px 10px;
	font-size: 15px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	border-radius: 0;
}

/* Blocksy styles every text input with `input:is([type="text"], …)` — a
   specificity of 0,1,1, which beats `.cab-input` (0,1,0). On the live theme
   that put a white 1px border, 3px radius, 15px padding, a fixed 40px height
   and `width: 100%` on the input INSIDE `.cab-field__control`, so every field
   drew a second box inside its own border and the 100% width squeezed the
   unit suffix ("yd") against the edge. Measured 15 Sep 2026 on the results
   "Jump to" field. The border belongs to `.cab-field__control` alone; the
   input is transparent inside it. 0,3,0 also outranks Blocksy's :focus rules
   (0,2,1), so focus is shown by the control's gold border, not the input's. */
.cab .cab-field__control .cab-input,
.cab .cab-field__control .cab-input:focus,
.cab .cab-field__control .cab-input:hover {
	flex: 1;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 11px 10px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--cab-text);
	outline: none;
}

.cab-input::placeholder {
	color: #5c6169;
}

.cab-field__unit {
	flex: none;
	padding-right: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--cab-muted);
	white-space: nowrap;
}

.cab-field__note {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--cab-muted);
}

.cab-field.is-error .cab-field__control {
	border-color: var(--cab-alert);
	background: var(--cab-alert-bg);
}

.cab-field__err {
	margin: 6px 0 0;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--cab-alert);
}

.cab-field.is-superseded {
	opacity: 0.55;
}

/* ---------- segmented controls ---------- */

.cab-seg {
	display: flex;
	border: 1.5px solid var(--cab-line);
	border-radius: 2px;
	overflow: hidden;
}

.cab-seg__btn {
	flex: 1;
	background: var(--cab-surface);
	border: 0;
	color: var(--cab-muted);
	padding: 10px 6px;
	font-family: var(--cab-ui);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}

.cab-seg__btn + .cab-seg__btn {
	border-left: 1.5px solid var(--cab-line);
}

.cab-seg__btn:hover {
	color: var(--cab-text);
}

.cab-seg__btn.is-on {
	background: var(--cab-gold);
	color: var(--cab-on-gold);
}

.cab-clock {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
	margin: 10px 0 8px;
}

@container cab (min-width: 520px) {
	.cab-clock {
		grid-template-columns: repeat(8, 1fr);
	}
}

.cab-clock__btn {
	background: var(--cab-surface);
	border: 1.5px solid var(--cab-line);
	border-radius: 2px;
	color: var(--cab-muted);
	padding: 8px 2px;
	font-family: var(--cab-num);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
}

.cab-clock__btn:hover {
	color: var(--cab-text);
}

.cab-clock__btn.is-on {
	background: var(--cab-gold);
	border-color: var(--cab-gold);
	color: var(--cab-on-gold);
}

/* ---------- shooting angle ---------- */

.cab-angle {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border: 1.5px solid var(--cab-line);
	border-left: 3px solid var(--cab-gold);
	background: var(--cab-surface);
	padding: 13px;
	margin-bottom: 10px;
}

.cab-angle__glyph {
	flex: none;
	width: 64px;
	height: 56px;
	overflow: visible;
}

.cab-angle__ground {
	stroke: var(--cab-line);
	stroke-width: 2;
	stroke-dasharray: 4 4;
}

.cab-angle__barrel {
	stroke: var(--cab-gold);
	stroke-width: 4;
	stroke-linecap: round;
}

/* The arm carries an SVG rotate(deg cx cy) attribute set from JS — pivoting on
   the muzzle end rather than the glyph centre, so the barrel swings the way a
   rifle does. */
.cab-angle__glyph [data-cab-angle-arm] {
	transition: transform 0.15s ease;
}

.cab-angle__glyph.is-level .cab-angle__barrel {
	stroke: var(--cab-muted);
}

.cab-angle__shooter {
	fill: var(--cab-muted);
}

.cab-angle__body {
	flex: 1;
	min-width: 0;
}

.cab-angle .cab-seg {
	max-width: 320px;
}

.cab-angle__mag {
	margin-top: 11px;
	max-width: 190px;
}

.cab-angle__read {
	margin: 11px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cab-text);
}

/* ---------- advanced expander ---------- */

.cab-adv {
	border: 1.5px solid var(--cab-line);
	border-radius: 2px;
	background: var(--cab-surface);
	margin-bottom: 16px;
}

.cab-adv > summary {
	list-style: none;
	cursor: pointer;
	padding: 13px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	color: var(--cab-text);
}

.cab-adv > summary::-webkit-details-marker {
	display: none;
}

.cab-adv > summary .cab-caret {
	color: var(--cab-gold);
	transition: transform 0.18s ease;
}

.cab-adv[open] > summary .cab-caret {
	transform: rotate(90deg);
}

.cab-adv__inner {
	padding: 14px 13px 16px;
	border-top: 1px solid var(--cab-line);
}

.cab-subhead {
	font-size: 10.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cab-gold);
	font-weight: 700;
	margin: 20px 0 10px;
	padding-top: 14px;
	border-top: 1px solid var(--cab-line);
}

/* ---------- notes and banners ---------- */

.cab-note {
	margin: 8px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	padding: 9px 11px;
	border-radius: 2px;
	background: var(--cab-ok-bg);
	border: 1px solid var(--cab-ok-line);
	color: var(--cab-ok-text);
}

.cab-note--warn {
	background: var(--cab-alert-bg);
	border-color: var(--cab-alert-line);
	color: var(--cab-alert-text);
}

.cab-banner {
	margin: 0 0 18px;
	padding: 13px 14px;
	border-radius: 2px;
	border: 1px solid var(--cab-alert-line);
	background: var(--cab-alert-bg);
	color: var(--cab-alert-text);
	font-size: 13px;
	line-height: 1.5;
}

.cab-banner strong {
	display: block;
	color: var(--cab-text);
	font-size: 14px;
	margin-bottom: 3px;
}

.cab-banner p {
	margin: 0;
}

/* ---------- buttons ---------- */

.cab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1.5px solid var(--cab-gold);
	background: var(--cab-gold);
	color: var(--cab-on-gold);
	border-radius: 2px;
	padding: 15px 20px;
	font-family: var(--cab-ui);
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.12s ease;
}

.cab-btn:hover {
	background: var(--cab-gold-bright);
	border-color: var(--cab-gold-bright);
}

.cab-btn--block {
	width: 100%;
}

.cab-btn--ghost {
	background: transparent;
	color: var(--cab-gold);
}

.cab-btn--ghost:hover {
	background: var(--cab-gold);
	color: var(--cab-on-gold);
}

.cab-btn--small {
	padding: 10px 15px;
	font-size: 11.5px;
	letter-spacing: 0.08em;
}

.cab-btn:disabled {
	background: #3a3d42;
	border-color: #3a3d42;
	color: #7c828a;
	cursor: not-allowed;
}

.cab-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.cab-actions .cab-btn {
	flex: 1 1 200px;
}

/* ---------- share links (86eyw5mp8) ---------- */

.cab-share {
	margin-top: 14px;
}

.cab-share__status {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cab-text);
}

.cab-share__status:empty {
	margin: 0;
}

/* The arrival notice is a live region that is always in the page (never
   [hidden], which screen readers miss) and starts empty. While empty it
   collapses to nothing: .cab-banner's margin, padding and border are zeroed
   here (0,2,0 beats .cab-banner's 0,1,0). It is deliberately NOT display:none,
   which would take the region out of the accessibility tree and defeat the
   point of keeping it in the page. */
.cab-share-notice:empty {
	margin: 0;
	padding: 0;
	border: 0;
}

/* :not([hidden]) — a bare display rule would beat the UA's [hidden] and show
   the copy-by-hand box on every page load. */
.cab-share__fallback:not([hidden]) {
	display: block;
	width: 100%;
	margin-top: 8px;
}

/* Focus is a single rule for everything interactive — a calculator is used
   with a keyboard by exactly the people most likely to care about it. */
.cab button:focus-visible,
.cab input:focus-visible,
.cab summary:focus-visible,
.cab [tabindex]:focus-visible {
	outline: 2px solid var(--cab-gold);
	outline-offset: 2px;
}

.cab .cab-btn:focus-visible,
.cab .cab-seg__btn.is-on:focus-visible,
.cab .cab-clock__btn.is-on:focus-visible {
	outline-color: var(--cab-text);
}

/* ---------- muzzle-velocity helper ---------- */

.cab-vadj {
	border: 1.5px solid var(--cab-line);
	border-left: 3px solid var(--cab-gold);
	background: var(--cab-surface-2);
	padding: 13px;
	margin: 12px 0 10px;
}

.cab-vadj__cap {
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cab-muted);
	font-weight: 700;
	margin: 0 0 5px;
}

.cab-vadj__big {
	margin: 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--cab-gold);
}

.cab-vadj__big small {
	font-size: 12px;
	font-weight: 500;
	color: var(--cab-muted);
	margin-left: 5px;
}

.cab-vadj__work {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--cab-line);
	font-size: 12px;
	line-height: 1.6;
	color: var(--cab-muted);
}

/* ---------- results ---------- */

.cab-results {
	container-type: inline-size;
	container-name: cabres;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: start;
}

@container cab (min-width: 900px) {
	.cab-results {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: 26px;
	}
}

.cab-results__primary,
.cab-results__secondary {
	min-width: 0;
}

.cab-results-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--cab-gold);
}

.cab-results-head__text {
	min-width: 0;
	flex: 1 1 260px;
}

.cab-results-head h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Calculate moves focus to this heading, so a keyboard or screen-reader user
   lands on the results rather than being left on a button that has vanished.
   The focus ring that follows is deliberate — it is the only signal that the
   view changed under them. */
.cab-results-head h3:focus:not(:focus-visible) {
	outline: none;
}

.cab-summary {
	margin: 5px 0 0;
	font-family: var(--cab-num);
	font-size: 12.5px;
	color: var(--cab-muted);
}

.cab-caption {
	margin: 0 0 14px;
	padding: 9px 12px;
	border-left: 3px solid var(--cab-gold);
	background: var(--cab-surface);
	font-size: 12px;
	line-height: 1.6;
	color: var(--cab-muted);
}

.cab-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
	margin-bottom: 12px;
}

@container cabres (min-width: 380px) {
	.cab-metrics {
		grid-template-columns: repeat(4, 1fr);
	}
}

.cab-metrics__btn {
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	color: var(--cab-muted);
	border-radius: 2px;
	padding: 10px 4px;
	font-family: var(--cab-ui);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.cab-metrics__btn.is-on {
	background: var(--cab-gold);
	border-color: var(--cab-gold);
	color: var(--cab-on-gold);
}

/* ---------- chart ---------- */

.cab-chart {
	margin: 0 0 14px;
	padding: 10px 8px 6px;
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
}

.cab-chart svg {
	display: block;
	width: 100%;
	height: auto;
}

.cab-chart__cap {
	margin: 4px 2px 0;
	font-size: 11px;
	color: var(--cab-faint);
}

.cab-chart__grid {
	stroke: var(--cab-line-soft);
	stroke-width: 1;
}

.cab-chart__zero {
	stroke: var(--cab-muted);
	stroke-width: 1.4;
}

.cab-chart__subsonic {
	fill: var(--cab-alert);
	opacity: 0.08;
}

.cab-chart__line {
	fill: none;
	stroke: var(--cab-gold);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cab-chart__cursor {
	stroke: var(--cab-muted);
	stroke-dasharray: 3 3;
	opacity: 0.65;
}

.cab-chart__dot {
	fill: var(--cab-text);
}

.cab-chart__halo {
	fill: none;
	stroke: var(--cab-gold);
	stroke-width: 2;
}

.cab-chart__ylab,
.cab-chart__xlab {
	font-family: var(--cab-num);
	font-size: 10px;
	fill: var(--cab-muted);
}

.cab-chart__readout {
	font-family: var(--cab-num);
	font-size: 13px;
	font-weight: 700;
	fill: var(--cab-text);
}

/* Inside an SVG a CSS font-size is user units, so it shrinks with the viewBox.
   On a phone the chart renders at roughly half its 600-unit width, which would
   put these labels at about 5 real pixels. Scale them back up. */
@container cabres (max-width: 520px) {
	.cab-chart__ylab,
	.cab-chart__xlab {
		font-size: 15px;
	}

	.cab-chart__readout {
		font-size: 19px;
	}
}

/* ---------- distance dial ---------- */

.cab-dial {
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	padding: 16px 14px;
	margin-bottom: 14px;
}

.cab-dial__read {
	margin: 0;
	text-align: center;
	line-height: 1;
}

.cab-dial__num {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--cab-text);
}

.cab-dial__unit {
	font-size: 15px;
	font-weight: 500;
	color: var(--cab-muted);
	margin-left: 6px;
}

.cab-dial__hint {
	margin: 8px 0 0;
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cab-muted);
	font-weight: 600;
}

.cab-dial__track {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.cab-step {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface-2);
	color: var(--cab-text);
	font-size: 22px;
	line-height: 1;
	font-family: var(--cab-ui);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cab-step:hover:not(:disabled) {
	background: var(--cab-gold);
	border-color: var(--cab-gold);
	color: var(--cab-on-gold);
}

.cab-step:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.cab-dial__slot {
	flex: 1;
	min-width: 0;
}

.cab-dial__slider {
	width: 100%;
	height: 28px;
	accent-color: var(--cab-gold);
	cursor: pointer;
}

.cab-dial__ticks {
	display: flex;
	justify-content: space-between;
	font-family: var(--cab-num);
	font-size: 10px;
	color: var(--cab-muted);
}

.cab-dial__jump {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--cab-line);
}

.cab-dial__jumplabel {
	flex: none;
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cab-muted);
	font-weight: 700;
}

.cab-dial__jump .cab-field__control {
	flex: 1;
	min-width: 110px;
}

/* ---------- selected-distance card ---------- */

.cab-card {
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	margin-bottom: 12px;
}

.cab-card__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	background: #000;
	padding: 12px 13px;
	border-bottom: 1px solid var(--cab-gold);
}

.cab-card__range {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.cab-card__tof {
	font-family: var(--cab-num);
	font-size: 11px;
	color: var(--cab-muted);
}

.cab-card__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 11px 13px;
	border-bottom: 1px solid var(--cab-line);
}

.cab-card__row:last-child {
	border-bottom: 0;
}

.cab-card__key {
	font-size: 13px;
	color: var(--cab-muted);
}

.cab-card__val {
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

.cab-card__val small {
	font-size: 10.5px;
	font-weight: 500;
	color: var(--cab-muted);
	margin-left: 4px;
}

.cab-card__row.is-hero {
	background: var(--cab-gold-wash);
}

.cab-card__row.is-hero .cab-card__val {
	font-size: 26px;
	color: var(--cab-gold);
}

.cab-transonic {
	margin-bottom: 12px;
}

/* ---------- table ---------- */

.cab-table__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	color: var(--cab-text);
	border-radius: 2px;
	padding: 13px;
	font-family: var(--cab-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
}

.cab-table__toggle .cab-caret {
	color: var(--cab-gold);
	transition: transform 0.18s ease;
}

.cab-table__toggle.is-open .cab-caret {
	transform: rotate(90deg);
}

.cab-table__scroll {
	margin-top: 10px;
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	overflow: auto;
	max-height: 440px;
	overscroll-behavior: contain;
}

.cab-tt {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	font-size: 12px;
}

.cab-tt th,
.cab-tt td {
	padding: 8px 10px;
	text-align: right;
	white-space: nowrap;
	border-top: 1px solid var(--cab-line);
	color: var(--cab-text);
	font-weight: 400;
}

.cab-tt thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	background: #000;
	color: var(--cab-gold);
	font-family: var(--cab-ui) !important;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	border-top: 0;
	vertical-align: bottom;
}

.cab-tt__label {
	display: block;
}

.cab-tt__unit {
	display: block;
	font-size: 9px;
	color: var(--cab-muted);
	font-weight: 600;
	letter-spacing: 0.04em;
}

.cab-tt tbody th,
.cab-tt tbody td:first-child {
	position: sticky;
	left: 0;
	text-align: left;
	background: var(--cab-surface);
	font-weight: 700;
	border-right: 1.5px solid var(--cab-line);
	z-index: 2;
}

.cab-tt thead th:first-child {
	left: 0;
	z-index: 4;
	background: #000;
}

.cab-tt tbody tr:nth-child(even) td,
.cab-tt tbody tr:nth-child(even) th {
	background: var(--cab-surface-2);
}

.cab-tt tbody tr {
	cursor: pointer;
}

.cab-tt tbody tr:hover td,
.cab-tt tbody tr:hover th {
	background: #23201a;
}

.cab-tt tbody tr.is-selected td,
.cab-tt tbody tr.is-selected th {
	background: #241f14;
}

.cab-tt tbody tr.is-selected th {
	color: var(--cab-gold);
	box-shadow: inset 3px 0 0 var(--cab-gold);
}

.cab-tt tbody tr.is-subsonic td {
	color: #c88b80;
}

.cab-legend {
	margin: 9px 2px 0;
	font-size: 11px;
	line-height: 1.5;
	color: var(--cab-muted);
}

.cab-legend__sw {
	display: inline-block;
	width: 9px;
	height: 9px;
	background: #c88b80;
	margin-right: 5px;
}

/* ---------- disclaimer ---------- */

.cab-disclaimer {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cab-line);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--cab-faint);
}

.cab-disclaimer b {
	color: var(--cab-muted);
}

/* ---------- two-column form on wider containers ---------- */

@container cab (min-width: 760px) {
	.cab-form__cols {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 28px;
		align-items: start;
	}
}

@container cab (min-width: 900px) {
	.cab {
		padding: 26px 30px 34px;
	}
}

/* ---------- ineligible load ----------
   One rifle page in eleven has no published BC, so this is a designed state,
   not a fallback: it says what is missing and offers the full calculator. */

.cab--unavailable {
	padding: 18px 16px;
	border-left: 3px solid var(--cab-gold-dim);
}

.cab-unavailable__head {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cab-gold);
}

.cab-unavailable__body {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--cab-muted);
	max-width: 60ch;
}

.cab-unavailable__body:last-child {
	margin-bottom: 0;
}

.cab-unavailable__body a.cab-btn {
	text-decoration: none;
}

/* ---------- no-JS ---------- */

.cab-noscript {
	margin: 0;
	padding: 14px;
	border: 1px solid var(--cab-alert-line);
	background: var(--cab-alert-bg);
	color: var(--cab-alert-text);
	font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
	.cab *,
	.cab *::before,
	.cab *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Stage 8 surfaces — the product-page embed and the comparison view.

   Same rules as everything above: scoped under .cab, every layout switch is a
   CONTAINER query. The embed lives in a product accordion whose width has no
   relationship to the viewport, and each comparison column is narrow on a page
   that is wide — a viewport breakpoint would be wrong in both places.
   ========================================================================== */

/* ---------- product-page embed ---------- */

.cab--pdp {
	padding: 16px 14px 20px;
}

@container cab (min-width: 700px) {
	.cab--pdp {
		padding: 20px 20px 24px;
	}
}

/* The published facts about the load. Server-rendered, so they are in the
   document whether or not the calculator runs. */
.cab-pdp__facts {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--cab-gold);
	font-family: var(--cab-num);
	font-size: 13px;
	letter-spacing: 0.02em;
	color: var(--cab-text);
}

.cab-pdp__controls {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

@container cab (min-width: 420px) {
	.cab-pdp__controls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cab-adv--pdp {
	margin: 4px 0 16px;
}

.cab-pdp__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
}

.cab-pdp__actions .cab-btn {
	text-decoration: none;
}

/* ---------- the load picker ----------
   Reads as a select, opens as a panel. One component for both sides: Load A
   searches ~553 loads, Load B is usually 13-29 in one calibre. */

.cab-pick {
	position: relative;
	display: block;
	min-width: 0;
}

.cab-pick__label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--cab-gold);
}

.cab-pick__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	/* 44px is the tap target this has to clear on a phone. */
	min-height: 46px;
	padding: 10px 12px;
	border: 1.5px solid var(--cab-line);
	background: var(--cab-surface);
	color: var(--cab-text);
	font-family: var(--cab-ui);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
}

.cab-pick__button:hover:not(:disabled) {
	border-color: var(--cab-gold-dim);
}

.cab-pick.is-open .cab-pick__button {
	border-color: var(--cab-gold);
}

.cab-pick__button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cab-pick__value {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cab-pick__value.is-placeholder {
	color: var(--cab-faint);
}

.cab-pick__caret {
	flex: none;
	color: var(--cab-gold);
	font-size: 12px;
}

.cab-pick__panel {
	position: absolute;
	z-index: 30;
	inset-inline: 0;
	top: calc(100% + 4px);
	border: 1.5px solid var(--cab-gold);
	background: var(--cab-ink);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}

.cab-pick__searchwrap {
	padding: 8px;
	border-bottom: 1px solid var(--cab-line);
}

.cab-pick__search {
	width: 100%;
}

.cab-pick__list {
	max-height: 46vh;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	overscroll-behavior: contain;
}

/* Sticky calibre headers: with 77 groups in one scroller, the header is the
   only thing telling you where you are. */
.cab-pick__group {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 12px;
	background: var(--cab-surface-2);
	border-block: 1px solid var(--cab-line-soft);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cab-gold);
}

.cab-pick__groupn {
	font-family: var(--cab-num);
	font-size: 11px;
	letter-spacing: 0;
	color: var(--cab-faint);
}

.cab-pick__opt {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-height: 42px;
	padding: 10px 12px;
	font-size: 13.5px;
	color: var(--cab-text);
	cursor: pointer;
}

.cab-pick__opt.is-active {
	background: var(--cab-surface);
}

.cab-pick__opt.is-selected {
	color: var(--cab-gold-bright);
}

.cab-pick__opt.is-selected::after {
	content: "\2713";
	flex: none;
	color: var(--cab-gold);
}

.cab-pick__opttext {
	min-width: 0;
}

.cab-pick__optmeta {
	flex: none;
	font-size: 11px;
	color: var(--cab-faint);
}

.cab-pick__empty {
	margin: 0;
	padding: 14px 12px;
	font-size: 13px;
	color: var(--cab-muted);
}

/* ---------- comparison view ---------- */

.cab-cmp__pickers {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 16px;
}

@container cab (min-width: 620px) {
	.cab-cmp__pickers {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cab-cmp__empty {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--cab-muted);
}

.cab-cmp__conditions {
	margin: 0 0 6px;
	padding: 9px 12px;
	border-left: 3px solid var(--cab-gold);
	background: var(--cab-surface);
	font-size: 12px;
	line-height: 1.6;
}

.cab-cmp__conditions-label {
	display: block;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-size: 10.5px;
	color: var(--cab-gold);
}

.cab-cmp__conditions-value {
	font-family: var(--cab-num);
	color: var(--cab-muted);
}

.cab-cmp__velnote {
	margin: 0 0 16px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--cab-muted);
	max-width: 78ch;
}

.cab-cmp__dial {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px;
	border: 1px solid var(--cab-line);
	background: var(--cab-surface);
}

.cab-cmp__dialslot {
	min-width: 0;
}

.cab-cmp__dialslot .cab-dial__read {
	margin: 0 0 6px;
}

.cab-cmp__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

@container cab (min-width: 560px) {
	.cab-cmp__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ⚠️ LOAD-BEARING. Each column is its own `cab` container, so the shared
   results components size themselves against the COLUMN and not against the
   page. Without this a wide desktop makes each column's card try to lay out at
   the two-column width it does not have. */
.cab-cmp__col {
	container-type: inline-size;
	container-name: cab;
	min-width: 0;
}

.cab-cmp__head {
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cab-gold);
}

.cab-cmp__facts {
	margin: 0 0 10px;
	font-family: var(--cab-num);
	font-size: 11.5px;
	line-height: 1.6;
	color: var(--cab-muted);
}

.cab-cmp__delta {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1.5px solid var(--cab-gold-dim);
	background: var(--cab-gold-wash);
	text-align: center;
}

.cab-cmp__deltahead {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cab-gold);
}

.cab-cmp__deltanum {
	margin: 2px 0 4px;
	font-family: var(--cab-num) !important;
	font-variant-numeric: tabular-nums;
	font-size: 30px;
	line-height: 1.1;
	color: var(--cab-text);
}

.cab-cmp__deltanum small {
	margin-left: 4px;
	font-size: 13px;
	color: var(--cab-muted);
}

.cab-cmp__deltatext {
	margin: 0;
	font-size: 12.5px;
	color: var(--cab-muted);
}

.cab-cmp__chart {
	margin-top: 18px;
}

.cab-cmp__line--a {
	stroke: var(--cab-gold);
}

.cab-cmp__line--b {
	stroke: var(--cab-ok-text);
	stroke-dasharray: 7 4;
}

.cab-cmp__dot--a {
	fill: var(--cab-gold);
}

.cab-cmp__dot--b {
	fill: var(--cab-ok-text);
}

.cab-cmp__legend {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 11.5px;
	color: var(--cab-muted);
}

.cab-cmp__key {
	display: inline-block;
	width: 18px;
	height: 0;
	border-top-width: 3px;
	border-top-style: solid;
}

.cab-cmp__key--a {
	border-top-color: var(--cab-gold);
}

.cab-cmp__key--b {
	border-top-color: var(--cab-ok-text);
	border-top-style: dashed;
	margin-left: 12px;
}

.cab-cmp__d {
	color: var(--cab-gold-bright);
}

.cab-cmp__link {
	margin: 10px 0 0;
	font-size: 12.5px;
}

.cab-cmp__link a:not(.cab-btn) {
	color: var(--cab-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--cab-gold-dim);
}

.cab-cmp__link a:not(.cab-btn):hover {
	color: var(--cab-gold-bright);
}

/* The "Jump to" row inside a NARROW container.

   The shared dial lays its label, field and Go button out in one line, which
   is right on a full-width page. Inside a product accordion the field shrinks
   until the "yd" suffix sits under the Go button. Fixed as a container query
   on the results container itself rather than by shrinking the control
   everywhere — this is the case the container-query design exists for. */
@container cabres (max-width: 400px) {
	.cab-dial__jump .cab-field__control {
		flex: 1 1 100%;
		min-width: 0;
	}

	.cab-dial__jump .cab-btn {
		flex: none;
	}
}

/* ---------- "View this ammunition" — the way back to the product ----------
 * Jon Wemple, 25 Sep 2026. Above both calculator views and the comparison, so
 * it is there before and after Calculate (Calculate scrolls to the top of the
 * calculator), and repeated beside "Edit inputs" at the foot of the results.
 * Deliberately NOT position: sticky — pinned to the top it would sit under
 * the theme's sticky mobile header, and a bottom-sticky bar only works for
 * an element that starts below the fold. */

.cab-src {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 16px;
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--cab-gold-dim);
	border-radius: 2px;
	background: var(--cab-gold-wash);
}

.cab-src__text {
	margin: 0;
	min-width: 0;
	font-family: var(--cab-ui);
	font-size: 14px;
	line-height: 1.35;
	color: var(--cab-text);
}

.cab-src__lead {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cab-muted);
}

.cab-src__name {
	font-weight: 700;
}

.cab-src__btn {
	flex: 0 0 auto;
	text-decoration: none;
}

@media (max-width: 600px) {
	.cab-src__btn {
		width: 100%;
	}
}