/* Mailer webmail — base stylesheet: layout, structure, components. Skin-neutral:
   every colour/font/geometry value is a `var(--token)` defined by the active
   skin (skin-<name>.css). This file is identical across templates; only the skin
   changes per domain. See Main/docs/webmail-branding-plan.md. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---------- auth / login ---------- */
body.auth {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1rem;
  background: var(--sidebar);
}
.card {
  width: 100%;
  max-width: 22rem;
  padding: 2rem 2rem 2.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}
.card .brand { margin: 0 0 0.25rem; font-size: 1.4rem; font-weight: 650; }
.card .sub { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.95rem; }
.loginform { display: grid; gap: 0.85rem; }
.loginform label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
input {
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--fg);
}
input:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--primary);
  color: var(--primary-fg);
}
button:hover { filter: brightness(1.05); }
.loginform button { margin-top: 0.35rem; }
.loginform textarea {
  font: inherit; padding: 0.6rem 0.7rem; border: 1px solid var(--border);
  border-radius: 0.5rem; background: var(--bg); color: var(--fg); resize: vertical;
}
.loginform textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
/* password peek toggle inside the field */
.pwfield { position: relative; display: flex; align-items: center; }
.pwfield input { flex: 1 1 auto; min-width: 0; padding-right: 2.4rem; }
.pwpeek {
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 0.3rem; margin: 0; cursor: pointer;
  color: var(--muted); display: inline-flex; border-radius: 0.4rem;
}
.pwpeek:hover { color: var(--fg); background: none; filter: none; }
.pwpeek[aria-pressed="true"] { color: var(--primary); }
.pwpeek .ic { width: 1.15rem; height: 1.15rem; }
.lostpw {
  margin-top: 0.2rem; font-size: 0.8rem; color: var(--primary);
  text-decoration: none; justify-self: start;
}
.lostpw:hover { text-decoration: underline; }
.err {
  margin: 0 0 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

/* ---------- app shell ---------- */
body.app { display: flex; flex-direction: column; height: 100dvh; }
.topbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--topbar-h);
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  flex: 0 0 auto;
}
.topbar .brand { font-weight: 650; font-size: 1.05rem; color: inherit; text-decoration: none; cursor: pointer; }
.navmain { display: flex; gap: 0.25rem; }
.navitem {
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  color: var(--muted);
  font-weight: 550;
}
.navitem:hover { background: var(--sidebar); color: var(--fg); }
.navitem.active { background: var(--accent); color: var(--fg); }
/* topbar search: a centred pill that grows to fill the middle of the bar */
.search { flex: 1 1 auto; display: flex; justify-content: center; margin: 0; min-width: 0; }
.searchbox {
  display: flex; align-items: center; gap: 0.5rem;
  width: min(30rem, 100%); padding: 0.4rem 0.85rem;
  border-radius: 999px; background: var(--sidebar);
  border: 1px solid transparent; color: var(--muted);
}
.searchbox:focus-within { background: var(--bg); border-color: var(--rule-strong); }
.searchbox .ic { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }
.search input {
  flex: 1 1 auto; min-width: 0;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--fg); font-size: 0.9rem;
}
.search input:focus { outline: none; background: transparent; }
.spacer { flex: 1 1 auto; }
.who { color: var(--muted); font-size: 0.85rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout button { background: transparent; color: var(--muted); padding: 0.35rem 0.6rem; }
.logout button:hover { color: var(--fg); background: var(--sidebar); filter: none; }

.layout { flex: 1 1 auto; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 0; }
.sidebar { border-right: 1px solid var(--border); background: var(--sidebar); overflow: auto; padding: 0.75rem; }
.content { overflow: auto; min-width: 0; }
.empty { display: grid; place-items: center; height: 100%; color: var(--muted); font-size: 0.95rem; }

/* 3-pane mail body: folder rail (shell sidebar) | message list | reading pane */
.content:has(.mailwrap) { overflow: hidden; }
.mailwrap { display: grid; grid-template-columns: var(--listw, 21rem) 6px 1fr; height: 100%; min-height: 0; }
.listpane { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--card); }
.splitter { background: var(--border); cursor: col-resize; transition: background 0.12s; }
.splitter:hover, .splitter.dragging { background: var(--primary); }
.listhead { flex: 0 0 auto; }
.listbody { flex: 1 1 auto; overflow: auto; min-height: 0; }
/* search lives at the top of the list pane (Bulwark-style), pinned above the rows */
/* list toolbar: select-all (LEFT) | search | density */
.listtoolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); background: var(--card); }
/* the ONE checkbox: a master select-all, not a per-row control */
.listtoolbar .selall { display: flex; align-items: center; flex: 0 0 auto; margin: 0 0.1rem; cursor: pointer; }
.listtoolbar .selall input { cursor: pointer; accent-color: var(--primary); }
/* "Enable Select" — a mobile-only touch affordance for bulk selection (desktop
   uses cmd/shift-click). Hidden on desktop; shown by the mobile @media block. */
.seltoggle { display: none; flex: 0 0 auto; font: inherit; font-size: 0.82rem; cursor: pointer; padding: 0.25rem 0.55rem; border: 1px solid var(--border); border-radius: 0.5rem; background: transparent; color: var(--muted); }
.seltoggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
/* per-row checkbox shown only in mobile select-mode (rows are checkbox-free otherwise) */
.rowcheck { display: none; flex: 0 0 auto; align-self: center; place-items: center; width: 1.2rem; height: 1.2rem; margin: 0 0 0 0.7rem; border: 2px solid var(--muted); border-radius: 0.3rem; }
.mailrow.sel .rowcheck { background: var(--primary); border-color: var(--primary); }
.mailrow.sel .rowcheck::after { content: "✓"; color: #fff; font-size: 0.82rem; font-weight: 700; line-height: 1; }
/* the open mailbox's name + unread count (the search box moved to the topbar) */
.listtitle { min-width: 0; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listcount { flex: 0 0 auto; color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.iconbtn { flex: 0 0 auto; font: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card); color: var(--muted); }
.iconbtn:hover { background: var(--sidebar); color: var(--fg); }
.readerpane { overflow: auto; min-width: 0; background: var(--card); }
.reader-empty { height: 100%; }
/* In the 3-pane view the list is right there, so the reader's Back link is noise. */
body[data-view="mail"] #readerpane .rtop .back,
body[data-view="mail"] #readerpane .lactions .back { display: none; }

/* sidebar folders */
.folderlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.folder { display: flex; align-items: center; gap: 0.25rem; border-radius: 0.45rem; color: var(--fg); }
.folder.active { background: var(--accent); }
.folder.active .fname { font-weight: 600; }
.flink { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.2rem 0.4rem 0.6rem; color: var(--fg); }
.fic { flex: 0 0 auto; display: inline-grid; place-items: center; }
.fic .ic { width: 1.1rem; height: 1.1rem; vertical-align: 0; }
.fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* divider + caption between the system mailboxes and the user's own folders */
.railsep { height: 1px; margin: 0.45rem 0.5rem; background: var(--border); }
.railhead { padding: 0.1rem 0.6rem 0.25rem; font-size: 0.7rem; color: var(--muted); }
.fcounts { display: flex; align-items: center; gap: 0.3rem; padding-right: 0.5rem; flex: 0 0 auto; }
.badge { min-width: 1.1rem; text-align: center; padding: 0 0.4rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--primary); color: var(--primary-fg); }
.ftotal { color: var(--muted); font-size: 0.72rem; }
.factions { display: none; align-items: center; gap: 0.05rem; padding-right: 0.3rem; flex: 0 0 auto; }
.folder:hover .factions { display: flex; }
.folder:hover .fcounts { display: none; }
.fact { display: inline-grid; place-items: center; cursor: pointer; padding: 0.25rem; border: 0; border-radius: 0.4rem; background: transparent; color: var(--muted); }
.fact:hover { background: var(--bg); color: var(--fg); }
.fact.danger:hover { color: var(--danger); }
.newfolder { display: flex; gap: 0.3rem; padding: 0.5rem 0.4rem 0.2rem; }
.newfolder input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.35rem 0.55rem; border: 1px solid var(--border); border-radius: 0.45rem; background: var(--bg); color: var(--fg); }

/* bulk selection toolbar (sticky atop the list) */
.bulkbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border); background: var(--accent); }
.bulkcount { font-size: 0.82rem; font-weight: 600; color: var(--fg); white-space: nowrap; }
.bulkactions { display: flex; gap: 0.3rem; flex-wrap: wrap; flex: 1 1 auto; }
.mbtn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.mbtn.ghost:hover { background: var(--bg); color: var(--fg); }
/* the selection toolbar only appears for a real multi-selection (2+). A single
   pick acts via the reader's own action bar, so it needs no bulk toolbar. */
.bulkbar[data-n="0"], .bulkbar[data-n="1"] { display: none; }

/* message list — compact vertical row (sender + time / subject / preview) */
/* no text-selection: shift-click is the multi-select gesture, not text-highlight */
.maillist { list-style: none; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; }
.mailrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.mailrow:hover { background: var(--sidebar); }
/* the left bar marks the OPEN/active row; unread is marked by the .wax bead */
.mailrow.active { background: var(--accent); box-shadow: inset 3px 0 0 var(--primary); }
/* selected rows: an oxblood wash + the same left bar as the open row (so every
   selected message carries the vertical bar). Declared after .active so an open
   row that's also selected keeps its bar over the wash. */
.mailrow.sel { background: color-mix(in srgb, var(--primary) 15%, var(--bg)); box-shadow: inset 3px 0 0 var(--primary); }
/* unread bead: a small leading wax dot; transparent when read so the avatar
   column stays aligned. The skin paints it on .mailrow.unread. */
.wax { flex: 0 0 auto; align-self: center; width: 0.5rem; height: 0.5rem; margin: 0 0 0 0.7rem; border-radius: 50%; background: transparent; }
/* avatar geometry only; per-index hues (.c0–.c7) live in the skin */
.avatar { flex: 0 0 auto; align-self: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: var(--avatar-fg, #fff); margin: 0 0.1rem 0 0.5rem; }
.rowlink { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; padding: 0.5rem 0.85rem 0.55rem 0.55rem; cursor: pointer; color: var(--fg); }
.rowlink .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.mailrow .from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmeta { flex: 0 0 auto; display: flex; align-items: center; gap: 0.3rem; }
.ind { display: inline-flex; align-items: center; font-size: 0.82rem; color: var(--muted); line-height: 1; }
.ind .ic { width: 0.95em; height: 0.95em; vertical-align: 0; }
.ind.star { color: var(--star); }
.mailrow .when { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.mailrow .r2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.mailrow .preview { color: var(--muted); font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailrow.unread .wax { background: var(--primary); }
.mailrow.unread .from, .mailrow.unread .r2 { font-weight: 700; }
/* density (regular = default) */
html[data-density="compact"] .rowlink { padding-top: 0.3rem; padding-bottom: 0.35rem; gap: 0.03rem; }
html[data-density="compact"] .rowlink .preview { display: none; }
html[data-density="compact"] .avatar { width: 1.7rem; height: 1.7rem; font-size: 0.68rem; }
html[data-density="comfortable"] .rowlink { padding-top: 0.72rem; padding-bottom: 0.8rem; gap: 0.2rem; }
html[data-density="comfortable"] .avatar { width: 2.45rem; height: 2.45rem; }

/* reader */
.reader { padding: 1.25rem 1.5rem; max-width: 62rem; }
.back { display: inline-block; margin-bottom: 1rem; color: var(--primary); font-size: 0.9rem; }
.msubject { margin: 0 0 0.85rem; font-size: 1.3rem; }
.mmeta { display: grid; gap: 0.15rem; padding-bottom: 0.85rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.mmeta .ml { display: inline-block; min-width: 3.5rem; color: var(--muted); }
.mmeta .mdate { color: var(--muted); font-size: 0.82rem; }
.mbody { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font); font-size: 0.95rem; line-height: 1.55; margin: 0; }
.mbody-frame { width: 100%; min-height: 1.25rem; border: 0; background: var(--card); border-radius: 0.5rem; }
/* letter body wrapper: a vertical rule that hugs the content height (no dead space before attachments) */
.lbody { position: relative; padding-left: 1.3rem; }
.lbody::before { content: ""; position: absolute; left: 0; top: 0.2rem; bottom: 0.2rem; width: 1px; background: var(--rule-strong); }
/* remote-content blocked banner (privacy: no auto image/pixel/tracker loads) */
.imgbanner { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.7rem; margin-bottom: 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--sidebar); font-size: 0.85rem; color: var(--muted); }
.imgbanner .ic { width: 1rem; height: 1rem; flex: 0 0 auto; }
.imgbanner span { flex: 1 1 auto; }
.imgload { flex: 0 0 auto; font-weight: 600; color: var(--primary); cursor: pointer; padding: 0.25rem 0.6rem; border: 1px solid var(--border); border-radius: 0.4rem; background: var(--card); }
.imgload:hover { background: var(--bg); }
.muted { color: var(--muted); }

/* reader action bar */
.rtop { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.rtop .back { margin: 0; }
.mactions { display: flex; align-items: center; gap: 0.4rem; }
.mactions form { margin: 0; }
.mbtn {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--card);
  color: var(--fg);
}
.mbtn:hover { background: var(--sidebar); }
.mbtn.star.on { border-color: var(--primary); color: var(--primary); }
.mbtn.danger:hover { border-color: var(--danger); color: var(--danger); }
.rstar { color: var(--primary); }
.caimport { display: inline; margin: 0; }
.caimport label { display: inline-block; }
.flash { padding: 0.5rem 0.85rem; border-radius: 0.5rem; font-size: 0.85rem; margin: 0 0 0.6rem; }
.flash.ok { background: color-mix(in srgb, var(--primary) 14%, var(--card)); border: 1px solid var(--primary); color: var(--fg); }

/* conversation strip */
.conv { margin-bottom: 1.1rem; border: 1px solid var(--border); border-radius: 0.6rem; overflow: hidden; }
.conv-h { padding: 0.45rem 0.75rem; background: var(--sidebar); font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.convrow { display: grid; grid-template-columns: 11rem 1fr auto; gap: 0.75rem; align-items: baseline; padding: 0.45rem 0.75rem; border-top: 1px solid var(--border); font-size: 0.85rem; }
.convrow:hover { background: var(--sidebar); }
.convrow.current { background: var(--accent); }
.convfrom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.convwhen { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }

/* conversation thread — a stack of letters separated by hairlines, not boxes:
   no per-card border/fill/expanded-fill, so the thread reads as one column. */
.thread .tcount { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.tcards { display: flex; flex-direction: column; }
.tcard { border: 0; border-radius: 0; background: transparent; }
.tcard + .tcard { border-top: 1px solid var(--border); }
.tcard-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.25rem; cursor: pointer; border-radius: 0.5rem; }
.tcard-head:hover { background: var(--hover); }
.tcard-head .avatar { margin: 0; }
.tcard-hmain { flex: 1 1 auto; min-width: 0; }
.tcard-l1 { display: flex; align-items: baseline; gap: 0.5rem; }
.tfrom { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.tcard.unread .tfrom { font-weight: 700; }
.trmeta { flex: 0 0 auto; display: flex; align-items: center; gap: 0.35rem; }
.twhen { color: var(--muted); font-size: 0.76rem; white-space: nowrap; }
.tprev { color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* collapsed: show the one-line preview, hide the body; expanded: the reverse.
   the body is indented to sit under the sender's name, aligned past the avatar. */
.tcard-body { display: none; padding: 0.2rem 0.25rem 1rem 2.9rem; }
.tcard.expanded .tprev { display: none; }
.tcard.expanded .tcard-body { display: block; }
.tmeta { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.9rem; }
.tcard-actions { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }

/* the opened letter (single message): letterhead with avatar, name atop the
   address, a faint "to me" line, one pressed rule, then the letter body. */
.lactions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.lactions .back { margin: 0 auto 0 0; }
.lhead { display: flex; align-items: flex-start; gap: 0.85rem; padding-bottom: 1.1rem; }
.lhead .avatar { flex: 0 0 auto; margin: 0; align-self: center; }
.lwho { flex: 1 1 auto; min-width: 0; }
.lwho .nm { font-weight: 600; line-height: 1.2; }
.lwho .ad { font-size: 0.85rem; color: var(--muted); }
.lwho .to { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.ldate { flex: 0 0 auto; text-align: right; font-size: 0.82rem; color: var(--muted); white-space: nowrap; padding-top: 0.15rem; }
.lrule { border: 0; height: 0; border-top: 1px solid var(--border); margin: 0 0 1.6rem; }
.replybar { display: block; margin-top: 1.8rem; padding: 0.8rem 1rem; border: 1px dashed var(--rule-strong); border-radius: 0.6rem; color: var(--muted); cursor: text; }

/* attachments */
.attachments { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.atts-h { width: 100%; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 0.2rem; }
.att { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card); font-size: 0.85rem; }
.att:hover { background: var(--sidebar); border-color: var(--primary); }
.att-sz { color: var(--muted); font-size: 0.75rem; }

/* pager */
.pager { display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; }
.pg { font-size: 0.88rem; font-weight: 600; padding: 0.4rem 0.8rem; border: 1px solid var(--border); border-radius: 0.5rem; color: var(--primary); }
.pg:hover { background: var(--sidebar); }
.pg.disabled { color: var(--muted); opacity: 0.5; pointer-events: none; }

/* search results */
.searchhead { padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }

/* advanced search form (top of the list pane) */
.advsearch { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); background: var(--sidebar); }
.advsearch .as-q { font: inherit; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg); color: var(--fg); }
.advsearch .as-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.advsearch .as-row label { flex: 1 1 8rem; display: grid; gap: 0.2rem; font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.advsearch input, .advsearch select { font: inherit; padding: 0.4rem 0.55rem; border: 1px solid var(--border); border-radius: 0.45rem; background: var(--bg); color: var(--fg); }
.advsearch .as-checks { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.advsearch .as-checks label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--fg); }
.advsearch .as-bar { display: flex; align-items: center; gap: 0.9rem; margin-top: 0.15rem; }
.advsearch .as-bar button { padding: 0.45rem 1rem; }

/* compose */
.compose-btn { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0 0 0.8rem; padding: 0.55rem; border-radius: 0.5rem; background: var(--primary); color: var(--primary-fg); font-weight: 650; }
.compose-btn .ic { width: 1.05rem; height: 1.05rem; }
.compose-btn:hover { filter: brightness(1.05); }
/* compose = a single sheet centred on the desk (the "new letter") */
.compose { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.8rem 2.4rem 2.2rem; height: 100%; max-width: 46rem; margin: 0 auto; overflow: auto; }
.composehead { margin: 0 0 0.7rem; font-size: 1.5rem; font-weight: 600; }
/* inline field: fixed-width label + underline-only input (the letter's header) */
.field { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
/* `.field{display:flex}` defeats the UA `[hidden]{display:none}`, so the
   default-hidden Cc/Bcc rows stayed visible — restore hiding explicitly. */
.field[hidden] { display: none; }
.field > label { flex: 0 0 4.5rem; font-size: 0.82rem; color: var(--muted); }
.field input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--fg); font-size: 1rem; padding: 0; }
.field input:focus { outline: none; }
.field.subj input { font-size: 1.15rem; }
.ccbcc { flex: 0 0 auto; display: flex; gap: 0.6rem; }
.linkbtn { background: none; border: 0; color: var(--primary); cursor: pointer; font: inherit; font-size: 0.78rem; padding: 0; }
.linkbtn:hover { text-decoration: underline; }
.composebar { display: flex; align-items: center; gap: 0.6rem; padding-top: 1rem; margin-top: 0.4rem; border-top: 1px solid var(--border); }
.cspace { flex: 1 1 auto; }
.btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-weight: 600; cursor: pointer; padding: 0.55rem 1.25rem; border: 0; border-radius: 0.5rem; background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary .ic { width: 1.05rem; height: 1.05rem; }
.btn-ghost { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; cursor: pointer; padding: 0.55rem 0.9rem; border: 1px solid var(--border); border-radius: 0.5rem; background: transparent; color: var(--muted); text-decoration: none; }
.btn-ghost:hover { color: var(--fg); background: var(--sidebar); }
.btn-ghost .ic { width: 1.1rem; height: 1.1rem; }
.cancel { color: var(--muted); padding: 0.35rem 0.55rem; }

/* contacts + calendar + settings use the full width (no folder sidebar) */
body[data-view="contacts"] .sidebar, body[data-view="calendar"] .sidebar, body[data-view="settings"] .sidebar { display: none; }
body[data-view="contacts"] .layout, body[data-view="calendar"] .layout, body[data-view="settings"] .layout { grid-template-columns: 1fr; }

/* settings */
.settings { max-width: 40rem; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.sgroup { display: flex; flex-direction: column; gap: 0.7rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.stitle { margin: 0; font-size: 1.05rem; }
.settings label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.settings label.scheck { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; color: var(--fg); }
.settings input[type="text"], .settings input:not([type]), .settings textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg); color: var(--fg); }
.settings textarea { resize: vertical; }
.saved { margin: 0; padding: 0.6rem 0.85rem; border-radius: 0.5rem; font-size: 0.9rem; color: var(--ok); background: var(--ok-wash); }

/* contacts */
.contactlist { max-width: 48rem; }
.crow { display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
.crow:hover { background: var(--sidebar); }
.cavatar { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--fg); font-weight: 700; }
.cavatar.big { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; }
.cmeta { display: flex; flex-direction: column; min-width: 0; }
.cname { font-weight: 600; }
.csub { color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.ctitle { margin: 0; font-size: 1.4rem; }
.cdetail { display: grid; gap: 0; max-width: 40rem; }
.crow2 { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.crow2 .cl { display: inline-block; min-width: 7rem; color: var(--muted); font-size: 0.85rem; }

/* calendar */
.calendar { padding: 1rem 1.25rem; }
.cahead { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.catitle { margin: 0 0.5rem; font-size: 1.2rem; }
.cagrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.cawd { background: var(--sidebar); padding: 0.4rem; text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.caday { background: var(--bg); min-height: 6.5rem; padding: 0.3rem; display: flex; flex-direction: column; gap: 0.2rem; overflow: hidden; }
.caday.blank { background: var(--sidebar); }
.cadnum { font-size: 0.8rem; color: var(--muted); }
.caday.today .cadnum { background: var(--primary); color: var(--primary-fg); border-radius: 50%; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-weight: 700; }
.cachip { font-size: 0.72rem; background: var(--accent); color: var(--fg); border-radius: 0.3rem; padding: 0.1rem 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.caempty { padding: 0.85rem 0.2rem; color: var(--muted); font-size: 0.9rem; }
a.cachip { text-decoration: none; }
a.cadnum { text-decoration: none; }
a.cadnum:hover { color: var(--primary); }

/* calendar: view switcher */
.catabs { display: inline-flex; gap: 2px; background: var(--sidebar); border-radius: .5rem; padding: 2px; }
.catab { font-size: .82rem; padding: .3rem .7rem; border-radius: .4rem; color: var(--muted); text-decoration: none; }
.catab:hover { color: var(--fg); }
.catab.on { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* calendar: rail + body */
.cawrap { display: flex; gap: 1rem; align-items: flex-start; }
.caside { flex: 0 0 14rem; }
.cabody { flex: 1 1 auto; min-width: 0; }

/* mini calendar */
.minical { border: 1px solid var(--border); border-radius: .6rem; padding: .5rem .6rem; }
.mchead { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .4rem; }
.mchead a { color: var(--muted); text-decoration: none; padding: 0 .35rem; font-size: 1.1rem; }
.mchead a:hover { color: var(--fg); }
.mcgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; text-align: center; }
.mcwd { font-size: .62rem; color: var(--muted); padding: .15rem 0; }
.mcd { font-size: .72rem; padding: .2rem 0; border-radius: .3rem; color: var(--fg); text-decoration: none; }
.mcd:hover { background: var(--hover); }
.mcd.blank { visibility: hidden; }
.mcd.today { color: var(--primary); font-weight: 700; }
.mcd.sel { background: var(--accent); font-weight: 600; }

/* week/day time grid (44px per hour — must match render::time_grid math) */
.cagcols, .caallday, .cagrid2 { display: grid; grid-template-columns: 56px repeat(var(--n), 1fr); }
.cagcols { border: 1px solid var(--border); border-bottom: 0; }
.cagcol { text-align: center; padding: .4rem 0; font-size: .72rem; color: var(--muted); text-decoration: none; border-left: 1px solid var(--border); }
.cagcol b { display: block; font-size: 1.05rem; color: var(--fg); }
.cagcol.today b { color: var(--primary); }
.cagcol:hover { background: var(--hover); }
.caallday { border: 1px solid var(--border); border-bottom: 0; min-height: 1.8rem; }
.caadlabel { font-size: .62rem; color: var(--muted); padding: .3rem; text-align: right; }
.caadcell { border-left: 1px solid var(--border); padding: .2rem; display: flex; flex-direction: column; gap: 2px; }
.caadchip { font-size: .7rem; background: var(--accent); border-radius: .3rem; padding: .05rem .3rem; text-decoration: none; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cascroll { max-height: 62vh; overflow-y: auto; border: 1px solid var(--border); }
.cagrid2 { position: relative; }
.cahours { display: flex; flex-direction: column; }
.cahour { height: 44px; position: relative; }
.cahour span { position: absolute; top: -.5em; right: .3rem; font-size: .62rem; color: var(--muted); }
.cacol { position: relative; height: calc(44px * 24); border-left: 1px solid var(--border); background: repeating-linear-gradient(var(--bg), var(--bg) 43px, var(--border) 43px, var(--border) 44px); }
.cacol.today { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.caev { position: absolute; left: 2px; right: 2px; min-height: 14px; background: var(--primary); color: var(--primary-fg); border-radius: .3rem; padding: .05rem .3rem; font-size: .7rem; line-height: 1.2; overflow: hidden; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.caev:hover { filter: brightness(1.06); }
.caevt { font-size: .62rem; opacity: .85; }
.caevn { font-weight: 600; }

/* agenda */
.agenda { border: 1px solid var(--border); border-radius: .6rem; overflow: hidden; }
.agday { background: var(--sidebar); padding: .4rem .8rem; font-size: .8rem; font-weight: 700; color: var(--muted); border-top: 1px solid var(--border); }
.agday:first-child { border-top: 0; }
.agday.today { color: var(--primary); }
.agrow { display: flex; align-items: baseline; gap: .8rem; padding: .5rem .8rem; border-top: 1px solid var(--border); text-decoration: none; color: var(--fg); }
.agrow:hover { background: var(--hover); }
.agwhen { flex: 0 0 8rem; font-size: .8rem; color: var(--muted); }
.agtitle { font-weight: 600; }
.agloc { color: var(--muted); font-size: .85rem; }

@media (max-width: 720px) { .caside { display: none; } .catab { padding: .3rem .5rem; } }

/* CRUD: list toolbar, forms, primary action button */
.listtools { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--border); display: flex; gap: 0.5rem; }
.mbtn.primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }
.mbtn.primary:hover { filter: brightness(1.05); background: var(--primary); }
.cform { max-width: 40rem; padding: 1.1rem 1.4rem 0.4rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cform .stitle { margin: 0; font-size: 1.15rem; }
.cform label { display: grid; gap: 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.cform input, .cform textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--bg); color: var(--fg); }
.cform input:focus, .cform textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.cform textarea { resize: vertical; }
.cform .as-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.cform .as-row label { flex: 1 1 8rem; }
.delform { padding: 0.2rem 1.4rem 1.2rem; }

/* ---------- icons + interactive affordances ---------- */
.ic { width: 1.05em; height: 1.05em; flex: 0 0 auto; display: inline-block; vertical-align: -0.18em; }

/* icon buttons: borderless with a clear hover background (toolbar, bulk bar, reader) */
.iconbtn { display: inline-grid; place-items: center; flex: 0 0 auto; font: inherit; line-height: 1; cursor: pointer; padding: 0.4rem; border: 1px solid transparent; border-radius: 0.5rem; background: transparent; color: var(--muted); }
.iconbtn:hover { background: var(--hover); color: var(--fg); }
.iconbtn.danger:hover { color: var(--danger); }
.iconbtn.star.on { color: var(--star); }
.iconbtn:disabled { opacity: 0.5; cursor: default; }

/* consistent, visible hover feedback across clickable elements */
.mbtn:hover, .navitem:hover, .folder:hover, .crow:hover, .pg:hover, .att:hover,
.convrow:hover, .menupop button:hover, a.cachip:hover { background: var(--hover); }

/* bulk bar: icon group + separator before clear */
.bulkactions { gap: 0.1rem; }
.bsep { width: 1px; align-self: stretch; margin: 0.25rem 0.35rem; background: var(--border); }

/* advanced-search panel (toggled by the funnel) */
.advpanel { border-bottom: 1px solid var(--border); background: var(--sidebar); }
.advpanel[hidden] { display: none; }

/* reader action bar = icon buttons */
.mactions { display: flex; align-items: center; gap: 0.1rem; flex-wrap: wrap; }
.mactions form { margin: 0; display: inline-flex; }

/* move-to dropdown (<details>) */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menupop { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 12rem; max-height: 16rem; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 0.6rem; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14); padding: 0.25rem; }
.menupop form { margin: 0; }
.menupop button { display: block; width: 100%; text-align: left; font: inherit; padding: 0.45rem 0.6rem; border: 0; border-radius: 0.4rem; background: transparent; color: var(--fg); cursor: pointer; }

/* row hover quick-actions */
.mailrow { position: relative; }
.rowactions { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: none; align-items: center; gap: 0.1rem; padding: 0.1rem 0.2rem; border-radius: 0.5rem; background: var(--card); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14); }
.mailrow:hover .rowactions { display: flex; }
.rowact { display: inline-grid; place-items: center; cursor: pointer; padding: 0.3rem; border: 0; border-radius: 0.4rem; background: transparent; color: var(--muted); }
.rowact:hover { background: var(--hover); color: var(--fg); }
.rowact.danger:hover { color: var(--danger); }

/* ---------- rich-text composer: letterpress writing tools ---------- */
.rtetoolbar { display: flex; align-items: center; gap: 0.1rem; margin-top: 0.5rem; padding: 0.25rem 0.1rem; border-bottom: 1px solid var(--border); }
.fmtbtn { display: inline-flex; align-items: center; justify-content: center; width: 2.05rem; height: 2.05rem; border: 0; border-radius: 0.45rem; background: transparent; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.fmtbtn:hover { color: var(--fg); background: var(--sidebar); }
.fmtbtn.on { color: var(--primary); }
.fmtbtn .ic { width: 1.05rem; height: 1.05rem; }
.fmtbtn.glyph-b { font-weight: 800; }
.fmtbtn.glyph-i { font-style: italic; }
.fmtbtn.glyph-u { text-decoration: underline; text-underline-offset: 3px; }
.tsep { flex: 0 0 auto; width: 1px; height: 1.25rem; margin: 0 0.4rem; background: var(--border); }
.rte { flex: 1 1 auto; min-height: 12rem; overflow: auto; margin-top: 1rem; padding: 0 0.1rem; border: 0; background: transparent; color: var(--fg); font-size: 1.05rem; line-height: 1.7; outline: none; }
.rte:focus { outline: none; }
.rte[data-placeholder]:empty::before { content: attr(data-placeholder); color: var(--muted); font-style: italic; }
.rte blockquote { margin: 0.4rem 0; padding-left: 0.8rem; border-left: 3px solid var(--border); color: var(--muted); }
.attchips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.attchip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--sidebar); font-size: 0.82rem; }
.attx { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.attx:hover { color: var(--danger); }

/* keyboard shortcuts: topbar button + help overlay */
.kbhelp { display: inline-grid; place-items: center; padding: 0.35rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--muted); cursor: pointer; }
.kbhelp:hover { background: var(--sidebar); color: var(--fg); filter: none; }
.kbhelp .ic { width: 1.15rem; height: 1.15rem; }
/* mobile folder-drawer toggle (☰) + backdrop — hidden on desktop, shown at ≤720px */
.navtoggle { display: none; place-items: center; padding: 0.35rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--muted); cursor: pointer; }
.navtoggle:hover { background: var(--sidebar); color: var(--fg); }
.navtoggle .ic { width: 1.3rem; height: 1.3rem; }
/* mobile back-to-inbox arrow for non-mail views — hidden on desktop */
.navback { display: none; place-items: center; padding: 0.35rem; border-radius: 0.5rem; color: var(--muted); }
.navback:hover { background: var(--sidebar); color: var(--fg); }
.navback .ic { width: 1.3rem; height: 1.3rem; }
.navscrim { display: none; }
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.modal-card { position: relative; width: min(48rem, 100%); max-height: 85vh; overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 0.8rem; padding: 1.1rem 1.3rem 1.3rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.modal-head h2 { margin: 0; font-size: 1.1rem; }
.kbcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.4rem 1.6rem; }
.kbcols section { break-inside: avoid; }
.kbcols h3 { margin: 0.6rem 0 0.3rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.kbcols dl { margin: 0; }
.kbrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.22rem 0; }
.kbrow dt { flex: 0 0 auto; display: flex; align-items: center; gap: 0.2rem; }
.kbrow dd { margin: 0; color: var(--muted); font-size: 0.85rem; text-align: right; }
kbd { display: inline-block; min-width: 1.3rem; text-align: center; padding: 0.1rem 0.35rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 0.35rem; background: var(--bg); font: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1.4; color: var(--fg); }

/* mobile drawer footer (Settings + Sign out) — hidden on desktop, pinned to the
   bottom of the folder drawer at ≤720px */
.drawer-foot { display: none; }

/* ---------- mobile (≤720px) ----------
   Kept at the END so its single-class overrides (e.g. .kbhelp) win the cascade
   over the base rules above. */
@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .caday { min-height: 4rem; }
  .splitter { display: none; }
  /* de-cram the topbar: drop search, keyboard-help, and the address line */
  .search, .kbhelp, .who { display: none; }
  .topbar { gap: 0.5rem; padding: 0 0.7rem; }
  .navmain { gap: 0.05rem; }
  .navitem { padding: 0.35rem 0.45rem; }
  /* Settings + Sign out leave the topbar (mail view) for the drawer footer */
  body[data-view="mail"] .navmain a[href="/settings"],
  body[data-view="mail"] .logout { display: none; }

  /* Single column: show the message list OR the open reader/composer, never the
     dead 3-pane. The reader pane holds a placeholder on a list view (show the
     list) and a real .reader/.compose on a message/compose view (show that). */
  .mailwrap { display: block; }
  .listpane, .readerpane { width: 100%; height: 100%; }
  .readerpane { display: none; }
  .mailwrap:has(.readerpane .reader) .listpane,
  .mailwrap:has(.readerpane .compose) .listpane { display: none; }
  .mailwrap:has(.readerpane .reader) .readerpane,
  .mailwrap:has(.readerpane .compose) .readerpane { display: block; }
  /* per-row hover quick-actions are a desktop affordance; on touch they trigger
     the "first tap reveals hover, second tap opens" double-tap — drop them so a
     single tap opens the message */
  .rowactions, .mailrow:hover .rowactions { display: none; }

  /* folder rail → off-canvas drawer toggled by the topbar ☰ (mail LIST view) */
  body[data-view="mail"] .navtoggle { display: inline-grid; }
  /* reading/composing has no drawer to open — swap the ☰ for a back-to-list arrow
     (the in-content "← Back" stays hidden; this topbar arrow is the way out) */
  body[data-view="mail"]:has(.readerpane .reader) .navtoggle,
  body[data-view="mail"]:has(.readerpane .compose) .navtoggle { display: none; }
  body[data-view="mail"]:has(.readerpane .reader) .navback,
  body[data-view="mail"]:has(.readerpane .compose) .navback { display: inline-grid; }
  /* non-mail views have no drawer; give them a clear back-to-inbox arrow instead */
  body[data-view="settings"] .navback,
  body[data-view="calendar"] .navback,
  body[data-view="contacts"] .navback { display: inline-grid; }
  body[data-view="mail"] .sidebar {
    display: flex; flex-direction: column; position: fixed;
    top: var(--topbar-h); left: 0; bottom: 0;
    width: min(82vw, 20rem); z-index: 40; border-right: 1px solid var(--border);
    transform: translateX(-102%); transition: transform .18s ease;
  }
  body[data-view="mail"].nav-open .sidebar { transform: translateX(0); box-shadow: 0 10px 40px rgba(0,0,0,.3); }
  /* Settings (gear) and Sign out share one line, pushed to opposite edges */
  body[data-view="mail"] .drawer-foot {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--border);
  }
  body[data-view="mail"] .drawer-foot .footgear {
    display: inline-grid; place-items: center; padding: 0.4rem; border-radius: 0.5rem;
    color: var(--muted); cursor: pointer;
  }
  body[data-view="mail"] .drawer-foot .footgear:hover { background: var(--hover); color: var(--fg); }
  body[data-view="mail"] .drawer-foot .footgear.active { color: var(--primary); }
  body[data-view="mail"] .drawer-foot .footgear .ic { width: 1.3rem; height: 1.3rem; }
  body[data-view="mail"] .drawer-foot .logout { display: block; margin: 0; }
  body[data-view="mail"] .drawer-foot .logout button {
    font: inherit; cursor: pointer; padding: 0.35rem 0.55rem; border: 0;
    border-radius: 0.5rem; background: transparent; color: inherit;
  }
  body[data-view="mail"] .drawer-foot .logout button:hover { background: var(--hover); }
  .navscrim { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.35); }
  body.nav-open .navscrim { display: block; }

  /* ---- bulk select on touch: "Enable Select" shows a checkbox per row ---- */
  .seltoggle { display: inline-block; }
  /* in select-mode the checkbox takes the avatar's spot (avatar/wax hidden) and a
     row tap toggles selection instead of opening the message (handled in app.js) */
  body.select-mode .rowcheck { display: grid; }
  body.select-mode .mailrow .avatar,
  body.select-mode .mailrow .wax { display: none; }
  /* one selection is enough to act on touch (desktop needs 2 for cmd-click intent) */
  body.select-mode .bulkbar[data-n="1"] { display: flex; }
}