/* Slevin Mail webmail (live). Built from the design/mail/next prototype. Own art direction, independent of the landing:
   warm paper, ink, and a single vermilion rubric that is also the wax of the "Запечатано" seal.
   Type: PT Serif for what people wrote (subjects, letter headings), Noto Sans for the interface,
   Noto Sans Mono for addresses. All fonts come from our origin (design/fonts). */

/* Fonts: local() only. The mail origin CSP has no font-src yet (falls back to default-src 'none'); bundled files wait
   for that change (README, request to Codex). Installed PT Serif/Noto are used when present, otherwise the system stack. */
@font-face { font-family: "Slevin Serif"; src: local("PT Serif"), local("PTSerif-Regular"); font-weight: 400; }
@font-face { font-family: "Slevin Serif"; src: local("PT Serif Bold"), local("PTSerif-Bold"); font-weight: 700; }

:root {
  --paper: oklch(99.2% 0.003 255);
  --paper-2: oklch(96.7% 0.011 255);
  --sheet: oklch(100% 0 0);
  --ink: oklch(19% 0.02 262);
  --ink-2: oklch(40% 0.02 262);
  --ink-3: oklch(52% 0.018 262);
  --line: oklch(91.5% 0.011 255);
  --line-2: oklch(83% 0.015 258);
  --hover: oklch(95.2% 0.016 255);
  --wax: oklch(46% 0.17 262);
  --wax-deep: oklch(38% 0.15 262);
  --wax-tint: oklch(95.3% 0.032 255);
  --on-ink: oklch(99% 0.004 255);
  --ok: oklch(47% 0.09 150);
  --ok-tint: oklch(94.5% 0.03 150);
  --warn: oklch(52% 0.12 70);
  --warn-tint: oklch(96% 0.04 90);
  --danger: oklch(46% 0.16 20);

  --f-ui: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-text: "Slevin Serif", "PT Serif", "Noto Serif", Georgia, serif;
  --f-mono: "Noto Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r: 8px;
  --r-s: 6px;
  --row-y: 13px;
  --rail: 236px;
  --list: 384px;
  --shadow: 0 1px 2px oklch(20% 0.03 262 / 0.06), 0 24px 60px -30px oklch(20% 0.04 262 / 0.3);
  --brand: oklch(38% 0.15 262);
  --brand-2: oklch(44% 0.17 262);
  --seal: oklch(91% 0.18 105);
  --on-seal: oklch(22% 0.05 262);
  color-scheme: light;
}
:root[data-density="compact"] { --row-y: 8px; }
:root[data-density="airy"] { --row-y: 18px; }

* { box-sizing: border-box; }
html, body { margin: 0; block-size: 100%; }
body { font: 15px/1.5 var(--f-ui); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; font-feature-settings: "kern"; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.i { inline-size: 18px; block-size: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.num { font-variant-numeric: tabular-nums; }
.addr { font-family: var(--f-mono); font-size: 0.86em; letter-spacing: -0.01em; direction: ltr; unicode-bidi: isolate; }
kbd { display: inline-grid; place-items: center; min-inline-size: 20px; block-size: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-block-end-width: 2px; border-radius: 5px; font: 600 11px/1 var(--f-ui); color: var(--ink-3); background: var(--sheet); }
.vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 38px; padding: 0 16px; border: 0; border-radius: var(--r); font-weight: 600; font-size: 14.5px; text-decoration: none; white-space: nowrap; transition: background-color .15s, box-shadow .15s, color .15s; }
.btn--ink { background: var(--brand); color: var(--on-ink); }
.btn--ink:hover { background: var(--brand-2); }
.btn--wax { background: var(--wax); color: var(--on-ink); }
.btn--wax:hover { background: var(--wax-deep); }
.btn--line { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--line:hover { background: var(--hover); }
.btn--ghost { background: transparent; color: var(--ink-2); padding-inline: 10px; }
.btn--ghost:hover { background: var(--hover); color: var(--ink); }
.btn--danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--danger) 40%, transparent); }
.btn--danger:hover { background: color-mix(in oklch, var(--danger) 8%, transparent); }
.btn--sm { min-block-size: 32px; padding: 0 12px; font-size: 13.5px; }
.btn[disabled] { opacity: .5; cursor: default; }
.btn kbd { margin-inline-start: auto; background: transparent; border-color: oklch(100% 0 0 / .35); color: oklch(100% 0 0 / .8); }
.icon-btn { display: inline-grid; place-items: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink-2); }
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn--sm { inline-size: 28px; block-size: 28px; }
.icon-btn[aria-pressed="true"] { color: var(--wax); }
.icon-btn[aria-pressed="true"] .i { fill: currentColor; }
.link { padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link:hover { text-decoration-color: currentColor; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 30px; padding: 0 11px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--sheet); font-size: 13.5px; color: var(--ink-2); }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.meter { display: block; block-size: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.meter > span { display: block; block-size: 100%; background: var(--ink); border-radius: inherit; }
.meter--thin { block-size: 3px; }
.input, .select, .area { inline-size: 100%; min-block-size: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--sheet); }
.input:focus, .select:focus, .area:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px oklch(23% 0.014 262 / .08); }
.area { padding: 10px 12px; resize: vertical; line-height: 1.55; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: 13.5px; }
.toggle { position: relative; display: inline-block; inline-size: 36px; block-size: 20px; flex: none; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background-color .15s; pointer-events: none; }
.toggle span::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--sheet); transition: translate .15s; }
.toggle input:checked + span { background: var(--brand); }
.toggle input:checked + span::after { translate: 16px 0; }
.toggle input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Mode signs: always sign + word. The seal is the only place where the rubric colour fills a shape. */
.mode { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.mode .i { inline-size: 16px; block-size: 16px; }
.mode--sealed { color: var(--wax-deep); }
.mode--sealed .seal { fill: var(--seal); stroke: color-mix(in oklch, var(--seal) 70%, var(--ink)); }
.mode--sealed .seal-mark { stroke: var(--on-seal); stroke-width: 1.8; }
.mode--postcard { color: var(--ink-2); }
.mode--stored { color: var(--ink-3); font-weight: 500; }

/* Alias sign: a 5×5 mirrored glyph generated from the address, so each alias is recognisable without a colour. */
.glyph { display: inline-grid; grid-template-columns: repeat(5, 1fr); inline-size: 14px; block-size: 14px; flex: none; gap: 0; }
.glyph i { background: currentColor; border-radius: 0.5px; }
.glyph i.o { background: transparent; }
.glyph--lg { inline-size: 40px; block-size: 40px; padding: 7px; border-radius: var(--r); background: var(--paper-2); color: var(--ink); box-sizing: content-box; }

.ava { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; flex: none; font: 600 14px/1 var(--f-ui); color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.ava--me { background: var(--brand); color: var(--on-ink); box-shadow: none; }
.ava--sm { inline-size: 26px; block-size: 26px; font-size: 12px; }

/* ---------- Shell ---------- */
.app { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) auto 52px; grid-template-rows: 64px minmax(0, 1fr); grid-template-areas: "rail top panel strip" "rail main panel strip"; block-size: 100vh; }
:root[data-rail="mini"] .app { --rail: 0px; }
:root[data-rail="mini"] .rail { display: none; }
.rail { grid-area: rail; display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px; background: var(--paper-2); border-inline-end: 1px solid var(--line); overflow-y: auto; }
.rail__top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px 8px; }
.mark { display: inline-flex; align-items: baseline; gap: 3px; text-decoration: none; }
.mark__word { font: 700 22px/1 var(--f-text); letter-spacing: -0.02em; }
.mark__product { position: relative; margin-inline-start: 9px; font: 600 15px/1 var(--f-ui); color: var(--ink-2); }
.mark__product::before { content: ""; position: absolute; inset-inline-start: -6px; inset-block-start: -1px; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--wax); }
.rail__fold { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 0; border: 0; background: none; color: var(--ink-3); }
.rail__fold .i { inline-size: 14px; block-size: 14px; transition: rotate .15s; }
.rail__fold[aria-expanded="false"] .i { rotate: -90deg; }
.rail__head > span { display: inline-flex; }
.rail__ver { padding: 0 10px; font-size: 11.5px; color: var(--ink-3); }
.nav-item--more { color: var(--ink-3); }
.nav-item .i--sm { inline-size: 15px; block-size: 15px; }
.folder-new { display: flex; gap: 6px; padding: 2px 4px; }
.folder-new input { min-block-size: 32px; font-size: 14px; }
.rail__empty { padding: 4px 10px; font-size: 13px; color: var(--ink-3); }
.compose-btn { justify-content: flex-start; min-block-size: 42px; margin: 2px 0 10px; padding-inline: 14px; }
.folders, .addrs, .labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 34px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); text-align: start; text-decoration: none; font-size: 14.5px; }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item[aria-current="true"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line); }
.nav-item[aria-current="true"]::before { content: ""; position: absolute; inset-inline-start: -12px; inset-block: 8px; inline-size: 3px; border-radius: 0 3px 3px 0; background: var(--wax); }
.nav-item__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item__count { font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.folder-entry { display: flex; align-items: center; gap: 6px; padding-inline-end: 10px; border-radius: var(--r-s); }
.folder-entry > .nav-item { flex: 1; min-inline-size: 0; inline-size: auto; }
.folder-entry[data-current="true"] { background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.folder-entry > .nav-item[aria-current="true"] { background: transparent; box-shadow: none; }
.folder-entry__refresh, .folder-entry > .nav-item__count { flex: none; }
.folder-entry__refresh:disabled { opacity: .6; cursor: wait; }
.nav-item--off { color: var(--ink-3); }
.nav-item--off .nav-item__name { text-decoration: line-through; text-decoration-color: var(--line-2); }
.nav-item .state-dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ink-3); flex: none; }
.rail__group { margin-block-start: 14px; }
.rail__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px 6px; }
.rail__head h2 { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.rail__more { display: inline-flex; align-items: center; gap: 2px; margin: 4px 0 0 10px; font-size: 13px; color: var(--ink-2); text-decoration: none; }
.rail__more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rail__more .i { inline-size: 14px; block-size: 14px; }
.label-dot { inline-size: 8px; block-size: 8px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rail__foot { margin-block-start: auto; padding-block-start: 14px; display: grid; gap: 10px; }
.quota { display: grid; gap: 6px; padding: 8px 10px; border-radius: var(--r-s); text-decoration: none; font-size: 12.5px; color: var(--ink-2); }
.quota:hover { background: var(--hover); }
.quota__row { display: flex; justify-content: space-between; }
.me { position: relative; }
.me__btn { display: flex; align-items: center; gap: 10px; inline-size: 100%; padding: 8px; border: 0; border-radius: var(--r); background: transparent; text-align: start; }
.me__btn:hover, .me__btn[aria-expanded="true"] { background: var(--hover); }
.me__text { display: grid; min-inline-size: 0; flex: 1; font-size: 13.5px; line-height: 1.3; }
.me__text .addr { color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.menu { position: absolute; inset-block-end: calc(100% + 6px); inset-inline: 0; z-index: 20; display: grid; padding: 6px; border-radius: var(--r); background: var(--sheet); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; min-block-size: 36px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: none; text-align: start; font-size: 14px; text-decoration: none; color: var(--ink); }
.menu a:hover, .menu button:hover { background: var(--hover); }
.menu .i { color: var(--ink-3); }
.menu hr { border: 0; border-block-start: 1px solid var(--line); margin: 6px 0; }

/* ---------- Mail: list ---------- */
.mail { grid-area: main; display: grid; grid-template-columns: minmax(0, 1fr); min-block-size: 0; min-inline-size: 0; }
.mail[data-pane="reader"] .list, .mail[data-pane="list"] .reader { display: none; }
:root[data-layout="split"] .mail { grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); }
:root[data-layout="split"] .mail .list, :root[data-layout="split"] .mail .reader { display: flex; }
:root[data-layout="split"] .mail .reader { display: block; }
:root[data-layout="split"] .reader__back { display: inline-flex; margin-inline-end: 6px; }
.list { display: flex; flex-direction: column; min-block-size: 0; background: var(--paper); container: list / inline-size; border-inline-end: 1px solid var(--line); }
.list__bar { display: flex; align-items: center; gap: 10px; min-block-size: 56px; padding: 8px 16px 8px 14px; border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.list__bar .pick { inline-size: 30px; block-size: 30px; }
.list__bar .pick__box { display: grid; }
.list__bar h1 { font: 700 21px/1.15 var(--f-text); letter-spacing: -0.01em; }
.list__bar .grow { flex: 1; }
.list__bar .sel-count { font-weight: 600; font-size: 14px; margin-inline-end: 6px; }
.pager { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--ink-3); }
.pager .icon-btn { inline-size: 30px; block-size: 30px; }
.filter-pop { position: relative; }
.pop.filters { inset-inline-end: 0; inset-block-start: calc(100% + 6px); inline-size: 260px; }
.search { position: relative; flex: 1; max-inline-size: 680px; }
.top__menu { display: none; }
.search__box { display: flex; align-items: center; gap: 8px; min-block-size: 42px; padding: 0 10px 0 14px; border-radius: var(--r); background: var(--paper-2); box-shadow: inset 0 0 0 1px transparent; color: var(--ink-3); }
.search__box:focus-within { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.search__box input { flex: 1; min-inline-size: 0; border: 0; background: none; outline: none; font-size: 14.5px; color: var(--ink); }
.search__box input::-webkit-search-cancel-button { display: none; }
.search__panel { position: absolute; z-index: 25; inset-block-start: calc(100% + 6px); inset-inline: 0; display: grid; gap: 14px; padding: 14px; border-radius: var(--r); background: var(--sheet); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.index { display: grid; gap: 8px; }
.index__title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.index__note { font-size: 13px; color: var(--ink-2); }
.index .link { justify-self: start; font-size: 13px; }
.list__head { display: flex; align-items: baseline; gap: 10px; padding: 14px 20px 6px; }
.list__head h1 { font: 700 24px/1.15 var(--f-text); letter-spacing: -0.015em; }
.list__sub { font-size: 13px; color: var(--ink-3); }
.list__tools { padding: 0 14px 8px; border-block-end: 1px solid var(--line); }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.tabs button { flex: none; min-block-size: 30px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: none; font-size: 13.5px; color: var(--ink-2); }
.tabs button:hover { background: var(--hover); color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; background: var(--hover); }
.scope { display: flex; align-items: center; gap: 10px; margin: 10px 14px 0; padding: 10px 12px; border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.scope b { color: var(--ink); font-weight: 600; }
.scope .icon-btn { margin-inline-start: auto; }
.scope--search { background: var(--paper-2); box-shadow: none; }
.rows { flex: 1; overflow-y: auto; padding: 6px 0 24px; }
.day { padding: 12px 20px 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); border-block-end: 1px solid var(--line); }
/* Row: one line on a wide list, two lines when the list is narrow (split layout, phone) — the list is a container. */
.row { position: relative; display: grid; grid-template-columns: 34px 26px minmax(120px, 210px) minmax(0, 1fr) auto 70px; align-items: center; gap: 0 12px; min-block-size: calc(var(--row-y) * 2 + 26px); padding: 0 16px 0 14px; border-block-end: 1px solid var(--line); cursor: pointer; outline-offset: -2px; background: var(--paper); }
.row:hover { background: var(--paper-2); }
.row[aria-current="true"], .row.is-sel { background: var(--wax-tint); }
.row[aria-current="true"]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 0; inline-size: 3px; background: var(--wax); }
.pick { position: relative; display: grid; place-items: center; inline-size: 30px; block-size: 30px; cursor: pointer; }
.pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pick .ava { inline-size: 30px; block-size: 30px; border-radius: 7px; font-size: 12.5px; }
.pick__box { position: absolute; inset: 0; display: none; place-items: center; border-radius: 7px; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.pick__box .i { inline-size: 16px; block-size: 16px; stroke-width: 2.2; opacity: 0; }
.row:hover .pick__box, .pick input:focus-visible ~ .pick__box, .pick input:checked ~ .pick__box { display: grid; }
.pick input:checked ~ .pick__box { background: var(--brand); box-shadow: none; color: var(--on-ink); }
.pick input:checked ~ .pick__box .i { opacity: 1; }
.pick input:focus-visible ~ .pick__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.row__star { display: grid; place-items: center; inline-size: 26px; block-size: 26px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--line-2); }
.row__star:hover { color: var(--ink-2); }
.row__star[aria-pressed="true"] { color: var(--wax); }
.row__star[aria-pressed="true"] .i { fill: currentColor; }
.row__star .i { inline-size: 17px; block-size: 17px; }
.row__from { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; color: var(--ink-2); }
.row__main { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; overflow: hidden; white-space: nowrap; }
.row__subject { flex: none; max-inline-size: 70%; overflow: hidden; text-overflow: ellipsis; font: 400 15.5px/1.35 var(--f-text); color: var(--ink); }
.row__snippet { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; color: var(--ink-3); }
.row__tags { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.row__to { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; max-inline-size: 150px; padding: 0 7px 0 5px; block-size: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.row__to span { overflow: hidden; text-overflow: ellipsis; }
.row__to--warn { color: var(--warn); box-shadow: none; padding: 0; }
.row__icons { display: inline-flex; gap: 6px; color: var(--ink-3); }
.row__icons .i { inline-size: 15px; block-size: 15px; }
.row__date { justify-self: end; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row--unread .row__from { color: var(--ink); font-weight: 700; }
.row--unread .row__subject { font-weight: 700; }
.row--unread .row__date { color: var(--ink); font-weight: 600; }
.row--unread::after { content: ""; position: absolute; inset-inline-start: 5px; inset-block-start: 50%; translate: 0 -50%; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--wax); }
.row mark { background: var(--wax-tint); color: inherit; border-radius: 2px; padding: 0 1px; box-shadow: 0 0 0 1px color-mix(in oklch, var(--wax) 30%, transparent); }
.row__quick { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; display: none; gap: 2px; padding: 2px; border-radius: var(--r); background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -8px oklch(30% 0.03 262 / .3); }
.row:hover .row__quick, .row:focus-within .row__quick { display: flex; }
.row:hover .row__date { visibility: hidden; }
.row__quick .icon-btn { inline-size: 30px; block-size: 30px; }
.row__quick .i { inline-size: 16px; block-size: 16px; }
@container list (max-width: 720px) {
  .row { grid-template-columns: 34px 1fr auto; grid-template-rows: auto auto auto; gap: 1px 12px; padding-block: var(--row-y); }
  .pick { grid-row: span 3; align-self: start; }
  .row__star { display: none; }
  .row__from { grid-column: 2; }
  .row__date { grid-column: 3; grid-row: 1; }
  .row__main { grid-column: 2 / -1; flex-direction: column; gap: 0; }
  .row__subject { max-inline-size: 100%; }
  .row__snippet { inline-size: 100%; }
  .row__tags { grid-column: 2 / -1; justify-content: flex-start; margin-block-start: 4px; }
}
.empty { display: grid; justify-items: center; gap: 10px; padding: 64px 32px; text-align: center; color: var(--ink-2); }
.empty h2 { font: 700 19px/1.3 var(--f-text); color: var(--ink); }
.empty p { max-inline-size: 34ch; font-size: 14px; }
.empty__art { inline-size: 64px; block-size: 64px; color: var(--line-2); }
.empty__art .i { inline-size: 64px; block-size: 64px; stroke-width: 1; }

/* ---------- Reader: a sheet of paper with margin notes ---------- */
.reader { overflow-y: auto; min-inline-size: 0; background: var(--paper); container: reader / inline-size; }
.reader__bar { position: sticky; inset-block-start: 0; z-index: 5; display: flex; align-items: center; gap: 2px; padding: 10px 20px; background: color-mix(in oklch, var(--paper) 94%, transparent); border-block-end: 1px solid var(--line); }
.reader__bar .sep { inline-size: 1px; block-size: 20px; margin: 0 6px; background: var(--line); }
.reader__bar .grow { flex: 1; }
.reader__back { display: inline-flex; margin-inline-end: 6px; }
.reader__pos { font-size: 12.5px; color: var(--ink-3); margin-inline-end: 4px; }
.letter { display: grid; grid-template-columns: minmax(0, 66ch) minmax(190px, 230px); gap: 28px 36px; justify-content: center; padding: 28px 32px 80px; }
@container reader (max-width: 900px) {
  .letter { grid-template-columns: minmax(0, 1fr); padding-inline: 24px; }
  .margin { grid-row: 2; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); padding-block-start: 18px; border-block-start: 1px solid var(--line); }
}
.letter__main { min-inline-size: 0; }
.letter__subject { font: 700 clamp(24px, 2.2vw, 30px)/1.2 var(--f-text); letter-spacing: -0.018em; text-wrap: balance; }
.letter__labels { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-block-size: 24px; padding: 0 9px; border-radius: 999px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.letter__from { display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 12px; align-items: center; margin-block: 22px 18px; padding-block-end: 18px; border-block-end: 1px solid var(--line); }
.letter__from .ava { inline-size: 40px; block-size: 40px; grid-row: span 2; font-size: 15px; }
.letter__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-inline-size: 0; }
.letter__who b { font-size: 15px; }
.letter__who .addr { color: var(--ink-3); }
.letter__to { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13.5px; color: var(--ink-2); }
.letter__date { grid-row: 1; grid-column: 3; font-size: 13px; color: var(--ink-3); }
.ref { display: inline-grid; place-items: center; min-inline-size: 16px; block-size: 16px; padding: 0 3px; border-radius: 3px; background: var(--wax-tint); color: var(--wax-deep); font: 700 10.5px/1 var(--f-ui); vertical-align: 2px; }
.alias-pill { display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; padding: 0 8px 0 6px; border-radius: var(--r-s); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; font-size: 13px; }
.alias-pill:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.letter__body { font: 400 16.5px/1.68 var(--f-text); color: var(--ink); }
.letter__body p + p { margin-block-start: 0.85em; }
.letter__body h3 { font: 700 18px/1.3 var(--f-text); margin: 1.2em 0 .4em; }
.letter__body ul { padding-inline-start: 1.2em; margin: .6em 0; }
.letter__body .blocked { display: flex; align-items: center; justify-content: center; gap: 8px; block-size: 160px; margin: 1em 0; border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--paper-2) 0 10px, var(--paper) 10px 20px); color: var(--ink-3); font: 500 13px var(--f-ui); }
.letter__body .blocked--small { block-size: 56px; }
.letter__sign { margin-block-start: 1.4em; color: var(--ink-2); }
.files { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-block-start: 26px; }
.file { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.file__type { display: grid; place-items: center; inline-size: 36px; block-size: 42px; flex: none; border-radius: 4px; background: var(--paper-2); font: 700 10px var(--f-ui); color: var(--ink-2); }
.file__name { display: grid; min-inline-size: 0; }
.file__name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file__name span { color: var(--ink-3); font-size: 12.5px; }
.file .icon-btn { margin-inline-start: auto; }

/* Margin notes: the explanation sits next to what it explains (principles.md, rule 4). */
.margin { display: grid; align-content: start; gap: 18px; padding-block-start: 6px; }
.note { position: relative; display: grid; gap: 6px; padding-inline-start: 14px; border-inline-start: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.note__head { display: flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: 13px; }
.note__head .ref { vertical-align: 0; }
.note .link { justify-self: start; font-size: 13px; }
.note--warn { border-inline-start-color: var(--warn); }
.note--wax { border-inline-start-color: var(--wax); }
.reply { margin-block-start: 34px; border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.reply__actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px; }
.reply__box { display: grid; gap: 10px; padding: 14px 16px 16px; border-block-start: 1px solid var(--line); }
.reply__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--ink-2); }
.reply__box textarea { min-block-size: 110px; border: 0; padding: 0; background: none; outline: none; resize: vertical; font: 16px/1.6 var(--f-text); }
.reply__foot { display: flex; align-items: center; gap: 10px; }
.reply__foot .saved { font-size: 12.5px; color: var(--ink-3); }
.reader__empty { display: grid; place-content: center; justify-items: center; gap: 12px; block-size: 100%; padding: 40px; text-align: center; color: var(--ink-3); }
.reader__empty h2 { font: 400 20px/1.3 var(--f-text); color: var(--ink-2); font-style: italic; }
.reader__empty .keys-hint { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 13px; }
.reader__empty .keys-hint span { display: inline-flex; align-items: center; gap: 6px; }
.delivery { display: grid; gap: 0; margin-block: 0 22px; border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.delivery__row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 14px; border-block-start: 1px solid var(--line); font-size: 13.5px; }
.delivery__row:first-child { border: 0; }
.delivery__row .addr { color: var(--ink); }
.delivery__state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.delivery__state--unknown { color: var(--warn); }
.delivery__hint { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }

/* ---------- Pages ---------- */
.page { grid-area: main; overflow-y: auto; background: var(--paper); min-inline-size: 0; }
.page__wrap { max-inline-size: 1080px; margin: 0 auto; padding: 36px 40px 96px; }
.page__head { display: grid; grid-template-columns: 1fr auto; gap: 8px 32px; align-items: end; margin-block-end: 28px; }
.page__head h1 { font: 700 34px/1.1 var(--f-text); letter-spacing: -0.02em; }
.page__lead { grid-column: 1; max-inline-size: 60ch; font-size: 15.5px; color: var(--ink-2); }
.page__head .actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 8px; }

/* Addresses: the main address as a heading line, a maker for new aliases, then the alias ledger. */
.mainaddr { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 16px; align-items: center; padding: 18px 0 22px; border-block: 1px solid var(--line); }
.mainaddr__big { font: 500 clamp(22px, 2.4vw, 30px)/1.2 var(--f-mono); letter-spacing: -0.03em; direction: ltr; }
.mainaddr__note { grid-column: 2; font-size: 13.5px; color: var(--ink-2); }
.mainaddr .glyph--lg { grid-row: span 2; }
.mainaddr .actions { grid-row: span 2; display: flex; gap: 6px; }

.maker { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 0; margin-block: 28px 36px; border-radius: 10px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.maker__main { display: grid; gap: 18px; padding: 22px 24px 24px; }
.maker__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.maker__title h2 { font: 700 20px/1.25 var(--f-text); }
.maker__preview { display: flex; align-items: center; gap: 14px; min-block-size: 64px; padding: 0 8px 0 16px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.maker__addr { flex: 1; min-inline-size: 0; display: flex; align-items: baseline; font: 500 21px/1.2 var(--f-mono); letter-spacing: -0.03em; direction: ltr; overflow: hidden; }
.maker__addr input { min-inline-size: 4ch; inline-size: 100%; max-inline-size: 22ch; padding: 0; border: 0; background: none; outline: none; font: inherit; letter-spacing: inherit; color: var(--ink); }
.maker__addr input:focus { text-decoration: underline 1.5px var(--wax); text-underline-offset: 6px; }
.maker__addr .at { color: var(--ink-3); white-space: nowrap; }
.maker__addr select { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--ink-3); cursor: pointer; appearance: none; }
.maker__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.maker__foot { display: flex; align-items: center; gap: 12px; }
.maker__foot p { font-size: 13px; color: var(--ink-3); }
.maker__side { display: grid; align-content: start; gap: 16px; padding: 22px 22px; background: var(--paper-2); border-inline-start: 1px solid var(--line); }
.seg { display: inline-flex; padding: 3px; border-radius: var(--r); background: var(--paper-2); gap: 2px; }
.seg button { min-block-size: 30px; padding: 0 12px; border: 0; border-radius: var(--r-s); background: none; font-size: 13.5px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--sheet); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px oklch(30% 0.03 262 / .12); }
.seg .i { inline-size: 15px; block-size: 15px; }

.ledger__tools { display: flex; align-items: center; gap: 12px; margin-block-end: 8px; }
.ledger__tools h2 { font: 700 20px/1.2 var(--f-text); margin-inline-end: auto; }
.ledger__tools .search__box { flex: 0 1 240px; min-block-size: 34px; }
.ledger { display: grid; }
.ledger__row { display: grid; grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1fr) 150px 120px 40px; gap: 16px; align-items: center; padding: 14px 8px; border-block-end: 1px solid var(--line); cursor: pointer; }
.ledger__row:hover { background: var(--paper-2); }
.ledger__row--head { cursor: default; padding-block: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.ledger__row--head:hover { background: none; }
.ledger__row .glyph { inline-size: 20px; block-size: 20px; justify-self: center; }
.ledger__name { display: grid; min-inline-size: 0; gap: 1px; }
.ledger__name b { font: 700 16px/1.3 var(--f-text); }
.ledger__name .addr { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger__stats { display: grid; font-size: 13px; color: var(--ink-2); gap: 1px; }
.ledger__stats .spark { display: flex; align-items: flex-end; gap: 2px; block-size: 18px; }
.ledger__stats .spark i { inline-size: 4px; background: var(--line-2); border-radius: 1px; }
.ledger__stats .spark i.s { background: var(--warn); }
.ledger__row--off { color: var(--ink-3); }
.ledger__row--off .ledger__name b { color: var(--ink-3); }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.state::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.state--active { color: var(--ok); }
.state--paused { color: var(--warn); }
.state--off { color: var(--ink-3); }
.state--pending { color: var(--warn); }
.leak { display: inline-flex; align-items: center; gap: 5px; margin-block-start: 3px; font-size: 12.5px; font-weight: 600; color: var(--warn); }
.leak .i { inline-size: 14px; block-size: 14px; }
.domains-teaser { display: flex; align-items: center; gap: 16px; margin-block-start: 32px; padding: 18px 20px; border-radius: 10px; background: var(--paper-2); }
.domains-teaser .i { inline-size: 26px; block-size: 26px; color: var(--ink-2); }
.domains-teaser div { flex: 1; }
.domains-teaser b { display: block; font: 700 16px/1.3 var(--f-text); }
.domains-teaser span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- Sheets (compose, alias drawer) ---------- */
.sheet { position: fixed; inset: 0 0 0 auto; margin: 0; inline-size: min(720px, 100vw); max-inline-size: 100vw; block-size: 100vh; max-block-size: 100vh; padding: 0; border: 0; background: var(--sheet); color: var(--ink); box-shadow: -1px 0 0 var(--line), -40px 0 80px -40px oklch(25% 0.03 262 / .35); }
.sheet::backdrop { background: oklch(25% 0.02 262 / .18); }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes sheet-in { from { translate: 24px 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 24px; border-block-end: 1px solid var(--line); }
.sheet__head h2 { flex: 1; font: 700 19px/1.25 var(--f-text); }
.sheet__body { flex: 1; overflow-y: auto; }
.sheet__foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px 12px 24px; border-block-start: 1px solid var(--line); background: var(--paper); }
.sheet__foot .grow { flex: 1; }
.sheet__foot .saved { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }

.cline { display: grid; grid-template-columns: 72px 1fr auto; align-items: start; gap: 10px; padding: 10px 24px; border-block-end: 1px solid var(--line); }
.cline > label, .cline > .cline__label { padding-block-start: 6px; font-size: 13.5px; color: var(--ink-3); }
.cline__extra { display: flex; gap: 2px; padding-block-start: 2px; }
.cline__extra button { padding: 4px 8px; border: 0; border-radius: var(--r-s); background: none; font-size: 13px; color: var(--ink-2); }
.cline__extra button:hover { background: var(--hover); }
.recips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-block-size: 34px; }
.recips input { flex: 1; min-inline-size: 140px; min-block-size: 32px; border: 0; background: none; outline: none; font-size: 14.5px; }
.rcp { display: inline-flex; align-items: center; gap: 6px; min-block-size: 30px; padding: 0 4px 0 8px; border-radius: var(--r-s); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; }
.rcp .i { inline-size: 15px; block-size: 15px; }
.rcp__x { display: inline-grid; place-items: center; inline-size: 22px; block-size: 22px; border: 0; border-radius: 4px; background: none; color: var(--ink-3); }
.rcp__x:hover { background: var(--hover); color: var(--ink); }
.rcp--sealed { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--wax) 35%, var(--line)); }
.rcp--checking { color: var(--ink-3); }
.spin { inline-size: 13px; block-size: 13px; border-radius: 50%; border: 1.5px solid var(--line-2); border-inline-end-color: var(--ink); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.from-btn { display: inline-flex; align-items: center; gap: 8px; min-block-size: 32px; padding: 0 8px; border: 0; border-radius: var(--r-s); background: none; text-align: start; }
.from-btn:hover { background: var(--hover); }
.from-btn .i { inline-size: 15px; block-size: 15px; color: var(--ink-3); }
.from-menu { position: absolute; z-index: 10; inset-inline-start: 96px; inline-size: 380px; padding: 6px; border-radius: var(--r); background: var(--sheet); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.from-menu button { display: grid; grid-template-columns: 18px 1fr; gap: 0 10px; align-items: center; inline-size: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-s); background: none; text-align: start; }
.from-menu button:hover, .from-menu button[aria-selected="true"] { background: var(--hover); }
.from-menu button small { grid-column: 2; font-size: 12.5px; color: var(--ink-3); }
.from-menu hr { border: 0; border-block-start: 1px solid var(--line); margin: 6px 0; }
.csubject { inline-size: 100%; padding: 14px 24px; border: 0; border-block-end: 1px solid var(--line); background: none; outline: none; font: 700 20px/1.3 var(--f-text); }
.cbody { display: block; inline-size: 100%; min-block-size: 280px; padding: 18px 24px; border: 0; background: none; outline: none; resize: none; font: 16.5px/1.65 var(--f-text); }
.cmode { margin: 0 24px 16px; padding: 12px 14px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; }
.cmode b { color: var(--ink); }
.cmode--mixed { background: var(--warn-tint); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn) 30%, transparent); }
.cmode__line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cfiles { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 16px; }

.drawer { inline-size: min(560px, 100vw); }
.dsec { display: grid; gap: 12px; padding: 22px 24px; border-block-end: 1px solid var(--line); }
.dsec h3 { font: 700 16px/1.3 var(--f-text); }
.dsec p { font-size: 13.5px; color: var(--ink-2); }
.dhero { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 26px 24px 22px; border-block-end: 1px solid var(--line); }
.dhero .glyph--lg { grid-row: span 3; }
.dhero__name { font: 700 22px/1.2 var(--f-text); }
.dhero__addr { display: flex; align-items: center; gap: 6px; font: 500 16px/1.3 var(--f-mono); letter-spacing: -0.02em; direction: ltr; justify-content: flex-end; flex-direction: row-reverse; }
.dhero__addr .icon-btn { inline-size: 28px; block-size: 28px; }
.choice { display: grid; gap: 6px; }
.choice label { display: grid; grid-template-columns: 18px 1fr; gap: 2px 12px; padding: 12px 14px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.choice label:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--paper); }
.choice input { margin: 3px 0 0; accent-color: var(--ink); }
.choice b { font-size: 14px; }
.choice span { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.setrow { display: flex; align-items: flex-start; gap: 14px; }
.setrow div { flex: 1; display: grid; gap: 2px; }
.setrow b { font-size: 14px; font-weight: 600; }
.setrow span { font-size: 13px; color: var(--ink-2); }
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 1fr 120px 28px; align-items: center; gap: 10px; font-size: 13.5px; }
.bar .meter span { background: var(--ink-2); }
.bar--unknown .meter span { background: var(--warn); }
.bar__n { text-align: end; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.callout { display: grid; grid-template-columns: 20px 1fr; gap: 4px 10px; padding: 12px 14px; border-radius: var(--r); background: var(--warn-tint); font-size: 13.5px; color: var(--ink); }
.callout .i { color: var(--warn); margin-block-start: 1px; }
.callout p { grid-column: 2; color: var(--ink-2); }
.callout .actions { grid-column: 2; display: flex; gap: 8px; margin-block-start: 6px; }
.callout--plain { background: var(--paper-2); }
.callout--plain .i { color: var(--ink-2); }

/* ---------- Settings ---------- */
.settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.settings__nav { position: sticky; inset-block-start: 36px; align-self: start; display: grid; gap: 1px; }
.settings__nav .nav-item { font-size: 14px; }
.settings__nav .nav-item[aria-current="true"]::before { inset-inline-start: -10px; }
.sblock { display: grid; gap: 14px; padding-block: 0 32px; margin-block-end: 32px; border-block-end: 1px solid var(--line); }
.sblock:last-child { border: 0; }
.sblock h2 { font: 700 22px/1.2 var(--f-text); }
.sblock > p { max-inline-size: 64ch; font-size: 14px; color: var(--ink-2); }
.dev { display: grid; grid-template-columns: 40px 1fr auto; gap: 2px 14px; align-items: center; padding: 14px 0; border-block-end: 1px solid var(--line); }
.dev:last-child { border: 0; }
.dev__icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r); background: var(--paper-2); grid-row: span 2; }
.dev b { font-size: 14.5px; }
.dev span { font-size: 13px; color: var(--ink-2); }
.dev .now { color: var(--ok); font-weight: 600; }
.dev .btn { grid-row: span 2; }
.events { display: grid; gap: 0; font-size: 13.5px; }
.events li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 9px 0; border-block-end: 1px solid var(--line); }
.events time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.events ul, ul.events { list-style: none; margin: 0; padding: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps > li { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 14px; padding: 16px 0; border-block-end: 1px solid var(--line); counter-increment: s; }
.steps > li::before { content: counter(s); display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); grid-row: span 2; }
.steps > li[data-ok]::before { content: "✓"; background: var(--brand); color: var(--on-ink); box-shadow: none; }
.steps b { font-size: 14.5px; }
.steps p { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.dns { grid-column: 2 / -1; display: grid; grid-template-columns: 64px 1fr auto; gap: 0 12px; align-items: center; margin-block-start: 8px; padding: 8px 8px 8px 12px; border-radius: var(--r); background: var(--paper-2); font: 13px/1.45 var(--f-mono); }
.dns span:first-child { color: var(--ink-3); font-weight: 700; }
.dns code { overflow-wrap: anywhere; }
.stack-bar { display: flex; block-size: 12px; border-radius: 3px; overflow: hidden; background: var(--line); }
.stack-bar span { display: block; block-size: 100%; }
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 20px; font-size: 13.5px; }
.legend div { display: flex; align-items: center; gap: 8px; }
.legend i { inline-size: 10px; block-size: 10px; border-radius: 2px; flex: none; }
.legend span { margin-inline-start: auto; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.density-card { display: grid; gap: 10px; padding: 14px; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: var(--sheet); text-align: start; border: 0; }
.density-card[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); }
.density-card b { font-size: 14px; }
.density-card .lines { display: grid; }
.density-card .lines i { display: block; block-size: 1px; background: var(--line-2); }
.agent-card { display: grid; grid-template-columns: 40px 1fr auto; gap: 4px 14px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line); }
.agent-card .dev__icon { grid-row: span 3; }
.agent-card p { grid-column: 2 / -1; font-size: 13px; color: var(--ink-2); }

/* ---------- Palette, keys, toasts ---------- */
.palette { inline-size: min(580px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 0; border-radius: 12px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 40px 100px -30px oklch(25% 0.04 262 / .5); }
.palette::backdrop, .keys::backdrop { background: oklch(25% 0.02 262 / .22); }
.palette__field { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-block-end: 1px solid var(--line); color: var(--ink-3); }
.palette__field input { flex: 1; min-block-size: 54px; border: 0; background: none; outline: none; font-size: 16px; color: var(--ink); }
.palette__list { list-style: none; margin: 0; padding: 6px; max-block-size: 50vh; overflow-y: auto; }
.palette__list li { display: flex; align-items: center; gap: 12px; min-block-size: 40px; padding: 0 12px; border-radius: var(--r-s); font-size: 14.5px; cursor: pointer; }
.palette__list li .i { color: var(--ink-3); }
.palette__list li kbd { margin-inline-start: auto; }
.palette__list li[aria-selected="true"] { background: var(--hover); }
.palette__group { padding: 10px 12px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: default !important; min-block-size: 0 !important; }
.palette__foot { display: flex; gap: 16px; padding: 10px 16px; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.palette__foot span { display: inline-flex; gap: 4px; align-items: center; }
.keys { inline-size: min(640px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 12px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.keys__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 32px; padding: 8px 24px 24px; }
.keys__grid h3 { grid-column: 1 / -1; margin-block-start: 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.keys__grid div { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-block-end: 1px solid var(--line); font-size: 14px; }
.keys__grid kbd + kbd { margin-inline-start: 3px; }
.toasts { position: fixed; inset-block-end: 20px; inset-inline-start: 50%; translate: -50% 0; z-index: 50; display: grid; gap: 8px; justify-items: center; }
.toast { display: flex; align-items: center; gap: 14px; min-block-size: 44px; padding: 0 8px 0 16px; border-radius: var(--r); background: var(--ink); color: var(--on-ink); font-size: 14px; box-shadow: var(--shadow); animation: toast-in .2s ease-out; }
.toast button { min-block-size: 32px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: oklch(100% 0 0 / .1); color: var(--on-ink); font-weight: 600; font-size: 13.5px; }
.toast button:hover { background: oklch(100% 0 0 / .18); }
@keyframes toast-in { from { translate: 0 8px; opacity: 0; } }

/* Lock screen (prototype of "Закрыть почту на этом устройстве"). */
.locked { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--paper); text-align: center; }
.locked h1 { font: 700 30px/1.2 var(--f-text); }
.locked p { max-inline-size: 40ch; color: var(--ink-2); }
.locked .mode .i { inline-size: 48px; block-size: 48px; }

/* ---------- Narrow screens: not tuned during the design phase, only kept from breaking. ---------- */
@media (max-width: 1100px) { .top-btn span:not(.badge) { display: none; } .acct__text { display: none; } }
@media (max-width: 980px) {
  .app { grid-template-columns: minmax(0, 1fr) 0 0; grid-template-areas: "top panel strip" "main panel strip"; }
  .strip { display: none; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 40; inline-size: 280px; translate: -100% 0; transition: translate .2s; }
  .app[data-rail="open"] .rail { translate: 0 0; box-shadow: var(--shadow); }
  .top__menu { display: inline-grid; }
  .panel { position: fixed; inset: 0 0 0 auto; z-index: 40; }
  .maker { grid-template-columns: 1fr; }
  .ledger__row { grid-template-columns: 32px 1fr 110px 32px; }
  .ledger__row > :nth-child(3), .ledger__row > :nth-child(5) { display: none; }
  .settings { grid-template-columns: 1fr; }
  .page__wrap { padding: 24px 18px 80px; }
}
@media (forced-colors: active) {
  .row[aria-current="true"]::before, .nav-item[aria-current="true"]::before { background: Highlight; }
  .mode--sealed .seal { fill: CanvasText; }
}

/* ---------- Top bar ---------- */
.top { grid-area: top; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-block-end: 1px solid var(--line); background: var(--paper); min-inline-size: 0; }
.top__actions { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.top-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-block-size: 38px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.top-btn:hover, .top-btn[aria-pressed="true"], .icon-btn[data-panel-btn][aria-pressed="true"] { background: var(--hover); color: var(--ink); }
.badge { display: inline-grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 999px; background: var(--wax); color: var(--on-ink); font: 700 11px/1 var(--f-ui); }
.acct { display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding: 4px 4px 4px 12px; border: 0; border-radius: var(--r); background: none; text-align: end; }
.acct:hover, .acct[aria-expanded="true"] { background: var(--hover); }
.acct__text { display: grid; line-height: 1.25; font-size: 13.5px; }
.acct__text .addr { color: var(--ink-3); font-size: 12px; }
.ava--me { border-radius: 8px; font-size: 12.5px; }
.pop-wrap { position: relative; }
.pop { position: absolute; z-index: 30; padding: 6px; border-radius: 10px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.pop hr { border: 0; border-block-start: 1px solid var(--line); margin: 6px 0; }
.pop__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 38px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: none; text-align: start; font-size: 14px; text-decoration: none; color: var(--ink); }
.pop__item:hover { background: var(--hover); }
.pop__item .i { color: var(--ink-3); }
.pop__item .i:last-child:not(:first-child) { margin-inline-start: auto; inline-size: 15px; block-size: 15px; }
.pop__label { padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.acct-menu { inset-inline-end: 0; inset-block-start: calc(100% + 6px); inline-size: 340px; }
.acct-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 0 12px; align-items: center; inline-size: 100%; padding: 10px; border: 0; border-radius: var(--r); background: none; text-align: start; }
.acct-row:hover { background: var(--hover); }
.acct-row .ava { grid-row: span 2; inline-size: 36px; block-size: 36px; border-radius: 8px; }
.acct-row b { font-size: 14px; }
.acct-row .addr { grid-column: 2; color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.acct-row .meta { grid-row: span 2; font-size: 12px; color: var(--ink-3); text-align: end; }
.acct-row--cur { background: var(--paper-2); }
.acct-row--cur .meta { color: var(--ok); font-weight: 600; }
.apps { position: fixed; inset-inline-start: 12px; inset-block-start: 56px; inline-size: 320px; padding: 10px; }
.apps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.app-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border: 0; border-radius: var(--r); background: none; text-decoration: none; color: var(--ink); font-size: 13px; text-align: center; }
.app-tile:hover { background: var(--hover); }
.app-tile__icon { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 11px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.app-tile__icon .i { inline-size: 22px; block-size: 22px; }
.app-tile[aria-current="true"] .app-tile__icon { background: var(--brand); color: var(--on-ink); box-shadow: none; }
.app-tile small { font-size: 11px; color: var(--ink-3); margin-block-start: -4px; }
.apps__foot { margin-block-start: 8px; padding: 10px 6px 2px; border-block-start: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }

/* ---------- Right side: panel + app strip ---------- */
.strip { grid-area: strip; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-inline-start: 1px solid var(--line); background: var(--paper-2); }
.strip .grow { flex: 1; }
.strip__btn { position: relative; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); }
.strip__btn:hover { background: var(--hover); color: var(--ink); }
.strip__btn[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.strip__btn .dot { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--wax); box-shadow: 0 0 0 2px var(--paper-2); }
.panel { grid-area: panel; inline-size: 380px; display: flex; flex-direction: column; min-block-size: 0; border-inline-start: 1px solid var(--line); background: var(--paper-2); }
.panel[hidden] { display: none !important; }
.panel__head { display: flex; align-items: center; gap: 10px; min-block-size: 64px; padding: 0 12px 0 20px; }
.panel__head h2 { flex: 1; font: 700 19px/1.2 var(--f-text); }
.panel__body { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 12px; padding: 4px 14px 24px; }
.pcard { display: grid; gap: 12px; padding: 16px; border-radius: 10px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); }
.pcard h3 { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.pcard h3 .i { color: var(--ink-3); }
.pcard p { font-size: 13px; color: var(--ink-2); }
.pcard .row-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.pcard .row-set > span:first-child { display: grid; gap: 1px; }
.pcard .row-set small { font-size: 12.5px; color: var(--ink-3); }
.pcard .select { inline-size: auto; min-block-size: 32px; padding: 0 8px; font-size: 13.5px; }
.pcard--warn { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn) 45%, transparent); background: var(--warn-tint); }
.mini-alias { display: grid; grid-template-columns: 18px 1fr auto; gap: 0 10px; align-items: center; padding: 10px 6px 10px 12px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mini-alias b { font-size: 13.5px; font-weight: 600; }
.mini-alias .addr { grid-column: 2; color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-alias .icon-btn { grid-row: 1 / span 2; grid-column: 3; inline-size: 32px; block-size: 32px; }
.mini-alias .glyph { grid-row: span 2; }
.mini-alias--new { box-shadow: inset 0 0 0 1.5px var(--ok); }
.theme-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-card { display: grid; gap: 6px; padding: 6px 6px 8px; border: 0; border-radius: var(--r); background: none; box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink-2); }
.theme-card[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-weight: 600; }
.theme-card i { display: grid; grid-template-columns: 30% 1fr; block-size: 46px; border-radius: 5px; overflow: hidden; }
.theme-card i::before, .theme-card i::after { content: ""; }
.theme-card--paper i { background: oklch(99.2% 0.003 255); } .theme-card--paper i::before { background: oklch(95.5% 0.012 255); } .theme-card--paper i::after { background: linear-gradient(oklch(46% 0.17 262) 0 3px, transparent 3px); margin: 10px 8px; }
.theme-card--night i { background: oklch(19.5% 0.03 262); } .theme-card--night i::before { background: oklch(16.5% 0.03 262); } .theme-card--night i::after { background: linear-gradient(oklch(74% 0.12 255) 0 3px, transparent 3px); margin: 10px 8px; }
.theme-card--system i { background: linear-gradient(90deg, oklch(99% 0.003 255) 50%, oklch(19.5% 0.03 262) 50%); } .theme-card--system i::before { background: oklch(95.5% 0.012 255 / .6); }
.contact { display: grid; grid-template-columns: 34px 1fr auto; gap: 0 10px; align-items: center; padding: 8px 6px; border-radius: var(--r); }
.contact:hover { background: var(--hover); }
.contact .ava { grid-row: span 2; }
.contact b { font-size: 14px; font-weight: 600; }
.contact .addr { grid-column: 2; color: var(--ink-3); font-size: 12px; }
.contact .mode { grid-row: span 2; }
.newsletter { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-block-end: 1px solid var(--line); }
.newsletter b { font-size: 14px; }
.newsletter span { font-size: 12.5px; color: var(--ink-3); }
.newsletter .btn { grid-row: span 2; }

/* ---------- Night theme: same system, ink on dark paper; the wax gets lighter to keep its contrast. ---------- */
:root[data-theme="night"] {
  --paper: oklch(19.5% 0.03 262); --paper-2: oklch(16.5% 0.03 262); --sheet: oklch(23.5% 0.035 262);
  --ink: oklch(94% 0.01 255); --ink-2: oklch(80% 0.015 258); --ink-3: oklch(66% 0.018 258);
  --line: oklch(30% 0.03 262); --line-2: oklch(39% 0.035 262); --hover: oklch(26.5% 0.035 262);
  --wax: oklch(74% 0.12 255); --wax-deep: oklch(82% 0.09 255); --wax-tint: oklch(30% 0.07 262);
  --on-ink: oklch(99% 0.004 255); --ok: oklch(72% 0.11 150); --warn: oklch(78% 0.12 75); --warn-tint: oklch(28% 0.04 75);
  --danger: oklch(70% 0.15 20); --shadow: 0 30px 60px -30px oklch(0% 0 0 / .6);
  --brand: oklch(58% 0.16 262);
  --brand-2: oklch(64% 0.15 262);
  color-scheme: dark;
}
:root[data-theme="night"] .btn--ink:hover { background: var(--brand-2); }


.settings__group { margin: 14px 0 4px; padding-inline-start: 10px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.settings__group:first-child { margin-block-start: 0; }
.nav-item__count--strong { min-inline-size: 22px; padding: 1px 6px; border-radius: 999px; background: var(--brand); color: var(--on-ink); text-align: center; }
.rule-list { display: grid; border-block-start: 1px solid var(--line); }
.rule { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-block-end: 1px solid var(--line); }
.rule b { font-size: 14px; font-weight: 600; }
.rule > span:not(.state) { font-size: 12.5px; color: var(--ink-3); }
.rule .state { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* ---------- Live client additions ---------- */
/* Gate: locked mailbox, sign-in buttons, waiting line, unconfirmed sign-out. */
.gate { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 32px 16px; background: var(--paper); overflow-y: auto; }
.gate__card { display: grid; justify-items: center; gap: 14px; inline-size: 100%; max-inline-size: 440px; padding: 40px 32px 32px; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), var(--shadow); text-align: center; }
.gate__card .mark { margin-block-end: 6px; }
.gate__seal .i { inline-size: 56px; block-size: 56px; }
.gate__card h1 { font: 700 28px/1.2 var(--f-text); letter-spacing: -0.015em; text-wrap: balance; }
.gate__card > p { color: var(--ink-2); font-size: 15px; max-inline-size: 34ch; }
.gate__card .notice, .gate__card .error { inline-size: 100%; padding: 10px 14px; border-radius: var(--r); font-size: 14px; text-align: start; }
.gate__card .notice { background: var(--paper-2); color: var(--ink); }
.gate__card .error { background: color-mix(in oklch, var(--danger) 10%, var(--sheet)); color: var(--danger); }
.gate__actions, .gate__wait, .gate__retry { inline-size: 100%; min-block-size: 96px; display: grid; gap: 10px; align-content: center; }
.gate__actions .btn, .gate__retry .btn, #entry-retry { min-block-size: 46px; font-size: 15px; }
#entry-retry { inline-size: 100%; margin-block-start: 6px; }
.gate:not([data-state="ready"]) .gate__actions, .gate:not([data-state="wait"]) .gate__wait, .gate:not([data-state="logout"]) .gate__retry { display: none; }
.gate__wait p { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2); font-weight: 600; }
.gate__foot { font-size: 12.5px; color: var(--ink-3); }
.soon { display: inline-flex; align-items: center; min-block-size: 20px; padding: 0 8px; border-radius: 999px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.nav-item .soon { margin-inline-start: auto; }
.letter__body--frame { min-block-size: 240px; }
.letter__body--frame iframe { display: block; inline-size: 100%; min-block-size: 60vh; border: 0; border-radius: var(--r); background: #fff; }
.letter__text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: 400 16px/1.65 var(--f-text); }
.more { display: flex; margin: 14px auto; }
.muted { color: var(--ink-3); }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stub { display: grid; gap: 10px; padding: 22px; border-radius: 10px; background: var(--paper-2); }
.stub b { font: 700 17px/1.3 var(--f-text); }
.stub p { font-size: 14px; color: var(--ink-2); max-inline-size: 60ch; }
.stub ul { margin: 0; padding-inline-start: 1.2em; font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }
.field-row { display: flex; gap: 8px; }
.compose .callout { margin: 16px 24px 0; }
.center-link { justify-self: center; }
.list-hint { font-size: 12.5px; color: var(--ink-3); padding: 0 4px; }
.choice-row--2 { grid-template-columns: repeat(2, 1fr); }
.density-card .lines { gap: 12px; }
.density-card--airy .lines { gap: 18px; }
.density-card--compact .lines { gap: 7px; }
/* Selection box: an 18px square inside the 30px avatar spot; the avatar steps aside while choosing. */
.pick__box { inset: 6px; border-radius: 5px; }
.pick__box .i { inline-size: 13px; block-size: 13px; }
.pick .ava { transition: opacity .12s; }
.row:hover .pick .ava, .pick:has(input:checked) .ava, .pick:has(input:focus-visible) .ava { opacity: 0; }
.list__bar .pick { inline-size: 26px; block-size: 26px; }
.list__bar .pick__box { inset: 4px; }
/* Segmented controls in panels (instead of native selects). */
.pcard .row-set--stack { display: grid; gap: 8px; justify-content: stretch; }
.pcard .seg { display: flex; inline-size: 100%; }
.pcard .seg button { flex: 1; justify-content: center; }
/* Reader: "Ещё" menu and the newsletter line. */
.reader-more { inset-inline-end: 0; inset-block-start: calc(100% + 6px); inline-size: 340px; }
.reader-more .pop__item { white-space: nowrap; }
.pop__item .soon { margin-inline-start: auto; }
.letter__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-block: -6px 18px; padding: 10px 12px; border-radius: var(--r); background: var(--paper-2); font-size: 13.5px; color: var(--ink-2); }
.letter__list .btn { margin-inline-start: auto; }
/* Pending rows: placeholders while the preview decrypts. */
.row--pending .row__from::before, .row--pending .row__subject::before { content: ""; display: inline-block; block-size: 10px; border-radius: 4px; background: var(--line); vertical-align: middle; }
.row--pending .row__from::before { inline-size: 55%; }
.row--pending .row__subject::before { inline-size: 220px; max-inline-size: 100%; }
@media (prefers-reduced-motion: no-preference) { .row--pending .row__from::before, .row--pending .row__subject::before { animation: pending 1.2s ease-in-out infinite alternate; } }
@keyframes pending { to { opacity: .45; } }
.pcard .soon, .stub .soon { justify-self: start; }
.empty .soon { justify-self: center; }

/* ---------- Liveliness pass (04.11.2026) ---------- */
/* Brand mark: the courier pigeon next to the name. */
.mark { align-items: center; gap: 9px; }
.mark__logo { inline-size: 34px; block-size: 34px; flex: none; }
.mark__text { display: inline-flex; align-items: baseline; gap: 5px; }
.mark__product { margin-inline-start: 0; color: var(--brand); }
.mark__product::before { display: none; }
.rail__top { padding-inline-start: 4px; }

/* Gate: the same backdrop and card as the account sign-in page (mail-ui.css), so landing → this short bootstrap →
   the form reads as one sign-in page loading, not three pages. The pigeon greets on the locked screen only. */
.gate {
  background:
    radial-gradient(900px 600px at 85% -10%, rgb(73 140 255 / .45), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgb(36 99 214 / .35), transparent 60%),
    linear-gradient(170deg, #0f3a90 0%, #0a2257 100%);
}
.gate__card { max-inline-size: 400px; border-radius: 16px; box-shadow: 0 2px 6px rgb(5 20 60 / .12), 0 30px 80px -20px rgb(3 14 45 / .55); }
.gate[data-state="wait"] .gate__mascot { display: none; }
.gate__mascot { inline-size: 168px; block-size: 168px; margin-block: -6px -10px; }
@media (prefers-reduced-motion: no-preference) {
  .gate__mascot { animation: float 5s ease-in-out infinite; }
  @keyframes float { 50% { translate: 0 -6px; } }
}

/* Initials in six soft tones; colour is decoration, the name stays in text. */
.ava--t0 { background: oklch(93% 0.04 255); color: oklch(38% 0.13 262); box-shadow: none; }
.ava--t1 { background: oklch(93.5% 0.045 185); color: oklch(38% 0.08 190); box-shadow: none; }
.ava--t2 { background: oklch(94% 0.05 145); color: oklch(38% 0.09 150); box-shadow: none; }
.ava--t3 { background: oklch(95% 0.06 85); color: oklch(42% 0.09 70); box-shadow: none; }
.ava--t4 { background: oklch(94% 0.04 20); color: oklch(42% 0.12 20); box-shadow: none; }
.ava--t5 { background: oklch(94% 0.04 300); color: oklch(40% 0.12 300); box-shadow: none; }
:root[data-theme="night"] [class*="ava--t"] { filter: brightness(.5) saturate(1.4); color: oklch(95% 0.02 255); }

/* List header: title + today's date, and a pill for new letters. */
.list__heading { display: grid; line-height: 1.1; }
.list__date { font-size: 12.5px; color: var(--ink-3); }
.list__date::first-letter { text-transform: uppercase; }
.new-pill { display: inline-flex; align-items: center; min-block-size: 22px; padding: 0 9px; border-radius: 999px; background: var(--brand); color: var(--on-ink); font-size: 12px; font-weight: 700; }
.list-end { padding: 22px 20px 40px; text-align: center; font-size: 13px; color: var(--ink-3); }
.list-end::before { content: ""; display: block; inline-size: 36px; block-size: 3px; margin: 0 auto 12px; border-radius: 2px; background: var(--line-2); }

/* Rows: unread letters sit on white with a blue edge; hover lifts gently. */
.row { transition: background-color .15s; }
.row--unread { background: var(--sheet); }
.row--unread::after { inset-inline-start: 0; inset-block: 10px; translate: none; inline-size: 3px; block-size: auto; border-radius: 0 3px 3px 0; background: var(--brand); }
.row[aria-current="true"]::before { background: var(--brand); }
.row:hover { background: var(--wax-tint); }

/* Mascots in empty states, the addresses page and the security panel. */
.mascot { display: block; block-size: auto; }
.empty__mascot { inline-size: 150px; margin-block-end: -4px; }
.page__head--art { grid-template-columns: 1fr auto; position: relative; }
.page__mascot { grid-column: 2; grid-row: 1 / span 2; inline-size: 132px; }
.panel__hero { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 4px 4px 6px; }
.panel__mascot { inline-size: 72px; }
.panel__hero p { font-size: 13px; color: var(--ink-2); }
.stub--art { grid-template-columns: 96px 1fr; column-gap: 18px; align-items: center; }
.stub--art .stub__mascot { grid-row: 1 / span 4; inline-size: 96px; }
.stub--art > :not(.stub__mascot) { grid-column: 2; }

/* "Скоро" reads as a quiet note, not as a button. */
.soon { min-block-size: 0; padding: 0; background: none; box-shadow: none; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.soon::before { content: ""; display: inline-block; inline-size: 5px; block-size: 5px; margin-inline-end: 5px; border-radius: 50%; background: var(--seal); vertical-align: 1px; }
.nav-item--ghost { color: var(--ink-3); }
.nav-item--ghost .nav-item__name { color: var(--ink-2); }
.rail__trust { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border-radius: var(--r); background: var(--sheet); box-shadow: 0 0 0 1px var(--line); font-size: 12px; line-height: 1.4; color: var(--ink-2); }
.rail__trust .i { inline-size: 15px; block-size: 15px; color: var(--brand); margin-block-start: 1px; }

/* Motion: list ↔ letter crossfade with a short slide; toasts rise. All off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
  .letter { animation: letter-in .22s cubic-bezier(.2, .8, .2, 1); }
  @keyframes letter-in { from { opacity: 0; translate: 0 8px; } }
  .row__star[aria-pressed="true"] .i { animation: pop .3s ease-out; }
  @keyframes pop { 50% { scale: 1.3; } }
}

/* ---------- Open letter as a card (04.11.2026) ---------- */
.letter--card .letter__subject { margin-block-end: 16px; }
.msg { border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line), 0 1px 2px oklch(20% 0.03 262 / .04); overflow: clip; }
.msg__head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 18px 18px 6px; }
.msg__ava { inline-size: 44px; block-size: 44px; border-radius: 12px; font-size: 16px; }
.msg__who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 0; align-items: baseline; }
.msg__who dt { font-size: 13px; color: var(--ink-3); }
.msg__who dd { margin: 0; min-inline-size: 0; overflow-wrap: anywhere; font-size: 14px; }
.msg__who dd b { font-size: 15px; }
.msg__who dd .addr, .msg__who dd.addr { color: var(--brand); }
.msg__who dd.addr { color: var(--ink-2); }
.msg__side { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.msg__where { display: inline-flex; align-items: center; gap: 5px; margin-inline: 4px; }
.msg__where .i { inline-size: 15px; block-size: 15px; }
.msg__more .i { transition: rotate .15s; }
.msg__more[aria-expanded="true"] .i { rotate: 180deg; }
.msg__details { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 6px 18px 4px 76px; padding: 12px 14px; border-radius: var(--r); background: var(--paper-2); font-size: 13px; }
.msg__details[hidden] { display: none; }
.msg__details dt { color: var(--ink-3); }
.msg__details dd { margin: 0; overflow-wrap: anywhere; }
.msg__tools { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px 14px; border-block-end: 1px solid var(--line); }
.tool-group { display: inline-flex; align-items: center; padding: 2px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.tool-group > .icon-btn, .tool-group > .pop-wrap > .icon-btn { border-radius: 8px; }
.tool-group > * + *::before { content: ""; }
.msg__hint { display: grid; grid-template-columns: 20px 1fr; gap: 10px; margin: 12px 18px 0; padding: 12px 14px; border-radius: var(--r); background: var(--warn-tint); font-size: 13.5px; }
.msg__hint .i { color: var(--warn); }
.msg__hint p { color: var(--ink-2); margin-block-start: 2px; }
.msg .letter__list { margin: 12px 18px 0; }
.msg .letter__body--frame { padding: 18px; }
.msg .files { padding: 0 18px 18px; margin: 0; }
.letter--card .reply { margin-block-start: 18px; }
.pop__item--danger, .pop__item--danger .i { color: var(--danger); }

/* Reading shield: a count of blocked trackers, details in a popover. */
.shield { display: inline-flex; align-items: center; gap: 3px; min-block-size: 30px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--wax-tint); color: var(--brand); font: 700 12.5px var(--f-ui); cursor: pointer; }
.shield .i { inline-size: 17px; block-size: 17px; }
.shield--found { background: var(--brand); color: var(--on-ink); }
.shield-pop { inset-inline-end: 0; inset-block-start: calc(100% + 8px); inline-size: 320px; display: grid; justify-items: center; gap: 8px; padding: 18px; text-align: center; white-space: normal; color: var(--ink); }
.shield-pop b { font: 700 17px/1.3 var(--f-text); }
.shield-pop p { font-size: 13px; color: var(--ink-2); }
.shield-pop__mascot { inline-size: 96px; }
.shield-pop__head { display: flex; align-items: center; gap: 8px; color: var(--brand); }
.shield-pop__head b { color: var(--ink); }
.shield-pop__list { list-style: none; margin: 0; padding: 0; inline-size: 100%; display: grid; gap: 4px; text-align: start; }
.shield-pop__list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 6px; background: var(--paper-2); font-size: 13px; }
.shield-pop__facts { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; inline-size: 100%; margin: 4px 0 0; padding-block-start: 10px; border-block-start: 1px solid var(--line); font-size: 12.5px; text-align: start; }
.shield-pop__facts dt { color: var(--ink-3); }
.shield-pop__facts dd { margin: 0; text-align: end; }

/* Headers / HTML source viewer. */
.source { inline-size: min(860px, calc(100vw - 32px)); }
.source__text { max-block-size: 70vh; margin: 0; padding: 16px 24px 24px; overflow: auto; font: 12.5px/1.55 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }

/* Print: only the letter. */
@media print {
  .rail, .top, .strip, .panel, .reader__bar, .msg__tools, .msg__side, .reply, .margin, .toasts, .list { display: none !important; }
  .app { display: block; block-size: auto; }
  .mail, .reader { display: block !important; overflow: visible; }
  .letter { display: block; padding: 0; }
  .msg { box-shadow: none; }
  .letter__body--frame iframe { min-block-size: 0; }
}
@media (max-width: 760px) {
  .msg__head { grid-template-columns: 36px 1fr; }
  .msg__side { grid-column: 1 / -1; justify-content: flex-end; }
  .msg__details { margin-inline-start: 18px; grid-template-columns: 110px 1fr; }
}
.letter--card { grid-template-columns: minmax(0, 860px) minmax(190px, 230px); }
@container reader (max-width: 900px) { .letter--card { grid-template-columns: minmax(0, 1fr); } }

/* Long links: the renderer lists the letter's links under the frame; full URLs wrap inside a quiet block. */
.letter__body--frame { min-inline-size: 0; overflow-wrap: anywhere; }
.letter__body--frame > p { margin: 16px 0 6px; font: 600 13px/1.4 var(--f-ui); color: var(--ink-2); }
.letter__body--frame > ul { display: grid; gap: 6px; margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--paper-2); list-style: none; }
.letter__body--frame > ul li { min-inline-size: 0; }
.letter__body--frame > ul a { font: 12.5px/1.45 var(--f-mono); color: var(--brand); overflow-wrap: anywhere; word-break: break-all; text-decoration-color: color-mix(in oklch, var(--brand) 35%, transparent); }
.letter__text, .letter__body { overflow-wrap: anywhere; }

/* ---------- Sending and Sent (TASK-078) ---------- */
.ava--out { background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.ava--out .i { inline-size: 16px; block-size: 16px; }
.msg__ava.ava--out .i { inline-size: 20px; block-size: 20px; }
.row:hover .pick--out .ava { opacity: 1; }
.pick--out { cursor: inherit; }
.row--out .row__from { color: var(--ink-2); }
.row__to .spin { inline-size: 10px; block-size: 10px; }
.msg .delivery { margin: 8px 18px 4px; }
.delivery__row .addr { min-inline-size: 0; overflow-wrap: anywhere; }
.delivery__row--ok .delivery__state .i { color: var(--ink-2); }
.delivery__hint .link { font-size: 12.5px; }
.delivery__hint .link:disabled { color: var(--ink-3); text-decoration: none; }
.from-btn--static { cursor: default; }
.from-btn--static:hover { background: none; }
.from-btn--static .addr { color: var(--ink); }
.compose .compose__notice { margin: 16px 24px 4px; }
.cresult:empty { display: none; }
.cresult { padding: 12px 16px 0 24px; border-block-start: 1px solid var(--line); background: var(--paper); }
.compose .cresult .callout { margin: 0; }
.cresult .callout b, .compose__notice b { grid-column: 2; }
.cfile__name { max-inline-size: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose--frozen .csubject, .compose--frozen .cbody, .compose--frozen .rcp { color: var(--ink-2); }
.compose--frozen .rcp { padding-inline-end: 8px; }
.spin--on-ink { border-color: color-mix(in oklch, var(--on-ink) 35%, transparent); border-inline-end-color: var(--on-ink); }
.sheet__foot .btn[hidden] { display: none; }
.compose .cmode { grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.compose .cmode__line { display: contents; }
.mode--test { color: var(--warn); }
.cresult:not(:empty) + .sheet__foot { border-block-start: 0; }

/* ---------- Night theme contrast pass ---------- */
/* Toasts are always a dark chip with light text, in both themes. */
.toast { background: oklch(24% 0.03 262); color: oklch(97% 0.008 255); box-shadow: 0 0 0 1px oklch(100% 0 0 / .08), var(--shadow); }
.toast button { color: oklch(97% 0.008 255); }
:root[data-theme="night"] .toast { background: oklch(30% 0.035 262); }
/* Filled chips use the brand colour, which keeps white text readable in both themes. */
.badge, .btn--wax { background: var(--brand); }
.btn--wax:hover { background: var(--brand-2); }
/* Accent text on dark paper: the lighter blue. */
:root[data-theme="night"] :is(.mark__product, .msg__who dd .addr, .letter__body--frame > ul a, .shield, .shield-pop__head, .rail__trust .i, .link) { color: var(--wax); }
:root[data-theme="night"] .letter__body--frame > ul a { text-decoration-color: color-mix(in oklch, var(--wax) 40%, transparent); }
:root[data-theme="night"] .shield--found { background: var(--brand); color: var(--on-ink); }
:root[data-theme="night"] .new-pill, :root[data-theme="night"] .nav-item__count--strong { background: var(--brand); color: var(--on-ink); }
:root[data-theme="night"] .soon::before { background: oklch(80% 0.15 100); }
:root[data-theme="night"] .msg__hint, :root[data-theme="night"] .callout { color: var(--ink); }
/* Night initials: dark tints with light letters (no filter, which also dimmed the letters). */
:root[data-theme="night"] [class*="ava--t"] { filter: none; }
:root[data-theme="night"] .ava--t0 { background: oklch(32% 0.07 262); color: oklch(88% 0.06 255); }
:root[data-theme="night"] .ava--t1 { background: oklch(32% 0.05 190); color: oklch(88% 0.06 190); }
:root[data-theme="night"] .ava--t2 { background: oklch(32% 0.05 150); color: oklch(88% 0.07 150); }
:root[data-theme="night"] .ava--t3 { background: oklch(34% 0.05 80); color: oklch(90% 0.07 85); }
:root[data-theme="night"] .ava--t4 { background: oklch(32% 0.06 20); color: oklch(88% 0.06 20); }
:root[data-theme="night"] .ava--t5 { background: oklch(32% 0.06 300); color: oklch(88% 0.06 300); }
/* Fill on press is for the star only; panel buttons keep an outline icon. */
.icon-btn[data-panel-btn][aria-pressed="true"] { color: var(--ink); }
.icon-btn[data-panel-btn][aria-pressed="true"] .i { fill: none; }

/* ---------- Aliases manager (#addresses), Proton-like layout over Codex's manager.js markup (05.11.2026) ---------- */
#addresses .page__wrap { max-inline-size: 1000px; }
#addresses .maker { grid-template-columns: minmax(0, 1fr) 250px; margin-block: 20px 28px; }
#addresses form.maker__main { display: flex; flex-wrap: wrap; gap: 12px 0; align-content: start; }
#addresses form.maker__main > * { flex: 0 0 100%; min-inline-size: 0; }
#addresses .maker__title h2 { font: 700 19px/1.25 var(--f-text); }
#addresses .maker__row { display: grid; gap: 12px; }
#addresses #alias-prefix-help { margin-block-start: -4px; font-size: 12.5px; color: var(--ink-3); }
#addresses .field:has(> [data-alias-field="domain"]) { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
#addresses .field:has(> [data-alias-field="domain"]) > span { font-size: 13px; color: var(--ink-3); font-weight: 500; }
#addresses [data-alias-field="domain"] { inline-size: auto; justify-self: start; min-block-size: 34px; }
/* The ready address, big, with "Другой вариант" sitting in the same panel. */
#addresses .field:has(> [data-alias-field="preview"]) { flex: 1 1 0; display: grid; gap: 4px; padding: 14px 16px; border-radius: 10px 0 0 10px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: inset(0 0 0 0); }
#addresses .field:has(> [data-alias-field="preview"]) > span { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
#addresses [data-alias-field="preview"] { font: 500 clamp(17px, 2vw, 22px)/1.25 var(--f-mono); letter-spacing: -0.02em; color: var(--brand); overflow-wrap: anywhere; }
#addresses div:has(> [data-alias-field="generate"]) { flex: none; display: grid; place-items: center; padding-inline: 12px; border-radius: 0 10px 10px 0; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); margin-inline-start: -1px; }
#addresses [data-alias-field="generate"] { white-space: nowrap; }
#addresses .field:has(> [data-alias-field="delivery"]) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-block-start: -4px; font-size: 13px; color: var(--ink-3); }
#addresses .field:has(> [data-alias-field="delivery"]) > span { font-weight: 500; }
#addresses .field:has(> [data-alias-field="delivery"]) > span::before { content: "→ "; }
#addresses [data-alias-field="delivery"] { color: var(--ink); }
#addresses .maker__foot { margin-block-start: 4px; }
#addresses .maker__foot .btn { min-block-size: 42px; padding-inline: 20px; }
#addresses [data-alias-field="status"], #addresses [data-alias-field="created"] { font-size: 13px; color: var(--ink-2); }
#addresses [data-alias-field="status"]:empty, #addresses [data-alias-field="created"]:empty { display: none; }
#addresses [data-alias-field="created"]:not(:empty) { padding: 10px 12px; border-radius: var(--r); background: var(--wax-tint); color: var(--ink); font-weight: 600; }
#addresses .maker__side .note__head { font-size: 13px; }

/* The list: one card, one row per alias. */
#addresses section.sblock[aria-label] { gap: 12px; padding: 0; margin: 0 0 14px; border: 0; }
#addresses .ledger__tools { margin: 0; }
#addresses [data-alias-field="items"] { display: grid; border-radius: 12px; background: var(--sheet); box-shadow: 0 0 0 1px var(--line); overflow: clip; }
#addresses [data-alias-field="items"]:empty { display: none; }
#addresses [data-alias-field="items"] > section { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; margin: 0; padding: 12px 14px 12px 16px; border: 0; border-block-end: 1px solid var(--line); }
#addresses [data-alias-field="items"] > section:last-child { border-block-end: 0; }
#addresses [data-alias-field="items"] > section:hover { background: var(--paper); }
#addresses [data-alias-field="items"] > section::before { content: "@"; display: grid; place-items: center; inline-size: 38px; block-size: 38px; border-radius: 10px; background: var(--wax-tint); color: var(--brand); font: 700 16px/1 var(--f-mono); }
#addresses [data-alias-field="items"] .field { display: grid; gap: 1px; min-inline-size: 0; }
#addresses [data-alias-field="items"] .field b { font-size: 14.5px; font-weight: 600; }
#addresses [data-alias-field="items"] .field code { font: 13px/1.4 var(--f-mono); color: var(--ink-2); overflow-wrap: anywhere; }
#addresses [data-alias-field="items"] .field span { font-size: 12px; color: var(--ink-3); }
#addresses [data-alias-field="items"] .actions-row { flex-wrap: nowrap; gap: 2px; }
#addresses [data-alias-field="items"] .actions-row .btn { min-block-size: 30px; padding: 0 10px; background: none; box-shadow: none; color: var(--ink-2); font-size: 13px; }
#addresses [data-alias-field="items"] .actions-row .btn:hover { background: var(--hover); color: var(--ink); }
#addresses [data-alias-field="items"] .actions-row .btn:first-child { color: var(--brand); }
#addresses [data-alias-field="items"] .actions-row .btn:nth-child(3) { color: var(--danger); }
/* A deleted alias keeps only "copy": show it quieter and struck through. */
#addresses [data-alias-field="items"] > section:has(.actions-row > :only-child) { opacity: .6; }
#addresses [data-alias-field="items"] > section:has(.actions-row > :only-child) code { text-decoration: line-through; }
#addresses [data-alias-field="items"] > section:has(.actions-row > :only-child)::before { background: var(--paper-2); color: var(--ink-3); }
#addresses [data-alias-field="more"] { justify-self: center; }
#addresses section.sblock[aria-label] + p { font-size: 13px; color: var(--ink-3); }
@media (max-width: 760px) {
  #addresses .maker { grid-template-columns: minmax(0, 1fr); }
  #addresses [data-alias-field="items"] > section { grid-template-columns: 38px minmax(0, 1fr); }
  #addresses [data-alias-field="items"] .actions-row { grid-column: 2; flex-wrap: wrap; }
}
:root[data-theme="night"] #addresses [data-alias-field="preview"], :root[data-theme="night"] #addresses [data-alias-field="items"] > section::before, :root[data-theme="night"] #addresses [data-alias-field="items"] .actions-row .btn:first-child { color: var(--wax); }

/* ---------- Quick aliases: Security panel block and the "Новый алиас" dialog (05.11.2026) ---------- */
.aq-panel { display: grid; gap: 6px; }
.aq-panel .mini-alias { grid-template-columns: 30px 1fr auto; }
.aq-at { grid-row: span 2; display: grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px; background: var(--wax-tint); color: var(--brand); font: 700 14px/1 var(--f-mono); }
.aq-panel__note { font-size: 13px; color: var(--ink-2); }
.aq-panel__skel { display: grid; gap: 6px; }
.aq-panel__skel i { display: block; block-size: 50px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
@media (prefers-reduced-motion: no-preference) { .aq-panel__skel i { animation: pending 1.2s ease-in-out infinite alternate; } }
.aq-panel__actions { display: grid; gap: 8px; justify-items: center; }
.aq-panel__actions .btn { inline-size: 100%; }

.aq { inline-size: min(520px, calc(100vw - 24px)); max-block-size: calc(100vh - 24px); margin: auto; padding: 0; border: 0; border-radius: 18px; background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 40px 100px -30px oklch(20% 0.05 262 / .55); overflow: auto; }
.aq::backdrop { background: oklch(20% 0.04 262 / .32); }
.aq[open] { animation: aq-in .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes aq-in { from { opacity: 0; translate: 0 10px; scale: .98; } }
@media (prefers-reduced-motion: reduce) { .aq[open] { animation: none; } }
.aq__close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.aq__form, .aq__done { display: grid; gap: 14px; padding: 26px 28px 22px; }
.aq__mascot { justify-self: center; inline-size: 112px; block-size: auto; margin-block: -6px -8px; }
.aq h2 { text-align: center; font: 700 26px/1.15 var(--f-text); letter-spacing: -0.015em; }
.aq__lead { margin-block-start: -6px; text-align: center; font-size: 14px; color: var(--ink-2); text-wrap: balance; }
.aq__field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.aq__field .input { min-block-size: 44px; font-size: 15px; }
.aq__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: -6px; }
.aq__chips .chip { min-block-size: 28px; font-size: 12.5px; }
.aq__card { display: grid; gap: 8px; padding: 14px 16px 16px; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.aq__card--stale { box-shadow: inset 0 0 0 1px var(--warn); }
.aq__cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.aq__cap .btn { min-block-size: 28px; color: var(--brand); }
/* The address reads as one line; the prefix is typed right inside it. */
.aq__addr { display: flex; flex-wrap: wrap; align-items: baseline; min-block-size: 40px; font: 500 clamp(18px, 4vw, 22px)/1.35 var(--f-mono); letter-spacing: -0.02em; color: var(--ink); overflow-wrap: anywhere; }
.aq__prefix { inline-size: 7ch; min-inline-size: 3ch; padding: 0 2px; border: 0; border-block-end: 2px dashed color-mix(in oklch, var(--brand) 55%, transparent); border-radius: 0; background: none; outline: none; font: inherit; letter-spacing: inherit; color: var(--brand); }
.aq__prefix::placeholder { color: var(--ink-3); font-style: italic; }
.aq__prefix:focus { border-block-end-style: solid; border-block-end-color: var(--brand); }
.aq__prefix[aria-invalid="true"] { border-block-end-color: var(--danger); color: var(--danger); }
.aq__addr--plain .aq__dot { display: none; }
.aq__base, .aq__dom, .aq__at { color: var(--ink); }
.aq__at, .aq__dom { color: var(--ink-2); }
.aq__domain { padding: 0 2px; border: 0; background: none; font: inherit; letter-spacing: inherit; color: var(--ink-2); cursor: pointer; }
.aq__wait { display: inline-flex; align-items: center; gap: 10px; font: 500 14px var(--f-ui); color: var(--ink-3); }
.aq__help { font-size: 12.5px; color: var(--ink-3); }
.aq__help[data-bad="true"] { color: var(--danger); }
.aq__to { display: flex; align-items: center; gap: 6px; padding-block-start: 8px; border-block-start: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.aq__to .i { inline-size: 15px; block-size: 15px; color: var(--ink-3); }
.aq__to .addr { color: var(--ink); }
.aq__status { min-block-size: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.aq__status:empty { display: none; }
.aq__status[data-kind="error"], .aq__status[data-kind="retry"], .aq__status[data-kind="login"] { padding: 10px 12px; border-radius: var(--r); background: var(--warn-tint); color: var(--ink); text-align: start; }
.aq__status[data-kind="ok"] { color: var(--ok); font-weight: 600; }
.aq__foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.aq__foot .btn { min-block-size: 46px; font-size: 15px; }
.aq__foot--center { grid-template-columns: 1fr 1fr; }
/* Success: a big confirmed address, one tap copies it again. */
.aq__done { justify-items: center; text-align: center; padding-block-start: 34px; }
.aq__check { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; background: var(--ok-tint); color: var(--ok); }
.aq__check .i { inline-size: 32px; block-size: 32px; stroke-width: 2.4; }
@media (prefers-reduced-motion: no-preference) { .aq__check { animation: pop .35s ease-out; } }
.aq__result { display: inline-flex; align-items: center; gap: 10px; max-inline-size: 100%; padding: 14px 16px; border: 0; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 clamp(17px, 4vw, 21px)/1.3 var(--f-mono); letter-spacing: -0.02em; color: var(--brand); cursor: copy; }
.aq__result .addr { font: inherit; overflow-wrap: anywhere; text-align: start; }
.aq__result .i { flex: none; color: var(--ink-3); }
.aq__result:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.aq__hint { font-size: 13.5px; color: var(--ink-2); max-inline-size: 40ch; }
.aq__done .aq__foot { inline-size: 100%; }
:root[data-theme="night"] :is(.aq-at, .aq__prefix, .aq__cap .btn, .aq__result) { color: var(--wax); }
:root[data-theme="night"] .aq__check { background: oklch(32% 0.06 150); }

/* ---------- Usability pass (05.11.2026) ---------- */
/* Primary action bars show only what works; "скоро" actions live in "Ещё" and the rail. */
.reader__bar [data-soon], .msg__tools .tool-group > [data-soon], .list__bar [data-soon], .row__star[data-soon] { display: none; }
.reader__bar .sep + .sep, .reader__bar .sep:has(+ .grow) { display: none; }
@container list (min-width: 721px) { .row:has(> .row__star[data-soon]) { grid-template-columns: 34px minmax(120px, 210px) minmax(0, 1fr) auto 70px; } }
.fab { display: none; }

/* Phone and narrow windows: one column, nothing off-screen, compose always at hand. */
@media (max-width: 980px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .strip, .panel { grid-area: auto; }
  .strip { display: none; }
  .panel { position: fixed; inset: 0 0 0 auto; z-index: 45; inline-size: min(380px, 100vw); box-shadow: var(--shadow); }
  .top { gap: 6px; padding: 0 8px; }
  .search { min-inline-size: 0; }
  .search__box kbd { display: none; }
  .top__actions { gap: 0; }
  .top-btn { padding: 0 8px; }
  .top-btn span:not(.badge), .acct__text, .top__actions > [data-panel-btn="settings"] { display: none; }
  .acct { padding: 4px; }
  .app[data-rail="open"]::after { content: ""; position: fixed; inset: 0; z-index: 35; background: oklch(20% 0.04 262 / .35); }
  .rail { z-index: 40; }
  .fab { position: fixed; inset-inline-end: 16px; inset-block-end: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-block-size: 52px; padding: 0 20px 0 16px; border: 0; border-radius: 16px; background: var(--brand); color: var(--on-ink); font: 600 15px var(--f-ui); box-shadow: 0 10px 30px -10px oklch(30% 0.12 262 / .6); }
  .fab .i { inline-size: 20px; block-size: 20px; }
  body:has(#mail[hidden]) .fab, body:has(#mail[data-pane="reader"]) .fab, body:has(#app[hidden]) .fab, body:has(dialog[open]) .fab { display: none; }
  .rows { padding-block-end: 88px; }
  .reader__bar { gap: 0; padding: 8px 10px; }
  .reader__bar .reader__pos { display: none; }
  .msg__tools { flex-wrap: wrap; padding-inline: 12px; }
  .msg__head { padding-inline: 14px; }
  .letter { padding: 18px 12px 60px; }
  .letter__subject { font-size: 22px; }
  .list__bar { gap: 8px; padding-inline: 10px; }
  .list__bar .tabs { order: 3; inline-size: 100%; }
}
@media (max-width: 420px) {
  .aq__form, .aq__done { padding: 22px 18px 18px; }
  .aq h2 { font-size: 23px; }
  .aq__foot, .aq__foot--center { grid-template-columns: 1fr; }
}
@media (max-width: 980px) { .btn kbd { display: none; } }
@media (max-width: 420px) { .aq__addr { font-size: clamp(14px, 4.1vw, 18px); } .aq__mascot { inline-size: 92px; } }

/* ---------- Rail: working folders in front, everything not ready in one collapsed "Скоро" group (05.11.2026) ---------- */
#folders li:has(> a[href="#f/drafts"], > a[href="#f/starred"], > a[href="#f/archive"], > a[href="#f/spam"], > a[href="#f/all"], > [data-more]) { display: none; }
.rail__group:has(#rail-views, #rail-folders, #rail-labels) { display: none; }
.rail__group--soon .rail__head { padding-inline-end: 10px; }
.rail__count { min-inline-size: 20px; padding: 0 6px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-align: center; }
.rail__group--soon .nav-item { color: var(--ink-3); }
.rail__group--soon .nav-item[aria-current="true"] { color: var(--ink); }

/* ---------- Loading skeletons (05.11.2026) ----------
   The shell is on screen first; the list shows grey rows in the real row grid, the letter a grey card. Letters replace
   them in place and fade in, so nothing jumps. Bars use --line, so the night theme follows. */
.skel { display: contents; }
.row--skel { cursor: default; pointer-events: none; }
.row--skel:hover { background: var(--paper); }
.row--pending .row__from::before, .row--pending .row__subject::before,
.row--skel .row__snippet::before, .row--skel .row__date::before { block-size: 12px; border-radius: 6px; }
.row--skel .row__snippet::before, .row--skel .row__date::before { content: ""; display: inline-block; vertical-align: middle; background: var(--line); }
.row--skel .row__snippet::before { inline-size: min(320px, 70%); opacity: .6; }
.row--skel .row__date::before { inline-size: 42px; }
.row--pending .pick .ava, .row--skel .pick .ava { background: var(--line); box-shadow: none; }
.row--skel:nth-child(3n + 2) .row__from::before { inline-size: 42%; }
.row--skel:nth-child(3n + 2) .row__subject::before { inline-size: 160px; }
.row--skel:nth-child(3n + 3) .row__from::before { inline-size: 66%; }
.row--skel:nth-child(3n + 3) .row__subject::before { inline-size: 260px; }
.row--skel:nth-child(2n) .row__snippet::before { inline-size: min(220px, 50%); }
/* Opened letter while it is being read and decrypted (the reader holds only a spinner then). */
#reader > .reader__empty:has(> .spin:only-child) { display: grid; grid-template-columns: minmax(0, 66ch) minmax(190px, 230px); align-content: start; justify-content: center; justify-items: stretch; gap: 0 36px; padding: 84px 32px 80px; text-align: start; }
#reader > .reader__empty:has(> .spin:only-child) > .spin { display: none; }
#reader > .reader__empty:has(> .spin:only-child)::before {
  content: ""; grid-column: 1; block-size: 26px; margin-block: 0 22px;
  background: linear-gradient(var(--line) 0 0) 0 0 / min(420px, 60%) 100% no-repeat;
}
#reader > .reader__empty:has(> .spin:only-child)::after {
  content: ""; grid-column: 1; block-size: 300px; border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line);
  background:
    radial-gradient(circle at 22px 22px, var(--line) 21px, transparent 22px) 18px 18px / 44px 44px no-repeat,
    linear-gradient(var(--line) 0 0) 76px 22px / 180px 12px no-repeat,
    linear-gradient(var(--line) 0 0) 76px 44px / 240px 10px no-repeat,
    linear-gradient(var(--line) 0 0) 18px 92px / calc(100% - 36px) 1px no-repeat,
    linear-gradient(var(--line) 0 0) 18px 124px / 86% 10px no-repeat,
    linear-gradient(var(--line) 0 0) 18px 148px / 92% 10px no-repeat,
    linear-gradient(var(--line) 0 0) 18px 172px / 78% 10px no-repeat,
    linear-gradient(var(--line) 0 0) 18px 210px / 88% 10px no-repeat,
    linear-gradient(var(--line) 0 0) 18px 234px / 60% 10px no-repeat,
    var(--sheet);
}
@media (prefers-reduced-motion: no-preference) {
  .row--skel .row__snippet::before, .row--skel .row__date::before, .row--pending .pick .ava { animation: pending 1.2s ease-in-out infinite alternate; }
  .row--skel:nth-child(even) *::before, .row--skel:nth-child(even) .ava { animation-delay: .15s; }
  #reader > .reader__empty:has(> .spin:only-child)::before, #reader > .reader__empty:has(> .spin:only-child)::after { animation: pending 1.2s ease-in-out .2s infinite alternate; }
  .row--in { animation: row-in .2s ease-out; }
  @keyframes row-in { from { opacity: 0; } }
}
@media (max-width: 1100px) { #reader > .reader__empty:has(> .spin:only-child) { grid-template-columns: minmax(0, 1fr); padding: 76px 24px 40px; } }
@media (max-width: 980px) { #reader > .reader__empty:has(> .spin:only-child) { padding: 64px 12px 24px; } }

/* Inbox entry in the rail (05.11.2026): the whole line reacts to hover; the refresh button shows on the open Inbox,
   on hover and on keyboard focus, so a closed folder list stays calm. Touch screens always see it. */
.folder-entry:hover { background: var(--hover); }
.folder-entry > .nav-item:hover { background: transparent; }
.folder-entry__refresh { opacity: 0; transition: opacity .12s; }
.folder-entry[data-current="true"] .folder-entry__refresh, .folder-entry:hover .folder-entry__refresh,
.folder-entry:focus-within .folder-entry__refresh, .folder-entry__refresh[aria-busy="true"] { opacity: 1; }
.folder-entry__refresh:disabled { opacity: .6; }
@media (hover: none) { .folder-entry__refresh { opacity: 1; } }

/* «Ещё» in the open letter (05.11.2026): its button sits at the left of the toolbar, so the menu opens to the right of
   it; the card lets an open menu out instead of clipping it at its rounded edge. */
.msg__tools .reader-more { inset-inline-start: 0; inset-inline-end: auto; inline-size: min(340px, calc(100vw - 32px)); }
.msg:has(.msg__tools .pop:not([hidden])) { overflow: visible; }
@media (max-width: 600px) {
  /* On a phone the menu spans the letter toolbar, so it never runs off the screen. */
  .msg__tools { position: relative; }
  .msg__tools .pop-wrap:has(> .reader-more) { position: static; }
  .msg__tools .reader-more { inset-inline: 10px; inline-size: auto; }
}