/* Robot-Speak Checker — /robot-speak/ */
.rs-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,24rem); gap:1.2rem; align-items:start}
@media (max-width:68rem){ .rs-grid{grid-template-columns:minmax(0,1fr)} }

/* ── the text ──────────────────────────────────────────────────────── */
.rs-in .panel-head{gap:.6rem}
.rs-count{margin-left:auto; font:500 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.rs-count.over{color:var(--bad); font-weight:600}
.rs-body{padding:0}
.rs-ta,.rs-marked{min-height:clamp(16rem,46vh,30rem); max-height:70vh; border:0; border-radius:0; background:transparent; padding:1.1rem 1.2rem; font:400 1.06rem/1.7 var(--f-serif); color:var(--ink)}
.rs-ta{width:100%; resize:vertical; box-shadow:none}
.rs-ta:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent-wash)}
.rs-marked{overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; cursor:text}
.rs-empty{color:var(--ink-4); font-style:italic}
.rs-foot{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.7rem 1rem; border-top:1px solid var(--line-2)}

/* each kind of habit has a color: garnet for the loudest tells, ochre for words, blue for patterns,
   ink for format, malachite for your own rules */
.rs-m,.rs-issue{--c:var(--hi)}
[data-cat="dash"],[data-cat="opener"],[data-cat="closer"],[data-cat="flatter"],[data-cat="aiism"]{--c:var(--bad)}
[data-cat="buzz"],[data-cat="triple"]{--c:var(--hi)}
[data-cat="notjust"],[data-cat="tease"],[data-cat="rhythm"]{--c:var(--accent)}
[data-cat="bold"],[data-cat="emoji"],[data-cat="heading"],[data-cat="bullets"],[data-cat="exclaim"]{--c:var(--ink-3)}
[data-cat="spelling"],[data-cat="banned"],[data-cat="length"]{--c:var(--good)}
.rs-m{background:color-mix(in srgb, var(--c) 14%, transparent); color:inherit; border-radius:3px; box-shadow:inset 0 -2px 0 color-mix(in srgb, var(--c) 70%, transparent); padding:0 .04em}
.rs-m[data-cat="dash"]{padding:0 .12em; font-weight:700}
.rs-m.flash{animation:rs-flash 1.2s ease}
@keyframes rs-flash{0%,40%{background:color-mix(in srgb, var(--c) 45%, transparent)}}
@media (prefers-reduced-motion: reduce){ .rs-m.flash{animation:none; outline:2px solid var(--c)} }

/* ── the score and the list ────────────────────────────────────────── */
.rs-side{display:flex; flex-direction:column; gap:.9rem; min-width:0}
.rs-score{display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); --tone:var(--ink-3)}
.rs-score[data-tone="good"]{--tone:var(--good)}
.rs-score[data-tone="ok"]{--tone:var(--hi)}
.rs-score[data-tone="warn"]{--tone:var(--hi)}
.rs-score[data-tone="bad"]{--tone:var(--bad)}
.rs-score-n{flex:none; display:grid; place-items:center; min-width:3.6rem; height:3.6rem; padding:0 .5rem; border-radius:999px; border:2px solid var(--tone); color:var(--tone); font:600 1.7rem/1 var(--f-head); font-variant-numeric:tabular-nums}
.rs-score-t{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.rs-score-t b{font:400 1.4rem/1.15 var(--f-head); color:var(--ink)}
.rs-score-t small{font:400 var(--t-sm)/1.35 var(--f-ui); color:var(--ink-3)}
.rs-issues{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
.rs-issues:empty{display:none}
.rs-issue{padding:.75rem 1rem .85rem; border-top:1px solid var(--line-2)}
.rs-issue:first-child{border-top:0}
.rs-issue-h{display:flex; align-items:center; gap:.55rem; width:100%; padding:0; border:0; background:none; text-align:left; color:var(--ink); font:600 .95rem/1.3 var(--f-ui); cursor:pointer}
div.rs-issue-h{cursor:default}
button.rs-issue-h:hover b{text-decoration:underline; text-underline-offset:3px}
.rs-dot{flex:none; width:.65rem; height:.65rem; border-radius:3px; background:color-mix(in srgb, var(--c) 30%, transparent); box-shadow:inset 0 -2px 0 var(--c)}
.rs-n{margin-left:auto; font:600 var(--t-xs)/1 var(--f-ui); color:var(--ink-2); background:var(--bg-2); border-radius:999px; padding:.25rem .5rem; font-variant-numeric:tabular-nums}
.rs-n:empty{display:none}
.rs-issue p{font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-2); margin-top:.35rem; max-width:none}
.rs-ex{display:flex; flex-wrap:wrap; gap:.3rem .45rem}
.rs-q{font:italic 400 .9rem/1.35 var(--f-serif); color:var(--ink); background:var(--bg); border:1px solid var(--line-2); border-radius:6px; padding:.15rem .45rem}
.rs-q small{font:600 var(--t-2xs)/1 var(--f-ui); font-style:normal; color:var(--good)}
.rs-clean{padding:1rem; font:400 1rem/1.5 var(--f-serif); color:var(--good)}

/* ── house rules ───────────────────────────────────────────────────── */
.rs-rules{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
.rs-rules summary{display:flex; align-items:center; gap:.6rem; padding:.8rem 1rem; cursor:pointer; list-style:none; font:600 .95rem/1.3 var(--f-ui)}
.rs-rules summary::-webkit-details-marker{display:none}
.rs-rules summary::after{content:""; width:.5rem; height:.5rem; border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3); transform:rotate(45deg); margin:-.2rem .2rem 0 0}
.rs-rules[open] summary::after{transform:rotate(225deg); margin-top:.2rem}
.rs-rules summary small{margin-left:auto; font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-3)}
.rs-rules-body{display:flex; flex-direction:column; gap:.8rem; padding:.2rem 1rem 1rem; border-top:1px solid var(--line-2); padding-top:.9rem}
.rs-checks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem .8rem}
@media (max-width:26rem){ .rs-checks{grid-template-columns:minmax(0,1fr)} }

/* ── after: prompts ────────────────────────────────────────────────── */
.rs-after{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.2rem; margin-top:1.2rem}
@media (max-width:60rem){ .rs-after{grid-template-columns:minmax(0,1fr)} }
.rs-out .panel-body{display:flex; flex-direction:column; gap:.7rem; padding:1rem}
.rs-pre{max-height:18rem; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; margin:0}
.rs-out .panel-foot{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.7rem 1rem; border-top:1px solid var(--line-2)}
.rs-faq details{border-top:1px solid var(--line); padding:.8rem 0}
.rs-faq summary{cursor:pointer; font:600 1rem/1.4 var(--f-ui); color:var(--ink)}
.rs-faq p{margin-top:.5rem}