/* ==========================================================================
   Grafico — project estimator (/wycena/)
   Same universe as the homepage/service pages (NIGHT/COAL/IVORY/CRIMSON,
   Satoshi, mark-derived geometry) but the calmest surface in the system —
   IVORY throughout, one CRIMSON accent, no spectacle. A decision tool,
   not a poster. Enqueued only on /wycena/ (inc/estimator-assets.php).
   Visibility of steps/branches/conditional fields is controlled by JS
   setting the native `hidden` property directly (estimator.js) — nothing
   here needs a "no-JS" class variant; unset `hidden` is the default, so
   every field is visible and usable with no JS at all.

   Section styles only (`sections` layer). Tokens, element reset, header,
   footer and the primary CTA (.btn-primary) live in base.css. VISUAL
   LOCK (docs/rebuild/17): header, footer and buttons are global.
   ========================================================================== */
@layer sections {
body.grafico-estimator{line-height:1.15}

/* ==========================================================================
   Estimator shell
   ========================================================================== */
.estimator{padding:4.5rem 0 6rem}
.estimator-inner{max-width:40rem;margin:0 auto;padding:0 var(--edge)}
.estimator-eyebrow{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson);font-weight:700}
.estimator-intro h1{margin-top:.75rem;font-weight:800;font-size:clamp(2rem,6vw,2.9rem);letter-spacing:-.02em;line-height:1.05;max-width:16ch}
.estimator-lede{margin-top:var(--space-heading-lead);color:var(--ash);font-size:1.02rem;max-width:42ch}
.estimator-form-error{margin-top:1.5rem;padding:.9rem 1.1rem;background:rgba(179,32,44,.08);border-left:2px solid var(--crimson);font-size:.92rem}

.estimator-progress{margin-top:2.5rem;display:flex;flex-direction:column;gap:.5rem}
.estimator-progress-label{font-size:.78rem;letter-spacing:.04em;color:var(--ash)}
.estimator-progress-line{display:block;height:2px;background:rgba(13,13,12,.14)}
.estimator-progress-fill{display:block;height:100%;width:16.6667%;background:var(--crimson);transition:width .35s var(--ease-lock)}

.estimator-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- preselected package context (from a leaf-service deep link) ---------- */
.estimator-preselected{margin-top:1.75rem;padding:1rem 1.25rem;background:var(--coal);color:var(--ivory);display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem}
.preselected-label{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);flex:1 0 100%}
.preselected-value{font-weight:700;font-size:1rem}
.preselected-change{font-size:.85rem;color:var(--smoke);border-bottom:1px solid transparent;margin-left:auto}
.preselected-change:hover{color:var(--ivory);border-color:currentColor}

.branch-help{color:var(--ash);font-size:.92rem;max-width:48ch}

/* ---------- one question screen at a time: generous breathing room ---------- */
.q{margin-top:3.5rem;padding-top:.5rem}
.q:first-child{margin-top:0}
.q-label{display:block;font-weight:700;font-size:clamp(1.25rem,4vw,1.7rem);letter-spacing:-.015em;line-height:1.15;max-width:22ch}
.q-help{margin-top:.6rem;color:var(--ash);font-size:.92rem;max-width:46ch}
fieldset.q .q-help{margin-top:-.35rem;margin-bottom:1rem}

/* one restrained entrance per screen change — opacity + small rise, never a slide/carousel */
.q.is-entering{animation:estimatorStepIn .32s var(--ease-lock)}
@keyframes estimatorStepIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

@media (min-width:56rem){
  .q{margin-top:5rem;padding-top:1.5rem;padding-bottom:2rem}
  .q:first-child{margin-top:0;padding-top:0}
  fieldset.q .choice-list,.q .q-text{max-width:34rem}
}

.choice-list{margin-top:1rem;border-top:1px solid rgba(13,13,12,.15)}
.choice-list-compact{margin-top:.85rem}
.choice-row{position:relative;display:flex;align-items:center;gap:.9rem;padding:1rem 0;border-bottom:1px solid rgba(13,13,12,.15);cursor:pointer;transition:padding-left .2s var(--ease-lock)}
.choice-row-compact{padding:.85rem 0;gap:.75rem}
.choice-row::before{content:"";flex:0 0 auto;width:.8rem;height:.9rem;border:1.5px solid var(--ash);background:transparent;clip-path:polygon(30% 0,100% 0,70% 100%,0 100%);transition:background-color .15s ease,border-color .15s ease}
.choice-row input{position:absolute;opacity:0;width:1px;height:1px;margin:-1px;padding:0}
.choice-row:hover{padding-left:.55rem}
.choice-row:has(input:checked)::before{background:var(--crimson);border-color:var(--crimson)}
.choice-row:has(input:checked) .choice-label{font-weight:700}
.choice-row:has(input:focus-visible){outline:2px solid var(--crimson);outline-offset:3px}
.choice-label{font-size:1rem}
.choice-text{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.choice-desc{font-size:.85rem;line-height:1.45;color:var(--ash)}
.choice-row-compact .choice-label{font-size:.95rem}

.additions-group{margin-top:2.5rem}
.additions-label{font-size:.85rem;color:var(--ash);margin-bottom:.25rem}

.q-text{display:block;width:100%;margin-top:.6rem;padding:.75rem .1rem;background:transparent;border:0;border-bottom:1.5px solid rgba(13,13,12,.3);font:inherit;font-size:1rem;color:var(--night);transition:border-color .18s ease}
textarea.q-text{border:1.5px solid rgba(13,13,12,.3);padding:.75rem;resize:vertical;min-height:6rem}
.q-text:focus-visible{outline:none;border-color:var(--crimson)}
.q-text::placeholder{color:var(--smoke)}
.field-error{margin-top:.5rem;color:var(--crimson);font-size:.85rem}
[aria-invalid="true"]{border-color:var(--crimson)!important}

/* ---------- consent + submit: the clearest zone on the page ---------- */
.estimator-finish{margin-top:2.5rem;padding-top:2rem;border-top:1px solid rgba(13,13,12,.15)}
.consent-row{display:flex;align-items:flex-start;gap:.85rem;cursor:pointer;padding:.4rem;margin:-.4rem}
.consent-row input{flex:0 0 auto;margin-top:.2rem;width:1.15rem;height:1.15rem;accent-color:var(--crimson)}
.consent-row span{font-size:.88rem;color:var(--ash);max-width:44ch}
.consent-row:has(input:focus-visible){outline:2px solid var(--crimson);outline-offset:2px}
.consent-row:has(input[aria-invalid="true"]) span{color:var(--crimson)}
.estimator-notice{margin-top:1.1rem;max-width:52ch;line-height:1.55}
.estimator-notice a{text-decoration:underline;text-underline-offset:3px}
.estimator-notice + .estimator-submit{margin-top:1.4rem}

.estimator-submit{display:flex;width:100%;margin-top:1.5rem}
@media (min-width:30rem){ .estimator-submit{display:inline-flex;width:auto} }

.estimator-summary{margin-top:1.5rem;margin-bottom:2rem}
.summary-block{padding:1.1rem 0;border-bottom:1px solid rgba(13,13,12,.15)}
.summary-block:first-child{border-top:1px solid rgba(13,13,12,.15)}
.summary-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.summary-value{margin-top:.35rem;font-size:.98rem;white-space:pre-line}/* Phase 11Y: the scope row lists one answer per line */
.summary-edit{display:inline-block;margin-top:.4rem;font-size:.82rem;color:var(--crimson);border-bottom:1px solid transparent}
/* Phase 11Y: the visible link is 16px high; the pseudo-element enlarges only the hit area (>= 44px) without changing the layout */
.summary-edit{position:relative}
.summary-edit::after{content:"";position:absolute;inset:-.95rem -.6rem}
.summary-edit:hover{border-color:currentColor}

/* ---------- final scope (summary screen) — inclusions only, never a price ---------- */
.final-scope{margin:1rem 0 2rem;padding:1.75rem 1.5rem;background:var(--coal);color:var(--ivory)}
.final-scope-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke)}
.final-scope .final-inclusions{margin-top:1rem;padding-top:0;border-top:0}
.inclusions-list{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.inclusions-list li{font-size:.92rem;padding-left:1.1rem;position:relative}
.inclusions-list li::before{content:"";position:absolute;left:0;top:.4rem;width:.5rem;height:.55rem;background:var(--crimson);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.inclusions-caveats{margin-top:.9rem;font-size:.82rem;color:var(--smoke);font-style:italic}

/* ---------- estimated price (Phase 10D) — one light module between the scope box and the consent block ----------
   Same surface as the page (IVORY), same label voice as the summary, one CRIMSON element (the band). The band is an
   endpoint-to-endpoint graphic of the calculated range only: no market scale, no position, nothing to drag. */
.estimator-price{margin:1.75rem 0 .5rem;padding-top:.25rem;min-height:12rem}
.estimator-price[hidden]{display:none}
.estimator-price-eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.estimator-price-title{margin-top:.4rem;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;line-height:1.2;text-wrap:balance}
.estimator-price-amount{margin-top:.85rem;font-weight:800;font-size:clamp(1.75rem,7.2vw,2.5rem);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--night)}
.estimator-price.is-custom{min-height:0}
.estimator-price.is-custom .estimator-price-amount{font-size:clamp(1.4rem,5.5vw,1.9rem)}
.estimator-price-band{margin-top:1.15rem}
.estimator-price-bar{display:block;height:.5rem;background:var(--crimson);clip-path:polygon(.4rem 0,100% 0,calc(100% - .4rem) 100%,0 100%)}
.estimator-price-ends{display:flex;justify-content:space-between;gap:1rem;margin-top:.6rem;font-size:.8rem;color:var(--ash);font-variant-numeric:tabular-nums}
.estimator-price-secondary{margin-top:.9rem;font-size:.9rem;color:var(--night)}
.estimator-price-note{margin-top:.9rem;max-width:46ch;font-size:.88rem;line-height:1.5;color:var(--ash);text-wrap:pretty}

/* ---------- step position, validation, insufficient data (Phase 10D.1) ---------- */
/* the progress indicator is what estimator.js scrolls to after a step change; the offset is the sticky header */
.estimator-progress{scroll-margin-top:calc(var(--header-h) + 16px)}
/* a short question must not let the footer take over the screen */
#estimatorForm{min-height:calc(100vh - var(--header-h) - 7rem)}
@supports (height:100svh){ #estimatorForm{min-height:calc(100svh - var(--header-h) - 7rem)} }
.q:focus{outline:none}
.q:focus-visible{outline:2px solid var(--scene-focus);outline-offset:4px}
/* an unanswered question: the message is text with a bar, never colour alone */
.q .field-error{margin-top:1rem;padding-left:.65rem;border-left:2px solid var(--crimson);font-weight:500}
.estimator-price.is-insufficient .estimator-price-amount{font-size:clamp(1.1rem,4.4vw,1.4rem);line-height:1.3;font-weight:700;letter-spacing:-.01em;max-width:30ch}

/* ---------- step nav ---------- */
.estimator-nav{margin-top:2.5rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.estimator-nav-back{font-size:.9rem;color:var(--ash);border-bottom:1px solid transparent;padding:.5rem 0;transition:color .18s ease,border-color .18s ease}
.estimator-nav-back{position:relative}
.estimator-nav-back::after{content:"";position:absolute;inset:-.5rem -.6rem}
.estimator-nav-back:hover{color:var(--night);border-color:currentColor}
.estimator-nav-next[disabled]{pointer-events:none}

@media (max-width:26.9rem){
  .estimator-nav{flex-direction:column-reverse;align-items:stretch}
  .estimator-nav-next{width:100%}
  .estimator-nav-back{text-align:center}
}

/* ---------- confirmation ---------- */
.estimator-confirmation{padding:7rem 0;display:flex;align-items:center;justify-content:center;text-align:center}
.estimator-confirmation-inner{max-width:32rem;padding:0 var(--edge)}
.confirmation-mark{display:inline-block;width:2.5rem;color:var(--crimson);margin-bottom:1.5rem}
.estimator-confirmation h1{font-weight:800;font-size:clamp(1.9rem,5vw,2.6rem);letter-spacing:-.02em}
.estimator-confirmation p{margin-top:1rem;color:var(--ash);font-size:1.02rem}
.estimator-confirmation .confirmation-scope{font-size:.85rem;letter-spacing:.02em;text-transform:uppercase;color:var(--ash);margin-top:.5rem}
.confirmation-inclusions{margin:1.5rem 0;padding:1.5rem;background:var(--coal);color:var(--ivory);text-align:left}
.estimator-confirmation .confirmation-inclusions-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--smoke);margin-top:0}
.confirmation-inclusions .inclusions-list{margin-top:.9rem}
.confirmation-link{display:inline-block;margin-top:2rem;font-size:.92rem;border-bottom:1px solid var(--night);padding-bottom:.1rem;transition:border-color .18s ease,color .18s ease}
.confirmation-link:hover{color:var(--crimson);border-color:currentColor}

@media (min-width:56rem){
  .estimator{padding:6.5rem 0 7.5rem}
  .estimator-inner{max-width:44rem}
}
}