/* =========================================================
   JET SUPPLY — FLEET (archive + single enhancements)
   Surface-specific styles, conditionally enqueued on the
   aircraft archive and single templates only (kept OUT of the
   inlined critical-CSS budget, D-26). Base archive/card/single
   layout lives in components/cpt.css.

   Covers: the hero image band, the search/count filter additions,
   the card footer + compare toggle, the full comparison board,
   and the single-aircraft breadcrumb / cabin bars / related grid.
   ========================================================= */

/* ---------- Hero image band ---------- */
/* Range-finder hero owns no extra bottom padding — the hero section and
   fleet-categories keep their standard s-10 paddings, so the seam below the map
   matches every other section on the page (chat7 rhythm fix). */
.fleet-hero-media { padding: 0; }
.fleet-hero-media__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 21 / 7;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: clamp(var(--s-5), 4vw, var(--s-8));
	border-radius: var(--r-lg);
	background: linear-gradient(120deg, var(--c-navy-800) 0%, var(--c-navy-900) 70%);
}
.fleet-hero-media__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.6"/></svg>');
	opacity: .14;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.fleet-hero-media__arc { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--c-silver); opacity: .35; pointer-events: none; }
.fleet-hero-media__caption {
	position: relative;
	z-index: 1;
	font-family: var(--ff-serif);
	font-size: var(--fs-h4);
	letter-spacing: var(--tr-snug);
	color: var(--c-ivory);
	max-width: 18ch;
}

/* ---------- Range-finder hero (design B1-W) ---------- */
/* Controls above the map, right-aligned; the baked navy map fills the frame;
   the wind-adjusted range contour is drawn by range-finder.js. */
.fleet-hero-media__frame--range {
	padding: 0;
	display: block;
}

.range-finder__svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.range-finder__controls {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--s-4) var(--s-6);
	margin-bottom: var(--s-4);
}

.range-finder__field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	width: 11rem;
}

.range-finder__label {
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-text-soft);
}

.range-finder__selectwrap {
	position: relative;
	display: block;
}

.range-finder__selectwrap::after {
	content: "";
	position: absolute;
	right: 4px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: var(--bw-hair) solid var(--c-silver-dim);
	border-bottom: var(--bw-hair) solid var(--c-silver-dim);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.range-finder__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	font-family: var(--ff-sans);
	font-size: var(--fs-small);
	color: var(--c-ink);
	background: transparent;
	border: 0;
	border-bottom: var(--bw-hair) solid color-mix(in srgb, var(--c-silver) 45%, transparent);
	border-radius: var(--r-none);
	padding: var(--s-2) var(--s-5) var(--s-2) 0;
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-quiet);
}

.range-finder__select:hover { border-bottom-color: var(--c-silver-dim); }
.range-finder__select:focus-visible { outline: 2px solid var(--c-navy-900); outline-offset: 4px; }
.range-finder__select option { color: var(--c-ink); background: var(--c-paper); }

.range-finder__readout {
	position: absolute;
	left: clamp(var(--s-5), 4vw, var(--s-8));
	bottom: clamp(var(--s-4), 3vw, var(--s-6));
	z-index: 1;
	margin: 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-silver);
}

.range-finder__fineprint {
	margin: var(--s-3) 0 0;
	max-width: none; /* override any inherited typographic measure so it reaches the map's right edge */
	text-align: right;
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-text-soft);
}

@media (max-width: 860px) {
	.range-finder__controls { gap: var(--s-4); }
	.range-finder__field { width: auto; flex: 1 1 8rem; min-width: 8rem; }
	.range-finder__readout { display: none; }
}

/* ---------- Filter: search + count ---------- */
.cpt-filter__field--search { min-width: 16rem; flex: 1 1 18rem; }
.cpt-filter__input[type="search"] { cursor: text; }
.cpt-filter__input::placeholder { color: var(--c-silver-dim); }
.cpt-archive__count {
	margin: calc(-1 * var(--s-4)) 0 var(--s-5);
	font-family: var(--ff-mono);
	font-size: var(--fs-micro);
	letter-spacing: var(--tr-luxe);
	text-transform: uppercase;
	color: var(--c-silver-dim);
}
/* Each field already carries an underline affordance; drop the form's
   redundant bottom rule so the filter row doesn't read as doubled. */
.cpt-archive--grid .cpt-filter { border-bottom: 0; padding-bottom: var(--s-2); }

/* ---------- Grid card footer + compare toggle ---------- */
.cpt-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-2) var(--s-3);
	flex-wrap: wrap;
	margin-top: auto;
	padding-top: var(--s-4);
	border-top: var(--bw-hair) solid var(--c-rule);
}
.cpt-card__more {
	font-family: var(--ff-sans);
	font-size: var(--fs-small);
	letter-spacing: var(--tr-wide);
	text-transform: uppercase;
	color: var(--c-navy-900);
	text-decoration: none;
}
.cpt-card__more span { transition: margin-left var(--dur-fast) var(--ease-quiet); display: inline-block; }
.cpt-card__more:hover span { margin-left: var(--s-1); }
.compare-toggle {
	font-family: var(--ff-sans);
	font-size: var(--fs-micro);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tr-wide);
	text-transform: uppercase;
	color: var(--c-ink-soft);
	background: transparent;
	border: var(--bw-hair) solid var(--c-rule);
	border-radius: var(--r-sm);
	padding: var(--s-2) var(--s-3);
	cursor: pointer;
	white-space: nowrap;
	transition: color var(--dur-fast) var(--ease-quiet), border-color var(--dur-fast) var(--ease-quiet), background var(--dur-fast) var(--ease-quiet);
}
.compare-toggle:hover { color: var(--c-ink); border-color: var(--c-silver); }
.compare-toggle.is-added { color: var(--c-ivory); background: var(--c-navy-900); border-color: var(--c-navy-900); }
.compare-toggle .compare-toggle__label::before { content: "+ "; }
.compare-toggle.is-added .compare-toggle__label::before { content: "\2713 "; }

/* ---------- Compare section ---------- */
.fleet-compare { padding-block: var(--s-10); background: var(--c-paper); }
.fleet-compare__head { max-width: 60ch; margin-bottom: var(--s-8); }
.fleet-compare__title { font-family: var(--ff-serif); font-weight: var(--fw-regular); font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--tr-snug); margin: var(--s-3) 0 var(--s-4); }
.fleet-compare__intro { color: var(--c-text-soft); font-size: var(--fs-body); max-width: 60ch; margin: 0; }

/* ---------- Compare board (aligned grid) ---------- */
.fleet-compare__scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: var(--s-2); }
.compare-board {
	display: grid;
	grid-template-columns: minmax(5rem, 0.55fr) repeat(var(--cmp-cols, 1), minmax(11rem, 1fr));
	min-width: 0;
	align-items: stretch;
}
/* Inter-column spacing lives in the data cells' left padding (no transparent
   column-gap), so nothing shows through when the pinned label column scrolls
   over the aircraft columns. */
.cmp-head, .cmp-cell { padding-left: var(--s-5); }

/* Pin the label column. It is fully opaque, so aircraft columns scroll cleanly
   beneath it; a crisp divider + soft shadow appear only when it overflows. */
.cmp-corner, .cmp-rowlabel {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--c-paper);
}
.fleet-compare__scroll.is-scrollable .cmp-corner,
.fleet-compare__scroll.is-scrollable .cmp-rowlabel {
	box-shadow: 1px 0 0 0 var(--c-rule), 7px 0 14px -8px rgba(13, 23, 42, 0.16);
}
.cmp-corner { border-bottom: var(--bw-hair) solid var(--c-rule); }
/* Head cells */
.cmp-head { padding-bottom: var(--s-5); border-bottom: var(--bw-hair) solid var(--c-rule); display: flex; flex-direction: column; }
.cmp-thumb { position: relative; aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, var(--c-navy-800), var(--c-navy-900)); margin-bottom: var(--s-3); }
.cmp-thumb[data-tone="navy-2"] { background: linear-gradient(160deg, var(--c-navy-700), var(--c-navy-900) 85%); }
.cmp-thumb[data-tone="navy-3"] { background: linear-gradient(220deg, var(--c-navy-700), var(--c-navy-900) 80%); }
.cmp-thumb::after { content: ""; position: absolute; inset: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.6"/></svg>'); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.cmp-thumb__tag { position: absolute; top: var(--s-2); left: var(--s-3); font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: color-mix(in srgb, var(--c-ivory) 55%, transparent); }
/* Real aircraft image (hero / silhouette) over the navy plate — contain so the
   whole airframe shows; the navy thumb fills the letterbox and the grain + tag
   step aside. */
.cmp-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.cmp-thumb--has-image::after { display: none; }
.cmp-thumb--has-image .cmp-thumb__tag { display: none; }
.cmp-thumb--empty { display: grid; place-items: center; background: var(--c-paper); border: var(--bw-hair) dashed var(--c-rule); }
.cmp-thumb__plus { font-family: var(--ff-serif); font-size: var(--fs-h3); color: var(--c-silver); line-height: 1; }
.cmp-remove { position: absolute; top: var(--s-2); right: var(--s-2); width: 26px; height: 26px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--c-navy-900) 55%, transparent); color: var(--c-ivory); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-quiet); }
.cmp-remove:hover { background: var(--c-navy-700); }
.cmp-name { font-family: var(--ff-serif); font-size: var(--fs-h5); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); margin: 0; }
.cmp-name a { color: var(--c-ink); text-decoration: none; }
.cmp-name a:hover { color: var(--c-navy-700); }
.cmp-cat { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver); margin: var(--s-1) 0 0; }
.cmp-add { width: 100%; font-family: var(--ff-sans); font-size: var(--fs-small); font-weight: var(--fw-medium); letter-spacing: var(--tr-wide); text-transform: uppercase; padding: var(--s-3); color: var(--c-navy-900); border: var(--bw-hair) solid var(--c-rule); border-radius: var(--r-sm); background: var(--c-bg); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-quiet), color var(--dur-fast) var(--ease-quiet); }
.cmp-add span { display: inline-block; transition: transform var(--dur-fast) var(--ease-quiet); }
.cmp-add:hover { border-color: var(--c-silver); color: var(--c-navy-700); }
.cmp-add:hover span { transform: translateY(-2px); }
.cmp-add:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Metric rows */
.cmp-rowlabel { font-family: var(--ff-sans); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver-dim); padding: var(--s-4) 0; border-bottom: var(--bw-hair) solid var(--c-rule); display: flex; align-items: center; }
.cmp-cell { padding-block: var(--s-4); border-bottom: var(--bw-hair) solid var(--c-rule); display: flex; flex-direction: column; gap: var(--s-2); justify-content: center; }
.cmp-val { font-family: var(--ff-serif); font-size: var(--fs-h5); color: var(--c-text); letter-spacing: var(--tr-snug); display: flex; align-items: baseline; gap: var(--s-2); }
.cmp-cell.is-leader .cmp-val { color: var(--c-navy-500); }
.cmp-best { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-silver); }
.cmp-na { font-family: var(--ff-sans); font-size: var(--fs-small); font-style: italic; color: var(--c-silver-dim); }
.cmp-cell--empty { color: var(--c-silver); font-family: var(--ff-serif); }
.cmp-bar { display: block; height: 3px; background: var(--c-rule); border-radius: 2px; overflow: hidden; }
.cmp-bar__fill { display: block; height: 100%; background: var(--c-silver); transition: width var(--dur-base) var(--ease-quiet); }
.cmp-cell.is-leader .cmp-bar__fill { background: var(--c-navy-500); }

.fleet-compare__bar { margin-top: var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.fleet-compare__status { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver-dim); margin: 0; }

/* On phones the label column shrinks and aircraft columns scroll. */
@media (max-width: 760px) {
	.compare-board { grid-template-columns: 5.25rem repeat(var(--cmp-cols, 1), minmax(8.75rem, 1fr)); }
	.cmp-head, .cmp-cell { padding-left: var(--s-4); }
	.cmp-rowlabel { letter-spacing: 0; line-height: var(--lh-snug); }
}
@media (max-width: 860px) {
	.fleet-hero-media__frame { aspect-ratio: 16/9; }
}

/* =========================================================
   SINGLE AIRCRAFT — detail-page enhancements
   ========================================================= */

/* ---------- Breadcrumb ---------- */
.ac-crumb { padding-top: var(--s-7); }
.ac-crumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); list-style: none; margin: 0; padding: 0; font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver); }
.ac-crumb__list a { color: var(--c-silver-dim); text-decoration: none; }
.ac-crumb__list a:hover { color: var(--c-ink); }
.ac-crumb__sep { color: var(--c-rule); }
.ac-crumb__current { color: var(--c-ink-soft); }

/* ---------- Hero spec line ---------- */
.cpt-single__hero-specs {
	font-family: var(--ff-sans);
	font-size: var(--fs-small);
	color: var(--c-text-soft);
	letter-spacing: var(--tr-snug);
	margin: var(--s-4) 0 0;
}

/* ---------- Cabin proportion bars ---------- */
.ac-cabin { display: flex; flex-direction: column; gap: var(--s-5); max-width: 46rem; }
.ac-cabin__row { display: grid; grid-template-columns: 5rem 1fr 5rem; align-items: center; gap: var(--s-4); }
.ac-cabin__label { font-family: var(--ff-sans); font-size: var(--fs-micro); font-weight: var(--fw-medium); letter-spacing: var(--tr-luxe); text-transform: uppercase; color: var(--c-silver-dim); }
.ac-cabin__track { height: 8px; background: var(--c-rule); border-radius: 2px; overflow: hidden; }
.ac-cabin__fill { display: block; height: 100%; background: var(--c-navy-500); border-radius: 2px; }
.ac-cabin__val { font-family: var(--ff-serif); font-size: var(--fs-body); color: var(--c-text); text-align: right; }
.ac-cabin__note { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: var(--tr-wide); color: var(--c-silver); margin: var(--s-6) 0 0; }

/* ---------- Related ---------- */
.ac-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); margin-top: var(--s-6); }

@media (max-width: 860px) {
	.ac-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ac-related__grid { grid-template-columns: 1fr; }
	.ac-cabin__row { grid-template-columns: 4.5rem 1fr 4rem; gap: var(--s-3); }
}