/* Task Helper — REQUEST FORMS in the app (BRIEF-1184 RF-2 / RF-4, lane TASK HELPER FORM BUILDER). Copyright Rapid Surveys Pty Ltd.
 * Own namespace .rqf-*; colours from the page's tokens (--accent, --line, --muted, --err, --ok) with plain fallbacks. Targets ≥ 44 px. */
.rqf-btn { min-height: 44px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line, #d6dbe2); background: var(--card, #fff);
           color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.rqf-btn[disabled] { opacity: .5; cursor: default; }
.rqf-primary { background: var(--accent, #2f6df6); border-color: var(--accent, #2f6df6); color: var(--accent-ink, #fff); font-weight: 600; }
.rqf-danger { color: var(--err, #d23f3f); }
.rqf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.rqf-msg { color: var(--err, #d23f3f); margin: 8px 0 0; }
.rqf-meta { color: var(--muted, #5c6878); font-size: 14px; margin: 2px 0 8px; }
.rqf-forms { display: grid; gap: 12px; margin-top: 12px; }
.rqf-card { border: 1px solid var(--line, #d6dbe2); border-radius: 12px; padding: 12px 14px; }
.rqf-card h3 { margin: 0 0 2px; font-size: 17px; }
.rqf-off { opacity: .7; }
.rqf-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rqf-link .rqf-btn { height: 44px; }
.rqf-link input { flex: 1 1 220px; min-width: 0; min-height: 44px; font: 14px ui-monospace, Menlo, monospace; }
.rqf-qr { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.rqf-qr img { width: 160px; height: 160px; background: #fff; border-radius: 6px; image-rendering: pixelated; }
.rqf-editor h3 { margin: 0 0 12px; }
.rqf-field { margin: 0 0 14px; }
.rqf-field > label { display: block; font-weight: 600; margin: 0 0 4px; }
.rqf-field .hint { margin: 0 0 6px; }
.rqf-field input, .rqf-field select, .rqf-field textarea { width: 100%; min-height: 44px; font: inherit; }
.rqf-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.rqf-check input { width: 20px; height: 20px; margin: 0; flex: none; }
.rqf-questions { margin: 0 0 14px; }
.rqf-questions h4 { margin: 0 0 4px; }
.rqf-q { border: 1px solid var(--line, #d6dbe2); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px; }
.rqf-q-off { opacity: .75; }
.rqf-q-top { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.rqf-q-top input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.rqf-q-top strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rqf-q-top .rqf-btn { min-width: 44px; padding: 0 8px; }
.rqf-type { font-size: 12px; color: var(--muted, #5c6878); }
.rqf-q-more { display: grid; gap: 6px; padding: 0 0 6px 30px; }
.rqf-q-more input[type="text"] { min-height: 44px; font: inherit; width: 100%; }
.rqf-tell { border: 1px solid var(--line, #d6dbe2); border-radius: 10px; padding: 8px 12px; margin: 0 0 14px; }
.rqf-tell legend { font-weight: 600; padding: 0 4px; }
.rqf-people { padding-left: 30px; max-height: 240px; overflow: auto; }
.rqf-chip { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 999px;
            background: var(--accent, #2f6df6); color: var(--accent-ink, #fff); vertical-align: middle; margin-left: 6px; }
.rqf-strip { border: 1px solid var(--line, #d6dbe2); border-left: 4px solid var(--muted, #8a94a2); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.rqf-strip.rqf-pending { border-left-color: var(--accent, #2f6df6); }
.rqf-strip p { margin: 0 0 4px; }
.rqf-who a { color: var(--accent, #2f6df6); overflow-wrap: anywhere; }
.rqf-sep { color: var(--muted, #5c6878); }
.rqf-hint { font-size: 14px; color: var(--muted, #5c6878); }
.rqf-empty { border: 1px dashed var(--line, #d6dbe2); border-radius: 10px; padding: 14px; color: var(--muted, #5c6878); text-align: center; margin: 0 0 14px; }
/* ── the fuller builder (§45 FULLER BUILDER; BRIEF-1194 RF-7b) ── */
.rqf-shell { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 20px; align-items: start; }
.rqf-tabs { display: none; gap: 6px; margin: 0 0 12px; }
.rqf-tabs .rqf-btn[aria-selected="true"] { background: var(--accent, #2f6df6); border-color: var(--accent, #2f6df6); color: var(--accent-ink, #fff); font-weight: 600; }
.rqf-preview { position: sticky; top: 8px; }
.rqf-phead { margin: 0 0 6px; font-weight: 600; }
.rqf-frame { width: 390px; max-width: 100%; height: min(760px, 80vh); border: 1px solid var(--line, #d6dbe2); border-radius: 18px; background: #f4f5f7; display: block; }
.rqf-pmsg { color: var(--muted, #5c6878); font-size: 14px; margin: 8px 0 0; }
/* BRIEF-1215: the layout follows the EDITOR's own width (set by request-forms.js from a ResizeObserver), never the window's */
.rqf-shell[data-layout="stack"] { grid-template-columns: minmax(0, 1fr); }
.rqf-tabs:not([hidden]) { display: flex; }
.rqf-shell[data-layout="stack"][data-tab="edit"] .rqf-preview, .rqf-shell[data-layout="stack"][data-tab="preview"] .rqf-editor { display: none; }
.rqf-shell[data-layout="stack"] .rqf-frame { width: min(390px, 100%); height: 75vh; margin: 0 auto; }
/* the editor's own overlay: above the Fields panel (.overlay 50), under menus (60); anchored to the top; as wide as it needs */
.rqf-ovl { position: fixed; inset: 0; z-index: 55; background: rgba(20, 28, 40, .45); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 0; }
.rqf-ovl-card { position: relative; box-sizing: border-box; width: min(1200px, calc(100vw - 48px)); background: var(--card, #fff); color: var(--ink, #1c2430); border: 1px solid var(--line, #d6dbe2); border-radius: 14px; padding: 60px 24px 24px; box-shadow: 0 12px 40px rgba(20, 28, 40, .25); }
.rqf-ovl-x { position: absolute; top: 10px; right: 10px; min-width: 44px; }
.rqf-ovl-card > .rqf-tabs { margin-top: -8px; }
.rqf-rows { display: grid; gap: 8px; margin: 0 0 8px; }
.rqf-rows > .rqf-q { margin: 0; }
.rqf-q-top { flex-wrap: wrap; }
.rqf-grip { cursor: grab; touch-action: none; user-select: none; font-size: 20px; line-height: 1; padding: 10px 4px; color: var(--muted, #5c6878); min-width: 28px; text-align: center; }
.rqf-rowbtns { display: inline-flex; gap: 4px; margin-left: auto; }
.rqf-rowbtns .rqf-btn { min-width: 44px; padding: 0 8px; }
.rqf-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line, #d6dbe2); color: var(--muted, #5c6878); }
.rqf-tag-off { border-style: dashed; }
.rqf-q-fixed { background: var(--hover, #f3f6fb); }
.rqf-also { padding: 0 0 4px 30px; font-size: 14px; }
.rqf-q-more { display: grid; gap: 10px; padding: 4px 0 8px 30px; }
.rqf-set > label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.rqf-set .hint { margin: 4px 0 0; font-size: 13px; }
.rqf-set input[type="text"], .rqf-set input[type="date"], .rqf-set select, .rqf-set textarea { width: 100%; min-height: 44px; font: inherit; }
.rqf-choices { border: 1px solid var(--line, #d6dbe2); border-radius: 8px; padding: 4px 10px; margin: 0; }
.rqf-choices legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.rqf-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rqf-lay { background: var(--hover, #f3f6fb); }
.rqf-lay-section .rqf-secname { flex: 1 1 160px; min-width: 0; min-height: 44px; font: inherit; font-weight: 600; }
.rqf-lay-text textarea { width: 100%; font: inherit; margin: 4px 0 6px; }
.rqf-small { font-size: 14px; }
.rqf-dragging { opacity: .5; }
.rqf-dropbefore { box-shadow: 0 -3px 0 var(--accent, #2f6df6); }
.rqf-dropafter { box-shadow: 0 3px 0 var(--accent, #2f6df6); }
.rqf-picker { border: 1px solid var(--line, #d6dbe2); border-radius: 10px; padding: 8px 12px; margin: 8px 0; display: grid; gap: 6px; }
.rqf-pgroup { margin: 6px 0 0; font-weight: 600; font-size: 14px; color: var(--muted, #5c6878); }
.rqf-pick { justify-content: flex-start; text-align: left; }
.rqf-sent { margin: 6px 0 0; }
.rqf-sent > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.rqf-answers { display: grid; grid-template-columns: minmax(90px, max-content) 1fr; gap: 4px 12px; margin: 4px 0 0; }
.rqf-answers dt { color: var(--muted, #5c6878); }
.rqf-answers dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 599px) {   /* BRIEF-1199: a phone keeps the question's name readable — tags + buttons wrap under it, never squeeze it to a letter */
  .rqf-q-top strong { flex: 1 1 9em; min-width: 9em; }
  .rqf-rowbtns { margin-left: auto; }
}
.rqf-pcnote { border: 1px dashed var(--line, #d6dbe2); border-radius: 10px; padding: 12px 14px; color: var(--muted, #5c6878); margin: 0 0 4px; }   /* BRIEF-1208: below 768 px */
.rqf-asked { font-size: 13px; color: var(--muted, #5c6878); font-style: italic; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* BRIEF-1217: the public wording, beside the field's name — it gives way, the name never does */
.rqf-q-top strong { flex: 0 0 auto; max-width: 100%; }
/* BRIEF-1217: the grouped picker (form-layout's .fp-*) inside the builder; "+ Add field here" on a section; the row just added */
.rqf-picker .fp-list { max-height: 50vh; overflow-y: auto; }
.rqf-phead2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rqf-addhere { margin: 6px 0 2px 30px; font-size: 14px; min-height: 40px; }
.rqf-new { animation: rqf-flash 1.6s ease-out 1; }
@keyframes rqf-flash { 0% { box-shadow: 0 0 0 3px var(--accent, #2f6df6); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .rqf-new { animation: none; outline: 2px solid var(--accent, #2f6df6); } }
.rqf-warn { border: 1px solid var(--err, #d23f3f); color: var(--err, #d23f3f); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }   /* BRIEF-1217: no way to reply */
/* BRIEF-1217: compact rows — one line (⠿ name · type · Settings · ↑ ↓ ✕); the name and its notes give way with …, the buttons never wrap */
.rqf-q > .rqf-q-top { flex-wrap: nowrap; }
.rqf-q > .rqf-q-top strong { flex: 0 1 auto; min-width: 6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqf-q > .rqf-q-top .rqf-type, .rqf-q > .rqf-q-top .rqf-tag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rqf-q > .rqf-q-top > .rqf-btn, .rqf-rowbtns { flex: none; }
.rqf-lay-section > .rqf-q-top .rqf-secname { min-width: 8em; }
.rqf-start { border: 1px dashed var(--line, #d6dbe2); border-radius: 10px; padding: 14px; text-align: center; }
.rqf-start p { margin: 0 0 10px; }
.rqf-shell > .rqf-editor { min-width: 0; }   /* BRIEF-1217: the editor column may shrink — its one-line rows give way (…), never slide under the preview */
.rqf-q > .rqf-q-top { min-width: 0; }
.rqf-rows { grid-template-columns: minmax(0, 1fr); }   /* the list's column may shrink too (a grid's auto column grows to its widest one-line row) */
.rqf-rows > * { min-width: 0; }
/* BRIEF-1217c: ½ / full width, Q1's note, the preview's Phone | Computer switch */
.rqf-width { min-width: 52px; padding: 0 8px; flex: none; }
.rqf-width[aria-pressed="true"] { background: var(--hover, #f3f6fb); font-weight: 700; }
.rqf-wset { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.rqf-wlab { font-weight: 600; font-size: 14px; flex: 0 0 100%; }
p.rqf-also { margin: 0; padding: 0 0 6px 30px; font-size: 13px; color: var(--muted, #5c6878); }
.rqf-pvbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
.rqf-pvbar .rqf-phead { margin: 0; }
.rqf-segs { display: inline-flex; }
.rqf-seg { min-height: 36px; padding: 4px 12px; border-radius: 0; font-size: 14px; }
.rqf-segs .rqf-seg:first-child { border-radius: 8px 0 0 8px; }
.rqf-segs .rqf-seg:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.rqf-seg[aria-pressed="true"] { background: var(--accent, #2f6df6); border-color: var(--accent, #2f6df6); color: var(--accent-ink, #fff); font-weight: 600; }
.rqf-fwrap { position: relative; overflow: hidden; }
.rqf-fwrap.rqf-scaled .rqf-frame { transform-origin: 0 0; max-width: none; position: absolute; top: 0; left: 0; }
.rqf-pvonly { width: min(460px, calc(100vw - 48px)); }   /* SW-3: the read-only Preview overlay */
.rqf-pvonly .rqf-frame { width: 100%; }