/* app.css — Desk. Token scale lifted from the Brain dashboard (compact default),
   so the two surfaces read as one system. No external stylesheet or font CDN:
   this has to render on office Wi-Fi behind the FortiGate. */
:root{
  --bg:#0c0c16; --bg2:#10101e; --surface:#15152a; --surface-2:#1c1c36; --surface-3:#24244a;
  --border:#2a2a4a; --border-soft:#20203a;
  --text:#e9e9f7; --text-2:#9c9cc2; --text-3:#6a6a8e;
  --accent:#6366f1; --accent-2:#8b91ff; --accent-ghost:rgba(99,102,241,.14);
  --gold:#cdab78; --green:#34d27b; --red:#f4626a; --orange:#f6ad42; --cyan:#22c7e0; --violet:#a78bfa;
  --cat-commit:#f4626a; --cat-event:#34d27b;
  --s1:3px; --s2:6px; --s3:9px; --s4:12px; --s5:16px; --s6:24px;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px -8px rgba(0,0,0,.55);
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',monospace;
  --fs-base:13px; --lh-base:1.45; --row-h:30px; --pad-card:10px;
}
[data-density="comfortable"]{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px;
  --fs-base:14px; --lh-base:1.5; --row-h:38px; --pad-card:14px;
}
*{box-sizing:border-box}
html{font-size:var(--fs-base)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);line-height:var(--lh-base);
     -webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-2)}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;background:var(--bg2);border-bottom:1px solid var(--border)}
.top .r1{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) var(--s4)}
.logo{font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
.logo small{color:var(--text-3);font-weight:400;margin-left:var(--s2);font-size:.72rem}
.chips{display:flex;gap:var(--s2);flex:1;flex-wrap:wrap}
.chip{display:flex;align-items:baseline;gap:var(--s2);background:var(--surface);border:1px solid var(--border-soft);
      border-radius:var(--r-sm);padding:2px var(--s3);white-space:nowrap}
.chip b{font-size:.95rem;font-variant-numeric:tabular-nums}
.chip span{color:var(--text-3);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.chip.warn b{color:var(--orange)} .chip.bad b{color:var(--red)} .chip.ok b{color:var(--green)}
.spacer{flex:1}
.who{color:var(--text-2);font-size:.78rem;white-space:nowrap}
.iconbtn{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
         padding:2px var(--s3);cursor:pointer;color:var(--text-2);font-size:.75rem}
.iconbtn:hover{border-color:var(--accent);color:var(--text)}
.iconbtn.on{background:var(--accent-ghost);border-color:var(--accent);color:var(--accent-2)}

/* three views + settings, no nested menus — an assistant works a queue, not a knowledge base */
.nav{display:flex;gap:var(--s1);padding:0 var(--s4) var(--s2)}
.tab{background:none;border:none;border-bottom:2px solid transparent;padding:var(--s2) var(--s3);
     cursor:pointer;color:var(--text-2);border-radius:var(--r-sm) var(--r-sm) 0 0}
.tab:hover{color:var(--text)}
.tab.active{color:var(--text);border-bottom-color:var(--accent);background:var(--accent-ghost)}
.tab .n{color:var(--text-3);margin-left:var(--s2);font-variant-numeric:tabular-nums;font-size:.78rem}

/* ── banners ────────────────────────────────────────────────────────────── */
.banner{margin:var(--s3) var(--s4) 0;padding:var(--s2) var(--s3);border-radius:var(--r-sm);
        border:1px solid var(--orange);background:rgba(246,173,66,.10);color:var(--orange);font-size:.8rem}
.banner.info{border-color:var(--accent);background:var(--accent-ghost);color:var(--accent-2)}

/* ── rows ───────────────────────────────────────────────────────────────── */
main{padding:var(--s3) var(--s4) var(--s6)}
.rows{border:1px solid var(--border-soft);border-radius:var(--r-md);overflow:hidden}
.row{display:grid;grid-template-columns:78px 1fr auto;gap:var(--s3);align-items:center;
     min-height:var(--row-h);padding:var(--s2) var(--s3);border-bottom:1px solid var(--border-soft);
     background:var(--surface);transition:background .12s}
.row:last-child{border-bottom:none}
.row:hover{background:var(--surface-2)}
.row.sel{background:var(--accent-ghost)}
.row.closed .ttl{text-decoration:line-through;color:var(--text-3)}
.row.unack{border-left:2px solid var(--accent)}
.due{font-family:var(--font-mono);font-size:.72rem;color:var(--text-2);text-align:right;white-space:nowrap}
.due.over{color:var(--red)} .due.soon{color:var(--orange)}
.mid{min-width:0}
.ttl{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{display:flex;gap:var(--s2);align-items:center;margin-top:1px;flex-wrap:wrap}
.tag{font-size:.68rem;color:var(--text-3);background:var(--bg2);border:1px solid var(--border-soft);
     border-radius:4px;padding:0 4px;white-space:nowrap}
.tag.owner{color:var(--cyan);border-color:rgba(34,199,224,.35)}
.tag.hidden-from{color:var(--orange);border-color:rgba(246,173,66,.4)}
.tag.actor{color:var(--violet);border-color:rgba(167,139,250,.35)}
.acts{display:flex;gap:var(--s1);opacity:.35;transition:opacity .12s}
.row:hover .acts,.acts:focus-within{opacity:1}
.act{background:var(--surface-3);border:1px solid var(--border);border-radius:4px;
     padding:1px var(--s2);font-size:.72rem;cursor:pointer;color:var(--text-2)}
.act:hover{border-color:var(--accent);color:var(--text)}
.act.done:hover{border-color:var(--green);color:var(--green)}
.act.danger:hover{border-color:var(--red);color:var(--red)}
.empty{padding:var(--s6);text-align:center;color:var(--text-3)}

/* bulk bar. The display:flex below outranks the UA's [hidden]{display:none}, so the bar
   stayed on screen reading "0 selected". Restore it explicitly. */
.bulk{position:sticky;bottom:0;display:flex;gap:var(--s3);align-items:center;
      background:var(--surface-3);border-top:1px solid var(--accent);padding:var(--s2) var(--s4)}
.bulk[hidden]{display:none}
.bulk b{color:var(--accent-2)}

/* ── settings ───────────────────────────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--r-md);
       padding:var(--pad-card);margin-bottom:var(--s4);overflow-x:auto}
.panel h3{margin:0 0 var(--s2);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.panel p.hint{margin:0 0 var(--s3);color:var(--text-3);font-size:.76rem}
/* Wide rule/container tables scroll inside their own panel (see .panel overflow-x above)
   rather than pushing the whole page sideways and dragging the hint text out of view. */
table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:560px}
th{text-align:left;color:var(--text-3);font-weight:500;font-size:.72rem;text-transform:uppercase;
   letter-spacing:.04em;padding:var(--s1) var(--s2);border-bottom:1px solid var(--border-soft)}
td{padding:var(--s1) var(--s2);border-bottom:1px solid var(--border-soft);vertical-align:top}
tr:last-child td{border-bottom:none}
.pill{font-size:.68rem;border-radius:4px;padding:0 5px;border:1px solid}
.pill.allow{color:var(--green);border-color:rgba(52,210,123,.4)}
.pill.deny{color:var(--red);border-color:rgba(244,98,106,.4)}
.sw{cursor:pointer;width:30px;height:16px;border-radius:8px;background:var(--surface-3);
    border:1px solid var(--border);position:relative;display:inline-block}
.sw::after{content:"";position:absolute;top:1px;left:1px;width:12px;height:12px;border-radius:50%;
           background:var(--text-3);transition:.15s}
.sw.on{background:var(--accent-ghost);border-color:var(--accent)}
.sw.on::after{left:15px;background:var(--accent-2)}
input[type=text],input[type=email],select{background:var(--bg2);border:1px solid var(--border);
     border-radius:var(--r-sm);padding:3px var(--s2);font-size:.8rem;min-width:0}
.btn{background:var(--accent);border:none;border-radius:var(--r-sm);padding:3px var(--s3);
     cursor:pointer;color:#fff;font-size:.78rem}
.btn.ghost{background:var(--surface-3);color:var(--text-2);border:1px solid var(--border)}
.frm{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-top:var(--s3)}
code{font-family:var(--font-mono);font-size:.74rem;color:var(--text-2)}

@media (max-width:640px){
  .row{grid-template-columns:60px 1fr;grid-template-areas:"due mid" "acts acts"}
  .acts{opacity:1;grid-area:acts;justify-content:flex-end}
  .chips{order:3;width:100%}
}