/**
 * The ask-anywhere chooser.
 *
 * Its own stylesheet because it is its own page: not a listing, not the owner's
 * cabinet. Loaded only when the plugin answers the `registry_quote_anywhere`
 * handshake, so every other page on the site pays nothing for it.
 */
/* ═ Ask-anywhere. A CHOOSER, NOT A FORM — she is describing the thing she wants,
   and a stack of empty boxes asks her to write an essay to do it. Tap a town,
   tap a size, tap a shape, leave a number. The option tiles borrow the shape of
   the estimator on a profile so the two feel like one site. ═ */
/* ⚠️ THE SHORT TOKEN NAMES ARE ALIASES, AND THEY WERE NEVER DEFINED HERE.
   `--line`, `--bd`, `--shadow` and `--warn` are declared in listing.css and
   cabinet.css, so this sheet only worked on a page that had already loaded one
   of those. On the home page `border:1.5px solid var(--line)` was invalid at
   computed-value time — which does not fall back, it drops the whole shorthand —
   and every text box in the form rendered with NO BORDER AT ALL. It read as an
   unstyled form; it was one missing variable.

   Bound to the theme's real tokens, with literals behind them so the sheet also
   stands up on its own. */
.rg-qa{
  --line:  var(--rg-line,   #E7EAF0);
  --bd:    var(--rg-ink,    #1A2230);
  --muted: var(--rg-muted,  #62707F);
  --warn:  var(--rg-warn,   #9A6A12);
  --shadow:var(--rg-shadow, 0 1px 2px rgba(16,32,64,.06), 0 8px 24px rgba(16,32,64,.07));
}

.rg-qa .qa-narrow{max-width:760px}
.rg-qa .qa-hero{padding:34px 0 6px;text-align:center}
.rg-qa .qa-hero h1{margin:0 0 10px;font-size:clamp(26px,4.2vw,38px);line-height:1.15;letter-spacing:-.02em}
.rg-qa .qa-lede{margin:0 auto;max-width:56ch;color:var(--muted,#7e939b);font-size:16px;line-height:1.6}

.rg-qa .qa-form{margin:18px 0 60px}
.rg-qa .qa-step{background:#fff;border:1px solid var(--line);border-radius:var(--r12,14px);
                padding:22px 22px 24px;margin:0 0 14px;box-shadow:var(--shadow)}
.rg-qa .qa-step h2{display:flex;align-items:center;gap:11px;margin:0 0 14px;font-size:18px;letter-spacing:-.01em}
.rg-qa .qa-step h2 i{flex:0 0 27px;height:27px;border-radius:50%;background:var(--brand,#1d4ed8);color:#fff;
                     font-style:normal;font-size:14px;font-weight:700;display:grid;place-items:center}

/* the town box gets the room, because it is the question the page is about */
.rg-qa .qa-pick input{width:100%;padding:15px 16px;font-size:17px;border:1.5px solid var(--line);
                      border-radius:var(--r8,9px);background:#fff;color:inherit}
.rg-qa .qa-pick input:focus{outline:0;border-color:var(--brand,#1d4ed8);box-shadow:0 0 0 3px rgba(29,78,216,.13)}
.rg-qa .qa-pick input.picked{border-color:#1f6b3f;background:#f2f9f5}

.rg-qa .qa-glab{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
                color:var(--muted,#7e939b);margin:16px 0 8px}
.rg-qa .qa-group:first-of-type .qa-glab{margin-top:4px}
.rg-qa .qa-opts{display:flex;flex-wrap:wrap;gap:8px}
.rg-qa .qa-opt{appearance:none;font:inherit;font-size:14px;font-weight:600;cursor:pointer;
               padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);
               background:#fff;color:var(--bd);transition:background .12s,border-color .12s,color .12s}
.rg-qa .qa-opt:hover{border-color:var(--brand,#1d4ed8);color:var(--brand,#1d4ed8)}
.rg-qa .qa-opt.on{background:var(--brand,#1d4ed8);border-color:var(--brand,#1d4ed8);color:#fff}

.rg-qa .qa-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media(max-width:600px){.rg-qa .qa-pair{grid-template-columns:1fr}}
.rg-qa label span{display:block;font-size:12.5px;font-weight:600;margin:0 0 5px;color:var(--bd)}
.rg-qa input[type=text],.rg-qa input[type=email],.rg-qa input[type=tel],
.rg-qa select,.rg-qa textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);
   border-radius:var(--r8,9px);font:inherit;background:#fff;color:inherit}
.rg-qa textarea{resize:vertical}
.rg-qa .qa-msg{display:block}

.rg-qa .qa-hint{font-size:12.5px;color:var(--muted,#7e939b);margin:8px 0 0;line-height:1.5}
.rg-qa .qa-hint--top{margin:-6px 0 4px}
.rg-qa .qa-from{display:flex;flex-direction:column;gap:2px;background:#eef4fb;border-radius:var(--r8,9px);
                padding:12px 15px;margin:0 0 14px}
.rg-qa .qa-from span{font-size:12px;color:var(--muted,#7e939b)}
.rg-qa .qa-err{background:#fdf6e7;color:var(--warn);border-radius:var(--r8,9px);padding:12px 15px;
               font-size:14.5px;margin:0 0 14px}

.rg-qa .qa-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 2px 18px;font-size:13.5px;
                   line-height:1.5;color:var(--bd)}
.rg-qa .qa-consent input{margin-top:2px;flex:0 0 auto}
.rg-qa .qa-send{display:block;width:100%;padding:16px 20px;border:0;border-radius:var(--r8,9px);
                background:var(--brand,#1d4ed8);color:#fff;font:inherit;font-size:16.5px;font-weight:700;
                cursor:pointer}
.rg-qa .qa-send:hover{filter:brightness(.93)}
.rg-qa .qa-fine{text-align:center;font-size:12.5px;color:var(--muted,#7e939b);margin:11px 0 0}

.rg-qa .menu .none{padding:10px 12px;font-size:13.5px;color:var(--muted,#7e939b)}

/* the thank-you */
.rg-qa .qa-done{background:#fff;border:1px solid var(--line);border-radius:var(--r12,14px);
                padding:44px 30px;margin:44px 0 70px;text-align:center;box-shadow:var(--shadow)}
.rg-qa .qa-tick{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
                background:#e8f3ec;color:#1f6b3f}
.rg-qa .qa-done h1{margin:0 0 10px;font-size:27px;letter-spacing:-.02em}
.rg-qa .qa-go{display:inline-block;margin-top:20px;padding:12px 22px;border-radius:var(--r8,9px);
              background:var(--brand,#1d4ed8);color:#fff;font-weight:700;text-decoration:none}

/* ── the same form as a band inside another page ──────────────────────────────
   The dedicated page owns a hero and a sent-state; on the home page and on a
   place page this is one section among several, so it needs a top and bottom
   edge of its own and a heading that behaves like the other bands'.
   ⚠️ Class names checked against every stylesheet first — `rg-qablock`,
   `qab-h` and `qab-lede` were all unused. This theme has form: a new block
   quietly restyled half the site once by reusing an ordinary word. */
.rg-qablock{padding:8px 0 4px}
.rg-qablock .qab-h{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px);line-height:1.15;
                   letter-spacing:-.02em}
.rg-qablock .qab-lede{margin:0 0 18px;max-width:62ch;font-size:16px;line-height:1.6;
                      color:var(--rg-muted,#5A7078)}
/* Inside a band the form does not need the page's outer breathing room. */
.rg-qablock .qa-form{margin-top:0}

/* ⚠️ THE BAND CARRIES `rg-qa` AS WELL AS `rg-qablock`, deliberately. Every one
   of the 38 rules above is written `.rg-qa .something`, because the form only
   ever existed on the dedicated page. Dropped into the home page or a city page
   without that ancestor it rendered as naked browser inputs — the markup was
   right and the whole design was simply absent. Carrying both classes was the
   honest fix; rewriting 38 selectors to a looser scope would have let this
   form's styling leak into anything that reused a name like `.menu`. */
.rg-qablock .qa-done{margin:0;padding:34px 26px}
.rg-qablock .qa-done h2{margin:0 0 10px;font-size:24px;letter-spacing:-.02em}

/* ── THE COMPACT ROW ──────────────────────────────────────────────────────────
   One card, three numbered steps, one line. The tall version put three white
   cards and 25 chips on the home page and stood 1,543px high; this is the same
   form and the same fields, laid out as a strip a reader can fill without
   leaving what they were reading.

   ⚠️ IT IS A GRID, NOT A FLEX ROW WITH WIDTHS. The steps have to line their
   labels up with each other while their fields stay different sizes, and the
   whole thing has to become one column on a phone — `auto-fit` cannot do the
   first and hand-set percentages cannot do the last. */
.rg-qablock .qa-form.qa-compact{margin:0;background:#fff;border:1px solid var(--line);
   border-radius:var(--r12,14px);padding:18px 20px 14px;box-shadow:var(--shadow)}

.qa-compact .qac-row{display:grid;gap:16px 18px;align-items:end;
   grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.3fr) auto}

.qa-compact .qac-step{min-width:0}
.qa-compact .qac-lab{display:flex;align-items:center;gap:8px;margin:0 0 7px;
   font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
   color:var(--muted,#7e939b)}
.qa-compact .qac-lab i{flex:0 0 20px;height:20px;border-radius:50%;background:var(--brand,#1d4ed8);
   color:#fff;font-style:normal;font-size:11.5px;font-weight:700;display:grid;place-items:center;
   letter-spacing:0}

/* Two fields inside a step share its width rather than stacking — the point of
   the row is that everything is visible at once. */
.qa-compact .qac-fields{display:flex;gap:8px}
.qa-compact .qac-fields > *{flex:1 1 0;min-width:0}

/* ⚠️ ONE HEIGHT, SET ONCE, FOR ALL FOUR CONTROL TYPES. Left to their own padding
   an input came out 47px, a select 43px and the button 48px — so the row had
   three baselines and the first step's label sat 5px below the other two. A
   fixed height is the only thing that makes a text box, a native select and a
   button agree, because each pads differently and a select will not be told. */
.qa-compact input[type=text],.qa-compact input[type=email],
.qa-compact select,.qa-compact .qac-send{height:46px;line-height:1.2}
.qa-compact input[type=text],.qa-compact input[type=email],.qa-compact select{
   padding:0 12px;font-size:14.5px}

.qa-compact .qac-send{display:block;width:auto;padding:0 26px;font-size:15px;
   border-radius:var(--r8,9px);white-space:nowrap}

/* The quiet line under the row: consent on the left, the promise on the right. */
.qa-compact .qac-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
   gap:6px 18px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.qa-compact .qac-foot .qa-consent{margin:0;font-size:12.5px}
.qa-compact .qac-foot .qa-fine{margin:0;text-align:right;font-size:12.5px}
.qa-compact .qac-more{margin-left:8px;color:var(--brand,#1d4ed8);font-weight:600;text-decoration:none}
.qa-compact .qac-more:hover{text-decoration:underline}

/* ⚠️ TWO BREAKPOINTS, NOT ONE. Straight from four columns to one leaves a
   tablet with a 700px-wide name field beside a 90px send button. The middle
   step pairs the two short questions first, and only a phone gets the stack. */
@media(max-width:1040px){
  .qa-compact .qac-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .qa-compact .qac-step--you{grid-column:1 / -1}
  .qa-compact .qac-send{grid-column:1 / -1;width:100%;padding:14px 20px}
}
@media(max-width:560px){
  .rg-qablock .qa-form.qa-compact{padding:16px 15px 12px}
  .qa-compact .qac-row{grid-template-columns:1fr;gap:14px}
  /* ⚠️ AND `flex` HAS TO BE RESET WITH THE DIRECTION. `flex:1 1 0` sizes the
     MAIN axis, so the moment the fields stack it stops meaning "share the width"
     and starts meaning "share the height" — the boxes collapsed to a third of
     their height each and the row looked broken on every phone. */
  .qa-compact .qac-step--what .qac-fields,
  .qa-compact .qac-step--you .qac-fields{flex-direction:column}
  .qa-compact .qac-fields > *{flex:0 0 auto}
  .qa-compact .qac-foot{flex-direction:column;align-items:flex-start}
  .qa-compact .qac-foot .qa-fine{text-align:left}
}