/* ============================================================
   The cost calculator on /tools/whatsapp-pricing-calculator/.

   Loaded after styles.css, legal.css and article.css, which supply the
   palette, the nav, the footer, the reading column and the prose. This
   file adds the one thing none of them has: form controls. The site had
   none before this page -- `.field` in styles.css is a spam honeypot set
   to display:none, not an input style -- so everything here is new rather
   than overridden.

   The theme's three fixed numbers are obeyed exactly, because the whole
   look falls apart the moment a second border weight appears:
     --bw   2px   every border
     --off  5px   every shadow, hard, never blurred
     --r-m  6px   every corner

   Gold stays a surface and is never set as a text colour. The accent is
   the only colour that carries an action.
   ============================================================ */

/* ---------- the panel ---------- */

.calc {
  background: var(--pnl);
  border: var(--bw) solid var(--bd);
  border-radius: var(--r-m);
  box-shadow: var(--sh-m);
  padding: var(--pad-card);
  margin: 0 0 var(--s6);
}

.calc h2 {
  margin-top: 0;
  font-size: 18px;
}

/* ---------- controls ----------
   One column on a phone, two from 600px. Never three: these labels are
   sentences rather than words, and three columns truncates them. */

.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin: 0 0 var(--s5);
}

@media (min-width: 37.5em) {
  .calc-grid { grid-template-columns: 1fr 1fr; }
}

.calc-field { display: flex; flex-direction: column; gap: 6px; }

.calc-field > label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  letter-spacing: -.01em;
}

.calc-field .hint {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.45;
}

/* Form controls inherit nothing, so the family, the size and the colour
   are all set here. 16px on the inputs specifically: iOS Safari zooms the
   whole page when a focused field is under 16px, which on a calculator
   means the results scroll out of view the moment somebody types. */
.calc-field input,
.calc-field select {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--tx);
  background: var(--bg);
  border: var(--bw) solid var(--bd);
  border-radius: var(--r-m);
  padding: 10px 12px;
  min-height: var(--tap);
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

/* The native arrow is gone with appearance:none, so one is drawn.

   As a background on the select itself, not as ::after on the field. The
   first version positioned a bordered pseudo-element from the bottom of
   .calc-field, which assumed the label above and the hint below were each
   one line. On a phone they are not: every hint wraps to three or four
   lines and the arrow slid off the control and sat on top of the hint
   text. A background is painted inside the select's own box and cannot
   drift from it however the label and hint reflow.

   Two copies because a data URI cannot read currentColor, and the stroke
   has to invert with the theme like every other piece of ink. img-src in
   the site's CSP allows data:, which is what governs a CSS background. */
.calc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2314160f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

@media (prefers-color-scheme: dark) {
  .calc-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23f4f2e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

.calc-field input:focus-visible,
.calc-field select:focus-visible {
  outline: var(--bw) solid var(--ac);
  outline-offset: 2px;
}

/* ---------- the bills ---------- */

.calc-bill {
  background: var(--sunk);
  border: var(--bw) solid var(--bd);
  border-radius: var(--r-m);
  padding: var(--s4) var(--s4) var(--s3);
  margin: 0 0 var(--s5);
}

.calc-bill h3 {
  margin: 0 0 var(--s3);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mu);
}

.calc-line {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  padding: 7px 0;
  font-size: 15px;
  color: var(--mu);
  border-bottom: 1px solid color-mix(in srgb, var(--bd) 18%, transparent);
}
.calc-line:last-of-type { border-bottom: 0; }
.calc-line .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tx); white-space: nowrap; }

/* The one line somebody screenshots. A gold block, with dark ink on it in
   both themes -- --on-blk, like every other colour block in the theme. */
.calc-total {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  align-items: baseline;
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  background: var(--gold);
  border: var(--bw) solid var(--bd);
  border-radius: var(--r-m);
  color: var(--on-blk);
}
.calc-total .k { font-size: 14px; font-weight: 600; }
.calc-total .v {
  font-family: var(--disp);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.calc-note { font-size: 13px; color: var(--dim); margin: var(--s3) 0 0; }

/* ---------- the verdict ----------
   Reuses the accent wash the rest of the site uses for a standing note, so
   this reads as the page talking rather than as a sales box. */
.verdict {
  background: var(--ac-w);
  border: var(--bw) solid var(--bd);
  border-radius: var(--r-m);
  padding: var(--s4);
  margin: 0 0 var(--s5);
  color: var(--on-blk);
  font-size: 16px;
  line-height: 1.6;
  /* The sentence inside changes length as the inputs move, and a box that
     resizes on every keystroke makes the table below it jump. Two lines
     of room at the narrowest the box ever gets. */
  min-height: 5.2em;
}
@media (min-width: 37.5em) { .verdict { min-height: 3.6em; } }

/* ---------- the rate card ----------
   Scoped to .article: `.num` is a short name and the landing page has its
   own. The calculator used to carry a second, vendor-by-vendor table here
   and no longer does -- every third-party name came off the site on
   1 November 2026 -- so what is left is the rate card alone. */
.article td.num,
.article th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- our own line, in a list of meters ----------
   A tinted ground rather than a border, because a second border weight is
   the one thing this theme does not allow. The marker colour moves too,
   or the bullet floats outside the block it belongs to. */
.article li.mine {
  background: var(--gold-w);
  border-radius: var(--r-m);
  padding: 10px 12px;
  margin-left: -12px;
  list-style-position: inside;
  color: var(--tx);
}
.article li.mine::marker { color: var(--gold-t); }

/* ---------- the verification stamp ----------
   We are republishing somebody else's numbers and have to say so, on the
   page, where a reader sees it rather than in a footer. --gold-t is the
   readable gold; --gold itself is a fill and is about 1.4:1 as a word. */
.stamp {
  display: block;
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--gold-w);
  border: 1px solid var(--gold);
  border-radius: var(--r-m);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--gold-t);
}
.stamp strong { color: var(--gold-t); }
.stamp a { color: var(--gold-t); border-bottom-color: var(--gold-t); }
.stamp p { color: var(--gold-t); }
.stamp p:last-child { margin-bottom: 0; }

/* ---------- no JavaScript ----------
   The page ships with the default case rendered in the HTML, so with the
   script blocked the numbers on screen are correct for the defaults and
   only the controls are dead. Saying that is better than leaving somebody
   typing into inputs that do nothing. `.calc-live` is added by the script
   once it has bound the handlers. */
.calc-static-note {
  font-size: 13px;
  color: var(--err);
  margin: var(--s3) 0 0;
}
.calc-live .calc-static-note { display: none; }