/* Authored integration skin for the existing calculator bundle.
   Load after its immutable compiled stylesheet. Layout, technical drawings,
   numeric rows, formulae and JavaScript behaviour remain owned by that bundle. */
@import url("/src/design-tokens.css?v=20261014-style-system-2");

:root {
  font-family: var(--mb-font-family);
  --page-bg: var(--mb-color-surface);
  --surface: var(--mb-color-surface);
  --surface-subtle: var(--mb-color-surface-muted);
  --surface-hover: var(--mb-color-surface-muted);
  --surface-selected: var(--mb-color-primary-soft);
  --text-strong: var(--mb-color-title);
  --text: var(--mb-color-text);
  --muted: var(--mb-color-muted);
  --faint: var(--mb-color-muted);
  --primary: var(--mb-color-primary);
  --primary-hover: var(--mb-color-primary-hover);
  --primary-soft: var(--mb-color-primary-soft);
  --border: var(--mb-color-border);
  --border-strong: var(--mb-color-border-strong);
  --divider: var(--mb-color-border);
}

body {
  font-family: var(--mb-font-family);
  font-size: var(--mb-font-workspace);
  line-height: var(--mb-line-workspace);
}

.calculator-embed .page-wrap {
  width: calc(100% - var(--mb-space-7));
  padding: var(--mb-space-6) 0 var(--mb-space-7);
}

.page-heading-row h1 {
  font-size: var(--mb-heading-page-size);
  font-weight: var(--mb-heading-page-weight);
  line-height: var(--mb-heading-page-line);
  letter-spacing: var(--mb-heading-page-tracking);
}

.page-heading-row p {
  font-size: var(--mb-font-note);
  line-height: var(--mb-line-note);
}

.section-heading h2,
.spec-heading h2,
.modal-heading h2 {
  font-size: var(--mb-heading-card-size);
  font-weight: var(--mb-weight-heading);
  line-height: var(--mb-heading-card-line);
}

/* Main actions inside this working tool use the documented compact variant. */
.primary-button,
.secondary-button {
  height: auto;
  min-height: var(--mb-control-compact-height);
  padding: var(--mb-control-compact-padding);
  border-radius: var(--mb-radius-control);
  font-size: var(--mb-font-control-compact);
  font-weight: var(--mb-weight-emphasis);
  line-height: var(--mb-line-control);
}

.spec-actions .secondary-button,
.spec-primary-button,
.result-cta {
  height: auto;
  min-height: var(--mb-control-compact-height);
  font-size: var(--mb-font-control-compact);
}

/* Row actions retain an explicit smaller type scale within dense technical rows. */
.result-actions button,
.row-add-button {
  height: auto;
  min-height: var(--mb-control-compact-height);
  border-radius: var(--mb-radius-control);
  font-size: var(--mb-font-control-small);
  font-weight: var(--mb-weight-emphasis);
  line-height: var(--mb-line-control);
}

.mode-switch {
  height: auto;
  min-height: var(--mb-control-compact-height);
  border-radius: var(--mb-radius-control);
}

.mode-switch button {
  /* The segment sits inside the group's two one-pixel borders. */
  min-height: calc(var(--mb-control-compact-height) - 2px);
  padding: var(--mb-control-compact-padding);
  font-size: var(--mb-font-control-compact);
  font-weight: var(--mb-weight-emphasis);
  line-height: var(--mb-line-control);
}

.field > input,
.field > textarea,
.input-with-unit,
.select-control {
  min-height: var(--mb-control-compact-height);
  border-radius: var(--mb-radius-control);
}

.input-with-unit input {
  height: var(--mb-control-compact-height);
  font-size: var(--mb-font-control-compact);
}

.field > input,
.field > textarea,
.select-control {
  font-size: var(--mb-font-control-compact);
}

/* Text areas keep their multiline size; quantity steppers and unit selectors
   keep the measured row geometry from the calculator's technical layout. */
.field > textarea { min-height: 82px; }

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: var(--mb-focus-outline); }

@media (max-width: 600px) {
  .calculator-embed .page-wrap {
    width: calc(100% - var(--mb-space-6));
    padding: var(--mb-space-4) 0 var(--mb-space-6);
  }
}