/* ==========================================================================
   PIPER MOSS - estimator tool skin
   Loaded last on /bathroom-estimator, /extensions-estimator, /deck-designer.
   Clean, square, green and white. Presentation only: no script, form or
   conversion markup is affected.
   ========================================================================== */

@font-face{font-family:'Gopher';src:url('/fonts/gopher-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher';src:url('/fonts/gopher-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher';src:url('/fonts/gopher-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher Text';src:url('/fonts/gophertext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gopher Text';src:url('/fonts/gophertext-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --pm-green:#33554f;
  --pm-green-mid:#3f665c;
  --pm-green-deep:#25403b;
  --pm-ink:#2c3639;
  --pm-muted:#5f6f6a;
  --pm-white:#ffffff;
  --pm-line:#c9d5d1;        /* visible hairline, reads on white */
  --pm-line-soft:#e4eae8;
  --pm-tint:#f2f6f4;        /* faintest green wash for hover only */

  --navy:#33554f; --navy-dark:#33554f; --navy-deep:#25403b;
  --navy-mid:#3f665c; --navy-light:#3f665c; --navy-line:#3f665c;
  --accent:#33554f; --accent-pale:#f2f6f4;
  --timber:#33554f; --timber-hover:#3f665c; --timber-bright:#3f665c; --timber-ink:#25403b;
  --blue-hl:#33554f;
  --ground-char:#33554f; --ground-char-2:#2f4d48;
  --ground-dark:#33554f; --ground-dark-2:#2f4d48;
  --ground-paper:#ffffff; --ground-paper-raised:#ffffff;
  --white:#ffffff; --off-white:#f2f6f4; --cream:#ffffff;
  --border:#c9d5d1; --line-paper:#c9d5d1;
  --line-timber:rgba(51,85,79,.20);
  --ink:#2c3639; --ink-head:#2c3639; --ink-muted:#5f6f6a; --text:#2c3639;
  --muted-dark:#5f6f6a;

  /* status colours, brought onto the brand */
  --warn:#8a5a2b; --warn-pale:#f7f2ea;
  --good:#33554f; --good-pale:#f2f6f4;

  --r-sm:0; --r-md:0; --r-lg:0; --r-pill:0;

  --font-display:'Gopher','Figtree',sans-serif;
  --font-body:'Gopher Text','Gopher','Figtree',sans-serif;
  --tb-display:'Gopher','Figtree',sans-serif;
  --shadow-timber:none;
}

/* square corners only. rectangles stay, curves go. */
*,*::before,*::after{border-radius:0 !important}

body{font-family:var(--font-body);background:var(--pm-white);color:var(--pm-ink)}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;color:var(--pm-ink)}

/* --------------------------------------------------------------------------
   BOXES: keep them, make them visible. Square, white, hairline.
   -------------------------------------------------------------------------- */
.step,.card,.panel,.tile,fieldset,.addon-grid > *,.summary{
  background:var(--pm-white);
  border:1px solid var(--pm-line);
  box-shadow:none !important;
}
.step{padding:clamp(18px,3.5vw,26px);margin-bottom:1rem}
.step-num{background:var(--pm-green) !important;color:#fff !important;font-family:var(--font-display)}
.step-title{font-family:var(--font-display);font-weight:500;color:var(--pm-ink)}
.step-help,.opt-meta,.addon-meta,.slider-hint{color:var(--pm-muted)}

/* --------------------------------------------------------------------------
   SELECTABLE OPTIONS
   Idle: white box, hairline border.
   Hover: green border, faint wash.
   Selected: solid green, everything inside white. No exceptions.
   -------------------------------------------------------------------------- */
.opt,.addon{
  background:var(--pm-white);
  border:1px solid var(--pm-line);
  color:var(--pm-ink);
  box-shadow:none !important;
  transition:border-color .15s,background .15s,color .15s;
}
.opt:hover,.addon:hover{border-color:var(--pm-green);background:var(--pm-tint)}

.opt.active,
.opt[aria-checked="true"]{
  background:var(--pm-green) !important;
  border-color:var(--pm-green) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}
.opt.active *,
.opt[aria-checked="true"] *{color:#ffffff !important;opacity:1 !important}
.opt.active .opt-meta,
.opt[aria-checked="true"] .opt-meta{color:rgba(255,255,255,.78) !important}
.opt.active .opt-price,
.opt[aria-checked="true"] .opt-price{color:#ffffff !important}

/* add-on tiles stay white so the tick carries the state */
.addon.active,
.addon[aria-checked="true"]{
  background:var(--pm-white) !important;
  border-color:var(--pm-green) !important;
  color:var(--pm-ink) !important;
  box-shadow:inset 0 0 0 1px var(--pm-green) !important;
}
.addon.active .addon-label,.addon.active .addon-price{color:var(--pm-green-deep) !important}
.addon.active .addon-meta{color:var(--pm-muted) !important}
.addon-check{border:2px solid var(--pm-line) !important;background:var(--pm-white)}
.addon.active .addon-check{background:var(--pm-green) !important;border-color:var(--pm-green) !important}
.addon input{accent-color:var(--pm-green)}

/* --------------------------------------------------------------------------
   RESULT PANEL: flat green, white type
   -------------------------------------------------------------------------- */
.result{background:var(--pm-green) !important;color:#fff;border:0;box-shadow:none !important}
.result-eyebrow,.result-label{color:rgba(255,255,255,.65) !important;font-family:var(--font-display)}
.result-price{font-family:var(--font-display);font-weight:500;color:#fff}
.result-price .dim{color:rgba(255,255,255,.55) !important}
.result-meta,.result-disclaimer{color:rgba(255,255,255,.75) !important}
.result-disclaimer strong{color:#fff !important}
.result-confidence{background:rgba(255,255,255,.16) !important;color:#fff !important;font-family:var(--font-display)}

/* --------------------------------------------------------------------------
   CONTROLS
   -------------------------------------------------------------------------- */
button,.btn,.btn-timber,input[type="submit"],a.cta,.cta-primary{
  font-family:var(--font-display);box-shadow:none !important}
.btn-timber,.cta-primary,button.primary,.btn-primary{
  background:var(--pm-green) !important;border:1px solid var(--pm-green) !important;color:#fff !important}
.btn-timber:hover,.cta-primary:hover,button.primary:hover,.btn-primary:hover{
  background:var(--pm-green-mid) !important;border-color:var(--pm-green-mid) !important;transform:none !important}

input,select,textarea{
  background:var(--pm-white);border:1px solid var(--pm-line);color:var(--pm-ink);box-shadow:none !important}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pm-green) !important}

.slider{background:linear-gradient(to right,var(--pm-green) var(--p,30%),var(--pm-line-soft) var(--p,30%)) !important;height:6px}
.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--pm-green);border:2px solid #fff;cursor:pointer}
.slider::-moz-range-thumb{width:20px;height:20px;background:var(--pm-green);border:2px solid #fff;cursor:pointer}
.slider-val{font-family:var(--font-display);color:var(--pm-green-deep)}

/* --------------------------------------------------------------------------
   NOTICES: on-brand, not traffic-light
   -------------------------------------------------------------------------- */
.warn-banner{background:var(--warn-pale) !important;border:1px solid #ddc9ab !important;color:#6a4a20 !important}
.warn-banner svg{color:#8a5a2b !important}
.good,.badge-good{background:var(--good-pale) !important;color:var(--pm-green-deep) !important;border:1px solid var(--pm-line) !important}

/* warm tint panels left over from the old palette */
.wp,.wp-tier{background:var(--pm-tint) !important;border:1px solid var(--pm-line) !important;color:var(--pm-ink) !important}

/* focus ring on brand */
*:focus-visible{outline:2px solid var(--pm-green) !important;outline-offset:2px}

/* validation: signalled by weight and border, not by a new hue */
.modal-error,.field-error,.error-text{
  color:var(--pm-green-deep) !important;font-weight:600 !important}
.modal-field input.is-invalid,input.is-invalid,.is-invalid{
  border-color:var(--pm-green-deep) !important;border-width:2px !important;box-shadow:none !important}

/* ==========================================================================
   ESTIMATE GATE
   White card, green rule, green button. No dark scrim, no padlock, no glow.
   ========================================================================== */
.gate,.lock-overlay{
  background:var(--pm-white) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border:1px solid var(--pm-line) !important;
  border-top:3px solid var(--pm-green) !important;
  box-shadow:none !important;
  color:var(--pm-ink) !important;
  text-align:left !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:.5rem !important;
  padding:clamp(16px,2.4vw,22px) !important;
}
.gate-icon,.lock-icon{display:none !important}

.gate-title,.lock-overlay h3{
  font-family:var(--font-display) !important;font-weight:500 !important;
  font-size:1.05rem !important;color:var(--pm-ink) !important;letter-spacing:-.01em !important}
.gate-sub,.lock-overlay p{
  font-size:.86rem !important;color:var(--pm-muted) !important;max-width:34ch !important;margin:0 !important}
.gate-foot{font-size:.7rem !important;color:var(--pm-muted) !important;letter-spacing:.04em}

.gate-btn,.lock-cta{
  font-family:var(--font-display) !important;font-weight:500 !important;
  background:var(--pm-green) !important;color:#ffffff !important;
  border:1px solid var(--pm-green) !important;
  padding:.8rem 1.4rem !important;margin-top:.4rem !important;
  box-shadow:none !important;transform:none !important}
.gate-btn:hover,.lock-cta:hover{
  background:var(--pm-green-mid) !important;border-color:var(--pm-green-mid) !important;
  transform:none !important;box-shadow:none !important}

/* the blurred figure behind the gate reads as noise. hide it instead. */
.result.is-locked .result-price,
.result.is-locked .result-meta,
.result.is-locked .breakdown{visibility:hidden !important;filter:none !important}

/* ==========================================================================
   WATERPROOFING SECTION: neutral, no warm tints
   ========================================================================== */
.wp,.wp-tier,.wp-head,.wp-intro,.wp-note{
  background:var(--pm-white) !important;border-color:var(--pm-line) !important;color:var(--pm-ink) !important}
.wp{border:1px solid var(--pm-line) !important}
.wp-tier{border:1px solid var(--pm-line) !important}
.wp-tier-name,.wp-tier-price{color:var(--pm-green-deep) !important}
.wp h2,.wp h3{color:var(--pm-ink) !important}
.wp-intro,.wp-note,.wp small{color:var(--pm-muted) !important}

/* breakdown bar segments: green tonal scale, not a rainbow */
.bd-seg:nth-child(1),.bd-dot:nth-child(1){background:#25403b !important}
.bd-seg:nth-child(2),.bd-dot:nth-child(2){background:#33554f !important}
.bd-seg:nth-child(3),.bd-dot:nth-child(3){background:#3f665c !important}
.bd-seg:nth-child(4),.bd-dot:nth-child(4){background:#4d786d !important}
.bd-seg:nth-child(5),.bd-dot:nth-child(5){background:#6b9188 !important}
.bd-seg:nth-child(6),.bd-dot:nth-child(6){background:#93b0a8 !important}

/* Standing caveat pinned under every headline figure. Opacity rather than a
   fixed colour so it reads on both the dark result panels and the light ones. */
.tool-caveat{font-size:.78rem;line-height:1.45;font-weight:400;opacity:.72;margin:.55rem 0 0}