/* ===========================================================
   Scheda macchina — direzione D "Il libretto d'uso"
   =========================================================== */

/* ---------- Linguette di sezione (indice a unghiatura) ----------
   < 1280px: barra orizzontale fissa sotto l'intestazione, scorrevole con snap;
             sfumatura ai bordi quando c'è altro da scorrere; etichette corte sotto 600px.
   ≥ 1280px: linguette verticali a margine, in una colonna propria (non stringono il contenuto). */
.page { display: grid; grid-template-columns: minmax(0, 1fr); }
.thumb {
	position: sticky; top: var(--admin-bar); z-index: 30;
	background: var(--paper); border-bottom: 1px solid var(--ink);
}
.thumb ol {
	list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--wrap);
	display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
	scrollbar-width: none; overscroll-behavior-x: contain;
}
.thumb ol::-webkit-scrollbar { display: none; }
.thumb li { flex: none; scroll-snap-align: start; }
.thumb.is-scrollable ol { --fade-l: 0px; --fade-r: 32px; mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%); }
.thumb.is-scrollable.is-mid ol { --fade-l: 32px; }
.thumb.is-scrollable.is-end ol { --fade-l: 32px; --fade-r: 0px; }
.tab-link {
	position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 12px; white-space: nowrap;
	color: var(--ink); text-decoration: none; font-weight: 600; font-stretch: var(--narrow); font-size: var(--t-b);
}
.tab-link::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 4px; background: var(--blue);
	transform: scaleY(0); transform-origin: bottom; transition: transform 220ms var(--ease-out);
}
.tab-link[aria-current="location"] { color: var(--blue-ink); }
.tab-link[aria-current="location"]::after { transform: scaleY(1); }
.tab-short { display: none; }
@media (max-width: 599px) {
	/* L'etichetta lunga resta per i lettori di schermo; a video quella corta. */
	.tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.tab-short { display: inline; }
	.tab-link { padding-inline: 10px; }
	.tab-link::after { left: 10px; right: 10px; }
}

@media (min-width: 1280px) {
	html { scroll-padding-top: calc(16px + var(--admin-bar)); }
	/* Intestazione e piè di pagina allineati alla colonna del contenuto, non a tutta la pagina. */
	.single-macchina .site-head, .single-macchina .site-foot { padding-right: 208px; }
	.page { grid-template-columns: minmax(0, 1fr) 208px; grid-template-areas: "main tabs"; }
	.page > main { grid-area: main; }
	.thumb { grid-area: tabs; position: static; border: 0; background: none; }
	.thumb ol {
		position: sticky; top: calc(24px + var(--admin-bar)); margin: 0; max-width: none;
		flex-direction: column; align-items: flex-end; gap: 4px; padding: 24px 0 24px 16px; overflow: visible; mask-image: none !important;
	}
	.thumb li { width: 100%; display: flex; justify-content: flex-end; }
	.tab-link {
		width: 192px; min-height: 52px; padding: 8px 16px; white-space: normal; line-height: 1.3;
		background: var(--blue); color: #fff;
		transition: transform 220ms var(--ease-out), background-color 220ms ease;
	}
	.tab-link::after { display: none; }
	.tab-link[aria-current="location"] { background: var(--ink); color: #fff; transform: translateX(-16px); }
	.tab-link:focus-visible { outline-color: var(--ink); }
	@media (hover: hover) and (pointer: fine) {
		.tab-link:not([aria-current="location"]):hover { background: var(--blue-ink); transform: translateX(-6px); }
	}
}

/* ---------- Copertina (blu) ---------- */
.cover { background: var(--blue); color: #fff; }
.cover .wrap { padding-block: 24px 28px; display: grid; gap: 12px; }
.cover h1 { margin: 0; font-size: var(--t-xl); font-weight: 800; font-stretch: var(--narrow); line-height: 0.95; letter-spacing: -0.01em; overflow-wrap: anywhere; }
/* Nomi lunghi (es. "Trincia con spostamento laterale 118/TLSM-SI"): titolo un gradino sotto. */
.cover h1.is-long { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); line-height: 1; }
.cover .answer { margin: 0; font-size: var(--t-b); font-weight: 500; line-height: 1.4; max-width: 46ch; }
.cover-actions { display: none; }
@media (min-width: 760px) {
	.cover .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: end; gap: 24px 48px; padding-block: 48px 44px; }
	.cover .answer { font-size: var(--t-m); }
	.cover-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 20px; }
}

/* ---------- Componenti: foto con richiami ---------- */
#componenti { padding-top: 0; }
@media (min-width: 760px) { #componenti { padding-top: 40px; } }
.parts { display: grid; gap: 20px; }
.fig { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.fig-frame { position: relative; overflow: clip; } /* l'area cliccabile dei numeri sul bordo non deve allargare la pagina */
.fig-frame img { width: 100%; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders line { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.leaders line.halo { stroke: #fff; stroke-width: 5; opacity: 0.85; }
.leaders g { transition: opacity 180ms ease; }
.leaders g.is-active line:not(.halo) { stroke-width: 3; }
.leaders g.is-active line.halo { stroke-width: 7; opacity: 1; }
.has-active .leaders g:not(.is-active) { opacity: 0.3; }
.anchor {
	position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px;
	border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); pointer-events: none;
	transition: opacity 180ms ease;
}
.has-active .anchor:not(.is-active) { opacity: 0.3; }
.callout {
	position: absolute; left: var(--x); top: var(--y); width: 44px; height: 44px; margin: -22px 0 0 -22px;
	display: grid; place-items: center; padding: 0; background: none; border: 0; border-radius: 50%; cursor: pointer;
	font: inherit; color: #fff;
}
.callout span {
	display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	background: var(--blue); box-shadow: 0 0 0 2px #fff;
	font-weight: 700; font-size: var(--t-s); font-variant-numeric: tabular-nums;
	transition: transform 180ms var(--ease-out), background-color 180ms ease, opacity 180ms ease;
}
.has-active .callout:not(.is-active) span { opacity: 0.45; }
.callout.is-active span { background: var(--ink); transform: scale(1.18); }
.callout:active span { transform: scale(1.05); }
.callout:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 3px #fff; }
@media (min-width: 760px) {
	.fig { margin: 0; }
	.callout span { width: 34px; height: 34px; font-size: var(--t-b); }
}
.fig-note { margin: 10px 0 0; padding-inline: var(--gutter); font-size: var(--t-s); color: var(--ink-2); }
@media (min-width: 760px) { .fig-note { padding-inline: 0; } }

.legend-col .caption { margin: 0 0 20px; max-width: 60ch; }
.legend-col .caption p { margin: 0 0 0.75em; }
.legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.legend li { border-bottom: 1px solid var(--hair); padding: 6px 8px 12px; transition: background-color 180ms ease; }
.legend li.is-active { background: var(--blue-tint); }
.legend-key {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0;
	background: none; border: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer;
}
.legend-key .num, .legend-static .num {
	flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
	border: 2px solid var(--blue); color: var(--blue-ink); font-size: var(--t-s); font-variant-numeric: tabular-nums;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.legend li.is-active .num { background: var(--ink); border-color: var(--ink); color: #fff; }
.legend-key .legend-title { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; }
.legend li.is-active .legend-title { text-decoration-color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
	.legend-key:hover .legend-title { text-decoration-color: var(--blue); }
}
.legend p { margin: 0 0 0 42px; color: var(--ink-2); }
.legend-static { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; }
.legend-static .num { border: 2px dashed var(--ink-2); color: var(--ink-2); }
.legend-static .num svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.legend .off-tag { display: inline-block; margin-left: 42px; margin-top: 4px; font-size: var(--t-s); font-weight: 600; color: var(--ink); }
@media (min-width: 900px) {
	.parts { grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 40px; align-items: start; }
}

/* Altre viste */
.views-title { margin: 48px 0 16px; font-size: var(--t-m); font-weight: 700; }
.views {
	list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px;
	display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain;
	scrollbar-width: thin; scrollbar-color: var(--blue) transparent;
}
.views li { scroll-snap-align: start; }
.views a { display: block; }
.views img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.views a:focus-visible { outline-offset: 2px; }
@media (min-width: 640px) {
	.views { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
}

/* ---------- Modelli ---------- */
.table-wrap {
	overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
	/* Ombra sul bordo destro solo quando la tabella continua (sfondi "local" + "scroll"). */
	background:
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 40px 100% no-repeat local,
		linear-gradient(to left, rgba(20, 23, 26, 0.16), rgba(20, 23, 26, 0)) right / 14px 100% no-repeat scroll;
}
.models { width: 100%; min-width: 320px; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.models caption { caption-side: top; text-align: left; padding-bottom: 12px; color: var(--ink-2); font-size: var(--t-s); }
.models thead th {
	background: var(--blue); color: #fff; font-weight: 600; font-size: var(--t-s); line-height: 1.35;
	text-align: right; vertical-align: bottom; padding: 12px 10px;
}
.models thead th:first-child { text-align: left; }
.models tbody th, .models td { padding: 14px 10px; border-bottom: 1px solid var(--ink); vertical-align: top; }
.models tbody th { text-align: left; font-weight: 700; white-space: nowrap; }
/* Il modello resta visibile quando la tabella scorre in orizzontale. */
.models tbody th, .models thead th:first-child { position: sticky; left: calc(-1 * var(--gutter)); z-index: 1; }
.models tbody th { background: var(--paper); box-shadow: 1px 0 0 var(--hair); }
.models thead th:first-child { background: var(--blue); }
.models td { text-align: right; }
.models td.txt { text-align: left; }
.models .kw { color: var(--ink-2); }
.models .nw { white-space: nowrap; }
@media (max-width: 559px) {
	.models { font-size: 0.9375rem; }
	.models thead th, .models tbody th, .models td { padding-inline: 6px; }
	.models .kw { display: block; }
}

.doc { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 24px 0 0; }
.doc-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; font-stretch: var(--narrow); font-size: var(--t-m); }
.doc-link .ico { width: 24px; height: 24px; }
.doc-meta { font-size: var(--t-s); color: var(--ink-2); }

/* ---------- Abbinamento al trattore ---------- */
.match { display: grid; gap: 28px; }
@media (min-width: 900px) { .match { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.cv-input { display: flex; max-width: 240px; }
.cv-input .input { border-right: 0; font-variant-numeric: tabular-nums; }
.cv-unit { display: grid; place-items: center; min-width: 56px; background: var(--blue); color: #fff; font-weight: 700; font-stretch: var(--narrow); font-size: var(--t-m); }
.cv-input:has(.input[aria-invalid="true"]) .cv-unit { background: var(--ink); }
.result { border-top: 2px solid var(--ink); }
.result-summary { margin: 0; padding: 14px 0; font-weight: 600; min-height: 3.5em; }
.cv-list { list-style: none; margin: 0; padding: 0; }
.cv-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--hair); }
.cv-name { font-weight: 700; font-variant-numeric: tabular-nums; }
.cv-state { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); font-weight: 600; color: var(--ink-2); }
.cv-list li[data-state="ok"] .cv-state { color: var(--blue-ink); }
.cv-list li[data-state="no"] .cv-name { color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.cv-list li[data-state="ask"] { opacity: 0.55; }
.result-foot { margin: 16px 0 0; font-size: var(--t-s); }
.result-foot[hidden] { display: none; }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); margin-inline: calc(-1 * var(--gutter)); }
@media (min-width: 760px) { .video { margin-inline: 0; } }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.facade { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; color: #fff; font: inherit; text-align: left; }
.facade img { width: 100%; height: 100%; object-fit: cover; }
.facade .play {
	position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 14px;
	padding: 14px 20px 14px 14px; background: var(--blue);
	font-weight: 700; font-stretch: var(--narrow); font-size: var(--t-m);
	transition: background-color 160ms ease;
}
.facade .play svg { width: 40px; height: 40px; }
.facade:active .play { transform: scale(0.98); transform-origin: bottom left; }
.facade:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .facade:hover .play { background: var(--ink); } }
.video-note { margin: 10px 0 0; font-size: var(--t-s); color: var(--ink-2); }

/* ---------- Richiesta ---------- */
.ask-intro { display: grid; gap: 4px; margin-bottom: 28px; }
.ask-intro p { margin: 0; max-width: 62ch; }
.ask-intro .who { font-size: var(--t-m); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.callout.is-active span { transform: none; }
}