/* ALLCUT — /finder/: pick a magnetic drill from the job.
   The layout, the question card and the answer rows are in qa-flow.css. This file has the controls inside the
   questions (job cards, size sliders, segmented buttons, feature ticks) and the result: our pick, others that fit,
   and near misses (drills that miss only one thing). Colour per range comes from .rc-<range> (--rc). */

/* ───────────── head ───────────── */
.fd-head__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.fd-head .h1 { max-width: 15ch; }
.fd-legend { min-width: 300px; padding-top: 18px; border-top: 1px solid var(--rule-2); }
.fd-legend__title { margin: 0 0 12px; font-weight: 700; font-size: calc(15px * var(--fs)); }
.fd-legend ul { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 28px; font: 500 calc(15px * var(--fs))/1.3 var(--f-sans); }
.fd-legend li { display: flex; align-items: center; white-space: nowrap; }
@media (max-width: 860px) { .fd-head__row { grid-template-columns: 1fr; } .fd-legend { min-width: 0; } }

/* ───────────── controls inside the questions ───────────── */
.fd-q { font-weight: 700; }
.fd-hint { margin: 0; font-size: calc(15.3px * var(--fs)); font-weight: 500; line-height: 1.5; color: var(--ink-2); }
.fd-note { margin: 0; padding: 16px; background: var(--tint); font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.fd-group { display: flex; flex-direction: column; gap: 10px; }

.fd-box-in { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--red); cursor: pointer; }
.fd-job { display: flex; gap: 14px; align-items: flex-start; padding: 16px 16px 16px 14px; border: 1px solid var(--rule-2); background: var(--white); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.fd-job:hover { border-color: var(--ink-3); }
.fd-job:has(input:checked) { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--red); }
.fd-job > span { display: flex; flex-direction: column; gap: 2px; }
.fd-job > span > span { font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.45; }

/* size block: two-handle slider + From/To boxes */
.fd-size { display: flex; flex-direction: column; gap: 10px; }
.fd-size__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.fd-size__sum { font-weight: 700; font-size: calc(18px * var(--fs)); white-space: nowrap; }
.fd-dual { position: relative; height: 28px; }
.fd-dual__track { position: absolute; left: 0; right: 0; top: 12px; height: 4px; background: var(--rule); }
.fd-dual__fill { position: absolute; top: 12px; height: 4px; background: var(--red); }
.fd-dual input[type=range] { position: absolute; left: 0; top: 0; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; pointer-events: none; }
.fd-dual input.is-top { z-index: 2; }
.fd-dual input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.fd-dual input[type=range]::-moz-range-track { background: transparent; }
.fd-dual input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; margin-top: 3px; background: var(--white); border: 2px solid var(--ink); cursor: grab; }
.fd-dual input[type=range]::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; background: var(--white); border: 2px solid var(--ink); border-radius: 0; cursor: grab; }
.fd-dual input[type=range]:focus-visible { outline: none; }
.fd-dual input[type=range]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--red); outline-offset: 2px; }
.fd-dual input[type=range]:focus-visible::-moz-range-thumb { outline: 2px solid var(--red); outline-offset: 2px; }
.fd-range { width: 100%; height: 28px; margin: 0; accent-color: var(--red); cursor: pointer; }
.fd-ticks { display: flex; justify-content: space-between; font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.fd-fromto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.fd-box { display: inline-flex; align-items: center; gap: 6px; }
.fd-num { width: 78px; min-height: 44px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 0; background: var(--white); font: 700 calc(18px * var(--fs))/1 var(--f-sans); color: var(--ink); text-align: right; }
.fd-num:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); outline: none; }

/* segmented radio buttons */
.fd-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--rule-2); background: var(--white); }
.fd-seg label { position: relative; display: flex; }
.fd-seg label + label { border-left: 1px solid var(--rule); }
.fd-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fd-seg span { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; font-weight: 500; font-size: calc(15.3px * var(--fs)); color: var(--ink-2); transition: background-color .15s, color .15s; }
.fd-seg label:hover span { background: var(--tint); color: var(--ink); }
.fd-seg input:checked + span { background: var(--ink); color: var(--white); font-weight: 700; }
.fd-seg input:focus-visible + span { outline: 2px solid var(--red); outline-offset: -4px; }

.fd-ticklist { border-bottom: 1px solid var(--rule); }
.fd-tick { display: flex; gap: 14px; align-items: center; min-height: 52px; padding: 8px 0; border-top: 1px solid var(--rule); cursor: pointer; }
.fd-tick > span:first-of-type { flex: 1 1 auto; font-weight: 500; }
.fd-tick__hint { color: var(--ink-2); font-size: calc(15.3px * var(--fs)); }
.fd-tick__n { font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink-2); white-space: nowrap; }

.fd-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fd-reset { border: 0; background: transparent; padding: 10px 0; min-height: 44px; font: 700 calc(15px * var(--fs))/1 var(--f-sans); color: var(--ink); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.fd-reset:hover { color: var(--red-ink); }

/* ───────────── results ───────────── */
.fd-res { display: flex; flex-direction: column; gap: 44px; min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.fd-res__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--ink); margin-bottom: -24px; }
.fd-res__title:focus { outline: none; }   /* focus lands here when the result first shows */
.fd-res__title { margin: 0; font-size: calc(clamp(26px, 2.4vw, 34px) * var(--fs)); line-height: 1.1; letter-spacing: -0.015em; font-weight: 800; }
.fd-res__count { margin: 0; font-weight: 700; font-size: calc(16px * var(--fs)); }
.fd-sub { margin: 0 0 6px; font-size: calc(22px * var(--fs)); font-weight: 700; }
.fd-sub-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 16px; }

.fd-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); background: var(--white); border: 1px solid var(--rule); box-shadow: inset 0 3px 0 var(--rc); }
.fd-pick__media { position: relative; display: flex; align-items: center; justify-content: center; padding: 32px; min-height: 360px; background: var(--tint); }
.fd-pick__media img { width: 100%; max-width: 360px; height: 360px; object-fit: contain; mix-blend-mode: multiply; }
.fd-pick__badge { position: absolute; top: 18px; left: 18px; padding: 6px 12px; background: var(--ink); color: var(--white); font-size: calc(15px * var(--fs)); font-weight: 700; line-height: 1.3; }
.fd-pick__body { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.fd-pick__range { margin: 0; display: flex; align-items: center; font-size: calc(15px * var(--fs)); font-weight: 700; }
.fd-pick__name { margin: 8px 0 0; font-size: calc(clamp(34px, 3.4vw, 50px) * var(--fs)); line-height: 1; letter-spacing: -0.02em; font-weight: 800; }
.fd-pick__why { margin: 12px 0 0; color: var(--ink-2); }
.fd-reasons { display: flex; flex-direction: column; gap: 10px; }
.fd-reasons li { display: flex; gap: 12px; align-items: flex-start; font-size: calc(16px * var(--fs)); }
.fd-reasons svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.fd-figs { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.fd-figs div { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.fd-figs dt { font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.fd-figs dd { margin: 2px 0 0; font-weight: 700; font-size: calc(18px * var(--fs)); }
@media (max-width: 1240px) and (min-width: 1001px), (max-width: 700px) {
  .fd-pick { grid-template-columns: minmax(0, 1fr); }
  .fd-pick__media { min-height: 0; }
  .fd-pick__media img { height: 260px; }
}
/* long names ("Ask price for MegaCore 50 mini") wrap inside the button instead of sticking out of the card */
.fd-pick .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 12px; }
@media (max-width: 520px) {
  .fd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-pick .btn { flex: 1 1 100%; }
}

.fd-empty { padding: 32px; background: var(--white); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; }
.fd-empty__title { margin: 0; font-size: calc(24px * var(--fs)); font-weight: 800; line-height: 1.2; }

.fd-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.fd-mini { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); transition: border-color .15s; }
.fd-mini:hover { border-color: var(--ink); }
.fd-mini__media { display: flex; align-items: center; justify-content: center; height: 180px; padding: 16px; background: var(--tint); box-shadow: inset 0 3px 0 var(--rc); }
.fd-mini__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fd-mini__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.fd-mini__range { display: flex; align-items: center; font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.fd-mini__name { font-size: calc(20px * var(--fs)); font-weight: 800; line-height: 1.15; }
.fd-mini__line { font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.fd-mini__diff { font-size: calc(15px * var(--fs)); font-weight: 700; }

.fd-rows { border-bottom: 1px solid var(--rule); }
.fd-row { display: flex; gap: 16px; align-items: center; padding: 14px 8px 14px 0; border-top: 1px solid var(--rule); transition: background-color .15s; }
.fd-row:hover { background: var(--tint); }
.fd-row__media { width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; padding: 6px; background: var(--tint); }
.fd-row__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.fd-row__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-row__name { display: flex; align-items: center; font-weight: 800; font-size: calc(18px * var(--fs)); }
.fd-row__miss { display: flex; align-items: center; gap: 8px; font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--red-ink); }
.fd-row__miss svg { width: 14px; height: 14px; flex: none; }
.fd-row > svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }

/* phone: a bar at the bottom that jumps to the pick (the questions are long) */
.fd-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--gutter); background: var(--ink); color: var(--dark-1); font-size: calc(15.3px * var(--fs)); font-weight: 500; }
.fd-dock strong { color: var(--white); white-space: nowrap; }
.fd-dock strong::after { content: " ↓"; }
@media (max-width: 1000px) { .fd-dock:not([hidden]) { display: flex; } .page-finder .cta-band { padding-bottom: calc(var(--section) + 56px); } }

/* ───────────── one screen (wider than 1000px) ─────────────
   While asking, the jobs question and the size questions of the ticked jobs sit on one screen: each ticked job brings
   its size question (and Core cutting also Steel thickness) right below. qa-flow.js asks only the jobs question here
   (the others are "skipAsk"), so this file shows the other questions that apply. Weight, grip and features are never shown while asking. */
.fd-top, .fd-sofar, .fd-navnote { display: none; }
@media (min-width: 0px) {
  .fd[data-mode="ask"] .qa-top { display: none; }
  .fd[data-mode="ask"] .fd-top { display: block; }
  .fd-top .qa-progress__bar { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
  .fd[data-mode="ask"] .qa-sofar { display: none; }
  .fd[data-mode="ask"] .fd-sofar { display: block; }

  .fd[data-mode="ask"] .qa-item:is([data-qa-item="core"], [data-qa-item="depth"], [data-qa-item="twist"], [data-qa-item="tap"]):not(.is-off) {
    display: block; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule); animation: fd-rise .5s ease-out both;
  }
  .fd[data-mode="ask"] .qa-item[data-qa-item="depth"]:not(.is-off) { margin-top: 22px; padding-top: 0; border-top: 0; }
  .fd[data-mode="ask"] .qa-item:is([data-qa-item="core"], [data-qa-item="depth"], [data-qa-item="twist"], [data-qa-item="tap"]):not(.is-off) .qa-item__ed[hidden] { display: flex !important; }
  .fd[data-mode="ask"] .qa-item:not([data-qa-item="jobs"]) .qa-q { font-size: calc(24px * var(--fs)); }

  .fd .qa-nav { align-items: center; gap: 18px; }
  .fd-navnote { display: block; margin: 0; font-size: calc(15.3px * var(--fs)); font-weight: 500; line-height: 1.45; color: var(--ink-2); }
  .qa-nav .btn[disabled] { background: var(--rule); border-color: var(--rule); color: var(--ink-2); cursor: not-allowed; }
}
@keyframes fd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fd .qa-item { animation: none !important; } .fd-top .qa-progress__bar { transition: none; } }