/* ==========================================================================
   The simple calculators
   Shared by the percentage, age, BMI, tip and discount pages: inputs down the
   left, one large answer on the right, and the working underneath it.
   ========================================================================== */

.calc-layout{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:0;align-items:start;
}
@media (max-width:900px){ .calc-layout{grid-template-columns:1fr;} }

.calc-inputs{padding:22px 20px;border-right:1px solid var(--rule);}
@media (max-width:900px){
  .calc-inputs{border-right:none;border-bottom:1px solid var(--rule);}
}
.calc-out{padding:22px 20px;}

/* ---------- inputs ---------- */

.ci{margin-bottom:18px;}
.ci:last-child{margin-bottom:0;}
.ci label{display:block;font-size:.8rem;color:var(--ink-3);margin-bottom:6px;}

.ci input[type="number"],
.ci input[type="text"],
.ci input[type="date"],
.ci select{
  width:100%;padding:11px 12px;
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface-2);color:var(--ink);
  font-family:var(--f-mono);font-size:1.02rem;
}
.ci select{font-family:var(--f-ui);font-size:.94rem;}
.ci input:focus,.ci select:focus{outline:none;border-color:var(--accent);}
.ci input[type="range"]{width:100%;}

/* A unit sitting inside the field, so "cm" or "%" does not need a line of
   its own next to every box. */
.ci-unit{position:relative;}
.ci-unit input{padding-right:44px;}
.ci-unit .u{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-family:var(--f-mono);font-size:.9rem;pointer-events:none;
}

/* Two fields on one line: feet and inches, months and days. */
.ci-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

.ci-hint{font-size:.8rem;color:var(--ink-3);margin:6px 0 0;line-height:1.5;}

/* ---------- the answer ---------- */

.res-main{margin-bottom:18px;}
.res-main span{display:block;font-size:.82rem;color:var(--ink-3);margin-bottom:5px;}
/* Direct child only. As a descendant selector this also caught the <strong>
   the tools put inside the subtitle, printing the answer twice at full size --
   the age calculator read "22 years" and then "22 years, 7 months and 0 days"
   in the same enormous type. */
.res-main > strong{
  display:block;
  font-family:var(--f-mono);font-size:clamp(2.1rem,5.6vw,3rem);font-weight:600;
  color:var(--accent);line-height:1.05;letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.res-main small{
  display:block;margin-top:8px;
  font-family:var(--f-ui);font-size:.9rem;font-weight:400;color:var(--ink-2);
  letter-spacing:0;line-height:1.5;
}
/* Emphasis inside the subtitle -- the band name, the amount saved. It has to
   read as part of that sentence, not as a second headline. */
.res-main small strong{
  display:inline;font-family:inherit;font-size:inherit;letter-spacing:inherit;
  font-weight:600;color:var(--ink-1);
}

/* Tone carries the verdict on a scale: a BMI category, a discount worth
   taking. Colour is the fastest thing to read, so it says the same thing the
   words do rather than replacing them. */
.res-main[data-tone="good"] > strong{color:var(--ok,#16a34a);}
.res-main[data-tone="warn"] > strong{color:#d97706;}
.res-main[data-tone="bad"] > strong{color:var(--err,#dc2626);}

.res-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:14px;padding:16px 0;border-top:1px solid var(--rule);
}
.res-cell span{display:block;font-size:.76rem;color:var(--ink-3);margin-bottom:3px;}
.res-cell strong{font-family:var(--f-mono);font-size:1.06rem;color:var(--ink);}

/* ---------- the working ----------
   The step that turns an answer into something you can check, and the thing
   almost no calculator shows. */
.res-work{
  margin-top:16px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--surface-2);border:1px solid var(--rule);
}
.res-work h4{
  margin:0 0 8px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;
}
.res-work p{
  margin:0 0 6px;font-family:var(--f-mono);font-size:.9rem;color:var(--ink-2);
  line-height:1.6;overflow-wrap:anywhere;
}
.res-work p:last-child{margin-bottom:0;}
.res-work em{color:var(--ink-3);font-style:normal;}

/* ---------- a scale with a marker on it ---------- */

.res-scale{margin:18px 0 6px;}
.scale-bar{
  position:relative;height:12px;border-radius:6px;overflow:hidden;
  display:flex;
}
.scale-bar i{display:block;height:100%;}
.scale-pin{
  position:absolute;top:-5px;width:3px;height:22px;border-radius:2px;
  background:var(--ink);box-shadow:0 0 0 2px var(--surface);
  transform:translateX(-1.5px);
}
.scale-keys{
  display:flex;justify-content:space-between;margin-top:8px;
  font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);gap:6px;
}
.scale-keys b{font-weight:400;}
.scale-keys .on{color:var(--ink);font-weight:600;}

/* ---------- rows of results (the split, the stacked discount) ---------- */

.res-rows{margin-top:16px;border-top:1px solid var(--rule);}
.res-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--rule);font-size:.92rem;
}
.res-row:last-child{border-bottom:none;}
.res-row span{color:var(--ink-3);}
.res-row strong{font-family:var(--f-mono);color:var(--ink);font-weight:500;}
.res-row.total strong{color:var(--accent);font-size:1.05rem;}

/* ---------- quick presets ---------- */

.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.chip-row button{
  padding:7px 12px;font-family:var(--f-mono);font-size:.82rem;
  border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  transition:border-color .12s,color .12s,background .12s;
}
.chip-row button:hover{border-color:var(--accent);color:var(--accent);}
.chip-row button[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);color:#fff;
}

/* A line that has to be read as a caveat rather than as part of the argument:
   the BMI page says plainly that it is arithmetic and not medical advice. */
.article .disclaimer{
  margin-top:26px;padding:14px 16px;
  border-left:3px solid var(--line);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:var(--surface-2);color:var(--ink-3);font-size:.9rem;line-height:1.6;
}