:root{--bg:#0e1216;--panel:#161c22;--panel2:#11161b;--line:#242e38;--fg:#e6edf3;
  --dim:#8b98a5;--accent:#f5c518;--ok:#3fb950;--warn:#f0883e;--danger:#d7263d}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button{font:inherit;cursor:pointer}

/* wordmark: the exaba glyph is the E in "E-mail" */
.wordmark{display:flex;align-items:center;gap:.05em;margin:0;font-size:1.05rem;
  font-weight:600;letter-spacing:-.02em}
.wordmark .glyph{width:1.15em;height:1.15em;color:var(--accent);display:block}

/* ---------- sign in ---------- */
body.centred{display:grid;place-items:center;min-height:100dvh}
.signin{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:2rem 1.6rem;width:min(92vw,380px);text-align:center}
.signin .wordmark{justify-content:center;font-size:1.6rem;margin-bottom:1.5rem}
.signin label{display:block;text-align:left;font-size:.75rem;color:var(--dim);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.signin input{width:100%;background:#0b0f13;color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:.7rem .75rem;font-size:1rem;margin-bottom:.9rem}
.signin input:focus{outline:2px solid var(--accent);outline-offset:1px}
.signin button{width:100%;background:var(--accent);color:#1a1400;border:0;border-radius:8px;
  padding:.6rem 1rem;font-weight:650}
#code,#ecode,#tcode{letter-spacing:.5em;text-align:center;
  font:1.3rem ui-monospace,SFMono-Regular,Menlo,monospace}
.or{color:var(--dim);font-size:.78rem;margin:.9rem 0 .5rem;position:relative}
button.link{background:none;color:var(--dim);border:0;font-weight:400;font-size:.82rem;
  margin-top:.7rem;text-decoration:underline;width:auto}
.msg{min-height:1.2em;font-size:.85rem;color:var(--accent);margin:.8rem 0 0}
.msg.bad{color:var(--warn)}
.foot{color:var(--dim);font-size:.75rem;margin:1.2rem 0 0;line-height:1.45}
.qr{background:#fff;padding:.6rem;border-radius:10px;display:inline-block;margin:.4rem 0 .8rem}
.qr img{display:block}
details{text-align:left;margin:.2rem 0 .8rem}
summary{color:var(--dim);font-size:.8rem;cursor:pointer}
.secret{font:14px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);
  letter-spacing:.06em;word-break:break-all;margin:.4rem 0 0}
.hint{color:var(--dim);font-size:.83rem;margin:.2rem 0 .8rem}

/* ---------- app shell ---------- */
body.app{display:flex;flex-direction:column;overflow:hidden}
.bar{display:flex;align-items:center;gap:.7rem;padding:.6rem .9rem;border-bottom:1px solid var(--line);
  padding-top:calc(.6rem + env(safe-area-inset-top));position:relative;flex:0 0 auto}
.spacer{flex:1}
.badge{font-size:.72rem;color:var(--dim);border:1px solid var(--line);border-radius:999px;
  padding:.15rem .55rem;white-space:nowrap}
.icon{background:none;border:0;color:var(--fg);font-size:1.1rem;padding:.2rem .4rem;display:none}
.avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#1d252d;
  color:var(--accent);font-size:.75rem;font-weight:700;letter-spacing:.02em}
.avatar.big{width:44px;height:44px;font-size:.95rem;display:grid;place-items:center}
.menu{position:absolute;right:.9rem;top:calc(100% + .4rem);background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:1rem;width:min(90vw,290px);z-index:20;
  box-shadow:0 12px 32px rgba(0,0,0,.5)}
.me{display:flex;gap:.7rem;align-items:center;margin-bottom:.8rem}
.me strong{display:block;font-size:.9rem;font-weight:600}
.stats{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;margin:0 0 .9rem;font-size:.82rem}
.stats dt{color:var(--dim)}
.stats dd{margin:0}
.ghost{background:none;border:1px solid var(--line);color:var(--fg);border-radius:8px;
  padding:.45rem .8rem;font-size:.85rem;width:100%;margin-top:.4rem}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.ghost.small{width:auto;padding:.25rem .6rem;font-size:.78rem;margin:0}
.primary{background:var(--accent);color:#1a1400;border:0;border-radius:8px;padding:.5rem 1rem;
  font-weight:650;font-size:.88rem}
.pill{font-size:.66rem;border:1px solid var(--line);border-radius:999px;padding:.08rem .45rem;
  color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.pill.admin{color:var(--ok);border-color:var(--ok)}

.layout{flex:1;display:grid;grid-template-columns:200px 340px 1fr;min-height:0;position:relative}
.folders{border-right:1px solid var(--line);padding:1rem .6rem .6rem;overflow-y:auto;
  background:var(--panel2)}
.folder{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;
  border:0;color:var(--dim);text-align:left;padding:.45rem .6rem;border-radius:8px;font-size:.88rem}
.folder:hover{background:#1d252d;color:var(--fg)}
.folder.on{background:#1d252d;color:var(--accent);font-weight:600}
.folder em{font-style:normal;background:var(--accent);color:#1a1400;border-radius:999px;
  padding:0 .4rem;font-size:.7rem;font-weight:700}
.folder i{font-style:normal;font-size:.72rem;color:var(--dim)}
.admin-link{margin-top:.8rem;border-top:1px solid var(--line);padding-top:.7rem;border-radius:0}

.list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.listhead{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.listhead span{font-size:.78rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.list ul{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.row{border-bottom:1px solid var(--line);cursor:pointer}
.row:focus-visible{outline:none}
.row.unseen .who,.row.unseen .subj{font-weight:700;color:var(--fg)}
.r1{display:flex;justify-content:space-between;gap:.6rem;font-size:.84rem}
.who{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r1 time{color:var(--dim);font-size:.75rem;flex:0 0 auto}
.subj{font-size:.86rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-top:.15rem}

.reader{padding:1.2rem;overflow-y:auto;min-height:0}
.reader h2{font-size:1.15rem;margin:0 0 .8rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;font-size:.82rem;color:var(--dim)}
.kv b{color:var(--fg);font-weight:500}
.acts{display:flex;gap:.5rem;margin:.9rem 0}
.acts .ghost{width:auto;margin:0}
.body{margin-top:.6rem;padding-top:.9rem;border-top:1px solid var(--line);white-space:pre-wrap;
  font-size:.9rem}

/* ---------- dialogs ---------- */
dialog{background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:14px;
  padding:1.4rem;width:min(94vw,640px);max-height:88vh}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin:0 0 1rem;font-size:1.05rem}
dialog label{display:block;font-size:.75rem;color:var(--dim);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:.7rem}
dialog input,dialog textarea,dialog select{width:100%;background:#0b0f13;color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:.55rem .65rem;font:inherit;margin-top:.3rem}
dialog textarea{resize:vertical;font:14px/1.5 ui-sans-serif,system-ui}
dialog menu{display:flex;gap:.6rem;justify-content:flex-end;padding:0;margin:1rem 0 0}
dialog menu .ghost{width:auto;margin:0}
.admin{max-height:80vh;overflow-y:auto}
.tabs{display:flex;gap:.4rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.tabs button{background:none;border:0;color:var(--dim);padding:.5rem .8rem;font-size:.85rem;
  border-bottom:2px solid transparent}
.tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
table{width:100%;border-collapse:collapse;font-size:.83rem}
th{text-align:left;color:var(--dim);font-weight:500;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.07em;padding:.35rem .4rem;border-bottom:1px solid var(--line)}
td{padding:.45rem .4rem;border-bottom:1px solid var(--line);vertical-align:middle}
td.mono{font:11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim);word-break:break-all}
td.ok{color:var(--ok)}
td.warn{color:var(--warn)}
.row-inline,.row{}
.admin .row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem;padding:0;border:0;cursor:auto}
.admin .row input,.admin .row select{flex:1 1 160px;width:auto;margin:0}
.admin .row button{flex:0 0 auto}
.domain{border:1px solid var(--line);border-radius:10px;padding:.9rem;margin-bottom:.8rem}
.domain h3{margin:0 0 .5rem;font-size:.95rem}
.steps{margin:0 0 .8rem;padding-left:1.1rem;font-size:.83rem;color:var(--dim);line-height:1.7}
code{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--accent);
  background:#0b0f13;padding:.1rem .35rem;border-radius:4px;word-break:break-all}

/* ---------- narrow ---------- */
@media(max-width:900px){
  .icon{display:block}
  .layout{grid-template-columns:1fr}
  .folders{position:absolute;top:0;left:0;bottom:0;width:220px;z-index:15;transform:translateX(-105%);
    transition:transform .18s ease;
    /* Breathing room above the first folder, and clear of a notch. */
    padding-top:calc(1.1rem + env(safe-area-inset-top));
    box-shadow:2px 0 12px rgba(0,0,0,.4)}
  body.nav-open .folders{transform:none}
  .list{border-right:0}
  .reader{display:none}
  .reader.open{display:block;position:absolute;inset:0;top:53px;background:var(--bg);z-index:10}
}

/* ---------- calendar ---------- */
.cal{margin-top:1rem;border-top:1px solid var(--line);padding-top:.8rem}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.calhead strong{font-size:.8rem;font-weight:600}
.icon2{background:none;border:0;color:var(--dim);font-size:1rem;padding:0 .35rem;line-height:1}
.icon2:hover{color:var(--accent)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;font-size:.7rem}
.calgrid span{text-align:center;color:var(--dim);padding:.2rem 0;font-size:.62rem}
.calgrid button{background:none;border:0;color:var(--dim);padding:.25rem 0;border-radius:5px;
  position:relative}
.calgrid button:hover{background:#1d252d;color:var(--fg)}
.calgrid button.other{opacity:.3}
.calgrid button.today{color:var(--accent);font-weight:700}
.calgrid button.sel{background:var(--accent);color:#1a1400;font-weight:700}
.calgrid button.has::after{content:"";position:absolute;left:50%;bottom:1px;width:3px;height:3px;
  border-radius:50%;background:var(--ok);transform:translateX(-50%)}
.cal .ghost.small{width:100%;margin-top:.5rem}
.two{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.evrow{padding:.6rem .8rem;border-bottom:1px solid var(--line)}
.evrow .t{font-size:.75rem;color:var(--accent)}
.evrow .s{font-size:.9rem;font-weight:600}
.evrow .m{font-size:.78rem;color:var(--dim)}

.viewtabs{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 0}
.viewtabs button{background:none;border:1px solid var(--line);color:var(--dim);border-radius:6px;
  padding:.2rem .6rem;font-size:.78rem}
.viewtabs button.on{color:var(--accent);border-color:var(--accent)}
.viewtabs .hint{margin:0 0 0 auto;font-size:.72rem}
.htmlview{width:100%;min-height:340px;border:1px solid var(--line);border-radius:8px;
  margin-top:.9rem;background:#0e1216}

.authmark{flex:0 0 auto;font-size:.8rem;width:1em;text-align:center}
.authmark.pass,.authmark.internal{color:var(--ok)}
.authmark.fail{color:var(--warn)}
.authmark.unknown{color:var(--dim)}

/* ---------- composer ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;margin:.2rem 0 .5rem;
  padding:.35rem;border:1px solid var(--line);border-radius:8px;background:#0b0f13}
.toolbar button{background:none;border:1px solid transparent;color:var(--dim);border-radius:6px;
  padding:.25rem .5rem;font-size:.85rem;min-width:2rem}
.toolbar button:hover{border-color:var(--line);color:var(--fg)}
.toolbar button.on{color:var(--accent);border-color:var(--accent)}
.toolbar .sep{width:1px;height:1.2rem;background:var(--line);margin:0 .3rem}
.editor{min-height:200px;max-height:45vh;overflow-y:auto;background:#0b0f13;color:var(--fg);
  border:1px solid var(--line);border-radius:8px;padding:.7rem;font:14px/1.6 system-ui,sans-serif}
.editor:focus{outline:2px solid var(--accent);outline-offset:1px}
.editor img{max-width:100%;border-radius:4px}
.editor.drop{border-color:var(--accent);background:#1c1a0d}
.atts{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.atts li{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:999px;
  padding:.2rem .6rem;font-size:.78rem;color:var(--dim)}
.atts li button{background:none;border:0;color:var(--dim);font-size:.9rem;padding:0 .1rem}
.atts li button:hover{color:var(--warn)}
.attlist{list-style:none;margin:.8rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--line)}
.attlist li{margin:.3rem 0;font-size:.85rem}
.attlist a{color:var(--accent)}

.source{background:#0b0f13;border:1px solid var(--line);border-radius:8px;padding:.7rem;
  margin-top:.9rem;max-height:50vh;overflow:auto;white-space:pre-wrap;word-break:break-all;
  font:11.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--dim)}

/* ---------- back out of a message on a small screen ---------- */
/* Sticky, so it is always reachable — which means the message scrolls beneath
   it. It therefore has to be a full-bleed opaque bar: at width:100% inside a
   padded pane the text slides through the gaps either side of it, which is
   what "Back is over the text" looks like. The negative side margins take it
   out to the pane's edges and the border makes the boundary visible. */
.backbtn{display:none;position:sticky;top:0;z-index:3;background:var(--bg);border:0;
  border-bottom:1px solid var(--line);color:var(--accent);font-size:.95rem;
  padding:.7rem 1.2rem;margin:-.8rem -1.2rem .9rem;width:calc(100% + 2.4rem);
  text-align:left}
@media(max-width:900px){
  .reader.open .backbtn{display:block}
  .reader.open{padding-top:.8rem}
}

.buildline{margin:0;padding:.15rem .9rem;font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--dim);border-bottom:1px solid var(--line);background:var(--panel2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mono{font:11px ui-monospace,SFMono-Regular,Menlo,monospace}

/* A drawer you cannot dismiss by tapping away from it is a trap. The backdrop
   both dims the page and gives that tap somewhere to land. */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:14;display:none}
body.nav-open .scrim{display:block}
@media(min-width:901px){ .scrim{display:none !important} }

.ghost.danger{color:var(--danger);border-color:var(--line)}
.ghost.danger:hover{border-color:var(--danger)}
.listhead .ghost.small{margin-left:auto;width:auto}

/* ---------- swipe a row to delete ----------
   The row content slides to reveal an action behind it. Deleting is a folder
   change, so it works whether or not the message can be decrypted.

   The padding lives on the sliding layer, not the row: on the row it stopped
   the layer short of the right edge and left the action permanently visible. */
.row{position:relative;overflow:hidden;touch-action:pan-y;padding:0}
.rowinner{background:var(--bg);transition:transform .18s ease;position:relative;z-index:1;
  padding:.6rem .8rem}
.row:hover .rowinner,.row:focus-visible .rowinner{background:#1a2129}
.row.swiping .rowinner{transition:none}
.rowaction{position:absolute;top:0;right:0;bottom:0;width:96px;display:flex;align-items:center;
  justify-content:center;background:var(--danger);color:#fff;font-weight:650;font-size:.85rem;
  border:0;z-index:0}
.row.open .rowinner{transform:translateX(-96px)}


.primary.big{width:100%;padding:.9rem;font-size:1rem;margin-bottom:.6rem}
#kPassWrap{border:1px solid var(--line);border-radius:8px;padding:.6rem .8rem;margin:.8rem 0 0}
#kPassWrap summary{color:var(--dim);font-size:.85rem}
#kPassWrap[open]{padding-bottom:.9rem}

/* Address suggestions, hung off the To field. The list is built from what this
   device has decrypted, so it exists only here. */
.achost{position:relative}
.ac{position:absolute;left:0;right:0;top:100%;z-index:5;margin:.15rem 0 0;padding:.25rem;
  list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);max-height:14rem;overflow-y:auto}
.ac li{padding:.45rem .55rem;border-radius:6px;font-size:.85rem;color:var(--fg);
  text-transform:none;letter-spacing:normal;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ac li:hover,.ac li.on{background:var(--panel2);color:var(--accent)}

/* Folded message headers: the subject is the message's title, the rest is
   provenance you go looking for. */
details.hdr{margin:0 0 .3rem}
details.hdr summary{cursor:pointer;color:var(--dim);font-size:.75rem;text-transform:uppercase;
  letter-spacing:.08em;padding:.25rem 0}
details.hdr[open] summary{margin-bottom:.5rem}

/* Offered, never forced: a reload mid-message loses the message. */
.updatebar{background:var(--accent);color:#1a1400;border:0;border-radius:999px;
  padding:.3rem .7rem;font:600 11px/1 ui-sans-serif,system-ui;cursor:pointer;
  letter-spacing:.02em;white-space:nowrap}