/* Calculators placed inside a guide's article column (margin calculator, free shipping threshold).
   Builds on the .calc and .saver blocks in page.css; only design tokens from base.css. */

/* Stack form and result in the narrow article column. */
.pg-article__body .calc { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px !important; }
.pg-article__body .calc__out { position: static; }
.pg-article__body .calc__out p { color: var(--storm); }
.pg-article__body .calc__out .calc__big { color: var(--ink); }
.pg-article__body .calc__out .calc__verdict.is-ok { color: var(--mint-ink); }
.pg-article__body .calc__out .calc__verdict.is-bad { color: var(--coral-ink); }
.pg-article__body .calc__out .calc__verdict.is-idle { color: var(--violet); }
.pg-article__body .calc__rows li + li { margin-top: 0; }
.pg-article__body .calc__rows { padding-left: 0; }

/* The page's own [hidden] must win over .calc__field { display: grid }. */
.calc [hidden] { display: none !important; }

/* Mode switch: two real buttons with aria-pressed. */
.calc-modes { grid-column: 1 / -1; display: flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--cloud); border: 1px solid var(--mist); }
.calc-modes button {
  flex: 1 1 0; min-width: 0; min-height: 42px; padding: 8px 12px; border: 0; border-radius: var(--r-pill); background: transparent;
  font: 500 var(--t-small)/1.25 var(--font); color: var(--storm); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease);
}
.calc-modes button:hover { color: var(--violet); }
.calc-modes button[aria-pressed="true"] { background: var(--paper); color: var(--violet); box-shadow: var(--shadow-soft); }

/* On/off switch for an optional section. */
.calc-switch {
  grid-column: 1 / -1; position: relative; display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 36px; padding: 0 14px 0 8px;
  border: 1px solid var(--haze); border-radius: var(--r-pill); background: var(--paper);
  font: 500 var(--t-small)/1 var(--font); color: var(--storm); cursor: pointer;
}
.calc-switch::before { content: ""; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--haze); transition: background .2s var(--ease); }
.calc-switch::after { content: ""; position: absolute; left: 11px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--paper); transition: transform .2s var(--ease); }
.calc-switch[aria-pressed="true"] { border-color: var(--violet); color: var(--violet); }
.calc-switch[aria-pressed="true"]::before { background: var(--violet); }
.calc-switch[aria-pressed="true"]::after { transform: translateX(12px); }

.calc-modes button:focus-visible, .calc-switch:focus-visible, .calc .saver__presets button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* Group of fields that shows and hides as one, without breaking the form grid. */
.calc-set { display: contents; }

/* Inputs with no $ or % sign. */
.calc__input input.no-affix { padding: 0 14px; }

/* Presets inside the calc form sit under their field. */
.calc .saver__presets { grid-column: 1 / -1; margin-top: -8px; }

/* A small heading row inside the result list. */
.calc__rows li.calc-rows__head { border-top: 0; padding: 18px 0 4px; font-size: var(--t-small); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--violet); }
.calc__rows li.is-total b, .calc__rows li.is-total span { color: var(--ink); font-weight: 500; }
.calc__rows li span { min-width: 0; }
.calc__rows li b { white-space: nowrap; }

.calc__out .saver__bars { margin: 20px 0 6px !important; }
.calc__out .saver__bar { grid-template-columns: 56px minmax(0, 1fr) auto; }
.calc__out .saver__bar--gain .saver__track i { background: var(--mint-ink); }
.calc__out .saver__bar--loss .saver__track i { background: var(--coral-ink); }
.calc__out > .calc__hint { margin-top: 14px !important; }

@media (max-width: 639px) {
  .calc-modes { flex-direction: column; border-radius: var(--r-card); }
  .calc-modes button { border-radius: 12px; }
  .pg-article__body .calc__form, .pg-article__body .calc__out { padding: 22px 18px; }
}