/* ===========================================================================
   nope-calc.css - carbon insetting calculator (homepage section only)

   Loaded after nope.css and nope-ui.css, and only on the homepage. nope.css is
   the approved baseline and is never edited.

   Everything here is built from the existing design tokens. Field metrics are
   copied from the contact form (1.5px var(--line), var(--r-sm), var(--paper))
   so the two forms on the site read as the same system rather than two
   unrelated widgets.
   =========================================================================== */

/* ---------- Form shell ---------- */

/*
 * Two columns split by a rule rather than two nested cards. The source widget
 * was a card inside a card inside a tinted panel; this site's vocabulary is
 * ruled rows (.specs) and unequal splits, so it uses those instead.
 */
.calc {
  margin-top: var(--sec-y);
  border-top: 1px solid var(--line);
  padding-top: var(--s-7);
}

.calc-cols {
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 62rem) {
  .calc-cols {
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(var(--s-7), 5vw, var(--s-9));
  }
  /* The rule belongs to the second column so it never renders when stacked. */
  .calc-cols > .calc-col + .calc-col {
    border-left: 1px solid var(--line);
    padding-left: clamp(var(--s-6), 4vw, var(--s-8));
  }
}

.calc-col-h {
  font-family: var(--f-tech);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-low);
  margin-bottom: var(--s-5);
}

/* ---------- Fields ---------- */

.calc-row {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-5);
}

@media (min-width: 40rem) {
  .calc-row { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
}

.calc-f { display: flex; flex-direction: column; }
.calc-f-wide { grid-column: 1 / -1; }

.calc-f label {
  font-weight: 600;
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
  color: var(--t-hi);
}

.calc-f label small {
  font-weight: 400;
  color: var(--t-low);
}

.calc-f input,
.calc-f select {
  width: 100%;
  padding: 0.8em 1em;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  background: var(--paper);
  color: var(--t-hi);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.calc-f input:focus-visible,
.calc-f select:focus-visible {
  outline: none;
  border-color: var(--rust-fill);
  box-shadow: 0 0 0 3px oklch(0.598 0.145 52 / 0.18);
}

/* Placeholder contrast: the browser default is far below 4.5:1. */
.calc-f input::placeholder { color: var(--t-low); opacity: 1; }

.calc-help {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--t-low);
  margin-top: var(--s-2);
  max-width: 42ch;
}

/* ---------- Toggles ---------- */

.calc-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}

.calc-check {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--fs-sm);
  color: var(--t-mid);
  cursor: pointer;
}

.calc-check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--rust-fill);
  flex: none;
}

/* ---------- Advanced disclosure ---------- */

.calc-adv-t {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--s-6);
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rust-fill);
  cursor: pointer;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
}

.calc-chev {
  width: 1em;
  height: 1em;
  flex: none;
  transition: transform .3s var(--ease);
}

.calc-adv-t[aria-expanded="true"] .calc-chev { transform: rotate(90deg); }

.calc-adv { margin-top: var(--s-5); }
.calc-adv[hidden] { display: none; }

.calc-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s-7);
}

/* ---------- Output ---------- */

.calc-out { margin-top: var(--s-7); }

.calc-empty {
  font-family: var(--f-tech);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-low);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.calc-res {
  display: grid;
  gap: var(--s-5);
}

.calc-res[hidden] { display: none; }

@media (min-width: 62rem) {
  .calc-res { grid-template-columns: 1.1fr 0.9fr; }
}

/*
 * The dark panel is the one place this section departs from the page
 * background. It marks the output as a distinct state and gives the section
 * internal contrast, since the sections above and below it are both light.
 */
.calc-res-main {
  /* --rose is tuned for light backgrounds (L 0.50) and falls under 3:1 on
     --ink. This is the same hue lifted to clear it for large bold text. */
  --calc-neg: oklch(0.74 0.112 20);
  background: var(--ink);
  color: var(--on-dark-mid);
  border-radius: var(--r-lg);
  padding: clamp(var(--s-5), 3vw, var(--s-7));
}

.calc-res-k {
  font-family: var(--f-tech);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre);
}

.calc-res-name {
  font-family: var(--f-display);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--on-dark-hi);
  margin-top: var(--s-2);
  text-wrap: balance;
}

.calc-kpis {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-dark);
}

@media (min-width: 30rem) {
  .calc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.calc-kpi dt {
  font-family: var(--f-tech);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
}

.calc-kpi dd {
  margin: var(--s-1) 0 0;
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--on-dark-hi);
  /* Digits must not reflow as the value changes. */
  font-variant-numeric: tabular-nums;
}

/* A negative saving is a real outcome of the current factors, not an error. */
.calc-kpi dd.is-neg { color: var(--calc-neg); }

.calc-u {
  display: block;
  font-family: var(--f-tech);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--on-dark-low);
  margin-top: var(--s-1);
}

.calc-res-side {
  padding-top: var(--s-2);
}

.calc-res-h {
  font-family: var(--f-tech);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-low);
  margin-bottom: var(--s-5);
}

/* ---------- Bars ---------- */

.calc-bar + .calc-bar { margin-top: var(--s-4); }

.calc-bar-l {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--t-mid);
  margin-bottom: var(--s-2);
}

.calc-bar-l span:last-child {
  font-weight: 600;
  color: var(--t-hi);
  font-variant-numeric: tabular-nums;
}

.calc-bar-t {
  height: 8px;
  border-radius: 100px;
  background: var(--paper-3);
  overflow: hidden;
}

.calc-bar-f {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  transition: width .5s var(--ease);
}

.calc-bar-b { background: var(--clay); }
.calc-bar-n { background: var(--olive); }

@media (prefers-reduced-motion: reduce) {
  .calc-bar-f { transition: none; }
  .calc-chev { transition: none; }
}