/* Shared by every form, loaded before the form's theme so a theme can restyle it. */

/* The AI voice label, only for a form that speaks with a client's cloned voice (form.json
   voice.clone; app.js adds it). Before the talk it sits under the intro, during a spoken talk
   under the voice line. Centred, the icon in the line (Ola, 2026-09-28). A theme can set the
   three colours. */
.voice-note{display:block; box-sizing:border-box; width:100%; max-width:420px; margin:14px auto 18px;
  padding:11px 16px; border-radius:14px; background:var(--voice-note-bg, rgba(0,0,0,.05));
  color:var(--voice-note-ink, inherit); font-size:14px; line-height:1.5; text-align:center}
.voice-note svg{display:inline-block; width:24px; height:24px; margin-right:7px; vertical-align:-7px;
  color:var(--voice-note-icon, currentColor)}
.voice-note b{font-weight:700}
body.typed-start .voice-note.before{display:none}
.voice-note.during{display:none; margin:0 auto}
body.live:not(.text) .voice-note.during{display:block}

/* The voice line's label keeps one width whatever it says, so the bars beside it keep their
   place (night run 2026-10-08; before, each switch between "Your guide is speaking" and
   "Listening, take your time" moved the centred bars about 7 px). Its hidden copies of the
   connecting, speaking and listening texts (shell.html) share one grid cell with the live
   text and give the cell its width; the live text adds none of its own (width 0, at least
   the cell), so the longer offline text wraps inside the same width instead of widening it.
   The copies may wrap too, so on a screen too narrow for the longest the line shrinks as
   before instead of running past the edge. The whole line stays centred. */
.vlabel{display:inline-grid; text-align:left}
.vlabel > *{grid-area:1 / 1; align-self:center}
#voiceLabel{width:0; min-width:100%}
.vlabel .vfit{visibility:hidden}
/* no state (a pause, a dropped connection: app.js clears the label and keeps the line): no
   width either, so the resting bars stand in the middle as before */
.voice:not(.listening):not(.speaking):not(.connecting) .vfit{display:none}

/* "Switch to typing" under the voice line. There is no typing box during a spoken talk; this
   appears only after the guide has listened for 20 s without hearing the person (app.js
   quietWatch; Ola, 2026-09-28). A quiet link, not a button that says the voice failed. */
.type-switch{display:block; width:fit-content; margin:4px auto 0; padding:8px 12px; border:0;
  background:none; font:inherit; font-size:14px; color:var(--muted, #5f6b7a);
  text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.type-switch[hidden], body.text .type-switch{display:none}
/* the done screen's name and email (a form that asks for them at the end): hidden unless asked, whatever a theme makes of .who */
#addressForm[hidden]{display:none}
/* a form opened by personal links (contactAt "link"): no fields, a line naming who the link is
   for in their place (app.js initLink); a theme can restyle the line */
.who .field[hidden]{display:none}
.linkWho{margin:0; font-size:15px; line-height:1.5; color:var(--muted, #4C535A)}
/* START's connecting parts (shell.html): hidden unless the form's theme shows them while body.starting */
#startBtn .bars, #startBtn .lbl-busy{display:none}
#choicesPanel[hidden],#choicesPanel section[hidden]{display:none}
/* Only the panel the choices form makes. The theme supplies the same ink, rules and primary
   colour as its other controls; long labels wrap inside a phone's width, including at 320 px. */
#choicesPanel{min-width:0;max-width:100%;margin:24px 0;text-align:left;overflow-wrap:anywhere}
#choicesPanel section{margin:0 0 24px}
#choicesPanel h3{margin:0 0 8px;font-size:18px;line-height:1.4}
#choicesPanel p{margin:0 0 10px;color:var(--muted);font-size:14px}
#choicesPanel .choiceOptions,#choicesPanel .choiceActions{display:flex;flex-wrap:wrap;gap:10px}
#choicesPanel button{box-sizing:border-box;min-width:0;max-width:100%;min-height:48px;padding:12px 16px;
  white-space:normal;overflow-wrap:anywhere;font:inherit;line-height:1.4;border:1px solid var(--rule, var(--line));
  border-radius:12px;background:var(--paper, #fff);color:var(--ink);text-align:left;cursor:pointer}
#choicesPanel button[aria-pressed="true"],#choicesPanel button.primary{background:var(--blue, var(--pink, var(--ink)));color:#fff;border-color:var(--blue, var(--pink, var(--ink)))}
/* A theme's own done-screen buttons (`#done .primary`, the business plan theme: 46 px tall) outrank
   the rule above; the tap target stays 48 px on every theme. */
#done #choicesPanel button{min-height:48px}
/* Skip reads as a text link under Send (Ola, 2026-10-16: "should not be a big button"); the tap
   area stays 48 px tall, only the look is quiet. */
#choicesPanel .choiceActions{flex-direction:column;align-items:flex-start}
#done #choicesPanel button.choiceSkip{background:none;border:0;padding:12px 0;color:var(--muted, var(--ink));
  font-size:15px;text-decoration:underline;text-underline-offset:3px}
#choicesPanel button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
#choicesPanel button:disabled{opacity:.6;cursor:wait}