/* ─────────────────────────────────────────────────────────────────────────
   fields.css — how a form question looks, wherever it is asked.

   These rules lived in book.css, and app/book/fields.js — the renderer they
   belong to — was later imported by the Jobs screen. The markup came across
   and the stylesheet did not, so every widget inside the app rendered as a
   run of bare text: five colour options as the words "Blonde Brown Black Red
   Grey", a raw browser file button, a blue system slider.

   Reusing a renderer means reusing what draws it. One file, loaded by the
   booking page and by the app, so a widget added once looks the same in both.

   Everything here is a .q* class emitted by fields.js. Nothing else uses
   them, and nothing here knows where the form is being shown — full-screen
   and panel layout are the caller's business.
   ───────────────────────────────────────────────────────────────────────── */

.qintro{ font-size:14px; color:var(--mid); line-height:1.55; margin:0 0 16px }
.qfields{ display:flex; flex-direction:column; gap:18px; margin:4px 0 4px }
.qfield{ display:flex; flex-direction:column; gap:7px }
/* `display:flex` beats the HTML hidden attribute, so a conditional question
   was hidden in the DOM and on the screen at the same time. Anything that
   sets display has to say this, and saying it once here is why. */
.qfield[hidden]{ display:none }
.qfield > .fld{ margin:0 }
.qhelp{ font-size:12.5px; color:var(--faint); line-height:1.45; margin:0 }
.qerr{ font-size:12.5px; color:var(--attn); font-weight:600; margin:0 }
.qfield.bad input, .qfield.bad textarea, .qfield.bad select{ border-color:var(--attn) }

/* one of these / any of these, as buttons */
.qbtns{ display:grid; grid-template-columns:repeat(var(--cols,3), minmax(0,1fr)); gap:8px }
.qbtn{ min-height:46px; padding:10px 12px; border:1.5px solid var(--line);
  border-radius:12px; background:var(--white); font-size:14px; font-weight:600;
  color:var(--ink); transition:.12s }
.qbtn:hover{ border-color:var(--mid) }
.qbtn.on{ border-color:var(--orange); background:var(--orange-l); color:var(--orange-d) }

.qcards{ display:grid; grid-template-columns:repeat(var(--cols,2), minmax(0,1fr)); gap:8px }
.qcard{ text-align:left; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:12px; background:var(--white); transition:.12s }
.qcard b{ display:block; font-size:14px; font-weight:700 }
.qcard span{ display:block; font-size:12.5px; color:var(--faint); margin-top:2px; line-height:1.4 }
.qcard.on{ border-color:var(--orange); background:var(--orange-l) }
.qcard.on b, .qcard.on span{ color:var(--orange-d) }

.qchips{ display:flex; flex-wrap:wrap; gap:7px }
.qchip{ min-height:40px; padding:8px 14px; border:1.5px solid var(--line);
  border-radius:999px; background:var(--white); font-size:13.5px; font-weight:600 }
.qchip.on{ border-color:var(--orange); background:var(--orange-l); color:var(--orange-d) }

.qswatch{ display:flex; flex-wrap:wrap; gap:10px }
.qsw{ width:44px; height:44px; border-radius:50%; background:var(--c, #ccc);
  border:2px solid var(--line); position:relative }
.qsw.on{ border-color:var(--ink); box-shadow:0 0 0 3px var(--cream) inset }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

/* numbers */
.qstep{ display:flex; align-items:center; gap:12px }
.qstepb{ width:46px; height:46px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--white); font-size:20px; font-weight:700; line-height:1 }
.qstepb:active{ background:var(--cream) }
.qstepv{ font-size:19px; font-weight:800; min-width:2.5ch; text-align:center }
.qunit{ font-size:13px; color:var(--faint) }

.qslider{ display:flex; flex-direction:column; gap:6px }
.qslider input[type=range]{ width:100%; height:44px; accent-color:var(--orange) }
.qslabels{ display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; color:var(--faint) }
.qsval{ font-size:15px; font-weight:800; color:var(--ink) }

.qrate{ display:flex; gap:4px }
.qstar{ font-size:30px; line-height:1; color:var(--line); padding:4px 2px;
  min-width:44px; min-height:44px }
.qstar.on{ color:var(--orange) }

.qscale{ display:flex; flex-direction:column; gap:6px }
.qsrow{ display:flex; gap:6px; flex-wrap:wrap }
.qsb{ flex:1 1 40px; min-width:40px; min-height:44px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--white); font-size:14px; font-weight:700 }
.qsb.on{ border-color:var(--orange); background:var(--orange-l); color:var(--orange-d) }

/* yes or no */
.qset{ display:flex; flex-direction:column; gap:8px }
.qcheck{ display:flex; align-items:flex-start; gap:10px; min-height:44px;
  padding:10px 12px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--white); cursor:pointer; font-size:14px }
.qcheck input{ width:20px; height:20px; margin-top:1px; accent-color:var(--orange); flex:none }
.qcheck span{ line-height:1.4 }
.qcheck span i{ display:block; font-style:normal; font-size:12.5px; color:var(--faint) }
.qcheck:has(input:checked){ border-color:var(--orange); background:var(--orange-l) }

.qswitch{ display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer }
.qswitch input{ position:absolute; opacity:0 }
.qtrack{ width:48px; height:28px; border-radius:999px; background:var(--line);
  position:relative; transition:.15s; flex:none }
.qtrack i{ position:absolute; top:3px; left:3px; width:22px; height:22px;
  border-radius:50%; background:var(--white); transition:.15s;
  box-shadow:0 1px 3px rgba(0,0,0,.2) }
.qswitch input:checked + .qtrack{ background:var(--orange) }
.qswitch input:checked + .qtrack i{ left:23px }
.qsl{ font-size:14px }

/* the policy and the deposit */
.qpolicy{ background:var(--cream); border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px; margin-top:4px }
.qpolicy p{ font-size:13px; color:var(--mid); line-height:1.5; margin:0 }
.qdeposit{ font-size:13.5px; color:var(--ink); margin:4px 0 0; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--cream-2, #FBF9F5) }
.qdeposit p{ margin:0 0 6px }
.qdeposit ul{ margin:0; padding-left:18px; color:#4A423B; font-weight:500; line-height:1.5 }
.qdeposit li + li{ margin-top:2px }

@media (max-width:420px){
  .qbtns{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .qcards{ grid-template-columns:1fr }
}

/* ── a signature ────────────────────────────────────────────────────────
   Big enough to sign in, which on a tablet means taller than a text field
   and edge to edge. The line under it is the thing people sign on, so it is
   drawn rather than implied by the box. */
.qsign{ border:1.5px solid var(--line); border-radius:12px; background:var(--white);
        padding:6px 6px 0; touch-action:none }
.qsign.signed{ border-color:var(--orange) }
.qsign-c{ display:block; width:100%; height:150px; cursor:crosshair;
          touch-action:none }
.qsign-b{ display:flex; align-items:center; justify-content:space-between;
          gap:10px; border-top:1px solid var(--line); margin-top:2px;
          padding:8px 6px }
.qsign-h{ font-size:12.5px; color:var(--faint) }
.qsign.signed .qsign-h{ color:var(--orange-d); font-weight:600 }
.qsign-x{ font:inherit; font-size:13px; font-weight:600; background:none;
          border:0; color:var(--mid); padding:4px 6px; cursor:pointer }
.qsign-x:hover{ color:var(--ink) }
@media (max-width:820px){ .qsign-c{ height:190px } }

/* The plain answers - a line, a paragraph, a number, a date, a list - were
   never styled here, so a business's own questions drew as the browser's
   square default under the booking page's cream fields, and the same on a
   job's checklist (walk, 26 Sep). The same field as .fld, wherever a form is
   drawn. */
.qfield input[type=text], .qfield input[type=email], .qfield input[type=tel],
.qfield input[type=number], .qfield input[type=date], .qfield input[type=time],
.qfield input:not([type]), .qfield textarea, .qfield select{
  width:100%; border:1.5px solid var(--line); background:var(--cream-2);
  border-radius:14px; padding:13px 15px; font:inherit; font-size:15px;
  font-weight:500; color:var(--ink); outline:none }
.qfield textarea{ resize:vertical; line-height:1.5; min-height:88px }
.qfield input:focus, .qfield textarea:focus, .qfield select:focus{
  border-color:var(--orange); background:var(--white) }