/* inbox.rogerle.com — dark-first. CSS variables, card-based, mobile-responsive. */
:root, [data-theme="dark"] {
  --bg:#0f1117; --bg2:#181a23; --bg3:#1f2231; --tx:#e2e8f0; --tx2:#94a3b8; --tx3:#64748b;
  --brd:#2a2d3a; --acc:#e67e22; --acc2:#f0923e;
  --red:#ef4444; --orange:#f59e0b; --blue:#60a5fa; --grey:#64748b; --grn:#10b981;
  --card:#181a23; --inp:#1f2231; --inpB:#333749;
  --r:12px; --rs:8px; --s2:0 4px 12px rgba(0,0,0,.4);
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--tx); line-height:1.5;
}
small { color:var(--tx3); font-weight:400; }

/* ── Splash / login ── */
body.splash { display:grid; place-items:center; min-height:100vh; padding:1rem; }
.splash-card {
  background:var(--card); border:1px solid var(--brd); border-radius:var(--r);
  padding:2.5rem 2rem; max-width:360px; width:100%; text-align:center; box-shadow:var(--s2);
}
.splash-card .logo { font-size:2.5rem; }
.splash-card h1 { margin:.4rem 0 1rem; font-size:1.4rem; }
.splash-card .hint { color:var(--tx2); font-size:.85rem; margin:-.4rem 0 1rem; }
.splash-card form { display:flex; flex-direction:column; gap:.7rem; }
.splash-card input {
  background:var(--inp); border:1px solid var(--inpB); border-radius:var(--rs);
  padding:.7rem .9rem; color:var(--tx); font-size:1rem;
}
.splash-card input:focus { outline:none; border-color:var(--acc); }
.error { color:var(--red); font-size:.9rem; }
.btn {
  display:inline-block; background:var(--acc); color:#fff; border:none; cursor:pointer;
  padding:.7rem 1.2rem; border-radius:var(--rs); font-size:1rem; font-weight:600; text-decoration:none;
}
.btn:hover { background:var(--acc2); }
.splash-card footer { margin-top:1.5rem; color:var(--tx3); font-size:.72rem; }

/* ── Top bar ── */
.topbar {
  position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  background:#0a0c12; border-bottom:1px solid var(--brd); padding:.7rem 1.1rem;
}
.brand { font-weight:700; }
.navright { display:flex; gap:.9rem; align-items:center; }
.badge-count { background:var(--bg3); color:var(--tx2); padding:.2rem .6rem; border-radius:999px; font-size:.8rem; }
.logout { color:var(--tx2); text-decoration:none; font-size:.9rem; }
.logout:hover { color:var(--acc); }

/* ── Layout ── */
.wrap { max-width:860px; margin:0 auto; padding:1rem 1.1rem 4rem; }
.filters { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.6rem; margin:.6rem 0 1rem; }
.chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.chip {
  background:var(--bg2); border:1px solid var(--brd); color:var(--tx2); text-decoration:none;
  padding:.32rem .7rem; border-radius:999px; font-size:.82rem;
}
.chip.on { background:var(--acc); border-color:var(--acc); color:#fff; }
.chip b { opacity:.85; }
.empty { text-align:center; color:var(--tx2); padding:3rem 1rem; font-size:1.1rem; }

/* ── Items ── */
.item {
  background:var(--card); border:1px solid var(--brd); border-left:4px solid var(--grey);
  border-radius:var(--rs); margin-bottom:.55rem; overflow:hidden;
}
.item.cat-urgent { border-left-color:var(--red); }
.item.cat-action { border-left-color:var(--orange); }
.item.cat-fyi    { border-left-color:var(--blue); }
.item.cat-low    { border-left-color:var(--grey); }
.item.done { opacity:.55; }
.item summary {
  display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; cursor:pointer; list-style:none;
}
.item summary::-webkit-details-marker { display:none; }
.u { flex:none; width:1.6rem; height:1.6rem; border-radius:50%; display:grid; place-items:center;
     font-size:.8rem; font-weight:700; color:#fff; background:var(--grey); }
.u5,.u4 { background:var(--red); } .u3 { background:var(--orange); } .u2 { background:var(--blue); } .u1 { background:var(--grey); }
.cat-tag { flex:none; font-size:.78rem; color:var(--tx2); }
.from { flex:none; font-weight:600; max-width:30%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subj { flex:1; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.due { flex:none; font-size:.76rem; color:var(--orange); }
.review-badge { flex:none; font-size:.7rem; color:var(--wrn,#f59e0b); border:1px solid var(--wrn,#f59e0b);
  padding:.05rem .4rem; border-radius:999px; white-space:nowrap; }
.chip.review.on { background:var(--wrn,#f59e0b); border-color:var(--wrn,#f59e0b); color:#1a1205; }
.item .body { padding:0 .9rem .9rem; border-top:1px solid var(--brd); }
.summary { margin:.8rem 0 .4rem; }
.action { background:var(--bg3); padding:.5rem .7rem; border-radius:var(--rs); font-size:.92rem; }
.draft { margin:.7rem 0; }
.draft-h { font-size:.82rem; color:var(--tx2); margin-bottom:.3rem; }
.draft textarea {
  width:100%; background:var(--inp); border:1px solid var(--inpB); border-radius:var(--rs);
  color:var(--tx); padding:.6rem .7rem; font-family:inherit; font-size:.9rem; resize:vertical;
}
.meta { font-size:.74rem; color:var(--tx3); margin:.6rem 0; }
.rowacts { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.btn-sm {
  background:var(--bg3); border:1px solid var(--brd); color:var(--tx); cursor:pointer;
  padding:.4rem .8rem; border-radius:var(--rs); font-size:.84rem; text-decoration:none;
}
.btn-sm:hover { border-color:var(--acc); }
.btn-sm.open { color:var(--blue); }
.btn-sm.done-btn { background:var(--grn); border-color:var(--grn); color:#fff; }
.btn-sm.arch { color:var(--tx3); }

@media (max-width:560px) {
  .from { max-width:40%; }
  .cat-tag { display:none; }
}