/* 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; }
.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; }
.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); }
/* 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 > 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; }

@media (max-width: 720px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .caday { min-height: 4rem; }
  /* one column: the list; tapping a row navigates to the full-page reader */
  .mailwrap { grid-template-columns: 1fr; }
  .splitter, .readerpane { display: none; }
}

/* ---------- 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; }
.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); }