/*
 * Työkalut (calculators) design layer — loaded after app.css. Only the styling
 * the calculator widgets need on top of the shared result/form classes already
 * defined in app.css (et-card, et-results, et-result-hero, et-metrics,
 * et-statuspill, et-callout, et-field-group). Uses theme tokens only, no hex.
 */

/* The per-calculator widget wrapper holds the BeerCSS form/result grid and the
   reset action row; give it room from the hero and the article below it. */
.et-tyokalu-widget { margin-block: 1.25rem 1.75rem; }
.et-tyokalu-widget .et-calc { margin: 0; }

/* Slightly tighter vertical rhythm between stacked fields in the form card. */
.et-tyokalu-widget .et-field-group .field + .field,
.et-tyokalu-widget .et-field-group .field + .grid,
.et-tyokalu-widget .et-field-group .grid + .field { margin-block-start: 0.9rem; }

/* The risk verdict pill sits inside the (primary-toned) results card, so make
   it read as a solid, high-emphasis chip rather than a faint tint. */
.et-results .et-statuspill {
  font-size: 0.95rem;
  background: color-mix(in srgb, var(--et-tone, var(--primary)) 26%, transparent);
}

/* Inline disclaimer note under the result hero in health calculators. */
.et-results .et-field-help {
  border-block-start: 1px solid color-mix(in srgb, var(--on-primary-container) 14%, transparent);
  padding-block-start: 0.7rem;
  color: color-mix(in srgb, var(--on-primary-container) 72%, transparent);
}