/* Presto — inline, guided bracket filling (web app). Replaces the separate
   "placeholders to fill" panel: every [BRACKET] in the finished document is an
   editable field at its own position in the letter. Styled with the panel's
   own tokens (amber for "to fill", gold for the guide, paper serif once filled). */

#letterCard{position:relative;}
#out{position:relative;}

/* ── The field ─────────────────────────────────────────────────────────────── */
.ph{display:inline-block; position:relative; border:1px dashed var(--tg-amber-dot); background:var(--tg-amber-bg); color:var(--tg-amber-text);
  border-radius:var(--tg-r-xs); padding:0 6px; margin:0 1px; font-family:var(--mono); font-size:.86em; line-height:1.55; cursor:text; min-width:60px;
  outline:none; vertical-align:baseline; transition:background .18s, border-color .18s, color .18s; white-space:normal;}
.ph:focus, .ph.active{background:#FFF8E6; border-style:solid; box-shadow:0 0 0 3px rgba(201,138,30,.18);}
/* the bracket's full text is the prompt — never truncated */
.ph:empty::before{content:attr(data-prompt); color:#B48A3E; font-style:italic; white-space:normal;}
/* committed: the value ink-sweeps into the letter's serif */
.ph.filled{border:none; background:transparent; color:var(--tg-paper-text); font-family:inherit; font-size:inherit; padding:0; margin:0; min-width:0;
  white-space:pre-wrap; animation:brInk .35s ease-out;}
.ph.filled:hover{background:var(--tg-macro-bg); border-radius:2px; cursor:text;}
.ph.filled.active{background:#FFF8E6; box-shadow:0 0 0 3px rgba(201,138,30,.18); border-radius:var(--tg-r-xs); padding:0 4px;}
@keyframes brInk{from{background:var(--tg-macro-bg);}to{background:transparent;}}

/* ── Guide tag on the card's margin ────────────────────────────────────────── */
.brguide{position:absolute; left:-118px; z-index:6; display:flex; align-items:center; gap:6px; background:var(--tg-gold); color:var(--tg-ink);
  font-family:var(--sans); font-size:11.5px; font-weight:500; padding:5px 10px; border-radius:var(--tg-r-md); box-shadow:var(--tg-sh-lg);
  transition:top .28s cubic-bezier(.2,.8,.2,1), opacity .2s; white-space:nowrap; pointer-events:none;}
.brguide::after{content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--tg-gold); border-right:0;}
.brguide[hidden]{display:none;}
/* narrow layouts: the tag sits above the paper's top-right corner, no arrow */
@media (max-width:1010px){
  .brguide{left:auto; right:14px; top:auto !important; bottom:calc(100% - 4px);}
  .brguide::after{display:none;}
}

/* ── Suggestion chips under the open field ─────────────────────────────────── */
.brsugg{position:absolute; z-index:5; display:none; flex-wrap:wrap; gap:6px; max-width:calc(100% - 44px); background:var(--tg-paper); border:1px solid var(--tg-champ-border);
  border-radius:var(--tg-r-md); padding:6px; box-shadow:var(--tg-sh-lg); font-family:var(--sans);}
.brsugg.show{display:flex;}
.brsugg button{appearance:none; font:inherit; font-size:12px; padding:4px 9px; border:1px solid var(--tg-champ-border); border-radius:var(--tg-r-pill); background:var(--tg-champ); color:var(--tg-champ-text); cursor:pointer; line-height:1.3;}
.brsugg button:hover, .brsugg button:focus-visible{background:var(--tg-gold); color:var(--tg-ink); outline:none;}
.brsugg button.link{background:transparent; border-style:dashed; color:var(--tg-gold-deep);}
.brsugg button.on{background:var(--tg-gold); color:var(--tg-ink); border-color:var(--tg-gold); font-weight:600;}
.brsugg button.on::before{content:"✓ "; font-weight:700;}
.brsugg button.done{border-style:solid; border-color:var(--tg-gold); color:var(--tg-ink); background:var(--tg-champ);}

/* ── Header count pill ─────────────────────────────────────────────────────── */
.brpill{font-family:var(--sans); font-size:11px; font-weight:600; background:var(--tg-amber-chip); color:var(--tg-amber-text); border:1px solid var(--tg-amber-border);
  border-radius:var(--tg-r-pill); padding:3px 10px; white-space:nowrap; margin-left:auto;}
.brpill.done{background:rgba(55,208,166,.10); color:#7FE0BC; border-color:rgba(55,208,166,.35);}
.brpill[hidden]{display:none;}

/* ── "Delete all remaining brackets" — a quiet link beneath the letter ───────── */
.brclear{display:inline-block; margin:6px 2px 0; background:none; border:none; padding:0; font-family:var(--sans); font-size:11px; color:var(--tg-dim); cursor:pointer; text-decoration:underline; text-decoration-color:rgba(141,160,169,.4); text-underline-offset:2px;}
.brclear:hover{color:var(--tg-amber-text); text-decoration-color:currentColor;}
.brclear[hidden]{display:none;}

/* reduced motion: no glide, no sweep */
@media (prefers-reduced-motion:reduce){
  .brguide{transition:none;}
  .ph, .ph.filled{transition:none; animation:none;}
}
/* Phase L1: a blank flows inline like the words around it — it never becomes a two-line box that pushes
   the lines apart; a short prompt never wraps at all; a long one wraps like text, keeping its outline. */
.ph{display:inline; -webkit-box-decoration-break:clone; box-decoration-break:clone; line-height:inherit; padding:1px 6px;}
.ph.short, .ph.short:empty::before{white-space:nowrap;}
.ph[data-btype="choice"], .ph[data-btype="choice"]:empty::before{white-space:nowrap;} /* a field choice ("smoker / non-smoker / ex-smoker") moves to the next line whole, never split */
.ph:empty::before{white-space:inherit;}


/* ── Answers in the line (Modern field lines; owner, 5 Oct 2026: "not confusing") ──────────────────────────────
   The answers are buttons right after the label — no pop-up. A line waiting for an answer shows only its buttons;
   once answered it reads as ordinary letter text (tap it to see the buttons again). */
.ph.inl:not(.filled):not(.typing):not(.inl-type){display:none;}
.qa{display:inline-flex; flex-wrap:wrap; gap:6px; align-items:center; vertical-align:baseline; margin-left:4px; font-family:var(--sans); line-height:1.2;}
.ph.inl.filled:not(.reopen) + .qa, .ph.inl.typing + .qa{display:none;}
.ph.inl.filled.reopen{background:#FFF8E6; border-radius:var(--tg-r-xs); padding:0 4px;}
.qa-b{appearance:none; font:500 13px/1.25 var(--sans); padding:4px 13px; border-radius:var(--tg-r-pill); border:1px solid #D6BE82; background:#FFFDF7; color:#3B3427;
  cursor:pointer; transition:background .12s, border-color .12s, color .12s; white-space:nowrap;}
.qa-b:hover{background:var(--tg-gold); border-color:var(--tg-gold); color:var(--tg-ink);}
.qa-b:focus-visible{outline:none; box-shadow:0 0 0 2px var(--tg-gold-deep);}
.qa-b.on{background:var(--tg-gold); border-color:var(--tg-gold); color:var(--tg-ink); font-weight:600;}
.qa-other{background:transparent; border-style:dashed; color:#8A6A2A;}
/* typing an "Other…" answer, or a line that is typed ([symptoms], [onset]): a plain text box in the line */
.ph.inl.typing, .ph.inl-type:not(.filled){display:inline-block; font-family:var(--sans); font-size:.9em; font-style:normal; color:var(--tg-paper-text);
  background:#FFFDF7; border:1px solid #D6BE82; border-radius:6px; padding:2px 10px; min-width:230px; line-height:1.5; vertical-align:baseline; box-shadow:none;}
.ph.inl.typing:empty::before, .ph.inl-type:not(.filled):empty::before{color:#A08A5E; font-style:normal;}
.ph.inl.typing:focus, .ph.inl-type:not(.filled):focus{border-color:var(--tg-gold-deep); box-shadow:0 0 0 2px rgba(201,138,30,.25);}
/* ── The answer bar: top of the paper, always in view ─────────────────────────────────────────────────────── */
.qabar{position:sticky; z-index:4; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 16px 10px 14px;
  background:linear-gradient(180deg,#FFF9EB 0%,#FBF4E3 100%); border-left:1px solid #ECE6DA; border-right:1px solid #ECE6DA; border-bottom:1px solid #EADFC6;
  font-family:var(--sans); color:var(--tg-paper-text);}
.qabar[hidden]{display:none;}
.qaring{width:30px; height:30px; flex:none;}
.qaring circle{fill:none; stroke-width:3.4;}
.qaring .trk{stroke:#EBDFC3;}
.qaring .val{stroke:var(--tg-gold); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; transition:stroke-dashoffset .4s cubic-bezier(.2,.8,.2,1), stroke .3s;}
.qaring .tick{fill:none; stroke:#2F8F6E; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:22; stroke-dashoffset:22; transition:stroke-dashoffset .35s .15s ease-out;}
.qabar.complete .qaring .val{stroke:#2F8F6E;}
.qabar.complete .qaring .tick{stroke-dashoffset:0;}
.qacount{font-size:14px; font-weight:600; line-height:1.25; letter-spacing:.005em;}
.qahint{font-size:12.5px; line-height:1.35; color:#7A6A4F; margin-top:2px;}
.qajump{appearance:none; background:none; border:none; padding:0; font:inherit; font-weight:600; color:var(--tg-gold-deep); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px;}
.qajump:hover{color:var(--tg-amber-text); text-decoration-style:solid;}
.qadot{margin:0 6px; color:#B9A57A;}
.qaskip{appearance:none; border:none; cursor:pointer; white-space:nowrap; font:700 13.5px/1 var(--sans); letter-spacing:.01em; color:var(--tg-ink);
  padding:10px 24px; border-radius:var(--tg-r-pill); background:linear-gradient(135deg,#ECD08E 0%,#C6A15B 55%,#A9853F 100%);
  box-shadow:0 2px 10px rgba(154,123,63,.32), inset 0 1px 0 rgba(255,255,255,.4); transition:transform .12s, box-shadow .12s, filter .12s;}
.qaskip:hover{filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 4px 14px rgba(154,123,63,.38), inset 0 1px 0 rgba(255,255,255,.4);}
.qaskip:active{transform:translateY(0); box-shadow:0 1px 6px rgba(154,123,63,.3);}
.qaskip:focus-visible{outline:none; box-shadow:0 0 0 2px var(--tg-paper), 0 0 0 4px var(--tg-gold-deep);}
.qaskip[hidden]{display:none;}
.qabar.skipped .qaskip{background:transparent; color:var(--tg-champ-text); border:1px solid var(--tg-champ-border); box-shadow:none; font-weight:600; padding:9px 20px;}
.qabar.skipped .qaskip:hover{background:var(--tg-champ); transform:none;}
.qabar.working .qaskip{opacity:.65; pointer-events:none;}
/* each line Skip all fills glows gold for a moment, one after another */
.ph.filled.justskipped{animation:qaInk 1s ease-out;}
@keyframes qaInk{0%{background:rgba(198,161,91,.42); box-shadow:0 0 0 3px rgba(198,161,91,.22);}100%{background:transparent; box-shadow:0 0 0 3px rgba(198,161,91,0);}}
@media (prefers-reduced-motion:reduce){ .qaring .val, .qaring .tick, .qaskip{transition:none;} .ph.filled.justskipped{animation:none;} }
@media (max-width:640px){
  .qa{gap:8px; margin:4px 0 2px; display:flex;}            /* on a phone the buttons sit on their own line under the label */
  .qa-b{font-size:14px; padding:8px 15px;}                  /* thumb-sized */
  .ph.inl.typing, .ph.inl-type:not(.filled){display:block; width:100%; box-sizing:border-box; min-width:0; margin-top:4px; font-size:16px; padding:8px 10px;}
  .qabar{gap:10px; padding:8px 12px;}                                   /* one slim row: ring · count · Skip all */
  .qabar:not(.skipped):not(.complete) .qahint{display:none;}             /* the buttons speak for themselves on a phone */
  .qacount{font-size:14.5px;}
  .qaskip{min-height:42px; padding:0 20px; font-size:14.5px;}
  .qabar.skipped .qaskip{padding:0 16px;}
}