/* calc.css: the free calculators.
 *
 * Same two rules as glossary.css. Every font-size comes from the --fs-* scale
 * in core.css and every colour from a token, so a tool page cannot drift off
 * the design system.
 *
 * The form is a form, not a card: hairline rules, no shadow, no fill, nothing
 * with a radius over 4px. Inputs get a visible border because a borderless
 * input on a white ground is a guessing game, and the focus state is the
 * accent so it is obvious where you are on a keyboard. */

.calc-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0 64px;
  align-items:start;
}

.calc-h{
  font-size:var(--fs-xl);
  line-height:1.2;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:1px solid var(--ink);
}

/* ── form ── */
.calc-form{margin:0}
.calc-field{
  display:block;
  margin:0 0 22px;
  border:0;
  padding:0;
}
.calc-label{
  display:block;
  font-size:var(--fs-sm);
  letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:8px;
  padding:0;
}
.calc-hint{
  display:block;
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--ink-mute);
  margin-top:8px;
}
.calc-form input[type="date"],
.calc-form input[type="number"]{
  width:100%;
  font:inherit;
  font-size:var(--fs-md);
  padding:12px 14px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:2px;
}
.calc-form input[type="date"]:focus,
.calc-form input[type="number"]:focus{
  outline:2px solid var(--hazard);
  outline-offset:1px;
  border-color:var(--hazard);
}
.calc-radio{
  display:block;
  font-size:var(--fs-md);
  line-height:1.5;
  margin:0 0 8px;
  cursor:pointer;
}
.calc-radio input{margin-right:10px}
.calc-custom{
  margin:0 0 22px;
  padding:20px 0 0;
  border-top:1px solid var(--rule);
}
.calc-priv{
  font-size:var(--fs-xs);
  line-height:1.5;
  color:var(--ink-mute);
  margin:16px 0 0;
}

/* ── result ── */
.calc-out{margin:0}
.calc-dates{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--rule);
}
.calc-date{
  display:block;
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.calc-date-name{
  display:block;
  font-size:var(--fs-xs);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.calc-date-val{
  display:block;
  font-size:var(--fs-xl);
  line-height:1.2;
  margin:4px 0 6px;
}
.calc-date-rule{
  display:block;
  font-size:var(--fs-sm);
  line-height:1.5;
  color:var(--ink-mute);
}
.calc-note{
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--ink-mute);
  margin:18px 0 0;
}
.calc-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin-top:18px;
}
.calc-links a{
  font-size:var(--fs-xs);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--hazard);
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
}
.calc-links a:hover{border-bottom-color:var(--hazard)}

@media (max-width:900px){
  .calc-split{grid-template-columns:minmax(0,1fr);gap:0}
  .calc-out{margin-top:40px}
}