/* mail.normake.com. Layout: the public page sits open on the normake.com sky; the
   signed-in app fills the window (bar on top, folders | list | message).
   Postal motifs (stamp, postmark) appear only on the public page. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  font-weight: 100 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #f5f7fb;
  --sky: #dde7f4;
  --surface: #ffffff;
  --sunk: #eef2f7;
  --line: #dfe5ee;
  --ink: #151d29;
  --muted: #586578;
  --faint: #8592a3;
  --accent: #a3307f;
  --accent-ink: #ffffff;
  --accent-soft: #f7e7f2;
  --ok: #1d8a52;  --ok-soft: #e2f3e9;
  --warn: #a8620a; --warn-soft: #fbefd9;
  --bad: #c9302c;  --bad-soft: #fbe5e4;
  --star: #d18f00;
  --paper: #fffdf9;
  --postmark: #3b4a66;
  --shadow: 0 1px 2px rgb(16 24 40 / .05), 0 10px 30px -14px rgb(16 24 40 / .22);
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Dark: the system's choice unless the menu picked light, or picked dark
   whatever the system says (data-theme, set by js/theme.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e131a; --sky: #15202f; --surface: #151c25; --sunk: #1a2330; --line: #263243;
    --ink: #e7edf4; --muted: #98a6b8; --faint: #6d7b8e;
    --accent: #e57fc4; --accent-ink: #1c0c17; --accent-soft: #3a1c31;
    --ok: #4fcb8e; --ok-soft: #15322a; --warn: #f2a93b; --warn-soft: #382913; --bad: #ff7a73; --bad-soft: #3d1d1c;
    --star: #f5c34b; --paper: #1b2431; --postmark: #a3b4d0;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .65);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e131a; --sky: #15202f; --surface: #151c25; --sunk: #1a2330; --line: #263243;
  --ink: #e7edf4; --muted: #98a6b8; --faint: #6d7b8e;
  --accent: #e57fc4; --accent-ink: #1c0c17; --accent-soft: #3a1c31;
  --ok: #4fcb8e; --ok-soft: #15322a; --warn: #f2a93b; --warn-soft: #382913; --bad: #ff7a73; --bad-soft: #3d1d1c;
  --star: #f5c34b; --paper: #1b2431; --postmark: #a3b4d0;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 30px -14px rgb(0 0 0 / .65);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font-body); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- brand and buttons ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand svg { width: 34px; height: 34px; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.brand-name span { color: var(--faint); font-weight: 500; }
/* The logo (templates/_icons.html): colours follow the theme. */
.logo-back { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.6; }
.logo-front { fill: var(--accent); }
.logo-v { fill: none; stroke: var(--surface); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 9px 16px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; text-decoration: none; color: var(--ink); }
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); border-color: var(--accent); }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--sunk); border-color: transparent; }
.btn-sm { padding: 5px 10px; font-size: 13px; border-radius: 8px; }
.btn-danger { color: var(--bad); }
.link-btn { font-size: 13px; color: var(--accent); background: none; border: 0; padding: 0; justify-self: start; text-align: left; }
.link-btn:hover { text-decoration: underline; }

/* ---------- form pieces ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: 13px; font-weight: 600; }
.field .optional { color: var(--faint); font-weight: 400; }
.addr { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.addr:focus-within { border-color: var(--accent); }
.addr.locked { background: var(--sunk); }   /* an invite kept for one address (landing.js) */
.addr.locked input { color: var(--ink); cursor: default; }
.addr input { flex: 1; min-width: 0; border: 0; background: none; padding: 10px 12px; font-family: var(--font-mono); outline: none; }
.addr input::placeholder, .input::placeholder { color: var(--faint); }
.addr span { display: flex; align-items: center; padding: 0 12px; font-family: var(--font-mono); color: var(--muted); background: var(--sunk); border-left: 1px solid var(--line); font-size: 14px; }
.input { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); padding: 10px 12px; outline: none; }
/* Password fields: the eye at the right end (js/pwtoggle.js). */
.pw { position: relative; display: block; min-width: 0; }
.pw .input { padding-right: 44px; }
.pw .input::-ms-reveal, .pw .input::-ms-clear { display: none; }   /* Edge's own eye: ours replaces it */
.pw-eye { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px;
  background: none; color: var(--faint); display: grid; place-items: center; padding: 0; cursor: pointer; }
.pw-eye svg { width: 19px; height: 19px; }
.pw-eye:hover { color: var(--ink); background: var(--sunk); }
.pw-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 8px; }
.pw-eye[aria-pressed="true"] { color: var(--accent); }
.input:focus { border-color: var(--accent); }
textarea.input { resize: vertical; min-height: 64px; line-height: 1.5; }
.code-input { font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.note { font-size: 13px; min-height: 20px; display: flex; align-items: center; gap: 6px; margin: 0; }
.note svg { width: 14px; height: 14px; flex: none; }
.note.ok { color: var(--ok); }
.note.bad { color: var(--bad); }
.hint { font-size: 12.5px; color: var(--faint); margin: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.callout { font-size: 13px; color: var(--muted); background: var(--warn-soft); border-radius: 10px; padding: 10px 12px; margin: 0; }
.callout strong { color: var(--ink); }

/* ================= PUBLIC PAGE ================= */
body.public {
  background: linear-gradient(180deg, var(--sky) 0, var(--bg) 420px) no-repeat, var(--bg);
  padding-inline: 16px; padding-block: 24px 48px;
}
/* The same on every public page: the logo and two links, on one line even on a phone. */
.site-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; }
.site-head .brand { min-width: 0; }

.hero { max-width: 1120px; margin: 48px auto 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.02; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-lede { font-size: 1.12rem; color: var(--muted); max-width: 34rem; margin: 18px 0 28px; text-wrap: pretty; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow); max-width: 480px; display: grid; gap: 14px; }
.tabs { display: flex; gap: 4px; background: var(--sunk); padding: 4px; border-radius: 10px; }
.tabs button { flex: 1; border: 0; background: none; padding: 7px 4px; border-radius: 7px; font-size: 14px; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.panel-form { display: grid; gap: 14px; }
.panel-form h2 { margin: 0; font-size: 17px; font-family: var(--font-display); }
/* Passkeys on the sign-in card: "or", then the button with the key. */
.or { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.passkey-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.passkey-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.done { display: grid; gap: 10px; text-align: center; padding: 8px 4px; }
.done .note { justify-content: center; }
.done .ref { font-family: var(--font-mono); font-size: 22px; font-weight: 500; letter-spacing: .06em; background: var(--sunk); border-radius: 10px; padding: 10px; user-select: all; }
.done p { margin: 0; color: var(--muted); font-size: 14px; }
.status-box { background: var(--sunk); border-radius: 10px; padding: 12px; display: grid; gap: 6px; font-size: 14px; }
.status-box .ref { font-family: var(--font-mono); font-size: 18px; user-select: all; }

.letter-stage { position: relative; padding: 24px 8px 24px 0; }
.letter { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 28px 28px 32px; transform: rotate(-2deg); max-width: 470px; margin-left: auto; }
.letter::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(135deg, var(--accent) 0 14px, transparent 14px 22px, var(--postmark) 22px 36px, transparent 36px 44px); opacity: .85; }
.letter .to { font-family: var(--font-mono); font-size: 13px; color: var(--muted); display: grid; gap: 4px; margin-top: 84px; }
.letter .to b { color: var(--ink); font-weight: 500; font-size: 17px; }
.letter .lines { margin-top: 26px; display: grid; gap: 12px; }
.letter .lines i { display: block; height: 1px; background: var(--line); }
.letter .lines i:last-child { width: 62%; }
.stamp { position: absolute; top: 26px; right: 26px; width: 92px; height: 112px; padding: 8px; background: var(--accent);
  -webkit-mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 12px 12px;
          mask: radial-gradient(circle 4px at 4px 4px, transparent 98%, #000) -4px -4px / 12px 12px; }
.stamp-in { width: 100%; height: 100%; border: 1.5px solid color-mix(in srgb, var(--accent-ink) 70%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 8px 4px 6px; color: var(--accent-ink); }
.stamp-in svg { width: 46px; }
.stamp-in .val { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1; }
.stamp-in .cty { font-size: 8px; letter-spacing: .14em; font-weight: 700; }
.postmark { position: absolute; top: 40px; right: 70px; width: 210px; color: var(--postmark); transform: rotate(-12deg); opacity: .9; pointer-events: none; }
.postmark text { fill: currentColor; font-family: var(--font-mono); font-weight: 500; }

.noask { max-width: 1120px; margin: 72px auto 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: start; }
.noask > .form-strike { order: -1; }   /* the form on the left: the section above has its words on the left */
.noask h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 12px; text-wrap: balance; }
.noask p { color: var(--muted); margin: 0; max-width: 36rem; }
.form-strike { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 18px; }
.form-strike div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.form-strike div:last-child { border-bottom: 0; }
.form-strike s { color: var(--faint); text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.form-strike .keep { font-weight: 600; }
.form-strike small { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; align-self: center; }


/* Footer. Public pages: three columns - what this is, the site's pages, and
   keeping it running - over one legal line. Signed-in pages keep the slim bar
   below (.app-foot): copyright | links, centred | Ko-fi.

   The install button (js/install.js) is the LAST item of the first column, so
   where a browser can't install - Firefox, the installed app itself, or once
   it is installed - the column ends a line earlier and nothing else moves. */
.site-foot { max-width: 1120px; margin: 72px auto 0; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 26px; }
.site-foot p { margin: 0; }
.site-foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
/* Underlined where a link sits in running text (the legal line, the slim bar);
   bare in the columns, where the heading already says they are links. */
.foot-legal a, .app-foot a { border-bottom-color: var(--line); }
.site-foot a:hover, .site-foot a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
.foot-main { display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 20px 48px; align-items: start; }
.foot-brand { display: grid; gap: 12px; justify-items: start; }
.foot-brand p, .foot-col p { max-width: 34ch; line-height: 1.55; }
.site-foot .foot-mark { display: inline-flex; align-items: center; gap: 9px; border-bottom: 0; }
.foot-mark svg { width: 26px; height: 26px; }
.foot-mark span { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--ink); }
.foot-mark:hover span { color: var(--accent); }
.foot-col { display: grid; gap: 10px; justify-items: start; align-content: start; }
.foot-col h2 { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.foot-col .ko-fi { margin-top: 2px; }
/* .site-foot p above is an element selector, so it outweighs a bare class
   here and would flatten the margin: the rule needs the same reach. */
.site-foot .foot-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
/* The slim signed-in bar keeps the three-up line the public footer used to have. */
.app-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px; }
.app-foot p { justify-self: start; }
.foot-links { display: flex; gap: 18px; justify-self: center; }
.app-foot .ko-fi { justify-self: end; }
.site-foot .kofi-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 150px; padding: 2px 12px; line-height: 36px;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 12px; box-shadow: 1px 1px 0 rgb(0 0 0 / .2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.site-foot .kofi-button:hover { color: var(--accent-ink); filter: brightness(1.08); }
.kofi-cup { width: 19px; height: 15px; object-fit: contain; animation: kofi-wiggle 3s infinite; }
@keyframes kofi-wiggle {
  0%, 60% { transform: rotate(0) scale(1); }
  75% { transform: rotate(0) scale(1.12); }
  80% { transform: rotate(0) scale(1.1); }
  84%, 92% { transform: rotate(-10deg) scale(1.1); }
  88%, 96% { transform: rotate(10deg) scale(1.1); }
  100% { transform: rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .kofi-cup { animation: none; } }
/* Install the app (js/install.js): a button at the foot of the public
   footer's first column, an item with the links in the signed-in one, and
   Safari's steps in a panel. Outlined, so the footer keeps one solid button
   (Ko-fi) rather than two competing. */
.install-btn { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 38px; padding: 0 15px 0 12px; border: 1px solid var(--accent); border-radius: 10px; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.install-btn:hover { background: var(--accent-soft); }
.install-btn svg, .foot-install svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foot-install { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent); cursor: pointer; }
.foot-install svg { width: 14px; height: 14px; }
.foot-install:hover { text-decoration: underline; text-underline-offset: 3px; }
.install-btn:focus-visible, .foot-install:focus-visible, .install-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.install-steps { position: fixed; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 14px 16px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.5; text-align: left; }
.install-steps > b { display: block; padding-right: 24px; font-family: var(--font-display); font-size: 15px; }
.install-steps ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.install-steps ol b { font-weight: 600; }
.install-close { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.install-close:hover { background: var(--sunk); color: var(--ink); }
.share-glyph { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-foot .install-more { display: inline-block; margin-top: 8px; font-size: 12.5px; color: var(--accent); border-bottom-color: currentColor; }
/* A phone's signed-in footer takes a second line for Install app, under the
   links: Compose and the toasts move up with it. */
@media (max-width: 720px) { .app-foot .foot-install { flex-basis: 100%; } }
@media (max-width: 640px) {
  body:has(.app-foot .foot-install:not([hidden])) .fab { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  body.app:has(.app-foot .foot-install:not([hidden])) .toast { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
/* Narrower than three columns: the two blocks that carry a button sit side by
   side, and the site's four links - which fit on one line long before this -
   become a row under them instead of a column of their own. Left-aligned
   throughout; centring a column of links reads as a greeting card. */
@media (max-width: 860px) {
  .foot-main { grid-template-columns: 1fr 1fr; gap: 24px 32px; }
  .foot-brand { grid-area: 1 / 1; }
  .foot-support { grid-area: 1 / 2; }
  .foot-site { grid-area: 2 / 1 / 3 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
  .foot-site h2 { flex-basis: 100%; }
  /* Enough height to be worth tapping at, now they are no longer a column. */
  .foot-site a { padding: 4px 0; }
}
@media (max-width: 480px) {
  .site-foot { margin-top: 56px; padding-top: 22px; }
  /* One column, in the order they are written: what this is, where to go,
     and keeping it running. */
  .foot-main { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .foot-brand, .foot-support, .foot-site { grid-area: auto; }
  .foot-brand p, .foot-col p { max-width: none; }
  /* Both buttons go full width, which needs the column to stop shrinking its
     items to their content first. */
  .foot-brand, .foot-col { justify-items: stretch; }
  .foot-mark { justify-content: start; }
  .install-btn, .foot-col .kofi-button { width: 100%; justify-content: center; }
}

/* The same footer on the signed-in pages, as one slim bar under the window's
   content: the page already fills the window, so it can't sit below a scroll. */
.site-foot.app-foot { max-width: none; margin: 0; flex: none; padding: 6px 16px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); font-size: 12px; }
.app-foot .kofi-button { min-width: 0; line-height: 26px; font-size: 12.5px; border-radius: 9px; padding: 1px 10px; }
.app-foot .foot-links { gap: 14px; }
body.app .toast { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 720px) {
  /* One line still: the copyright gives way, the links and Ko-fi stay. */
  .site-foot.app-foot { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; justify-items: stretch; text-align: left; }   /* the four links fit on one line at 360px */
  .app-foot p { display: none; }
  .app-foot .foot-links { justify-self: start; flex-wrap: wrap; gap: 2px 12px; min-width: 0; }
  .app-foot .ko-fi { justify-self: end; }
}
/* A phone: the button says just "Support", so the links keep their room. */
@media (max-width: 520px) { .app-foot .kofi-long { display: none; } }

/* Terms and privacy: one readable column on the public sky. */
.legal { max-width: 46rem; margin: 48px auto 0; }
.legal-head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.04; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
.legal-lede { font-size: 1.08rem; color: var(--muted); margin: 16px 0 10px; text-wrap: pretty; }
.legal-toc { display: flex; flex-wrap: wrap; gap: 6px; margin: 28px 0 8px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.legal-toc a { font-size: 13px; color: var(--muted); text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.legal-toc a:hover { color: var(--accent); border-color: var(--accent); }
.legal-body { line-height: 1.6; }
.legal-body h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -.015em; margin: 36px 0 8px; scroll-margin-top: 16px; }
.legal-body h3 { font-size: 1rem; margin: 22px 0 6px; }
.legal-body p, .legal-body ul { margin: 0 0 12px; }
.legal-body ul { padding-left: 1.2em; display: grid; gap: 4px; }
.legal-body a { color: var(--accent); }
.legal-facts { margin: 4px 0 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 2px 16px; }
.legal-facts div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.legal-facts div:last-child { border-bottom: 0; }
.legal-facts dt { font-weight: 600; }
.legal-facts dd { margin: 0; color: var(--muted); }
@media (max-width: 560px) { .legal-facts div { grid-template-columns: minmax(0, 1fr); } }

/* ================= SIGNED-IN APP ================= */
html.app-root, html.app-root body { height: 100%; }
body.app { display: flex; flex-direction: column; overflow: hidden; }
.appbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--surface); padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.appbar .brand svg { width: 28px; height: 28px; }
.appbar .brand-name { font-size: 16px; }
.meters { display: flex; gap: 18px; }
.quota { display: grid; gap: 4px; font-size: 12px; color: var(--muted); min-width: 150px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quota.warn { color: var(--warn); }
.quota.warn .bar i { background: var(--warn); }
.quota.full { color: var(--bad); font-weight: 600; }
.quota.full .bar i { background: var(--bad); }
.who-meters { display: none; }
/* The storage meter's text line ends with the + (ask for more), lined up
   with the text and with the bar's right end. */
.quota-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.space-more { width: 16px; height: 16px; flex: none; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--accent);
  display: grid; place-items: center; padding: 0; margin: -2px 0; cursor: pointer; }
.space-more svg { width: 10px; height: 10px; display: block; }
.space-more { position: relative; top: -1px; }   /* its centre on the text's middle, not the line's */
/* In the account menu, its own look wins over the menu's button style. */
.menu .who-meters .space-more { display: grid; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--accent); font-size: inherit; }
.menu .who-meters .space-more:hover { background: var(--accent-soft); border-color: transparent; }
.space-more::after { content: ""; position: absolute; inset: -8px; }   /* a finger-sized target around the small circle */
.space-more:hover { background: var(--accent-soft); border-color: transparent; }
.space-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.limit-modal { width: min(460px, 100%); }
.limit-tiers { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.limit-tiers .tier { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 14px; }
.limit-tiers .tier input { accent-color: var(--accent); margin: 0; }
.limit-tiers .tier small { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px; color: var(--muted); background: var(--sunk); }
.limit-tiers .tier.now { background: var(--sunk); font-weight: 600; }
.limit-tiers .tier.next small { color: var(--accent); background: var(--accent-soft); }
.limit-tiers .tier.next:has(input:checked:not(:disabled)) { border-color: var(--accent); background: var(--accent-soft); cursor: pointer; }
.limit-tiers .tier.below, .limit-tiers .tier.later { color: var(--faint); }
.limit-tiers .tier input:disabled { opacity: .45; }
.limit-modal .callout a { color: var(--accent); font-weight: 600; }
.limit-modal .note:empty { display: none; }
.pm-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: var(--surface); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; margin-left: 2px; }
.bar { height: 5px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 3px; }
.me { position: relative; margin-left: auto; }
.me-btn { display: flex; align-items: center; gap: 8px; font-size: 13px; border: 0; background: none; padding: 4px 6px; border-radius: 10px; }
.me-btn:hover { background: var(--sunk); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-family: var(--font-display); flex: none; text-transform: uppercase; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 220px; z-index: 20; display: grid; }
.menu a, .menu button { display: block; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; border: 0; background: none; }
.menu a:hover, .menu button:hover { background: var(--sunk); }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.menu .menu-label { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.menu .from-items { display: grid; }
.menu .from-item { display: flex; align-items: center; gap: 10px; font-size: 13px; overflow-wrap: anywhere; }
.menu .from-item svg { width: 15px; height: 15px; flex: none; color: var(--accent); visibility: hidden; }
.menu .from-item[aria-checked="true"] { background: var(--accent-soft); font-weight: 600; }
.menu .from-item[aria-checked="true"] svg { visibility: visible; }
.menu .menu-sub { font-size: 13px; color: var(--accent); font-weight: 600; padding-left: 35px; }
.menu .menu-sep { height: 1px; background: var(--line); margin: 4px 0; }
.menu > a, .menu > .sign-out { display: flex; align-items: center; gap: 10px; }
.menu > a svg, .menu > .sign-out svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 10px; margin: 4px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.theme-pick { display: flex; gap: 2px; background: var(--sunk); border-radius: 9px; padding: 3px; }
.menu .theme-pick button { display: grid; place-items: center; width: 30px; height: 26px; padding: 0; border-radius: 7px; color: var(--muted); }
.menu .theme-pick button:hover { background: var(--surface); color: var(--ink); }
.menu .theme-pick button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.theme-pick svg { width: 16px; height: 16px; }
.reminder-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--warn-soft); font-size: 13px; flex-wrap: wrap; }
.reminder-bar .actions { display: flex; gap: 6px; flex-wrap: wrap; }
.reminder-bar.full { background: var(--bad-soft); }
.space-warn b { font-weight: 650; }

.mail { --side-w: 228px; --list-w: 380px; flex: 1; min-height: 0; display: grid; grid-template-columns: var(--side-w) minmax(0, var(--list-w)) minmax(0, 1fr); position: relative; background: var(--surface); }
/* The list's right edge, draggable (js/app.js). */
.split { position: absolute; top: 0; bottom: 0; left: calc(var(--side-w) + var(--list-w) - 4px); width: 9px; cursor: col-resize; z-index: 3; touch-action: none; }
.split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 1px; background: transparent; transition: background-color .15s, width .15s, left .15s; }
.split:hover::after, .split.dragging::after, .split:focus-visible::after { left: 3px; width: 3px; background: var(--accent); }
.split:focus-visible { outline: none; }
.mail.resizing, .mail.resizing * { cursor: col-resize; user-select: none; }
.mail.resizing iframe { pointer-events: none; }   /* the message frame would swallow the drag */
.side { border-right: 1px solid var(--line); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.side > .btn-primary { margin: 0 6px 12px; }
.side > .btn-primary svg { width: 17px; height: 17px; flex: none; }
.side h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); margin: 16px 10px 6px; font-weight: 600; }
.fold { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 14px; border: 0; background: none; width: 100%; text-align: left; }
.fold svg { width: 17px; height: 17px; flex: none; }
.fold:hover { background: var(--sunk); color: var(--ink); }
.fold.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.fold.on svg { color: var(--accent); }
.fold .n { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--faint); }
.side .empty-folders { font-size: 12.5px; color: var(--faint); padding: 2px 10px; margin: 0; }

.list { border-right: 1px solid var(--line); overflow-y: auto; overflow-x: hidden; min-width: 0; }   /* never sideways: the address menu lives in <body> */
.list-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.list-head h1 { margin: 0; font-family: var(--font-display); font-size: 18px; letter-spacing: -.01em; }
.list-head small { color: var(--faint); }
.list-meta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.list-head small.ok { color: var(--ok); }
.list-head .fetch { width: 30px; height: 30px; color: var(--muted); margin-right: -6px; }
.list-head .fetch svg { width: 18px; height: 18px; }
.list-head .fetch:hover { background: var(--sunk); color: var(--ink); }
.list-head .fetch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.list-head .fetch.busy { color: var(--accent); }
.fetch svg { width: 18px; height: 18px; display: block; }
@media (pointer: coarse) { .list-head .fetch { width: 38px; height: 38px; } .fetch svg { width: 20px; height: 20px; } }
/* Checking: the arrow keeps dropping into the tray. */
.fetch .arr, .pull .arr { transform-box: view-box; }
.fetch.busy .arr, .pull.busy .arr { animation: fetch-drop .9s ease-in-out infinite; }
@keyframes fetch-drop { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(3px); opacity: 0; } }
.list { overscroll-behavior-y: contain; }
.pull { height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 12.5px; transition: height .2s ease; }
.pull.dragging { transition: none; }
.pull.ready, .pull.busy { color: var(--accent); }
.pull-icon svg { width: 24px; height: 24px; display: block; }
.pull:not(.busy) .arr { transform: translateY(var(--drop, 0px)); }
.msg.fresh { animation: fresh 1.6s ease-out; }
@keyframes fresh { from { background: var(--accent-soft); } }
.empty { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 56px 24px; color: var(--muted); font-size: 14px; }
.empty svg { width: 40px; height: 40px; color: var(--faint); }
.empty b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; overflow-wrap: anywhere; }
.read { overflow-y: auto; min-width: 0; display: grid; place-items: center; color: var(--faint); font-size: 14px; padding: 24px; }

/* modal */
.scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 38%, transparent); display: grid; place-items: center; padding: 16px; z-index: 30; }
.modal { width: min(440px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 22px; display: grid; gap: 14px; max-height: calc(100% - 32px); overflow-y: auto; }
.modal-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.modal-badge svg { width: 24px; height: 24px; }
.modal h2 { margin: 0; font-family: var(--font-display); font-size: 21px; letter-spacing: -.015em; text-wrap: balance; }
.modal p { margin: 0; color: var(--muted); font-size: 14px; }
.modal-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.modal-actions .btn-primary { margin-right: auto; }
.row { display: flex; gap: 8px; }
.row .input { flex: 1; min-width: 0; }

/* ================= SETTINGS ================= */
.settings { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); background: var(--surface); }
.set-nav { border-right: 1px solid var(--line); padding: 16px 10px; display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.set-nav .back-link { align-self: flex-start; }
.set-nav .kb-link { font-family: inherit; cursor: pointer; }   /* Help: a button dressed as the links above it */
.set-main { padding: 26px 32px 48px; min-width: 0; overflow-y: auto; }
.set-inner { max-width: 720px; display: grid; gap: 28px; }
.set-main h1 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; margin: 0; }
.set-main > .set-inner > header p { color: var(--muted); margin: 6px 0 0; }
.section { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: grid; gap: 14px; }
.section h2 { margin: 0; font-size: 16px; }
.section > p { margin: 0; color: var(--muted); font-size: 14px; }
.section-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; flex-wrap: wrap; }
.section-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.section form { display: grid; gap: 12px; max-width: 420px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 2px 9px 2px 7px; border-radius: 999px; white-space: nowrap; }
.pill svg { width: 12px; height: 12px; }
.pill-ok { color: var(--ok); background: var(--ok-soft); }
.pill-warn { color: var(--warn); background: var(--warn-soft); }
.devices { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.device { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.device:last-child { border-bottom: 0; }
.device small { display: block; color: var(--faint); font-size: 12.5px; }
.device .this { color: var(--ok); font-weight: 600; font-size: 12.5px; }
.pk-row .row-buttons { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.pk-rename { display: flex; gap: 8px; align-items: center; grid-column: 1 / -1; flex-wrap: wrap; }
.pk-rename .input { flex: 1 1 200px; min-width: 0; padding: 7px 10px; }
#pk-add svg { width: 16px; height: 16px; }
#passkeys .devices { margin-bottom: 12px; }
/* Mail apps: what to type into the app, then the app passwords. */
.ma-settings { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.ma-settings div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ma-settings div:last-child { border-bottom: 0; }
.ma-settings dt { color: var(--muted); }
.ma-settings dd { margin: 0; overflow-wrap: anywhere; }
#mail-apps .devices { margin-bottom: 12px; }
.ma-shown { display: grid; gap: 10px; padding: 14px; border-radius: 10px; background: var(--accent-soft); margin-bottom: 12px; }
.ma-shown p { margin: 0; font-size: 14px; }
.ma-secret { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ma-secret code { font-size: 20px; letter-spacing: .06em; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; user-select: all; }
@media (max-width: 640px) { .ma-settings div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
@media (max-width: 640px) { .pk-row { grid-template-columns: minmax(0, 1fr); } .pk-row .row-buttons { justify-content: flex-start; margin-left: -10px; } }

/* ---------- app bar extras: search, postmaster link ---------- */
.search-wrap { flex: 1; max-width: 520px; min-width: 0; position: relative; }
.search { width: 100%; height: 38px; display: flex; align-items: center; gap: 10px; background: var(--sunk); border: 1px solid transparent; border-radius: 10px; padding: 0 8px 0 12px; color: var(--faint); cursor: text; transition: background .15s, border-color .15s; }
.search:hover { border-color: var(--line); }
.search:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; height: 100%; padding: 0; font-size: 14px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--faint); }
.search svg { width: 16px; height: 16px; flex: none; }
.search kbd { font-family: var(--font-mono); font-size: 11px; color: var(--faint); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; line-height: 18px; background: var(--surface); }
.search:focus-within kbd { visibility: hidden; }
/* Suggestions under the search box */
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 2px; }
.sg-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 1px 10px; align-items: center; text-align: left; border: 0; background: none; border-radius: 8px; padding: 7px 8px; color: var(--ink); width: 100%; }
.sg-item .avatar { width: 30px; height: 30px; font-size: 13px; grid-row: span 2; }
.sg-item .who { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-item time { font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-item .what { grid-column: 2 / 4; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-item .what b { color: var(--ink); font-weight: 600; }
.sg-item .chip { font-size: 11px; margin-left: 6px; vertical-align: 1px; }
.sg-addr { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--muted); margin-left: 6px; }
.sg-item mark, .sg-all mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 1px; }
.sg-item[aria-selected="true"], .sg-item:hover, .sg-all[aria-selected="true"], .sg-all:hover { background: var(--sunk); }
.sg-all { display: flex; align-items: center; gap: 8px; border: 0; border-top: 1px solid var(--line); background: none; border-radius: 0 0 8px 8px; padding: 10px 8px 8px; margin-top: 4px; font-size: 13px; color: var(--accent); font-weight: 600; text-align: left; width: 100%; }
.sg-all svg { width: 15px; height: 15px; }
.sg-all kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--faint); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-weight: 400; }
.sg-empty { padding: 10px 8px; font-size: 13px; color: var(--muted); }
.sg-label { padding: 8px 8px 3px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.sg-item.sg-to { grid-template-columns: 10px minmax(0, 1fr) auto; padding: 8px; }
.sg-to .who { font-weight: 500; }
.sg-hint { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
/* Phones: the search box is narrow, so the results use the screen's width. */
@media (max-width: 640px) {
  .suggest { position: fixed; left: 8px; right: 8px; top: calc(58px + env(safe-area-inset-top, 0px)); max-height: calc(100% - 140px); overflow-y: auto; }
}
.pm-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 10px; text-decoration: none; white-space: nowrap; }
.pm-link:hover { filter: brightness(.97); }
.pm-link svg { width: 14px; height: 14px; }
.pm-link.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- sidebar: own folders ---------- */
.side-head { display: flex; justify-content: space-between; align-items: center; margin: 16px 6px 6px 10px; }
.side-head h4 { margin: 0; }
.icon-btn { border: 0; background: none; color: var(--faint); border-radius: 7px; width: 26px; height: 26px; display: inline-grid; place-items: center; font-size: 17px; line-height: 1; padding: 0; flex: none; }
.icon-btn:hover { color: var(--ink); background: var(--sunk); }
.icon-btn svg { width: 15px; height: 15px; }
.fold .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; margin: 0 4px; }
.fold-row { display: flex; align-items: center; border-radius: 8px; }
.fold-row .fold { flex: 1; min-width: 0; }
.fold-row .fold span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-row .icon-btn { opacity: 0; margin-right: 2px; }
.fold-row:hover .icon-btn, .fold-row .icon-btn:focus-visible { opacity: 1; }
@media (hover: none) { .fold-row .icon-btn { opacity: 1; } }
/* Agenda and the Vault, a little apart from the standard folders; Settings and Help at the bottom. */
.side-group { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.side-foot { display: flex; flex-direction: column; gap: 2px; margin-top: auto; padding-top: 14px; }
.side .kb-link { font-family: inherit; cursor: pointer; }   /* a button dressed as the links above it */
.kb-modal { max-width: 420px; }
.kb-modal h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 20px; }
.kb-list { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0 0 16px; align-items: center; font-size: 14px; }
.kb-list dt { white-space: nowrap; }
.kb-list dd { margin: 0; color: var(--muted); }
.kb-list kbd { font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 1px 7px; background: var(--surface); }
.folder-pick { display: none; }

/* colour swatches */
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: 8px; border: 2px solid transparent; padding: 0; position: relative; }
.swatch[aria-checked="true"] { border-color: var(--ink); }
.swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: 7px; border-radius: 3px; background: var(--surface); opacity: .9; }

/* ---------- switches, rules, senders ---------- */
.switch { width: 36px; height: 20px; border-radius: 999px; border: 0; background: var(--line); position: relative; padding: 0; flex: none; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); transition: transform .15s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.conv-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.conv-col { border: 1px solid var(--line); border-radius: 10px; padding: 8px 0 4px; opacity: .55; transition: opacity .15s, border-color .15s; display: grid; align-content: start; }
.conv-col.on { opacity: 1; border-color: var(--accent); }
.conv-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); padding: 0 12px 6px; font-weight: 600; }
.conv-col.on .conv-label { color: var(--accent); }
.conv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; padding: 7px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.conv-row b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-row.unread b, .conv-row.unread span { font-weight: 650; }
.conv-row time { font-size: 11.5px; color: var(--faint); }
.conv-row span { color: var(--muted); grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-row em { font-style: normal; grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-col.compact .conv-row { padding-top: 4px; padding-bottom: 4px; }
.conv-col.compact .conv-row em { color: var(--muted); }
.count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--sunk); color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; line-height: 17px; vertical-align: 1px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .conv-preview { grid-template-columns: minmax(0, 1fr); } }

/* Settings → Notifications: how to install, and the two sample notifications. */
.install-how { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 12px; }
.install-how > div { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.install-how h3 { margin: 0 0 6px; font-size: 13.5px; }
.install-how ol { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--muted); display: grid; gap: 4px; }
.push-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.push-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px 0 10px; opacity: .55; transition: opacity .15s, border-color .15s; }
.push-card.on { opacity: 1; border-color: var(--accent); }
.push-card.on .conv-label { color: var(--accent); }
.push-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px 0; border-top: 1px solid var(--line); }
.push-note svg { width: 26px; height: 26px; padding: 5px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); }
.push-note b { display: block; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-note span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .install-how, .push-preview { grid-template-columns: minmax(0, 1fr); } }

/* Settings → Appearance */
.mode-pick { display: inline-flex; gap: 2px; background: var(--sunk); border-radius: 10px; padding: 3px; justify-self: start; }
.mode-pick button { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; border-radius: 8px; padding: 7px 14px; font-size: 14px; color: var(--muted); }
.mode-pick button svg { width: 16px; height: 16px; }
.mode-pick button:hover { color: var(--ink); }
.mode-pick button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .1); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.theme-card { display: grid; gap: 2px; text-align: left; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: 8px 8px 10px; color: var(--ink); }
.theme-card:hover { border-color: var(--faint); }
.theme-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.tc-name { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-top: 6px; }
.tc-check { width: 15px; height: 15px; color: var(--accent); display: none; }
.theme-card[aria-checked="true"] .tc-check { display: block; }
.tc-desc { font-size: 12px; color: var(--faint); }
/* The preview: a tiny mail screen in the card's own palette (data-palette). */
.tc { display: grid; grid-template-rows: 14px 1fr; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 7px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); }
.tc i, .tc b, .tc s { display: block; }
.tc-bar { display: flex; align-items: center; gap: 5px; padding: 0 6px; background: var(--surface); border-bottom: 1px solid var(--line); }
.tc-logo { width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.tc-search { flex: 1; height: 5px; max-width: 45%; border-radius: 3px; background: var(--sunk); }
.tc-me { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); margin-left: auto; }
.tc-body { display: grid; grid-template-columns: 30% 1fr; min-height: 0; }
.tc-side { display: grid; align-content: start; gap: 4px; padding: 6px 5px; background: var(--surface); border-right: 1px solid var(--line); }
.tc-compose { height: 7px; border-radius: 3px; background: var(--accent); margin-bottom: 2px; }
.tc-fold { height: 5px; border-radius: 2px; background: var(--sunk); }
.tc-fold.on { background: var(--accent-soft); }
.tc-list { display: grid; align-content: start; background: var(--surface); }
.tc-row { display: grid; gap: 3px; padding: 5px 6px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.tc-row b { height: 4px; width: 60%; border-radius: 2px; background: var(--muted); }
.tc-row s { height: 3px; width: 85%; border-radius: 2px; background: var(--line); }
.tc-row.unread b { background: var(--ink); }
.tc-row.tc-on { background: var(--accent-soft); border-left-color: var(--accent); }
.list-box { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.list-empty { padding: 16px; color: var(--faint); font-size: 14px; }
.rule { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.rule:last-child { border-bottom: 0; }
.rule.off .rule-text { color: var(--faint); }
.rule.dragging { opacity: .5; }
.rule.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.grip { border: 0; background: none; color: var(--faint); cursor: grab; font-size: 14px; letter-spacing: -2px; padding: 4px 2px; border-radius: 6px; }
.grip:active { cursor: grabbing; }
.rule-text { font-size: 14px; line-height: 1.75; min-width: 0; }
.rule-text .tok { font-family: var(--font-mono); font-size: 12.5px; background: var(--sunk); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.rule-text .tok-folder { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; font-size: 13px; white-space: nowrap; }
.rule-text .tok-folder i { width: 8px; height: 8px; border-radius: 2px; }
.rule-actions { display: flex; gap: 2px; }
.editor { border: 1px solid var(--accent); border-radius: 12px; padding: 18px; display: grid; gap: 14px; background: var(--surface); }
.editor h3 { margin: 0; font-size: 16px; font-family: var(--font-display); }
.ed-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); font-weight: 600; }
.conds { display: grid; gap: 8px; }
.cond { display: grid; grid-template-columns: 150px 150px minmax(0, 1fr) 32px; gap: 8px; }
.cond.with-header { grid-template-columns: 150px 130px 150px minmax(0, 1fr) 32px; }
.sel, .cond input { border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 8px 10px; min-width: 0; font-size: 14px; }
.cond input { font-family: var(--font-mono); font-size: 13px; }
.inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.ed-foot { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.ed-foot .btn-danger { margin-right: auto; }
.sender-add { display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: 8px; }
/* A row of fields, not a stacked form: the whole width of its section. */
.section form.sender-add { max-width: none; }
.section form.wide-form { max-width: 560px; }
.section form.wide-form textarea { width: 100%; resize: vertical; min-height: 96px; font: inherit; }
.row-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fw-on { display: grid; gap: 12px; }
.fw-on p { margin: 0; }
/* An error line with nothing to say takes no room. */
.section > .note:empty { display: none; }
.sender-add .input { font-family: var(--font-mono); font-size: 13px; }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.item:last-child { border-bottom: 0; }
.item .who { font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; }
.item small { display: block; color: var(--faint); font-size: 12px; font-family: var(--font-body); }
.pill-bad { color: var(--bad); background: var(--bad-soft); }
.pill-neutral { color: var(--muted); background: var(--sunk); }
.pill-info { color: var(--accent); background: var(--accent-soft); }
.folder-item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.folder-item:last-child { border-bottom: 0; }
.folder-item i { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- message list ---------- */
.msg { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 16px 12px 10px; border-bottom: 1px solid var(--line); cursor: pointer; border-left: 3px solid transparent; }
.msg:hover { background: var(--sunk); }
.msg:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 0; }
/* The row whose message is open (not .sel: that's the dropdown style). */
.msg.open-row { background: var(--accent-soft); border-left-color: var(--accent); }
/* The dot: a button (read / unread). Filled when unread; a ring on hover when read. */
.msg .u { width: 18px; height: 18px; margin: 1px 0 0 -5px; padding: 0; border: 0; background: none; border-radius: 50%; grid-row: span 2; display: grid; place-items: center; cursor: pointer; align-self: start; }
.msg .u::before { content: ""; width: 7px; height: 7px; border-radius: 50%; box-sizing: border-box; }
.msg.unread .u::before { background: var(--accent); }
.msg:not(.unread):hover .u::before, .msg:not(.unread) .u:focus-visible::before { border: 1.5px solid var(--faint); }
.msg .u:hover { background: var(--sunk); }
.msg .u:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@media (hover: none) { .msg:not(.unread) .u::before { border: 1.5px solid var(--line); } }
.msg .from { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.unread .from, .msg.unread .subj { font-weight: 650; }
.msg time { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.msg .subj { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2 / 3; }
.msg .snip { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; grid-column: 2 / 4; }
.msg .to-chip { font-family: var(--font-mono); font-size: 11.5px; border-radius: 6px; padding: 1px 6px; background: var(--sunk); color: var(--muted); }
/* Compact (Settings → Reading): two lines, no preview, about 40% shorter. */
.mail.compact .msg { padding-top: 6px; padding-bottom: 6px; gap: 1px 10px; }
.mail.compact .msg .snip { display: none; }
.mail.compact .msg .from { font-size: 13.5px; }
.mail.compact .msg .subj { font-size: 13px; color: var(--muted); }
.mail.compact .msg.unread .subj { color: var(--ink); }
.msg .chip { grid-column: 2 / 4; justify-self: start; margin-top: 2px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 6px; padding: 1px 7px; background: var(--sunk); color: var(--muted); font-weight: 500; }
.chip i { width: 7px; height: 7px; border-radius: 2px; }
.star { border: 0; background: none; padding: 2px; border-radius: 6px; color: var(--faint); display: inline-grid; place-items: center; line-height: 0; }
.star svg { width: 17px; height: 17px; }
.star:hover { color: var(--star); background: var(--sunk); }
.star[aria-pressed="true"] { color: var(--star); }
.msg .star { grid-column: 3; grid-row: 2; justify-self: end; margin: -3px -2px -3px 0; opacity: 0; }
.msg:hover .star, .msg .star:focus-visible, .msg .star[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .msg .star { opacity: 1; } }
.more { display: block; width: 100%; padding: 14px; border: 0; background: none; color: var(--accent); font-weight: 600; }

/* ---------- reading a message ---------- */
.read.open { display: flex; flex-direction: column; place-items: stretch; color: var(--ink); padding: 22px 28px; }
/* A bar as tall as the list's header, its line level with the list's. */
.read-tools { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin: -22px -28px 18px; padding: 0 28px; min-height: 55px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
/* Its buttons are icons, named by their tooltips (js/tips.js), in three
   groups: answer · file · remove. */
.read-tools { gap: 2px; }
.btn-icon { width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--muted); display: grid; place-items: center; padding: 0; flex: none; }
.btn-icon svg { width: 18px; height: 18px; }   /* the same as the list header's (.list-head .fetch) */
.btn-icon:hover:not(:disabled), .btn-icon[aria-expanded="true"] { background: var(--sunk); color: var(--ink); }
.btn-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-icon:disabled { opacity: .4; }
.btn-icon.danger { color: var(--bad); }
.btn-icon.danger:hover:not(:disabled) { background: var(--bad-soft); color: var(--bad); }
.pop-btn.btn-icon svg { width: 18px; height: 18px; margin: 0; }
.tool-sep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; flex: none; }

/* The tooltip of a button with only an icon (js/tips.js). */
.icon-tip { position: fixed; z-index: 100; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 500; line-height: 1.2; padding: 6px 9px; border-radius: 7px; white-space: nowrap; display: flex; gap: 8px; align-items: center; box-shadow: 0 6px 16px -6px rgb(16 24 40 / .45); }
.icon-tip::before { content: ""; position: absolute; top: -4px; left: var(--arrow-x, 50%); width: 8px; height: 8px; background: var(--ink); transform: translateX(-50%) rotate(45deg); }
.icon-tip.above::before { top: auto; bottom: -4px; }
.icon-tip kbd { font: 600 11px/1 var(--font-mono); background: color-mix(in srgb, var(--bg) 18%, transparent); border-radius: 4px; padding: 3px 5px; }
.pop-wrap { position: relative; display: inline-flex; }
.pop-btn { display: inline-flex; align-items: center; gap: 4px; }
.pop-btn svg { width: 14px; height: 14px; margin-right: -3px; }
.pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 200px; max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; }
.pop button { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 14px; color: var(--ink); }
.pop button:hover, .pop button:focus-visible { background: var(--sunk); outline: none; }
.pop svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pop .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; margin: 0 3.5px; }
.pop.confirm { width: 280px; padding: 14px; gap: 6px; }
.pop.confirm b { font-size: 14px; }
.pop.confirm p { margin: 0; font-size: 13px; color: var(--muted); }
.pop.confirm .confirm-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.pop.confirm .confirm-acts button { display: inline-flex; justify-content: center; padding: 6px 12px; font-size: 13px; }
/* (.pop button resets backgrounds; these come back on top of it.) */
.pop.confirm .confirm-acts .btn-primary { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pop.confirm .confirm-acts .btn-danger-solid { background: var(--bad); color: var(--surface); font-weight: 600; }
.pop.confirm .confirm-acts .btn-primary:hover, .pop.confirm .confirm-acts .btn-danger-solid:hover { filter: brightness(1.08); }
.pop.confirm .confirm-acts .btn-primary:focus-visible, .pop.confirm .confirm-acts .btn-danger-solid:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.read-nav { display: none; }
.read-back { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; color: var(--accent); font-weight: 600; font-size: 15px; padding: 6px 10px 6px 2px; margin-left: -6px; border-radius: 8px; }
.read-back svg { width: 22px; height: 22px; }
.read-back:hover { background: var(--sunk); }
.read-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fab { display: none; }
.read-title { display: flex; gap: 10px; align-items: start; justify-content: space-between; }
.read-title h2 { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 14px; text-wrap: balance; overflow-wrap: anywhere; }
.read-title .star svg { width: 22px; height: 22px; }
.read-meta { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.read-meta .who { min-width: 0; flex: 1; font-size: 14px; }
.read-meta .who div { overflow-wrap: anywhere; }
.read-meta .who div + div { color: var(--faint); font-size: 12.5px; }
.read-meta time { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.read-body { padding: 18px 0; max-width: 72ch; font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.read-frame { width: 100%; flex: 1; min-height: 0; border: 0; border-radius: 8px; background: #fff; margin-top: 14px; }
/* Measured (fitToContent): as tall as the message; the reader scrolls once. */
.read-frame.fitted { flex: none; }
.images-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 13px; color: var(--muted); background: var(--sunk); border-radius: 8px; padding: 7px 10px; margin-top: 14px; }
.images-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.read-body mark, .card-body mark, .read-title mark { background: #ffe28a; color: #151d29; border-radius: 2px; padding: 0 1px; }
.view-switch { margin-left: auto; color: var(--muted); font-weight: 500; }
.read-meta .view-switch { margin-left: 4px; }
.read-title h2 .count { font-family: var(--font-body); font-size: 12px; vertical-align: 4px; margin-left: 8px; letter-spacing: 0; }
.msg .from .count { margin-left: 6px; }

/* A conversation: one card per message, oldest first. */
.conv { display: grid; gap: 10px; padding-bottom: 24px; }
.cmsg { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.cmsg.open { box-shadow: var(--shadow); }
.cmsg.mine { background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface)); }
.card-top { display: flex; align-items: center; border-radius: 12px; }
.card-top:hover { background: color-mix(in srgb, var(--sunk) 60%, transparent); }
.cmsg.open .card-top { border-radius: 12px 12px 0 0; }   /* the body runs on below it */
.card-head { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; border: 0; background: none; padding: 11px 14px; text-align: left; border-radius: inherit; color: var(--ink); }
.card-extras { display: flex; align-items: center; gap: 2px; padding-right: 10px; margin-left: -6px; }
.cmsg:not(.open) .card-extras { display: none; }
.card-extras .ag-add { width: 28px; height: 28px; margin: 0; }
.card-details { border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 5px 8px; border-radius: 7px; }
.card-details:hover, .card-details[aria-expanded="true"] { color: var(--ink); background: var(--sunk); }
.card-details:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-head > svg { width: 14px; height: 14px; color: var(--faint); flex: none; }
.card-head time { color: var(--faint); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-head .avatar { width: 28px; height: 28px; font-size: 13px; }
.card-who { flex: 1; min-width: 0; display: grid; }
.card-who b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-to { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmsg.open .card-to { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.cmsg.new:not(.open) .card-who b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: 2px; }
.card-body { padding: 0 16px 12px 52px; display: grid; gap: 0; min-width: 0; }
.card-body > .chip { justify-self: start; margin-bottom: 8px; }
.card-body > .filed-note { margin-bottom: 8px; }
.card-body > .files { padding: 4px 0 8px; }
.card-content { display: grid; min-width: 0; }
.card-content > .read-body { padding: 4px 0 8px; }
.card-content > .images-bar { margin: 0 0 8px; }
.card-content > .frame-box { margin-bottom: 8px; }
.card-acts { display: flex; gap: 4px; flex-wrap: wrap; margin-left: -10px; padding-top: 4px; }
.frame-box { overflow: hidden; height: min(60vh, 560px); min-height: 160px; border-radius: 8px; margin-bottom: 8px; }
.frame-box.fitted { min-height: 0; }
.frame-box .read-frame { height: 100%; margin-top: 0; }
.read-frame.plain-frame { background: transparent; border-radius: 0; }
.frame-box.fits { min-height: 60px; }
.conv-fold { justify-self: stretch; border: 1px dashed var(--line); background: none; border-radius: 10px; padding: 7px; font-size: 13px; color: var(--muted); }
.conv-fold:hover { color: var(--ink); border-color: var(--faint); }
.quote-toggle { display: block; justify-self: start; margin-top: 8px; border: 0; background: var(--sunk); color: var(--muted); border-radius: 6px; padding: 0 8px; line-height: 16px; font-size: 13px; letter-spacing: .1em; }
.quote-toggle:hover { color: var(--ink); }
.quoted { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--muted); }
@media (max-width: 640px) { .card-body { padding-left: 14px; } }

.filed-note { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); background: var(--sunk); border-radius: 8px; padding: 7px 10px; margin-bottom: 14px; flex-wrap: wrap; }
.filed-note svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.filed-note a { color: var(--accent); }
.files { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 18px; }
.file { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 4px 4px 4px 12px; font-size: 13px; color: var(--ink); text-decoration: none; max-width: 100%; }
.file-get { flex: none; width: 30px; height: 30px; border: 0; border-radius: 7px; background: none; color: var(--muted); display: grid; place-items: center; padding: 0; cursor: pointer; }
.file-get:hover { background: var(--sunk); color: var(--accent); }
.file-get:disabled { opacity: .5; cursor: progress; }
.file .file-get svg { width: 17px; height: 17px; color: currentColor; }
.file svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.file small { color: var(--faint); }
.file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-group { display: grid; gap: 6px; }
.opt { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.opt input { accent-color: var(--accent); margin: 3px 0 0; }
.opt small { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.toast button { border: 0; background: none; color: inherit; font-weight: 650; padding: 2px 0; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- composer ---------- */
.composer { position: fixed; z-index: 25; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(780px, calc(100% - 48px)); height: min(720px, calc(100% - 64px));
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .45); animation: cmp-in .16s ease-out; }
@keyframes cmp-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.985); } }
/* Behind it, the page dims; a click there (or Esc, or –) shrinks it to a bar. */
.cmp-scrim { position: fixed; inset: 0; z-index: 24; background: color-mix(in srgb, var(--ink) 32%, transparent); }
.composer.min { left: auto; top: auto; right: 20px; bottom: calc(52px + env(safe-area-inset-bottom, 0px)); transform: none; height: auto; width: 340px; border-radius: 12px; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4); animation: none; }
.composer.min .cmp-body, .composer.min .cmp-foot, .composer.min .cmp-error { display: none; }
.composer.min .cmp-head { cursor: pointer; border-radius: 12px; border-bottom: 0; }
.cmp-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0; font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; cursor: default; }
.cmp-titles { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; }
.cmp-titles #cmp-title { flex: none; }
.cmp-who { font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
.composer.min .cmp-who { display: block; }
.cmp-head-actions { display: flex; gap: 2px; }
.cmp-head-actions button { border: 0; background: none; color: var(--muted); font-size: 20px; line-height: 1; width: 32px; height: 30px; border-radius: 8px; }
.cmp-head-actions button:hover { color: var(--ink); background: var(--sunk); }
.cmp-head-actions button { display: inline-grid; place-items: center; }
.cmp-head-actions svg { width: 17px; height: 17px; }
#cmp-min .when-min, .composer.min #cmp-min .when-open { display: none; }
.composer.min #cmp-min .when-min { display: block; }
.cmp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.from-pick { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 4px 8px; font-size: 13.5px; max-width: 100%; min-width: 0; }
.from-pick:focus { border-color: var(--accent); outline: none; }
.cmp-from-why { margin: 0; padding: 0 14px 8px 78px; font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--line); }
.composer .crow.has-why { border-bottom: 0; }
.crow { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 7px 14px; font-size: 14px; }
.crow-label { color: var(--faint); width: 56px; flex: none; }
.crow input { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 2px 0; }
.from-fixed { color: var(--muted); font-size: 13px; }
.composer .crow { position: relative; }
.chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; cursor: text; }
.chips input { flex: 1 1 120px; min-width: 120px; }
.chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; background: var(--sunk); border: 1px solid var(--line); border-radius: 999px; padding: 1px 2px 1px 9px; font-size: 13px; line-height: 20px; cursor: default; }
.chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.chip button { border: 0; background: none; color: var(--faint); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; line-height: 1; padding: 0; flex: none; cursor: pointer; }
.chip button:hover { background: var(--line); color: var(--ink); }
.chip.bad { border-color: color-mix(in srgb, var(--bad) 50%, var(--line)); background: var(--bad-soft); color: var(--bad); }
.cmp-suggest { position: absolute; left: 60px; right: 10px; top: calc(100% - 2px); z-index: 6; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; display: grid; gap: 1px; }
.cmp-suggest button { display: flex; align-items: baseline; gap: 8px; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 7px; font-size: 14px; color: var(--ink); min-width: 0; }
.cmp-suggest button b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-suggest button span { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-suggest button[aria-selected="true"], .cmp-suggest button:hover { background: var(--sunk); }
.cmp-suggest-label { margin-left: auto; flex: none; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 7px; }
.cmp-tools { display: flex; align-items: center; gap: 2px; padding: 5px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cmp-tools button { border: 0; background: none; min-width: 30px; height: 28px; border-radius: 6px; color: var(--muted); font-size: 14px; display: inline-grid; place-items: center; padding: 0 6px; }
.cmp-tools button:hover { background: var(--sunk); color: var(--ink); }
.cmp-tools button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.cmp-tools svg { width: 17px; height: 17px; }
.cmp-tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.cmp-tools .cmp-mode { margin-left: auto; font-size: 12.5px; }
.cmp-link { display: flex; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cmp-link input { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--bg); font-size: 13px; }
.cmp-editor, .cmp-plain { flex: 1; min-height: 120px; overflow-y: auto; padding: 12px 14px; outline: none; line-height: 1.6; font-size: 15px; border: 0; background: none; resize: none; }
.cmp-editor blockquote { margin: 6px 0; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.cmp-editor a { color: var(--accent); }
.cmp-editor ul, .cmp-editor ol { padding-left: 24px; }
/* Tables in what's being written (a signature's layout) keep their own size, not the data tables'. */
.cmp-editor table, .sig-editor table { width: auto; min-width: 0; font-size: inherit; }
.cmp-editor img { max-width: 100%; height: auto; }
.cmp-files { list-style: none; margin: 0; padding: 0 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.cmp-files:not(:empty) { padding-block: 8px; border-top: 1px solid var(--line); }
.cmp-files li { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 4px 4px 4px 10px; font-size: 13px; max-width: 100%; position: relative; overflow: hidden; }
.cmp-files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-files li small { color: var(--faint); white-space: nowrap; }
.cmp-files li .progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); }
.cmp-files li.failed { border-color: var(--bad); color: var(--bad); }
.cmp-drop { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent-soft) 85%, transparent); display: grid; place-items: center; font-weight: 600; color: var(--accent); pointer-events: none; }
.cmp-foot { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line); }
.cmp-foot .ico { width: 15px; height: 15px; }
.cmp-status { margin-left: auto; font-size: 12px; color: var(--faint); text-align: right; }
.cmp-error { padding: 0 14px 10px; min-height: 0; }
.cmp-error:empty { display: none; }
@media (max-width: 640px) {
  /* Phones: the whole screen, no dimmed page around it. */
  .composer { inset: 0; transform: none; width: 100%; height: 100%; border: 0; border-radius: 0; animation: none; }
  .cmp-head { border-radius: 0; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .composer.min { inset: auto 8px calc(52px + env(safe-area-inset-bottom, 0px)) 8px; height: auto; width: auto; border: 1px solid var(--line); border-radius: 12px; }
  .cmp-scrim { display: none; }
}

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; background: var(--ink); color: var(--bg); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; box-shadow: var(--shadow); max-width: calc(100% - 32px); }

/* ================= POSTMASTER ================= */
.pm { flex: 1; min-height: 0; overflow-y: auto; background: var(--surface); padding: 22px 26px 40px; }
.pm-inner { max-width: 1240px; margin: 0 auto; display: grid; gap: 22px; }
.pm-top { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; }
.pm-top h1 { font-family: var(--font-display); font-size: 28px; letter-spacing: -.025em; margin: 0; }
.pm-top p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; }
.kpi { padding: 14px 18px; border-right: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.kpi:last-child { border-right: 0; }
.kpi .k { font-size: 12px; color: var(--muted); }
.kpi .v { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi .d { font-size: 12px; color: var(--faint); }
.kpi.alert .v { color: var(--accent); }
.pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.pm-grid.wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
/* Two lists side by side: one height for both (the taller, at most 560px).
   The list scrolls inside; the head and "Show all" stay in view. */
.pm-grid.lists, #dash .pm-grid.lists { align-items: stretch; }
.pm-grid.lists > .panel { display: flex; flex-direction: column; max-height: 560px; }
.pm-grid.lists > .panel > * { flex-shrink: 0; }
.pm-grid.lists > .panel > :is(.req-list, .inv-list, .tscroll, .rules-list) { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; }
.pm-grid.lists > .panel > .panel-foot { margin-top: auto; }
.pm-grid.lists .tscroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.panel h2 { margin: 0; font-size: 15px; font-weight: 650; }
.panel-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; flex-wrap: wrap; }
.panel-head p { font-size: 12.5px; color: var(--faint); margin: 2px 0 0; }
/* Lists in panels: a line between items, the same room above and below it. */
.req-list, .inv-list { display: grid; gap: 14px; }
.req { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.req:first-child { border-top: 0; padding-top: 0; }
.req-list .list-empty, .inv-list .list-empty { padding: 4px 0; }
.panel-foot:empty { display: none; }
.panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.panel-foot a { color: var(--accent); font-weight: 600; text-decoration: none; }
.panel-foot a:hover { text-decoration: underline; }
.panel-foot .pager { display: flex; gap: 6px; margin-left: auto; }
.panel-foot .pager a, .panel-foot .pager span.off { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; }
.panel-foot .pager span.off { color: var(--faint); }
.panel-foot .pager a:hover { text-decoration: none; background: var(--sunk); }
.seg-n { margin-left: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
/* "‹ Inbox": every page that goes back to the mail (Settings, Agenda), the same. */
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; margin: 0 0 6px -4px; justify-self: start; }
.back-link svg { width: 18px; height: 18px; }
.back-link:hover { text-decoration: underline; }
.set-nav .back-link { padding: 4px 6px; margin: 0 0 8px; }
@media (max-width: 860px) { .set-nav .back-link { margin: 0 6px 0 0; white-space: nowrap; align-self: center; } }
.req-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.req-top .mono { font-size: 13.5px; font-weight: 500; }
.req-top small, .req-contact { color: var(--faint); font-size: 12px; }
.req p { margin: 0; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.req-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; padding-top: 14px; border-top: 1px solid var(--line); align-items: center; }
.inv:first-child { border-top: 0; padding-top: 0; }
.inv .code { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; user-select: all; }
.inv small { color: var(--faint); font-size: 12px; grid-column: 1 / -1; }
.new-inv { display: flex; gap: 8px; align-items: center; background: var(--accent-soft); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap; }
.new-inv .code { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: .06em; flex: 1; min-width: 0; user-select: all; }
.tscroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
table.small { min-width: 560px; }
th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.r, td.r { text-align: right; }
td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
td .mono { font-size: 12.5px; }
td .why { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.btn-danger-solid { background: var(--bad); color: var(--surface); border-color: var(--bad); font-weight: 600; }
.btn-danger-solid:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Settings → Invites (js/myinvites.js) ---------- */
.inv-why { display: flex; gap: 12px; align-items: flex-start; background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; line-height: 1.5; }
.inv-why.bad { background: var(--bad-soft); }
.inv-why svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--accent); }
.inv-why.bad svg { color: var(--bad); }
.inv-why p { margin: 0; }
.inv-why a { color: var(--accent); font-weight: 600; }
.inv-body { display: grid; gap: 14px; }
.inv-body.dim { opacity: .45; }
.inv-body .note:empty { display: none; }
.inv-count { display: flex; gap: 14px; align-items: center; }
.inv-dots { display: flex; gap: 5px; }
.inv-dots i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; }
.inv-dots i.on { background: var(--accent); }
.inv-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 14px; }
.inv-row:first-child { border-top: 0; }
.inv-text { display: grid; gap: 3px; min-width: 0; }
.inv-sub { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.inv-sub .mono { font-family: var(--font-mono); }
.inv-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- /postmaster/addresses (js/pm_addresses.js) ---------- */
.inv-set-row { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; }
.inv-set-row .field label, .inv-set-row .field .label { font-size: 12px; color: var(--muted); }
.inv-set-row .input { width: 92px; padding: 7px 10px; }
.inv-on-row { display: flex; align-items: center; gap: 8px; height: 36px; font-size: 14px; }
.with-unit { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.inv-settings .note:empty { display: none; }
.addr-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.addr-tools input[type="search"] { width: 240px; padding: 7px 12px; }
.addr-tools select { width: auto; margin-left: auto; padding: 7px 10px; }
.addr-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.addr-filter { border-radius: 999px; font-weight: 500; }
.addr-filter[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.addr-main { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.addr-list { flex: 999 1 640px; min-width: 0; }
.addr-list tbody tr { cursor: pointer; }
.addr-list td { white-space: nowrap; }
.addr-list tbody tr:hover td { background: var(--sunk); }
.addr-list tbody tr.sel td { background: var(--accent-soft); }
.addr-list tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.addr-side { flex: 1 1 340px; max-width: 420px; gap: 16px; position: sticky; top: 0; }
.addr-head { display: grid; gap: 6px; }
.addr-head .mono { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 13.5px; }
.kv > span:nth-child(odd) { color: var(--faint); }
.kv .mono { font-size: 12.5px; overflow-wrap: anywhere; }
.addr-blocks { display: grid; gap: 8px; }
.addr-block { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--bad-soft); border-radius: 10px; padding: 10px 12px; }
.addr-block div { display: grid; gap: 2px; font-size: 13px; min-width: 0; }
.addr-block b { color: var(--bad); }
.addr-block span { color: var(--muted); overflow-wrap: anywhere; }
.addr-group { display: grid; gap: 8px; }
.addr-group h3 { margin: 0; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.addr-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.addr-history { border-top: 1px solid var(--line); padding-top: 12px; }
.addr-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.addr-history li { display: flex; justify-content: space-between; gap: 10px; }
.addr-history small { color: var(--faint); white-space: nowrap; }
@media (max-width: 860px) { .addr-side { position: static; max-width: none; } .addr-tools select { margin-left: 0; } }

.block-modal { width: min(560px, 100%); gap: 16px; }
.block-modal .note:empty { display: none; }
.pm-modal { width: min(480px, 100%); }
.pm-modal h2 { overflow-wrap: anywhere; }
.pm-modal-head { display: grid; gap: 6px; }
.pm-modal-body { display: grid; gap: 12px; justify-items: start; }
.pm-modal-body .field { width: 100%; }
.pm-modal .note:empty { display: none; }
.pm-modal-link { padding-inline: 0; color: var(--accent); }
.pm-choices { display: grid; gap: 4px; width: 100%; }
.pm-warn { color: var(--warn); font-size: 13px; margin: 0; }
.pm-choice { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; cursor: pointer; }
.pm-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pm-choice input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.pm-password-row { display: flex; gap: 8px; align-items: center; width: 100%; }
.pm-password { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 17px; letter-spacing: .04em; background: var(--sunk); border-radius: 10px; padding: 10px 12px; user-select: all; overflow-wrap: anywhere; }
.seg-wrap { flex-wrap: wrap; flex: initial; }
.seg [role="radio"][aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.bk-reasons { display: grid; gap: 2px; }
.bk-reasons button { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border: 1px solid transparent; border-radius: 9px; background: none; font-size: 14px; color: var(--ink); text-align: left; }
.bk-reasons button:hover { background: var(--sunk); }
.bk-reasons button i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); flex: none; box-sizing: border-box; }
.bk-reasons button[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.bk-reasons button[aria-checked="true"] i { border: 4px solid var(--accent); }
.bk-date { width: 200px; }
.bk-checks { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; }
.bk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--muted); cursor: pointer; }
.bk-check b { color: var(--ink); }
.bk-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.bk-preview { background: var(--sunk); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.bk-preview span { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); }
.bk-preview p { color: var(--ink); }
.bk-actions { justify-content: flex-end; }
.section.danger-zone { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.danger-zone h2 { color: var(--bad); }
.danger-zone .btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.section form.ts-scan { max-width: 640px; }
.ts-scan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.ts-qr { background: #fff; border-radius: 10px; line-height: 0; border: 1px solid var(--line); }
/* The code's own white border is its quiet zone; crisp edges, no blur between modules. */
.ts-qr svg { display: block; width: 200px; height: 200px; max-width: 100%; shape-rendering: crispEdges; }
.ts-steps { display: grid; gap: 12px; min-width: 0; }
.ts-steps ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.ts-key { font-family: var(--font-mono); font-size: 13px; background: var(--sunk); border-radius: 6px; padding: 2px 6px; color: var(--ink); overflow-wrap: anywhere; user-select: all; }
.ts-codes { display: grid; gap: 12px; background: var(--sunk); border-radius: 10px; padding: 14px 16px; }
.ts-codes p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 70ch; }
.ts-codes p b { color: var(--ink); }
.ts-code-list li::marker { color: var(--faint); }
.ts-code-list { margin: 0; padding: 0; list-style-position: inside; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px 40px; font-size: 15px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ts-on { display: grid; gap: 12px; }
.ts-meta { margin: 0; font-size: 14px; color: var(--muted); }
.ts-trusted { display: grid; gap: 8px; margin-top: 6px; }
.ts-trusted h3 { margin: 0; font-size: 15px; }
.ts-trusted .hint { margin: 0; }
#ts-confirm-form { display: grid; gap: 10px; max-width: 420px; }
.note.warn { color: var(--warn); }
@media (max-width: 560px) { .ts-scan { grid-template-columns: minmax(0, 1fr); } .ts-code-list { grid-template-columns: max-content; } }
.storage { display: grid; gap: 6px; max-width: 420px; font-size: 13.5px; color: var(--muted); }
.storage .bar { background: var(--sunk); }
.storage.near-full { color: var(--warn); }
.storage.near-full .bar i { background: var(--warn); }
.import { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.import h3 { margin: 0; font-size: 15px; }
.import p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 70ch; }
.import-where { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.55; display: grid; gap: 2px; }
.import-job { display: grid; gap: 8px; background: var(--sunk); border-radius: 10px; padding: 12px 14px; max-width: 560px; }
.import-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 14px; }
.import-line b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-line span { color: var(--muted); font-size: 13px; white-space: nowrap; }
.import-job .bar { background: var(--line); }
.import-job .bar i { transition: width .3s; }
.import-job .note { margin: 0; color: var(--muted); }
.import-job .note.bad { color: var(--bad); }
.hdr-toggle { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; padding: 1px 4px 1px 0; color: var(--faint); font-size: 12.5px; border-radius: 6px; max-width: 100%; cursor: pointer; }
.hdr-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hdr-toggle svg { width: 13px; height: 13px; flex: none; transition: transform .15s; }
.hdr-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr-toggle:hover { color: var(--ink); }
.hdr-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 14px; margin: 12px 0 0; padding: 12px 14px; background: var(--sunk); border-radius: 10px; font-size: 13px; }
.hdr-details dt { color: var(--faint); }
.hdr-details dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hdr-details dd span { font-family: var(--font-mono); font-size: 12.5px; }
.hdr-links { display: flex; gap: 14px; flex-wrap: wrap; padding-top: 4px; }
.hdr-links a { color: var(--accent); font-size: 13px; }
.card-body > .hdr-details { margin: 0 0 12px; }
/* ---------- phones: the reader (app.js, "phones") ---------- */
.phone-only { display: none !important; }
.sheet-scrim { position: fixed; inset: 0; z-index: 60; background: rgb(10 14 20 / .38); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 520px; max-height: 82vh; overflow-y: auto; background: var(--surface); border-radius: 18px 18px 0 0; padding: 6px 8px calc(14px + env(safe-area-inset-bottom, 0px)); display: grid; box-shadow: var(--shadow); }
.sheet-grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line); justify-self: center; margin: 4px 0 8px; }
.sheet-item { display: flex; align-items: center; gap: 14px; border: 0; background: none; padding: 12px; border-radius: 10px; font-size: 15.5px; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; }
.sheet-item:hover, .sheet-item:focus-visible { background: var(--sunk); outline: none; }
.sheet-item svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.sheet-item .dot { width: 11px; height: 11px; border-radius: 3px; margin: 0 4.5px; flex: none; }
.sheet-item.danger, .sheet-item.danger svg { color: var(--bad); }
.sheet-sep { height: 1px; background: var(--line); margin: 4px 10px; }
.sheet-q { font-size: 16px; padding: 4px 12px 0; }
.sheet-note { margin: 4px 0 0; padding: 0 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.sheet-acts { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 12px 4px; }
.missing-note { color: var(--warn); background: var(--warn-soft); }
.missing-note svg { color: var(--warn); }
.closed-note { background: var(--ok-soft); color: var(--ink); border-radius: 10px; padding: 10px 14px; margin: 0 0 24px; font-size: 14px; }
.rules-list { display: grid; }
.rules-list div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.rules-list div:first-child { border-top: 0; padding-top: 0; }
.rules-list span:last-child { font-family: var(--font-mono); font-size: 12.5px; text-align: right; }
.block-add { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; }
.block-add .input { font-size: 13px; }
.block-add .input:first-child { font-family: var(--font-mono); }

/* ---------- postmaster: views, ranges, the dashboard ---------- */
.seg { display: flex; background: var(--sunk); border-radius: 9px; padding: 3px; gap: 2px; flex: none; }
.seg button, .seg a { border: 0; background: none; padding: 5px 12px; border-radius: 7px; font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.seg button:hover, .seg a:hover { color: var(--ink); }
.seg button[aria-pressed="true"], .seg a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
#dash .pm-grid { align-items: start; }
.pm-top-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kpi .v.bad { color: var(--bad); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sw-out { background: var(--accent); fill: var(--accent); }
.sw-local { background: color-mix(in srgb, var(--accent) 35%, var(--surface)); fill: color-mix(in srgb, var(--accent) 35%, var(--surface)); }
.sw-in { background: var(--postmark); fill: var(--postmark); }
.sw-spam { background: var(--warn); fill: var(--warn); }
.sw-blocked { background: var(--faint); fill: var(--faint); }
.sw-refused { background: color-mix(in srgb, var(--bad) 60%, var(--surface)); fill: color-mix(in srgb, var(--bad) 60%, var(--surface)); }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .gl { stroke: var(--line); stroke-width: 1; }
.chart .ax { fill: var(--faint); font-size: 11px; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.chart .hit { fill: transparent; }
.chart-empty { position: absolute; inset: 0 0 24px 34px; display: grid; place-items: center; margin: 0; font-size: 13px; color: var(--faint); pointer-events: none; }
.tip { position: absolute; z-index: 3; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; padding: 7px 10px; border-radius: 8px; white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); display: grid; gap: 3px; font-variant-numeric: tabular-nums; }
.tip b { font-size: 12.5px; }
.tip-row { display: flex; align-items: center; gap: 6px; }
.tip .sw { outline: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); }
.relay { gap: 14px; }
.relay-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13.5px; }
.relay-row > span:first-child { color: var(--muted); }
.relay-meter { display: grid; gap: 6px; }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--sunk); }
.meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); max-width: 100%; }
.meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); border-radius: 1px; }
.limits { display: grid; border-top: 1px solid var(--line); padding-top: 6px; }
.limits div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 5px 0; }
.limits div span:first-child { color: var(--muted); }
.spark { width: 96px; height: 26px; display: block; }
.spark path.l { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.spark path.a { fill: color-mix(in srgb, var(--muted) 14%, transparent); }
.spark circle { fill: var(--ink); }
tr.row-warn .spark path.l { stroke: var(--warn); } tr.row-warn .spark circle { fill: var(--warn); }
tr.row-bad .spark path.l { stroke: var(--bad); } tr.row-bad .spark path.a { fill: color-mix(in srgb, var(--bad) 14%, transparent); } tr.row-bad .spark circle { fill: var(--bad); }
td.hot { color: var(--bad); font-weight: 600; }
/* Five figures wrap 3 + 2, then 2 + 2 + 1; the borders follow the rows.
   (Specific enough to beat the four-figure rules further down.) */
@media (max-width: 1080px) {
  .kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis.five .kpi:nth-child(n) { border-right: 1px solid var(--line); border-top: 0; }
  .kpis.five .kpi:nth-child(3n), .kpis.five .kpi:nth-child(5) { border-right: 0; }
  .kpis.five .kpi:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.five .kpi:nth-child(n) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  .kpis.five .kpi:nth-child(2n), .kpis.five .kpi:nth-child(5) { border-right: 0; }
  .kpis.five .kpi:nth-child(-n+2) { border-top: 0; }
  .kpis.five .kpi:nth-child(5) { grid-column: 1 / -1; }   /* the fifth across, not alone in half a row */
}

/* ---------- a blocked address (templates/blocked.html) ---------- */
.blocked { display: flex; justify-content: center; padding-block: 8vh 40px; }
.blocked-card { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.blocked-card h1 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; line-height: 1.15; margin: 0; text-wrap: balance; }
.blocked-card p { margin: 0; color: var(--muted); line-height: 1.6; }
.blocked-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--bad-soft); color: var(--bad); display: grid; place-items: center; }
.blocked-mark svg { width: 26px; height: 26px; }
.blocked-card .blocked-addr { font-family: var(--font-mono); font-size: 13.5px; }
.blocked-why { background: var(--sunk); border-radius: 10px; padding: 12px 14px; line-height: 1.55; }
.blocked-why span { color: var(--muted); }
.blocked-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.blocked-card .blocked-small { font-size: 13px; color: var(--faint); }
@media (max-width: 480px) { .blocked-card { padding: 22px 18px; } }

/* ---------- error page ---------- */
.error-page { max-width: 520px; margin: 12vh auto 0; display: grid; gap: 14px; justify-items: start; }
.error-page h1 { font-family: var(--font-display); font-size: 32px; margin: 0; letter-spacing: -.02em; }
.error-page p { color: var(--muted); margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .mail { grid-template-columns: 200px minmax(0, 1fr); }
  .split { display: none; }
  .read { display: none; }
  /* Narrow screens: the open message takes the list's place. */
  .mail.reading .list { display: none; }
  .mail.reading .read.open { display: flex; }
  .read-nav { display: flex; align-items: center; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
  .pm-grid, .pm-grid.wide-left { grid-template-columns: minmax(0, 1fr); }
  .pm-grid.lists > .panel { max-height: none; }   /* one column: no scrolling inside the page's scroll */
}
@media (max-width: 860px) {
  .hero, .noask { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .noask > .form-strike { order: 0; }   /* one column: the words first */
  .letter { margin: 0 auto; }
  .feat { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .settings { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .set-nav { border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .set-nav .side-foot { flex-direction: row; margin: 0; padding: 0; }   /* Help at the end of the strip */
  .set-nav .fold { white-space: nowrap; }   /* one line of tabs that scrolls sideways */
  .set-main { padding: 20px 16px 40px; }
  .meters { display: none; }
  /* Too narrow for the top bar: both meters are in the account menu. */
  .who-meters { display: grid; gap: 10px; margin-top: 10px; font-family: var(--font-body); }
  .who-meters .quota { min-width: 0; flex: 1; }
  .cond, .cond.with-header { grid-template-columns: 1fr 1fr; }
  .cond input { grid-column: 1 / 2; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .mail { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .appbar .brand-name, .me-btn .mono, .search kbd { display: none; }
  .appbar { gap: 10px; }
  .folder-pick { display: block; max-width: 55%; }
  .list-head h1 { display: none; }
  .fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 15; right: 16px; bottom: calc(56px + env(safe-area-inset-bottom, 0px));   /* above the footer (40px) */ border: 0; border-radius: 16px; padding: 14px 18px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 15px; box-shadow: var(--shadow); }
  .fab svg { width: 20px; height: 20px; }
  .list { padding-bottom: 76px; }   /* the last message scrolls clear of Compose */
  .mail.reading .fab { display: none; }   /* reading: Reply and Forward are right there */
  .read.open { padding: 14px 16px 0; }
  /* The reader, laid out for a thumb: Archive, Delete, ⋯ up top; Reply,
     Reply all, Forward at the bottom; the old toolbar is in ⋯. */
  .read-tools { display: none; }
  .phone-only.icon-btn { display: inline-grid !important; width: 40px; height: 40px; color: var(--muted); }
  .phone-only.icon-btn svg { width: 20px; height: 20px; }
  .read-nav-gap.phone-only { display: block !important; flex: 1; }
  .read-nav { gap: 2px; padding-bottom: 6px; }
  /* At the bottom of the screen even under a short message (margin-top:
     auto in the reader's column), and sticky under a long one. */
  .read-dock.phone-only { display: flex !important; justify-content: center; order: 99; position: sticky; bottom: 0; z-index: 4;
    margin: auto -16px 0; padding: 6px 6px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
  .read.open > :nth-last-child(2) { margin-bottom: 18px; }   /* the content's gap above the dock */
  /* A third of the width each: two buttons (no Reply all) sit together in the middle. */
  .read-dock button { flex: 0 1 33.333%; min-width: 0; border: 0; background: none; display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 10px; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; }
  .read-dock button:hover, .read-dock button:focus-visible { background: var(--sunk); outline: none; }
  .read-dock svg { width: 21px; height: 21px; color: var(--accent); }
  /* A message's own actions: only its ⋯ (the rest wrap onto two rows here). */
  .card-acts > :not(.card-more) { display: none; }
  .card-acts { justify-content: flex-end; }
  .sender-add, .block-add { grid-template-columns: 1fr; }
  .rule { grid-template-columns: minmax(0, 1fr) auto; }
  .rule .grip, .rule .rule-actions .hits { display: none; }
  .pm { padding: 18px 14px 32px; }
  .two { grid-template-columns: 1fr; }
  .postmark { width: 160px; right: 40px; }
  .letter { padding: 22px; }
}
/* /postmaster/all/<list>: the page's heading names the list; the panel's own
   title stays for screen readers only. */
.pm[data-full] .panel-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ================= AGENDA (js/agenda.js) =================
   The people list on the left (its width dragged like the inbox's), the
   selected person's card or the form on the right; on a phone one at a time. */
.agenda { --ag-list-w: 360px; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, var(--ag-list-w)) minmax(0, 1fr);
  position: relative; background: var(--surface); }
.agenda .split { display: block; left: calc(var(--ag-list-w) - 4px); }   /* the inbox hides its own below 1080px */
.agenda.resizing, .agenda.resizing * { cursor: col-resize; user-select: none; }
.ag-side { border-right: 1px solid var(--line); overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.ag-side .back-link { margin: 14px 16px 0; }
.ag-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 6px 16px 10px; }
.ag-head h1 { margin: 0; font-family: var(--font-display); font-size: 24px; letter-spacing: -.02em; }
.ag-head p { margin: 2px 0 0; color: var(--faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ag-head .btn svg { width: 16px; height: 16px; }
.ag-head .btn.disabled { opacity: .5; pointer-events: none; }
.ag-search { margin: 0 16px 8px; max-width: none; width: auto; }
.ag-list { display: grid; }
.ag-letter { margin: 0; padding: 10px 16px 3px; font-size: 11.5px; letter-spacing: .08em; color: var(--faint); font-weight: 650; }
.ag-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 16px;
  border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.ag-letter + .ag-row { border-top: 0; }
.ag-row:hover { background: var(--sunk); }
.ag-row.on { background: var(--accent-soft); border-left-color: var(--accent); }
.ag-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ag-row .avatar { width: 34px; height: 34px; }
.ag-who { display: grid; min-width: 0; }
.ag-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-who .mono { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-phone { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ag-none { color: var(--muted); margin: 0; padding: 12px 16px; }
.ag-pane { overflow-y: auto; padding: 26px 32px 48px; min-width: 0; }
.ag-pane-top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 4px; }
.ag-back { display: none; align-items: center; gap: 2px; margin-right: auto; color: var(--accent); font-weight: 600; text-decoration: none; }
.ag-back svg { width: 20px; height: 20px; }
.ag-card { max-width: 620px; display: grid; gap: 18px; }
.ag-card-who { display: flex; gap: 18px; align-items: center; }
.ag-card-who h2 { margin: 0; font-family: var(--font-display); font-size: 26px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ag-note { margin: 4px 0 0; color: var(--muted); white-space: pre-line; }
.avatar.big { width: 68px; height: 68px; font-size: 26px; }
.ag-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.ag-acts .btn svg { width: 16px; height: 16px; }
.ag-write { position: relative; display: inline-flex; }
.ag-write > .btn-primary { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ag-write > .btn-primary:only-child { border-radius: 10px; }
.ag-more { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; padding: 9px 9px; }
.ag-more svg { width: 14px; height: 14px; }
.ag-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 10; min-width: 260px; display: grid; padding: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.ag-menu a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; }
.ag-menu a:hover { background: var(--sunk); }
.ag-menu small { color: var(--faint); }
.ag-details { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ag-detail { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--line); }
.ag-detail:first-child { border-top: 0; }
.ag-detail .k { color: var(--faint); font-size: 12.5px; }
.ag-detail .v { color: var(--accent); text-decoration: none; overflow-wrap: anywhere; white-space: pre-line; }
.ag-detail span.v { color: var(--ink); }
.ag-detail a.v:hover { text-decoration: underline; }
.ag-copy { border: 1px solid var(--line); background: var(--surface); border-radius: 7px; padding: 2px 8px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.ag-copy:hover { color: var(--ink); border-color: var(--faint); }
.ag-form { max-width: 620px; display: grid; gap: 16px; }
.ag-form-top { display: flex; align-items: center; gap: 8px; }
.ag-form-top h2 { margin: 0 auto 0 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -.015em; overflow-wrap: anywhere; }
.ag-group { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.ag-group legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; }
.ag-rows { display: grid; gap: 8px; }
.ag-item { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto auto; gap: 8px; align-items: start; }
.ag-item:not(.emails) { grid-template-columns: 120px minmax(0, 1fr) auto; }
.ag-item .sel { padding: 9px 8px; }
.ag-item textarea { resize: vertical; min-height: 44px; font: inherit; }
.ag-main, .ag-remove { width: 34px; height: 38px; border: 0; background: none; border-radius: 8px; color: var(--faint); font-size: 17px; cursor: pointer; }
.ag-main:hover, .ag-remove:hover { background: var(--sunk); color: var(--ink); }
.ag-main.on { color: var(--warn); }
.ag-add-row { justify-self: start; font-weight: 600; }
.ag-form textarea#ag-note { resize: vertical; font: inherit; }
.ag-remove-all { justify-self: start; }
.ag-empty { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; color: var(--muted); min-height: 60%; padding: 40px 16px; }
.ag-empty > svg { width: 44px; height: 44px; color: var(--faint); }
.ag-empty p { margin: 0; max-width: 46ch; line-height: 1.55; }
.ag-empty svg.inline { display: inline-block; width: 16px; height: 16px; margin: 0 1px; vertical-align: -3px; color: var(--accent); }
/* Narrower than two panes fit (a phone, a tablet upright): one at a time. */
@media (max-width: 900px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .agenda .split { display: none; }
  .agenda.showing .ag-side { display: none; }
  .agenda:not(.showing) .ag-pane { display: none; }
  .ag-side { border-right: 0; }
  .ag-pane { padding: 14px 16px 40px; }
  .ag-back { display: inline-flex; }
  .ag-pane-top { margin-bottom: 10px; }
  .ag-card-who { flex-direction: column; text-align: center; gap: 10px; }
  .ag-acts { justify-content: center; }
  .ag-detail { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
  .ag-detail .k { grid-column: 1 / -1; }
  .ag-item, .ag-item:not(.emails) { grid-template-columns: 110px minmax(0, 1fr) auto; }
  .ag-item.emails { grid-template-columns: 110px minmax(0, 1fr) auto auto; }
}
@media (max-width: 420px) {
  .ag-item, .ag-item:not(.emails), .ag-item.emails { grid-template-columns: minmax(0, 1fr) auto auto; }
  .ag-item .sel { grid-column: 1 / -1; justify-self: start; }
}

/* The + next to a sender or recipient not in the Agenda yet (js/app.js). */
.ag-add { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--faint); vertical-align: middle; cursor: pointer; opacity: .75; }
.ag-add svg { width: 15px; height: 15px; }
.ag-add:hover, .ag-add:focus-visible { color: var(--accent); background: var(--accent-soft); opacity: 1; outline: none; }
@media (pointer: coarse) { .ag-add { width: 30px; height: 30px; margin: -4px 0 -4px 2px; } }
.hdr-details .ag-all { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px; cursor: pointer; }
.hdr-details .ag-all:hover { text-decoration: underline; }


/* ================= CALENDAR INVITATIONS (js/app.js inviteCard) ================= */
.invite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; margin: 4px 0 16px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.inv-tile { width: 54px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); text-align: center; align-self: start; }
.inv-month { display: block; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 0; }
.inv-day { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; padding: 4px 0 6px; color: var(--ink); }
.inv-main { display: grid; gap: 4px; min-width: 0; }
.inv-title { font-size: 16px; overflow-wrap: anywhere; }
.inv-when { font-weight: 600; color: var(--ink); }
.inv-line { display: flex; gap: 6px; align-items: baseline; color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; min-width: 0; }
.inv-line svg { width: 14px; height: 14px; flex: none; align-self: center; color: var(--faint); }
.inv-line a { color: var(--accent); overflow-wrap: anywhere; }
.inv-people summary, .inv-more summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; width: max-content; }
.inv-people ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.inv-people li { display: flex; justify-content: space-between; gap: 12px; }
.inv-people small { color: var(--faint); white-space: nowrap; }
.inv-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.inv-answers { display: inline-flex; }
.inv-answers .btn { border-radius: 0; margin-left: -1px; }
.inv-answers .btn:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.inv-answers .btn:last-child { border-radius: 0 8px 8px 0; }
.inv-answers .btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); position: relative; z-index: 1; }
.inv-acts .btn-ghost svg { width: 16px; height: 16px; }
.inv-status { font-size: 12.5px; color: var(--ok); }
.inv-status:empty { display: none; }
.inv-note.bad { color: var(--bad); font-weight: 600; }
.invite.cancelled .inv-title { text-decoration: line-through; color: var(--muted); }
.invite.cancelled .inv-month { background: var(--faint); }
.inv-desc { margin-top: 6px; white-space: pre-line; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; max-height: 260px; overflow-y: auto; }
.inv-desc a { color: var(--accent); }
@media (max-width: 640px) {
  .invite { padding: 12px; gap: 12px; }
  .inv-tile { width: 46px; }
  .inv-day { font-size: 19px; }
}

/* ================= THE AGENDA PICKER IN THE COMPOSER (js/composer.js) ================= */
.cmp-agenda { flex: none; width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; color: var(--faint); display: grid; place-items: center; cursor: pointer; }
.cmp-agenda svg { width: 18px; height: 18px; }
.cmp-agenda:hover, .cmp-agenda:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; }
.ag-pick-scrim { z-index: 40; }
.ag-pick { width: min(460px, 100%); max-height: min(640px, calc(100% - 32px)); padding: 0; gap: 0; display: flex; flex-direction: column; overflow: hidden; }
.ag-pick-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.ag-pick-head h2 { flex: 1; margin: 0; font-size: 18px; }
.ag-pick-x svg { width: 18px; height: 18px; }
.ag-pick-search { margin: 0 16px 8px; width: auto; }
.ag-pick-list { flex: 1; min-height: 120px; overflow-y: auto; border-top: 1px solid var(--line); }
.ag-pick-item { border-bottom: 1px solid var(--line); }
.ag-pick-row, .ag-pick-email { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%;
  padding: 9px 16px; border: 0; background: none; text-align: left; color: var(--ink); font: inherit; cursor: pointer; }
.ag-pick-row:hover, .ag-pick-email:hover, .ag-pick-row:focus-visible, .ag-pick-email:focus-visible { background: var(--sunk); outline: none; }
.ag-pick-row .avatar { width: 32px; height: 32px; }
.ag-pick-who { display: grid; min-width: 0; }
.ag-pick-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pick-who .mono, .ag-pick-email .mono { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-pick-end { font-size: 12px; color: var(--faint); white-space: nowrap; }
.ag-pick-row:not([aria-expanded]) .ag-pick-end, .ag-pick-email .ag-pick-end { visibility: hidden; color: var(--ok); font-size: 15px; font-weight: 700; }
.added .ag-pick-end { visibility: visible !important; }
.ag-pick-row[aria-expanded="true"] { background: var(--sunk); }
.ag-pick-emails { display: grid; padding-bottom: 4px; background: var(--sunk); }
.ag-pick-email { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 60px; }
.ag-pick-email small { color: var(--faint); font-size: 11.5px; }
.ag-pick-empty { margin: 0; padding: 20px 16px; color: var(--muted); text-align: center; }
.ag-pick-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.ag-pick-count { font-size: 13px; color: var(--ok); }
@media (max-width: 640px) {
  .ag-pick-scrim { padding: 0; align-items: stretch; }
  .ag-pick { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; }
  .ag-pick-row, .ag-pick-email { padding-top: 12px; padding-bottom: 12px; }
}

/* ================= SETTINGS → WRITING: THE SIGNATURE (js/writing.js) ================= */
.sig-kind { justify-self: start; }
.sig-rich:not([hidden]) { display: grid; gap: 10px; }
.sig-rich .hint { margin: 0; }
.sig-editor-box { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg); }
.sig-tools { display: flex; gap: 2px; align-items: center; flex-wrap: wrap; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--surface); }
.sig-tools button { border: 0; background: none; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 7px; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; display: inline-grid; place-items: center; }
.sig-tools button svg { width: 15px; height: 15px; }
.sig-tools button:hover:not(:disabled), .sig-tools button[aria-pressed="true"] { background: var(--sunk); color: var(--ink); }
.sig-tools button:disabled { opacity: .4; cursor: default; }
.sig-tools .sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.sig-tools .sig-html-toggle { margin-left: auto; font-weight: 600; }
.sig-editor { min-height: 110px; max-height: 320px; overflow-y: auto; padding: 10px 12px; outline: none; font-size: 14px; line-height: 1.5; }
.sig-editor img { max-width: 100%; }
.sig-source { border: 0; border-radius: 0; min-height: 160px; font-size: 12.5px; background: var(--bg); resize: vertical; }
.sig-ask { display: flex; gap: 6px; align-items: center; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
.sig-ask .input { flex: 1 1 220px; min-width: 0; padding: 6px 9px; }
.sig-preview-box { display: grid; gap: 6px; }
.sig-preview-label { font-size: 12px; font-weight: 600; color: var(--faint); letter-spacing: .04em; text-transform: uppercase; }
#sig-preview { width: 100%; height: 160px; border: 1px dashed var(--line); border-radius: 10px; background: #fff; }

/* ================= THE VAULT (js/vault.js, mailapp/vault.py) ================= */
/* Its own dark header in light and dark mode alike: you always know you're in it. */
:root { --vault: #151d29; --vault-ink: #ffffff; --vault-muted: #c9d3e0; --vault-line: #3a4a60; --vault-key: #243246; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --vault: #0a0f16; --vault-key: #1d2836; } }
:root[data-theme="dark"] { --vault: #0a0f16; --vault-key: #1d2836; }

/* The sidebar: after Trash, a lock instead of a count. */
.fold .vault-lock { margin-left: auto; width: 14px; height: 14px; color: var(--faint); }
.fold .vault-lock.is-open { color: var(--ok); }

/* Open: the list's header and a line saying when it locks. */
.mail.in-vault .list-head { background: var(--vault); color: var(--vault-ink); border-bottom-color: var(--vault); }
.mail.in-vault .list-head small, .mail.in-vault .list-head .fetch { color: var(--vault-muted); }
.mail.in-vault .list-head .fetch:hover { background: var(--vault-key); color: var(--vault-ink); }
.mail.in-vault .folder-pick { background-color: var(--vault-key); color: var(--vault-ink); border-color: var(--vault-line); }
.vault-bar { position: sticky; top: 54px; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 0 16px 10px; background: var(--vault); color: var(--vault-muted); font-size: 12.5px; }
.vault-bar .vb-dot { width: 7px; height: 7px; border-radius: 50%; background: #4cc38a; flex: none; }
#vault-status { min-width: 0; }
.vb-lock { margin-left: auto; flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--vault-line); border-radius: 8px; background: none; color: var(--vault-ink); font-size: 12.5px; cursor: pointer; }
.vb-lock svg { width: 14px; height: 14px; }
.vb-lock:hover { background: var(--vault-key); }
.vb-lock:focus-visible { outline: 2px solid var(--vault-ink); outline-offset: 1px; }

/* A row's Vault button, beside the star (on hover, like the star). */
.msg .row-acts { grid-column: 3; grid-row: 2; justify-self: end; display: flex; align-items: center; gap: 2px; margin: -3px -2px -3px 0; }
.msg .row-acts .star { margin: 0; }
.vault-btn { border: 0; background: none; padding: 2px; border-radius: 6px; color: var(--faint); display: inline-grid; place-items: center; line-height: 0; cursor: pointer; opacity: 0; }
.vault-btn svg { width: 17px; height: 17px; }
.vault-btn:hover { color: var(--ink); background: var(--sunk); }
.msg:hover .vault-btn, .vault-btn:focus-visible { opacity: 1; }
@media (hover: none) { .msg .vault-btn { display: none; } }   /* phones: in the message's ⋯ */

/* Locked: the PIN screen where the list and the message would be. */
.vault-gate { grid-column: 2 / -1; display: grid; place-items: center; padding: 32px 16px; background: var(--sunk); overflow-y: auto; }
.mail.gated .list, .mail.gated .split, .mail.gated .read { display: none !important; }
.vg-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 34px 28px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; box-shadow: var(--shadow); }
.vg-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--vault); color: var(--vault-ink); display: grid; place-items: center; }
.vg-icon svg { width: 28px; height: 28px; }
.vg-card h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: 22px; letter-spacing: -.01em; }
.vg-say { margin: 0; color: var(--muted); font-size: 14px; min-height: 1.5em; }
.vg-say.bad { color: var(--bad); }
.vg-pin { position: relative; display: block; padding: 10px 0 4px; cursor: text; }
.vg-dots { display: flex; gap: 14px; }
.vg-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); transition: background-color .1s, border-color .1s; }
.vg-dots i.on { background: var(--ink); border-color: var(--ink); }
.vg-dots i.bad { border-color: var(--bad); }
/* The field the digits go into: over the dots, invisible (its caret too). */
.vg-pin input { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; font-size: 16px; color: transparent; caret-color: transparent; background: none; }
.vg-pin:focus-within .vg-dots i:not(.on) { border-color: var(--faint); }
.vg-pw { width: 100%; text-align: left; }
.vg-forgot { font-size: 13.5px; margin-top: 4px; color: var(--accent); }
.vg-keys, .vg-back { display: none; }
.vault-gate.shake .vg-dots { animation: vg-shake .35s; }
@keyframes vg-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.vault-gate.waiting .vg-dots { opacity: .45; }

/* Phones: the whole screen, dark, with a keypad like the phone's own lock screen. */
@media (max-width: 640px) {
  .vault-gate { grid-column: 1 / -1; background: var(--vault); padding: 14px 24px calc(20px + env(safe-area-inset-bottom, 0px)); place-items: stretch; align-content: start; }
  .vg-back { display: inline-flex; color: #9cc2ff; margin: 0 0 4px -6px; }
  .mail.gated .fab { display: none; }
  .vg-card { max-width: none; background: none; border: 0; box-shadow: none; color: var(--vault-ink); padding: 12px 0 0; justify-content: flex-start; }
  .vg-icon { background: var(--vault-key); }
  .vg-say { color: var(--vault-muted); }
  .vg-say.bad { color: #ff8a80; }
  .vg-dots i { border-color: #7d8ba0; }
  .vg-dots i.on { background: var(--vault-ink); border-color: var(--vault-ink); }
  .vg-pw label { color: var(--vault-muted); }
  .vg-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; width: 100%; max-width: 290px; padding-top: 18px; }
  .vg-key { width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--vault-key); color: var(--vault-ink); font-size: 28px; font-weight: 500; justify-self: center; cursor: pointer; touch-action: manipulation; }
  .vg-key:active { background: var(--vault-line); }
  .vg-key.vg-del { background: none; font-size: 15px; color: var(--vault-muted); }
  .vg-forgot-key { justify-self: center; align-self: center; font-size: 13.5px; color: #9cc2ff; text-decoration: none; }
  .vg-forgot { display: none; }
  .vault-bar { top: 52px; }
}
/* Settings → Security → Vault */
.vault-on:not([hidden]) { display: grid; gap: 14px; }
.vault-on .field { max-width: 420px; display: grid; gap: 6px; }
.vault-on .sel { width: 100%; }
.vault-on .note:empty { display: none; }

/* ================= HELP (/help, mailapp/help.py, js/help.js) ================= */
.help { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr); background: var(--surface); }
.help-nav { border-right: 1px solid var(--line); padding: 16px 10px 32px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.help-nav .back-link { padding: 4px 6px; margin: 0 0 8px; }
.help-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; margin: 0 2px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.help-search svg { width: 16px; height: 16px; color: var(--faint); flex: none; }
.help-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; }
.help-search:focus-within { border-color: var(--accent); }
.help-chapters { display: flex; flex-direction: column; gap: 1px; }
.help-grp { margin: 14px 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.help-ch { display: block; padding: 6px 10px; border-radius: 7px; color: var(--muted); font-size: 14px; text-decoration: none; }
.help-ch:hover { background: var(--sunk); color: var(--ink); }
.help-ch.on { background: var(--accent-soft); color: var(--ink); font-weight: 600; }
.help-main { min-width: 0; overflow-y: auto; padding: 30px 40px 60px; scroll-padding-top: 20px; }
.help-page { display: flex; gap: 40px; align-items: flex-start; }
.help-article { flex: 1 1 auto; min-width: 0; max-width: 760px; }
.help-article h1, .help-home h1 { font-family: var(--font-display); font-size: 32px; letter-spacing: -.02em; margin: 0 0 12px; text-wrap: balance; }
.help-article h2 { font-size: 20px; margin: 34px 0 10px; letter-spacing: -.01em; scroll-margin-top: 20px; }
.help-article p, .help-article li { font-size: 15.5px; line-height: 1.65; }
.help-article p { margin: 0 0 12px; }
.help-article ul, .help-article ol { margin: 0 0 14px; padding-left: 22px; }
.help-article li { margin-bottom: 6px; }
.help-lede { font-size: 17px !important; color: var(--muted); }
.help-crumb { margin: 0 0 6px !important; font-size: 12.5px !important; color: var(--faint); }
.help-up { display: none; }
.help-article code, .help-table code { font-family: var(--font-mono); font-size: 13px; background: var(--sunk); border-radius: 5px; padding: 1px 6px; }
.help-article kbd, .help-home kbd, .help-panel kbd { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; min-width: 24px; display: inline-grid; place-items: center; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; padding: 0 6px; line-height: 22px; background: var(--surface); color: var(--ink); }
/* Numbered steps: big numbers that match the marks on the pictures. */
ol.help-steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 10px; }
ol.help-steps > li { counter-increment: step; position: relative; padding-left: 38px; margin: 0; min-height: 28px; }
ol.help-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--mark, #e8590c); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
:root { --mark: #e8590c; }
/* A screenshot, its marks drawn over it in its own pixels. */
.help-shot { margin: 8px 0 18px; }
.hs-frame { position: relative; display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); background: var(--bg); }
.hs-frame img { display: block; width: 100%; height: auto; }
.hs-marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hs-marks circle { fill: var(--mark); stroke: #fff; stroke-width: 4; }
.hs-marks text { fill: #fff; font: 700 22px var(--font-body); text-anchor: middle; }
.help-shot.phone { max-width: 300px; }
.help-shot.phone .hs-frame { border-radius: 22px; }
.help-shot figcaption { font-size: 13px; color: var(--faint); margin-top: 6px; }
.help-note { display: flex; gap: 10px; align-items: flex-start; background: var(--accent-soft); border-radius: 10px; padding: 12px 14px; margin: 6px 0 16px; font-size: 14.5px; line-height: 1.55; }
.help-note svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--accent); }
.help-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14.5px; min-width: 0; }
.help-table th, .help-table td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-top: 1px solid var(--line); }
.help-table th { font-weight: 600; white-space: nowrap; }
.help-table tr:first-child th[scope="col"] { color: var(--faint); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; border-top: 0; }
.help-keys { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; align-items: center; margin: 0 0 10px; }
.help-keys dt { display: flex; gap: 5px; align-items: center; }
.help-keys dd { margin: 0; font-size: 15px; }
.help-key-join { font-size: 12px; color: var(--faint); }
/* The phone's own menus, drawn: where Add to Home Screen is. */
.help-howto { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.help-howto .help-steps { flex: 1 1 340px; }
.help-device { flex: 0 1 260px; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); box-shadow: var(--shadow); font-size: 14px; }
.hd-title { font-size: 12px; color: var(--faint); padding: 2px 8px 6px; }
.hd-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; background: var(--surface); }
.hd-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--sunk); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.hd-plus { background: var(--accent); color: var(--accent-ink); }
.hd-pick { font-weight: 600; outline: 2px solid var(--mark); }
.hd-mark { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--mark); color: #fff; font-size: 12px; display: grid; place-items: center; }
.help-next { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 36px; padding-top: 16px; font-size: 14.5px; }
.help-next a { text-decoration: none; font-weight: 600; }
.help-toc { flex: 0 0 200px; position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; padding-top: 60px; }
.help-toc-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.help-toc a { text-decoration: none; color: var(--muted); }
.help-toc a:hover { color: var(--accent); }
/* /help: the contents. */
.help-home { max-width: 1000px; flex: 1; }
.help-contents { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px 20px; margin-top: 22px; }
.help-contents h2 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px; }
.help-contents section { display: grid; gap: 8px; align-content: start; }
.help-card { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface); }
.help-card:hover { border-color: var(--accent); }
.help-card b { font-size: 15px; }
.help-card span { font-size: 13.5px; color: var(--muted); }
.help-still { margin-top: 28px; color: var(--muted); font-size: 14px; }
/* Search results take the page's place while there's something typed. */
.help-results { max-width: 760px; display: grid; gap: 4px; }
.help-results h2 { font-size: 13px; color: var(--faint); font-weight: 600; margin: 0 0 8px; }
.help-hit { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--ink); }
.help-hit:hover, .help-hit:focus-visible { background: var(--sunk); }
.help-hit small { color: var(--faint); font-size: 12px; }
.help-hit b { font-size: 15px; }
.help-hit span { font-size: 13.5px; color: var(--muted); }
.help-hit mark { background: var(--accent-soft); color: inherit; border-radius: 3px; }
@media (max-width: 1080px) { .help-toc { display: none; } }
/* Phones and small tablets: the contents, then one chapter at a time. */
@media (max-width: 860px) {
  .help { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .help-nav { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px 10px; overflow: visible; }
  .help-nav .back-link { margin-bottom: 6px; }
  .help-chapters { display: none; }
  .help.in-chapter .help-nav { display: none; }   /* a chapter: "‹ Help" above it goes back to the contents */
  .help-up { display: inline-flex; margin-bottom: 10px; }
  .help-main { padding: 18px 16px 48px; }
  .help-article h1, .help-home h1 { font-size: 27px; }
  .help-table th { white-space: normal; }
}

/* The Help panel on the mail page (_help_panel.html, js/helppanel.js). */
.hp-scrim { position: fixed; inset: 0; z-index: 40; background: rgb(16 24 40 / .22); }
.help-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--surface); box-shadow: -20px 0 40px -20px rgb(16 24 40 / .45); transform: translateX(16px); opacity: 0; transition: transform .18s ease-out, opacity .18s ease-out; }
.help-panel.in { transform: none; opacity: 1; }
.help-open .appbar { position: relative; z-index: 42; }   /* above the panel, which opens under it */
.hp-head { display: flex; align-items: center; padding: 14px 18px 8px; }
.hp-head h2 { margin: 0; font-family: var(--font-display); font-size: 20px; }
.hp-head .icon-btn { margin-left: auto; width: 36px; height: 36px; }
.hp-tabs { display: flex; gap: 4px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.hp-tabs button { border: 0; background: none; padding: 10px 8px; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.hp-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.hp-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
.hp-body { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
.hp-body p, .hp-body li { font-size: 14px; line-height: 1.55; }
.hp-body ul { padding-left: 20px; display: grid; gap: 8px; margin: 0 0 14px; }
.hp-body .help-steps { margin: 0 0 14px; }
.hp-body .help-steps > li { font-size: 14px; }
.hp-body .help-shot { margin: 6px 0 14px; }
.hp-body code { font-family: var(--font-mono); font-size: 12.5px; background: var(--sunk); border-radius: 5px; padding: 1px 5px; }
.hp-where { margin: 0 0 10px; color: var(--muted); }
.hp-more { font-size: 14px; font-weight: 600; text-decoration: none; }
.hp-search { margin-bottom: 6px; }
.hp-search .help-search { margin: 0; }
.hp-group { margin: 16px 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.hp-topic { display: grid; gap: 1px; padding: 9px 10px; margin: 0 -10px; border-radius: 9px; text-decoration: none; color: var(--ink); }
.hp-topic:hover { background: var(--sunk); }
.hp-topic b { font-size: 14.5px; }
.hp-topic span { font-size: 13px; color: var(--muted); }
.hp-body .help-keys dd { font-size: 14px; }
.hp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); font-size: 13.5px; color: var(--faint); }
.hp-foot a { font-weight: 600; text-decoration: none; color: var(--accent); }
@media (pointer: coarse) { .hp-foot span { display: none; } }   /* no ? key on a phone */
.help-article a:not(.back-link), .hp-body a:not(.hp-topic) { color: var(--accent); }

/* ================= PUBLIC: header links, the stamps, /features, /contact ================= */
.site-nav { display: flex; align-items: center; gap: 20px; font-size: 14.5px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); padding-bottom: 2px; }

/* What's inside: a sheet of stamps. Each is paper with its edge punched in
   holes the colour of the page, its own ink, and a slight tilt. */
.stamps { max-width: 1120px; margin: 72px auto 0; display: grid; gap: 28px; }
.stamps-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.stamps h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.5rem); letter-spacing: -.025em; line-height: 1.05; margin: 8px 0 0; max-width: 40rem; text-wrap: balance; }
.stamps-mark { width: 118px; height: 118px; border-radius: 50%; border: 2.5px solid var(--postmark); color: var(--postmark); display: grid; place-items: center; text-align: center; text-decoration: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; transform: rotate(-8deg); transition: transform .2s; flex: none; }
.stamps-mark span { width: 96px; height: 96px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; }
.stamps-mark:hover { transform: rotate(0deg) scale(1.04); color: var(--accent); border-color: var(--accent); }
.stamps-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px; }
.ps { --ink: var(--accent); padding: 7px; background: radial-gradient(circle, var(--bg) 3.6px, transparent 4px) -7px -7px / 14px 14px, var(--paper); filter: drop-shadow(0 6px 10px rgb(16 24 40 / .10)); transition: transform .18s; }
.ps:nth-child(4n+1) { transform: rotate(-.8deg); } .ps:nth-child(4n+2) { transform: rotate(.6deg); }
.ps:nth-child(4n+3) { transform: rotate(-.4deg); } .ps:nth-child(4n) { transform: rotate(.9deg); }
.ps:hover { transform: rotate(-1.2deg) translateY(-3px); }
.ps-blue { --ink: var(--accent); } .ps-rust { --ink: #b4501f; } .ps-slate { --ink: var(--postmark); } .ps-green { --ink: #1e7a4f; }
.ps-paper { height: 100%; box-sizing: border-box; background: var(--paper); border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.ps-val { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.ps-art { height: 92px; display: grid; place-items: center; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.ps-art svg { width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ps h3 { margin: 2px 0 0; font-family: var(--font-display); font-size: 19px; letter-spacing: -.01em; line-height: 1.15; }
.ps p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ps-foot { margin-top: auto; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ps-plum { --ink: #7a4b9e; }

/* Start small, grow (landing.html): the two limits as small stamps, five steps each. */
.grow { max-width: 1120px; margin: 72px auto 0; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.grow h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.grow-copy > p { color: var(--muted); margin: 0 0 12px; max-width: 34rem; }
.grow-copy > p b { color: var(--ink); }
.grow-marks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.grow-marks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--muted); }
.grow-marks b { color: var(--ink); }
.grow-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; margin-top: 1px; }
.grow-tick svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.grow-rows { display: grid; gap: 26px; min-width: 0; }
.grow-row { display: grid; gap: 10px; }
.grow-label { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.grow-sheet { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ps.ts { padding: 5px; background: radial-gradient(circle, var(--bg) 2.6px, transparent 3px) -5px -5px / 10px 10px, var(--paper); }
.ts .ps-paper { padding: 9px 8px 8px; gap: 2px; min-height: 120px; }
.ts .ps-val { font-size: 9.5px; letter-spacing: .05em; }
.ts-val { margin-top: auto; font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.ts-unit { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); min-height: 2.4em; }
.ts .ps-foot { font-size: 8px; letter-spacing: .1em; margin-top: 4px; }
.ps.ts.later { opacity: .45; }
@media (max-width: 860px) { .grow { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
@media (max-width: 560px) {
  .grow-sheet { gap: 6px; }
  .ps.ts { padding: 4px; background: radial-gradient(circle, var(--bg) 2px, transparent 2.4px) -4px -4px / 8px 8px, var(--paper); }
  .ts .ps-paper { padding: 6px 4px 5px; min-height: 92px; }
  .ts-val { font-size: 17px; letter-spacing: -.04em; }
  .ts .ps-val, .ts-unit { font-size: 7.5px; letter-spacing: .02em; }
  .ts .ps-foot { display: none; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ps-rust { --ink: #e98a5c; } :root:not([data-theme="light"]) .ps-green { --ink: #4fcb8e; } }
:root[data-theme="dark"] .ps-rust { --ink: #e98a5c; } :root[data-theme="dark"] .ps-green { --ink: #4fcb8e; }

/* /features: each main feature in a band, text beside a real screenshot. */
.fx { max-width: 1120px; margin: 0 auto; }
.fx-top { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 48px 0 28px; }
.fx-top h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.03em; line-height: 1.03; max-width: 54rem; text-wrap: balance; }
.fx-top p { margin: 0; color: var(--muted); font-size: 1.08rem; max-width: 40rem; }
.fx-jump { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.fx-jump a { font-size: 13.5px; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.fx-jump a:hover { color: var(--ink); border-color: var(--accent); }
.fx-band { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding: 60px 0; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.fx-band:first-of-type { border-top: 0; }
.fx-band.flip { flex-direction: row-reverse; }
.fx-copy { flex: 1 1 340px; min-width: 0; display: grid; gap: 12px; align-content: start; }
.fx-copy h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
.fx-copy p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.fx-ticks { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.fx-ticks li { position: relative; padding-left: 28px; }
.fx-ticks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.fx-pic { flex: 1.4 1 480px; min-width: 0; }
.fx-pic img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.fx-pic.phone { display: flex; justify-content: center; }
.fx-pic.phone img { width: min(300px, 80%); border-radius: 28px; }
.fx-rest { padding: 60px 0; border-top: 1px solid var(--line); display: grid; gap: 20px; }
.fx-rest h2 { margin: 0; font-family: var(--font-display); font-size: 1.75rem; letter-spacing: -.02em; }
.fx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.fx-tiles div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 4px; align-content: start; }
.fx-tiles b { font-size: 15px; }
.fx-tiles span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.fx-cta { margin: 8px 0 0; background: #151d29; color: #fff; border-radius: 18px; padding: 32px 36px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.fx-cta h2 { margin: 0; font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -.02em; }
.fx-cta p { margin: 6px 0 0; color: #c9d3e0; }
.fx-cta-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.fx-cta .btn { background: #fff; color: #151d29; border: 0; font-weight: 700; text-decoration: none; }
.fx-cta .btn-ghost { background: none; color: #fff; border: 1px solid #3a4a60; }

/* /contact */
main.contact { max-width: 1120px; margin: 44px auto 0; display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; }
.contact-about { flex: 1 1 320px; display: grid; gap: 14px; }
.contact-about h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 4.4vw, 2.9rem); letter-spacing: -.03em; line-height: 1.05; }
.contact-about p { margin: 0; color: var(--muted); font-size: 1.05rem; }
.contact-about ul { margin: 0; padding-left: 20px; color: var(--muted); display: grid; gap: 6px; }
.contact-box { flex: 1 1 440px; min-width: 0; }
.contact-box .card { max-width: none; }
.contact-form textarea { resize: vertical; min-height: 140px; }
.contact-form .field { display: grid; gap: 6px; }
.contact-form label { font-size: 13.5px; font-weight: 600; }
.contact-form .optional { font-weight: 400; color: var(--faint); }
.contact-acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-sent { justify-items: start; }
.contact-sent h2 { margin: 0; font-size: 22px; }
.contact-sent p { margin: 0; color: var(--muted); }
.contact-check { width: 44px; height: 44px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; }
.contact-check svg { width: 22px; height: 22px; }
@media (max-width: 640px) {
  .site-nav { gap: 14px; font-size: 14px; flex: none; }
  .site-head .brand-name { font-size: 17px; }
  .site-head .brand svg { width: 30px; height: 30px; }
  .fx-band, .fx-band.flip { flex-direction: column; align-items: stretch; gap: 24px; padding: 40px 0; }
  .fx-pic, .fx-copy { flex-basis: auto; }
  .fx-cta { padding: 24px; }
}
.contact-about a { color: var(--accent); }
@media (max-width: 640px) {
  .stamps-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ps-paper { padding: 11px 11px 10px; gap: 6px; }
  .ps-val { font-size: 9.5px; }
  .ps-art { height: 62px; }
  .ps-art svg { width: 38px; height: 38px; }
  .ps h3 { font-size: 15.5px; }
  .ps p { font-size: 12.5px; }
  .ps-foot { display: none; }
  .stamps-mark { width: 92px; height: 92px; font-size: 9.5px; }
  .stamps-mark span { width: 74px; height: 74px; }
}

/* ================= OWN DOMAINS (Settings → Addresses, Domains) ================= */
.addr-pick { border: 0; margin: 0; padding: 0; min-width: 0; }
.my-addrs .item { grid-template-columns: minmax(0, 1fr) auto 64px; }
.my-addrs .addr-head { padding-block: 7px; background: var(--bg); font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.my-addrs .addr-head span:last-child { text-align: center; }
.my-addrs .addr-row.on { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.my-addrs .who { font-weight: 600; }
.addr-default { display: grid; place-items: center; cursor: pointer; }
.addr-default input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.pill-muted { color: var(--muted); background: var(--sunk); }
.pill-accent { color: var(--accent); background: var(--accent-soft); }
.dom-row { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
.dom-ico { color: var(--muted); display: grid; }
.dom-ico svg { width: 20px; height: 20px; }
.dom-row .who { font-weight: 600; }

.domain-modal { width: min(560px, 100%); }
.dm-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.dm-kinds > legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.dm-kind { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.dm-kind.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
.dm-kind > input { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); }
.dm-kind small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.dm-kind > div { display: grid; gap: 8px; min-width: 0; }
.dm-kind .sel { justify-self: start; font-family: var(--font-mono); font-size: 13px; padding: 4px 8px; }
.dm-sends { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.dm-sends legend { padding: 0; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dm-sends label { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 6px; align-items: start; font-size: 13.5px; color: var(--muted); }
.dm-sends label b { color: var(--ink); }
.dm-sends input { accent-color: var(--accent); margin: 3px 0 0; }
.dm-sends:disabled { opacity: .55; }

.dom-head { display: grid; gap: 8px; }
.crumbs { font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.dom-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dom-title > span { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.dom-page #dom-intro { margin: 0; color: var(--muted); display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; font-size: 14px; }
#dom-body { display: grid; gap: 24px; margin-top: 24px; }
.dom-meter { display: inline-flex; align-items: center; gap: 8px; }
.dom-meter .bar { width: 120px; }
.dom-ok, .dom-bad { display: inline-flex; align-items: center; gap: 6px; }
.dom-ok { color: var(--ok); }
.dom-bad { color: var(--bad); }
.dom-ok svg, .dom-bad svg { width: 16px; height: 16px; display: block; }
.dom-steps { list-style: none; margin: 0; padding: 14px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.dom-steps .step { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.dom-steps .line { flex: 1; min-width: 20px; height: 2px; background: var(--line); }
.dom-steps .dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); flex: none; }
.dom-steps .dot svg { width: 13px; height: 13px; }
.dom-steps .done { color: var(--ok); }
.dom-steps .done .dot { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.dom-steps .now { color: var(--ink); }
.dom-steps .now .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.dom-add { max-width: 520px; flex-wrap: wrap; }
.dom-add .addr { flex: 1; min-width: 200px; }

.dns { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.dns-row { display: grid; grid-template-columns: 24px 52px minmax(0, 200px) minmax(0, 1fr) 30px; gap: 12px; align-items: start; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dns-row:last-child { border-bottom: 0; }
.dns-row.wrong { background: color-mix(in srgb, var(--bad-soft) 45%, transparent); }
.dns-head { padding-block: 7px; background: var(--bg); font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dns-group { padding: 6px 12px; background: var(--bg); border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.dns-type { font-weight: 600; }
.dns-name { font-family: var(--font-mono); font-size: 12.5px; overflow-wrap: anywhere; }
.dns-value { display: grid; gap: 4px; min-width: 0; }
.dns-value small { font-size: 12.5px; color: var(--faint); }
.dns-value small.bad { color: var(--bad); }
.dns .val { font-family: var(--font-mono); font-size: 12.5px; background: var(--bg); border: 1px solid var(--sunk); border-radius: 6px; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }
.dns-state { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.dns-state svg { width: 13px; height: 13px; }
.dns-state.ok { background: var(--ok-soft); color: var(--ok); }
.dns-state.bad { background: var(--bad-soft); color: var(--bad); }
.dns-state.wait { background: var(--sunk); color: var(--faint); }
.dns .copy { width: 30px; height: 30px; }
.dns-more { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: grid; gap: 10px; }
.dns-more summary { cursor: pointer; font-size: 14px; font-weight: 600; }
.dns-more .dns-row { grid-template-columns: 0 52px minmax(0, 220px) minmax(0, 1fr) 30px; }
@media (max-width: 760px) {
  .dns-row { grid-template-columns: 24px minmax(0, 1fr) 30px; }
  .dns-row .dns-type { display: none; }
  .dns-row .dns-name { grid-column: 2; }
  .dns-row .dns-value { grid-column: 2; grid-row: 2; }
  .dns-row .copy { grid-column: 3; grid-row: 1; }
  .dns-head { display: none; }
  .dns-more .dns-row { grid-template-columns: minmax(0, 1fr) 30px; }
  .dns-more .dns-row > span:first-child { display: none; }
  .dom-row { grid-template-columns: 22px minmax(0, 1fr); }
  .dom-row .pill, .dom-row .row-buttons { grid-column: 2; justify-self: start; }
}

/* The postmaster's domain requests and domains. */
.req-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.req-name .mono { font-weight: 600; }
.req-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px !important; }
.req-facts .ok { color: var(--ok); }
.req-facts .warn { color: var(--warn); }
.req-limit { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.req-limit .sel { padding: 4px 8px; }
.req-why { display: grid; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.pd-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.pd-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-head h2 { font-size: 16px; }
.pd-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.pd-facts { margin: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; }
.pd-facts dt { color: var(--muted); }
.pd-facts dd { margin: 0; overflow-wrap: anywhere; }
.pd-checks { display: flex; gap: 4px 10px; flex-wrap: wrap; font-weight: 600; }
.pd-checks .ok { color: var(--ok); }
.pd-checks .bad { color: var(--bad); }
.pd-checks .unknown { color: var(--faint); }
.pd-tools { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; justify-items: start; }
.pd-tools .hint { margin: 0; }
td .why.hot { color: var(--bad); }

.section-head .btn svg { width: 16px; height: 16px; flex: none; }
.section form.dom-add { display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.dns-state.wait svg { width: 15px; height: 15px; }

/* Members on an own domain (Settings → Domains → a domain). */
.people .person { grid-template-columns: 30px minmax(0, 1fr) auto; }
.person .who { font-family: var(--font-body); font-size: 14px; }
.person-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.person-top .mono { font-size: 13px; color: var(--muted); }
.avatar.faint { background: var(--sunk); color: var(--muted); }
.invite-box { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.invite-box h3, .section .field h3 { margin: 0; font-size: 14px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 3px 2px 9px; background: var(--surface); }
.tag button { width: 22px; height: 22px; border: 0; background: none; border-radius: 6px; color: var(--muted); padding: 0; font-size: 15px; line-height: 1; cursor: pointer; }
.tag button:hover { background: var(--sunk); color: var(--ink); }
.mono-ish { font-family: var(--font-mono); font-size: 13px; }
@media (max-width: 760px) {
  .people .person { grid-template-columns: 30px minmax(0, 1fr); }
  .people .person .row-buttons { grid-column: 2; justify-content: flex-start; margin-left: -10px; }
}
.member-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--muted); background: var(--sunk); border-radius: 12px; padding: 12px 14px; margin: 0; }
.member-note svg { width: 18px; height: 18px; }
.member-note b, .member-note .mono { color: var(--ink); }

/* Own domains on the landing page: envelopes to several addresses, one inbox. */
.owndom { max-width: 1120px; margin: 72px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.owndom h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.025em; line-height: 1.1; margin: 0 0 14px; text-wrap: balance; }
.owndom-copy > p { color: var(--muted); margin: 0 0 14px; max-width: 34rem; }
.owndom-copy .mono { color: var(--ink); }
.owndom .grow-marks { margin-bottom: 18px; }
.owndom-how { font-size: 14px; border-left: 3px solid var(--accent); padding-left: 12px; }
.owndom-how b { color: var(--ink); }
.owndom-art { display: grid; justify-items: center; gap: 10px; min-width: 0; }
.od-env { --od: var(--accent); position: relative; width: min(340px, 100%); box-sizing: border-box; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); padding: 18px 62px 14px 18px; font-family: var(--font-mono); display: grid; gap: 2px; overflow: hidden; }
.od-env::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: repeating-linear-gradient(135deg, var(--od) 0 9px, transparent 9px 18px); }
.od-to { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.od-env b { font-weight: 500; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.od-stamp { position: absolute; top: 14px; right: 14px; width: 30px; height: 36px; border-radius: 2px; background: var(--od); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px color-mix(in srgb, var(--od) 35%, transparent); }
.od-blue { --od: var(--accent); } .od-rust { --od: #b4501f; } .od-green { --od: #1e7a4f; } .od-slate { --od: var(--postmark); }
.od-1 { transform: translateX(-18px) rotate(-2deg); } .od-2 { transform: translateX(16px) rotate(1.4deg); margin-top: -4px; }
.od-3 { transform: translateX(-8px) rotate(-.8deg); margin-top: -4px; } .od-4 { transform: translateX(12px) rotate(1.8deg); margin-top: -4px; }
.od-arrow { width: 22px; height: 36px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.od-inbox { display: flex; align-items: center; gap: 14px; background: var(--accent); color: var(--accent-ink); border-radius: 14px; padding: 14px 22px; box-shadow: var(--shadow); }
.od-inbox svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.od-inbox b { display: block; font-family: var(--font-display); font-size: 19px; letter-spacing: -.01em; }
.od-inbox small { font-size: 13px; opacity: .85; }
.od-people { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin-top: 8px; max-width: 360px; }
.od-people span { font-family: var(--font-mono); font-size: 12.5px; border: 1px dashed var(--line); border-radius: 999px; padding: 2px 10px; color: var(--muted); background: var(--surface); }
.od-people small { flex-basis: 100%; text-align: center; font-size: 12.5px; color: var(--faint); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .od-rust { --od: #e98a5c; } :root:not([data-theme="light"]) .od-green { --od: #4fcb8e; } }
:root[data-theme="dark"] .od-rust { --od: #e98a5c; } :root[data-theme="dark"] .od-green { --od: #4fcb8e; }
@media (max-width: 860px) {
  .owndom { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .od-1, .od-2, .od-3, .od-4 { transform: none; }
}
.hero-lede a { color: var(--accent); font-weight: 600; }
.owndom { scroll-margin-top: 24px; }
@media (max-width: 560px) {
  /* A phone: the label goes under the address, the address keeps the width. */
  .my-addrs .item { grid-template-columns: minmax(0, 1fr) 44px; row-gap: 4px; }
  .my-addrs .item > :nth-child(2) { grid-column: 1; grid-row: 2; justify-self: start; }
  .my-addrs .item > :nth-child(2):empty { display: none; }
  .my-addrs .item > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
  .my-addrs .addr-head > :nth-child(2) { display: none; }
  .dom-row .who, .my-addrs .who { overflow-wrap: anywhere; }
}
/* Grid items shrink to the screen instead of growing to their longest line (DNS values). */
.dom-page, #dom-body > * { min-width: 0; }
@media (max-width: 560px) {
  /* A domain's lists on a phone: name and status on one line, the buttons under them. */
  .dom-page .item:not(.person) { grid-template-columns: minmax(0, 1fr) auto; }
  .dom-page .item:not(.person) > .row-buttons { grid-column: 1 / -1; justify-content: flex-start; margin-left: -10px; }
}

/* ================= THE ADDRESS SWITCH (js/addressfilter.js) ================= */
/* A colour per address, the same in the switch, its menu, the labels and the counts. */
:root { --ac0: #2f6bd8; --ac1: #b4501f; --ac2: #1e7a4f; --ac3: #5b6b86; --ac4: #7a4b9e; --ac5: #b07d10; --ac6: #0e7c86; --ac7: #c2185b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ac0: #7aa5f5; --ac1: #e98a5c; --ac2: #4fcb8e; --ac3: #a3b4d0; --ac4: #b993e0; --ac5: #e6b84f; --ac6: #4fc6cf; --ac7: #f06c9b; }
}
:root[data-theme="dark"] { --ac0: #7aa5f5; --ac1: #e98a5c; --ac2: #4fcb8e; --ac3: #a3b4d0; --ac4: #b993e0; --ac5: #e6b84f; --ac6: #4fc6cf; --ac7: #f06c9b; }
.adot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: var(--c, var(--faint)); }
.ac0 { --c: var(--ac0); } .ac1 { --c: var(--ac1); } .ac2 { --c: var(--ac2); } .ac3 { --c: var(--ac3); }
.ac4 { --c: var(--ac4); } .ac5 { --c: var(--ac5); } .ac6 { --c: var(--ac6); } .ac7 { --c: var(--ac7); }
.adot-all { background: conic-gradient(var(--ac0) 0 25%, var(--ac1) 0 50%, var(--ac2) 0 75%, var(--ac3) 0); }

.addr-switch { display: inline-flex; align-items: stretch; margin-left: 10px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); overflow: hidden; }
.addr-switch.on { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.asw-main { display: inline-flex; align-items: center; gap: 6px; flex: 1 1 auto; border: 0; background: none; color: var(--ink); font-size: 12.5px; padding: 3px 7px 3px 9px; min-width: 0; cursor: pointer; }
.addr-switch.on .asw-main { font-family: var(--font-mono); font-size: 12px; }
.asw-main svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.asw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.asw-main:hover { background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.asw-x { border: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); background: none; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 9px; cursor: pointer; }
.asw-x:hover { color: var(--ink); background: color-mix(in srgb, var(--sunk) 70%, transparent); }
.asw-main:focus-visible, .asw-x:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The list can be dragged as narrow as 280px: the switch gives way (its
   label ellipsed); a long folder name stops at 45%; the buttons never move. */
.list-head h1 { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-head .folder-pick { flex: none; }
.list-head > .addr-switch { flex: 0 1 auto; min-width: 88px; }
.list-meta { flex: none; padding-left: 8px; }
.list-meta small { white-space: nowrap; }

/* In <body>, placed under the switch when it opens (js/addressfilter.js): the list scrolls and would clip it. */
.amenu { position: fixed; z-index: 40; width: min(330px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: grid; gap: 1px; }
.amenu-scrim { display: none; }
.amenu-find { margin: 2px 2px 6px; padding: 7px 10px; font-size: 13px; }
.amenu-group { padding: 8px 10px 2px; font-size: 11px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
.amenu-group span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.aopt { display: grid; grid-template-columns: 15px 9px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.aopt:hover { background: var(--sunk); }
.aopt[aria-checked="true"] { background: var(--accent-soft); font-weight: 600; }
.aopt-tick { width: 14px; height: 14px; color: var(--accent); visibility: hidden; }
.aopt[aria-checked="true"] .aopt-tick { visibility: visible; }
.aopt-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aopt-label.mono { font-family: var(--font-mono); font-size: 12.5px; }
.aopt-n { font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.amenu-foot { border-top: 1px solid var(--line); margin-top: 6px; padding: 9px 10px 4px; display: grid; gap: 6px; }
.amenu-foot .check { font-size: 13.5px; }
.amenu-tip { margin: 0; font-size: 12px; color: var(--faint); line-height: 1.5; }
.amenu-tip .to-chip { font-size: 11px; }

/* The "to …" label as a button that sets the switch. */
.to-btn { border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; vertical-align: 1px; }
.to-btn .adot { width: 7px; height: 7px; }
.to-btn:hover, .to-btn:focus-visible { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--ink); outline: none; }

/* Folder counts that follow a kept filter. */
.fold .n .n-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--faint)); margin-right: 5px; vertical-align: 1px; }

/* The search box carries the switch as a to: token. */
.q-token { display: inline-flex; align-items: center; gap: 4px; flex: none; max-width: 55%; font-family: var(--font-mono); font-size: 12px; border-radius: 7px; padding: 1px 2px 1px 8px; background: var(--accent-soft); color: var(--ink); white-space: nowrap; }
.q-token span { overflow: hidden; text-overflow: ellipsis; }
.q-token button { border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 4px; cursor: pointer; }
.q-token button:hover { color: var(--ink); }

/* A phone: the switch under the folder name; its menu a sheet from the bottom. */
@media (max-width: 720px) {
  .amenu { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 75vh; border-radius: 18px 18px 0 0; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 51; }
  .amenu-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 50; background: color-mix(in srgb, var(--ink) 38%, transparent); }
  .aopt { min-height: 46px; font-size: 15px; }
  .amenu-foot .check { min-height: 44px; font-size: 15px; }
  .q-token { max-width: 45%; }
}