/* WS20 — Hermes console. Same palette as the legacy dashboard on purpose: this
   is a rewrite of the structure, not a rebrand, and an operator should not have
   to relearn what red means on the day the layout changes. */

:root{
  --bg:#0e1116; --panel:#161b23; --panel2:#1d242f; --border:#2a3341;
  --text:#e6ebf2; --muted:#8b97a8; --accent:#4f8ff7; --accent2:#7aa7f9;
  --green:#3fb96b; --red:#e05656; --amber:#e0a83f; --purple:#a172e8;
  --chip:#232c3a; --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{font:14px/1.45 -apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text)}
button{font:inherit; cursor:pointer; border:1px solid var(--border); background:var(--panel2); color:var(--text); border-radius:8px; padding:6px 12px}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600}
button.primary:hover{background:var(--accent2)}
button.danger{color:#f3b3b3}
button.danger:hover{border-color:var(--red)}
button.ghost{background:transparent; border-color:transparent; color:var(--muted)}
button.ghost:hover{color:var(--text)}
button:disabled{opacity:.45; cursor:default}
input,textarea,select{font:inherit; background:#10151c; color:var(--text); border:1px solid var(--border); border-radius:8px; padding:7px 10px}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent)}
textarea{resize:vertical; min-height:70px; width:100%}
a{color:var(--accent2)}
::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-thumb{background:#2b3545;border-radius:6px}

#login{position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:100}
#login .card{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:36px; width:340px; text-align:center}
#login h1{font-size:20px; margin-bottom:6px}
#login p{color:var(--muted); margin-bottom:20px; font-size:13px}
#login input{width:100%; margin-bottom:12px; text-align:center}
#login button{width:100%}
#loginErr{color:var(--red); font-size:13px; margin-top:10px; min-height:16px}

header{display:flex; align-items:center; gap:14px; padding:10px 18px; border-bottom:1px solid var(--border); background:var(--panel); position:sticky; top:0; z-index:30}
header .logo{font-weight:700; font-size:16px; letter-spacing:.3px}
header .logo span{color:var(--accent)}
header .spacer{flex:1}
.ghostlink{color:var(--muted); text-decoration:none; font-size:12px}
.ghostlink:hover{color:var(--text)}
nav{display:flex; gap:4px}
nav button{border:none; background:transparent; color:var(--muted); padding:7px 13px; border-radius:8px; font-weight:600}
nav button.active{background:var(--chip); color:var(--text)}
nav .badge{display:inline-block; margin-left:6px; background:var(--accent); color:#fff; border-radius:9px; padding:0 6px; font-size:11px; font-weight:700}

main{padding:18px 22px 60px; max-width:1180px; margin:0 auto}
.loading{color:var(--muted); padding:40px 0}
.err{color:var(--red); background:rgba(224,86,86,.08); border:1px solid rgba(224,86,86,.3); border-radius:8px; padding:10px 12px; margin-bottom:14px}

h2.screen{font-size:19px; margin-bottom:2px}
.sub{color:var(--muted); font-size:13px; margin-bottom:18px}

/* flag strip — which v2 stages are live, always visible, never a dead control */
.flagstrip{display:flex; gap:5px}
.flagstrip i{width:9px; height:9px; border-radius:50%; background:#39424f; display:block}
.flagstrip i.on{background:var(--green)}

/* queue */
.queue{display:flex; flex-direction:column; gap:10px}
.item{background:var(--panel); border:1px solid var(--border); border-left-width:3px; border-radius:var(--radius); padding:13px 15px}
.item.clock{border-left-color:var(--amber)}
.item.stale{border-left-color:var(--red)}
.item.rule{border-left-color:var(--purple)}
.item.held{border-left-color:var(--accent)}
.item .top{display:flex; align-items:baseline; gap:10px; margin-bottom:5px}
.item .who{font-weight:600}
.item .when{color:var(--muted); font-size:12px; margin-left:auto; white-space:nowrap}
.item .headline{font-size:13.5px}
.item .detail{color:var(--muted); font-size:12.5px; margin-top:6px; white-space:pre-wrap}
.item .draft{background:#10151c; border:1px solid var(--border); border-radius:8px; padding:9px 11px; margin-top:9px; font-size:13px; white-space:pre-wrap}
.item .acts{display:flex; gap:7px; margin-top:10px; flex-wrap:wrap}
.pill{display:inline-block; background:var(--chip); color:var(--muted); border-radius:20px; padding:1px 9px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.4px}
.pill.amber{color:var(--amber)} .pill.red{color:var(--red)} .pill.purple{color:var(--purple)} .pill.green{color:var(--green)}

/* generic table */
table{width:100%; border-collapse:collapse; font-size:13px}
th{text-align:left; color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; padding:7px 9px; border-bottom:1px solid var(--border); cursor:pointer; white-space:nowrap}
th:hover{color:var(--text)}
td{padding:8px 9px; border-bottom:1px solid #1e2530; vertical-align:top}
tr:hover td{background:#141a22}
td.num{text-align:right; font-variant-numeric:tabular-nums}
.bar{display:inline-block; height:7px; background:var(--accent); border-radius:3px; vertical-align:middle; min-width:1px}
.dark td{opacity:.62}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px}

.toolbar{display:flex; gap:8px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.toolbar input[type=search]{min-width:230px}
.counts{color:var(--muted); font-size:12.5px; margin-left:auto}

.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:15px 17px; margin-bottom:14px}
.panel h3{font-size:14px; margin-bottom:9px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:13px}
.kv dt{color:var(--muted)}
.dim{color:var(--muted)}
.empty{color:var(--muted); padding:26px 0; text-align:center}

/* drawer */
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(620px,94vw); background:var(--panel); border-left:1px solid var(--border); z-index:60; overflow:auto; padding:20px 22px}
.drawer h3{font-size:16px; margin-bottom:3px}
.drawer .close{position:absolute; top:14px; right:16px}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:55}

/* trace */
.tl{border-left:2px solid var(--border); margin-left:9px; padding-left:16px}
.tl .ev{position:relative; padding:7px 0}
.tl .ev::before{content:''; position:absolute; left:-22px; top:13px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.tl .ev.bad::before{background:var(--red)}
.tl .name{font-weight:600; font-size:13px}
.tl .meta{color:var(--muted); font-size:12px}