/* Decision tools. Only design tokens from brand-kit; every class carries the
   tool- prefix so nothing leaks into marketing.css. [data-tool] on selectors
   outranks `.marketing-page p` and friends without !important. */

[data-tool] {
  --tool-surface: var(--bg-raised);
  --tool-inset: var(--bg-overlay);
  --tool-accent: var(--brand-500);
  --tool-track: var(--bg-hover);
  --tool-sticky-top: 72px;
  display: block;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(1rem, .7rem + 1.4vw, 2rem);
  border-radius: var(--radius-md);
  background: var(--tool-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
}
[data-tool] *, [data-tool] *::before, [data-tool] *::after { box-sizing: border-box; }
[data-tool] [hidden] { display: none !important; }
[data-theme="light"] [data-tool] { --tool-accent: var(--brand-600); --tool-track: var(--paper-300); }
.section--ink [data-tool] { --tool-accent: var(--brand-500); --tool-track: var(--ink-500); }
.section--tint [data-tool] { --tool-surface: var(--bg-base); }

[data-tool] .tool-title { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.9rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text-primary); }
[data-tool] .tool-lede { max-width: 62ch; margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.55; color: var(--text-secondary); }
[data-tool] .tool-note { max-width: none; margin: 1rem 0 0; font-size: .9rem; line-height: 1.55; color: var(--text-secondary); }
[data-tool] .tool-hint { min-height: 1.3em; max-width: none; margin: .25rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--text-secondary); }
[data-tool] .tool-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tool-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(1rem, .5rem + 2vw, 2rem); align-items: start; }
.tool-view { min-width: 0; }
.tool-panel { min-width: 0; display: grid; gap: 1rem; }

/* Picture */
.tool-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); background: var(--ink-800); }
.tool-stage svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.tool-stage .tool-leaving { z-index: 1; pointer-events: none; }

/* Segmented choices and chips share one form */
.tool-bar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin-top: .75rem; }
.tool-seg { display: inline-flex; flex-wrap: wrap; min-width: 0; margin: 0; padding: 3px; border: 0; border-radius: var(--radius-sm); background: var(--tool-inset); }
.tool-seg--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool-seg legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tool-bar > .tool-opt { flex: 0 1 auto; background: var(--tool-inset); border-radius: var(--radius-sm); }
.tool-opt { position: relative; flex: 1 1 auto; display: inline-flex; cursor: pointer; }
.tool-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tool-opt span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .8rem; border-radius: 2px; color: var(--text-secondary); font-size: .9rem; font-weight: 600; line-height: 1.25; text-align: center; transition: background-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out; }
.tool-opt:hover span { color: var(--text-primary); }
.tool-opt input:active + span { transform: scale(.97); }
.tool-opt input:checked + span { background: var(--brand-500); color: var(--ink-800); }
.tool-opt input:focus-visible + span { outline: 2px solid var(--tool-accent); outline-offset: 2px; }

.tool-btn { min-height: 44px; padding: .4rem .8rem; border: 0; border-radius: var(--radius-sm); background: var(--tool-inset); color: var(--text-primary); font: 600 .9rem/1.25 var(--font-sans); cursor: pointer; transition: background-color 120ms ease-out, transform 100ms ease-out; }
.tool-btn:hover { background: var(--bg-hover); }
.tool-btn:active { transform: scale(.97); }
.tool-btn:focus-visible { outline: 2px solid var(--tool-accent); outline-offset: 2px; }

/* Sliders */
.tool-group { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .35rem; }
.tool-group > legend { padding: 0; margin-bottom: .35rem; font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.tool-row { min-width: 0; }
.tool-row label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .75rem; font-size: .92rem; line-height: 1.35; color: var(--text-primary); font-weight: 600; }
.tool-row output { color: var(--text-secondary); font-weight: 500; font-variant-numeric: tabular-nums; }
.tool-row output b { color: var(--fg-accent); font-weight: 700; }
.tool-range { --tool-fill: 50%; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.tool-range:focus { outline: none; }
/* Hard stop, not a blend: WebKit has no progress pseudo-element. taste-skill-ignore */
.tool-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--tool-accent) var(--tool-fill), var(--tool-track) var(--tool-fill)); } /* taste-skill-ignore */
.tool-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--tool-track); }
.tool-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--tool-accent); }
.tool-range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -19px; border: 9px solid transparent; border-radius: 50%; background: var(--text-primary); background-clip: padding-box; cursor: grab; }
.tool-range::-moz-range-thumb { width: 26px; height: 26px; border: 9px solid transparent; border-radius: 50%; background: var(--text-primary); background-clip: padding-box; cursor: grab; }
.tool-range:active::-webkit-slider-thumb { cursor: grabbing; background-color: var(--tool-accent); }
.tool-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--tool-accent); outline-offset: -6px; }
.tool-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--tool-accent); outline-offset: 1px; }

/* Readings */
.tool-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .75rem 0 0; }
.tool-readings > div { min-width: 0; padding: .6rem .75rem; border-radius: var(--radius-sm); background: var(--tool-inset); }
[data-tool] .tool-readings dt { font-size: .85rem; line-height: 1.3; color: var(--text-secondary); }
[data-tool] .tool-readings dd { margin: .15rem 0 0; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.tool-table { width: 100%; margin-top: .75rem; border-collapse: separate; border-spacing: 3px; font-size: .9rem; }
.tool-table caption { padding-bottom: .35rem; text-align: left; font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.tool-table th, .tool-table td { padding: .5rem .55rem; background: var(--tool-inset); text-align: left; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.tool-table thead th, .tool-table tbody th { font-weight: 500; color: var(--text-secondary); }
.tool-table td.tool-now { background: var(--brand-500); color: var(--ink-800); }
.tool-table.tool-num td { font-variant-numeric: tabular-nums; }

.tool-readings--one { grid-template-columns: minmax(0, 1fr); margin: 0; }

/* VLT calculator */
[data-tool] .tool-big { max-width: none; margin: 0; font-family: var(--font-display); font-size: clamp(3rem, 2rem + 4.5vw, 5.5rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
[data-tool] .tool-formula { max-width: none; margin: .5rem 0 0; font-size: 1rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.tool-pair { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: .75rem; align-items: center; }
.tool-num-input { width: 100%; min-height: 44px; padding: .4rem .5rem; border: 2px solid var(--tool-track); border-radius: var(--radius-sm); background: var(--tool-inset); color: var(--text-primary); font: 700 1rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums; text-align: right; }
.tool-num-input--short { max-width: 5.5rem; }
.tool-num-input:focus-visible { outline: 2px solid var(--tool-accent); outline-offset: 1px; }
.tool-path { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.tool-path li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .75rem; font-size: .9rem; color: var(--text-secondary); }
.tool-path b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tool-bar-track { grid-column: 1 / -1; height: 14px; overflow: hidden; border-radius: 2px; background: var(--tool-track); }
.tool-bar-fill { display: block; height: 100%; background: var(--tool-accent); transform-origin: left; }
[data-tool] .tool-target { max-width: none; margin: .25rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--text-primary); }

/* Film finder */
.tool-questions { display: grid; gap: 1.25rem; }
.tool-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.tool-q legend { padding: 0; margin-bottom: .5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.tool-q-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.tool-q .tool-opt { flex: 0 1 auto; }
.tool-q .tool-opt span { justify-content: flex-start; text-align: left; background: var(--tool-inset); border-radius: var(--radius-sm); }
.tool-q .tool-opt input:checked + span { background: var(--brand-500); color: var(--ink-800); }
.tool-result { min-width: 0; padding: clamp(1rem, .8rem + 1vw, 1.5rem); border-radius: var(--radius-sm); background: var(--tool-inset); }
.tool-result[hidden] { display: none; }
[data-tool] .tool-result h4 { margin: 0 0 .5rem; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; color: var(--text-primary); }
[data-tool] .tool-result h5 { margin: 1rem 0 .3rem; font-size: 1rem; font-weight: 700; color: var(--text-primary); }
[data-tool] .tool-result p, [data-tool] .tool-result li { max-width: 62ch; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-secondary); }
.tool-result ul { display: grid; gap: .35rem; margin: 0; padding-left: 1.1rem; }
[data-tool] .tool-result .tool-links { padding: 0; list-style: none; }
[data-tool] .tool-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-accent); font-weight: 700; text-underline-offset: 3px; }
.tool-link:focus-visible { outline: 2px solid var(--tool-accent); outline-offset: 2px; }
.tool-restart { margin-top: .75rem; }

/* Cabin heat */
.tool-field { min-width: 0; display: grid; gap: .35rem; }
.tool-field-label { font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.tool-field .tool-seg { width: 100%; }
[data-tool] .tool-hint.tool-warn { color: var(--fg-warning); }
[data-theme="light"] [data-tool] .tool-hint.tool-warn { color: var(--brand-700); }
[data-tool] .tool-big--md { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem); }
[data-tool] .tool-big--empty { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1.45; letter-spacing: 0; color: var(--text-secondary); }
.tool-thermo { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .5rem 0 1rem; padding: 1rem; border-radius: var(--radius-sm); background: var(--tool-inset); }
.tool-thermo-col { min-width: 0; display: grid; justify-items: center; gap: .5rem; }
.tool-thermo-label { font-size: .92rem; font-weight: 700; color: var(--text-primary); }
.tool-thermo-track { position: relative; width: 44px; height: clamp(180px, 30vw, 260px); overflow: hidden; border-radius: 22px; background: var(--tool-track); }
.tool-thermo-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--tool-accent); transition: height 400ms cubic-bezier(.2, .8, .2, 1); }
[data-col="film"] .tool-thermo-fill { background: var(--text-secondary); }
/* The range: a light rail beside the fill, so the bar reads as one estimate inside a span. */
.tool-thermo-band { position: absolute; right: 0; width: 10px; z-index: 1; border-radius: 3px; background: var(--text-primary); opacity: .55; transition: bottom 400ms cubic-bezier(.2, .8, .2, 1), height 400ms cubic-bezier(.2, .8, .2, 1); }
.tool-thermo-amb { position: absolute; left: 0; right: 0; z-index: 2; height: 2px; background: var(--text-primary); box-shadow: 0 0 0 1px var(--tool-inset); }
[data-tool] .tool-thermo-value { font-size: 1rem; font-weight: 700; line-height: 1.3; text-align: center; color: var(--text-primary); font-variant-numeric: tabular-nums; }
[data-tool] .tool-thermo-key { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: none; margin: 0; font-size: .85rem; color: var(--text-secondary); }
.tool-thermo-amb-key { display: inline-block; width: 22px; height: 2px; background: var(--text-primary); }
.tool-readings--two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.tool-feel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
[data-tool] .tool-result h4.tool-sub, [data-tool] .tool-sub { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 800; line-height: 1.2; color: var(--text-primary); }
[data-tool] .tool-feel .tool-result h4 { font-size: 1.1rem; }
[data-tool] .tool-feel .tool-result .tool-hint { margin-top: .5rem; }
.tool-ac { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--tool-track); }

@media (max-width: 860px) {
  .tool-feel { grid-template-columns: minmax(0, 1fr); }  /* The picture stays in view while the thumb is on a slider further down. A grid
     cell would cap the sticky range at its own row, so the body is a plain block and
     the wrappers dissolve, leaving the whole tool as the range. */
  .tool-body { display: block; }
  .tool-view, .tool-stage-wrap { display: contents; }
  .tool-stage { position: sticky; top: var(--tool-sticky-top); z-index: 2; }
  .tool-panel { margin-top: 1rem; }
  .tool-hint:empty { display: none; }
}
@media (max-width: 520px) {
  .tool-readings { grid-template-columns: minmax(0, 1fr); }
  .tool-readings > div { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
  .tool-readings--two { grid-template-columns: minmax(0, 1fr); }
  .tool-thermo-track { height: 170px; }
  .tool-seg { display: flex; width: 100%; }
  .tool-bar { gap: .4rem; }
  .tool-opt span { padding-inline: .5rem; font-size: .875rem; }
  .tool-table { font-size: .85rem; border-spacing: 2px; }
  .tool-table th, .tool-table td { padding: .45rem .3rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tool] *, [data-tool] *::before, [data-tool] *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .tool-opt input:checked + span { outline: 2px solid Highlight; }
}