/* ==========================================================================
   Pricing page only: price tables, calculator, module list quote.
   Uses the tokens from site.css; no colors of its own.
   ========================================================================== */

.page-head-links { margin-top: var(--space-3); }

/* ---------- Price cards with tables ---------- */
.price .from { display: block; }
.price-table { margin: 0; }
.price-table table { font-size: 0.95rem; }
.price-table th, .price-table td { padding: 0.45rem 0.5rem 0.45rem 0; }
.price-table tbody th { font-size: 0.97rem; font-weight: 500; }
.price-table tbody th .small { display: block; font-weight: 400; }
.price-caption {
  caption-side: top; text-align: left; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 600; padding-bottom: 0.25rem;
}
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table td.num { font-family: var(--font-serif); font-size: 1.05rem; white-space: normal; min-width: 6.5rem; }
.price p { margin: 0; }

/* ---------- Calculator ---------- */
.calc { display: grid; gap: var(--space-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.calc > * { min-width: 0; }

.calc-form { max-width: none; }
.calc-form fieldset {
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper);
  padding: var(--space-2) var(--space-3) var(--space-1); margin: 0 0 var(--space-3); min-width: 0;
}
.calc-form legend {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--ink-2);
  padding: 0 0.4rem; margin-left: -0.4rem;
}
.calc-grid { display: grid; gap: 0 var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 520px) { .calc-grid { grid-template-columns: 1fr 1fr; } }
.calc-form .field { margin-bottom: var(--space-2); display: flex; flex-direction: column; }
.calc-form .field input, .calc-form .field select { margin-top: auto; }

input[type="number"], input[type="date"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); padding: 0.6rem 0.8rem;
  font-variant-numeric: tabular-nums;
}
input[type="number"]:focus-visible { outline-offset: 1px; border-color: var(--accent); }
input[type="number"]:invalid, input[aria-invalid="true"] { border-color: var(--ink); }
.calc-adj { margin: 0.35rem 0 0; font-weight: 600; color: var(--ink); }

.calc-toggle { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.calc-toggle:first-of-type { border-top: 0; }
.calc-toggle input { width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); flex: none; }
.calc-toggle label { margin: 0; cursor: pointer; }
.calc-sub { padding: 0.25rem 0 0.5rem 1.8rem; }
@media (max-width: 519px) { .calc-sub { padding-left: 0; } }

.calc-out {
  border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper);
  padding: var(--space-3);
}
@media (min-width: 960px) { .calc-out { position: sticky; top: var(--space-2); max-height: calc(100vh - 2rem); overflow-y: auto; } }
.calc-out:focus-visible { outline-offset: 2px; }
.calc-out h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; margin-bottom: var(--space-1); }
.calc-summary { font-size: 1.1rem; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: var(--space-2); margin-bottom: var(--space-2); max-width: none; }
.calc-block { margin-bottom: var(--space-3); }
.calc-block:last-of-type { margin-bottom: var(--space-2); }
.calc-block h4 {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; margin-bottom: 0.25rem;
}
.calc-table { font-size: 0.95rem; }
.calc-table th, .calc-table td { padding: 0.4rem 0.5rem 0.4rem 0; }
.calc-table td:last-child, .calc-table th:last-child { padding-right: 0; }
.calc-table tbody th { font-weight: 400; font-size: 0.95rem; }
.calc-table tr.sub th { padding-left: 1rem; color: var(--ink-2); font-size: 0.9rem; }
.calc-table tr.sub td { color: var(--ink-2); font-size: 0.9rem; }
.calc-table tfoot th, .calc-table tfoot td {
  border-top: 1.5px solid var(--ink); border-bottom: 0; font-weight: 600; font-size: 1rem;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.calc-table tfoot td { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 500; }
.calc-timeline { list-style: none; margin: 0; padding: 0; }
.calc-timeline li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: baseline;
  padding: 0.45rem 0; border-bottom: 1px solid var(--line); max-width: none; font-size: 0.95rem;
}
.calc-timeline .when { font-weight: 600; }
.calc-timeline .what { grid-column: 1 / -1; color: var(--ink-2); font-size: 0.88rem; }
.calc-timeline .amt { text-align: right; font-variant-numeric: tabular-nums; }
.calc-timeline li.then { border-bottom: 0; border-top: 1.5px solid var(--ink); margin-top: 0.25rem; }
.calc-timeline li.then .amt { font-family: var(--font-serif); font-size: 1.35rem; }

/* ---------- Module list quote ---------- */
.mq-private {
  border-left: 3px solid var(--accent); padding: 0.25rem 0 0.25rem var(--space-2); max-width: 72ch; margin-bottom: var(--space-3);
}
.mq { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 960px) { .mq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.mq > * { min-width: 0; }
.mq-drop {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius); padding: var(--space-2);
  background: var(--paper-2);
}
.mq-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.mq-drop input[type="file"] { width: 100%; font: inherit; font-size: 0.95rem; max-width: 100%; }
.mq-drop input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; margin-right: 0.75rem; padding: 0.5rem 0.9rem; cursor: pointer;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
#mq-text { font-family: var(--font-mono); font-size: 0.9rem; min-height: 8rem; }
.mq-inputs .hint code { word-break: break-word; }
.mq-error { color: var(--ink); font-weight: 600; margin-top: var(--space-2); }
.mq-error:empty { display: none; }
.mq-error:not(:empty)::before { content: "! "; color: var(--accent); }

.mq-out h3 { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; }
.mq-out h3:focus { outline: none; }
.mq-out h4 {
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); font-weight: 600;
  margin: var(--space-3) 0 0.35rem;
}
.mq-counts { list-style: none; padding: 0; margin: var(--space-2) 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mq-counts li {
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0.35rem 0.7rem; font-size: 0.93rem; max-width: none;
}
.mq-counts strong { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; }
.mq-tech { display: block; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); font-weight: 400; }
.mq-oca { display: block; font-size: 0.88rem; color: var(--ink-2); margin-top: 0.2rem; }
.mq-oca code { font-size: 0.85rem; }
.mq-table select { padding: 0.35rem 0.5rem; font-size: 0.9rem; min-width: 12rem; }
.mq-table th code { word-break: break-all; }
.mq-all { margin-top: var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.mq-all summary { cursor: pointer; font-weight: 600; }
.mq-all .mq-group { font-size: 0.95rem; margin: var(--space-2) 0 0.35rem; }
.mq-names {
  list-style: none; padding: 0; margin: 0; columns: 14rem auto; column-gap: var(--space-3);
  font-family: var(--font-mono); font-size: 0.85rem;
}
.mq-names li { break-inside: avoid; overflow-wrap: anywhere; }

/* ---------- Worked examples ---------- */
.examples td.num { font-family: var(--font-serif); font-size: 1.05rem; white-space: normal; min-width: 7rem; }

@media print {
  .calc-form, .mq, .mq-private, .page-head-links, .calc-next, .calc-next-note, .calc-links { display: none !important; }
}

/* site.css gives some of these blocks display:grid/flex, which would beat the
   hidden attribute; keep hidden meaning hidden on this page. */
main [hidden] { display: none !important; }

/* ---------- The focused price page (estimate.html): the calculator alone ---------- */
.calc-more { margin: var(--space-2) 0 var(--space-3); border-top: 1px solid var(--line); padding-top: var(--space-2); }
.calc-more summary { cursor: pointer; font-weight: 600; }
.calc-more[open] summary { margin-bottom: var(--space-2); }
.calc-links { margin-top: var(--space-3); }
.page-head-tight { padding-block: var(--space-4) var(--space-3); }
.page-head-tight h1 { max-width: none; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.page-head-tight + .section { padding-top: var(--space-4); }
/* Where the result panel scrolls inside itself (960px and up), the send button stays in view at its foot. Only
   the button is pinned, so the block stays short; scroll-padding is taller than the block, so a focused link never
   lands underneath it and Page Down never steps over a row. */
@media (min-width: 960px) {
  .calc-focus .calc-out { scroll-padding-bottom: 7rem; }
  .calc-focus .calc-next .btn-row { margin: 0; }
  .calc-focus .calc-next {
    /* the panel's own padding is inside its scroll area, so the block sticks one padding lower to sit on the edge */
    position: sticky; bottom: calc(-1 * var(--space-3)); background: var(--paper); border-top: 1px solid var(--line);
    margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); padding: var(--space-2) var(--space-3) var(--space-3);
  }
}
/* The "did not load" note (estimate.html) waits four seconds before it shows, so it never flashes while the
   scripts are still arriving; pricing.js hides it for good once the calculator runs. It sits under the calculator,
   so nothing above it moves. */
[data-calc-fallback] { visibility: hidden; animation: calc-fallback 0s linear 4s forwards; }
@keyframes calc-fallback { to { visibility: visible; } }