/* ALLCUT — /rpm-calculator/: which speed level to set on a magnetic drill.
   Four questions (machine, job, size, metal), asked one at a time the first time, then a live answer with the level shown huge.
   The page layout, the question card and the answer rows are in qa-flow.css. This file styles the controls and the answer.
   Colour per range comes from .rc-<range> (--rc). */

/* ───────────── head ───────────── */
.rpm-head__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 32px clamp(32px, 5vw, 80px); align-items: end; }
.rpm-head .h1 { max-width: 14ch; }
.rpm-facts { padding-top: 18px; border-top: 1px solid var(--rule-2); display: flex; flex-direction: column; gap: 18px; }
.rpm-facts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.rpm-facts__n { margin: 0; font-size: calc(30px * var(--fs)); font-weight: 800; line-height: 1.1; }
.rpm-facts__t { margin: 2px 0 0; font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 860px) { .rpm-head__row { grid-template-columns: 1fr; } }

/* ───────────── questions ───────────── */
.rpm-hint { margin: 12px 0 0; font-size: calc(15.3px * var(--fs)); font-weight: 500; line-height: 1.5; color: var(--ink-2); }

/* machine: one row per range, a colour tag and the model buttons */
.rpm-machines { display: flex; flex-direction: column; gap: 14px; }
.rpm-range { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.rpm-range__name { margin: 0; display: flex; align-items: center; font-size: calc(15px * var(--fs)); font-weight: 700; }
.rpm-models { display: flex; flex-wrap: wrap; gap: 8px; }
.rpm-pill { position: relative; display: flex; }
.rpm-pill input, .rpm-job input, .rpm-metal input, .rpm-tap input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.rpm-pill > span { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 56px; padding: 10px 14px; border: 1px solid var(--rule-2); background: var(--white); font-weight: 500; font-size: calc(16px * var(--fs)); line-height: 1.2; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.rpm-pill:hover > span { border-color: var(--ink-3); }
.rpm-pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); font-weight: 700; box-shadow: inset 0 -3px 0 var(--rc, var(--red)); }
.rpm-pill input:focus-visible + span, .rpm-job input:focus-visible + span, .rpm-metal input:focus-visible + span, .rpm-tap input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 560px) { .rpm-range { grid-template-columns: 1fr; } }

/* job: three cards. A job the machine can't do is greyed out. */
.rpm-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rpm-job { position: relative; display: flex; }
.rpm-job > span { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 16px; border: 1px solid var(--rule-2); background: var(--white); transition: border-color .15s, box-shadow .15s; }
.rpm-job strong { font-size: calc(18px * var(--fs)); }
.rpm-job > span > span { font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.45; }
.rpm-job:hover > span { border-color: var(--ink-3); }
.rpm-job input:checked + span { border-color: var(--ink); box-shadow: inset 3px 0 0 var(--red); }
.rpm-job input:disabled { cursor: not-allowed; }
.rpm-job input:disabled + span { background: transparent; border-style: dashed; }
.rpm-job input:disabled + span strong { color: var(--ink-2); font-weight: 500; }
@media (max-width: 760px) { .rpm-jobs { grid-template-columns: 1fr; } }

/* size: slider + number box, or thread-size buttons */
.rpm-size { display: flex; gap: 16px 28px; align-items: center; flex-wrap: wrap; }
.rpm-size__slider { flex: 1 1 320px; min-width: 0; }
.rpm-range-in { --pct: 40%; display: block; width: 100%; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.rpm-range-in::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--red) var(--pct), var(--rule-2) var(--pct)); }
.rpm-range-in::-moz-range-track { height: 4px; background: var(--rule-2); }
.rpm-range-in::-moz-range-progress { height: 4px; background: var(--red); }
.rpm-range-in::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; background: var(--white); border: 2px solid var(--red); border-radius: 0; cursor: grab; }
.rpm-range-in::-moz-range-thumb { width: 22px; height: 22px; background: var(--white); border: 2px solid var(--red); border-radius: 0; cursor: grab; }
.rpm-range-in:focus-visible { outline: none; }
.rpm-range-in:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.rpm-range-in:focus-visible::-moz-range-thumb { outline: 2px solid var(--ink); outline-offset: 2px; }
.rpm-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.rpm-box { display: inline-flex; align-items: center; gap: 10px; font-size: calc(16px * var(--fs)); font-weight: 700; }
.rpm-num { width: 92px; min-height: 48px; padding: 0 10px; border: 1px solid var(--ink); border-radius: 0; background: var(--white); font: 800 calc(22px * var(--fs))/1 var(--f-sans); color: var(--ink); text-align: right; }
.rpm-num:focus { box-shadow: 0 0 0 1px var(--ink); outline: none; }

.rpm-taps { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.rpm-tap { position: relative; display: flex; }
.rpm-tap > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 8px 6px; border: 1px solid var(--rule-2); background: var(--white); line-height: 1.25; transition: background-color .15s, border-color .15s; }
.rpm-tap strong { font-size: calc(18px * var(--fs)); }
.rpm-tap > span > span { font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink-2); }
.rpm-tap:hover > span { border-color: var(--ink-3); }
.rpm-tap input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--white); }
.rpm-tap input:checked + span > span { color: var(--dark-2); }

/* metal */
.rpm-metals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rpm-metal { position: relative; display: flex; }
.rpm-metal > span { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; min-height: 44px; border: 1px solid var(--rule-2); background: var(--white); transition: border-color .15s, box-shadow .15s; }
.rpm-metal strong { font-size: calc(17px * var(--fs)); }
.rpm-metal > span > span { font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.35; }
.rpm-metal:hover > span { border-color: var(--ink-3); }
.rpm-metal input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink), inset 3px 0 0 var(--red); }
@media (max-width: 700px) { .rpm-metals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { .rpm-metals { grid-template-columns: 1fr; } }

/* ───────────── answer ───────────── */
.rpm-answer { min-width: 0; max-width: 640px; background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--red); scroll-margin-top: calc(var(--header-h) + 16px); container-type: inline-size; }
@media (min-width: 1001px) and (min-height: 860px) { .rpm-answer { position: sticky; top: calc(var(--header-h) + 16px); } }
.rpm-answer__title:focus { outline: none; }   /* focus lands here from code after the last question */
.rpm-answer__empty { margin: 0; padding: 28px; color: var(--ink-2); }
.rpm-answer__top { padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 32px) 24px; }
.rpm-answer__kick { margin: 0; font-size: calc(16px * var(--fs)); font-weight: 700; color: var(--ink-2); }
/* the level is the main answer: the biggest thing on the page */
.rpm-answer__big { margin: 6px 0 0; font-size: calc(min(112px, 22cqi) * var(--fs)); font-weight: 900; line-height: .95; letter-spacing: -0.03em; white-space: nowrap; }
.rpm-answer__big.is-long { font-size: calc(min(112px, 17cqi) * var(--fs)); }
.rpm-answer__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.rpm-chip { padding: 6px 12px; border: 1px solid var(--rule-2); font-size: calc(15px * var(--fs)); font-weight: 700; line-height: 1.3; }
.rpm-chip--dark { background: var(--ink); border-color: var(--ink); color: var(--white); }
.rpm-answer__for { margin: 18px 0 0; color: var(--ink-2); }
.rpm-answer__for strong { color: var(--ink); }
.rpm-msg { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; font-size: calc(16px * var(--fs)); font-weight: 500; line-height: 1.45; }
.rpm-msg svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.rpm-msg--warn { background: var(--red-tint); color: var(--ink); }
.rpm-msg--warn svg { color: var(--red-ink); }

.rpm-answer__tips { border-top: 1px solid var(--rule); padding: 20px clamp(20px, 3vw, 32px) 26px; }
.rpm-tips { display: flex; flex-direction: column; gap: 10px; }
.rpm-tips li { display: flex; gap: 10px; align-items: flex-start; color: var(--ink-2); font-size: calc(16px * var(--fs)); line-height: 1.5; }
.rpm-tips svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--ink); }
.rpm-answer__src { margin: 16px 0 0; font-size: calc(15.3px * var(--fs)); font-weight: 500; color: var(--ink-2); }

/* "Start again" under the answers */
.rpm-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; }
.rpm-reset:hover { color: var(--red-ink); }

/* shown instead of the questions when JavaScript is off */
.qa-noscript { padding-block: 24px; }
.qa-noscript p { max-width: 56ch; margin: 12px 0 16px; color: var(--ink-2); }

/* the answers list is a narrow column on a wide screen: the controls that open in it stack */
@media (min-width: 1001px) {
  .qa[data-mode="result"] .rpm-range { grid-template-columns: 1fr; }
  .qa[data-mode="result"] .rpm-jobs { grid-template-columns: 1fr; }
  .qa[data-mode="result"] .rpm-metals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phone: a bar at the bottom shows the answer and jumps to the panel (the questions are long) */
.rpm-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(--white); font-size: calc(18px * var(--fs)); font-weight: 800; border-top: 3px solid var(--red); }
.rpm-dock strong { color: var(--dark-1); font-size: calc(15.3px * var(--fs)); font-weight: 500; white-space: nowrap; }
.rpm-dock strong::after { content: " ↓"; }
@media (max-width: 1000px) { .rpm-dock:not([hidden]) { display: flex; } .page-rpm-calculator .rpm-next { padding-bottom: 56px; } }

/* ───────────── how we work it out ───────────── */
.rpm-how { background: var(--white); border-top: 1px solid var(--rule); }
.rpm-how__title { margin: 18px 0 40px; max-width: 22ch; }
.rpm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.rpm-steps li { padding: 24px 28px 0 0; }
.rpm-steps li + li { padding-left: 28px; border-left: 1px solid var(--rule); }
.rpm-steps__n { display: block; color: var(--red-ink); font-weight: 800; font-size: calc(17px * var(--fs)); }
.rpm-steps .h3 { margin: 8px 0 10px; }
.rpm-steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) {
  .rpm-steps { grid-template-columns: 1fr; }
  .rpm-steps li, .rpm-steps li + li { padding: 22px 0 22px; border-left: 0; border-bottom: 1px solid var(--rule); }
}
.rpm-rule { margin-top: 48px; padding: 24px 28px; background: var(--tint); display: flex; gap: 12px 32px; flex-wrap: wrap; align-items: center; }
.rpm-rule__eq { margin: 0; font-size: calc(clamp(18px, 1.7vw, 22px) * var(--fs)); font-weight: 800; }
.rpm-rule__why { margin: 0; flex: 1 1 320px; color: var(--ink-2); }

/* ───────────── next step (dark) ───────────── */
.rpm-next { background: var(--ink); color: var(--dark-1); padding-block: clamp(44px, 5vw, 64px); }
.rpm-next__inner { display: flex; gap: 24px 32px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.rpm-next__title { font-size: calc(clamp(28px, 3vw, 40px) * var(--fs)); max-width: 22ch; color: var(--white); }
.rpm-next__ghost { background: transparent; border-color: var(--dark-2); color: var(--dark-1); }
.rpm-next__ghost:hover { background: var(--white); border-color: var(--white); color: var(--ink); }

/* ───────────── wide screens: two screens instead of four ───────────── */
/* the questions on one screen stack, with a rule between */
.rpm[data-mode="ask"] .qa-item.is-current ~ .qa-item.is-current { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--rule); }
/* the question that has not appeared yet */
.rpm-wait { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: calc(16px * var(--fs)); line-height: 1.5; color: var(--ink-2); }
.rpm-wait strong { color: var(--ink); }
/* Next while the screen is not complete: still a button (a screen reader can reach it and hear what is missing), but it looks switched off */
.rpm .qa-nav { align-items: center; }
.rpm .qa-nav .btn[aria-disabled="true"], .rpm .qa-nav .btn[aria-disabled="true"]:hover { background: var(--rule); border-color: var(--rule); color: var(--ink-2); cursor: not-allowed; }
.qa-nav__note { margin: 0 0 0 6px; font-size: calc(15.3px * var(--fs)); line-height: 1.4; color: var(--ink-2); }
@media (min-width: 1001px) {
  .rpm[data-mode="ask"] .rpm-metals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) { .rpm-wait, .qa-nav__note { display: none !important; } }

/* The calculator is one responsive form, with the answer alongside it. */
.rpm[data-mode="form"] .qa__main { padding: var(--qa-pad); background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--ink); }
.rpm[data-mode="form"] .qa-item + .qa-item { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); }
.rpm[data-mode="form"] .qa-q { font-size: calc(25px * var(--fs)); }
.rpm[data-mode="form"] .rpm-metals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rpm input:disabled { cursor: not-allowed; }
.rpm-range-in:disabled, .rpm-num:disabled { opacity: .5; }
@media (max-width: 400px) { .rpm[data-mode="form"] .rpm-metals { grid-template-columns: 1fr; } }