/* SKEPTIC · style.css — terminal aesthetic, production finish.
   two themes (dark default), one accent, severity as a first-class color system */

:root{
  --bg:#0b0e12; --panel:#10151d; --panel2:#0d1117; --ink:#c8d3de; --bright:#e8eef5;
  --dim:#6b7787; --line:#1f2836; --line2:#2a3648;
  --acc:#ffb454; --acc-ink:#161006;
  --ok:#7fd88f; --warn:#ffcc66; --bad:#ff7b72; --orange:#ff9e64; --cyan:#6ec7ff; --pink:#ff9ecb;
  --mark:#3a2b10;
  font-size:15px;
}
body[data-theme="light"]{
  --bg:#f4f1e9; --panel:#fbfaf5; --panel2:#f0ede3; --ink:#33404f; --bright:#161e28;
  --dim:#7d8794; --line:#ddd6c6; --line2:#c9c0aa;
  --acc:#b06a00; --acc-ink:#fff8ec;
  --ok:#22773a; --warn:#9a6b00; --bad:#c03426; --orange:#b35c00; --cyan:#0b6a9e; --pink:#b0336f;
  --mark:#f4e3bd;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:ui-monospace,"Cascadia Code","JetBrains Mono",Consolas,Menlo,monospace;
  line-height:1.55; transition:background .25s,color .25s}
body{max-width:1080px;margin:0 auto;padding:16px 22px 64px}
::selection{background:var(--acc);color:var(--acc-ink)}

a{color:var(--cyan)}
.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:var(--acc-ink);padding:6px 12px;z-index:99}
.skip:focus{left:8px;top:8px}
.dim{color:var(--dim)}
.hidden{display:none!important}

/* ---------- header ---------- */
header{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.brand-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.mark{font-size:28px;letter-spacing:.28em;color:var(--acc);font-weight:700;text-decoration:none}
.mark .cursor{animation:blink 1.1s steps(1) infinite;color:var(--acc)}
@keyframes blink{50%{opacity:0}}
.head-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kbd-btn kbd{font:inherit;font-size:11px;border:1px solid var(--line2);border-bottom-width:2px;
  border-radius:3px;padding:0 5px;color:var(--dim);margin-left:4px}
.tagline{color:var(--dim);margin-top:2px}
.badge{display:inline-block;margin-top:8px;padding:2px 10px;border:1px solid var(--line);
  border-radius:3px;color:var(--ok);font-size:12.5px}

/* ---------- tabs ---------- */
#tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;position:sticky;top:0;
  background:var(--bg);z-index:8;padding:8px 0;border-bottom:1px solid var(--line)}
.tab{background:none;border:1px solid var(--line);color:var(--dim);padding:6px 13px;
  font:inherit;cursor:pointer;border-radius:3px;transition:color .12s,border-color .12s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 8%,transparent)}

/* ---------- panels & inputs ---------- */
.panel.hidden{display:none}
.brief{color:var(--dim);font-size:13.5px;border-left:2px solid var(--line2);padding-left:12px;margin-bottom:12px}

textarea{width:100%;min-height:170px;background:var(--panel);color:var(--bright);
  border:1px solid var(--line);border-radius:4px;padding:12px;font:inherit;font-size:13.5px;
  resize:vertical;line-height:1.5}
textarea:focus{outline:none;border-color:var(--acc)}
.ta-meta{display:flex;justify-content:space-between;color:var(--dim);font-size:11.5px;margin-top:3px}
.duo{display:flex;gap:12px;flex-wrap:wrap}
.duocol{flex:1;min-width:280px}
.duocol label{color:var(--dim);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:4px}
.duocol textarea{min-height:190px}
.abox{margin-bottom:10px}
.abox .lab{display:flex;justify-content:space-between;color:var(--dim);font-size:12px;margin-bottom:3px}
.abox .lab a{color:var(--dim);cursor:pointer;text-decoration:none}
.abox .lab a:hover{color:var(--bad)}
input[type="text"],input:not([type]){background:var(--panel);border:1px solid var(--line);color:var(--acc);
  font:inherit;padding:4px 8px;border-radius:3px;width:200px}
.check{display:inline-flex;align-items:center;gap:6px;color:var(--dim);font-size:13px;cursor:pointer}
.check input{accent-color:var(--acc)}

body.dragging textarea{border-color:var(--cyan)}
body.dragging::after{content:'⬇ drop text file';position:fixed;inset:0;display:flex;
  align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 80%,transparent);
  color:var(--cyan);font-size:22px;z-index:50;pointer-events:none}

/* ---------- rows & buttons ---------- */
.row{margin:10px 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hint{font-size:12px}
button{font:inherit;cursor:pointer;border-radius:3px}
.go{background:var(--acc);color:var(--acc-ink);border:1px solid var(--acc);padding:8px 16px;font-weight:700}
.go:hover{filter:brightness(1.08)}
.go:active{transform:translateY(1px)}
.demo{background:none;color:var(--cyan);border:1px solid var(--line);padding:7px 12px}
.demo:hover{border-color:var(--cyan)}
.ghost{background:none;color:var(--dim);border:1px solid var(--line);padding:7px 12px}
.ghost:hover{color:var(--ink);border-color:var(--line2)}
.plantbar{display:none;color:var(--dim);margin:6px 0}
.plantbar.show{display:block}

/* ---------- output: verdict & cards ---------- */
.out{margin-top:8px}
.verdict{font-size:19px;font-weight:700;margin:14px 0 4px;letter-spacing:.02em}
.v-clean{color:var(--ok)} .v-minor{color:var(--cyan)} .v-warn{color:var(--warn)}
.v-bad{color:var(--bad)}
.sub{color:var(--dim);margin-bottom:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:4px;
  padding:12px 14px;margin:10px 0;animation:rise .18s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .card{animation:none} .mark .cursor{animation:none} }
.card h4{margin:0 0 8px;font-size:12.5px;letter-spacing:.14em;color:var(--acc);
  text-transform:uppercase;font-weight:600}
.card h4 .sev{float:right;text-transform:none;letter-spacing:0}
.sev-critical{color:var(--bad)} .sev-high{color:var(--orange)} .sev-medium{color:var(--warn)}
.sev-low{color:var(--cyan)} .sev-info{color:var(--dim)}
.chip{display:inline-block;border:1px solid var(--line2);border-radius:10px;padding:0 8px;
  font-size:11.5px;color:var(--dim);margin-left:6px}
.chip.critical{color:var(--bad);border-color:var(--bad)}
.chip.high{color:var(--orange);border-color:var(--orange)}
.chip.medium{color:var(--warn);border-color:var(--warn)}

.mono-list{margin:0;padding-left:0;list-style:none}
.mono-list li{padding:3px 0;border-bottom:1px dotted var(--line);font-size:13.5px;overflow-wrap:anywhere}
.mono-list li:last-child{border-bottom:none}
.quote{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--acc);
  padding:6px 10px;margin:6px 0;color:var(--ink);font-size:13px;overflow-wrap:anywhere;white-space:pre-wrap}
.quote .off{color:var(--dim);font-size:11px}
.hit{color:var(--bad)} .hit-ok{color:var(--ok)}
.k{color:var(--cyan)} .num{color:var(--pink)}
table{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0}
th,td{border:1px solid var(--line);padding:4px 8px;text-align:left;overflow-wrap:anywhere}
th{color:var(--dim);font-weight:600;background:var(--panel)}
td.n,th.n{text-align:right}
.bar{background:var(--panel2);height:10px;border:1px solid var(--line);position:relative;margin:2px 0 6px;min-width:80px}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--acc)}
.steps{color:var(--dim);font-size:12.5px;margin-top:6px}
.okword{color:var(--ok)} .badword{color:var(--bad)}

/* ghost view — invisible characters made visible */
.ghostview{background:var(--panel2);border:1px dashed var(--line2);border-radius:4px;
  padding:10px;margin:8px 0;font-size:13px;line-height:2;overflow-wrap:anywhere;white-space:pre-wrap}
.ghost{border-radius:3px;padding:0 2px;margin:0 1px;font-size:11px;border:1px solid transparent;cursor:help}
.ghost.zw{background:#3a2b10;color:var(--warn)} .ghost.bidi{background:#3d1414;color:var(--bad)}
.ghost.tag{background:#132a3d;color:var(--cyan)} .ghost.shy{background:#2b2437;color:var(--pink)}
.ghost.vsel{background:#1d2b22;color:var(--ok)} .ghost.space{background:#26221a;color:var(--warn)}
.ghost.blanky{background:#26221a;color:var(--warn)} .ghost.repl{background:#3d1414;color:var(--bad)}
.ghost.ctrl{background:#1d2b22;color:var(--cyan)}
body[data-theme="light"] .ghost.zw{background:#f4e3bd;color:#7a5200}
body[data-theme="light"] .ghost.bidi{background:#f6d5d2;color:#8c1f14}
body[data-theme="light"] .ghost.tag{background:#d3e8f6;color:#0b5a86}
body[data-theme="light"] .ghost.vsel{background:#d9efd9;color:#1f6b33}
body[data-theme="light"] .ghost.space{background:#efe6c8;color:#7a5b00}
mark.hl{background:var(--mark);color:inherit;padding:0 1px;border-radius:2px;outline:1px solid color-mix(in srgb,var(--bad) 40%,transparent)}
mark.hl.critical{outline-color:var(--bad)} mark.hl.high{outline-color:var(--orange)}
mark.hl.medium{outline-color:var(--warn)} mark.hl.low,mark.hl.info{outline-color:var(--cyan)}

/* diff rendering */
.diffbox{background:var(--panel2);border:1px solid var(--line);border-radius:4px;padding:8px 10px;
  font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.diffbox .eq{color:var(--dim)} .diffbox .ins{background:#12291a;color:var(--ok)}
.diffbox .del{background:#2f1414;color:var(--bad);text-decoration:line-through}
.diffbox .rep{background:#2f2410;color:var(--warn)}
body[data-theme="light"] .diffbox .ins{background:#d9efd9}
body[data-theme="light"] .diffbox .del{background:#f6d5d2}
body[data-theme="light"] .diffbox .rep{background:#f4e3bd}

/* redaction output */
.redblock{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--ok);
  padding:10px;margin:8px 0;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere;
  max-height:340px;overflow:auto}

/* dossier dial + chips */
.dossier-head{display:flex;gap:18px;align-items:center;margin:14px 0;flex-wrap:wrap}
.dial{width:96px;height:96px;flex:0 0 auto}
.dial .track{stroke:var(--line2);fill:none}
.dial .arc{fill:none;stroke-linecap:round;transition:stroke-dashoffset .5s ease}
.dial text{font-family:inherit}
.dial .score{font-size:26px;font-weight:700;fill:var(--bright)}
.dial .label{font-size:6.5px;letter-spacing:.08em;fill:var(--dim)}
.dossier-title{font-size:19px;font-weight:700}
.dossier-sub{color:var(--dim);font-size:13px;margin-top:2px}
.section-chips{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 12px}
.schip{border:1px solid var(--line2);border-radius:3px;background:none;color:var(--dim);
  padding:4px 10px;font:inherit;font-size:12px;cursor:pointer}
.schip:hover{color:var(--ink)}
.schip .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.clean{background:var(--ok)} .dot.minor{background:var(--cyan)}
.dot.suspicious{background:var(--warn)} .dot.dangerous{background:var(--bad)}
.exportbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

/* ---------- history drawer ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,92vw);background:var(--panel);
  border-left:1px solid var(--line2);z-index:20;padding:14px;overflow:auto;
  box-shadow:-8px 0 24px rgba(0,0,0,.35)}
.drawer-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--acc)}
.history-list{list-style:none;margin:10px 0 0;padding:0}
.history-list li{border:1px solid var(--line);border-radius:4px;padding:8px 10px;margin-bottom:8px;
  font-size:12.5px;background:var(--panel2)}
.history-list .h-top{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;margin-bottom:3px}
.history-list .h-prev{color:var(--ink);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.history-list .h-act{margin-top:6px;display:flex;gap:6px}
.history-list .h-act button{padding:2px 8px;font-size:11.5px}

/* ---------- status bar ---------- */
#statusbar{border-top:1px solid var(--line);margin-top:26px;padding-top:10px;
  display:flex;justify-content:space-between;gap:10px;color:var(--dim);font-size:12px;flex-wrap:wrap}
#stats{color:var(--dim)}
#counter{color:var(--ok)}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,6,10,.62);z-index:30;
  display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.palette-box{width:min(560px,92vw);background:var(--panel);border:1px solid var(--line2);
  border-radius:6px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.palette-box input{width:100%;border:none;border-bottom:1px solid var(--line);background:var(--panel);
  color:var(--bright);padding:13px 16px;font:inherit;font-size:15px;border-radius:0}
.palette-box input:focus{outline:none}
#paletteList{list-style:none;margin:0;padding:6px;max-height:46vh;overflow:auto}
#paletteList li{padding:8px 12px;border-radius:4px;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
#paletteList li .dim{font-size:11.5px}
#paletteList li.sel,#paletteList li:hover{background:color-mix(in srgb,var(--acc) 14%,transparent)}
#paletteList li b{color:var(--acc);font-weight:600}

#toast{position:fixed;bottom:18px;right:18px;background:var(--acc);color:var(--acc-ink);padding:8px 14px;
  border-radius:4px;font-weight:700;display:none;z-index:40;max-width:70vw;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sharebar{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--acc);
  color:var(--ink);display:flex;gap:10px;align-items:center;justify-content:center;padding:10px;
  font-size:13px;z-index:25;flex-wrap:wrap}

details{margin:8px 0}
summary{cursor:pointer;color:var(--cyan);font-size:13.5px}
details[open] summary{margin-bottom:6px}

@media (max-width:640px){
  body{padding:12px 12px 70px}
  .mark{font-size:22px}
  .duo{flex-direction:column}
  .duocol{min-width:0}
}