/* Universal Calculator Engine — structural styles.
 * ---------------------------------------------------------------------
 * EVERY visual decision routes through a --calc-* custom property with a
 * neutral fallback. Sites MUST override these (footprint rule — see
 * ADAPT.md). Never edit this file per site; skin via variables only.
 * --------------------------------------------------------------------- */

calc-tool {
  display: block;
  font-family: var(--calc-font, inherit);
  color: var(--calc-ink, #222833);
}

/* SEO fallback: visible until JS upgrades, then sr-only for crawlers. */
calc-tool.calc-enhanced .calc-fallback {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.calc-stage {
  border: var(--calc-border, 1px solid #d9dde4);
  border-radius: var(--calc-radius, 10px);
  background: var(--calc-bg, #fbfbfc);
  padding: var(--calc-pad, 1.15rem);
  max-width: var(--calc-max-width, 620px);
}

/* --- inputs --------------------------------------------------------------- */
.calc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .6rem .7rem;
  margin: 0 0 1rem;
}
.calc-field { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.calc-field-label {
  font-size: .74rem;
  color: var(--calc-muted, #6a7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calc-input {
  font: inherit; font-size: .95rem;
  width: 100%;
  padding: .45rem .6rem;
  color: var(--calc-ink, #222833);
  background: var(--calc-input-bg, #fff);
  border: var(--calc-input-border, 1px solid #cfd4dc);
  border-radius: var(--calc-input-radius, 7px);
}
.calc-input:focus { outline: 2px solid var(--calc-focus, #1a1a1a); outline-offset: 1px; }

/* --- output tiles --------------------------------------------------------- */
.calc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .55rem;
  margin: 0;
}
.calc-tile {
  padding: .65rem .8rem;
  background: var(--calc-tile-bg, #fff);
  border: var(--calc-tile-border, 1px solid #e2e5ea);
  border-radius: var(--calc-input-radius, 7px);
}
.calc-tile-primary {
  background: var(--calc-primary-bg, #eef3f8);
  border-color: var(--calc-primary-border, #bcd0e4);
}
.calc-tile-label { font-size: .72rem; letter-spacing: .02em; color: var(--calc-muted, #6a7280); }
.calc-tile-value {
  margin: .18rem 0 0;
  font-size: 1.2rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.calc-tile-primary .calc-tile-value { font-size: 1.5rem; color: var(--calc-primary-ink, #1c3a5e); }
.calc-tile-value.calc-neg { color: var(--calc-neg, #a03030); }
.calc-tile-value.calc-pos { color: var(--calc-pos, #1e7d4f); }

/* --- note ----------------------------------------------------------------- */
.calc-note {
  margin: .9rem 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--calc-note-ink, var(--calc-muted, #6a7280));
  padding: .6rem .8rem;
  background: var(--calc-note-bg, #f1f3f6);
  border-radius: var(--calc-input-radius, 7px);
}