/* Mortgage calculator: /mortgage-calculator/ and /ru/mortgage-calculator/ only (listed in that page's "css").
   Loads after site.css, location.css and pages.css and uses their tokens. Square panels, pill buttons as elsewhere,
   text 14 px or larger, tap targets 44 px or taller. The script is /assets/calculator.js. */

.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 2.5vw, 32px); margin-top: clamp(24px, 3vw, 40px); align-items: start; }
.calc-form { min-width: 0; padding: clamp(18px, 2.4vw, 32px); background: var(--paper); border: 1px solid var(--line); }
.calc-set { min-width: 0; margin: 0; padding: 0; border: 0; }
.calc-set + .calc-set { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.calc-set legend { padding: 0; margin: 0 0 14px; font: 700 14px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--lake); }
.calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.calc-field.is-wide { grid-column: 1 / -1; }
.calc-field > .calc-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; font-weight: 600; }
.calc-tag { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--sun); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.4; }
.calc-field > .calc-box { position: relative; display: block; font-size: 16px; font-weight: 400; }
.calc-box input, .calc-field select { font-variant-numeric: tabular-nums; }
.calc-pre, .calc-post { position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ink-soft); pointer-events: none; }
.calc-pre { left: 14px; }
.calc-post { right: 14px; }
.calc-box input.has-pre { padding-left: 30px; }
.calc-box input.has-post { padding-right: 36px; }
.calc-hint, .calc-field > .calc-hint { display: block; min-height: 1.5em; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); }
.calc-set > .calc-hint { margin: -4px 0 6px; }
.calc-reset { margin-top: 4px; }
/* Running total for phones and tablets, where the result panel sits below the form: sticks under the header while
   the visitor scrolls through the fields. Hidden on wide screens, where the panel itself is sticky. */
.calc-mini { display: none; }
@media (min-width: 561px) { .calc-field > .calc-label { min-height: 2.9em; align-items: flex-end; } }

.calc-out { position: sticky; top: calc(var(--header-h) + 24px); min-width: 0; padding: clamp(20px, 2.4vw, 32px); background: var(--lake-deep); color: var(--on-dark); }
.calc-out-label { margin: 0; font: 700 14px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-soft); }
.calc-total { margin: 8px 0 18px; font: 400 clamp(44px, 5vw, 64px)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--paper); overflow-wrap: anywhere; }
.calc.is-empty .calc-total, .calc.is-empty .calc-rows dd { opacity: .45; }
.calc-bar { display: flex; height: 12px; margin: 0 0 16px; background: color-mix(in srgb, var(--mist) 14%, transparent); overflow: hidden; }
.calc-bar span { display: block; height: 100%; width: 0; transition: width .4s var(--ease); }
.calc [data-part="pi"] { background: var(--citrus); }
.calc [data-part="tax"] { background: var(--sun); }
.calc [data-part="ins"] { background: var(--moss); }
.calc [data-part="hoa"] { background: var(--mist); }
.calc-rows { margin: 0; padding: 0; }
.calc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-dark); }
.calc-rows dt { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 15px; line-height: 1.4; }
.calc-rows dt i { width: 12px; height: 12px; flex: none; }
.calc-rows dd { margin: 0; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-rows.is-small { margin-top: 14px; }
.calc-rows.is-small dt, .calc-rows.is-small dd { font-size: 14px; font-weight: 500; color: var(--on-dark-soft); }
.calc-note { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--on-dark-soft); }
.calc-note.is-alert { color: var(--sun); font-weight: 600; }
.calc-noscript { margin: 16px 0 0; font-size: 15px; color: var(--ink-soft); }
.on-dark .calc-out :focus-visible, .calc-out :focus-visible { outline-color: var(--citrus); }

@media (max-width: 1000px) {
  .calc { grid-template-columns: minmax(0, 1fr); }
  .calc-out { position: static; }
  .calc-mini {
    position: sticky; top: var(--header-h); z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: calc(-1 * clamp(18px, 2.4vw, 32px)) calc(-1 * clamp(18px, 2.4vw, 32px)) 18px; padding: 10px clamp(18px, 2.4vw, 32px);
    min-height: 48px; background: var(--lake-deep); color: var(--on-dark);
  }
  .calc-mini span { font-size: 14px; font-weight: 600; color: var(--on-dark-soft); }
  .calc-mini b { font: 400 26px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--paper); white-space: nowrap; }
  .calc-mini a { font-size: 14px; font-weight: 600; color: var(--on-dark); text-underline-offset: 3px; padding-block: 12px; white-space: nowrap; }
}
@media (max-width: 560px) {
  .calc-grid { grid-template-columns: minmax(0, 1fr); }
  .calc-total { font-size: 44px; }
}