/* Silver calculator page (/silver-calculator/). Builds on the tokens and shared classes in site.css. */

.calc-page [hidden] {
  display: none !important;
}

/* ---- Layout ---------------------------------------------------------------- */

.calc-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

/* Flex columns (not grid): a sticky child of a grid is confined to its own grid row. */
.calc-inputs,
.calc-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 0;
}

@media (min-width: 64rem) {
  .calc-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-7);
  }

  /* Keep the estimate in view while typing: the aside spans the whole inputs column and
     the results card sticks to the top of the screen inside it. */
  .calc-aside {
    align-self: stretch;
  }
}

/* A card taller than the screen (many categories filled) scrolls inside itself, so the
   amount and Copy button stay pinned and the breakdown total can still be reached. */
@media (min-width: 64rem) and (min-height: 40rem) {
  .calc-results {
    position: sticky;
    top: var(--space-4);
    max-height: calc(100vh - 2 * var(--space-4));
    max-height: calc(100dvh - 2 * var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- "Silver or not?" ---------------------------------------------------------- */

/* Kept compact: on phones it sits between the intro and the first input. */
.calc-check {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--cream-200);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius);
  background: var(--cream-50);
}

@media (min-width: 30rem) {
  .calc-check {
    padding: var(--space-4) var(--space-5);
  }
}

.calc-check__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--navy-900);
}

.calc-check__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 36rem) {
  .calc-check__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.calc-check__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-700);
}

.calc-check__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-900);
}

.calc-check__list > li {
  position: relative;
  padding-left: 1.375rem;
}

/* Decorative markers; the "Silver" / "Not silver" headings carry the meaning. */
.calc-check__list > li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.calc-check__col--yes li::before {
  content: "\2713";
  content: "\2713" / "";
  color: var(--success-700);
}

.calc-check__col--no li::before {
  content: "\2715";
  content: "\2715" / "";
  color: var(--danger-700);
}

.calc-check__no {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-900);
}

.calc-check__more {
  margin: var(--space-3) 0 0;
  font-size: 0.9375rem;
}

/* ---- "May be worth more" notes ----------------------------------------------- */

.calc-review-note {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--bronze-700);
  border-radius: var(--radius-sm);
  background: var(--cream-100);
  color: var(--ink-900);
  font-size: 0.95rem;
}

/* ---- Input groups ------------------------------------------------------------ */

.calc-group {
  min-width: 0;
  margin: 0;
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-1);
}

@media (min-width: 30rem) {
  .calc-group {
    padding: var(--space-5);
  }
}

/* Float the legend so it sits inside the card like a heading. */
.calc-group__legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-900);
}

.calc-group__legend + * {
  clear: both;
}

.calc-group__legend-note {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-700);
}

.calc-group > * + * {
  margin-top: var(--space-4);
}

.calc-group > .calc-group__legend + * {
  margin-top: 0;
}

.calc-warning {
  margin-bottom: 0;
}

/* .calc-field sets margin: 0, so the space between a note and the field below it comes
   from the note. The warning matches the note's size, and the two sit close together. */
.calc-group > :is(.calc-review-note, .calc-warning) {
  margin-bottom: var(--space-4);
}

.calc-group > .calc-warning {
  padding: var(--space-2) var(--space-3);
  border-left-width: 4px;
  font-size: 0.95rem;
}

.calc-group > .calc-warning + .calc-review-note {
  margin-top: calc(-1 * var(--space-2));
}

/* ---- Fields ------------------------------------------------------------------ */

.calc-fields {
  display: grid;
  gap: var(--space-4);
}

/* Side by side, the three 90% count fields share row tracks so their inputs line up
   even when a label or hint wraps. */
@media (min-width: 36rem) {
  .calc-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 0;
  }

  .calc-fields > .calc-field {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: var(--space-1);
    align-content: start;
  }
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.calc-field .field__label {
  font-weight: 700;
  color: var(--ink-900);
}

.calc-field .field__hint {
  margin: 0;
  font-size: 0.925rem;
  color: var(--ink-700);
}

.calc-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 14rem;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--ink-500);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-900);
  font: inherit;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}

.calc-input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.calc-input:disabled {
  border-style: dashed;
  border-color: var(--cream-200);
  background: var(--cream-100);
  color: var(--ink-500);
  cursor: not-allowed;
}

/* "$" before the face value, "troy oz" after the bullion amount. */
.calc-affix {
  display: flex;
  align-items: stretch;
  max-width: 16rem;
}

.calc-affix__text {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 2px solid var(--ink-500);
  background: var(--cream-100);
  color: var(--ink-700);
  font-weight: 700;
  white-space: nowrap;
}

.calc-affix__text:first-child {
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.calc-affix__text:last-child {
  border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.calc-affix .calc-input {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.calc-affix .calc-affix__text:first-child + .calc-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.calc-affix .calc-input:has(+ .calc-affix__text) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Errors: thicker border, a marker and a text message, so color isn't the only signal. */
.calc-field.is-invalid .calc-input,
.calc-input[aria-invalid='true'] {
  border-color: var(--danger-700);
  border-width: 3px;
}

.calc-field.is-invalid .calc-affix__text {
  border-color: var(--danger-700);
  border-width: 3px;
}

.calc-error {
  margin: 0;
  color: var(--danger-700);
  font-weight: 700;
  font-size: 0.95rem;
}

.calc-error:empty {
  display: none;
}

/* Decorative marker: the empty alt text keeps it out of the input's accessible description. */
.calc-error:not(:empty)::before {
  content: '!';
  content: '!' / '';
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--danger-700);
  color: var(--white);
  font-size: 0.85em;
  line-height: 1;
  vertical-align: 0.05em;
}

/* ---- 90% entry mode ---------------------------------------------------------- */

.calc-mode {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.calc-mode__legend {
  padding: 0;
  margin-bottom: var(--space-2);
  font-weight: 700;
  color: var(--ink-900);
}

/* Side by side even on phones (the labels wrap inside the tiles), which keeps the first
   input closer to the top of the page. */
.calc-mode__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--space-2);
}

/* 320px phones: the labels would wrap to three lines, so stack the tiles instead. */
@media (max-width: 21.99rem) {
  .calc-mode__options {
    grid-template-columns: minmax(0, max-content);
  }
}

.calc-mode__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  line-height: 1.35;
  border: 2px solid var(--cream-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink-900);
  cursor: pointer;
}

.calc-mode__option input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--navy-700);
}

.calc-mode__option:hover {
  border-color: var(--ink-500);
}

.calc-mode__option:has(input:checked) {
  border-color: var(--navy-700);
  background: var(--cream-100);
  font-weight: 700;
}

.calc-mode__option:has(input:focus-visible) {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.calc-mode-panel {
  padding: var(--space-4);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.calc-mode-panel.is-inactive {
  border-left-style: dashed;
  border-left-color: var(--cream-200);
  background: var(--cream-100);
}

.calc-mode-panel.is-inactive .field__label,
.calc-mode-panel.is-inactive .field__hint {
  color: var(--ink-500);
}

.calc-mode-note {
  margin: 0 0 var(--space-3);
  font-weight: 700;
  color: var(--ink-700);
}

/* ---- "How to tell" help ------------------------------------------------------ */

.calc-help {
  border-top: 1px solid var(--cream-200);
  padding-top: var(--space-2);
}

.calc-help > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: 700;
  color: var(--navy-700);
  cursor: pointer;
  list-style: none;
}

.calc-help > summary::-webkit-details-marker {
  display: none;
}

.calc-help > summary::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.calc-help[open] > summary::before {
  transform: rotate(45deg);
}

.calc-help > summary:hover {
  text-decoration: underline;
}

.calc-help > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.calc-help__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-2) 0 var(--space-2);
}

.calc-help__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--ink-900);
}

.calc-help__list {
  display: grid;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.calc-help__list dt {
  font-weight: 700;
  color: var(--ink-900);
}

.calc-help__list dd {
  margin: 0 0 var(--space-2);
  color: var(--ink-700);
}

@media (min-width: 36rem) {
  .calc-help__list {
    grid-template-columns: max-content 1fr;
  }

  .calc-help__list dd {
    margin-bottom: 0;
  }
}

.calc-help__review,
.calc-help__basis {
  margin: var(--space-2) 0 0;
  color: var(--ink-700);
}

/* ---- Results ----------------------------------------------------------------- */

.calc-results {
  display: grid;
  /* minmax(0, 1fr): a wide breakdown table scrolls inside its wrapper instead of
     widening the card past the screen. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-4);
  border: 1px solid var(--cream-200);
  border-top: 4px solid var(--gold-500);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-2);
}

@media (min-width: 30rem) {
  .calc-results {
    padding: var(--space-5);
  }
}

/* Focus target of the phone bar's "See estimate" link. The scroll margin keeps the top of
   its focus ring on screen when the link scrolls the card into view. */
.calc-results {
  scroll-margin-top: var(--space-4);
}

.calc-results:focus {
  outline: none;
}

.calc-results:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
}

.calc-results__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--navy-900);
}

.calc-output {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.calc-output > *,
.calc-results p {
  margin: 0;
}

.calc-placeholder {
  color: var(--ink-700);
}

.calc-total__label,
.calc-offer__label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-700, #6f4f16);
}

.calc-total__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

.calc-total__grams {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-700);
  white-space: nowrap;
}

.calc-breakdown-wrap:empty {
  display: none;
}

.calc-table-wrap {
  overflow-x: auto;
}

.calc-breakdown__caption {
  padding-bottom: var(--space-2);
  caption-side: top;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bronze-700);
}

.calc-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

.calc-breakdown th,
.calc-breakdown td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--cream-200);
  text-align: left;
  vertical-align: top;
}

.calc-breakdown th:first-child {
  padding-left: 0;
}

/* The unit lives in the column header ("Fine silver (troy oz)"), so the number cells stay
   short enough for 320px screens without breaking mid-number. */
.calc-breakdown td:last-child,
.calc-breakdown thead th:last-child {
  padding-right: 0;
  text-align: right;
}

.calc-breakdown td,
.calc-breakdown__unit {
  white-space: nowrap;
}

/* Wrap item names between words only; a very large lot scrolls inside .calc-table-wrap. */
.calc-breakdown th {
  overflow-wrap: normal;
}

@media (max-width: 24rem) {
  .calc-breakdown {
    font-size: 0.875rem;
  }

  .calc-breakdown th,
  .calc-breakdown td {
    padding-inline: var(--space-1);
  }
}

.calc-breakdown thead th {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-700);
}

.calc-breakdown tbody th {
  font-weight: 400;
  color: var(--ink-900);
}

.calc-breakdown tfoot th,
.calc-breakdown tfoot td {
  border-bottom: 0;
  font-weight: 700;
}

.calc-offer {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--cream-100);
  border-left: 4px solid var(--navy-700);
}

.calc-offer__value {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.calc-offer__terms {
  font-size: 0.925rem;
  color: var(--ink-700);
}

.calc-offer__headline {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy-900);
}

.calc-offer__pending {
  color: var(--ink-700);
}

.calc-offer__contact {
  padding-top: var(--space-2);
  border-top: 1px solid var(--cream-200);
}

.calc-results a:not(.btn) {
  color: var(--navy-700);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.calc-results a:not(.btn):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.calc-ignored {
  color: var(--ink-700);
}

.calc-pricing {
  color: var(--ink-700);
}

.calc-pricing:empty {
  display: none;
}

.calc-errors {
  padding: var(--space-4);
  border: 2px solid var(--danger-700);
  border-left-width: 6px;
  border-radius: var(--radius-sm);
  background: var(--cream-50);
}

.calc-errors__title {
  margin: 0 0 var(--space-2);
  font-weight: 700;
  color: var(--danger-700);
}

.calc-errors__list {
  margin: 0;
  padding-left: var(--space-5);
}

.calc-errors__list a {
  color: var(--danger-700);
}

/* ---- Actions ----------------------------------------------------------------- */

.calc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* "Clear all entries", at the end of the inputs: a ghost button that reads as a text link
   and lines up with the cards' edge (as .button-row does in site.css). */
.calc-clear {
  display: flex;
}

.calc-page:not(.is-enhanced) .calc-clear {
  display: none;
}

.calc-clear .btn {
  min-height: 2.75rem;
}

.calc-clear .btn--ghost {
  padding-inline: 0;
}

.calc-clear .btn--ghost:hover {
  background: transparent;
  text-decoration-thickness: 2px;
}

.calc-actions .btn {
  min-height: 2.75rem;
}

.calc-action-status:empty {
  display: none;
}

.calc-action-status {
  font-weight: 700;
  color: var(--ink-900);
}

.calc-next {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: var(--cream-100);
}

.calc-next__title {
  font-weight: 700;
  color: var(--ink-900);
}

.calc-next__steps {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
}

.calc-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.calc-copy-fallback {
  display: grid;
  gap: var(--space-2);
}

.calc-summary-text {
  box-sizing: border-box;
  width: 100%;
  min-height: 12rem;
  padding: var(--space-3);
  border: 2px solid var(--ink-500);
  border-radius: var(--radius-sm);
  background: var(--cream-50);
  color: var(--ink-900);
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
}

.calc-summary-text:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* ---- Phone summary bar ---------------------------------------------------------- */

/* Sits at the end of the inputs and sticks to the bottom of the screen while they are in
   view. It takes no space until the first estimate (calculator.ts adds .has-shown, at a
   spot below what the visitor is looking at); after that it keeps its slot (visibility,
   not display, toggles it), so hiding it never moves the page, and it never covers the
   results or footer. The wrapper is opaque so text doesn't show through the strip under
   the card (the safe area on Face ID iPhones) or around its rounded corners. */
.calc-bar {
  display: none;
}

@media (max-width: 63.99rem) {
  .calc-page.is-enhanced .calc-bar {
    display: block;
    visibility: hidden;
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
    background: var(--cream-50);
  }

  .calc-page.is-enhanced .calc-bar:not(.has-shown) {
    display: none;
  }

  .calc-page.is-enhanced .calc-bar.is-visible {
    visibility: visible;
  }
}

/* Pinned only when the screen is tall enough, as with the site's action bar: on short
   screens (e.g. 400% zoom) it would cover half the view, so it stays at the end of the
   inputs as a "See estimate" link. */
@media (max-width: 63.99rem) and (min-height: 28rem) {
  .calc-page.is-enhanced .calc-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
  }

  /* Fields scrolled into view by keyboard focus stop above the bar (WCAG 2.4.11). */
  html:has(.calc-bar.is-visible) {
    scroll-padding-bottom: 6rem;
  }
}

/* Narrow phones: amount on the first row, silver and the button on the second.
   Wider: amount and silver stacked beside the button, then all on one row. */
.calc-bar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head head"
    "silver link";
  align-items: center;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-top: 3px solid var(--gold-500);
  border-radius: var(--radius);
  background: var(--navy-900);
  color: var(--cream-50);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 -2px 14px rgb(11 20 36 / 0.28);
}

.calc-bar__headline {
  grid-area: head;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--cream-50);
}

.calc-bar__silver {
  grid-area: silver;
  margin: 0;
  font-size: 0.925rem;
  color: var(--cream-200);
}

@media (min-width: 26rem) {
  .calc-bar__inner {
    grid-template-areas:
      "head link"
      "silver link";
    row-gap: 0;
  }
}

@media (min-width: 40rem) {
  .calc-bar__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head silver link";
  }

  .calc-bar__silver {
    font-size: 1rem;
  }

  .calc-bar__silver::before {
    content: "\00B7";
    content: "\00B7" / "";
    margin-right: var(--space-2);
  }
}

.calc-bar__link {
  grid-area: link;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--gold-400);
  color: var(--navy-950);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.calc-bar__link:hover {
  background: var(--gold-300);
  color: var(--navy-950);
}

.calc-bar__link:focus-visible {
  outline: 3px solid var(--gold-300);
  outline-offset: 2px;
}

/* 320px phones: a little tighter so "Y oz silver" stays on one line. */
@media (max-width: 22rem) {
  .calc-bar__inner {
    column-gap: var(--space-2);
    padding-left: var(--space-3);
  }

  .calc-bar__silver {
    font-size: 0.875rem;
  }

  .calc-bar__link {
    padding-inline: var(--space-2);
    font-size: 0.9375rem;
  }
}

/* ---- Caveat, contact, explainer --------------------------------------------- */

.calc-caveat__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--navy-900);
}

.calc-caveat p {
  margin: 0;
}

.calc-contact__grid {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 48rem) {
  .calc-contact__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.calc-how__steps {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding-left: var(--space-5);
}

/* ---- Preferences ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .calc-page *,
  .calc-page *::before,
  .calc-page *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .calc-mode__option:has(input:checked) {
    border-color: Highlight;
  }

  .calc-mode-panel.is-inactive {
    border-left-color: GrayText;
  }

  .calc-error:not(:empty)::before {
    forced-color-adjust: none;
    background: CanvasText;
    color: Canvas;
  }

  .calc-bar__inner {
    border: 2px solid CanvasText;
  }

  .calc-bar__link {
    border: 1px solid ButtonText;
  }
}

/* Print the estimate first; once there is one, the inputs only repeat the breakdown. */
@page {
  margin: 1.5cm;
}

@media print {
  .calc-actions,
  .calc-clear,
  .calc-copy-fallback,
  .calc-next,
  .calc-help,
  .calc-bar,
  .calc-contact,
  .calc-how-section {
    display: none !important;
  }

  .calc-layout {
    display: flex;
    flex-direction: column;
  }

  .calc-aside {
    order: -1;
  }

  .calc-page:has(.calc-total) .calc-inputs {
    display: none;
  }

  .calc-results {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .calc-group,
  .calc-results,
  .calc-check {
    box-shadow: none;
    break-inside: avoid;
  }
}