/* ── How a question looks ─────────────────────────────────────────────────────────────────
   Loaded by BOTH the public form and the builder, because the builder renders the same
   markup (templates/forms/_field.html) and markup without its styling is a different thing
   on screen. Splitting the two was the first thing to go wrong when the builder started
   drawing real questions: the name boxes stacked and the radio choices ran together, which
   reads as "the builder does not look like the form" — exactly the complaint this change
   set out to answer.

   ★ Colours come from the app's tokens in base.html, so this file carries no palette of its
     own and both themes work without a second definition here.
*/
.ffield{margin-bottom:16px;flex:1 1 100%;min-width:0}
.ffield-half{flex:0 1 calc(50% - 8px)}
/* ⛔ Two columns of inputs on a phone is not a saving. Everything is full width below this. */
@media(max-width:560px){ .ffield-half{flex:1 1 100%} }
.fields-flow{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 16px}
/* app.css also defines .flbl — the tiny uppercase label an admin form uses. This sheet
   loads after it and must state the question label FULLY, or the admin rule's
   text-transform leaks through and every question shouts. */
.flbl{display:block;font-size:14px;font-weight:500;color:var(--g900);margin-bottom:6px;
  text-transform:none;letter-spacing:normal}
/* Required is identity, not an error — red is kept for things that went wrong. */
.flbl .req{color:var(--brand);margin-left:2px;font-weight:700}
.help{font-size:12.5px;color:var(--g500);margin-top:5px}
.fi,.fs,.ft{width:100%;padding:10px 13px;border:1px solid var(--g200);border-radius:var(--r);font-family:var(--ff);font-size:14px;color:var(--g900);background:var(--surface);outline:none;-webkit-appearance:none;appearance:none}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--action-bright);box-shadow:0 0 0 3px var(--action-ring)}
.fs{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A6E85' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.ft{resize:vertical;min-height:96px;line-height:1.5}
.fi[type=file]{padding:8px 12px;font-size:13px}
.radio-group,.check-group{display:flex;flex-direction:column;gap:8px}
/* 1.14.0: an answer the personal link filled in */
.locked-answer{background:var(--g50);color:var(--g700);cursor:default}
/* 1.11.0: a calculated answer -- read-only, and one kept out of sight takes no room */
.calc-box{display:flex;align-items:center;gap:6px}
.calc-prefix{font-weight:700;color:var(--g700)}
.calc-in{background:var(--g50);font-weight:700;max-width:220px}
.ffield-unseen{display:none !important}
/* 1.10.0: a table question -- scrolls sideways on a phone rather than squeezing */
.tq-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tq{border-collapse:collapse;width:100%;font-size:13.5px}
.tq th,.tq td{border-bottom:1px solid var(--g200);padding:6px 6px;text-align:left;vertical-align:middle}
.tq thead th{font-size:12px;font-weight:700;color:var(--g600)}
.tq tbody th{font-weight:600;color:var(--g700);white-space:nowrap;padding-right:12px}
.tq-pick td,.tq-check td,.tq-pick thead th,.tq-check thead th{text-align:center}
.tq td input[type=radio],.tq td input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
.tq .tq-in{min-width:90px;padding:7px 9px}
.tq-x{width:30px}
.tq-del{border:0;background:none;color:var(--g400);font-size:17px;cursor:pointer;padding:2px 6px}
.tq-del:hover{color:var(--red)}
.tq-add{margin-top:8px;border:1px dashed var(--g300);background:none;border-radius:var(--r);padding:7px 14px;font:inherit;font-size:13px;color:var(--brand-deep);cursor:pointer}
.tq-add[disabled]{opacity:.5;cursor:not-allowed}
/* 1.8.0: an agreement's terms, and a long one in its own scrolling box */
.terms{font-size:13.5px;line-height:1.6;color:var(--g700);margin:0 0 10px}
.terms-scroll{max-height:220px;overflow-y:auto;border:1px solid var(--g200);border-radius:var(--r);padding:12px 14px;background:var(--g50)}
.agree-item{font-weight:600;font-size:14px;text-transform:none;letter-spacing:0;color:var(--g900)}
/* 1.4.0: a scale -- one row of numbered boxes that fits a phone up to ten */
.scale-row{display:flex;gap:6px}
.scale-pt{flex:1 1 0;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;height:44px;border:1px solid var(--g200);border-radius:var(--r);cursor:pointer;font-size:15px;font-weight:600;color:var(--g700);transition:all .1s}
.scale-pt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.scale-pt:hover{background:var(--brand-tint);border-color:var(--brand)}
.scale-pt:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
.scale-pt:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
.scale-ends{display:flex;justify-content:space-between;gap:12px;margin-top:5px;font-size:12px;color:var(--g500)}
.radio-item,.check-item{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;padding:9px 12px;border:1px solid var(--g200);border-radius:var(--r);transition:all .1s}
.radio-item:hover,.check-item:hover{background:var(--brand-tint);border-color:var(--brand)}
.radio-item input,.check-item input{width:16px;height:16px;accent-color:var(--brand);flex-shrink:0}
.rpt-section{margin-bottom:8px}
.rpt-instance{background:var(--surface);border:1px solid var(--g200);border-radius:var(--r);padding:14px 16px;margin-bottom:12px}
.rpt-instance-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.rpt-instance-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--brand-deep)}
.rpt-remove{background:none;border:none;color:var(--red);font-size:12px;font-weight:600;cursor:pointer;padding:2px 6px}
.rpt-remove:hover{text-decoration:underline}
.rpt-add{width:100%;padding:10px;border:1px dashed var(--g200);border-radius:var(--r);background:var(--g50);color:var(--action);font-family:var(--ff);font-size:13px;font-weight:600;cursor:pointer;margin-bottom:16px}
.rpt-add:hover{background:var(--brand-tint);border-color:var(--action)}
.rpt-add:disabled{opacity:.5;cursor:not-allowed}
.fi-error,.fs-error,.ft-error{border-color:var(--red) !important;box-shadow:0 0 0 3px color-mix(in srgb,var(--y-red) 18%,transparent) !important}
.sec-collapse{border:1px solid var(--g200);border-radius:var(--r);margin-bottom:14px;background:var(--surface)}
.sec-summary{padding:11px 14px;font-size:14px;font-weight:600;color:var(--g900);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.sec-summary::-webkit-details-marker{display:none}
.sec-summary::before{content:'\25B8';color:var(--g500);transition:transform .15s;display:inline-block}
.sec-collapse[open] > .sec-summary::before{transform:rotate(90deg)}
.sec-collapse-body{padding:0 14px 12px}
.fld-heading{font-size:19px;font-weight:700;color:var(--g900);margin:6px 0 2px}
.fld-subheading{font-size:13px;color:var(--g500);margin-bottom:4px;line-height:1.5}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.sub-grid{grid-template-columns:1fr}}
.sub-lbl{font-size:11px;color:var(--g500);margin:3px 0 8px}
.sig-wrap{border:1px solid var(--g300);border-radius:var(--r);background:#fff;overflow:hidden}
.sig-canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}
.sig-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;border-top:1px solid var(--g200);background:var(--g50)}
.sig-hint{font-size:11px;color:var(--g500)}
.sig-clear{border:1px solid var(--g200);background:#fff;border-radius:var(--r);font-size:12px;padding:4px 10px;cursor:pointer;font-family:var(--ff)}
/* 0.14.0: a required question left unanswered -- the whole question, outlined. An outline takes
   no space, so nothing on the form moves. */
.ffield.ff-missing{outline:2px solid var(--red);outline-offset:6px;border-radius:2px}
.ff-missing-note{color:var(--red);font-size:13px;font-weight:700;margin-top:6px}
/* Date and time boxes were a few pixels taller than a text box: the browser pads their parts. */
.fi[type=date]::-webkit-datetime-edit-fields-wrapper,.fi[type=time]::-webkit-datetime-edit-fields-wrapper{padding:0}
.fi[type=date]::-webkit-calendar-picker-indicator,.fi[type=time]::-webkit-calendar-picker-indicator{padding:0;margin:0}
/* Yes / No buttons -- here, not in the public page, so the builder draws them as the form does
   (0.15.0: in the builder they were two bare browser buttons). */
.yesno-row{display:flex;gap:10px}
.yesno-btn{flex:1;padding:11px;border:1px solid var(--g200);border-radius:var(--r);background:var(--surface);font-size:14px;cursor:pointer;font-family:var(--ff);transition:all .12s;text-align:center}
.yesno-btn:hover{background:var(--brand-tint);border-color:var(--action)}
.yesno-btn.selected{background:var(--brand);border-color:var(--brand);color:#fff}
/* 0.15.0: a picture in a text block fits the form, on a phone too. */
.text-block-content img{display:block;max-width:100%;height:auto;margin:6px 0}