/* GENERATED by eval/challenge/sync-brackets-to-site.mjs — copied from webapp/inline-brackets.css; the token block at the end carries the app's values from webapp/styles.css. Do not edit here; edit the web app and re-run the sync. */
/* 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:empty::before{white-space:inherit;}

/* the app's tokens this file uses, scoped to the letter card */
#letterCard{--mono:'IBM Plex Mono','SF Mono','Consolas','Menlo',monospace; --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --tg-amber-bg:#FDF6E9; --tg-amber-border:#E9C583; --tg-amber-chip:#FCEFD6; --tg-amber-dot:#C98A1E; --tg-amber-text:#8A5A12; --tg-champ:#F5EFE1; --tg-champ-border:#E4D6A9; --tg-champ-text:#6E5828; --tg-dim:#8DA0A9; --tg-gold:#C6A15B; --tg-gold-deep:#9A7B3F; --tg-ink:#0E1C28; --tg-macro-bg:#F6EFDC; --tg-paper:#FCFBF8; --tg-paper-text:#1B2B36; --tg-r-md:9px; --tg-r-pill:999px; --tg-r-xs:6px; --tg-sh-lg:0 24px 50px -30px rgba(0,0,0,.60);}