/* keymail channels screen — one column of mail, controls floating above it on glass. */

:root {
  color-scheme: light dark;
  --ground: light-dark(#f7f7f8, #0f0f11);
  --ink: light-dark(#1c1c1e, #f2f2f4);
  --ink-2: light-dark(#5b5b62, #a3a3ab);
  --ink-3: light-dark(#76767e, #8a8a92);
  --hair: light-dark(rgba(60, 60, 67, .14), rgba(235, 235, 245, .12));
  --row-hover: light-dark(rgba(0, 0, 0, .035), rgba(255, 255, 255, .05));
  --glass: light-dark(rgba(255, 255, 255, .76), rgba(44, 44, 50, .7));
  --glass-strong: light-dark(rgba(255, 255, 255, .97), rgba(34, 34, 40, .96));
  --glass-edge: light-dark(rgba(255, 255, 255, .95), rgba(255, 255, 255, .16));
  --glass-line: light-dark(rgba(0, 0, 0, .07), rgba(255, 255, 255, .08));
  --glass-shadow: 0 12px 32px -12px rgba(0, 0, 0, .28), 0 2px 6px -2px rgba(0, 0, 0, .1);
  --field: light-dark(#fff, #1c1c20);
  --column: light-dark(#fff, #16161a);
  --stack: light-dark(#ececef, #1b1b1f);
  --paper: light-dark(#fff, #26262b);
  --blue: light-dark(#0060df, #4ea1ff);
  --blue-soft: light-dark(rgba(0, 96, 223, .09), rgba(78, 161, 255, .16));
  --red: light-dark(#c4221a, #ff6961);
  --red-soft: light-dark(rgba(196, 34, 26, .09), rgba(255, 105, 97, .14));
  --green: light-dark(#1f7a3a, #4cd964);
  --green-soft: light-dark(rgba(31, 122, 58, .1), rgba(76, 217, 100, .14));
  --f-in: light-dark(#0060df, #4ea1ff);
  --f-newsletters: light-dark(#6d3fc0, #b48cff);
  --f-apps: light-dark(#a35200, #ffa94d);
  /* channels the owner adds take one of these, chosen by id */
  --f-c0: light-dark(#b0215f, #ff7aa8);
  --f-c1: light-dark(#0f766e, #4fd1c5);
  --f-c2: light-dark(#5b6b00, #c3d64a);
  --f-c3: light-dark(#8a3ab9, #d29bff);
  --f-c4: light-dark(#b42318, #ff8a7a);
  --f-c5: light-dark(#1d4ed8, #8fb4ff);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* HEY's measure: the column fills the window less a small margin, up to
     about 1080px, and the content inside grows a little on wide windows. */
  --col: 1080px;
  --z: 1;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* keymail names shared modules still read */
  --accent: var(--blue);
  --line: var(--hair);
  --muted: var(--ink-2);
  --text: var(--ink);
  --panel: var(--field);
  --panel-2: var(--row-hover);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* A scrollbar that comes and goes with page length would nudge the column sideways between pages. */
html { background: var(--ground); scrollbar-gutter: stable; }
body {
  margin: 0;
  font: 15px/1.45 var(--font);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { background: light-dark(rgba(0, 96, 223, .2), rgba(78, 161, 255, .35)); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 10px; }
.glyph, .icon { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex: none; }
.glyph svg, .icon svg { width: 18px; height: 18px; display: block; }
.icon.spin svg { animation: km-spin .7s linear infinite; }
@keyframes km-spin { to { transform: rotate(360deg); } }

/* --- glass --- */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(24px) saturate(1.9);
  backdrop-filter: blur(24px) saturate(1.9);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-line), var(--glass-shadow);
}

/* --- top bar --- */
/* The top row sits on the page itself and stays put; once the page scrolls, a
   soft band of the page colour fades in behind it so text passing under it
   stays legible. A conversation's subject shrinks into that band. */
.top-scrim {
  position: fixed; z-index: 19; top: 0; left: 0; right: 0; height: calc(max(12px, env(safe-area-inset-top)) + 58px);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 1px 0 var(--hair);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), height .2s var(--ease);
}
.scrolled .top-scrim { opacity: 1; }
.pin-title .top-scrim { height: calc(max(12px, env(safe-area-inset-top)) + 92px); }
.pinned-title {
  position: absolute; left: 50%; bottom: 10px; transform: translate(-50%, 4px); width: min(var(--col), calc(100% - 32px));
  text-align: center; font: 600 16px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.pin-title .pinned-title { opacity: 1; transform: translate(-50%, 0); }
.topbar {
  position: fixed; z-index: 20; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  /* Like HEY, the row runs nearly the window's full width, its margin growing a little on wide windows. */
  width: calc(100% - 2 * clamp(0px, 7vw - 54px, 60px));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 6px;
}
.lead { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lead .back { height: 34px; padding: 0 16px 0 10px; border-radius: 17px; font-size: 15px; color: var(--ink); background: var(--row-hover); }
.lead .back:hover { background: var(--hair); }
.search-link { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 17px; color: var(--ink-2); font-weight: 500; }
.search-link:hover { background: var(--row-hover); color: var(--ink); }
.search-link .glyph svg { width: 18px; height: 18px; }
.search-link[hidden] { display: none; }
.top-search { width: min(320px, 44vw); height: 34px; padding: 0 14px; border: 0; border-radius: 17px; background: var(--row-hover); color: var(--ink); font-size: 15px; outline: none; animation: widen .25s var(--ease); }
.top-search:focus { box-shadow: 0 0 0 2px var(--blue); }
.top-search[hidden] { display: none; }
@keyframes widen { from { width: 90px; opacity: .6; } }
/* While words are in the search field, results stand in for the page. */
.searching #pager, .searching #pager-bar, .searching #other { display: none !important; }
.searching .drafts-dock { display: none; }
/* On a phone an open search field takes the menu's place in the top row, so
   the two never sit on top of each other. */
@media (max-width: 720px) {
  .search-open .topbar { grid-template-columns: 1fr auto; }
  .search-open .menu-btn { display: none; }
  .search-open .top-search { width: auto; min-width: 0; flex: 1; }
}
/* Search results: matched words, then people and channels that match, then mail. */
.hit-mark { background: light-dark(rgba(255, 204, 0, .35), rgba(255, 204, 0, .28)); color: inherit; border-radius: 3px; padding: 0 1px; }
.search-lead { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 14px; }
.search-lead-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border-radius: 20px; background: var(--row-hover); color: var(--ink); font-size: 15px; }
.search-lead-chip.channel { padding-left: 12px; }
.search-lead-chip:hover { background: var(--hair); }
.search-lead-chip.person { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.search-lead-chip.dragging { opacity: .35; }
.search-lead-chip.drop-on { background: var(--glass-strong); box-shadow: 0 0 0 2px var(--blue); }
.lead-drag-ghost { position: fixed; z-index: 50; pointer-events: none; background: var(--paper); transform: translate(-50%, calc(-100% - 14px)) scale(1.04); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); }
.search-lead-chip .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; }
.search-lead-chip .glyph svg { width: 18px; height: 18px; }
.search-recent ul { list-style: none; margin: 0; padding: 0 0 8px; }
.search-recent li button { width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; color: var(--ink); font-size: 16px; }
.search-recent li button:hover { background: var(--row-hover); }
.search-recent-clear { margin: 0 14px; color: var(--ink-2); font-size: 14px; }
/* Cmd-K: the menu's jump field and the matches it fills. */
.jump-input { width: 100%; height: 42px; padding: 0 14px; margin-bottom: 10px; border: 0; border-radius: 14px; background: var(--row-hover); color: var(--ink); font-size: 16px; outline: none; }
.jump-input:focus { box-shadow: 0 0 0 2px var(--blue); }
.jump-list:empty { display: none; }
.jump-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; color: var(--ink); }
.jump-item.on, .jump-item:hover { background: var(--row-hover); }
.jump-item.on { box-shadow: inset 0 0 0 2px var(--blue); }
.jump-item .glyph svg { width: 20px; height: 20px; }
.jump-item .avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; flex: none; }
.jump-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jump-hint { margin-left: auto; color: var(--ink-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles[hidden], .menu-list[hidden] { display: none; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 14px; }
.filter-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--hair); color: var(--ink-2); font-size: 14px; font-weight: 500; background: transparent; cursor: pointer; }
.filter-pill:hover { background: var(--row-hover); color: var(--ink); }
.filter-pill.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.filter-pill .x { font-size: 16px; line-height: 1; opacity: .85; }
/* The native picker sits invisibly over its pill, so a tap on the pill opens it. */
.filter-pill input, .filter-pill select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.fulltext-note { margin: 18px 14px 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.45; }
.fulltext-note .link { color: var(--blue); font-weight: 500; padding: 0; background: none; }
#search-results .nav-active { background: var(--row-hover); box-shadow: inset 0 0 0 2px var(--blue); border-radius: 16px; }
.channels { display: flex; gap: 2px; min-width: 0; }
.channels a, .cap {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px;
  border-radius: 17px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.channels a:hover, .cap:hover { background: var(--row-hover); color: var(--ink); }
.channels a[aria-current] { background: var(--glass-strong); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 3px rgba(0, 0, 0, .08); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tint, var(--ink-3)); }
.menu-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 16px; border-radius: 17px; font: 650 16px var(--display); letter-spacing: -.01em; }
.menu-btn:hover { background: var(--row-hover); }
.menu-btn [data-glyph="chevron"] svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
/* Open, only the arrow turns; the channel's icon lights up instead. */
.menu-btn[aria-expanded="true"] [data-glyph="chevron"] svg { transform: rotate(180deg); }
.menu-btn[aria-expanded="true"] { background: var(--blue-soft); }
.menu-btn[aria-expanded="true"] #menu-glyph { color: var(--blue); }
.tools { display: flex; justify-content: flex-end; align-items: center; gap: 2px; }
.icon-btn { width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; color: var(--ink-2); }
.icon-btn:hover { background: var(--row-hover); color: var(--ink); }
.count { font-size: 12px; font-weight: 600; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--blue); color: #fff; }

/* --- popovers --- */
.pop { position: fixed; z-index: 30; top: 66px; border-radius: 22px; padding: 10px; background: var(--glass-strong); animation: pop-in .28s var(--ease); }
@keyframes pop-in { from { opacity: 0; translate: 0 -6px; scale: .97; } }
.menu { left: 50%; transform: translateX(-50%); width: 520px; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.menu-grid a, .menu-grid button { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-weight: 500; text-align: left; }
.menu-grid a:hover, .menu-grid button:hover { background: var(--row-hover); }
.menu-grid .n { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.menu h2 { margin: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.menu hr { border: 0; height: 1px; background: var(--hair); margin: 8px 6px; }
.menu .who { display: flex; align-items: center; gap: 10px; padding: 8px 12px 2px; color: var(--ink-2); font-size: 13px; }

/* --- page --- */
/* Zoom scales the column's own px cap, so the cap is divided back out. */
main { width: min(calc(var(--col) / var(--z)), calc(100% - 32px)); margin: 0 auto; padding: 70px 0 140px; zoom: var(--z); }
@media (min-width: 1024px) { :root { --z: 1.12; } }
.view-head { text-align: center; margin-bottom: 26px; }
.view-head h1 { margin: 10px 0 0 0; font: 700 40px/1.1 var(--display); letter-spacing: -.025em; }
.view-head p { margin: 6px 0 0; color: var(--ink-2); }
.section { display: flex; align-items: baseline; gap: 10px; margin: 28px 0 6px; padding: 0 14px; }
.section h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.section .rule { flex: 1; height: 1px; background: var(--hair); align-self: center; }
.empty { text-align: center; color: var(--ink-3); padding: 40px 0; }
.older { height: 1px; }
.older.busy { height: auto; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 0; color: var(--ink-2); font-size: 14px; }
.older .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hair); border-top-color: var(--ink-2); animation: older-spin .8s linear infinite; }
@keyframes older-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .older .spin { animation-duration: 2.4s; } }

/* --- channel pager --- */
/* Every page opens with the same context row, so titles sit at one height everywhere. */
/* A page's back link moves up beside Search (mailapp.js syncBack); its old row keeps no space. */
.pager-bar, .context { display: none; }
.side { display: inline-flex; align-items: center; gap: 2px; min-width: 110px; height: 30px; color: var(--ink-3); font-size: 13px; font-weight: 500; border-radius: 15px; }
.side.prev { justify-content: flex-end; }
.side:hover { color: var(--ink); }
.side .glyph svg { width: 15px; height: 15px; }
.side[disabled] { visibility: hidden; }
/* clip, not hidden: hidden makes the pager a scroll container of its own, and
   then nothing inside can stick to the screen (the Cover tab). */
.pager { min-height: 72vh; overflow: clip; touch-action: pan-y; }
.track { display: flex; align-items: flex-start; will-change: transform; }
.track.settle { transition: transform .42s var(--ease); }
/* Each channel sits on a column of its own that runs to the foot of the page,
   where the Inbox cover fills whatever is left of it. */
/* Each row's box sits 20px in from the column's edge, 30px on wide windows
   (the wide zoom scales 27px to 30). */
.track > section { --rowpad: 20px; flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; padding: 22px 0 0; border-radius: 28px 28px 0 0; background: var(--column); }
.track > section.on, .track > section.peek { min-height: calc((100dvh - 96px * var(--z)) / var(--z)); }
.track > section > :last-child:not(.cover-wrap) { margin-bottom: 160px; }
.pager { margin-bottom: -140px; }
/* The column runs to the foot of the page, so nothing fades it out there. */
#app:has(#pager:not([hidden])) .fade { display: none; }
.track > section:not(.on):not(.peek) { height: 0; overflow: hidden; }
.pager.dragging { user-select: none; -webkit-user-select: none; }
/* A message is a link; the browser's own link drag would cancel a swipe that starts on one. */
.pager a, .pager img { -webkit-user-drag: none; user-drag: none; }

/* --- rows --- */
.rows { list-style: none; margin: 0; padding: 0; }
/* A channel's rows keep 20px from the column's sides, 30px on wide windows. */
.track .rows { padding: 0 var(--rowpad); }
/* Rows are pressed and held, not selected: a long press or right-click must not highlight text. */
.row { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 16px; cursor: default; transition: transform .25s var(--ease), background .2s; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.row:hover { background: var(--row-hover); }
/* Like HEY, the avatar sits level with the middle of what the row says. */
.row .avatar { align-self: center; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 15px; color: #fff; }
.row .body { min-width: 0; display: block; text-align: left; width: 100%; }
.row .line1 { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.row .from { font-weight: 600; white-space: nowrap; }
.row .subj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .prev { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.45em; }
.sending-note { align-self: center; margin-left: 10px; color: var(--blue); font-size: 13px; font-weight: 500; white-space: nowrap; }
.entry header .sending-note { margin-left: 0; padding-top: 2px; }
.row time { align-self: center; margin-left: 10px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
@media (min-width: 1024px) { .track > section { --rowpad: 30px; } }
.row.unread::before { content: ""; position: absolute; left: 3px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blue); }
.row .n-in-thread { color: var(--ink-3); font-weight: 600; font-size: 12px; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; display: inline-grid; place-items: center; box-shadow: inset 0 0 0 1px var(--hair); }
/* The Inbox's rows, after HEY's Imbox: subject first, then sender and excerpt. */
.row .body.hey .subj { font-size: 17px; font-weight: 600; color: var(--ink); }
.row .body.hey .prev { font-size: 14px; }
.row .body.hey .who { color: var(--ink-2); font-weight: 600; }
.row .body.hey .dash { color: var(--ink-3); }
.row .clip { flex: none; display: inline-grid; color: var(--ink-3); }
.row .clip svg { width: 15px; height: 15px; }
.row .faces { flex: none; display: inline-flex; padding-left: 4px; }
.row .faces .avatar { width: 22px; height: 22px; font-size: 9px; font-weight: 700; margin-left: -6px; box-shadow: 0 0 0 2px var(--column); align-self: auto; }
.skel { display: inline-block; width: 40%; height: .8em; border-radius: 4px; background: var(--hair); vertical-align: middle; }
.big .row { grid-template-columns: 52px 1fr auto; padding: 14px; }
.big .avatar { width: 52px; height: 52px; font-size: 17px; }
.big .from { font-size: 17px; }
.big .subj { font-size: 16px; }
.big .prev { font-size: 15px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.seen-bar { border: 0; height: 2px; border-radius: 1px; background: var(--hair); margin: 18px calc(var(--rowpad, 0px) + 14px) 10px; }
.since-line { display: flex; align-items: center; gap: 12px; margin: 10px 14px; color: var(--blue); font-size: 12px; font-weight: 600; grid-column: 1 / -1; }
.since-line::before, .since-line::after { content: ""; flex: 1; height: 1px; background: var(--blue); opacity: .45; }
.seen .row { padding: 8px 14px; grid-template-columns: 32px 1fr auto; }
.seen .avatar { width: 32px; height: 32px; font-size: 12px; opacity: .8; }
.seen .from { font-weight: 500; }
.seen .subj { color: var(--ink-2); }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip .glyph svg, .chip .icon svg { width: 12px; height: 12px; }
.chip.lock { background: var(--red-soft); color: var(--red); }
.chip.bundle { background: var(--row-hover); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.chip.unverified { background: var(--red-soft); color: var(--red); }
.bundle-list { margin: 0 0 6px 58px; padding: 4px 0; border-left: 1px solid var(--hair); }
.bundle-list .row { padding: 6px 14px; grid-template-columns: 1fr auto; }

/* --- long press: lift the row, dim the rest, open its actions --- */
.pressing { transform: scale(.985); background: var(--row-hover); }
.lifted { position: fixed; z-index: 46; margin: 0; list-style: none; pointer-events: none; }
.held { transform: scale(1.015); background: var(--glass-strong); box-shadow: var(--glass-shadow); }
.hold-scrim { position: fixed; inset: 0; z-index: 45; background: light-dark(rgba(247, 247, 248, .6), rgba(15, 15, 17, .6)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
@keyframes fade { from { opacity: 0; } }
.ctx { position: fixed; z-index: 47; width: 260px; padding: 6px; border-radius: 18px; background: var(--glass-strong); animation: pop-in .26s var(--ease); }
.ctx button { width: 100%; display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; text-align: left; font-size: 15px; }
.ctx button:hover, .ctx button:focus-visible { background: var(--row-hover); outline: none; }
.ctx .k { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.ctx .danger { color: var(--red); }
.ctx .dot { margin: 0 3px; }
.ctx hr { border: 0; height: 1px; background: var(--hair); margin: 5px 8px; }
.ctx .back-item { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.toast { position: fixed; z-index: 50; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; min-height: 44px; max-width: calc(100% - 24px); padding: 0 20px; border-radius: 22px; background: var(--glass-strong); font-weight: 500; animation: rise .3s var(--ease); }
/* The message waiting to go, with the time left to take it back. */
.sending { position: fixed; z-index: 51; left: 50%; transform: translateX(-50%); bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); min-height: 46px; padding: 0 7px; border-radius: 23px; overflow: hidden; isolation: isolate; background: var(--glass-strong); color: var(--ink); animation: rise .3s var(--ease); }
.sending .fill { position: absolute; z-index: -1; inset: 0; background: var(--blue-soft); transform-origin: left; transform: scaleX(0); animation: fill-up linear forwards; }
@keyframes fill-up { to { transform: scaleX(1); } }
.sending .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sending .undo, .sending .send-now { flex: none; height: 32px; padding: 0 14px; border-radius: 16px; display: grid; place-items: center; font-weight: 600; }
.sending .undo { color: var(--ink-2); }
.sending .undo:hover { color: var(--ink); background: var(--row-hover); }
.sending .send-now { color: #fff; background: var(--blue); }
.docked .sending, .docked .toast { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px); }
.toast.with-action { padding-right: 6px; }
.toast.goes { cursor: pointer; }
.toast.goes:hover #toast-text { text-decoration: underline; text-underline-offset: 3px; }
.toast button { height: 32px; padding: 0 12px; border-radius: 16px; color: var(--blue); font-weight: 600; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
.gone { opacity: 0; transform: translateX(24px); transition: opacity .3s, transform .3s var(--ease); }

/* --- dock --- */
/* Fades the list out under the dock so its controls never sit on row text. */
.fade { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; height: 110px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--ground) 70%); }
/* Write sits in the top row's right, beside the avatar, balancing Search. */
.trail { justify-self: end; display: flex; align-items: center; gap: 10px; }
/* Write reads like Search: a plain link that gets a soft button on hover. */
.write { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 17px; font-weight: 500; color: var(--ink-2); }
.write:hover { background: var(--row-hover); color: var(--ink); }
.write .glyph svg, .write [data-glyph] svg { width: 17px; height: 17px; }

/* The composer takes the dock's place while it is open. */
.composing .fade { display: none; }

/* --- the Screener's call to action, atop the Inbox --- */
.screen-line { display: block; width: fit-content; margin: 0 auto 18px; padding: 4px 12px; border-radius: 12px; color: var(--ink-3); font-size: 13px; }
.screen-line:hover { color: var(--ink-2); background: var(--row-hover); }

/* --- tags: one colour pair per tag, legible in light and dark --- */
.tag-blue { --tg: light-dark(#1d5fd1, #8fb4ff); --tgb: light-dark(rgba(29, 95, 209, .1), rgba(143, 180, 255, .16)); }
.tag-green { --tg: light-dark(#1f7a3a, #6fdc8c); --tgb: light-dark(rgba(31, 122, 58, .1), rgba(111, 220, 140, .15)); }
.tag-amber { --tg: light-dark(#9a5b00, #ffc266); --tgb: light-dark(rgba(154, 91, 0, .1), rgba(255, 194, 102, .15)); }
.tag-red { --tg: light-dark(#b42318, #ff8a7a); --tgb: light-dark(rgba(180, 35, 24, .1), rgba(255, 138, 122, .15)); }
.tag-violet { --tg: light-dark(#6d3fc0, #c4a3ff); --tgb: light-dark(rgba(109, 63, 192, .1), rgba(196, 163, 255, .16)); }
.tag-grey { --tg: light-dark(#5b5b62, #b7b7bf); --tgb: light-dark(rgba(0, 0, 0, .06), rgba(255, 255, 255, .1)); }
.tag-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
.line1 .tag-pills { margin-left: 2px; }
.thread-head .tag-pills { justify-content: center; margin-top: 10px; }
.tag-pill { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--tg); background: var(--tgb); white-space: nowrap; }
a.tag-pill:hover { text-decoration: underline; text-underline-offset: 2px; }
.tag-dot { display: inline-block; width: 14px; height: 14px; margin-right: 10px; border-radius: 50%; vertical-align: middle; background: var(--tg); }
.tag-actions { display: flex; justify-content: center; gap: 6px; margin: -10px 0 18px; }
.menu-list .tag-link .glyph { color: var(--tg); }

/* --- one person's page --- */
.avatar.has-pic { overflow: hidden; padding: 0; background: var(--stack); }
.avatar.has-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person-link { display: inline-grid; border-radius: 50%; }
.person-link:focus-visible { box-shadow: 0 0 0 2px var(--blue); }
.person-head { display: grid; justify-items: center; gap: 6px; margin: 0 14px 22px; text-align: center; }
.person-head .avatar.xl { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 34px var(--display); }
.person-head h1 { margin: 6px 0 0; font: 700 34px/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.person-head p { margin: 0; color: var(--ink-2); }
.person-head .pname { cursor: text; border-radius: 10px; padding: 0 8px; }
.person-head .pname:hover, .person-head .pname:focus-visible { background: var(--row-hover); outline: none; }
.person-head .pname-input { margin: 6px 0 0; width: min(100%, 520px); border: 0; border-radius: 10px; padding: 0 8px; background: var(--row-hover); color: var(--ink); font: 700 34px/1.1 var(--display); letter-spacing: -.02em; text-align: center; outline: none; }
.pchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: fit-content; max-width: calc(100% - 28px); margin: 0 auto 28px; padding: 6px; border-radius: 22px; background: var(--row-hover); }
.pchip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 18px; color: var(--ink-2); font-weight: 500; }
.pchip:hover { color: var(--ink); background: var(--row-hover); }
.pchip.on { color: var(--blue); background: var(--glass-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.psection { margin: 0 0 26px; }
.psection h2 { margin: 0 14px 10px; font: 650 13px var(--font); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.psection-head { display: flex; align-items: center; justify-content: space-between; }
.psection-head h2 { margin-bottom: 0; }
.pfiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin: 0 14px; }
.pfile { display: grid; justify-items: start; gap: 2px; padding: 12px; border-radius: 14px; background: var(--row-hover); text-align: left; color: var(--ink); min-width: 0; }
.pfile b { font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfile span { color: var(--ink-3); font-size: 12px; }
.pfile .glyph { color: var(--ink-3); }
.pfile-wrap { position: relative; min-width: 0; display: grid; }
.pfile-wrap .pfile { padding-right: 40px; }
.pfile-thread { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-3); }
.pfile-thread:hover, .pfile-thread:focus-visible { color: var(--ink); background: var(--glass-strong); }
.pfiles-note { margin: 10px 14px 0; font-size: 13px; }
.person-editor input { width: 100%; height: 38px; border: 0; border-radius: 10px; padding: 0 12px; background: var(--row-hover); color: var(--ink); font-size: 15px; outline: none; }

/* --- Set aside: a small pile in the corner of every page --- */
.aside-stack { position: fixed; z-index: 22; left: 18px; bottom: max(18px, env(safe-area-inset-bottom)); display: grid; justify-items: start; gap: 8px; }
.aside-stack[hidden], .composing .aside-stack, .searching .aside-stack { display: none; }
.aside-pile { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 14px; font-weight: 600; font-size: 14px; color: var(--ink);
  background: var(--glass-strong); box-shadow: 0 -3px 0 -1px var(--glass-strong), 0 -3px 0 0 var(--glass-line), 0 -6px 0 -2px var(--glass-strong), 0 -6px 0 -1px var(--glass-line), var(--glass-shadow); }
.aside-pile .glyph { color: var(--blue); }
.aside-pile[aria-expanded="true"] { background: var(--blue-soft); }
.aside-list { width: min(360px, calc(100vw - 36px)); max-height: 60vh; overflow: auto; padding: 8px; border-radius: 20px; background: var(--glass-strong); display: grid; gap: 2px; }
.aside-head { padding: 6px 10px 8px; color: var(--ink-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.aside-item { display: flex; align-items: center; gap: 6px; border-radius: 12px; }
.aside-item:hover { background: var(--row-hover); }
.aside-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; text-align: left; color: var(--ink); }
.aside-open .avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 12px; flex: none; }
.aside-text { min-width: 0; display: grid; }
.aside-text b, .aside-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aside-text span { color: var(--ink-2); font-size: 13px; }
.aside-back { flex: none; margin-right: 4px; }

/* --- the Inbox cover over read mail --- */
/* The cover lies over the read rows; the wrap clips it as it slides away. */
.cover-wrap { position: relative; flex: 1 0 240px; min-height: 240px; margin: 6px 0 0; overflow: hidden; }
.cover-wrap:has(.sticky) { min-height: 320px; }
/* Uncovered, the box is as tall as the mail it holds. Left to flex-grow with
   no minimum, it kept the column's height while its rows ran out below it,
   so the page couldn't scroll to them, to the Cover tab, or to the point
   that loads older mail. */
.cover-wrap.uncovered { flex: none; min-height: 0; overflow: visible; border-radius: 0; }
.cover-wrap > .cover { position: absolute; inset: 0; margin: 0; min-height: 0; border-radius: 0; place-items: start center; padding-top: 86px; transition: transform .2s var(--ease); }
.cover-wrap > .cover.leaving { transform: translateY(100%); }
.cover-wrap > .cover.arriving { animation: cover-in .2s var(--ease); }
@keyframes cover-in { from { transform: translateY(100%); } }
.cover-tab { display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; }
.cover-tab.down { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); width: 64px; height: 24px; border-radius: 0 0 14px 14px; background: rgba(0, 0, 0, .28); }
.cover-tab.down:hover { background: rgba(0, 0, 0, .42); }
.cover-tab.down .glyph svg { width: 18px; height: 18px; }
/* The way back to the cover rides the bottom of the screen while read mail
   is in view; at the end of a long, still-loading list it would never be
   reached. */
.cover-tab.up { display: flex; width: fit-content; margin: 10px auto 0; height: 32px; padding: 0 16px 0 12px; border-radius: 16px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-edge), 0 2px 10px rgba(0, 0, 0, .25); position: sticky; bottom: 18px; z-index: 3; }
.cover-tab.up:hover { color: var(--ink); }
.cover-tab.up .glyph svg { width: 16px; height: 16px; transform: rotate(180deg); }
.cover { position: relative; display: grid; place-items: center; min-height: 220px; margin: 6px 6px 0; border-radius: 26px; cursor: pointer; overflow: hidden;
  background: var(--cover-image, none) var(--cover-pos, center) / var(--cover-size, cover) no-repeat, linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; box-shadow: inset 0 0 0 1px var(--glass-line); }
/* Framing the picture (coveradjust.js): the cover holds still under the
   finger, and the page doesn't scroll or zoom while it is dragged or pinched. */
.cover.adjusting { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.cover.adjusting:active { cursor: grabbing; }
.cover.adjusting { scroll-margin-top: 90px; }
.cover-adjust-bar { position: absolute; z-index: 2; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: max-content; max-width: calc(100% - 24px); padding: 8px 8px 8px 16px; border-radius: 26px; color: var(--ink); cursor: default; }
.cover-adjust-hint { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.cover-zoom-wrap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.cover-zoom { width: 140px; accent-color: var(--blue); }
@media (max-width: 520px) {
  .cover-adjust-bar { gap: 8px; padding-left: 12px; }
  .cover-adjust-hint, .cover-zoom-wrap > span { display: none; }
  .cover-zoom { width: 100px; }
}
.cover.has-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .45), rgba(0, 0, 0, .05)); }
.cover-text { position: relative; display: grid; justify-items: center; gap: 4px; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.cover-text b { font: 700 22px var(--display); letter-spacing: -.01em; }
.cover-text span { font-size: 14px; opacity: .9; }
.cover:hover .cover-text span { text-decoration: underline; text-underline-offset: 3px; }
/* The cover's two buttons, one look: a dim round button, quiet until wanted. */
.cover-btn { position: absolute; z-index: 2; top: 12px; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .22); }
.cover-btn:hover { background: rgba(0, 0, 0, .38); }
.cover-edit { right: 12px; }
.cover-add-note { left: 12px; }
/* Sticky notes sit on the cover in the top left, the way paper notes would. */
.cover-notes { position: absolute; z-index: 1; top: 56px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; pointer-events: none; }
.sticky { position: relative; pointer-events: auto; cursor: default; padding: 12px 14px; border-radius: 4px; background: #ffe98a; color: #3a2f00; font: 500 13px/1.35 var(--font); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); transform: rotate(-1.5deg); transition: transform .12s var(--ease); }
.sticky:nth-child(even) { transform: rotate(1.2deg); background: #ffd9a8; }
.sticky:hover, .sticky.selected, .sticky.editing { transform: none; }
.sticky.size-1 { width: 150px; height: 120px; }
.sticky.size-2 { width: 220px; height: 180px; font-size: 15px; }
.sticky.size-3 { width: 300px; height: 250px; font-size: 17px; }
div.sticky-text { white-space: normal; }
.sticky-text > * { margin: 0 0 .4em; }
.sticky-text > :last-child { margin-bottom: 0; }
.sticky-text ul, .sticky-text ol { padding-left: 1.2em; }
.sticky-text h1, .sticky-text h2, .sticky-text h3 { font-size: 1.15em; }
.sticky-text a { color: inherit; text-decoration: underline; }
.sticky.selected { box-shadow: 0 0 0 2px #3a2f00, 0 10px 20px -8px rgba(0, 0, 0, .4); }
.sticky-edit { position: absolute; bottom: 8px; right: 8px; padding: 3px 10px; border-radius: 12px; font: 600 12px var(--font); color: #ffe98a; background: #3a2f00; }
.sticky-edit:hover { background: #000; }
/* Written in place: sizes on top, the note itself, then Save · Cancel · trash. */
.sticky.editing { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 8px 10px; min-width: 220px; min-height: 180px; height: auto; box-shadow: 0 0 0 2px #3a2f00, 0 14px 28px -10px rgba(0, 0, 0, .45); }
.sticky.editing.size-3 { height: 250px; }
.sticky-sizes { justify-self: center; display: flex; padding: 2px; border-radius: 10px; background: rgba(58, 47, 0, .12); }
.sticky-sizes button { display: grid; place-items: center; width: 30px; height: 20px; border-radius: 8px; }
.sticky-sizes button::before { content: ""; display: block; border: 1.5px solid #3a2f00; border-radius: 2px; opacity: .55; }
.sticky-sizes button:nth-child(1)::before { width: 6px; height: 5px; }
.sticky-sizes button:nth-child(2)::before { width: 9px; height: 8px; }
.sticky-sizes button:nth-child(3)::before { width: 12px; height: 10px; }
.sticky-sizes button[aria-checked="true"] { background: #fff6c8; }
.sticky-sizes button[aria-checked="true"]::before { opacity: 1; }
.sticky.editing textarea { width: 100%; min-height: 0; border: 0; padding: 4px 2px; background: transparent; color: inherit; font: inherit; resize: none; outline: none; }
.sticky.editing textarea::placeholder { color: rgba(58, 47, 0, .45); }
.sticky-bar { display: flex; align-items: center; gap: 10px; }
.sticky-bar .btn { height: 28px; padding: 0 14px; font-size: 13px; }
.sticky-cancel { font: 500 13px var(--font); color: #3a2f00; text-decoration: underline; text-underline-offset: 3px; }
.sticky-trash { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; color: #3a2f00; }
.sticky-trash:hover { background: rgba(58, 47, 0, .12); }
.cover:has(.sticky) { padding-top: 170px; }
.cover:has(.sticky.size-2, .sticky.editing) { padding-top: 240px; }
.cover:has(.sticky.size-3) { padding-top: 310px; }
.cover-wrap:has(.sticky.size-2, .sticky.editing) { min-height: 400px; }
.cover-wrap:has(.sticky.size-3) { min-height: 470px; }
/* The small floating editors (a person's name, a tag's name). */
.note-editor { position: absolute; z-index: 45; width: 280px; padding: 10px; border-radius: 18px; background: var(--glass-strong); display: grid; gap: 8px; }
.note-editor textarea { width: 100%; border: 0; border-radius: 10px; padding: 10px 12px; background: #fff3b8; color: #3a2f00; font: 14px/1.4 var(--font); resize: vertical; outline: none; }
.note-editor .bar { display: flex; gap: 6px; flex-wrap: wrap; }
/* The default: the page's own colour, one shade off, with quiet ink. */
.cover-plain { --c1: light-dark(#ececef, #1e1e23); --c2: light-dark(#e7e7eb, #1b1b20); color: var(--ink-2); box-shadow: inset 0 1px 0 var(--hair); }
.cover-plain .cover-text { text-shadow: none; }
.cover-plain .cover-tab.down, .cover-plain .cover-btn { color: var(--ink-2); background: var(--row-hover); }
.cover-plain .cover-tab.down:hover, .cover-plain .cover-btn:hover { color: var(--ink); background: var(--hair); }
.cover-dusk { --c1: light-dark(#7c8cf0, #3b3f8f); --c2: light-dark(#f2a7c3, #7a3866); }
.cover-sea { --c1: light-dark(#5fb7d9, #1f5875); --c2: light-dark(#8fe0c5, #1d6b5a); }
.cover-moss { --c1: light-dark(#9cc27a, #3e5b2a); --c2: light-dark(#e3d98a, #6b6127); }
.cover-ember { --c1: light-dark(#f39a6b, #8a3d1c); --c2: light-dark(#f6cf74, #8a6a1f); }
.cover-plum { --c1: light-dark(#b48ad8, #4f2f73); --c2: light-dark(#e79ab8, #7a3352); }
.cover-slate { --c1: light-dark(#8e9aaa, #3a404b); --c2: light-dark(#c3cad3, #5b6370); }
.pm-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 4px 4px 10px; }
.pm-swatch { aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: inset 0 0 0 1px var(--glass-line); }
.pm-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--glass-strong), 0 0 0 4px var(--blue); }

/* --- thread --- */
.back { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 14px 0 10px; border-radius: 15px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.back:hover { color: var(--ink); }
.thread-head { margin: 0 14px 26px; text-align: center; }
.thread-head h1 { margin: 0; font: 700 34px/1.12 var(--display); letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
.thread-head p { margin: 8px 0 0; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
/* A conversation is a stack of cards: each message overlaps the one before,
   so where one ends and the next begins reads at a glance, open or folded. */
.people { display: flex; justify-content: center; margin-bottom: 14px; }
.people .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 0 0 3px var(--ground); }
.people .avatar + .avatar { margin-left: -6px; }
.people .avatar.more { background: var(--stack); color: var(--ink-2); font-size: 13px; }
.stack { position: relative; margin: 0 6px; padding-top: 4px; border-radius: 26px; background: var(--stack); box-shadow: inset 0 0 0 1px var(--glass-line); }
.stack-toggle { position: absolute; top: -18px; right: 22px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); }
.stack-toggle:hover { color: var(--ink); }
.earlier { display: block; width: 100%; padding: 14px 60px 18px; color: var(--blue); font-size: 15px; font-weight: 500; text-align: center; }
.entry { position: relative; padding: 18px 22px 18px; border-radius: 24px 24px 0 0; background: var(--stack); box-shadow: 0 -1px 0 var(--glass-line), 0 -10px 18px -14px rgba(0, 0, 0, .3); }
.entry:last-child { border-radius: 24px; }
.stack > .entry:first-child, .stack > .stack-toggle + .entry { box-shadow: none; }
.entry header { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; cursor: pointer; }
.entry header .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; }
.entry header b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry header .who-link { color: inherit; text-decoration: none; }
.entry header .who-link:hover { text-decoration: underline; }
.entry header .who-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.entry header small { display: block; color: var(--ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry.collapsed header small { font-size: 14px; }
.entry header > div { min-width: 0; }
.entry header .when { align-self: start; display: flex; align-items: center; gap: 4px; }
.entry header time { padding-top: 2px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.more-btn { width: 28px; height: 22px; border-radius: 11px; display: grid; place-items: center; color: var(--ink-3); }
.more-btn:hover { background: var(--row-hover); color: var(--ink); }

/* --- a message's own menu --- */
.popmenu { position: absolute; z-index: 40; width: 280px; padding: 10px; border-radius: 22px; background: var(--glass-strong); display: grid; gap: 2px; }
.pm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-bottom: 6px; }
.pm-tile { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 14px; background: var(--row-hover); font-weight: 600; color: var(--ink); }
.pm-tile .glyph svg { width: 22px; height: 22px; }
.pm-tile:hover, .pm-tile:focus-visible { background: var(--hair); }
.pm-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 12px; text-align: left; color: var(--ink); }
.pm-item .glyph { color: var(--ink-2); }
.pm-item:hover, .pm-item:focus-visible { background: var(--row-hover); }
.pm-item.danger, .pm-item.danger .glyph { color: var(--red); }

@media print {
  .printing-one #app > :not(main), .printing-one main > :not(#other), .printing-one #other > :not(.stack),
  .printing-one .stack > :not(.print-me), .printing-one .more-btn, .printing-one .popmenu { display: none !important; }
  .printing-one .stack, .printing-one .entry { background: none; box-shadow: none; }
  .printing-one main { padding: 0; }
}
.entry .text { margin: 12px 52px 12px 52px; line-height: 1.6; overflow-wrap: anywhere; }
.entry .paper { padding: 18px 22px; border-radius: 18px; background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), inset 0 0 0 1px var(--glass-line); }
.loading-dots { display: inline-flex; gap: 5px; padding: 6px 0; }
.loading-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dot 1.2s infinite ease-in-out; }
.loading-dots i:nth-child(2) { animation-delay: .15s; }
.loading-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
/* The sheet's last line ends at its padding, not a paragraph gap below it. */
.entry .paper :is(.read-body, .md-body, blockquote, p, ul, ol):last-child { margin-bottom: 0; }
.thread-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: calc(100% - 28px); margin: 22px auto 0; padding: 6px; border-radius: 22px; }
.thread-actions .act { display: grid; justify-items: center; gap: 4px; min-width: 76px; padding: 10px 12px 8px; border-radius: 16px; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.thread-actions .act .glyph, .thread-actions .act svg { font-size: 20px; }
.thread-actions .act:hover { background: var(--row-hover); color: var(--ink); }
.thread-actions .act.reply { color: var(--blue); }
.thread-actions .act.tinted { color: var(--tint); }
.read-body .body-line { white-space: pre-wrap; word-wrap: break-word; min-height: 1.6em; }
.body-link, .md-body a { color: var(--blue); word-break: break-word; }
.md-body h2 { font-size: 19px; margin: 16px 0 6px; font-weight: 650; }
.md-body h3 { font-size: 16px; margin: 12px 0 4px; font-weight: 650; }
.md-body p { margin: 0 0 10px; }
.md-body ul, .md-body ol { margin: 0 0 10px; padding-left: 24px; }
.md-body blockquote, .read-body .quote { margin: 6px 0; padding: 0 0 0 14px; border-left: 2px solid var(--hair); color: var(--ink-2); }
.md-body blockquote p { margin: 0; }
.md-body code { font-family: var(--mono); font-size: .92em; background: var(--row-hover); border-radius: 4px; padding: 0 4px; }
.md-body pre { font-family: var(--mono); font-size: 13px; background: var(--row-hover); border-radius: 10px; padding: 10px 12px; overflow-x: auto; line-height: 1.45; }
.md-body pre code { background: none; padding: 0; }
.attachments { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0 52px; }
.att-figure { margin: 0; position: relative; cursor: pointer; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair); max-width: 320px; }
.att-img { display: block; max-width: 100%; max-height: 320px; object-fit: cover; }
.att-file { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hair); max-width: 320px; font-size: 14px; }
.att-file-main { display: flex; flex-direction: column; min-width: 0; }
.att-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-file-size { font-size: 12px; color: var(--ink-3); }
.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .85); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lb-media { max-width: 96vw; max-height: 92vh; border-radius: 10px; }

/* --- composer --- */
.composer { position: relative; margin: 0 14px; }
.composer.dropping { outline: 2px dashed var(--blue); outline-offset: 6px; border-radius: 12px; }
.compose-corner { position: absolute; top: 4px; right: 0; display: flex; align-items: center; gap: 6px; }
.drafts-pill { height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; color: var(--blue); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1.5px var(--blue); }
.drafts-pill:hover { background: var(--blue-soft); }
.minimize .glyph svg { width: 20px; height: 20px; }

/* Drafts tucked away sit just above the Write button, on every page. */
.drafts-dock { position: fixed; z-index: 18; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); width: min(var(--col), calc(100% - 24px)); display: grid; gap: 6px; }
.drafts-dock[hidden], .composing .drafts-dock { display: none; }
.docked main { padding-bottom: 200px; }
.dock-draft { background: var(--glass-strong); display: flex; align-items: center; gap: 10px; min-width: 0; height: 46px; padding: 0 16px; border-radius: 16px; text-align: left; color: var(--ink); }
.dock-draft > .glyph { color: var(--blue); }
.dock-draft b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.dock-draft span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dock-draft .open { margin-left: auto; color: var(--blue); }
.composer .fields { display: grid; gap: 6px; margin-bottom: 10px; }
.composer .field { position: relative; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hair); padding: 4px 2px; }
.composer .field[hidden] { display: none; }
.composer .more-fields { display: flex; gap: 2px; }
.typeahead { position: absolute; z-index: 30; top: calc(100% + 4px); left: 64px; right: 0; max-width: 420px; padding: 6px; border-radius: 16px; background: var(--glass-strong); }
.typeahead[hidden] { display: none; }
.ta-item { display: flex; gap: 8px; align-items: baseline; padding: 8px 10px; border-radius: 10px; cursor: pointer; min-width: 0; }
.ta-item span { color: var(--ink-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-item[aria-selected="true"], .ta-item:hover { background: var(--row-hover); }
.format-btn .a { font: 650 17px var(--display); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }
.format-btn[aria-pressed="true"] { background: var(--row-hover); color: var(--ink); }
.composer .field label { color: var(--ink-3); width: 58px; font-size: 14px; }
.composer .field input { flex: 1; border: 0; background: none; padding: 6px 0; outline: none; min-width: 0; }
.composer textarea { width: 100%; min-height: 42vh; border: 0; background: none; resize: vertical; outline: none; line-height: 1.55; }
.composer .bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.composer .note { color: var(--ink-3); font-size: 13px; margin-left: auto; }
.composer .discard { width: 36px; padding: 0; justify-content: center; border-radius: 50%; color: var(--ink-3); }
.composer .discard:hover { color: var(--red); }
.composer .err { color: var(--red); font-size: 13px; width: 100%; }
.composer .compose-editor { display: flex; flex-direction: column; }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px 0; }
.rt-toolbar[hidden] { display: none; }
.rt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px; color: var(--ink-2); font-size: 13px; }
.rt-btn:hover { background: var(--row-hover); color: var(--ink); }
.rt-btn.on { background: var(--blue-soft); color: var(--blue); }
.rt-btn .icon svg { width: 16px; height: 16px; }
.rt-linkbar { display: inline-flex; gap: 4px; align-items: center; margin-left: 4px; }
.rt-linkinput { font-size: 13px; padding: 4px 8px; width: 200px; border: 0; border-radius: 8px; background: var(--row-hover); }
.rt-editor { min-height: 42vh; padding: 10px 2px; border-bottom: 1px solid var(--hair); }
.rt-editor .ProseMirror { outline: none; min-height: 40vh; line-height: 1.6; font-size: 16px; }
.rt-editor .ProseMirror p { margin: 0 0 10px; }
.rt-editor .ProseMirror blockquote { margin: 6px 0; padding: 0 0 0 14px; border-left: 2px solid var(--hair); color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 18px; font-weight: 600; font-size: 14px; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary[disabled] { opacity: .5; cursor: default; }
.btn.quiet { box-shadow: inset 0 0 0 1px var(--hair); }
.btn.quiet:hover { background: var(--row-hover); }
.btn.danger { color: var(--red); }

/* --- screener --- */
.screen { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 16px 14px; border-top: 1px solid var(--hair); }
.screen:first-of-type { border-top: 0; }
.screen .avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; }
.screen .from { font-weight: 600; overflow-wrap: anywhere; }
.screen .addr { color: var(--ink-3); font-size: 13px; font-weight: 400; }
.screen > div { min-width: 0; }
.screen .first { color: var(--ink-2); margin: 2px 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choose { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.seg { display: inline-flex; padding: 3px; border-radius: 15px; background: var(--row-hover); box-shadow: inset 0 0 0 1px var(--hair); }
.seg button { height: 30px; padding: 0 12px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.seg button:hover { color: var(--ink); background: var(--glass-strong); }
.screen .done { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: 14px; }
.screen .done b { color: var(--ink); }
.screen .done button { color: var(--blue); font-weight: 600; margin-left: 10px; }

/* --- the channel list --- */
.channel-list { list-style: none; margin: 0 14px; padding: 0; }
.channel-row { display: grid; grid-template-columns: auto 1fr auto auto 34px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); }
.channel-row:first-child { border-top: 0; }
.channel-row input, .channel-add input { border: 0; background: none; font-size: 16px; padding: 6px 0; outline: none; min-width: 0; }
.channel-row input:focus, .channel-add input:focus { box-shadow: 0 2px 0 var(--blue); }
.channel-row .seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 3px rgba(0, 0, 0, .12); }
.channel-row .icon-btn[disabled] { visibility: hidden; }
.channel-list [disabled]:not(.icon-btn) { opacity: .5; cursor: default; }
.channel-row .danger { justify-self: end; }
.channel-add { display: flex; gap: 10px; align-items: center; margin: 18px 14px 0; padding-top: 14px; border-top: 1px solid var(--hair); }
.channel-add input { flex: 1; }

.glyph-wrap { position: relative; }
.glyph-btn { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--row-hover); color: var(--tint, var(--ink-2)); }
.glyph-pick { position: absolute; z-index: 5; top: 42px; left: 0; display: grid; grid-template-columns: repeat(4, 36px); gap: 4px; padding: 8px; border-radius: 16px; background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
.glyph-pick button { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); }
.glyph-pick button:hover, .glyph-pick button[aria-selected="true"] { background: var(--row-hover); color: var(--ink); }

/* --- reading channel: cards --- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.card { -webkit-user-select: none; user-select: none; padding: 18px; border-radius: 20px; box-shadow: inset 0 0 0 1px var(--hair); display: flex; flex-direction: column; gap: 8px; text-align: left; transition: transform .25s var(--ease), background .2s; -webkit-touch-callout: none; }
.card:hover { background: var(--row-hover); }
.card.unread { box-shadow: inset 0 0 0 1.5px var(--blue-soft), inset 0 0 0 1px var(--hair); }
.card .src { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
.card .src .avatar { width: 24px; height: 24px; font-size: 11px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.card h2 { margin: 0; font: 650 18px/1.3 var(--display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.card p { margin: 0; color: var(--ink-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --- signed out (home.js reuses keymail's card) --- */
#locked { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.claim-card { width: min(420px, 100%); padding: 28px; border-radius: 28px; background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 0 0 1px var(--glass-line), var(--glass-shadow); }
.auth-brand { margin: 0 0 10px; font: 700 28px var(--display); letter-spacing: -.02em; }


/* --- top bar, HEY's way: search left, one menu in the middle, you on the right --- */
.topbar { grid-template-columns: 1fr auto 1fr; }
.topbar > :first-child { justify-self: start; }
.topbar .me { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.topbar .me .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 13px; }
.topbar .me:hover .avatar { box-shadow: 0 0 0 3px var(--row-hover); }
.menu-btn { gap: 4px; padding: 0 10px 0 12px; }
.menu-btn #menu-glyph .glyph svg { width: 20px; height: 20px; }
.menu-btn .count { min-width: 18px; height: 18px; font-size: 11px; }

/* --- the menu: a tile per channel, then every other place --- */
.menu { width: 440px; padding: 12px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 76px; border-radius: 16px; background: var(--row-hover); color: var(--ink); font-size: 13px; font-weight: 600; text-align: center; padding: 0 6px; }
.tile .glyph { color: var(--tint, var(--ink-2)); }
.tile .glyph svg { width: 22px; height: 22px; }
.tile:hover { background: light-dark(rgba(0, 0, 0, .07), rgba(255, 255, 255, .09)); }
.tile.here { box-shadow: inset 0 0 0 1.5px var(--tint, var(--blue)); }
.tile .tile-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A channel with something new since it was last looked at lights up; the rest rest quietly. */
.tile .glyph { opacity: .45; transition: opacity .2s var(--ease), filter .2s var(--ease); }
.tile.lit { background: color-mix(in srgb, var(--tint, var(--blue)) 14%, var(--row-hover)); }
.tile.lit .glyph { opacity: 1; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tint, var(--blue)) 70%, transparent)); }
.menu-btn.lit #menu-glyph { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--blue) 75%, transparent)); }
.menu-list { display: grid; margin-top: 10px; }
.menu-list a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; font-weight: 500; }
.menu-list a:hover { background: var(--row-hover); }
.menu-list a .glyph { color: var(--ink-2); }
.menu-list .n { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.menu-list hr { border: 0; height: 1px; background: var(--hair); margin: 6px 4px; width: auto; }

/* --- choosing several: a selected row's avatar becomes a check --- */
.row.sel, .card.sel { background: var(--blue-soft); }
.row .avatar { cursor: pointer; }
.row.sel .avatar, .card.sel .avatar { font-size: 0; color: transparent; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 55% no-repeat !important; }
/* A picture would sit over the check, so it steps aside while its row is chosen. */
.row.sel .avatar.has-pic img, .card.sel .avatar.has-pic img { visibility: hidden; }
.selbar { position: fixed; z-index: 21; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; max-width: calc(100% - 24px); overflow-x: auto; padding: 6px; border-radius: 24px; background: var(--glass-strong); }
.selbar .sel-count { padding: 0 10px 0 12px; font-weight: 600; white-space: nowrap; }
.selbar .btn { white-space: nowrap; }
.selbar .btn .glyph { color: var(--tint, currentColor); }
.selecting .fade { display: none; }

/* --- help sits out of the way, bottom right --- */
.help-fab { position: fixed; z-index: 20; right: 18px; bottom: max(18px, env(safe-area-inset-bottom)); width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; color: var(--ink-2); }
.help-fab:hover { color: var(--ink); }
.composing .help-fab { display: none; }

/* --- settings and search --- */
.settings { margin: 0 14px; display: grid; gap: 26px; }
.set h2 { margin: 0 0 4px; font: 650 17px var(--display); }
.set .muted { margin: 0 0 12px; color: var(--ink-2); font-size: 14px; }
.set .seg button[aria-checked="true"] { background: var(--glass-strong); color: var(--ink); box-shadow: inset 0 1px 0 var(--glass-edge), 0 1px 3px rgba(0, 0, 0, .12); }
.set textarea { width: 100%; border: 0; border-radius: 14px; padding: 10px 12px; background: var(--row-hover); resize: vertical; outline: none; }

/* --- contacts --- */
.contact-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-help { margin: -14px 0 0; color: var(--ink-2); font-size: 14px; }
.contact-form { display: grid; gap: 12px; padding: 16px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--hair); }
.contact-field { display: grid; gap: 4px; font-size: 13px; }
.contact-field input { width: 100%; height: 40px; border: 0; border-radius: 14px; padding: 0 12px; background: var(--row-hover); outline: none; }
.contact-field textarea { width: 100%; border: 0; border-radius: 14px; padding: 10px 12px; background: var(--row-hover); resize: vertical; outline: none; }
.contact-field select { width: 100%; height: 40px; border: 0; border-radius: 14px; padding: 0 12px; background: var(--row-hover); color: inherit; font: inherit; }
.crows { list-style: none; margin: 0; padding: 0; }
.crow { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--hair); }
.crow-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 0; text-align: left; }
.crow .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 600; font-size: 15px; }
.crow-text { min-width: 0; display: grid; }
.crow-text b, .crow-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow-text .muted { color: var(--ink-2); font-size: 13px; }

/* --- phone --- */
@media (max-width: 720px) {
  .search-link .sl { display: none; }
  .lead .back { padding-right: 12px; }
  .channels { display: none; }
  .tools .hide-s { display: none; }
  /* On a phone the column is the page: no margins, no rounded top, and the
     title sits at the left like HEY's. */
  main { width: 100%; padding-top: 64px; }
  .track > section { border-radius: 0; padding-top: 14px; }
  .track > section.on, .track > section.peek { min-height: calc(100dvh - 64px); }
  .track .view-head { text-align: left; padding: 0 14px; margin-bottom: 14px; }
  .track .view-head h1 { font-size: 36px; }
  #other { padding: 0 8px; }
  .view-head h1 { font-size: 32px; }
  .row { grid-template-columns: 40px 1fr auto; gap: 12px; padding: 10px 8px; }
  .row .avatar { width: 40px; height: 40px; }
  .row.unread { padding-left: 14px; }
  .chip.lock .ct { display: none; }
  .section { padding: 0 8px; }
  .side { width: auto; }
  .side .side-name { display: none; }
  .menu { width: calc(100% - 16px); top: 60px; }
  .ctx { left: 8px !important; right: 8px; width: auto; }
  .write { padding: 0; width: 34px; justify-content: center; }
  .write .wl { display: none; }
  .aside-stack { left: 16px; }
  /* On a phone, Help lives in the menu so the corners stay clear. */
  .help-fab { display: none; }
  .track > section { --rowpad: 0px; }
  .menu { width: calc(100% - 16px); }
  .entry .text, .attachments { margin-left: 0; margin-right: 0; }
  .cards { grid-template-columns: 1fr; }
  .choose { flex-direction: column; align-items: stretch; }
  .channel-row { grid-template-columns: auto 1fr 34px; }
  .channel-row > span:empty { display: none; }
  .channel-row .seg { grid-column: 2 / -1; grid-row: 2; }
  .channel-row .danger { grid-column: 2 / -1; grid-row: 3; justify-self: start; }
  .seg { display: flex; }
  .seg button { flex: 1; justify-content: center; }
  .choose .btn { justify-content: center; }
  .thread-head h1 { font-size: 28px; }
  .menu-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Help is in the menu; the floating button shows only where the column leaves
   the corner free, so it never sits on the cover's own buttons. */
@media (max-width: 1239px) { .help-fab { display: none; } }

/* --- Settings: the owner's other addresses --- */
.other-addr { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--hair); }
.other-addr-head { display: flex; align-items: center; gap: 10px; }
.other-addr-head .btn { margin-left: auto; }
.other-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--row-hover); }
.other-steps summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
.other-steps ol { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14px; color: var(--ink-2); }

/* Signed out: what the service is, and its policies, under the sign-in card. */
#locked:has(.home-about) { flex-direction: column; }
.home-about { max-width: 520px; margin: 22px auto 0; text-align: center; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.home-about nav { display: flex; justify-content: center; gap: 18px; margin-top: 8px; }
.home-about a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

/* --- View raw email (rawview.js) --- */
.rawview { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--ground); }
.rawview-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hair); }
.rawview-gap { flex: 1; }
.rawview-note { margin: 8px 16px 0; font-size: 13px; }
.rawview-text { flex: 1; overflow: auto; margin: 0; padding: 16px 20px 40px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-all; user-select: text; -webkit-user-select: text; }

/* --- Who sent it, and where its links go (trustview.js) --- */
.entry .trust-wrap { margin-top: 10px; margin-bottom: 0; }
.trust { font-size: 13px; color: var(--ink-2); }
.trust summary { list-style: none; cursor: pointer; display: grid; gap: 6px; }
.trust summary::-webkit-details-marker { display: none; }
.trust :is(.trust-head, .trust-warn) { display: flex; align-items: flex-start; gap: 6px; }
.trust .glyph { flex: none; margin-top: 1px; }
.trust .glyph svg { width: 15px; height: 15px; }
.trust b { color: var(--ink); font-weight: 650; }
.trust .trust-head.failed, .trust .trust-warn { padding: 6px 10px; border-radius: 10px; background: var(--red-soft); color: var(--red); }
.trust .trust-head.failed b, .trust .trust-warn b { color: inherit; }
.trust-detail { margin: 6px 0 0 21px; color: var(--ink-3); }
.linksheet-list { flex: 1; overflow: auto; margin: 0; padding: 8px 16px 40px; list-style: none; }
.linksheet-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 4px; border-bottom: 1px solid var(--hair); }
.linksheet-text { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; }
.linksheet-url { grid-column: 1; font: 12.5px/1.5 var(--mono); color: var(--ink-2); word-break: break-all; user-select: text; -webkit-user-select: text; }
.linksheet-url b { color: var(--ink); font-size: 14px; }
.linksheet-row .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* --- Screener: delete without deciding, and the waiting mail inline --- */
.screener-clear { display: flex; justify-content: center; margin: -10px 0 18px; }
.screen .peek { margin-top: 10px; }
.screen .peek-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.screen .peek-toggle .glyph svg { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .15s var(--ease); }
.screen .peek-toggle[aria-expanded="true"] .glyph svg { transform: none; }
.screen .peek-mail { margin-top: 10px; padding: 14px 16px; border-radius: 14px; background: var(--row-hover); max-height: 420px; overflow: auto; }
.screen .peek-mail + .peek-mail { margin-top: 8px; }
.screen .peek-mail h3 { margin: 0 0 8px; font-size: 15px; }
.screen .peek + .choose { margin-top: 8px; }
.screen .peek:has(.peek-mail) + .choose { margin-top: 16px; }

/* --- HTML email (htmlmail.js): the email as sent, in a sandboxed frame --- */
.entry .text.paper.as-html { padding: 0; overflow: hidden; }
.entry .paper.as-html > * { max-width: none; }
.html-mail { display: block; width: 100%; align-self: stretch; background: #fff; border-radius: inherit; }
.html-mail-loading { padding: 16px; color: #666; font-size: 14px; }
.html-mail-frame { display: block; width: 100%; height: 160px; border: 0; background: #fff; }
.html-mail-note { margin: 0; padding: 8px 16px 12px; color: #666; font-size: 12px; background: #fff; }
.html-switch { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 10px; border-radius: 12px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.html-switch:hover { color: var(--ink); background: var(--row-hover); }
.html-switch .glyph svg { width: 14px; height: 14px; }

/* --- the person page's picture: click or drop an image on it --- */
.pavatar { position: relative; display: inline-grid; border-radius: 50%; padding: 0; }
.pavatar .pavatar-edit { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0, 0, 0, .45); opacity: 0; transition: opacity .15s; }
.pavatar .pavatar-edit svg { width: 28px; height: 28px; }
.pavatar:hover .pavatar-edit, .pavatar:focus-visible .pavatar-edit, .pavatar.dropping .pavatar-edit { opacity: 1; }
.pavatar.dropping { box-shadow: 0 0 0 4px var(--blue); }

/* --- phone: a conversation sits on the page itself, as in HEY --- */
@media (max-width: 720px) {
  .stack { margin: 0; padding-top: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .entry, .entry:last-child { padding: 14px 4px; border-radius: 0; background: transparent; box-shadow: none; }
  .entry + .entry { border-top: 1px solid var(--hair); }
  .entry .text { margin: 12px 0; }
  .entry .paper { padding: 14px 16px; border-radius: 16px; }
  .entry .text.paper.as-html { padding: 0; }
}
.own-picture { display: flex; justify-content: center; padding: 6px 0; }
.own-picture .avatar.xl { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 34px var(--display); }

/* --- one row, everywhere: every list channel and the Inbox's new and read
   mail share one row, sized by one scale that only grows with the window.
   Above 1024px the page is zoomed by --z, so the scale steps down there to
   keep the on-screen size climbing rather than jumping. --- */
.track > section { --ravatar: 44px; --rsubj: 16.5px; --rprev: 14px; --rpad: 12px 14px; }
@media (max-width: 720px) { .track > section { --ravatar: 38px; --rsubj: 15.5px; --rprev: 13.5px; --rpad: 10px 14px; } }
@media (min-width: 1024px) { .track > section { --ravatar: 42px; --rsubj: 16px; --rprev: 13.5px; } }
@media (min-width: 1440px) { .track > section { --ravatar: 46px; --rsubj: 17px; --rprev: 14px; --rpad: 13px 16px; } }
.track .row, .track .big .row, .track .seen .row { grid-template-columns: var(--ravatar) 1fr auto; padding: var(--rpad); }
.track .row .avatar, .track .big .avatar, .track .seen .avatar { width: var(--ravatar); height: var(--ravatar); font-size: calc(var(--ravatar) * .34); opacity: 1; }
/* The faces stack stays small at every row size; the row-avatar rule above would otherwise grow it. */
.track .row .faces .avatar, .row .faces .avatar { width: 22px; height: 22px; font-size: 9px; }
.track .row .body.hey .subj, .track .big .body.hey .subj, .track .seen .body.hey .subj { font-size: var(--rsubj); font-weight: 500; color: var(--ink); }
.track .row .body.hey .prev, .track .big .body.hey .prev { font-size: var(--rprev); white-space: nowrap; display: block; -webkit-line-clamp: unset; }
/* Room for the unread dot where the rows are tight. */
@media (max-width: 720px) { .track .row.unread { padding-left: 14px; } }
/* Feed's tiles line up with the list rows' edges. */
.track .cards { padding: 0 var(--rowpad); }

/* --- a person's addresses as pills (personview.js addressPills) --- */
.addr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px auto 0; max-width: 760px; }
.addr-pill { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 6px 0 12px; border-radius: 14px; font-size: 13px; color: var(--ink-2); background: var(--row-hover); }
.addr-x { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 10px; color: var(--ink-3); }
.addr-x:hover { color: var(--ink); background: var(--hair); }
.addr-x svg, .addr-add svg { width: 13px; height: 13px; }
.addr-add { padding: 0 10px; color: var(--ink-2); }
.addr-add:hover { color: var(--ink); }
.addr-input { height: 28px; width: 220px; padding: 0 12px; border: 0; border-radius: 14px; font: inherit; font-size: 13px; color: var(--ink); background: var(--row-hover); outline: 2px solid var(--blue); }

/* The new-version bar sits above everything at the top so it is seen without covering the compose or toast spots at the bottom. */
.update-bar { position: fixed; z-index: 60; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); min-height: 40px; max-width: calc(100% - 24px); padding: 0 20px; border: 0; border-radius: 20px; background: var(--accent); color: #fff; font: inherit; font-weight: 500; cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); animation: drop .3s var(--ease); }
.update-bar:hover { filter: brightness(1.08); }
@keyframes drop { from { opacity: 0; translate: 0 -14px; } }