/* ============================================================================
   F21  THE FREE PLAN: where the request came from, the voice notes and what
   was said, and an unconfirmed send, under the job's free plan band.
   Tokens only, from app.css, so both themes work.
   ============================================================================ */

.f21{margin:2px 0 10px;padding:0 0 2px}
.f21-src{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.f21-meta{margin:4px 0 8px;font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.f21 .note{margin:6px 0 8px}
.f21 .btnrow{margin:6px 0 8px}
.f21-voice{margin:8px 0 4px}

/* What was said: kept to a readable height, scrolling inside itself, because
   a half-hour walk-through is a few thousand words and the drawer has the
   rest of the job under it. The line breaks the plan maker wrote between
   voice notes are kept. */
.f21-tr{margin:4px 0 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel-2)}
.f21-tr summary{cursor:pointer;padding:7px 10px;font-size:12px;font-weight:600;color:var(--ink)}
.f21-tr summary:focus-visible{outline:2px solid var(--lime-dim);outline-offset:1px}
.f21-tr-text{margin:0;padding:0 10px 10px;max-height:260px;overflow:auto;white-space:pre-wrap;
  font-size:12.5px;line-height:1.55;color:var(--ink-2)}

@media(max-width:700px){
  .f21 .btnrow .btn{flex:1 1 auto;text-align:center}
  .f21-tr-text{max-height:320px;font-size:13px}
}