/* =============================================================================
   THE PLOW KING OF MASSACHUSETTS
   -----------------------------------------------------------------------------
   CONTRAST NOTE, because this exact bug has been introduced three times on this
   project: every color below is measured against the ground it is actually
   used on, not eyeballed.

     ink   #0B1F35 on snow #F9FCFF ....... 16.2:1
     muted #4A5C72 on snow ..............   6.7:1
     snow  #F9FCFF on ink ...............  16.2:1
     mist  #A9BDD4 on ink ...............   8.7:1
     white on red #D31C2C ...............   5.3:1  (button ground: passes AA)
     ice   #66C7F4 on ink ...............   8.8:1
     ice   #66C7F4 on white .............   1.9:1  <-- FAILS. DARK GROUND ONLY.
     iceD  #0E6E96 on snow ..............   5.7:1  (the light-ground substitute)

   So: --ice is only ever painted on navy, --ice-d only ever on white/snow.
   Red is a BUTTON GROUND and a large-display accent — 3.2:1 on navy means it
   must never carry body copy there.
   ============================================================================ */

:root {
  --ink:    #0B1F35;
  --ink-2:  #12304F;
  --snow:   #F9FCFF;
  --paper:  #FFFFFF;
  --fog:    #EDF3F9;
  --line:   #D7E2EC;
  --muted:  #4A5C72;
  --mist:   #A9BDD4;
  --ice:    #66C7F4;
  --ice-d:  #0E6E96;
  --red:    #D31C2C;
  --red-d:  #A9101E;
  --gold:   #E8B647;

  --disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --r: 14px;
  --sh: 0 2px 4px rgba(11,31,53,.05), 0 10px 28px rgba(11,31,53,.09);
  --tab-h: 62px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--snow);
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--ink); color: var(--snow); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

:focus-visible { outline: 3px solid var(--ice-d); outline-offset: 2px; border-radius: 4px; }

/* ---- masthead ------------------------------------------------------------ */
.pk-mast {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px;
  background: var(--ink);
  border-bottom: 3px solid var(--red);
}
.pk-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.pk-lockup img { width: 52px; height: auto; flex: none; }
.pk-lockup b {
  display: block; font-family: var(--disp); font-weight: 800; font-size: 23px;
  letter-spacing: .02em; line-height: 1.05; color: var(--snow); text-transform: uppercase;
}
.pk-lockup small {
  display: block; font-size: 10.5px; letter-spacing: .10em; text-transform: uppercase;
  color: var(--mist); font-weight: 600;
}
/* Under 360px the burger, the lockup and the Call button are all competing for
   one row and 23px display caps do not fit — "THE PLOW KING" wants 124px in a
   111px box, and the last two letters were being clipped off the King. The name
   shrinks and the strapline steps out; the brand still reads, which is the only
   job the header has at this width. */
@media (max-width: 359px) {
  .pk-mast { padding: 8px 10px; gap: 8px; }
  .pk-lockup { gap: 8px; }
  .pk-lockup img { width: 42px; }
  .pk-lockup b { font-size: 18.5px; }
  .pk-lockup small { display: none; }
}
.pk-call {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  background: var(--red); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 700; padding: 9px 13px; border-radius: 999px;
  white-space: nowrap;
}
.pk-call:hover { background: var(--red-d); }

/* ---- app shell ----------------------------------------------------------- */
.pk-i { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round;
        stroke-linejoin: round; flex: none; }

.pk-burger {
  display: grid; gap: 4px; place-content: center; flex: none;
  width: 40px; height: 40px; padding: 0 9px; margin-right: -2px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20);
  border-radius: 10px; cursor: pointer;
}
.pk-burger span { display: block; width: 18px; height: 2px; background: var(--snow); border-radius: 2px; }
.pk-mastview {
  display: none; font-family: var(--disp); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: var(--mist); margin-left: 4px;
}

.pk-shell { position: relative; }
.pk-side {
  position: fixed; z-index: 48; top: 0; bottom: 0; left: 0; width: 272px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--ink); color: var(--snow);
  padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-100%); transition: transform .22s ease;
  overflow-y: auto; overscroll-behavior: contain;
}
body.nav-open .pk-side { transform: none; }
.pk-scrim {
  position: fixed; inset: 0; z-index: 47; background: rgba(11,31,53,.55);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
body.nav-open .pk-scrim { opacity: 1; pointer-events: auto; }

.pk-sidehd { display: flex; justify-content: flex-end; min-height: 4px; }
.pk-collapse {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  color: var(--mist);
}
.pk-collapse:hover { background: rgba(255,255,255,.16); color: var(--snow); }
.pk-collapse svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
                   stroke-linejoin: round; }

.pk-who {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 10px 12px; margin: 4px 0 10px;
}
.pk-who b { display: block; font-size: 14.5px; color: var(--snow); }
.pk-who small { display: block; font-size: 12px; color: var(--mist); }
.pk-who.ops { border-left: 3px solid var(--red); }

.pk-navs { display: grid; gap: 2px; }
.pk-nav {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 10px; cursor: pointer;
  color: var(--mist); font-size: 14.5px; font-weight: 600; padding: 10px 11px;
  text-decoration: none;
}
.pk-nav:hover { background: rgba(255,255,255,.08); color: var(--snow); }
.pk-nav.on { background: rgba(255,255,255,.13); color: var(--snow); box-shadow: inset 3px 0 0 var(--red); }
.pk-nav > span { flex: 1; min-width: 0; }
.pk-nav .pk-count {
  flex: none; font-style: normal; font-size: 11px; font-weight: 800; line-height: 1;
  background: var(--red); color: #fff; border-radius: 999px; padding: 4px 7px;
}
.pk-ext { flex: none; opacity: .55; fill: none; stroke: currentColor; stroke-width: 1.8;
          stroke-linecap: round; stroke-linejoin: round; }
.pk-caret { flex: none; fill: none; stroke: currentColor; stroke-width: 2;
            stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.pk-subnav { display: none; margin: 2px 0 4px 30px; padding-left: 10px;
             border-left: 1px solid rgba(255,255,255,.18); }
.pk-subnav.open { display: block; }
.pk-subitem { font-size: 13.5px; font-weight: 500; padding: 7px 10px; }
.pk-sidefoot { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.pk-nav.pk-danger:hover { background: rgba(211,28,44,.22); color: #fff; }

/* ---- layout -------------------------------------------------------------- */
main { max-width: 660px; margin: 0 auto; padding: 18px 16px 40px; }
section { margin: 0 0 30px; }
.pk-h1 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 8vw, 42px); line-height: 1.02; letter-spacing: .01em; margin: 0 0 8px;
}
.pk-h2 {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase;
  font-size: 22px; letter-spacing: .04em; margin: 0 0 10px;
}
.pk-lede { font-size: 16.5px; color: var(--muted); margin: 0 0 18px; }
.pk-lede b { color: var(--ink); }
.pk-note { font-size: 14.5px; color: var(--muted); margin: 0 0 14px; }
.pk-fine { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin: 12px 0 0; }

/* ---- hero ---------------------------------------------------------------- */
.pk-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 340px at 78% -8%, rgba(102,199,244,.20), transparent 62%),
    linear-gradient(168deg, var(--ink-2) 0%, var(--ink) 62%);
  border-radius: 20px; padding: 22px 20px 26px; text-align: center;
  box-shadow: var(--sh);
}
/* falling snow, drawn once as a repeating background rather than 40 DOM nodes */
.pk-hero::before {
  content: ''; position: absolute; inset: -20% -10% -10%;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(2px 2px at 68% 8%,  rgba(255,255,255,.42), transparent),
    radial-gradient(1.6px 1.6px at 34% 62%, rgba(255,255,255,.36), transparent),
    radial-gradient(2.2px 2.2px at 88% 44%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.6px 1.6px at 52% 88%, rgba(255,255,255,.30), transparent),
    radial-gradient(2px 2px at 22% 78%, rgba(255,255,255,.38), transparent);
  background-size: 260px 260px; pointer-events: none;
  animation: drift 26s linear infinite;
}
@keyframes drift { to { transform: translate3d(-40px, 260px, 0); } }
@media (prefers-reduced-motion: reduce) { .pk-hero::before { animation: none; } }
.pk-hero > * { position: relative; }
/* NOTE: this is the hero LOGO, not the unread count. An earlier revision called
   the sidebar's unread pill `.pk-badge` too, and it inherited `width: min(280px,
   76%); display: block` and stretched into a red bar across the nav row. Same
   family as the `.cta-mascot` collision on the last build — one name, two
   unrelated things, and the CSS has no way to know. The count is `.pk-count`. */
.pk-hero .pk-badge { width: min(280px, 76%); margin: 0 auto 4px; display: block; }
.pk-hero h1 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 10vw, 52px); line-height: .96; letter-spacing: .01em;
  margin: 6px 0 12px; color: var(--snow);
}
.pk-hero h1 em { font-style: normal; color: var(--ice); }
.pk-hero .pk-lede { color: var(--mist); font-size: 16px; }
.pk-hero .pk-lede b { color: var(--snow); }

.pk-promises { display: grid; gap: 10px; margin: 18px 0 20px; text-align: left; }
.pk-promises > div {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 13px 14px 14px 46px; position: relative;
}
.pk-num {
  position: absolute; left: 12px; top: 13px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff;
  font-size: 13px; font-weight: 800; display: grid; place-items: center;
}
.pk-promises b { display: block; color: var(--snow); font-size: 15.5px; }
.pk-promises small { display: block; color: var(--mist); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }

/* ---- buttons ------------------------------------------------------------- */
.pk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; border: 0; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; padding: 13px 24px; cursor: pointer;
  box-shadow: 0 4px 0 var(--red-d);
  transition: transform .08s ease, background .15s ease;
}
.pk-btn:hover { background: var(--red-d); box-shadow: 0 4px 0 #7C0A15; }
.pk-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--red-d); }
.pk-btn.pk-lg { font-size: 17px; padding: 15px 30px; }
.pk-btn.pk-sm { font-size: 13.5px; padding: 9px 16px; box-shadow: 0 3px 0 var(--red-d); }
.pk-btn.pk-block { display: flex; width: 100%; margin-top: 16px; }
.pk-back {
  background: none; border: 0; color: var(--ice-d); font-weight: 700; font-size: 14.5px;
  padding: 10px 0; cursor: pointer; display: block; text-align: left;
}
.pk-back:hover { text-decoration: underline; }

/* ---- area picker --------------------------------------------------------- */
/* Six and a half rows visible: enough to show the list is longer than the box
   without eighteen buttons pushing the rest of the page below the fold. The
   half row is deliberate — a clean cut at row six reads as the end of the list. */
.pk-areas {
  display: grid; gap: 8px; align-content: start;
  max-height: 414px; overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 4px 2px 2px; margin: 0 -4px 0 -2px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.pk-areas::-webkit-scrollbar { width: 8px; }
.pk-areas::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.pk-area.gone { display: none; }
.pk-areafoot { font-size: 12.5px; color: var(--muted); padding: 9px 2px 0; }
.pk-areafoot b { color: var(--ink); }
.pk-filterf { margin-bottom: 10px; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.pk-hint { margin-left: auto; font-weight: 500; font-style: italic; }
@media (max-width: 460px) { .pk-hint { display: none; } }

.pk-area {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--ice-d);
  border-radius: 12px; padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.pk-area:hover, .pk-area.hot {
  border-color: var(--ice-d); box-shadow: var(--sh); transform: translateY(-1px);
}
.pk-area.hot { border-left-color: var(--red); background: var(--fog); }
.pk-area b { display: block; font-size: 16px; font-weight: 700; }
.pk-area i { display: block; font-size: 12.5px; color: var(--muted); font-style: italic; }
.pk-area small { display: block; font-size: 12.5px; color: var(--muted); }
.pk-n {
  flex: none; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink); background: var(--fog); border-radius: 999px; padding: 5px 10px;
}
.pk-n.on { background: var(--ink); color: var(--snow); }   /* 16.2:1 */

/* ---- map ----------------------------------------------------------------- */
.pk-mapwrap {
  position: relative; margin: 0 0 14px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh);
}
/* The map is the answer to "do you cover me", so it opens at a size you can
   actually read seven town names on. It grows with the viewport rather than
   sitting at one fixed height — 62vh on a phone is most of the screen, which is
   right, because on a phone this IS the screen. */
#map {
  height: clamp(420px, 62vh, 720px);
  width: 100%; background: var(--fog);
}
@media (min-width: 980px) { #map { height: clamp(520px, 68vh, 820px); } }
.leaflet-container { font: inherit; }
/* Leaflet's own attribution link ships at 4.42:1 on its white strip — just
   under AA. Ours is 5.7:1 and the credit still reads as a link. */
.leaflet-control-attribution a { color: var(--ice-d); }
.pk-maplegend {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  padding: 8px 10px; background: var(--paper); border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted); font-weight: 600;
}
.pk-maplegend .dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink); vertical-align: -1px; margin-right: 4px;
}
.pk-maplegend .dot.on { background: var(--red); border-color: var(--red); }
/* Pins carry their own label: a plain dot on a grey OSM tile tells you nothing
   about which village you are looking at, and reading the tile's own type is
   what made the earlier map illegible. */
.pk-pin {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; cursor: pointer; white-space: nowrap;
}
.pk-pin i {
  order: 2; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--ink); color: var(--ink);
  font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 17px; text-align: center;
  box-shadow: 0 2px 6px rgba(11,31,53,.35);
}
.pk-pin.on i { background: var(--red); border-color: #fff; color: #fff; }
.pk-pin b {
  order: 1; margin-bottom: 3px; font-size: 11px; font-weight: 800; letter-spacing: .01em;
  color: var(--ink); background: rgba(255,255,255,.93); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
/* tier 2: dot only until you point at it, so eighteen names never overlap */
.pk-pin.t2 b { display: none; }
.pk-pin.t2 i { width: 15px; height: 15px; line-height: 10px; border-width: 2px; }
.pk-pin.t2:hover { z-index: 500; }
.pk-pin.t2:hover b { display: block; }
/* label under the dot instead of over it */
.pk-pin.down { transform: translate(-50%, -22px); }
.pk-pin.down i { order: 1; }
.pk-pin.down b { order: 2; margin: 3px 0 0; }
.pk-pin:hover b { background: var(--ink); color: var(--snow); border-color: var(--ink); }

/* Town outlines sit under everything and carry a name. Past the zoom threshold
   the town name steps back and the neighborhood pins come forward — the two
   label sets share the same few hundred pixels and cannot both be legible. */
.pk-townlabel {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .10em; font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,.86); border: 1.5px solid var(--red);
  border-radius: 6px; padding: 2px 9px;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.pk-townlabel.away { opacity: .28; }
/* Neighborhood pins exist only inside the town that is open. At the seven-town
   level there is nothing on the map but seven names, which is the whole point
   of splitting it in two. */
.leaflet-marker-icon.pk-hide, .pk-pin.pk-hide { display: none; }

.pk-mapbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px;
}
.pk-backchip {
  display: inline-flex; align-items: center; cursor: pointer; flex: none;
  background: var(--ink); color: var(--snow); border: 0; border-radius: 999px;
  padding: 8px 14px; font-size: 13.5px; font-weight: 700;
}
.pk-backchip:hover { background: var(--ink-2); }
.pk-openname {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: 20px; margin-left: 4px;
}
.pk-openmeta { font-size: 13px; color: var(--muted); }

/* The finder above the map. Its dropdown rows carry a second line, so a match
   says which town it is in and how many are signed there. */
.pk-findbox { margin: 0 0 12px; }
.pk-findbox .pk-comboList { top: calc(100% + 4px); }
.pk-comboList li b { display: block; font-size: 15px; }
.pk-comboList li small { display: block; font-size: 12.5px; color: var(--muted); }
.pk-comboList li.on small { color: var(--ink); }

.pk-towns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pk-townchip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 7px 12px; font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.pk-townchip i {
  font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted);
  background: var(--fog); border-radius: 999px; padding: 2px 6px;
}
.pk-townchip:hover, .pk-townchip.hot { border-color: var(--red); background: var(--fog); }
.pk-townchip.picked { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.pk-townchip.picked i { background: rgba(255,255,255,.18); color: var(--snow); }

/* ---- share --------------------------------------------------------------- */
/* "We have your request, nothing is agreed yet." Sits above the discount meter
   because it outranks it: an unconfirmed lead reading a live discount is the
   one way this screen could mislead somebody. */
.pk-next {
  background: var(--ink); color: var(--snow); border-radius: var(--r);
  padding: 16px 16px 18px; margin: 0 0 18px;
}
.pk-nextbadge {
  display: inline-block; font-family: var(--disp); font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink);
  background: var(--ice); border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.pk-next > b { display: block; font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.pk-next > p { margin: 0 0 14px; font-size: 14.5px; color: var(--mist); line-height: 1.55; }
.pk-next .pk-steps { margin: 0 0 14px; }
.pk-next .pk-steps li {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: var(--snow);
}
.pk-next .pk-steps li::before { background: var(--red); color: #fff; border-color: transparent; }
.pk-next .pk-steps b { display: block; color: var(--snow); font-size: 14.5px; }
.pk-next .pk-steps span { display: block; color: var(--mist); font-size: 13px; margin-top: 2px; }
.pk-next .pk-fine { color: var(--mist); margin: 10px 0 0; }
.pk-next .pk-warnline {
  background: rgba(211,28,44,.22); border: 1px solid rgba(211,28,44,.5);
  border-radius: 9px; padding: 9px 11px; color: var(--snow);
}
.pk-next .pk-warnline b { color: var(--snow); }
.pk-next .pk-btn.pk-ghost {
  background: transparent; color: var(--snow); border-color: rgba(255,255,255,.34);
}

.pk-share {
  background: var(--fog); border: 1px solid var(--line); border-left: 4px solid var(--red);
  border-radius: var(--r); padding: 14px 16px 16px; margin: 0 0 20px;
}
.pk-share > b { display: block; font-size: 16.5px; margin-bottom: 4px; }
.pk-share > p { margin: 0 0 12px; font-size: 14.5px; color: var(--muted); }
.pk-sharerow { display: flex; flex-wrap: wrap; gap: 8px; }
.pk-sharerow .pk-btn { flex: 1 1 auto; min-width: 120px; text-decoration: none; }
.pk-btn.ok { background: #2E5C23; box-shadow: 0 4px 0 #1F4018; }
.pk-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--ice-d); font-weight: 700; text-decoration: underline;
}

/* ---- depth bands --------------------------------------------------------- */
.pk-bandrow { display: flex; gap: 5px; margin-top: 8px; }
.pk-bandrow i {
  font-style: normal; font-size: 11px; font-weight: 800; color: var(--muted);
  background: var(--fog); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px;
}
.pk-pick.on .pk-bandrow i { background: var(--paper); border-color: var(--ice-d); color: var(--ink); }
.pk-planblurb { color: var(--ink); }
.pk-bands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.pk-band {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px; padding: 8px 4px; text-align: center;
}
.pk-band b { display: block; font-family: var(--disp); font-weight: 800; font-size: 19px;
             color: var(--snow); }
.pk-band span { display: block; font-size: 11px; color: var(--mist); }

.pk-excl {
  background: var(--ink); border-radius: var(--r); padding: 16px 18px 18px;
}
.pk-excl .pk-h2 { color: var(--snow); }
.pk-excl .pk-note { color: var(--mist); }

.pk-why {
  background: var(--fog); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 16px 6px;
}

.pk-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--ink); border-radius: 12px; padding: 12px 14px; margin: 0 0 18px;
}
.pk-resume b { display: block; color: var(--snow); font-size: 14.5px; }
.pk-resume small { display: block; color: var(--mist); font-size: 12.5px; }

/* ---- form ---------------------------------------------------------------- */
.pk-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 16px; box-shadow: var(--sh);
}
.pk-sec {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  font-size: 15px; color: var(--ink); padding-bottom: 7px; margin: 22px 0 14px;
  border-bottom: 2px solid var(--line);
}
.pk-sec:first-child { margin-top: 0; }
.pk-f { margin: 0 0 14px; }
.pk-f label { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); margin: 0 0 5px; }
.pk-f input, .pk-f select, .pk-f textarea {
  width: 100%; padding: 12px 13px; font-size: 16px; /* 16px stops iOS zoom on focus */
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
}
.pk-f textarea { font: inherit; font-size: 16px; color: var(--ink); resize: vertical; display: block; }
.pk-f input:focus, .pk-f select:focus, .pk-f textarea:focus { border-color: var(--ice-d); outline: none; box-shadow: 0 0 0 3px rgba(14,110,150,.15); }
.pk-row2 { display: grid; gap: 0 12px; }

/* ---- combobox (replaces <datalist>) -------------------------------------- */
.pk-combo { position: relative; }
.pk-comboList {
  display: none; position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - 26px);
  margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--paper); border: 1.5px solid var(--ice-d); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(11,31,53,.18);
  max-height: 262px; overflow-y: auto; overscroll-behavior: contain;
}
.pk-comboList.on { display: block; }
.pk-comboList li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border-radius: 7px; cursor: pointer; font-size: 15px;
}
.pk-comboList li.on, .pk-comboList li:hover { background: var(--fog); }
.pk-comboList li i {
  flex: none; font-style: normal; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--fog); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 8px;
}
.pk-comboList li i.on { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.pk-comboList li.on i { background: var(--paper); }
.pk-comboList li.on i.on { background: var(--ink); }
.pk-combo .pk-help { margin: 6px 0 0; }
.pk-money { position: relative; display: flex; align-items: center; }
.pk-money > span {
  position: absolute; left: 13px; font-weight: 700; color: var(--muted); pointer-events: none;
}
.pk-money input { padding-left: 26px; padding-right: 106px; }
.pk-money em {
  position: absolute; right: 12px; font-style: normal; font-size: 12.5px; color: var(--muted);
  pointer-events: none; max-width: 96px; text-align: right; line-height: 1.2;
}

/* ---- my block ------------------------------------------------------------ */
.pk-minehd { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.pk-minehd img { flex: none; }
.pk-minehd small {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.pk-minehd .pk-h1 { font-size: clamp(26px, 7vw, 36px); margin: 0; }

.pk-quote {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px;
  background: var(--ink); border-radius: var(--r); padding: 16px 14px; margin: 0 0 16px;
}
.pk-quote > div { min-width: 0; }
.pk-quote small {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mist); margin-bottom: 2px;
}
.pk-quote b {
  display: block; font-family: var(--disp); font-weight: 800; font-size: 34px; line-height: 1;
  color: var(--snow);
}
.pk-quote span { display: block; font-size: 12.5px; color: var(--mist); line-height: 1.35; margin-top: 3px; }
/* No strike-through on "you pay now": a price match means that number is
   equalled, not canceled, and striking $700 to show $700 reads as a mistake.
   The ladder does the work — the last row is the one that is larger and ice. */
.pk-q1 b { color: var(--mist); }
.pk-q3 b { color: var(--ice); font-size: 42px; }
.pk-arrow { display: grid; place-items: center; color: var(--ice); font-size: 22px; }
/* three-up only once the discount exists; two-up before that */
.pk-quote:not(:has(.pk-q3)) { grid-template-columns: 1fr auto 1fr; }
.pk-quote:has(.pk-q3) { grid-template-columns: 1fr; gap: 14px; }
.pk-quote:has(.pk-q3) .pk-arrow { display: none; }
.pk-quote:has(.pk-q3) > div { border-top: 1px solid rgba(255,255,255,.15); padding-top: 12px; }
.pk-quote:has(.pk-q3) > div:first-child { border-top: 0; padding-top: 0; }
/* Needs .pk-quote too: the `:not(:has(.pk-q3))` rule above scores 0,3,0 and
   would otherwise force this single-child panel into a three-column grid,
   squeezing the text into a center gutter. */
.pk-quote.pk-quote-fresh { grid-template-columns: 1fr; text-align: left; }
.pk-quote.pk-quote-fresh b { font-size: 26px; }

.pk-meter { margin: 0 0 16px; }
.pk-bar {
  height: 14px; background: var(--fog); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden;
}
.pk-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ice-d), var(--ice));
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.pk-cap { font-size: 13.5px; color: var(--muted); margin-top: 7px; }
.pk-cap b { color: var(--ink); font-size: 16px; }

.pk-win { border-left: 4px solid var(--ice-d); background: var(--fog); }
.pk-card > b { display: block; font-size: 16.5px; margin-bottom: 6px; }
.pk-card > p { margin: 0; font-size: 14.5px; color: var(--muted); }
.pk-card > p b { color: var(--ink); }

/* The skip under the wizard's Next. Quiet on purpose — it is a way out for the
   people it applies to, not a competing call to action. */
.pk-wskip {
  display: block; width: 100%; margin-top: 10px; padding: 6px;
  text-align: center; font-size: 13.5px; color: var(--muted);
}
.pk-wskip:hover { color: var(--ink); }

/* Used on light cards (the owner's chat) as well as inside .pk-next, which
   overrides it for the dark ground. */
.pk-warnline {
  background: #FDECEE; border: 1px solid rgba(211,28,44,.42);
  border-radius: 9px; padding: 9px 11px; color: var(--ink);
}
.pk-warnline b { color: var(--red); }

/* ---- the finished-driveway photo ----------------------------------------- */
/* The control is a label wrapping a hidden file input, because a bare file
   input cannot be styled to a 44px target and this is tapped with gloves on. */
.pk-shot {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  font-size: 12.5px; color: var(--muted); background: var(--paper);
}
.pk-shot.has { border-color: var(--ice-d); color: var(--ink); background: var(--fog); }
.pk-shot:focus-within { outline: 3px solid var(--ice-d); outline-offset: 2px; }
.pk-shotwrap { margin: 8px 0 2px; }
.pk-shotimg {
  display: block; width: 100%; max-width: 340px; height: auto;
  border-radius: 10px; border: 1px solid var(--line);
}
.pk-shotbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin-top: 5px; font-size: 12px; color: var(--muted);
}
.pk-danger-t { color: var(--red); }

.pk-steps { list-style: none; counter-reset: s; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.pk-steps li {
  counter-increment: s; position: relative; padding: 12px 14px 12px 44px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  font-size: 14.5px; color: var(--muted);
}
.pk-steps li::before {
  content: counter(s); position: absolute; left: 12px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--snow);
  font-size: 12px; font-weight: 800; display: grid; place-items: center;
}
.pk-steps li b { color: var(--ink); }

.pk-nbs { display: grid; gap: 6px; }
.pk-nb {
  display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
.pk-nb.me { border-color: var(--ice-d); background: var(--fog); }
.pk-house {
  flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--ink); color: var(--snow);
  font-size: 12.5px; font-weight: 700; display: grid; place-items: center;
}
.pk-nb.me .pk-house { background: var(--red); }
.pk-nb b { font-size: 14.5px; }
.pk-nb small { font-size: 12.5px; color: var(--muted); margin-left: 6px; }

/* ---- tab bar + toast ----------------------------------------------------- */
.pk-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--paper); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 18px rgba(11,31,53,.08);
}
.pk-tabbar button {
  background: none; border: 0; cursor: pointer; padding: 0; height: var(--tab-h);
  font-size: 14px; font-weight: 700; color: var(--muted);
  border-top: 3px solid transparent; margin-top: -1px;
}
.pk-tabbar button.on { color: var(--ink); border-top-color: var(--red); }

.pk-toast {
  position: fixed; left: 50%; transform: translate(-50%, 20px);
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 14px); z-index: 50;
  max-width: min(420px, calc(100vw - 28px));
  background: var(--ink); color: var(--snow); border-left: 4px solid var(--ice);
  padding: 12px 16px; border-radius: 10px; font-size: 14.5px; line-height: 1.45;
  box-shadow: 0 12px 34px rgba(11,31,53,.35);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.pk-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- footer -------------------------------------------------------------- */
.pk-foot { background: var(--ink); color: var(--mist); padding: 22px 16px; margin-top: 10px; }
.pk-fwrap {
  max-width: 660px; margin: 0 auto; display: grid; gap: 6px;
  font-size: 12.5px; text-align: center;
}
.pk-credit a { color: var(--ice); }

/* ---- page furniture ------------------------------------------------------ */
.pk-pagehd { display: flex; align-items: center; justify-content: space-between; gap: 12px;
             margin: 0 0 8px; }
.pk-pagehd .pk-h1 { margin: 0; }
.pk-pill {
  flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--fog); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px;
}
.pk-pill.ok   { background: #E4F2DE; border-color: #BEDCB3; color: #2E5C23; }  /* 6.2:1 */
.pk-pill.warn { background: #FCEBD6; border-color: #F1CFA6; color: #7A4A08; }  /* 6.6:1 */
.pk-btn.pk-ghost {
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); box-shadow: none;
}
.pk-btn.pk-ghost:hover { background: var(--fog); border-color: var(--ice-d); box-shadow: none; }
.pk-actbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pk-empty { text-align: center; padding: 24px 8px; }
.pk-empty img { margin: 0 auto 10px; display: block; }
.pk-empty .pk-lede { max-width: 400px; margin: 0 auto 18px; }
.pk-help { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.pk-help a { color: var(--ice-d); }
.pk-peek {
  font-size: 13.5px; color: var(--muted); background: var(--fog); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; min-height: 0;
}
.pk-peek:empty { display: none; }
.pk-peek b { color: var(--ink); }
.pk-grid2 { display: grid; gap: 0 14px; grid-template-columns: 1fr 1fr; }
.pk-kv { margin: 0 0 12px; }
.pk-kv dt { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
            color: var(--muted); margin-bottom: 2px; }
.pk-kv dd { margin: 0; font-size: 15px; font-weight: 600; }
.pk-kv dd small { display: block; font-size: 12.5px; font-weight: 400; color: var(--muted); }

.pk-statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.pk-statrow.pk-stat4 { grid-template-columns: repeat(2, 1fr); }
.pk-stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 10px; text-align: center;
}
.pk-stat.warn { border-color: #F1CFA6; background: #FDF6EE; }
.pk-stat b { display: block; font-family: var(--disp); font-weight: 800; font-size: 26px;
             line-height: 1.05; }
.pk-stat span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pk-card.pk-alert { border-left: 4px solid var(--red); }

.pk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pk-tag {
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px;
  background: var(--fog); color: var(--muted); border: 1px solid var(--line);
}
.pk-tag.on { background: var(--ink); color: var(--snow); border-color: var(--ink); }

/* ---- wizard -------------------------------------------------------------- */
.pk-steps-bar { list-style: none; display: flex; gap: 6px; margin: 0 0 18px; padding: 0; }
.pk-steps-bar li { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0;
                   font-size: 12px; font-weight: 700; color: var(--muted); }
.pk-steps-bar i {
  flex: none; width: 22px; height: 22px; border-radius: 50%; font-style: normal;
  display: grid; place-items: center; font-size: 11.5px;
  background: var(--fog); color: var(--muted); border: 1.5px solid var(--line);
}
.pk-steps-bar li.on i { background: var(--red); color: #fff; border-color: var(--red); }
.pk-steps-bar li.on { color: var(--ink); }
.pk-steps-bar li.done i { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.pk-steps-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pk-fs { border: 0; padding: 0; margin: 0 0 20px; }
.pk-fs legend {
  font-family: var(--disp); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  font-size: 15px; color: var(--ink); padding: 0; margin-bottom: 6px;
}
.pk-picks { display: grid; gap: 7px; }
.pk-picks2 { grid-template-columns: 1fr; }
.pk-pick {
  display: block; cursor: pointer; position: relative;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 10px 12px 10px 40px;
}
.pk-pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-pick::before {
  content: ''; position: absolute; left: 13px; top: 12px; width: 17px; height: 17px;
  border-radius: 50%; border: 2px solid var(--line); background: var(--paper);
}
.pk-pick.on { border-color: var(--ice-d); background: var(--fog); }
.pk-pick.on::before { border-color: var(--red); box-shadow: inset 0 0 0 3.5px var(--red); }
.pk-pick b { display: block; font-size: 14.5px; }
.pk-pick small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.pk-pick:focus-within { outline: 3px solid var(--ice-d); outline-offset: 2px; }

/* The usual answer, marked but not chosen. Deliberately quieter than .on — a
   hint about other people must never out-shout the state of your own choice,
   or the screen reads as though it has already answered for you. */
.pk-pick.usual { border-color: var(--ice); background: var(--fog); }
.pk-pick.usual.on { border-color: var(--ice-d); }
.pk-common {
  float: right; margin-left: 8px; font-family: var(--disp); font-weight: 700;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); background: var(--ice); border-radius: 999px; padding: 2px 8px;
}

/* How they are billed TODAY. A row of three, not a fourth full-size pick list —
   it is a unit for the number above it, not another decision. */
.pk-basis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pk-bas {
  display: block; cursor: pointer; text-align: center;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 10px;
  padding: 9px 6px;
}
.pk-bas input { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-bas b { display: block; font-size: 13px; line-height: 1.25; }
.pk-bas small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.pk-bas.on { border-color: var(--red); background: var(--fog); }
.pk-bas.on b { color: var(--red); }
.pk-bas:focus-within { outline: 3px solid var(--ice-d); outline-offset: 2px; }

.pk-svcs { display: grid; gap: 7px; margin-bottom: 6px; }
.pk-svc {
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 11px; padding: 11px 12px;
}
.pk-svc input { position: absolute; opacity: 0; width: 0; height: 0; }
.pk-svcmark {
  flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 5px;
  border: 2px solid var(--line); background: var(--paper);
}
.pk-svc.on { border-color: var(--ice-d); background: var(--fog); }
.pk-svc.on .pk-svcmark {
  background: var(--red); border-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 100%;
}
.pk-svc.locked { cursor: default; opacity: .96; }
.pk-svc b { display: block; font-size: 14.5px; }
.pk-svc b em { font-style: normal; font-size: 11px; font-weight: 700; text-transform: uppercase;
               letter-spacing: .05em; color: var(--muted); }
.pk-svc small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* ---- quote card ---------------------------------------------------------- */
.pk-live { margin: 18px 0 4px; }
.pk-qcard { background: var(--ink); border-radius: var(--r); padding: 14px 16px 16px; }
.pk-qhd { display: flex; justify-content: space-between; align-items: baseline;
          border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 8px; margin-bottom: 4px; }
.pk-qhd b { font-family: var(--disp); font-weight: 800; text-transform: uppercase;
            letter-spacing: .05em; font-size: 17px; color: var(--snow); }
.pk-qhd span { font-size: 12.5px; color: var(--mist); }
.pk-qline { display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,.09); }
.pk-qline dt { font-size: 14px; color: var(--mist); }
.pk-qline dt small { display: block; font-size: 11.5px; opacity: .82; }
.pk-qline dd { margin: 0; font-size: 15px; font-weight: 700; color: var(--snow); white-space: nowrap; }
.pk-qoff dd { color: var(--ice); }
.pk-qmatch dt { color: var(--snow); }
.pk-qtot { border-bottom: 0; padding-top: 12px; }
.pk-qtot dt { font-family: var(--disp); font-weight: 700; text-transform: uppercase;
              letter-spacing: .05em; font-size: 16px; color: var(--snow); align-self: center; }
.pk-qtot dd { font-family: var(--disp); font-weight: 800; font-size: 34px; color: var(--ice);
              line-height: 1; }
.pk-qnote { font-size: 12.5px; color: var(--mist); margin: 8px 0 0; line-height: 1.5; }
.pk-qtease { border-top: 1px solid rgba(255,255,255,.14); padding-top: 8px; margin-top: 10px; }
/* A quote the app will not stand behind must not look like one. */
.pk-qreview { background: #2B1418; border: 1px solid #7C2430; }
.pk-qreview .pk-qhd b { color: #FFC9CE; }
.pk-qreview .pk-qtot dd { color: var(--mist); font-size: 26px; }
.pk-caphd { display: flex; justify-content: space-between; align-items: baseline;
            gap: 10px; margin-bottom: 8px; }
.pk-caphd b { font-size: 15.5px; }
.pk-caphd span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- history / storms ---------------------------------------------------- */
.pk-visits { display: grid; gap: 8px; }
.pk-visit { display: flex; gap: 12px; background: var(--paper); border: 1px solid var(--line);
            border-radius: 12px; padding: 12px 14px; }
.pk-vdate { flex: none; width: 88px; }
.pk-vdate b { display: block; font-size: 13.5px; }
.pk-vdate span { display: block; font-size: 12px; color: var(--muted); }
.pk-vbody { min-width: 0; flex: 1; }
.pk-vbody > b { font-size: 14.5px; }
.pk-vbody small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; }

/* ---- invoices ------------------------------------------------------------ */
.pk-invs { display: grid; gap: 10px; }
.pk-inv { background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
          padding: 12px 14px; }
.pk-invhd { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
            margin-bottom: 8px; }
.pk-invhd b { font-size: 15px; }
.pk-invhd small { display: block; font-size: 12px; color: var(--muted); }
.pk-invamt { text-align: right; flex: none; }
.pk-invamt b { display: block; font-family: var(--disp); font-weight: 800; font-size: 22px; }
.pk-invtab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pk-invtab td { padding: 6px 0; border-top: 1px solid var(--line); vertical-align: top; }
.pk-invtab td small { display: block; font-size: 11.5px; color: var(--muted); }
.pk-invtab td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-invtab tfoot td { font-weight: 800; border-top: 2px solid var(--ink); }
.pk-invacts { display: flex; gap: 8px; margin-top: 10px; }
.pk-owed {
  display: flex; align-items: center; gap: 12px; background: var(--ink); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px;
}
.pk-owed b { font-family: var(--disp); font-weight: 800; font-size: 28px; color: var(--ice); }
.pk-owed span { flex: 1; font-size: 13px; color: var(--mist); }

/* ---- chat ---------------------------------------------------------------- */
.pk-thread {
  background: var(--fog); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px; max-height: 46vh; overflow-y: auto; display: grid; gap: 12px;
  align-content: start; margin-bottom: 10px;
}
.pk-msg { display: grid; gap: 3px; max-width: 84%; }
.pk-msg.mine { justify-self: end; text-align: right; }
.pk-bub { background: var(--paper); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
          padding: 10px 13px; font-size: 14.5px; line-height: 1.5; text-align: left; }
.pk-msg.mine .pk-bub { background: var(--ink); color: var(--snow); border-color: var(--ink);
                       border-radius: 14px 14px 4px 14px; }
.pk-msg small { font-size: 11.5px; color: var(--muted); }
.pk-empty-t { margin: 0; text-align: center; }
.pk-compose { display: flex; gap: 8px; align-items: flex-end; }
.pk-compose textarea {
  flex: 1; font: inherit; font-size: 16px; padding: 11px 13px; resize: vertical;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
}
.pk-compose textarea:focus { border-color: var(--ice-d); outline: none;
                             box-shadow: 0 0 0 3px rgba(14,110,150,.15); }

/* ---- services cards ------------------------------------------------------ */
.pk-svcards { display: grid; gap: 12px; }
.pk-svcard { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--line);
             border-radius: 12px; padding: 14px 16px; }
.pk-svcard.on { border-left-color: var(--red); }
.pk-svchd { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pk-svcard h3 { font-family: var(--disp); font-weight: 800; text-transform: uppercase;
                letter-spacing: .03em; font-size: 21px; margin: 0 0 2px; }
.pk-svcard .pk-lede { font-size: 15px; margin: 4px 0 8px; }
.pk-svcprice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
               background: var(--fog); border-radius: 10px; padding: 10px 12px; margin: 10px 0 12px; }
.pk-svcprice b { font-family: var(--disp); font-weight: 800; font-size: 22px; }
.pk-svcprice span { font-size: 12.5px; color: var(--muted); margin-right: 8px; }

/* ---- contact ------------------------------------------------------------- */
.pk-contact { display: grid; gap: 8px; margin-bottom: 14px; }
.pk-ccard {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--ice-d);
  border-radius: 12px; padding: 12px 14px;
}
.pk-ccard:hover { box-shadow: var(--sh); }
.pk-ccard b { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
              text-transform: uppercase; color: var(--muted); }
.pk-ccard span { display: block; font-size: 17px; font-weight: 700; color: var(--ink); }
.pk-ccard small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---- operator: storm log ------------------------------------------------- */
.pk-stormbar { display: flex; justify-content: space-between; align-items: center; gap: 12px;
               background: var(--ink); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.pk-stormbar b { display: block; color: var(--snow); font-size: 15px; }
.pk-stormbar small { display: block; color: var(--mist); font-size: 12.5px; }
.pk-progress { font-size: 13px; color: var(--mist); white-space: nowrap; }
.pk-progress b { display: inline; font-family: var(--disp); font-size: 24px; color: var(--ice); }

.pk-route { margin: 0 0 16px; }
.pk-routehd { display: flex; justify-content: space-between; align-items: center; gap: 10px;
              padding: 0 2px 8px; }
.pk-routehd b { font-size: 16px; }
.pk-routehd small { display: block; font-size: 12.5px; color: var(--muted); }
.pk-houses { display: grid; gap: 6px; }
.pk-hrow { background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
           overflow: hidden; }
.pk-hrow.done { border-color: #BEDCB3; background: #F2F9EF; }
/* Big target: this is tapped with gloves on, in the dark. */
.pk-htap {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; padding: 13px 14px; min-height: 58px;
}
.pk-tick {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--paper); color: #2E5C23;
  font-size: 17px; font-weight: 800;
}
.pk-hrow.done .pk-tick { background: #2E5C23; border-color: #2E5C23; color: #fff; }
.pk-htap b { display: block; font-size: 15px; }
.pk-htap small { display: block; font-size: 12.5px; color: var(--muted); }
.pk-hopts { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 14px 11px 56px;
            font-size: 13px; color: var(--muted); }
.pk-hopts label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pk-hopts input[type="checkbox"] { width: 17px; height: 17px; accent-color: #2E5C23; }
.pk-passes input { width: 52px; padding: 3px 6px; font-size: 13px; border: 1px solid var(--line);
                   border-radius: 6px; }

/* ---- operator: customers / streets --------------------------------------- */
/* minmax(0, 1fr), not the implicit `auto`. An auto column sizes to max-content,
   so on a phone a row grew to 475px inside a 351px list and the price and
   status on the right were clipped away by body{overflow-x:clip} — silently,
   because the page itself never gained a scrollbar. */
.pk-crows { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.pk-crow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; background: var(--paper); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px; min-height: 58px;
}
.pk-crow:hover { border-color: var(--ice-d); box-shadow: var(--sh); }
.pk-crow.gone { display: none; }
.pk-cmain { min-width: 0; }
.pk-cmain b { display: block; font-size: 15px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cmain small { display: block; font-size: 12.5px; color: var(--muted);
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-cside { flex: none; display: flex; align-items: center; gap: 8px; text-align: right; }
.pk-cside b { font-family: var(--disp); font-weight: 800; font-size: 19px; }
.pk-cside small { font-size: 11.5px; color: var(--muted); }
.pk-dot { background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
          border-radius: 999px; padding: 3px 7px; }

.pk-blocks { display: grid; gap: 10px; }
.pk-block-x { }
.pk-blocks .pk-block { background: var(--paper); border: 1px solid var(--line);
                       border-left: 4px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pk-blocks .pk-block.live { border-left-color: var(--red); }
.pk-blockhd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
              margin-bottom: 8px; }
.pk-blockhd b { font-size: 16px; }
.pk-blockhd small { display: block; font-size: 12.5px; color: var(--muted); }
.pk-blockn { flex: none; }
.pk-blockn b { font-family: var(--disp); font-weight: 800; font-size: 24px; }
.pk-blockn span { font-size: 13px; color: var(--muted); }

/* ---- operator: pricing --------------------------------------------------- */
.pk-prow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
           padding: 7px 0; border-bottom: 1px solid var(--line); }
.pk-prow:last-child { border-bottom: 0; }
.pk-prow label { font-size: 14px; color: var(--muted); }
.pk-prow input { width: 108px; flex: none; padding: 8px 10px; font-size: 15px;
                 border: 1.5px solid var(--line); border-radius: 8px; text-align: right;
                 font-variant-numeric: tabular-nums; }

/* ---- wider than a phone -------------------------------------------------- */
@media (min-width: 560px) {
  .pk-row2 { grid-template-columns: 1fr 1fr; }
  .pk-promises { grid-template-columns: 1fr 1fr; }
  .pk-picks { grid-template-columns: 1fr 1fr; }
  .pk-picks2 { grid-template-columns: 1fr 1fr; }
  .pk-statrow.pk-stat4 { grid-template-columns: repeat(4, 1fr); }
  .pk-hero { padding: 30px 30px 34px; }
  main { padding: 26px 20px 50px; }
  .pk-fwrap { grid-template-columns: 1fr auto; text-align: left; }
  .pk-fwrap .pk-credit { text-align: right; }
  .pk-mastview { display: block; }
}

/* ---- desktop: the sidebar stops being a drawer --------------------------- */
@media (min-width: 980px) {
  body { padding-bottom: 0; }
  .pk-burger { display: none; }
  .pk-scrim { display: none; }
  .pk-tabbar { display: none; }
  .pk-side {
    position: sticky; top: 71px; height: calc(100vh - 71px); transform: none;
    width: 272px; float: left; transition: width .2s ease;
  }
  .pk-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr);
              align-items: start; transition: grid-template-columns .2s ease; }
  .pk-side { float: none; }
  main { padding: 28px 28px 60px; max-width: 780px; }
  /* The operator's screens are lists and tables, not marketing copy — they get
     the room the homeowner's reading measure would waste. */
  body.is-ops main { max-width: 1020px; }
  body.is-ops .pk-statrow { grid-template-columns: repeat(3, 1fr); }
  body.is-ops .pk-statrow.pk-stat4 { grid-template-columns: repeat(4, 1fr); }
  .pk-toast { left: auto; right: 26px; bottom: 26px; transform: translate(0, 20px); }
  .pk-toast.on { transform: translate(0, 0); }

  /* collapsed: an icon rail. Labels are still in the DOM for screen readers,
     they are just clipped, and the title attribute is not relied on. */
  body.nav-collapsed .pk-shell { grid-template-columns: 68px minmax(0, 1fr); }
  body.nav-collapsed .pk-side { width: 68px; padding-left: 8px; padding-right: 8px; }
  body.nav-collapsed .pk-nav > span,
  body.nav-collapsed .pk-who,
  body.nav-collapsed .pk-subnav,
  body.nav-collapsed .pk-caret,
  body.nav-collapsed .pk-ext { display: none; }
  body.nav-collapsed .pk-nav { justify-content: center; padding: 12px 0; }
  body.nav-collapsed .pk-nav .pk-count { position: absolute; margin-left: 22px; margin-top: -14px; }
  body.nav-collapsed .pk-navs { position: relative; }
  body.nav-collapsed .pk-collapse svg { transform: rotate(180deg); }
}
/* On a wide screen the bar stays bottom-anchored but floats as a pill rather
   than spanning the window. It cannot become `position: sticky` here — the nav
   sits after <main> in the DOM, so sticky would park it below the content
   instead of under the masthead. */
@media (min-width: 780px) {
  .pk-tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: 18px; width: 320px; border: 1px solid var(--line);
    border-radius: 999px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(11,31,53,.18);
  }
  .pk-tabbar button { height: 52px; border-top: 0; border-bottom: 3px solid transparent; margin: 0; }
  .pk-tabbar button.on { border-bottom-color: var(--red); }
  .pk-toast { bottom: 88px; }
}

/* ---- level 3: street pins ------------------------------------------------ */
/* Once a neighborhood is open, its own pin and label stop competing with the
   street names underneath them. */
body.map-street .pk-pin b { opacity: .35; }
body.map-street .pk-pin:not(.on) i { opacity: .45; }

.pk-st {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap;
}
.pk-st b {
  font-size: 11px; font-weight: 700; letter-spacing: .01em; color: var(--ink);
  background: rgba(255,255,255,.94); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px;
}
.pk-st i {
  flex: none; font-style: normal; width: 18px; height: 18px; border-radius: 50%;
  background: var(--red); color: #fff; border: 2px solid #fff;
  font-size: 10.5px; font-weight: 800; line-height: 15px; text-align: center;
  box-shadow: 0 1px 4px rgba(11,31,53,.4);
}
.pk-st.on b { background: var(--ink); color: var(--snow); border-color: var(--ink); }
.pk-st:hover b { background: var(--red); color: #fff; border-color: var(--red); }
.pk-st:hover { z-index: 800; }


/* =============================================================================
   GUEST MODE — one container, three screens, no chrome.
   ============================================================================= */

/* Nothing may exceed the viewport. `overflow-x: clip` rather than `hidden`
   because hidden on <html> creates a scroll container that breaks
   position:sticky inside it, which is how the masthead stopped sticking the
   last time this was attempted. */
html, body { max-width: 100%; overflow-x: clip; }

body.guest .pk-mast,
body.guest .pk-side,
body.guest .pk-scrim,
body.guest .pk-tabbar,
body.guest .pk-foot { display: none; }

body.guest { padding-bottom: 0; background: var(--ink); }
body.guest .pk-shell { display: block; }

/* NOTE: <main> and #view are THE SAME ELEMENT — index.html is
   `<main id="view">`. Writing `main { min-height: 100svh }` and
   `#view { min-height: 0 }` as if they were two boxes means the id wins and the
   height silently never applies, which is exactly what happened. Anything
   targeting it in guest mode is written `main#view` so it beats both. */
body.guest main#view {
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  /* THE ONE SCROLL CONTAINER. An earlier pass made this `overflow: hidden` so
     the welcome screen would sit exactly one viewport tall — which also clipped
     the 2,910px sign-up form at 812px and put the Next button 2,136px out of
     reach. The form was unreachable and the flow was dead.

     So: this scrolls, and screens that want to fill exactly ask for
     `min-height: 100svh` instead. Short screens fill; long ones scroll. svh
     rather than vh so an iOS toolbar sliding in cannot crop the button. */
  height: 100svh;
  min-height: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Anything that is not a full-bleed screen — the sign-up form — still needs
   gutters, since guest mode zeroed the padding on the container. */
body.guest #view > section:not(.pk-screen) {
  padding: max(16px, env(safe-area-inset-top)) 16px
           max(24px, env(safe-area-inset-bottom)) 16px;
  margin: 0;
}
body.guest #view > .pk-back { margin: 14px 0 0 16px; }

/* A screen fills the app and owns its own scrolling. The page itself never
   scrolls in guest mode, which is what removes the fight between the page, the
   list and the map that made the old build feel broken on a phone. */
.pk-screen {
  min-height: 100svh; margin: 0;
  display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 18px
           max(18px, env(safe-area-inset-bottom)) 18px;
  gap: 14px;
}
/* No inner scroller. The wrap grows, and if it outgrows the screen the one
   container above scrolls — which keeps the CTA reachable on a small phone
   instead of stranding it below a clipped panel. */
.pk-screen > .pk-wrap { flex: 1; min-height: 0; display: flex;
                        flex-direction: column; justify-content: center; }
.pk-screenfoot { flex: none; margin-top: auto; padding-top: 8px; }
.pk-screenhd { display: flex; align-items: flex-start; gap: 10px; flex: none; }
.pk-screenhd .pk-h1 { margin: 0; }
.pk-screenhd .pk-note { margin: 2px 0 0; }
.pk-backtop {
  flex: none; width: 40px; height: 40px; padding: 0; border-radius: 11px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: var(--snow); font-size: 19px; line-height: 1; text-align: center;
}
.pk-backtop:hover { background: rgba(255,255,255,.16); }

/* ---- screen 1 ------------------------------------------------------------ */
.pk-welcome { text-align: center; color: var(--snow); }
.pk-mapfill { min-height: 260px; }
/* Sized so the whole screen lands inside 812px — the shortest common phone —
   without scrolling. Measured, not guessed: badge 198 + h1 78 + lede 128 +
   promises 205 + foot 132 + gaps was 832, so 24px came out of the badge and the
   lede's tail. Anything taller and the CTA needs a scroll to reach, which is
   the one thing this screen must never ask for. */
.pk-welcome .pk-badge { width: min(268px, 66%); margin: 0 auto 4px; display: block; }
.pk-welcome h1 {
  font-family: var(--disp); font-weight: 800; text-transform: uppercase;
  font-size: clamp(32px, 10.5vw, 50px); line-height: .95; margin: 2px 0 10px;
  color: var(--snow);
}
.pk-welcome h1 em { font-style: normal; color: var(--ice); }
.pk-welcome .pk-lede { color: var(--mist); font-size: 15.5px; margin: 0 0 14px; }
.pk-welcome .pk-lede b { color: var(--snow); }
.pk-welcome .pk-promises { text-align: left; margin: 0; }
.pk-welcome .pk-fine { color: var(--mist); text-align: center; }
.pk-welcome .pk-fine a { color: var(--ice); }

/* ---- screen 2: the map IS the screen ------------------------------------- */
body.guest .pk-findscreen { color: var(--snow); }
body.guest .pk-findscreen .pk-note { color: var(--mist); }
body.guest .pk-findscreen .pk-h1 { color: var(--snow); }
.pk-mapfill {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  margin: 0; border-radius: var(--r); overflow: hidden;
}
.pk-mapfill #map {
  flex: 1; min-height: 220px; height: auto;   /* fills whatever is left */
}
body.guest .pk-findbox { flex: none; margin: 0; }
body.guest .pk-findbox input { background: var(--paper); }

/* =============================================================================
   SCREEN TRANSITIONS
   One rule, both directions. Transform and opacity only — animating anything
   else on a phone drops frames, and a dropped frame reads as a broken app.
   ============================================================================= */
@keyframes pkInFwd  { from { opacity: 0; transform: translate3d(16px,0,0) } to { opacity: 1; transform: none } }
@keyframes pkInBack { from { opacity: 0; transform: translate3d(-16px,0,0) } to { opacity: 1; transform: none } }
#view.pk-in  { animation: pkInFwd .30s cubic-bezier(.22,.75,.30,1) both; }
#view.pk-in.pk-back { animation-name: pkInBack; }

/* The wizard's own step change gets the same language, staggered a touch so the
   card lands after the frame it sits in. */
@keyframes pkRise { from { opacity: 0; transform: translate3d(0,10px,0) } to { opacity: 1; transform: none } }
#view.pk-in .pk-card,
#view.pk-in .pk-qcard { animation: pkRise .34s cubic-bezier(.22,.75,.30,1) .04s both; }

@media (prefers-reduced-motion: reduce) {
  #view.pk-in, #view.pk-in .pk-card, #view.pk-in .pk-qcard { animation: none; }
}

/* =============================================================================
   MOBILE — tighter gutters and no nested scroll traps.
   ============================================================================= */
@media (max-width: 560px) {
  /* 16px of padding on a 375px screen is 8.5% of the width spent on nothing.
     12 is enough to keep type off the glass. */
  main { padding: 14px 12px 32px; }
  .pk-screen { padding-left: 14px; padding-right: 14px; }
  .pk-card { padding: 15px 13px; }
  .pk-hero { padding: 18px 15px 22px; }
  .pk-qcard { padding: 13px 13px 14px; }

  /* THE SCROLL TRAP. This was a 414px window onto 2,961px of list, with
     overscroll-behavior:contain, sitting in the middle of a scrolling page —
     so a finger landing on it scrolled the list and the page stayed put. On a
     phone the list is just a list. */
  .pk-areas { max-height: none; overflow: visible; }
  .pk-comboList { max-height: 44vh; }
  .pk-thread { max-height: 50vh; }
}

/* The map takes the gesture it needs and no more: Leaflet sets touch-action to
   none on its container, which on a tall page means a finger anywhere on the
   map cannot scroll past it. In guest mode the map is the screen and that is
   correct. Everywhere else it must not swallow the page. */
body:not(.guest) .leaflet-container { touch-action: pan-y !important; }
body.guest .leaflet-container { touch-action: none; }


/* =============================================================================
   THE WIZARD — one question, one screen.
   ============================================================================= */
.pk-wiz { color: var(--snow); }
.pk-wizwrap { justify-content: flex-start !important; gap: 16px; padding-top: 6px; }
.pk-qtitle {
  font-size: clamp(25px, 7vw, 33px); line-height: 1.05; margin: 0;
  color: var(--snow); text-wrap: balance;
}
.pk-qbody { display: grid; gap: 12px; }
.pk-wiz .pk-f label { color: var(--mist); }
.pk-wiz .pk-peek { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
                   color: var(--mist); }
.pk-wiz .pk-peek b { color: var(--snow); }
.pk-wiz .pk-fine { color: var(--mist); }
.pk-opt { font-weight: 400; opacity: .7; }

/* ---- progress ------------------------------------------------------------ */
.pk-prog { flex: 1; display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.pk-progbar {
  flex: 1; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.16);
}
.pk-progbar i {
  display: block; height: 100%; border-radius: 999px; background: var(--ice);
  transition: width .32s cubic-bezier(.22,.75,.30,1);
}
.pk-prog span { flex: none; font-size: 12px; font-weight: 700; color: var(--mist);
                font-variant-numeric: tabular-nums; }

/* ---- the info button ------------------------------------------------------
   Collapsed by default. The whole point is that a question reads as one line
   until somebody wants the reason — five explanatory paragraphs stacked on a
   form is what makes a two-minute job look like a twenty-minute one. */
/* DEFAULTS TO THE LIGHT GROUND, and the dark screens opt in below.

   The first version did the opposite — white-on-translucent as the base, with an
   override scoped to `.pk-fs`. Every info button OUTSIDE a fieldset (the profile,
   settings) kept the dark styling on a white card and measured 1.03:1. Invisible.
   A default that is wrong everywhere except where you remembered to patch it is
   the wrong default. */
.pk-info {
  display: inline-grid; place-items: center; vertical-align: 3px;
  width: 24px; height: 24px; margin-left: 8px; padding: 0; flex: none;
  border-radius: 50%; cursor: pointer;
  background: var(--fog); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--body); font-size: 13px; font-weight: 800; font-style: italic;
  line-height: 1;
}
.pk-info:hover, .pk-info.on { background: var(--ink); border-color: var(--ink); color: var(--snow); }
.pk-infotext {
  display: block; margin: 10px 0 0; padding: 11px 13px;
  background: var(--fog); border: 1px solid var(--line); border-radius: 10px;
  color: var(--muted);
  font-family: var(--body); font-size: 13.5px; font-weight: 400; line-height: 1.55;
  text-transform: none; letter-spacing: 0;
}
.pk-infotext[hidden] { display: none; }

/* Dark grounds: the guest screens and the quote card. */
body.guest .pk-screen .pk-info,
.pk-qcard .pk-info {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: var(--snow);
}
body.guest .pk-screen .pk-info:hover, body.guest .pk-screen .pk-info.on,
.pk-qcard .pk-info:hover, .pk-qcard .pk-info.on {
  background: var(--ice); border-color: var(--ice); color: var(--ink);
}
body.guest .pk-screen .pk-infotext,
.pk-qcard .pk-infotext {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: var(--mist);
}

/* ---- secondary answers, folded away ---------------------------------------
   The neighborhood is already known from the map, and most people's price
   covers plowing only. Both are corrections, not questions, so they sit behind
   a summary instead of taking a row on the form. */
.pk-tweak { margin: 2px 0 0; }
.pk-tweak > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: var(--ice);
  padding: 6px 0;
}
.pk-tweak > summary::-webkit-details-marker { display: none; }
.pk-tweak > summary::before { content: '+'; font-size: 15px; line-height: 1; }
.pk-tweak[open] > summary::before { content: '\2212'; }
.pk-tweak[open] > summary { margin-bottom: 6px; }
body:not(.guest) .pk-tweak > summary { color: var(--ice-d); }

/* Guest-mode form controls sit on navy, so they need their own ground. */
.pk-wiz .pk-f input, .pk-wiz .pk-f select {
  background: rgba(255,255,255,.96); border-color: rgba(255,255,255,.3); color: var(--ink);
}
.pk-wiz .pk-money > span, .pk-wiz .pk-money em { color: var(--muted); }
.pk-wiz .pk-pick {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: var(--snow);
}
.pk-wiz .pk-pick small { color: var(--mist); }
.pk-wiz .pk-pick::before { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.pk-wiz .pk-pick.on { background: rgba(102,199,244,.16); border-color: var(--ice); }
.pk-wiz .pk-pick.on::before { border-color: var(--ice); box-shadow: inset 0 0 0 3.5px var(--ice); }
.pk-wiz .pk-svc {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); color: var(--snow);
}
.pk-wiz .pk-svc small { color: var(--mist); }
.pk-wiz .pk-svc b em { color: var(--mist); }
.pk-wiz .pk-svcmark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); }
.pk-wiz .pk-svc.on { background: rgba(102,199,244,.16); border-color: var(--ice); }
.pk-wiz .pk-svc.on .pk-svcmark { background: var(--ice); border-color: var(--ice); }
.pk-wiz .pk-bandrow i { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24);
                        color: var(--mist); }
.pk-wiz .pk-planblurb { color: var(--snow); }
.pk-wiz .pk-help { color: var(--mist); }

/* The map bar in guest mode sits on the navy screen, not on a white card, so it
   cannot use --muted (2.43:1 there). --mist is 8.7:1 on the same ground. */
body.guest .pk-mapbar { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
body.guest .pk-openname { color: var(--snow); }
body.guest .pk-openmeta { color: var(--mist); }
body.guest .pk-maplegend { background: rgba(255,255,255,.06); color: var(--mist);
                           border-top-color: rgba(255,255,255,.14); }
body.guest .pk-maplegend .dot { border-color: var(--snow); background: transparent; }
body.guest .pk-maplegend .dot.on { background: var(--red); border-color: var(--red); }
body.guest .pk-townchip { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22);
                          color: var(--snow); }
body.guest .pk-townchip i { background: rgba(255,255,255,.16); color: var(--snow); }
body.guest .pk-backchip { color: var(--ice); }

/* ---- level 3: served roads ------------------------------------------------
   A red road is one we already plow. That is the entire message of this level,
   so it gets a white halo underneath to hold it apart from the OSM tile's own
   yellow arterials, which are the only other saturated thing on the map. */
.pk-st.wait b { border-style: dashed; }
.pk-st.wait { opacity: .9; }
.pk-servedot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); margin-right: 6px; vertical-align: 0;
}
.leaflet-interactive { transition: stroke-width .12s ease, stroke-opacity .12s ease; }
/* The mask must never intercept a tap meant for a town underneath it. */
.pk-mask { pointer-events: none; }

/* ── owner fixes, 2026-08-17 ─────────────────────────────────────────────────
   1. Desktop horizontal scrollbar: something wide (map/table) was making the
      page a sideways scroller. `clip` clamps without creating a scroll
      container (the `hidden` trap kills position:sticky — measured in the
      motion kit, same lesson applies here).
   2. Operator side has no bottom tab bar — tabbar() returns nothing for ops;
      this hides the empty container and gives the freed space back. */
html, body { overflow-x: clip; max-width: 100%; }
body.is-ops .pk-tabbar { display: none !important; }

/* NWS official snowfall line on the storm log (owner, 2026-08-17) */
.pk-nwsline {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px;
  background: var(--paper-2, rgba(11,31,53,.05)); border: 1px solid var(--line);
  font-size: 14px;
}
.pk-nwsline small { color: var(--muted); }
.pk-nwstag { color: var(--muted); font-weight: 600; }

/* =============================================================================
   2026-08-25 owner pass (first real lead)
   ========================================================================== */
/* Form text was inheriting the guest layout's light ink on phones — the "where
   are you" box and every select showed pale text on a pale field. Input text is
   now explicitly dark everywhere; -webkit-text-fill-color covers iOS, which
   ignores plain color on some control states. */
.pk-f input, .pk-f select, .pk-f textarea,
.pk-findbox input, #a-find {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
}
select option { color: var(--ink); background: var(--paper); }

/* Map name-labels hide once a town is open unless the visitor turns them on
   from the map bar (body.pk-labels). Tooltips still name anything tapped, so
   nothing becomes unfindable — the streets just stop being buried in pins. */
body.map-open:not(.pk-labels) .pk-pin,
body.map-open:not(.pk-labels) .pk-st { display: none; }

.pk-lblchip {
  margin-left: auto; flex: none; cursor: pointer;
  font: 700 12px/1 inherit; letter-spacing: .03em;
  color: var(--ice-d); background: var(--paper);
  border: 1.5px solid var(--ice-d); border-radius: 999px; padding: 7px 12px;
}
.pk-lblchip:hover { background: var(--fog); }
.pk-lblchip:focus-visible { outline: 2px solid var(--ice-d); outline-offset: 2px; }

/* Remove button on the customer card (2026-08-25) — reads as the dangerous one. */
.pk-btn.pk-danger { color: var(--red); border-color: rgba(211,28,44,.45); }
.pk-btn.pk-danger:hover { background: rgba(211,28,44,.1); }