/* walkthrough-form.css
   ---------------------------------------------------------------------------
   THE COMMERCIAL WALKTHROUGH REQUEST (Zach, 2026-11-13).

   walkthrough-form.js draws one form in two places, out of classes each page
   already owns (.field, .row2, .addr-field from koda-chrome.css; .chip, .step,
   .nav-row, .btn from home.css). This file is only what neither page had:

     1. THE HOME CARD   the My Home / My Business switch above step one, and
                        the chip columns of the business form.
     2. THE COMMERCIAL  the card the form sits in on /commercial-cleaning, its
        PAGE            two-step rail, the home card's chips restated, and the
                        three-step strip under the hero.

   Everything is a token the site already defines. No new colours.
   =========================================================================== */

.wt-form [hidden]{ display: none !important; }
.wt-err{ font-size: 14.5px; font-weight: 600; color: #c8382c; margin: 12px 0 0; }
.wt-form .field input.bad, .wt-form .field textarea.bad{ border-color: #c8382c; }

/* ── 1. THE HOME CARD ───────────────────────────────────────────────────────
   The switch is a track with two halves, the selected one raised onto paper:
   the same object as the tabs in the sign-in drawer (koda-chrome.css). It sits
   in the card but outside the body, so the home form's panes keep their
   positions (home.js, MY HOME / MY BUSINESS). */
body.koda-page-home .book-switch{
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 18px 26px 0; padding: 4px;
  background: var(--page-deep); border: 1.5px solid var(--rule-firm);
  border-radius: var(--radius-sm); box-shadow: var(--press);
}
body.koda-page-home .book-switch[hidden]{ display: none; }
body.koda-page-home .book-switch button{
  font: 700 14.5px/1.2 var(--font-body); letter-spacing: .02em; color: var(--text);
  background: transparent; border: 1.5px solid transparent;
  border-radius: calc(var(--radius-sm) - 1px);
  padding: 11px 10px; min-height: 44px; cursor: pointer;
}
body.koda-page-home .book-switch button.on{
  background: var(--paper); border-color: var(--steel); color: var(--ink);
  box-shadow: var(--lift-2), inset 0 1px 0 #fff;
}
body.koda-page-home .book-switch button:focus-visible{ outline: 3px solid var(--steel); outline-offset: 2px; }
body.koda-page-home .book-body[hidden]{ display: none; }

/* Short answers in even columns: three across, two on a phone. The home
   form's own chips are full sentences and take 196px each; these are a word. */
body.koda-page-home .wt-form .chips.wt-chips{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.koda-page-home .wt-form .chips.wt-chips > .chip:last-child:nth-child(odd){ grid-column: auto; }
body.koda-page-home .wt-form .blk-head{ margin: 16px 0 8px; }
body.koda-page-home .wt-form .wt-note{ margin-top: 18px; }
body.koda-page-home .wt-form .wt-left{ text-align: left; }
@media (max-width: 560px){
  body.koda-page-home .book-switch{ margin: 14px 18px 0; }
  body.koda-page-home .wt-form .chips.wt-chips{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── 2. THE COMMERCIAL PAGE ─────────────────────────────────────────────────
   The card takes the photograph's place beside the headline, so the form is
   the first thing on the page a business can act on. */
body.koda-page-commercial .cw-card{
  background: #fff; border: 1px solid var(--koda-rule); border-top: 3px solid var(--koda-burgundy);
  border-radius: var(--radius-card); box-shadow: 0 18px 44px rgba(22,32,46,.12);
  padding: 28px; text-align: left; scroll-margin-top: 110px; min-width: 0;
}
body.koda-page-commercial .cw-card[hidden],
body.koda-page-commercial .cw-how[hidden]{ display: none; }
body.koda-page-commercial .cw-card .cw-title{
  font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--koda-night); margin: 0;
}
body.koda-page-commercial .cw-card .cw-sub{ font-size: 15px; color: rgba(30,37,48,.7); margin: 6px 0 0; }
body.koda-page-commercial .cw-steps{ list-style: none; display: flex; gap: 8px; margin: 18px 0 20px; padding: 0; }
body.koda-page-commercial .cw-steps[hidden]{ display: none; }
body.koda-page-commercial .cw-steps li{
  flex: 1; font: 600 12px/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(30,37,48,.5); border-top: 3px solid var(--koda-rule); padding-top: 8px;
}
body.koda-page-commercial .cw-steps li.on{ color: var(--koda-night); border-top-color: var(--koda-gilt); }
body.koda-page-commercial .cw-steps li.done{ color: var(--koda-slate-ink); border-top-color: var(--koda-slate); }

body.koda-page-commercial .wt-form .step-title{
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--koda-night); margin: 0 0 4px;
}
body.koda-page-commercial .wt-form .step-hint{ font-size: 15px; color: rgba(30,37,48,.7); margin: 0 0 16px; line-height: 1.45; }
body.koda-page-commercial .wt-form .blk-head{
  font: 600 12px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--koda-night); margin: 16px 0 8px;
}
body.koda-page-commercial .wt-form .row2-zip{ grid-template-columns: 1.6fr 1fr; }
/* THE SAME CHIPS AS THE HOME CARD (Zach, 2026-11-13: "make the chips match on
   both pages"). This page does not load home.css, so the home card's chip is
   restated here value for value (home.css, body.koda-page-home .chip): white,
   ringed, raised, a square tick, a steel wash when chosen. Change one, change
   the other; test/public-walkthrough.test.js compares the two. */
body.koda-page-commercial .wt-form .chips{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px; align-items: stretch;
}
body.koda-page-commercial .wt-form .chip{
  position: relative; display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--rule-firm);
  border-radius: var(--radius-sm); padding: 10px 13px; min-height: 44px; cursor: pointer;
  box-shadow: var(--lift-1), inset 0 1px 0 #fff;
  line-height: 1.3;
  transition: background .16s, border-color .16s, box-shadow .16s;
}
body.koda-page-commercial .wt-form .chip input{ position: absolute; opacity: 0; pointer-events: none; }
body.koda-page-commercial .wt-form .chip:hover{ border-color: var(--steel); box-shadow: var(--lift-2), inset 0 1px 0 #fff; }
body.koda-page-commercial .wt-form .chip:has(input:checked){
  background: linear-gradient(180deg, #fff, var(--steel-soft));
  border-color: var(--steel);
  box-shadow: var(--lift-2), inset 0 1px 0 #fff;
}
body.koda-page-commercial .wt-form .chip .tick{
  width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
  border: 1.5px solid var(--rule-firm); background: var(--page-deep);
  box-shadow: var(--press);
  display: grid; place-items: center;
  transition: background .16s, border-color .16s;
}
body.koda-page-commercial .wt-form .chip:has(input:checked) .tick{ background: var(--steel); border-color: var(--steel-deep); box-shadow: none; }
body.koda-page-commercial .wt-form .chip .tick svg{ opacity: 0; transition: opacity .18s; }
body.koda-page-commercial .wt-form .chip:has(input:checked) .tick svg{ opacity: 1; }
body.koda-page-commercial .wt-form .chip:focus-within{ outline: 3px solid var(--steel); outline-offset: 2px; }
body.koda-page-commercial .wt-form .wt-note{ margin-top: 18px; }
body.koda-page-commercial .wt-form .nav-row{
  display: flex; gap: 10px; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 18px;
}
body.koda-page-commercial .wt-form .nav-row-solo{ justify-content: flex-end; }
body.koda-page-commercial .wt-form .nav-row button{ cursor: pointer; font-family: var(--font-body); }
body.koda-page-commercial .wt-form .fineprint{ font-size: 14px; color: rgba(30,37,48,.6); margin: 12px 0 0; }
body.koda-page-commercial .wt-form .wt-done .step-hint{ font-size: 17px; color: var(--koda-ink); }

/* The three-step strip under the hero: what happens after the form.

   WHILE IT IS HIDDEN THE PAGE IS MAIN'S PAGE. koda-theme.css tightens the
   service-area strip only when it sits directly under the lede
   (.ks-lede + .ks-area, 56px). This section is now the element between them,
   hidden or not, so that rule stopped matching and the strip went back to
   72px with the switch off. While the section is hidden the strip gets the
   same 56px back; once it shows, the strip is no longer under the lede and
   takes the sheet's ordinary padding. */
body.koda-page-commercial .ks-lede + .cw-how[hidden] + .ks-area{ padding: 56px 0; }
body.koda-page-commercial .cw-how{ padding: 72px 0; background: #fff; border-top: 1px solid var(--koda-rule); }
body.koda-page-commercial .cw-how h2{
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 3.2vw, 34px); margin: 0 0 28px;
}
body.koda-page-commercial .cw-how-list{
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: cw;
}
body.koda-page-commercial .cw-how-list li{ counter-increment: cw; border-top: 3px solid var(--koda-night-3); padding-top: 16px; }
body.koda-page-commercial .cw-how-list li::before{
  content: counter(cw); font: 800 34px/1 var(--font-display); color: var(--koda-gilt); display: block; margin-bottom: 10px;
}
body.koda-page-commercial .cw-how-list h3{
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--koda-night); margin: 0 0 6px;
}
body.koda-page-commercial .cw-how-list p{ color: rgba(30,37,48,.72); margin: 0; }

@media (min-width: 901px){
  body.koda-page-commercial.cw-on .ks-lede .section-content{ align-items: start; }
}
@media (max-width: 900px){
  body.koda-page-commercial .cw-how-list{ grid-template-columns: 1fr; }
  body.koda-page-commercial .cw-card{ margin-top: 30px; }
}
@media (max-width: 560px){
  body.koda-page-commercial .wt-form .chips{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 440px){
  body.koda-page-commercial .cw-card{ padding: 20px 16px; }
}