/* Prompt Builder: /prompt-builder/. The answers on the left, the prompt they make on the right, scored as you type. */
.pb-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:1.2rem; align-items:start}
@media (max-width:64rem){ .pb-grid{grid-template-columns:minmax(0,1fr)} }
.pb-form .panel-head{justify-content:space-between}
.pb-fields{display:flex; flex-direction:column; gap:1rem}
.pb-fields .lab small{font-weight:400; color:var(--ink-3); margin-left:.3rem}
.pb-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem}
@media (max-width:30rem){ .pb-two{grid-template-columns:minmax(0,1fr)} }
.pb-chips{display:flex; flex-wrap:wrap; gap:.35rem .4rem; margin-top:.15rem}
.pb-chips button{font:500 .86rem/1.2 var(--f-ui); padding:.45rem .75rem; border-radius:999px; border:1px solid var(--line); background:var(--field); color:var(--ink-2); cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.pb-chips button:hover{color:var(--ink); border-color:var(--ink-3)}
.pb-chips button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.pb-chips.sm button{padding:.38rem .65rem; font-size:.82rem}
.pb-checks{display:flex; flex-direction:column; gap:.45rem; padding-top:.2rem; border-top:1px solid var(--line-2)}
.pb-checks .check{font:400 .92rem/1.45 var(--f-ui); color:var(--ink-2); align-items:flex-start}
.pb-warn{margin:-.4rem 0 0; padding:.6rem .8rem; border-radius:10px; background:var(--hi-wash); font:400 .88rem/1.45 var(--f-ui); color:var(--ink)}

.pb-out{position:sticky; top:4.6rem}
@media (max-width:64rem){ .pb-out{position:static} }
.pb-out .panel-head{flex-wrap:wrap; gap:.6rem}
.pb-out .panel-title{margin-right:auto}
.pb-score{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.2rem; padding:.8rem 1.1rem; border-bottom:1px solid var(--line-2); background:var(--bg-2)}
.pb-n{display:flex; align-items:baseline; gap:.3rem; margin:0}
.pb-n b{font:380 2.1rem/1 var(--f-head); font-variant-numeric:tabular-nums; color:var(--ink)}
.pb-n span{font:400 .95rem/1 var(--f-ui); color:var(--ink-3)}
.pb-n em{margin-left:.5rem; font:italic 400 1.05rem/1 var(--f-head); color:var(--ink-2)}
.pb-score[data-tone="top"] .pb-n b,.pb-score[data-tone="good"] .pb-n b{color:var(--good)}
.pb-score[data-tone="low"] .pb-n b{color:var(--bad)}
.pb-miss{margin:0; font:400 .9rem/1.5 var(--f-ui); color:var(--ink-3)}
.pb-miss .linkbtn{font-weight:500}
.pb-body{padding:0}
.pb-pre{margin:0; padding:1rem 1.15rem; min-height:18rem; max-height:62vh; overflow:auto; white-space:pre-wrap; word-break:break-word; font:400 .9rem/1.6 var(--f-mono); color:var(--ink)}
.pb-foot{flex-wrap:wrap; gap:.45rem}
.pb-related{padding:.8rem 1.1rem 1rem; border-top:1px solid var(--line-2)}
.pb-rel-h{margin:0 0 .45rem; font:600 .8rem/1.3 var(--f-ui); color:var(--ink-3)}
.pb-related ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem}
.pb-related li{display:flex; justify-content:space-between; gap:1rem; font:400 .92rem/1.4 var(--f-ui)}
.pb-related li span{font:500 .8rem/1.4 var(--f-mono); color:var(--ink-3)}
.pb-faq details{border-top:1px solid var(--line-2); padding:.7rem 0}
.pb-faq summary{cursor:pointer; font:500 1rem/1.4 var(--f-ui)}
.pb-faq p{margin:.5rem 0 0}