/* =====================================================================
   ENTERIORS — 9b. CALCULATORS (tool pages, and calculators inside articles)
   Loaded for 'tool' pages automatically; articles add it with 'css' => ['tool'].
   Markup: .estimator > form .est-step (fieldset) + aside .summary
   ===================================================================== */
@layer page {
  .estimator { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--sp-6); align-items: start; }
  .estimator--stack { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 960px) { .estimator { grid-template-columns: minmax(0, 1fr); } }

  /* One step of the form */
  .est-step { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); margin: 0; min-width: 0; }
  .est-step + .est-step { margin-top: var(--sp-4); }
  .est-step__title { float: left; width: 100%; padding: 0; display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
  .est-step__title span { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--red); color: var(--white); display: grid; place-items: center; font-size: .95rem; }
  .est-step__title + * { clear: both; }
  .est-step__hint { font-size: var(--fs-sm); color: var(--muted); margin: var(--sp-2) 0 var(--sp-4); }
  .est-step h4 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: var(--sp-4) 0 var(--sp-2); }

  /* Radio / checkbox tiles */
  .options { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
  .option { position: relative; display: block; }
  .option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .option span { display: block; height: 100%; border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .75rem; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: border-color var(--ease), background var(--ease); }
  .option small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
  .option:hover span { border-color: var(--red); }
  .option input:checked + span { border-color: var(--red); background: var(--red-tint); box-shadow: inset 0 0 0 1px var(--red); }
  .option input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }

  /* Number / select fields in a row */
  .fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
  .range { width: 100%; accent-color: var(--red); }
  .range-row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-sm); }
  .range-row output { font-weight: 700; color: var(--red); min-width: 6ch; text-align: right; }

  /* Result panel */
  .summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); background: var(--ink); color: var(--white); border-radius: var(--radius-lg); overflow: hidden; }
  .estimator--stack .summary { position: static; }
  .summary__head { background: var(--red); padding: var(--sp-4) var(--sp-5); }
  .summary__head strong { display: block; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .08em; font-weight: 400; }
  .summary__head span { font-size: var(--fs-xs); color: rgba(255,255,255,.8); }
  .summary__total { padding: var(--sp-5) var(--sp-5) 0; }
  .summary__amount { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; letter-spacing: .02em; }
  .summary__range { font-size: var(--fs-xs); color: var(--muted-dark); margin-top: var(--sp-1); }
  .summary__lines { list-style: none; margin: 0; padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
  .summary__lines li { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--muted-dark); margin: 0; }
  .summary__lines b { color: var(--white); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .summary__lines .is-total { border-top: 1px solid var(--ink-3); padding-top: var(--sp-2); color: var(--white); font-weight: 600; }
  .summary__foot { padding: 0 var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-3); }
  .summary__note { font-size: var(--fs-xs); color: #8A8A8A; line-height: 1.5; }

  /* Row of result figures (small calculators) */
  .result-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--ink-3); border-radius: var(--radius-lg); overflow: hidden; margin-top: var(--sp-4); }
  .result-strip > div { background: var(--ink); color: var(--white); padding: var(--sp-4); }
  .result-strip b { display: block; font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; letter-spacing: .02em; }
  .result-strip span { font-size: var(--fs-xs); color: var(--muted-dark); letter-spacing: .08em; text-transform: uppercase; }

  /* Room-by-room bars inside the result panel */
  .breakdown { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5) 0; }
  .breakdown__row { display: grid; grid-template-columns: minmax(0, 1.4fr) 1fr auto; gap: var(--sp-3); align-items: center; font-size: var(--fs-xs); color: var(--muted-dark); }
  .breakdown__row b { text-align: right; font-weight: 500; color: var(--white); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .breakdown .bars__track { background: var(--ink-3); }
  .summary .btn--outline { color: var(--white); border-color: #5A5A5A; }
  .summary .btn--outline:hover { color: var(--gold); border-color: var(--gold); }

  /* Estimator on a dark section (home page): white form card */
  .section--dark .estimator form { background: var(--white); color: var(--text); border-radius: var(--radius-lg); padding: var(--sp-4); }
  .section--dark .estimator .summary { border: 1px solid var(--ink-3); }
  .section--dark .estimator form .input { background-color: var(--white); color: var(--text); border-color: var(--line); }
  .section--dark .estimator form label { color: var(--text); }
  .est-step__title + h4, .est-step__title + .fields { margin-top: var(--sp-4); }

  /* While the server works out a new figure */
  [data-calc] .summary__amount, [data-calc] .summary__lines b { transition: opacity .15s; }
  [data-calc].is-busy .summary__amount, [data-calc].is-busy .summary__lines b { opacity: .55; }
  .muted { color: var(--muted); }
  .summary .muted { color: var(--muted-dark); }

  /* ---------- Room-by-room quote builder (/calculators/home-interior-quote/) ---------- */
  .q-settings .fields, .q-specs { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  /* step 1 and 2 choices: radio pills and package cards */
  .q-choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .q-choice { position: relative; cursor: pointer; }
  .q-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .q-choice > span { display: block; padding: .55rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--fs-sm); background: var(--white); transition: border-color var(--ease), background var(--ease); }
  .q-choice input:checked + span { border-color: var(--red); background: var(--surface); box-shadow: inset 0 0 0 1px var(--red); }
  .q-choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
  .q-choices--packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .q-choice--card > span { border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); height: 100%; }
  .q-choice--card b { display: block; font-size: 1rem; }
  .q-choice--card small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; margin-top: 2px; }
  .q-spec { display: block; font-size: var(--fs-xs); color: var(--ink); margin-top: 2px; }
  .q-spec::before { content: 'Spec: '; color: var(--muted); }
  .q-rooms { padding-bottom: var(--sp-3); }
  /* summary: room totals and the spec sheet */
  .summary__rooms { border-bottom: 1px solid var(--ink-3); }
  .q-sheet { padding: 0 var(--sp-5) var(--sp-4); font-size: var(--fs-xs); }
  .q-sheet__title { font-weight: 600; color: var(--white); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 var(--sp-2); }
  .q-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
  .q-sheet li { margin: 0; display: grid; gap: 1px; }
  .q-sheet li span { color: var(--muted-dark); }
  .q-sheet li b { color: var(--white); font-weight: 500; }
  .q-sheet li small { color: #9A9A9A; line-height: 1.4; }
  .q-sheet__war { margin: var(--sp-3) 0 0; color: var(--muted-dark); }
  .q-sheet__war span:last-child { color: var(--white); }
  .q-note { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-3); }
  .q-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; margin: var(--sp-4) 0 var(--sp-2); }
  .q-area { border: 1px solid var(--line); border-radius: var(--radius-lg); margin-top: var(--sp-3); background: var(--white); }
  .q-area > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; padding: var(--sp-4) var(--sp-5); }
  .q-area > summary::-webkit-details-marker { display: none; }
  .q-area > summary::after { content: '▾'; grid-column: 3; grid-row: 1; color: var(--muted); transition: transform var(--ease); }
  .q-area[open] > summary::after { transform: rotate(180deg); }
  .q-area__icon { font-size: 1.4rem; }
  .q-area__name { font-weight: 600; }
  .q-area__name small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--muted); }
  .q-area__total { grid-column: 2; justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; margin-right: var(--sp-5); }
  .q-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .q-table th { text-align: left; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); background: var(--surface); }
  .q-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
  .q-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .q-table input[type="number"] { width: 4.6rem; padding: .35rem .4rem; text-align: right; }
  .q-table input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--red); }
  .q-table .q-group td { background: var(--surface); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .q-item__name { font-weight: 600; }
  .q-item__desc { display: block; font-size: var(--fs-xs); color: var(--muted); }
  .q-tag { display: inline-block; margin-left: var(--sp-2); font-size: .65rem; font-weight: 700; letter-spacing: .08em; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); vertical-align: middle; }
  .q-row:not(:has(input[type="checkbox"]:checked)) td:not(:first-child) { opacity: .5; }
  .q-amt { font-weight: 700; }
  .q-dash { color: var(--muted); }

  /* Running total that stays in view while editing (phones and tablets; desktop has the sticky summary) */
  .q-bar { display: none; }
  @media (max-width: 960px) {
    .q-bar { display: flex; align-items: baseline; gap: var(--sp-3); position: sticky; top: var(--header-h); z-index: 5; margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--ink); color: var(--white); border-radius: var(--radius); text-decoration: none; font-size: var(--fs-sm); }
    .q-bar b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: .02em; }
    .q-bar small { margin-left: auto; color: var(--muted-dark); }
  }

  /* Phones: each item becomes a small card */
  @media (max-width: 720px) {
    .q-table thead { display: none; }
    .q-table, .q-table tbody, .q-table tr, .q-table td { display: block; }
    .q-row { display: grid !important; grid-template-columns: auto 1fr 1fr 1fr; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
    .q-row td { border: 0; padding: 0; }
    .q-row td:nth-child(1) { grid-row: span 3; }
    .q-row td:nth-child(2) { grid-column: 2 / -1; }
    .q-row td[data-label]::before { content: attr(data-label); display: block; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
    .q-row td.num { text-align: left; }
    .q-table input[type="number"] { width: 100%; }
    .q-area > summary { padding: var(--sp-3) var(--sp-4); }
    .q-area__total { margin-right: var(--sp-3); }
  }

  /* Print / save as PDF: just the chosen items and the totals */
  @media print {
    .site-header, .site-footer, .sticky-cta, .page-header .page-header__meta, .q-tools, .summary__foot .btn, #get-quote, .lead-card, .cta-band, .toc, .share, .staging-ribbon, .section--grey { display: none !important; }
    .estimator { display: block; }
    .summary { position: static; color: #000; background: #fff; border: 1px solid #999; margin-top: 1rem; }
    .summary__head { background: #eee; color: #000; } .summary__lines b, .summary__lines li { color: #000; }
    .q-area { break-inside: avoid; border-color: #999; }
    .q-row:not(:has(input[type="checkbox"]:checked)) { display: none; }
    .q-area:not(:has(input[type="checkbox"]:checked)) { display: none; }
    .q-table input { border: 0; background: none; }
    .q-choices, .est-step__hint, .q-bar { display: none !important; }
    .q-sheet, .q-sheet__title, .q-sheet li b, .q-sheet li span, .q-sheet li small, .q-sheet__war span:last-child { color: #000 !important; }
    .q-row td:nth-child(2) .q-spec { color: #000; }
  }
}