/* ── A custom form being filled in (Components/FormFill.razor) and
   try-before-you-add (Pages/TemplateTry.razor) — custom forms phase 4.
   Colours come from app.css's variables only, so both themes follow. */

.ff-sec{margin:18px 0 8px}
.ff-sec:first-child{margin-top:4px}
.ff-label{margin:12px 0 6px}
.ff-field{margin-bottom:14px}
.ff-field>label{display:block}
.ff-help{margin:-2px 0 6px}
.ff-ticks{margin:6px 0 12px}
.ff-bad .in,.ff-bad select{border-color:var(--crit)}
.ff-problem{font-size:12.5px;color:var(--crit);margin-top:4px;font-weight:600}
.ff-flag{font-size:12.5px;color:var(--warn);margin-top:4px;font-weight:600}
.ff-flag.urgent{color:var(--crit)}
.ff-info{margin:6px 0 14px}

/* A switch that is a real button (keyboard and screen readers get it). */
button.ff-toggle{border:0;background:none;padding:4px 0;font:inherit;color:var(--ink-2);text-align:left}
button.ff-toggle span{line-height:1.3}

/* Scored choices: the score is the button, the words sit under it. */
.ff-scores .ff-n{min-width:44px;font-family:var(--f-data)}

/* The typo range: an amber outline and the question, never a refusal. */
.ff-num.ff-out{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.ff-range{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;padding:8px 12px;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-size:13px}
.ff-range span{flex:1;min-width:180px}

/* 16 · slider */
.ff-slider{max-width:420px}
.ff-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 4px}
.ff-big .num{font-family:var(--f-data);font-size:30px;line-height:1.1;color:var(--ink)}
.ff-word{font-weight:700;color:var(--accent)}
.ff-range-in{width:100%;accent-color:var(--accent);margin:6px 0 2px}

/* 17 · duration */
.ff-duration .in-row{flex-wrap:wrap;gap:6px}
.ff-mss{width:90px;text-align:center;font-size:18px}
.ff-timer{display:block;width:100%;max-width:420px;margin-top:8px;padding:10px 12px;border-radius:8px;border:1px dashed var(--accent);background:var(--accent-soft);color:var(--accent);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.ff-timer.on{border-style:solid;border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}

/* 18 · score */
.ff-score{padding:8px 12px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:inline-block}

/* 19 · medication given */
.ff-dose{height:auto;min-height:36px;padding:6px 12px;text-align:left;line-height:1.3}

/* Try-before-you-add */
.tt-banner{display:flex;gap:10px;align-items:flex-start}
.tt-card{max-width:720px}
.tt-would{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--rule);padding:12px 20px;font-size:13.5px;color:var(--ink-2)}
.tt-bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:14px;max-width:720px}
.tt-gal .rtile .ic{font-weight:700}
.tt-gal .sug{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent);background:var(--accent-soft);border-radius:4px;padding:1px 6px;margin-left:6px}
@media (max-width:640px){
  .tt-bar{justify-content:stretch}
  .tt-bar .btn{flex:1}
  .tt-would{padding:10px 14px}
}