/* Safe Paste — /safe-paste/ */
.sp-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; align-items:stretch}
@media (max-width:62rem){ .sp-grid{grid-template-columns:minmax(0,1fr)} }
.sp-step .panel-head{gap:.6rem}
.sp-n{display:inline-grid; place-items:center; width:1.55rem; height:1.55rem; flex:none; border-radius:50%; background:var(--ink); color:var(--bg); font:650 var(--t-xs)/1 var(--f-ui)}
.sp-step .panel-title{margin-right:auto}
.sp-body{padding:0}
.sp-ta{width:100%; min-height:15rem; max-height:60vh; border:0; border-radius:0; background:transparent; padding:1rem 1.15rem; font:400 1rem/1.6 var(--f-serif); resize:vertical; box-shadow:none}
.sp-ta.short{min-height:10rem}
.sp-ta:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent-wash)}
.sp-total{font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums}

/* ── what will be hidden ───────────────────────────────────────────── */
.sp-found{display:flex; flex-direction:column; gap:.9rem; padding:1rem; max-height:26rem; overflow:auto}
.sp-none{font:400 .95rem/1.5 var(--f-serif); color:var(--ink-3)}
.sp-group + .sp-group{margin-top:.8rem}
.sp-gh{font:600 var(--t-xs)/1.2 var(--f-ui); color:var(--ink-3); margin-bottom:.35rem}
.sp-group ul{display:flex; flex-direction:column; gap:.25rem}
.sp-item{display:flex; align-items:center; gap:.55rem; padding:.35rem .5rem; border-radius:var(--r); cursor:pointer; min-height:2.1rem}
.sp-item:hover{background:var(--bg-2)}
.sp-item input{flex:none; width:1rem; height:1rem; accent-color:var(--accent)}
.sp-v{min-width:0; overflow-wrap:anywhere; font:500 .92rem/1.3 var(--f-ui); color:var(--ink)}
.sp-item input:not(:checked) ~ .sp-v{color:var(--ink-3); text-decoration:line-through}
.sp-tag{margin-left:auto; flex:none; font:500 var(--t-2xs)/1 var(--f-mono); color:var(--accent); background:var(--accent-wash); padding:.3rem .4rem; border-radius:5px}
.sp-item input:not(:checked) ~ .sp-tag{visibility:hidden}
.sp-item small{flex:none; font:500 var(--t-2xs)/1 var(--f-ui); color:var(--ink-3)}
.sp-add{display:flex; gap:.5rem; margin-top:auto}
.sp-add .input{flex:1; min-width:0}
.sp-remember{font-size:var(--t-sm)}

/* ── safe text and restored answer ─────────────────────────────────── */
.sp-safe .panel-body{display:flex; flex-direction:column; gap:.7rem; padding:1rem}
.sp-keep{font-size:var(--t-sm)}
.sp-out{white-space:pre-wrap; overflow-wrap:anywhere; font:400 1rem/1.6 var(--f-serif); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:var(--r); padding:.9rem 1rem; max-height:24rem; overflow:auto; min-height:8rem}
.sp-restored{margin:1rem; cursor:text}
.sp-keepline{color:var(--ink-3); font-style:italic}
.sp-ph{background:var(--accent-wash); color:var(--accent); font:500 .86em/1 var(--f-mono); padding:.1em .25em; border-radius:4px}
.sp-back{background:var(--good-wash); color:inherit; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--good) 60%, transparent); border-radius:3px}
.sp-note{margin:0 1rem 1rem; font:500 var(--t-sm)/1.4 var(--f-ui); color:var(--good)}
.sp-foot{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.7rem 1rem; border-top:1px solid var(--line-2)}
.sp-privacy{margin-top:1rem; font:400 .95rem/1.5 var(--f-serif); color:var(--ink-2)}
.sp-privacy b{font-weight:600; color:var(--ink)}
.sp-faq details{border-top:1px solid var(--line); padding:.8rem 0}
.sp-faq summary{cursor:pointer; font:600 1rem/1.4 var(--f-ui); color:var(--ink)}
.sp-faq p{margin-top:.5rem}