/* Prompt diff — /diff/ */
.df-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,23rem); gap:1.2rem; align-items:start}
.df-main{display:flex; flex-direction:column; gap:1rem; min-width:0}
@media (max-width:74rem){ .df-grid{grid-template-columns:minmax(0,1fr)} }

/* ── editors ───────────────────────────────────────────────────────── */
.df-eds{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem}
@media (max-width:50rem){ .df-eds{grid-template-columns:minmax(0,1fr)} }
.df-ed .panel-head{flex-wrap:nowrap; gap:.45rem; padding:.45rem .55rem .45rem .75rem; min-height:2.9rem}
.df-letter{display:inline-grid; place-items:center; width:1.4rem; height:1.4rem; flex:none; border:1.5px solid var(--bad); background:var(--bad-wash); border-radius:var(--r); font:650 var(--t-xs)/1 var(--f-ui); color:var(--ink); vertical-align:middle}
.df-ed[data-side="b"] .df-letter,.df-c.b .df-letter,.df-spec:last-child .df-letter{border-color:var(--good); background:var(--good-wash)}
.df-label{flex:1 1 auto; min-width:0; width:100%; border:1px solid transparent; background:transparent; border-radius:var(--r); padding:.3rem .4rem; font:650 var(--t-md)/1.2 var(--f-ui); color:var(--ink); text-overflow:ellipsis}
.df-label:hover{border-color:var(--line)}
.df-label:focus{outline:none; border-color:var(--accent); background:var(--field); box-shadow:0 0 0 3px var(--accent-wash)}
.df-ed .panel-body{gap:.7rem; flex:1 0 auto}
.df-ed .panel-body > .field:last-child{flex:1 0 auto}
.df-main-ta{flex:1 0 auto}
.df-ta{min-height:9.5rem; max-height:min(26rem,60vh); overflow:auto}
.df-ta.short{min-height:4.6rem; max-height:14rem}
.df-ta.big{height:min(26rem,60vh)} .df-ta.short.big{height:14rem}
.df-foot{min-height:2.5rem; padding-block:.45rem; gap:.4rem .8rem}
.df-meta{margin-left:auto; font:500 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.df-src{display:flex; align-items:center; gap:.15rem; min-width:0; flex:0 1 auto}
.df-src:empty{display:none}
.df-srclink{display:inline-flex; align-items:center; gap:.35rem; min-width:0; max-width:100%; font:600 var(--t-xs)/1.2 var(--f-ui); color:var(--accent); text-decoration:none; padding:.2rem .4rem .2rem .3rem; border-radius:var(--r); background:var(--accent-wash)}
.df-srclink:hover{text-decoration:underline}
.df-srclink svg{width:.9rem; height:.9rem; flex:none}
.df-unlink{display:inline-grid; place-items:center; width:1.4rem; height:1.4rem; padding:0; border:0; background:none; color:var(--ink-3); border-radius:var(--r)}
.df-unlink:hover{color:var(--bad); background:var(--bg-2)}
.df-unlink svg{width:.8rem; height:.8rem}

/* ── options bar ───────────────────────────────────────────────────── */
.df-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
.df-ctl{display:flex; align-items:center; gap:.5rem}
#swapBtn svg{width:1rem; height:1rem}
@media (max-width:40rem){
  .df-bar{gap:.55rem .6rem}
  .df-bar .spacer{display:none}
  .df-ctl{width:100%; justify-content:space-between}
}

/* ── output ────────────────────────────────────────────────────────── */
.df-out .panel-head{gap:.4rem 1rem}
.df-out .panel-title{margin-right:0}
.df-quick{display:inline-flex; gap:.45rem; align-items:baseline; font:500 var(--t-xs)/1.2 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums; margin-right:auto}
.df-quick .sep{color:var(--ink-3)}
.add{color:var(--good)} .rem{color:var(--bad)}
.df-legend{display:inline-flex; gap:.4rem; font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em}
.df-legend del,.df-legend ins{padding:.25rem .35rem; border-radius:2px}
@media (max-width:40rem){ .df-legend{display:none} }
.df-outbody{min-width:0}
.df-sec + .df-sec{border-top:1px solid var(--line)}
.df-sec-head{display:flex; align-items:center; gap:.8rem; padding:.55rem .9rem; border-bottom:1px solid var(--line-2); background:color-mix(in srgb, var(--bg-2) 55%, var(--panel))}
.df-sec-head .lab{margin-right:auto}
.df-sstat{font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.df-same{padding:1rem .9rem; font:400 var(--t-sm)/1.5 var(--f-serif); color:var(--ink-3)}
.df-empty{margin:1rem; padding:2.2rem 1.3rem}
.df-empty > span{max-width:40ch}
.df-ws{font-family:var(--f-mono); opacity:.85}

/* unified, words: one flowing text */
.df-flow{padding:.9rem 1rem 1.1rem; font:400 .84rem/1.75 var(--f-mono); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); tab-size:2}
.df-flow del,.df-flow ins{border-radius:2px; padding:.05em 0}

/* side by side: rows aligned by line */
.df-sbs,.df-ul{font:400 .8rem/1.62 var(--f-mono); tab-size:2}
.df-r{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.df-hr{position:sticky; top:var(--bar-h); z-index:2; background:var(--panel); border-bottom:1px solid var(--line-2)}
.df-hr .df-tx{font:600 var(--t-xs)/1 var(--f-ui); padding-block:.55rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.df-hr .df-letter{width:1.15rem; height:1.15rem; font-size:.62rem; margin-right:.2rem}
.df-c{display:grid; grid-template-columns:2.7rem minmax(0,1fr); min-width:0}
.df-c.b{border-left:1px solid var(--line-2)}
.df-ln{padding:0 .5rem 0 .2rem; text-align:right; color:var(--ink-3); font-size:.7rem; font-variant-numeric:tabular-nums; user-select:none; border-right:1px solid var(--line-2); line-height:1.62rem}
.df-tx{padding:.1rem .75rem; white-space:pre-wrap; overflow-wrap:anywhere; min-height:1.6rem; min-width:0}
.df-c.is-del{background:var(--bad-wash)}
.df-c.is-ins{background:var(--good-wash)}
.df-c.is-del.soft{background:color-mix(in srgb, var(--bad-wash) 45%, transparent)}
.df-c.is-ins.soft{background:color-mix(in srgb, var(--good-wash) 45%, transparent)}
.df-c.is-del .df-ln{color:var(--bad)} .df-c.is-ins .df-ln{color:var(--good)}
.df-c.is-empty{background:repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--line-2) 70%, transparent) 5px 6px)}
.df-c.is-empty .df-ln{border-right-color:transparent}
del.df-wl,ins.df-wl{text-decoration:none; color:inherit; background:none}
.df-r.t-chg + .df-r.t-eq,.df-r.t-del + .df-r.t-eq,.df-r.t-ins + .df-r.t-eq{border-top:1px solid var(--line-2)}
.df-r.t-eq + .df-r:not(.t-eq):not(.df-hr){border-top:1px solid var(--line-2)}

/* unified, lines */
.df-u{display:grid; grid-template-columns:2.6rem 2.6rem 1.4rem minmax(0,1fr); min-width:0}
.df-u .df-ln.nb{border-right:1px solid var(--line-2)}
.df-u .df-ln:first-child{border-right:0}
.df-sign{text-align:center; color:var(--ink-3); user-select:none; line-height:1.62rem}
.df-u .df-tx{padding-left:.25rem}
.df-u.t-del{background:var(--bad-wash)} .df-u.t-del .df-sign,.df-u.t-del .df-ln{color:var(--bad)}
.df-u.t-ins{background:var(--good-wash)} .df-u.t-ins .df-sign,.df-u.t-ins .df-ln{color:var(--good)}

/* folds */
.df-skip{display:flex; align-items:center; justify-content:center; gap:.4rem; width:100%; padding:.32rem .6rem; border:0; border-block:1px dashed var(--line); background:color-mix(in srgb, var(--bg-2) 60%, transparent); font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; font-variant-numeric:tabular-nums; color:var(--ink-3)}
.df-skip:hover{color:var(--accent); background:var(--accent-wash)}
.df-skip:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.df-skip svg{width:.9rem; height:.9rem}
.df-skip.inline{display:inline-flex; width:auto; vertical-align:baseline; margin:.15rem .1rem; padding:.18rem .5rem; border:1px dashed var(--line); border-radius:var(--r); line-height:1.2}

@media (max-width:40rem){
  .df-r{grid-template-columns:minmax(0,1fr)}
  .df-r.t-eq .df-c.b,.df-c.is-empty{display:none}
  .df-c.b{border-left:0}
  .df-hr{display:none}
  .df-c{grid-template-columns:2.9rem minmax(0,1fr)}
  .df-ln{white-space:nowrap; padding-right:.45rem}
  .df-c.a.is-del .df-ln::before{content:"A "; opacity:.7}
  .df-c.b.is-ins .df-ln::before{content:"B "; opacity:.7}
  .df-u{grid-template-columns:2.2rem 1.1rem minmax(0,1fr)}
  .df-u .df-ln:first-child{display:none}
  .df-tx{padding-inline:.55rem}
}

/* ── summary ───────────────────────────────────────────────────────── */
.df-side{display:flex; flex-direction:column; gap:1rem; min-width:0}
.df-side > *{flex-shrink:0}
@media (min-width:74.01rem) and (min-height:44rem){
  .df-side{position:sticky; top:calc(var(--bar-h) + 1rem); max-height:calc(100vh - var(--bar-h) - 2rem); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; border-radius:var(--r-lg)}
}
.df-blk{display:flex; flex-direction:column; gap:.6rem; padding:.85rem .9rem; border-top:1px solid var(--line-2)}
.df-blk:first-of-type{border-top:0}
.df-blk > .lab{color:var(--ink-2)}
.df-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.df-stats .stat{padding:.65rem .75rem}
.df-stats .stat b{font-size:1.4rem; font-weight:360}
.df-stats .stat b span{display:inline; margin:0; font:inherit; letter-spacing:inherit; text-transform:none; color:inherit}
.df-stats .stat b span.add{color:var(--good)} .df-stats .stat b span.rem{color:var(--bad)}
.df-stats .stat b span.sl{color:var(--ink-3); font-weight:300}
.df-stats .stat b.up{color:var(--bad)} .df-stats .stat b.down{color:var(--good)}
.df-stats .stat span{margin-top:.35rem}
.df-cost{border-radius:var(--r)}
.df-cost .table th,.df-cost .table td{padding:.42rem .55rem}
.df-cost .table td.num{font-size:.74rem}
.df-cost td.up{color:var(--bad)} .df-cost td.down{color:var(--good)}
.df-chips{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center}
.df-chips .tag{white-space:normal; overflow-wrap:anywhere; text-align:left; line-height:1.25}
.df-k{font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; color:var(--ink-3); min-width:4.6rem}
.df-k.add{color:var(--good)} .df-k.rem{color:var(--bad)}
.df-target{flex-direction:row; align-items:center; gap:.6rem}
.df-target .lab{flex:none}
.df-target .select{flex:1; min-width:0}

.df-hard{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:.5rem; padding:.7rem .4rem; border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--field)}
.df-spec{display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center; min-width:0}
.df-rock{width:4rem; height:4rem; border-radius:50%; background:var(--stage); box-shadow:0 0 0 1px var(--line), 0 0 0 4px var(--field), 0 0 0 5px var(--line-2); object-fit:cover}
.df-rock.none{display:block; background:var(--bg-2)}
.df-spec-l{display:flex; align-items:center; gap:.3rem; max-width:100%; font:600 var(--t-xs)/1.2 var(--f-ui); color:var(--ink-3); margin-top:.35rem}
.df-spec-l .df-letter{width:1rem; height:1rem; font-size:.58rem; border-width:1px}
.df-spec b{font:340 1.9rem/1 var(--f-head); letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums}
.df-min{font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
.df-delta{display:flex; flex-direction:column; align-items:center; gap:.3rem; color:var(--ink-3)}
.df-delta svg{width:1.2rem; height:1.2rem}
.df-d{font:650 var(--t-xs)/1 var(--f-ui); padding:.25rem .4rem; border-radius:var(--r); border:1px solid var(--line); color:var(--ink-2); font-variant-numeric:tabular-nums}
.df-d.up{color:var(--good); border-color:color-mix(in srgb, var(--good) 45%, transparent); background:var(--good-wash)}
.df-d.down{color:var(--bad); border-color:color-mix(in srgb, var(--bad) 45%, transparent); background:var(--bad-wash)}

/* explain */
.df-xp .panel-body{gap:.7rem}
.df-xp-ctl:empty,#xpGate:empty,.df-xp-out:empty{display:none}
.df-xp-ctl .row{gap:.5rem}
.df-xp-ctl .modelpick{max-width:100%; min-width:0}
.df-xp-ctl .modelpick .mpill{max-width:10rem}
.df-xp-head{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}
.df-xp-live{font-size:var(--t-sm); color:var(--ink-2)}
.df-xp-list{display:flex; flex-direction:column; gap:.55rem; font:400 var(--t-sm)/1.5 var(--f-ui); color:var(--ink)}
.df-xp-list li{position:relative; padding-left:1.05rem}
.df-xp-list li::before{content:""; position:absolute; left:.1rem; top:.58em; width:.36rem; height:.36rem; background:var(--accent); transform:rotate(45deg)}
.df-xp-list code{font:500 .86em/1 var(--f-mono); background:var(--bg-2); padding:.1em .3em; border-radius:2px}

/* ── library picker ────────────────────────────────────────────────── */
.df-pick{display:flex; flex-direction:column; gap:.45rem; max-height:min(58vh,34rem); overflow:auto; padding:.1rem}
.df-pick > *{flex-shrink:0}
.df-pick-item{border:1px solid var(--line-2); border-radius:var(--r); background:var(--field); overflow:hidden}
.df-pick-item:hover,.df-pick-item:focus-within{border-color:var(--ink-4)}
.df-pick-main{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:.2rem; width:100%; padding:.7rem .8rem}
.df-pick-main:hover{background:var(--bg-2)}
.df-pick-main:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.df-pick-main b{font:600 var(--t-sm)/1.25 var(--f-ui)}
.df-pick-vers{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; padding:.45rem .8rem .55rem; border-top:1px solid var(--line-2)}
.df-pick-vers .lab{margin-right:.3rem}
.df-vchip{font:500 var(--t-xs)/1 var(--f-ui); font-variant-numeric:tabular-nums; padding:.32rem .45rem; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); color:var(--ink-2)}
.df-vchip:hover{border-color:var(--ink); color:var(--ink)}
.df-vchip.on{border-color:var(--ink); color:var(--ink); font-weight:600}

/* ── how it works ──────────────────────────────────────────────────── */
.df-info h3:first-child{margin-top:0}
.df-faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.df-faq details{border-bottom:1px solid var(--line)}
.df-faq summary{cursor:pointer; list-style:none; padding:.85rem 2rem .85rem 0; position:relative; font:650 1rem/1.35 var(--f-ui); color:var(--ink)}
.df-faq summary::-webkit-details-marker{display:none}
.df-faq summary::after{content:"+"; position:absolute; right:.3rem; top:.75rem; font:400 1.2rem/1 var(--f-ui); color:var(--ink-3)}
.df-faq details[open] summary::after{content:"−"}
.df-faq details p{padding:0 0 1rem; margin:0}
.prose .df-faq + *{margin-top:1rem}

/* ── tap targets: every control at least 24px (WCAG 2.5.8) ──────────── */
.df-bar .switch{min-height:2.1rem}
.df-bar .switch input{width:2.6rem; height:1.5rem}
.df-bar .switch input::after{width:1.2rem; height:1.2rem}
.df-bar .switch input:checked::after{transform:translateX(1.1rem)}
.df-skip.inline{min-height:1.6rem; align-items:center}
.df-vchip{min-height:1.6rem; min-width:2.1rem}
.df-unlink{width:1.6rem; height:1.6rem}
.df-srclink{min-height:1.6rem}