/**
 * The quote flow.
 *
 * Desktop-first, as briefed: the doors sit in a row at three columns and the steps run in a
 * single readable measure. The phone gets the same markup with the doors stacked, because a
 * three-column card row at 380px makes every card unreadable rather than making the choice
 * easier.
 */

.pcc-q { --t:#0f766e; --t-soft:#ccfbf1; --line:#e5e7eb; --ink:#111827; --soft:#6b7280;
         --amber:#a1560a; --bad:#b32d2e;
         max-width:52rem; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.pcc-q [x-cloak], .pcc-q[x-cloak] { display:none !important; }

/* ── doors ────────────────────────────────────────────────────────────────── */
.pcc-q-doors h1 { font-size:clamp(1.9rem,5vw,2.6rem); font-weight:800; letter-spacing:-.02em;
                  margin:0 0 .5rem; text-align:center; color:var(--ink); }
.pcc-q-lede { text-align:center; color:var(--soft); font-size:1.05rem; margin:0 0 2rem; }
.pcc-q-doorgrid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); align-items:stretch; }
@media (max-width:820px) { .pcc-q-doorgrid { grid-template-columns:1fr; } }

.pcc-q-door { display:flex; flex-direction:column; gap:.45rem; text-align:left; cursor:pointer;
              background:#fff; border:1px solid var(--line); border-radius:12px; padding:1.4rem 1.25rem;
              font:inherit; transition:border-color .15s, box-shadow .15s, transform .15s; }
.pcc-q-door:hover { border-color:var(--t); transform:translateY(-2px); box-shadow:0 8px 24px -14px rgba(15,118,110,.5); }
.pcc-q-door:focus-visible { outline:3px solid var(--t); outline-offset:2px; }
/* The survey door is the only bordered card: the middle of a three-way choice is the
   position that gets picked most, and it is the outcome worth the most to both sides. */
.pcc-q-door.is-featured { border:2px solid var(--t); }
.pcc-q-doortitle { font-weight:800; font-size:1.05rem; color:var(--ink); }
.pcc-q-doorbody  { font-size:.9rem; color:var(--soft); line-height:1.55; flex:1; }
.pcc-q-doornote  { font-family:ui-monospace,Consolas,monospace; font-size:.72rem; letter-spacing:.03em;
                   text-transform:uppercase; color:var(--t); margin-top:.35rem; }
.pcc-q-dooroffer { font-family:ui-monospace,Consolas,monospace; font-size:.72rem; letter-spacing:.03em;
                   text-transform:uppercase; color:var(--amber); }

/* ── the column ───────────────────────────────────────────────────────────────
   Every step, always open, one under the other. Nothing here hides or resizes a
   step: the page keeps the same height from first paint to submit, which is what
   lets a scroll measured now still be true when it arrives. */
.pcc-q-top { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem;
             position:sticky; top:0; z-index:5; background:var(--paper,#fff); padding:.6rem 0; }
.pcc-q-back { background:none; border:0; padding:.25rem 0; color:var(--soft); font:600 .82rem/1 inherit;
              cursor:pointer; white-space:nowrap; }
.pcc-q-back:hover { color:var(--t); }
.pcc-q-back:focus-visible { outline:2px solid var(--t); outline-offset:3px; border-radius:3px; }
.pcc-q-bar { flex:1; height:4px; background:var(--line); border-radius:99px; overflow:hidden; }
.pcc-q-bar span { display:block; height:100%; background:var(--t); border-radius:99px; transition:width .3s ease; }

.pcc-q-steps { display:flex; flex-direction:column; gap:2rem; }

.pcc-q-card { border:1px solid var(--line); border-radius:12px; background:#fff; padding:1.5rem;
              scroll-margin-top:7rem; transition:border-color .25s ease; }
.pcc-q-card.is-done { border-color:#a7f3d0; }

.pcc-q-h { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
           font-size:clamp(1.15rem,3vw,1.5rem); font-weight:800; letter-spacing:-.015em;
           margin:0 0 .35rem; color:var(--ink); }
.pcc-q-num { flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--line);
             color:var(--soft); font:700 .8rem/1.6rem ui-monospace,Consolas,monospace;
             text-align:center; }
.pcc-q-tickmark { flex:none; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--t-soft);
                  color:var(--t); display:flex; align-items:center; justify-content:center; }
.pcc-q-tickmark svg { width:.85rem; height:.85rem; }
.pcc-q-optflag { font:400 .72rem/1 inherit; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.pcc-q-help { color:var(--soft); font-size:.92rem; margin:0 0 1.35rem; line-height:1.6; padding-left:2.2rem; }
.pcc-q-outstanding { font-size:.85rem; color:var(--amber); margin:0 0 .9rem; }

/* ── options ──────────────────────────────────────────────────────────────── */
.pcc-q-options { display:grid; gap:.6rem; }
.pcc-q-opt { display:flex; flex-direction:column; gap:.15rem; text-align:left; cursor:pointer; font:inherit;
             background:#fff; border:1px solid var(--line); border-radius:10px; padding:.95rem 1.1rem;
             transition:border-color .12s, background .12s; }
.pcc-q-opt:hover { border-color:var(--t); background:#f0fdfa; }
.pcc-q-opt.is-on { border-color:var(--t); background:var(--t-soft); }
.pcc-q-opt:focus-visible { outline:3px solid var(--t); outline-offset:2px; }
.pcc-q-optlabel { font-weight:700; font-size:.98rem; color:var(--ink); }
.pcc-q-opthint  { font-size:.83rem; color:var(--soft); line-height:1.5; }

/* ── inputs ───────────────────────────────────────────────────────────────── */
.pcc-q-input { width:100%; padding:.75rem .9rem; border:1px solid #d1d5db; border-radius:9px;
               font-size:1rem; background:#fff; font-family:inherit; }
.pcc-q-input:focus { outline:2px solid var(--t); outline-offset:1px; border-color:var(--t); }
.pcc-q-fields { display:grid; gap:1.1rem; }
.pcc-q-fields label { display:block; font-weight:600; font-size:.9rem; color:var(--ink); }
.pcc-q-fields .pcc-q-input { margin-top:.35rem; }
.pcc-q-fieldnote { display:block; font-weight:400; font-size:.78rem; color:var(--soft); margin-top:.3rem; }
.pcc-q-opt-tag { font-weight:400; font-size:.75rem; color:var(--soft); }

.pcc-q-listed   { color:var(--t); font-size:.9rem; font-weight:600; margin:.6rem 0 0; }
.pcc-q-unlisted { color:var(--amber); font-size:.9rem; margin:.6rem 0 0; line-height:1.55; }
.pcc-q-cities   { font-size:.8rem; color:var(--soft); margin:1rem 0 0; line-height:1.7; }

/* ── review ───────────────────────────────────────────────────────────────── */
.pcc-q-review { margin:0 0 1.5rem; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }
.pcc-q-rrow { display:grid; grid-template-columns:12rem 1fr; gap:1rem; padding:.7rem 1rem;
              border-bottom:1px solid #f3f4f6; font-size:.9rem; }
.pcc-q-rrow:last-child { border-bottom:0; }
.pcc-q-rrow dt { color:var(--soft); font-weight:600; margin:0; }
.pcc-q-rrow dd { margin:0; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:640px) { .pcc-q-rrow { grid-template-columns:1fr; gap:.15rem; } }

.pcc-q-closing { background:#f0fdfa; border-left:3px solid var(--t); border-radius:0 8px 8px 0;
                 padding:1rem 1.2rem; margin:0 0 1.5rem; }
.pcc-q-closing h3 { margin:0 0 .35rem; font-size:1rem; font-weight:700; color:var(--ink); }
.pcc-q-closing p  { margin:0; font-size:.9rem; color:#374151; line-height:1.6; }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.pcc-q-nav { margin-top:1.75rem; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.pcc-q-btn { background:var(--t); color:#fff; border:0; border-radius:10px; padding:.85rem 2rem;
             font:800 1rem/1 inherit; cursor:pointer; transition:background .15s, transform .15s; }
.pcc-q-btn:hover:not(:disabled) { background:#115e59; transform:translateY(-1px); }
.pcc-q-btn:disabled { background:#d1d5db; cursor:not-allowed; }
.pcc-q-btn:focus-visible { outline:3px solid var(--t); outline-offset:3px; }
.pcc-q-btn-ghost { background:none; color:var(--t); border:1px solid var(--t); }
.pcc-q-btn-ghost:hover { background:#f0fdfa; color:#115e59; }
.pcc-q-submit { width:100%; padding:1rem; font-size:1.05rem; }
.pcc-q-skip { background:none; border:0; color:var(--soft); font:600 .88rem/1 inherit;
              cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.pcc-q-fine { text-align:center; font-size:.8rem; color:var(--soft); margin:.85rem 0 0; }
.pcc-q-error { background:#fef2f2; border-left:3px solid var(--bad); color:#7f1d1d;
               padding:.75rem 1rem; border-radius:0 6px 6px 0; font-size:.9rem; margin:0 0 1rem; }
.pcc-q-soon { font-size:.85rem; color:var(--soft); font-style:italic; }

/* ── done ─────────────────────────────────────────────────────────────────── */
.pcc-q-done { text-align:center; padding:3rem 1rem; }
.pcc-q-tick { width:4rem; height:4rem; margin:0 auto 1.25rem; border-radius:50%;
              background:var(--t-soft); color:var(--t); display:flex; align-items:center; justify-content:center; }
.pcc-q-tick svg { width:2rem; height:2rem; }
.pcc-q-done h2 { font-size:1.75rem; font-weight:800; margin:0 0 .5rem; color:var(--ink); }
.pcc-q-done p  { color:var(--soft); margin:0 0 .5rem; }
.pcc-q-done-sub { font-size:.9rem; margin-bottom:1.5rem !important; }

/* The builder brings its own stylesheet; this only sets it into the step. */
.pcc-q-builder { margin-top:.5rem; }

/* Reduced motion, without reaching for !important on a wildcard.
   x-collapse animates by writing transitionDuration as an INLINE style, and a stylesheet
   rule marked !important beats an inline one -- so the blanket version of this silently
   killed the fold as well as the decoration, and made every duration and easing change
   invisible. These name the decorative transitions instead, which is all that was ever
   meant by it. */
@media (prefers-reduced-motion: reduce) {
    .pcc-q-door, .pcc-q-opt, .pcc-q-card, .pcc-q-btn, .pcc-q-bar span { transition: none; }
    .pcc-q-enter { transition: none; }
    .pcc-q-enter-start { opacity: 1; transform: none; }
}

/* ── the road ahead ───────────────────────────────────────────────────────────
   Desktop lists the steps still to come; a phone shows only the count.

   The divergence is deliberate and costs nothing to maintain: one block of markup,
   one media query, no branch in the JavaScript. Vertical space is the scarce
   resource on a phone, and five locked rows there would push the step actually
   being answered off the screen -- which costs more than the list explains. The
   count carries the same reassurance in one row.

   display:none is the right hide: it takes the rows out of the accessibility tree
   too, so a phone screen reader is not read a list of steps it cannot reach. */
.pcc-q-ahead { margin-top:1.25rem; padding:1rem 1.25rem; border:1px dashed var(--line);
               border-radius:12px; background:#fcfcfd; }
.pcc-q-aheadhead { display:flex; align-items:baseline; gap:.5rem; margin:0 0 .6rem;
                   font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
                   font-weight:700; color:var(--soft); }
.pcc-q-aheadcount { font-weight:400; letter-spacing:0; text-transform:none; font-size:.8rem; }
.pcc-q-aheadrow { display:flex; align-items:center; gap:.7rem; padding:.4rem 0;
                  color:#9ca3af; font-size:.9rem; }
.pcc-q-aheadnum { flex:none; width:1.35rem; height:1.35rem; border-radius:50%;
                  border:1px solid var(--line); display:flex; align-items:center;
                  justify-content:center; font-size:.7rem; font-weight:700;
                  font-variant-numeric:tabular-nums; }
.pcc-q-aheadtitle { flex:1; }
.pcc-q-aheadopt { font-size:.72rem; color:#b6bcc4; }

@media (max-width:900px) {
    /* Keep the header, drop the list: the count already answers "how much more". */
    .pcc-q-ahead { padding:.7rem 1rem; }
    .pcc-q-aheadhead { margin:0; }
    .pcc-q-aheadrow { display:none; }
}

/* ── a new step arriving ──────────────────────────────────────────────────────
   x-for inserts the card in one frame. However smoothly the step above it folds
   away, a card that simply appears at full height reads as a snap -- and the
   abrupt half of a movement is the half the eye follows. This is deliberately
   quieter than the fold it accompanies: a short rise and fade, so the arrival
   registers without competing with the collapse happening above it. */
.pcc-q-enter        { transition: opacity .45s ease-out, transform .45s ease-out; }
.pcc-q-enter-start  { opacity: 0; transform: translateY(10px); }
.pcc-q-enter-end    { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .pcc-q-enter { transition: none; }
    .pcc-q-enter-start { opacity: 1; transform: none; }
}

/* ── photographs ──────────────────────────────────────────────────────────────
   The dropzone is a <label> wrapped round a real file input, not a bespoke
   drag surface. The input is what a phone camera hooks into, what a keyboard
   reaches and what a screen reader announces; hiding it and styling the label
   keeps all of that and still looks like a dropzone. */
.pcc-q-drop { display:flex; align-items:center; gap:1rem; cursor:pointer;
              border:2px dashed var(--line); border-radius:12px; padding:1.25rem;
              background:#fcfcfd; transition:border-color .15s, background .15s; }
.pcc-q-drop:hover { border-color:var(--t); background:#f0fdfa; }
.pcc-q-drop input { position:absolute; width:1px; height:1px; opacity:0; }
/* Focus must show on the label, since the input it came from is not visible. */
.pcc-q-drop:focus-within { outline:3px solid var(--t); outline-offset:2px; }
.pcc-q-drop.is-full { border-style:solid; opacity:.6; cursor:default; }
.pcc-q-drop.is-full:hover { border-color:var(--line); background:#fcfcfd; }
.pcc-q-dropicon { flex:none; width:2.5rem; height:2.5rem; border-radius:50%;
                  background:var(--t-soft); color:var(--t);
                  display:flex; align-items:center; justify-content:center; }
.pcc-q-dropicon svg { width:1.3rem; height:1.3rem; }
.pcc-q-droptext { display:flex; flex-direction:column; gap:.15rem; font-size:.9rem; }
.pcc-q-droptext strong { color:var(--ink); }
.pcc-q-droptext span  { color:var(--soft); font-size:.8rem; }

.pcc-q-thumbs { list-style:none; margin:1rem 0 0; padding:0;
                display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(6rem,1fr)); }
.pcc-q-thumb { position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
               border:1px solid var(--line); background:#f3f4f6; }
.pcc-q-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
/* Dimmed until the server has acknowledged it: a thumbnail that looks finished
   while the upload is still in flight is a promise the page cannot keep. */
.pcc-q-thumb.is-pending img { opacity:.45; }
.pcc-q-thumbspin { position:absolute; inset:0; margin:auto; width:1.4rem; height:1.4rem;
                   border:2px solid var(--t-soft); border-top-color:var(--t);
                   border-radius:50%; animation:pcc-spin .8s linear infinite; }
@keyframes pcc-spin { to { transform:rotate(360deg); } }
.pcc-q-thumbx { position:absolute; top:.25rem; right:.25rem; width:1.4rem; height:1.4rem;
                border:0; border-radius:50%; background:rgba(17,24,39,.72); color:#fff;
                font:700 1rem/1 inherit; cursor:pointer; }
.pcc-q-thumbx:hover { background:#111827; }
.pcc-q-thumbx:focus-visible { outline:2px solid #fff; outline-offset:1px; }

.pcc-q-uperror { color:var(--bad); font-size:.85rem; margin:.7rem 0 0; }
.pcc-q-uphint  { color:var(--soft); font-size:.82rem; margin:.6rem 0 0; }

@media (prefers-reduced-motion: reduce) {
    .pcc-q-drop { transition:none; }
    .pcc-q-thumbspin { animation-duration:1.6s; }
}

/* The way back to their own request, on the screen that says it arrived. */
.pcc-q-done-actions { margin:0 0 1.5rem; }
.pcc-q-done-keep { max-width:32rem; margin:.9rem auto 0; font-size:.83rem;
                   color:var(--soft); line-height:1.6; }

/* The account offer, under the guest button rather than beside it — the guest route is
   the one that always works, so it keeps the primary position and the visual weight. */
.pcc-q-signup { max-width:34rem; margin:2rem auto 0; padding:1.4rem 1.5rem; text-align:left;
                background:#f9fafb; border:1px solid var(--line); border-radius:12px; }
.pcc-q-signuphead { margin:0 0 .25rem; font-weight:800; font-size:1rem; color:var(--ink); }
.pcc-q-signupsub  { margin:0 0 1rem; font-size:.88rem; color:var(--soft); line-height:1.6; }
.pcc-q-signuprow  { display:flex; gap:.6rem; flex-wrap:wrap; }
.pcc-q-signuprow .pcc-q-input { flex:1 1 14rem; }
.pcc-q-signuprow .pcc-q-btn { flex:0 0 auto; padding:.75rem 1.4rem; }
.pcc-q-signuperr  { margin:.7rem 0 0; font-size:.85rem; color:var(--bad); }
.pcc-q-signedin   { max-width:34rem; margin:1.5rem auto 0; font-size:.9rem; color:var(--soft); }

/* ── "use my location", inside the ZIP field ──────────────────────────────── */
.pcc-q-place { position:relative; }
/* Room for the button so a long ZIP never slides under it. */
.pcc-q-place .pcc-q-input { padding-right:3.25rem; }

.pcc-q-gps { position:absolute; top:50%; right:.5rem; transform:translateY(-50%);
             width:2.35rem; height:2.35rem; display:flex; align-items:center;
             justify-content:center; border:0; border-radius:8px; background:transparent;
             color:#94a3b8; cursor:pointer; transition:background .15s, color .15s; }
.pcc-q-gps:hover:not([disabled]) { background:#f0fdfa; color:#0f766e; }
.pcc-q-gps:focus-visible { outline:2px solid #0f766e; outline-offset:2px; }
.pcc-q-gps[disabled] { cursor:default; color:#0f766e; }
.pcc-q-gps svg { width:1.25rem; height:1.25rem; }

/* The crosshair turns while it is looking. Nothing else on the button changes, so the
   spin is the only thing the eye has to track. */
.pcc-q-gps svg.is-spinning { animation:pcc-q-spin 1.1s linear infinite; }
@keyframes pcc-q-spin { to { transform:rotate(360deg); } }

.pcc-q-gpserr { margin:.55rem 0 0; font-size:.85rem; color:#b91c1c; font-weight:600; }

@media (prefers-reduced-motion:reduce) {
    .pcc-q-gps { transition:none; }
    /* Still shows it is working, without the rotation. */
    .pcc-q-gps svg.is-spinning { animation:none; opacity:.5; }
}

/* ── preferred survey windows ─────────────────────────────────────────────── */
/* A row per working day rather than a month grid: a month is mostly squares nobody
   may pick, and it makes the visitor hunt for the few that are live. */
.pcc-q-windows { display:flex; flex-direction:column; gap:.5rem; }

.pcc-q-wrow { display:grid; grid-template-columns:1fr auto auto; gap:.5rem;
              align-items:center; }
.pcc-q-wday { display:flex; align-items:baseline; gap:.45rem; font-size:.92rem; color:#475569; }
.pcc-q-wday strong { font-weight:800; color:#0f172a; min-width:2.4rem; }

.pcc-q-wbtn { min-width:6.2rem; padding:.6rem .75rem; border:1.5px solid #e2e8f0;
              border-radius:10px; background:#fff; cursor:pointer;
              font:700 .84rem/1 inherit; color:#475569;
              transition:border-color .15s, background .15s, color .15s; }
.pcc-q-wbtn:hover:not([disabled]) { border-color:#99f6e4; background:#f0fdfa; color:#0f766e; }
.pcc-q-wbtn.is-on { border-color:#0f766e; background:#0f766e; color:#fff; }
.pcc-q-wbtn:focus-visible { outline:2px solid #0f766e; outline-offset:2px; }
/* Dimmed rather than hidden once the cap is reached: the visitor can see what they
   would have to give up, instead of options quietly disappearing. */
.pcc-q-wbtn[disabled] { opacity:.4; cursor:not-allowed; }

.pcc-q-wnote { margin:.9rem 0 0; font-size:.85rem; color:#64748b; font-weight:600; }

@media (max-width:30rem) {
    .pcc-q-wrow { grid-template-columns:1fr 1fr; grid-template-areas:"d d" "a p"; }
    .pcc-q-wday { grid-area:d; }
    .pcc-q-wbtn { min-width:0; }
}
@media (prefers-reduced-motion:reduce) { .pcc-q-wbtn { transition:none; } }

/* While the server is deciding. Quiet on purpose: a verdict that has not arrived should
   not look like a verdict. */
.pcc-q-checking { margin:.6rem 0 0; font-size:.88rem; color:#94a3b8; font-weight:600; }