/* The quote wizard and the quote document. Hand-written because app.css is prebuilt
   (scripts/check_css.py). Base rules first, media queries last (scripts/check_cascade.py). */

/* ---------- the wizard ---------- */
.qz { min-height: 60vh; }

.qz-rail { display: flex; gap: .4rem; margin-bottom: 2rem; }
.qz-tick { height: .35rem; flex: 1; border-radius: 999px; background: var(--color-base-300);
           transition: background .35s ease, transform .35s ease; transform-origin: left; }
.qz-tick.on { background: var(--color-primary); }

.qz-step { display: none; }
.qz-step.is-on { display: block; animation: qz-in .32s cubic-bezier(.2, .7, .3, 1) both; }
.qz-step.from-right { transform: translateX(2.5rem); opacity: 0; }
.qz-step.from-left { transform: translateX(-2.5rem); opacity: 0; }

@keyframes qz-in {
    from { opacity: 0; transform: translateY(.75rem); }
    to { opacity: 1; transform: none; }
}

.qz-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700;
             color: var(--color-base-content); opacity: .55; }
.qz-ask { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 800; line-height: 1.1; margin: .4rem 0 1.5rem; }

.qz-choices { display: grid; gap: .75rem; }
.qz-choice { position: relative; display: flex; align-items: center; gap: 1rem; cursor: pointer;
             border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
             padding: 1.1rem 1.25rem; background: var(--color-base-100);
             transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.qz-choice:hover { border-color: var(--color-primary); transform: translateY(-2px);
                   box-shadow: 0 6px 20px rgb(0 0 0 / .07); }
.qz-choice input { width: 1.4rem; height: 1.4rem; accent-color: var(--color-primary); flex: none; }
.qz-choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-base-200); }
.qz-choice:has(input:focus-visible) { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.qz-choice-body { display: grid; gap: .15rem; }
.qz-choice-label { font-size: 1.15rem; font-weight: 700; }
.qz-choice-sub { opacity: .7; }

.qz-check { margin-bottom: 1rem; }
.qz-field { display: grid; gap: .35rem; margin-bottom: 1.5rem; }
.qz-field-label { font-weight: 700; }
.qz-optional { font-weight: 400; opacity: .6; }
.qz-field input { border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
                  padding: .85rem 1rem; font-size: 1.05rem; background: var(--color-base-100);
                  color: inherit; width: 100%; }
.qz-field input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }

.qz-go { border: none; border-radius: var(--radius-box); background: var(--color-primary);
         color: var(--color-primary-content); font-size: 1.15rem; font-weight: 700;
         padding: 1rem 1.6rem; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.qz-go:hover { transform: translateY(-2px); filter: brightness(1.06); }

.qz-warn { color: var(--color-error); font-weight: 700; margin-top: .75rem; }
.qz-nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem;
          border-top: 2px solid var(--color-base-300); padding-top: 1rem; }
.qz-back { background: none; border: none; cursor: pointer; font-size: 1rem; font-weight: 700;
           color: inherit; opacity: .7; padding: .25rem 0; }
.qz-back:hover { opacity: 1; }
.qz-sofar { margin-left: auto; opacity: .65; }

/* ---------- the document ---------- */
.qd { background: var(--color-base-100); border: 2px solid var(--color-base-300);
      border-radius: var(--radius-box); padding: 1.75rem; }
/* Letterhead left, reference and code right, one rule under the lot. The reference and
   the code are one unit (.qd-id) so that when the line is too narrow they drop together
   instead of the code landing under the address and the reference floating off on its
   own — which is what a 390px screen used to do to it. */
.qd-head { display: flex; flex-wrap: wrap; gap: .9rem 1.5rem; align-items: flex-start;
           justify-content: space-between;
           border-bottom: 2px solid var(--color-base-content); padding-bottom: .9rem; }
/* Flush left here, unlike the site header's lockup. The header's tagline is nearly the
   same width as the mark, so anything but dead-on alignment reads as a near miss; this
   address block is plainly wider, and an address under a letterhead belongs on the
   margin. */
.qd-brand { min-width: 0; }
.qd-legal { font-size: .8rem; line-height: 1.35; opacity: .7; margin-top: .45rem; }
.qd-id { display: flex; align-items: center; gap: .85rem; margin-left: auto; }
.qd-meta-kicker { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
                  opacity: .55; line-height: 1; }
.qd-meta-date { font-size: .8rem; opacity: .7; margin-top: .15rem; }
.qd-mark { height: 2.1rem; width: auto; }
.qd-meta { text-align: right; }
.qd-ref { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700;
          font-size: 1.15rem; letter-spacing: .02em; line-height: 1.25; margin-top: .2rem; }

/* The deadline, directly under the rule. Left is which run it buys, right is what's left
   of the chance to claim it. */
.qd-cut { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
          gap: .2rem 1rem; margin-top: .7rem; font-size: .95rem; line-height: 1.35; }
.qd-cut-when { font-weight: 700; }
.qd-cut-left { font-variant-numeric: tabular-nums; opacity: .7; white-space: nowrap; }
.qd-cut.is-late .qd-cut-when { font-weight: 600; opacity: .8; }
.qd-cut.is-soon .qd-cut-left { opacity: 1; font-weight: 700; color: var(--color-warning); }
.qd-price { font-size: clamp(2.6rem, 8vw, 4rem); font-weight: 800; line-height: 1; }
.qd-rows { display: grid; gap: .25rem; }
.qd-row { display: flex; gap: 1rem; padding: .3rem 0; border-bottom: 1px solid var(--color-base-200); }
.qd-row dt { font-weight: 700; min-width: 9rem; }
.qd-row dd { margin: 0; }
.qd-bar { height: .5rem; border-radius: 999px; background: var(--color-primary); }
/* Small: it is a way back to the page, not a feature of the document. The white behind it
   is not decoration — a QR needs a light quiet zone to be readable at all, and in dark
   mode the page showed through and killed it. */
.qd-qr { width: 3.4rem; height: 3.4rem; background: #fff; padding: .22rem;
         border-radius: 3px; display: block; flex: none; }

/* One row per heading: what it is, what it costs, and a line saying what that buys. */
.qd-group { border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
            padding: .7rem .9rem; background: var(--color-base-100); }
.qd-group-head { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 1rem; font-weight: 700; font-size: 1.05rem; }
.qd-group-head span:last-child { font-variant-numeric: tabular-nums; flex: none; }
.qd-group-say { font-size: .85rem; opacity: .75; margin-top: .2rem; line-height: 1.4; }
.qd-price-row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;
                justify-content: space-between; margin-top: 1.25rem; }
/* A button's label cannot break by default, so "Create an account and book it" at btn-lg
   measured 393px and made the entire page wider than the phone it was being read on —
   which is why the whole quote came out shrunk. They wrap and go full width instead. */
.qd-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.qd-actions .btn { white-space: normal; height: auto; min-height: 3rem;
                   padding-top: .55rem; padding-bottom: .55rem; text-align: center; }
/* A plain stack, not a grid: grid containers don't split across printed pages. */
.qd-groups > * + * { margin-top: .5rem; }
.qd-continued { display: none; }

/* The quote on a phone. It is a document, but it is read on a screen four inches wide
   far more often than it is printed, and it was laid out the other way round. */
@media (max-width: 33rem) {
    .qd { padding: 1.1rem; }
    .qd-head { gap: .75rem 1rem; }
    .qd-mark { height: 1.7rem; }
    .qd-price { font-size: 2.6rem; }
    .qd-price-row { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
    .qd-qr { width: 3rem; height: 3rem; }
    .qd-ref { font-size: 1.05rem; }
    .qd-cut { font-size: .9rem; }
    .qd-btns .btn { width: 100%; }
    .qd-row { flex-direction: column; gap: .1rem; padding: .45rem 0; }
    .qd-row dt { min-width: 0; font-size: .8rem; text-transform: uppercase;
                 letter-spacing: .05em; opacity: .65; }
    .qd-group { padding: .6rem .8rem; }
    .qd-group-head { font-size: 1rem; gap: .6rem; }
}

@media print {
    @page { size: letter portrait; margin: .5in; }
    /* The page's own header and footer go; the document's letterhead stays. */
    body > header, body > footer, nav, .no-print { display: none !important; }
    body { background: #fff !important; }
    .qd { border: none; padding: 0; font-size: 9pt; line-height: 1.25; }
    .qd-head { padding-bottom: .5rem; }
    .qd-mark { height: 1.5rem; }
    .qd-price { font-size: 30pt; }
    .qd-qr { width: .85in; height: .85in; background: #fff !important; }
    .qd-cut { font-size: 8.5pt; margin-top: .35rem; }
    /* A countdown on paper is a number that was true when the sheet came out of the
       printer. The deadline itself is on the left of the same line and keeps. */
    .qd-cut-left { display: none !important; }
    .qd-group { padding: .35rem .6rem; border-width: 1px; }
    .qd-group-head { font-size: 9.5pt; }
    .qd-group-say { font-size: 7.5pt; margin-top: .1rem; }
    /* Paper is white whatever the screen was. Printing the dark theme is a page of ink
       for no reason, and the reader asked for a document, not a screenshot. */
    .qd, .qd * { color: #000 !important; background-color: transparent !important; }
    .qd, .qd-head, .qd-row, .qd-group, .qd-group summary, .qd-lines {
        border-color: #999 !important; }
    .qd-price, .qd-ref, .qd strong, .qd .font-bold { color: #000 !important; }
    .qd h2 { font-size: 11pt; margin-top: .7rem; }
    .qd-price-row { margin-top: .5rem; gap: 1rem; }
    .qd-row { padding: .12rem 0; }
    .qd-row dt { min-width: 7.5rem; }
    /* Every group opens on paper, whatever the reader had folded away on screen. */
    /* The breakdown gets its own sheet: it's the part people put in a drawer, and
       forcing the break makes the output the same in every browser. */
    .qd-costs { break-before: page; }
    .qd-continued { display: block; font-size: 8pt; opacity: .7; margin-bottom: .3rem; }
    .qd-group { break-inside: avoid; }
    .qd-costs .qd-rows, .qd-costs > p:last-of-type { break-before: avoid; break-inside: avoid; }
    .qd-costs > p:last-of-type { margin-top: .5rem; }

    .qd-group summary { background: none; padding: .3rem .8rem; border-bottom: 1px solid #b9c5d0; }
    .qd-groups > * + * { margin-top: .35rem; }
}

.qd-blurb { opacity: .78; font-size: .92rem; line-height: 1.5; margin: 0 0 .5rem;
            padding-bottom: .5rem; border-bottom: 1px solid var(--color-base-200); }
.qd-done { display: flex; gap: .75rem; align-items: flex-start; margin-top: 1.25rem;
           border: 2px solid var(--color-success); border-radius: var(--radius-box);
           padding: 1rem 1.15rem; background: var(--color-base-100); }
.qd-done i { color: var(--color-success); font-size: 1.5rem; flex: none; }
.qd-done p { margin: 0; }

.qd-todo { border: 2px solid var(--color-primary); border-radius: var(--radius-box);
           padding: 1rem 1.2rem; margin-top: 1.25rem; display: grid; gap: .6rem; }
.qd-todo-title { font-weight: 700; font-size: 1.1rem; }

/* ---------- the intake steps and the shop picker ---------- */
.qz-sub { margin: -1rem 0 1.25rem; opacity: .75; }
.qz-note { margin-top: 1rem; padding: .85rem 1rem; border-left: 4px solid var(--color-primary);
           background: var(--color-base-200); border-radius: 0 var(--radius-box) var(--radius-box) 0; }
.qz-steps-list { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: .6rem; font-size: 1.05rem; }
.qz-mini { border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
           padding: .9rem 1rem; margin-bottom: 1rem; }
.qz-inline { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; cursor: pointer; }
.qz-inline input { width: 1.2rem; height: 1.2rem; accent-color: var(--color-primary); }
.qz-next { border: 2px solid var(--color-primary); background: none; color: inherit;
           border-radius: var(--radius-box); font-size: 1.05rem; font-weight: 700;
           padding: .8rem 1.5rem; cursor: pointer; }
.qz-next:hover { background: var(--color-primary); color: var(--color-primary-content); }
.qz-picked { margin: 1rem 0; font-weight: 700; }

.qz-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.qz-cat { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
          border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
          background: var(--color-base-100); color: inherit; padding: .9rem 1rem; cursor: pointer;
          font-weight: 700; text-align: left; transition: border-color .15s ease, transform .15s ease; }
.qz-cat:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.qz-cat i { font-size: 1.45rem; color: var(--color-primary); }

.qz-sheet { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 60;
            display: grid; place-items: end center; padding: 0; }
.qz-sheet-card { background: var(--color-base-100); width: min(34rem, 100%);
                 max-height: 86vh; display: flex; flex-direction: column;
                 border-radius: var(--radius-box) var(--radius-box) 0 0;
                 border: 2px solid var(--color-base-300); border-bottom: none;
                 animation: qz-rise .22s cubic-bezier(.2, .7, .3, 1) both; }
.qz-sheet-head { display: flex; align-items: center; gap: .75rem; padding: 1rem;
                 border-bottom: 2px solid var(--color-base-300); }
.qz-sheet-head h2 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.qz-sheet-back, .qz-sheet-x { border: none; background: none; font-size: 1.5rem; line-height: 1;
                              cursor: pointer; color: inherit; padding: .2rem .5rem; }
.qz-sheet-x { margin-left: auto; }
.qz-sheet-town { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem 0; }
.qz-sheet-town select { border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
                        padding: .45rem .6rem; background: var(--color-base-100); color: inherit; }
.qz-sheet-list { list-style: none; margin: 0; padding: .75rem; overflow-y: auto; display: grid; gap: .4rem; }
.qz-sheet-row { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
                border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
                background: var(--color-base-100); color: inherit; padding: .85rem 1rem;
                cursor: pointer; text-align: left; }
.qz-sheet-row:hover { border-color: var(--color-primary); }
.qz-sheet-name { font-weight: 700; font-size: 1.05rem; }
.qz-sheet-meta { margin-left: auto; opacity: .7; }
.qz-sheet-wait, .qz-sheet-none { padding: 1rem; opacity: .75; }

@keyframes qz-rise { from { transform: translateY(1.5rem); opacity: 0; } to { transform: none; opacity: 1; } }

body.qz-locked { overflow: hidden; }

@media (min-width: 40rem) {
    .qz-cats { grid-template-columns: repeat(4, 1fr); }
    .qz-sheet { place-items: center; }
    .qz-sheet-card { border-radius: var(--radius-box); border-bottom: 2px solid var(--color-base-300); }
}

/* ---------- the wizard, second pass ---------- */
/* Phones first. The old one was laid out for a desktop and then squeezed, which is why
   it looked cramped on an iPhone; these are sized for a thumb and allowed to grow. */
.qz { max-width: 42rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; min-height: 70vh; }
.qz-ask { font-size: clamp(1.55rem, 6.5vw, 2.5rem); }
.qz-sub { margin: -0.75rem 0 1.25rem; opacity: .78; font-size: 1.02rem; line-height: 1.5; }
.qz-hint { display: block; font-size: .88rem; opacity: .7; margin-top: .3rem; }

.qz-choice { padding: 1rem 1.1rem; gap: .85rem; align-items: flex-start; }
.qz-choice input[type="radio"], .qz-choice input[type="checkbox"] { margin-top: .15rem; }
.qz-choice-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none;
                  border-radius: var(--radius-box); background: var(--color-base-200);
                  font-size: 1.35rem; color: var(--color-primary); }
.qz-choice:has(input:checked) .qz-choice-icon { background: var(--color-primary);
                                                color: var(--color-primary-content); }

/* Timing, with what it means and roughly what it costs. */
.qz-when { align-items: flex-start; }
.qz-unit { opacity: .7; font-weight: 700; }
.qz-when-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qz-when-window { display: flex; align-items: center; gap: .4rem; font-weight: 700;
                  color: var(--color-primary); margin: .2rem 0; }
.qz-band { font-weight: 800; letter-spacing: .04em; padding: .1rem .5rem; border-radius: 999px;
           font-size: .9rem; border: 2px solid var(--color-base-300); }
.qz-band-1 { color: var(--color-success); border-color: var(--color-success); }
.qz-band-2 { color: var(--color-warning); border-color: var(--color-warning); }
.qz-band-3 { color: var(--color-error); border-color: var(--color-error); }

/* Size and hazard, as pills rather than a system select. */
.qz-group { border: none; padding: 0; margin: 0 0 1.5rem; }
.qz-pills { display: grid; gap: .5rem; margin-top: .5rem; }
.qz-pill { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
           border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
           padding: .75rem .9rem; background: var(--color-base-100); }
.qz-pill input { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary);
                 flex: none; margin-top: .1rem; }
.qz-pill:has(input:checked) { border-color: var(--color-primary); background: var(--color-base-200); }
.qz-pill-label { display: block; font-weight: 700; }
.qz-pill-sub { display: block; font-size: .88rem; opacity: .72; }

.qz-weightrow { display: flex; align-items: center; gap: .6rem; }
.qz-weightrow input { width: 7rem; }
.qz-input { border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
            padding: .85rem 1rem; font-size: 1.05rem; background: var(--color-base-100);
            color: inherit; width: 100%; }
.qz-input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; }

/* The address step. */
.qz-addr-state { margin: .75rem 0; font-weight: 700; min-height: 1.4rem; }
.qz-addr-state.good { color: var(--color-success); }
.qz-addr-state.warn { color: var(--color-warning); }
/* Finding the exact spot: an address, a shop we know, coordinates, or where you are. */
.qz-find { display: grid; gap: .6rem; }
.qz-find .qz-field { margin-bottom: 0; }
.qz-findrow { display: flex; gap: .5rem; }
.qz-findrow .qz-input { flex: 1; min-width: 0; }
.qz-findbtn { flex: none; padding: 0 1.2rem; border-radius: var(--radius-box); font-weight: 800; cursor: pointer;
              background: var(--color-primary); color: var(--color-primary-content); border: 0; }
.qz-here { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .5rem 1rem;
           border-radius: var(--radius-box); border: 2px dashed var(--color-primary); background: none; color: inherit;
           font-weight: 700; cursor: pointer; }
.qz-here .ti { font-size: 1.3rem; color: var(--color-primary); }
.qz-here:hover { background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
.qz-cands { display: grid; gap: .4rem; margin: .2rem 0 1rem; }
.qz-cand { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .75rem .9rem; cursor: pointer;
           border-radius: var(--radius-box); border: 2px solid var(--color-base-300); background: var(--color-base-100);
           color: inherit; font-weight: 600; }
.qz-cand:hover, .qz-cand:focus-visible { border-color: var(--color-primary); }
.qz-cand .ti { font-size: 1.3rem; flex: none; color: var(--color-primary); }
.qz-step .qz-partners { margin-top: 1.2rem; }

/* The printed quote: the route it was priced on. */
.qd-route { margin-top: .5rem; }
.qd-legs { display: grid; gap: .55rem; }
.qd-legs li { padding: .6rem .8rem; border-radius: .6rem; background: var(--color-base-200); }
.qd-leg-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .8rem; font-weight: 700; }
.qd-leg-head span:first-child { flex: 1 1 14rem; min-width: 0; }
.qd-leg-head span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qd-leg-roads { display: flex; flex-wrap: wrap; gap: .1rem .9rem; font-size: .92rem; opacity: .8; margin-top: .15rem; }
.qd-leg-note { margin-top: .7rem; font-size: .95rem; }
.qd-ceiling { display: flex; gap: .5rem; align-items: flex-start; margin-top: .7rem; padding: .7rem .9rem; border-radius: .6rem;
              border: 2px solid var(--color-success); font-weight: 600; }
.qd-ceiling .ti { color: var(--color-success); font-size: 1.3rem; }


/* The confirmation map. Short enough that the button under it stays on screen on a phone,
   tall enough to recognize a street by. */
.qz-map { margin: 0 0 1rem; border: 2px solid var(--color-base-300);
          border-radius: var(--radius-box); overflow: hidden; background: var(--color-base-200); }
.qz-map-canvas { height: 13rem; width: 100%; }
.qz-map-cap { padding: .6rem .85rem; font-size: .95rem; opacity: .85;
              border-top: 2px solid var(--color-base-300); }
.qz-map .leaflet-container { font: inherit; background: var(--color-base-200); }

/* Scanning a pickup code. */
.qz-scanrow { display: flex; gap: .5rem; align-items: stretch; }
.qz-scanrow input { flex: 1; border: 2px solid var(--color-base-300);
                    border-radius: var(--radius-box); padding: .85rem 1rem; font-size: 1.05rem;
                    background: var(--color-base-100); color: inherit; }
.qz-scan-btn { border: 2px solid var(--color-primary); background: none; color: var(--color-primary);
               border-radius: var(--radius-box); padding: 0 1rem; font-size: 1.4rem; cursor: pointer; }
.qz-scanstage { margin-top: .75rem; border-radius: var(--radius-box); overflow: hidden;
                border: 2px solid var(--color-primary); }
.qz-scanstage video { width: 100%; max-height: 15rem; object-fit: cover; display: block; }

/* The two declarations. Bigger than a normal tick because of what they mean. */
.qz-declare { display: flex; gap: .9rem; align-items: flex-start; cursor: pointer;
              border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
              padding: 1rem 1.1rem; margin-bottom: .85rem; background: var(--color-base-100); }
.qz-declare input { width: 1.5rem; height: 1.5rem; accent-color: var(--color-primary);
                    flex: none; margin-top: .15rem; }
.qz-declare:has(input:checked) { border-color: var(--color-success); background: var(--color-base-200); }
.qz-declare-label { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; }
.qz-declare-sub { display: block; opacity: .82; line-height: 1.5; }

/* What was picked, once it has been. */
.qz-picked { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; font-weight: 700;
             border: 2px solid var(--color-success); border-radius: var(--radius-box);
             padding: .75rem 1rem; background: var(--color-base-100); }
.qz-picked i { color: var(--color-success); font-size: 1.3rem; }
.qz-picked-change { margin-left: auto; background: none; border: none; cursor: pointer;
                    text-decoration: underline; color: inherit; font-weight: 400; }

/* The places we work with. Deliberately the most solid thing on the step: a customer who
   recognises a local name here is the whole argument for using us instead of a chain. */
.qz-partners { margin-bottom: 1.25rem; }
.qz-partners-head { display: flex; align-items: center; gap: .5rem; font-weight: 800;
                    text-transform: uppercase; letter-spacing: .06em; font-size: .85rem;
                    opacity: .75; margin-bottom: .6rem; }
.qz-partners-head i { color: var(--color-primary); font-size: 1.1rem; }
.qz-partner-row { display: grid; gap: .6rem; }
.qz-partner { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left;
              cursor: pointer; border: 2px solid var(--color-base-300);
              border-radius: var(--radius-box); padding: .85rem 1rem;
              background: var(--color-base-100); color: inherit;
              transition: border-color .15s ease, transform .15s ease; }
.qz-partner:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.qz-partner:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.qz-partner.on { border-color: var(--color-success); background: var(--color-base-200); }
.qz-partner-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none;
                   border-radius: var(--radius-box); background: var(--color-primary);
                   color: var(--color-primary-content); font-weight: 800; letter-spacing: .02em; }
.qz-partner-body { display: grid; gap: .1rem; min-width: 0; }
.qz-partner-name { font-size: 1.1rem; font-weight: 700; }
.qz-partner-sub { opacity: .75; }

/* Collecting from somewhere with no shop sign on it. */
.qz-placeaddr { margin-top: 1rem; border: 2px solid var(--color-base-300);
                border-radius: var(--radius-box); padding: 1rem; }

/* Category tiles. */
.qz-cat { gap: .6rem; }
.qz-cat-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
               border-radius: var(--radius-box); background: var(--color-base-200);
               color: var(--color-primary); font-size: 1.3rem; }
.qz-cat:hover .qz-cat-icon { background: var(--color-primary); color: var(--color-primary-content); }

/* Picker rows, with a mark so the list reads as places rather than as a menu. */
.qz-sheet-row { gap: .85rem; align-items: center; }
.qz-sheet-mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
                 border-radius: var(--radius-box); background: var(--color-base-200);
                 font-weight: 800; font-size: .95rem; letter-spacing: .02em; }
.qz-sheet-row:hover .qz-sheet-mark { background: var(--color-primary); color: var(--color-primary-content); }
.qz-sheet-body { display: grid; gap: .1rem; text-align: left; min-width: 0; }
.qz-sheet-meta { margin-left: 0; opacity: .7; font-size: .92rem; }
.qz-sheet-chev { margin-left: auto; opacity: .5; font-size: 1.5rem; line-height: 1; }
.qz-sheet-none { padding: 1.25rem; display: grid; gap: .6rem; }

@media (min-width: 40rem) {
    .qz { padding: 2rem 1.5rem 4rem; }
    .qz-pills { grid-template-columns: 1fr 1fr; }
    .qz-partner-row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- booking ---------- */
.bk-summary { border: 2px solid var(--color-base-300); border-radius: var(--radius-box);
              padding: 1.25rem; background: var(--color-base-100); margin-bottom: 1.5rem; }
.bk-price { display: grid; gap: .1rem; padding-bottom: .9rem; margin-bottom: .9rem;
            border-bottom: 2px solid var(--color-base-200); }
.bk-price-figure { font-size: clamp(2.2rem, 9vw, 3rem); font-weight: 800; line-height: 1;
                   font-variant-numeric: tabular-nums; }
.bk-price-note { opacity: .8; }
.bk-rows { display: grid; gap: .45rem; margin: 0; }
.bk-rows > div { display: grid; grid-template-columns: 1fr; gap: .1rem; }
.bk-rows dt { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em;
              font-weight: 700; opacity: .6; }
.bk-rows dd { margin: 0; font-size: 1.05rem; }
.bk-mono { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.bk-edit { margin-top: 1rem; }
.bk-form { display: grid; gap: .5rem; }
.bk-h2 { font-size: 1.3rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.bk-who { font-size: 1.1rem; font-weight: 700; }
.bk-who-sub { opacity: .8; margin-bottom: .5rem; }
.bk-after { margin-top: .75rem; opacity: .8; }

@media (min-width: 34rem) {
    .bk-rows > div { grid-template-columns: 9rem 1fr; align-items: baseline; gap: 1rem; }
}

/* The leave-it-out instruction. It is the one thing the customer has to do, so it does not
   look like the paragraph around it — and it is deliberately not styled as a warning,
   because it is good news: nobody has to be home. */
.qd-leave { border: 2px solid var(--color-primary); border-radius: var(--radius-box);
            padding: .85rem 1rem; margin-top: 1rem; line-height: 1.45; }
/* The icon sits inline rather than as a flex sibling: as a sibling, a headline that wraps
   indents its first line by the icon's width and starts the second at the margin, which
   reads as a mistake on a phone. */
.qd-leave-head { font-weight: 800; font-size: 1.05rem; margin-bottom: .2rem; }
.qd-leave-head i { margin-right: .35rem; }

/* ---- A booked quote: the corner ribbon and the status at the top ---------------------- */
.qd.is-booked { position: relative; overflow: hidden; }
.qd-ribbon { position: absolute; top: 0; right: 0; width: 13rem; height: 13rem; overflow: hidden; pointer-events: none; z-index: 2; }
.qd-ribbon span { position: absolute; top: 2.6rem; right: -3.6rem; width: 17rem; transform: rotate(45deg);
                  text-align: center; padding: .45rem 0; font-weight: 800; font-size: .95rem; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--color-primary-content); background: var(--color-primary);
                  box-shadow: 0 3px 10px rgb(0 0 0 / .18); border-top: 2px dashed rgb(255 255 255 / .45);
                  border-bottom: 2px dashed rgb(255 255 255 / .45); }
.qd-ribbon.is-scheduled span { background: var(--color-accent); color: var(--color-accent-content);
                               border-color: rgb(0 0 0 / .25); }
.qd-ribbon.is-done span { background: var(--color-success); color: var(--color-success-content); }
.qd-ribbon.is-declined span { background: var(--color-neutral); color: var(--color-neutral-content); }
.qd.is-booked .qd-head { padding-right: 6.5rem; }

.qd-status { display: flex; gap: 1rem; align-items: flex-start; margin: 1rem 0 .5rem; padding: 1.1rem 1.2rem;
             border-radius: var(--radius-box); border: 2px solid var(--color-primary);
             background: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)); font-size: 1.1rem; }
.qd-status.is-scheduled { border-color: var(--color-accent); background: color-mix(in oklab, var(--color-accent) 14%, var(--color-base-100)); }
.qd-status.is-done { border-color: var(--color-success); background: color-mix(in oklab, var(--color-success) 10%, var(--color-base-100)); }
.qd-status.is-declined { border-color: var(--color-base-300); background: var(--color-base-200); }
.qd-status-icon { display: grid; place-items: center; width: 3rem; height: 3rem; flex: none; border-radius: 50%;
                  font-size: 1.6rem; background: var(--color-primary); color: var(--color-primary-content); }
.qd-status.is-scheduled .qd-status-icon { background: var(--color-accent); color: var(--color-accent-content); }
.qd-status.is-done .qd-status-icon { background: var(--color-success); color: var(--color-success-content); }
.qd-status.is-declined .qd-status-icon { background: var(--color-neutral); color: var(--color-neutral-content); }
.qd-status-title { font-size: 1.4rem; font-weight: 800; line-height: 1.2; margin-bottom: .2rem; }

.qd-shared { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--radius-box);
             border: 2px solid var(--color-accent); background: color-mix(in oklab, var(--color-accent) 14%, var(--color-base-100));
             font-size: 1.1rem; }
.qd-shared i { font-size: 1.6rem; flex: none; }

.qd-share { margin-top: 1.5rem; padding: 1.1rem 1.2rem; border-radius: var(--radius-box); border: 2px dashed var(--color-base-300); }
.qd-share-head { font-weight: 800; font-size: 1.15rem; margin-bottom: .25rem; }
.qd-share-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.qd-share-url { flex: 1 1 16rem; min-width: 0; font-size: .95rem; }
.bk-credit { margin-top: 1rem; border-color: var(--color-accent); }
.bk-credit .qz-choice-icon { background: var(--color-accent); color: var(--color-accent-content); }