/* Tools: the calculators and the UTM builder in the homepage's materials, in the same single column as the copy.
   Loaded after /guides/guides.css (tokens, chrome, wells, panels). Pink is only the primary action. */

:root {
  --code-key: #3d5e9e; --code-val: #2d7a57;
  --chip-btn: var(--paper); --chip-btn-box: 0 0 0 1px rgba(110,100,95,.18), 0 1px 2px rgba(60,40,40,.08);
  --chip-btn-hover: 0 0 0 1px rgba(110,100,95,.28), 0 3px 6px -2px rgba(60,40,40,.16);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --code-key: #a8c5f0; --code-val: #b8e0c8; --chip-btn: #24252b; --chip-btn-box: 0 0 0 1px rgba(255,255,255,.1); --chip-btn-hover: 0 0 0 1px rgba(255,255,255,.18); }
}
:root[data-theme="dark"] { --code-key: #a8c5f0; --code-val: #b8e0c8; --chip-btn: #24252b; --chip-btn-box: 0 0 0 1px rgba(255,255,255,.1); --chip-btn-hover: 0 0 0 1px rgba(255,255,255,.18); }

/* one column: the form, then the result directly under it */
.tool { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 36px; }
.out-panel { position: static; }

/* white polycarbonate, one soft warm lift */
.tool .panel { border-radius: 22px; padding: 26px; background: var(--poly); box-shadow: var(--poly-box); --hair: var(--pane-line); }
.out-panel h2 { font-size: 21px; letter-spacing: -0.02em; }

/* fields are inset wells; focus is ink, errors are red */
.field input[type=text], .field input[type=url], .field input[type=number], .field select {
  background: var(--well-bg); box-shadow: var(--well-box); }
.field input:focus, .field select:focus, .field input[type=number]:focus { box-shadow: var(--well-box), 0 0 0 2px var(--ink); }
.field input[aria-invalid=true], .field input[aria-invalid=true]:focus { box-shadow: var(--well-box), 0 0 0 2px var(--bad); }
.field input::placeholder { color: color-mix(in srgb, var(--dove) 62%, transparent); }
.check input { accent-color: var(--ink); }

/* secondary buttons: the homepage's quiet chips. The one pink button stays pink */
.btn.ghost { background: var(--chip-btn); color: var(--ink); box-shadow: var(--chip-btn-box); transition: transform .15s ease, box-shadow .15s ease; }
.btn.ghost:hover { background: var(--chip-btn); color: var(--ink); box-shadow: var(--chip-btn-hover); transform: translateY(-1px); }
.btn.rose:disabled { opacity: .45; cursor: default; box-shadow: none; }

/* the built link: an inset well, the code coloured like the homepage's snippet */
.out { background: var(--well-bg); box-shadow: var(--well-box); color: var(--ink); border-radius: 14px; }
.out.empty { color: var(--dove); }
.out .p { color: var(--code-key); }
.out mark { color: var(--code-val); font-weight: 600; }

/* calculator results: the number in an inset well, ink not pink */
.big { background: var(--well-bg); box-shadow: var(--well-box); color: var(--ink); border-radius: 14px; }
.big.empty { color: var(--dove); }
.big .num { color: var(--ink); }
.big .cap { color: var(--ink-2); }
.rows div + div { box-shadow: 0 -1px 0 var(--pane-line); }

/* the formula in the copy */
.formula { background: var(--well-bg); box-shadow: var(--well-box); border-radius: 14px; }

@media (max-width: 720px) {
  .tool .panel { padding: 18px; border-radius: 18px; }
  .tool { margin-top: 28px; gap: 16px; }
}