/* =========================================================
   Comparison Decision Engine — shared system components
   (built on existing tokens; RTL-first; light/dark aware)
   ========================================================= */
.lth-engine{ margin-block:2rem; }
.lth-engine__intro{ margin-block-end:1.4rem; }
.lth-engine__h{ font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,3.2vw,2.1rem); margin:0 0 .35rem; }
.lth-engine__lede{ color:var(--ink-soft); margin:0; max-inline-size:52ch; }

.lth-engine__grid{
	display:grid; gap:1.1rem;
	grid-template-columns: minmax(0,1fr) minmax(0,1.15fr) minmax(0,.9fr);
	align-items:start;
}
@media (max-width:1024px){ .lth-engine__grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .lth-engine__radar{ grid-column:1 / -1; } }
@media (max-width:640px){ .lth-engine__grid{ grid-template-columns:1fr; } }

/* Panels share one surface treatment */
.lth-engine__controls, .lth-engine__result, .lth-engine__radar{
	background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
	padding:1.15rem; box-shadow:var(--sh-2);
}

/* Preset chips */
.lth-engine__presets{ display:flex; flex-wrap:wrap; gap:.45rem; margin-block-end:1rem; }
.lth-chip{
	font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
	padding:.4rem .85rem; border-radius:999px; color:var(--ink-soft);
	background:transparent; border:1px solid var(--line-2);
	transition:color var(--t1), background var(--t1), border-color var(--t1);
}
.lth-chip:hover{ color:var(--ink); border-color:var(--b-blue); }
.lth-chip.is-active{ color:#fff; background:#2B5CDE; border-color:#2B5CDE; }   /* AA: white on #2B5CDE = 5.7:1 (b-blue #3B6EF6 gave only 4.42) */

/* Sliders (native range, styled, keyboard-accessible) */
.lth-engine__sliders{ display:flex; flex-direction:column; gap:.9rem; }
.lth-slider{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:.15rem .6rem; }
.lth-slider__label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.lth-slider__val{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); text-align:start; }
.lth-slider__input{
	grid-column:1 / -1; inline-size:100%; height:26px; margin:0; cursor:pointer;
	-webkit-appearance:none; appearance:none; background:transparent;
}
.lth-slider__input::-webkit-slider-runnable-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--b-blue),var(--b-emerald)); opacity:.55; }
.lth-slider__input::-moz-range-track{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--b-blue),var(--b-emerald)); opacity:.55; }
.lth-slider__input::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:50%; background:#fff; border:2px solid var(--b-blue); box-shadow:var(--sh-1); transition:transform var(--t1); }
.lth-slider__input::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--b-blue); box-shadow:var(--sh-1); }
.lth-slider__input:hover::-webkit-slider-thumb{ transform:scale(1.12); }
.lth-slider__input:focus-visible{ outline:none; }
.lth-slider__input:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--glow, rgba(59,110,246,.4)); }
.lth-slider__input:focus-visible::-moz-range-thumb{ box-shadow:0 0 0 4px var(--glow, rgba(59,110,246,.4)); }

/* Verdict / result */
.lth-verdict{ text-align:center; }
.lth-verdict__rank{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--b-emerald); }
.lth-verdict__name{ font-family:var(--display); font-weight:700; font-size:clamp(1.4rem,2.6vw,1.9rem); margin-block:.2rem .1rem; }
.lth-verdict__score{ display:flex; align-items:baseline; justify-content:center; gap:.4rem; }
.lth-verdict__score span{ font-size:2.1rem; font-weight:800; font-family:var(--mono); color:var(--ink); line-height:1; }
.lth-verdict__score small{ color:var(--ink-faint); font-size:.72rem; }
.lth-verdict__conf{ margin-block-start:.5rem; font-size:.85rem; color:var(--ink-soft); }
.lth-verdict__gap{ font-family:var(--mono); color:var(--b-emerald); font-weight:600; margin-inline-start:.3rem; }
.lth-verdict__why{ margin-block:.8rem .55rem; color:var(--ink-soft); font-size:.92rem; line-height:1.7; min-height:2.6em; }
.lth-verdict__takeaway{ margin:0 0 1rem; padding:.7rem .9rem; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--panel-2); color:var(--ink); font-size:.9rem; line-height:1.75; font-weight:500; text-align:start; }
.lth-verdict__takeaway:empty{ display:none; }
.lth-verdict.is-pulse .lth-verdict__name{ animation:lthPulse .5s var(--e, cubic-bezier(.2,.8,.2,1)); }
@keyframes lthPulse{ from{ transform:translateY(4px); opacity:.4; } to{ transform:none; opacity:1; } }

.lth-runner{ display:flex; align-items:center; gap:.5rem; justify-content:center; margin-block-start:1rem; padding-block-start:.9rem; border-block-start:1px solid var(--line); font-size:.85rem; }
.lth-runner__k{ font-family:var(--mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); }
.lth-runner__name{ font-weight:600; color:var(--ink); }
.lth-runner__score{ font-family:var(--mono); color:var(--ink-soft); margin-inline-start:auto; }

/* Radar fingerprint */
.lth-radar__svg{ inline-size:100%; height:auto; display:block; }
.lth-radar__ring{ fill:none; stroke:var(--line-2); stroke-width:1; }
.lth-radar__axis{ fill:var(--ink-faint); font-size:8px; font-family:var(--mono); text-anchor:middle; dominant-baseline:middle; }
.lth-radar__poly{ fill:var(--c); fill-opacity:.14; stroke:var(--c); stroke-width:2; stroke-linejoin:round; }
.lth-radar__legend{ list-style:none; margin:.8rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1rem; }
.lth-radar__legend li{ display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--ink-soft); }
.lth-radar__dot{ inline-size:10px; block-size:10px; border-radius:50%; display:inline-block; }

/* Detail-on-demand */
.lth-engine__detail{ margin-block-start:1.1rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); }
.lth-engine__detail>summary{ cursor:pointer; padding:.9rem 1.15rem; font-weight:600; font-size:.9rem; color:var(--ink); list-style:none; }
.lth-engine__detail>summary::-webkit-details-marker{ display:none; }
.lth-engine__detail>summary::after{ content:"↓"; float:inline-end; color:var(--ink-faint); transition:transform var(--t1); }
.lth-engine__detail[open]>summary::after{ transform:rotate(180deg); }
.lth-engine__tablewrap{ padding:0 1.15rem 1.15rem; overflow-x:auto; }
.lth-engine__table{ inline-size:100%; }
.lth-engine__disclaimer{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); margin-block-start:.8rem; }

/* No-JS: engine still shows a valid default; hide radar (JS-drawn) until enhanced */
.lth-engine:not(.is-enhanced) .lth-engine__radar{ display:none; }

@media (prefers-reduced-motion: reduce){
	.lth-verdict.is-pulse .lth-verdict__name{ animation:none; }
	.lth-slider__input::-webkit-slider-thumb{ transition:none; }
}

/* a11y: emerald small text on white fails WCAG AA (~2.5:1). Darken in light mode
   (#047857 ≈ 5.5:1 on white); keep the bright brand emerald on dark backgrounds. */
.lth-verdict__rank, .lth-verdict__gap{ color:#047857; }
[data-theme="dark"] .lth-verdict__rank, [data-theme="dark"] .lth-verdict__gap{ color:var(--b-emerald); }
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .lth-verdict__rank,
	:root:not([data-theme="light"]) .lth-verdict__gap{ color:var(--b-emerald); }
}