/* ------------------------------------------------------------------
   i60 Mail design system. Light neutral chrome with a teal accent and
   one sans-serif throughout; a matching dark set follows the device or
   the person's choice in Settings.
   ------------------------------------------------------------------ */
:root {
  color-scheme: light;
  --ink: #14242a; --ink-soft: #3e4f54; --muted: #5f7176;
  --harbor: #103542; --harbor-2: #174655; --harbor-line: #2d5b69;
  --accent: #0e5c58; --accent-strong: #0a4744; --accent-wash: #dcecea; --accent-line: #a9cfc5; --on-accent: #ffffff;
  --paper: #ffffff; --rail: #f6f8f8; --canvas: #eef2f3; --field: #e9eff0; --line: #e1e7e9; --line-soft: #eef2f3;
  --surface-2: #f7f9f9; --hover: #f1f5f5; --selected: #e8f3f1; --input-line: #b9c7c9; --input-line-hover: #93a8ab;
  --star: #b7791f; --star-wash: #fdf8ee; --star-line: #e6cfa6; --flag: #b9c9c6;
  --danger: #a12732; --danger-wash: #fdf1f2; --danger-line: #e3bcc0;
  --warn: #7a4f06; --warn-wash: #fdf6e7; --warn-line: #c2851b; --chip: #eceff0; --link: #0a6a8c;
  --ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --letter: var(--ui);
  --row-min: 64px; --row-pad-block: 11px;
  font-family: var(--ui); color: var(--ink); background: var(--canvas); font-size: 15px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 280px; min-height: 100dvh; display: flex; flex-direction: column; background: var(--canvas); }

/* Base controls */
h1, h2, h3 { color: var(--ink); line-height: 1.2; text-wrap: balance; }
h1 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 30px); font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { line-height: 1.55; overflow-wrap: anywhere; }
label { display: block; margin: 18px 0 6px; font-weight: 600; font-size: 14px; }
input, select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--input-line); border-radius: 8px; font: inherit; color: var(--ink); background: var(--paper); }
input:hover, select:hover { border-color: var(--input-line-hover); }
textarea { width: 100%; min-width: 0; resize: vertical; padding: 10px 12px; border: 1px solid var(--input-line); border-radius: 8px; font: inherit; line-height: 1.55; color: var(--ink); background: var(--paper); }
button { min-height: 44px; padding: 9px 16px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-weight: 600; background: var(--paper); color: var(--ink); cursor: pointer; }
button:hover { background: var(--accent-wash); border-color: var(--accent-line); }
button:disabled { opacity: .55; cursor: not-allowed; }
.primary { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 24px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.text-button { display: inline-block; min-height: 0; margin-top: 10px; padding: 6px 0; border: 0; background: transparent; color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 4px; }
.text-button:hover { background: transparent; color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1:focus, main:focus, h2:focus { outline: none; }
.hint, .footnote { font-size: 13.5px; color: var(--muted); }
.hint { margin: 6px 0 0; }
.footnote { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.notice { padding: 12px 14px; margin: 0 0 20px; border-radius: 8px; background: var(--accent-wash); border-left: 3px solid var(--accent); color: var(--ink); }
.notice.error { color: var(--danger); border-color: var(--danger); background: var(--danger-wash); }
.warning { padding: 12px 14px; border-radius: 8px; background: var(--warn-wash); border-left: 3px solid var(--warn-line); color: var(--warn); }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 10px 14px; border-radius: 8px; background: var(--paper); color: var(--ink); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Frame: brand bar and footer */
.masthead { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 20px; background: var(--harbor); color: #fff; font-size: 17px; }
.masthead strong { font-weight: 400; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #1d5563; color: #9fe0cf; font-size: 16px; line-height: 1; }
body > footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; width: min(100% - 40px, 1120px); margin: auto auto 24px; padding-top: 24px; color: var(--muted); font-size: 12.5px; }
main { flex: none; width: min(100% - 32px, 1120px); margin: 28px auto 40px; }

/* Sign in, recovery and reset: one focused card on the harbour */
body:is([data-view="login"], [data-view="request"], [data-view="reset"]) {
  background: radial-gradient(1200px 600px at 12% -10%, #1f5b69 0%, transparent 60%), radial-gradient(900px 500px at 110% 110%, #0c4a4b 0%, transparent 55%), var(--harbor);
}
body:is([data-view="login"], [data-view="request"], [data-view="reset"]) .masthead { justify-content: center; min-height: 0; padding: clamp(32px, 9vh, 88px) 20px 22px; background: transparent; font-size: 20px; }
body:is([data-view="login"], [data-view="request"], [data-view="reset"]) .brand-mark { width: 34px; height: 34px; font-size: 19px; }
body:is([data-view="login"], [data-view="request"], [data-view="reset"]) main { width: min(100% - 32px, 440px); margin: 0 auto 32px; padding: 36px clamp(22px, 5vw, 40px) 30px; border-radius: 16px; background: var(--paper); box-shadow: 0 30px 80px #06212a66; }
body:is([data-view="login"], [data-view="request"], [data-view="reset"]) > footer { color: #9fc3bb; justify-content: center; gap: 6px 18px; }
:is(#login-view, #request-view, #reset-view) h1 { margin-bottom: 6px; font-family: var(--letter); font-size: clamp(26px, 5vw, 32px); font-weight: 400; letter-spacing: -.01em; }
:is(#login-view, #request-view, #reset-view) .intro { margin: 0 0 8px; color: var(--ink-soft); }
:is(#login-view, #request-view, #reset-view) label:first-of-type { margin-top: 22px; }
:is(#login-view, #request-view, #reset-view) .primary { min-height: 48px; font-size: 15.5px; }
:is(#login-view, #request-view, #reset-view) .text-button { display: block; }
:is(#login-view, #request-view, #reset-view) .footnote { margin-top: 20px; }
.password-field { position: relative; }
.password-field input { padding-right: 72px; }
.password-toggle { position: absolute; top: 5px; right: 5px; min-height: 34px; padding: 4px 12px; border-color: transparent; background: transparent; color: var(--accent-strong); font-size: 13px; }
.password-toggle:hover { background: var(--accent-wash); }
#mfa-field { margin-top: 4px; padding: 2px 16px 14px; border-radius: 10px; background: var(--rail); }

/* Signed-in pages share a page header and card rhythm */
.home-title, .section-title, .title-actions, .settings-topbar, .settings-title { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; }
.title-actions { justify-content: flex-end; }
.title-actions button, .settings-topbar button, .settings-title button { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.home-title { padding-bottom: 6px; }
.home-title h1 { margin: 0; }
.intro { margin: 4px 0 20px; color: var(--ink-soft); }
.settings-topbar { margin-bottom: 18px; }
.settings-title { align-items: flex-start; margin-bottom: 4px; }
.settings-title .intro { flex: 1 1 320px; margin: 0; }
.settings-title .text-button { margin-top: 0; }
#settings-refresh-help { margin: 6px 0 22px; }

/* Account home */
#profile-email { margin: 6px 0 10px; font-size: 15px; }
#profile-mfa { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 6px 12px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-strong); font-size: 13.5px; font-weight: 600; }
#profile-mfa::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#home-view .section-title { margin: 8px 0 12px; }
#home-view .section-title h2 { margin: 0; }
.accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 0 0 20px; padding: 0; list-style: none; }
.accounts li { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow-wrap: anywhere; box-shadow: 0 1px 0 var(--paper) inset, 0 8px 24px #10354210; }
.accounts strong { font-family: var(--letter); font-size: 19px; font-weight: 400; color: var(--ink); }
.accounts p { margin: 0; font-size: 13px; color: var(--muted); }
.accounts meter { width: 100%; height: 6px; border-radius: 3px; }
.accounts li > button { margin-top: 8px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.accounts li > button:hover { background: var(--accent-strong); }
#home-view .footnote { max-width: 70ch; }

/* Settings and administration: section index + cards */
.page-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.page-nav { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 12px; background: var(--rail); border: 1px solid var(--line); }
.page-nav a { padding: 8px 12px; border-radius: 8px; color: var(--ink-soft); font-size: 14px; font-weight: 500; text-decoration: none; }
.page-nav a:hover { background: var(--accent-wash); color: var(--accent-strong); }
.page-cards { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.settings-card { scroll-margin-top: 20px; padding: 22px 24px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.settings-card > h2:first-child { margin: 0 0 12px; }
.settings-card h2 { scroll-margin-top: 20px; }
.settings-card h3 { margin: 22px 0 8px; }
.settings-card .primary { width: auto; min-width: 200px; margin-top: 20px; padding-inline: 20px; }
.settings-proof-form + .settings-proof-form { margin-top: 24px; }
.profile-details { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr); gap: 10px 18px; margin: 0; }
.profile-details dt { color: var(--muted); font-weight: 500; }
.profile-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.one-time { margin-top: 20px; padding: 18px; border: 1px solid var(--accent-line); border-radius: 12px; background: var(--surface-2); }
.one-time h3:first-child { margin-top: 0; }
.one-time pre { margin: 10px 0; padding: 12px; overflow-wrap: anywhere; white-space: pre-wrap; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 14px; }
.secret-list, .credential-list { padding: 0; list-style: none; }
/* One code per line: long codes wrap inside the card instead of running into each other. */
.secret-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 10px 0; font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 14px; }
.secret-list li { min-width: 0; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); overflow-wrap: anywhere; word-break: break-all; }
.mfa-step { margin-top: 18px; }
.mfa-step > h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.mfa-step-number { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 14px; }
.mfa-output > .mfa-step:first-child { margin-top: 0; }
.mfa-output > .mfa-step + .mfa-step { padding-top: 18px; border-top: 1px solid var(--line); }
/* The code stays dark-on-white in both themes so phone cameras can read it. */
.mfa-qr svg { display: block; width: min(240px, 100%); height: auto; padding: 0; border-radius: 8px; background: #ffffff; }
.mfa-qr:empty { display: none; }
.secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.secret-row pre { flex: 1 1 220px; min-width: 0; margin: 0; letter-spacing: 0.06em; }
.mfa-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.mfa-output > #settings-enrollment-dismiss { margin-top: 18px; }
.mfa-done { margin-top: 18px; padding: 14px 16px; border-radius: 8px; border-left: 3px solid var(--accent); background: var(--accent-wash); }
.mfa-done h3 { margin: 0 0 6px; }
.mfa-done p { margin: 0; }
.credential-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.credential-list li { padding: 12px 0; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.credential-list li:first-child { border-top: 0; }
.credential-list strong { display: block; color: var(--ink); }
.credential-list p { margin: 3px 0; font-size: 13.5px; color: var(--ink-soft); }
.credential-list button { min-height: 36px; margin-top: 6px; padding: 5px 12px; font-size: 13.5px; }

/* Administration specifics */
.admin-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.admin-columns > * { min-width: 0; }
.admin-checkbox { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.admin-checkbox input { flex: 0 0 20px; width: 20px; min-height: 20px; height: 20px; accent-color: var(--accent); }
/* Organization administration console: section nav, tables and a side panel */
.admin-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-bottom: 16px; }
.admin-header h1 { margin: 0; }
.admin-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-header-actions > button { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.admin-unlock-chip:not([hidden]) { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 3px 4px 3px 12px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-strong); font-size: 13.5px; font-weight: 600; }
.admin-unlock-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#admin-view #admin-lock { min-height: 30px; padding: 2px 10px; border-radius: 999px; }
.admin-console { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; align-items: start; }
.admin-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--rail); }
#admin-view .admin-nav button { justify-content: flex-start; min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font-size: 14px; font-weight: 500; text-align: left; }
#admin-view .admin-nav button:hover { background: var(--hover); color: var(--ink); }
#admin-view .admin-nav button[aria-current="page"] { background: var(--accent-wash); color: var(--accent-strong); font-weight: 650; }
.admin-nav-select { display: none; }
.admin-pages { min-width: 0; }
.admin-page { padding: 20px 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.admin-page h2 { margin: 0 0 12px; }
.admin-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-page-head h2 { margin: 0; }
#admin-view .admin-page-head .primary { width: auto; min-width: 0; margin: 0; padding-inline: 18px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; overflow-wrap: anywhere; }
.admin-table tbody tr { cursor: pointer; }
.admin-table tbody tr:hover { background: var(--hover); }
.admin-table tbody tr.selected { background: var(--selected); }
#admin-view .admin-row-open { min-height: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-weight: 600; text-align: left; overflow-wrap: anywhere; }
#admin-view .admin-row-open:hover { text-decoration: underline; }
.admin-table .usage { display: grid; gap: 3px; min-width: 120px; }
.admin-table .usage meter, .admin-drawer .usage meter { width: 100%; height: 6px; }
.admin-table .usage span, .admin-drawer .usage span { color: var(--muted); font-size: 12px; }
.admin-table td .chip + .chip { margin-left: 4px; }
.admin-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 8px; }
#admin-view .admin-count { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-align: left; }
#admin-view .admin-count:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.admin-count-value { font-family: var(--letter); font-size: 28px; color: var(--ink); }
.admin-count-label { color: var(--muted); font-size: 13px; font-weight: 600; }
.admin-attention { margin: 0; padding: 0; list-style: none; }
.admin-attention li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-left: 3px solid var(--warn-line); border-radius: 6px; background: var(--warn-wash); color: var(--warn); overflow-wrap: anywhere; }
.admin-attention li + li { margin-top: 8px; }
.admin-list { margin: 0; padding: 0; list-style: none; }
.admin-list > li { padding: 12px 4px; border-top: 1px solid var(--line-soft); overflow-wrap: anywhere; }
.admin-list > li:first-child { border-top: 0; }
.admin-list > li[data-webhook-id] { cursor: pointer; }
.admin-list > li.selected { background: var(--selected); }
.admin-list p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-soft); }
.admin-panel + .admin-panel { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.admin-panel h3 { margin: 0 0 8px; }
.admin-panel > button { margin-top: 12px; }
#admin-view button.danger { border-color: var(--danger, #c9483d); color: var(--danger, #c9483d); }
.admin-drawer-scrim:not([hidden]) { position: fixed; z-index: 29; inset: 0; background: #0b1a1f40; }
.admin-drawer:not([hidden]) { position: fixed; z-index: 30; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(460px, 100vw); border-left: 1px solid var(--line); background: var(--paper); box-shadow: -20px 0 60px #10354222; }
.admin-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.admin-drawer-head h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
#admin-view #admin-drawer-close { flex: none; width: 36px; min-height: 36px; padding: 0; }
.admin-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 24px; }
.admin-drawer-body h3 { margin: 22px 0 8px; font-size: 15px; }
.admin-drawer-body > p { margin: 0 0 8px; }
.admin-drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.admin-drawer-foot p { flex: 1 1 auto; margin: 0; color: var(--muted); font-size: 13px; }
#admin-view .admin-drawer-foot .primary { width: auto; min-width: 120px; margin: 0; }
.admin-field { margin-top: 12px; }
#admin-view .admin-field label { margin: 0 0 4px; }
.admin-field textarea[readonly] { font-family: ui-monospace, "Cascadia Mono", monospace; font-size: 13px; background: var(--rail); overflow-wrap: anywhere; resize: none; }
.admin-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.admin-inline .admin-field { flex: 1 1 220px; margin: 0; }
.admin-aliases, .admin-checklist, .admin-unavailable, .admin-checks { margin: 0; padding: 0; list-style: none; }
.admin-aliases li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.admin-aliases li > span:first-child { flex: 1 1 auto; overflow-wrap: anywhere; }
.admin-checklist li { padding: 2px 0; }
.admin-unavailable li { position: relative; padding: 4px 0 4px 18px; color: var(--muted); font-size: 13.5px; }
.admin-unavailable li::before { content: "–"; position: absolute; left: 4px; }
.admin-checks li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.admin-checks p { margin: 2px 0 0; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.admin-check-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-weight: 700; }
.admin-checks .ok .admin-check-mark { background: var(--accent-wash); color: var(--accent-strong); }
.admin-checks .bad .admin-check-mark { background: var(--warn-wash); color: var(--warn); }
.admin-record h4 { margin: 12px 0 0; }
.admin-proof-dialog { width: min(420px, calc(100vw - 28px)); padding: 22px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px #10354255; }
.admin-proof-dialog::backdrop { background: #0b1a1f66; }
.admin-proof-dialog h2 { margin: 0 0 6px; }
.admin-proof-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.admin-proof-dialog .primary { width: auto; margin: 0; }
@media (max-width: 760px) {
  .admin-console { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-nav { position: static; padding: 0; border: 0; background: transparent; }
  #admin-view .admin-nav button { display: none; }
  .admin-nav-select { display: block; }
  .admin-page { padding: 16px 14px 20px; }
  .admin-col-wide { display: none; }
  .admin-drawer:not([hidden]) { width: 100vw; border-left: 0; }
  #admin-view .admin-drawer-foot .primary { flex: 1 1 auto; }
  .admin-table .usage { min-width: 90px; }
}
#admin-view select { text-overflow: ellipsis; }
#admin-view .credential-list { max-height: 420px; overflow-y: auto; margin: 6px 0; padding: 0 4px; }
#admin-domain-result { margin-top: 14px; }

@media (max-width: 860px) {
  .page-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .page-nav { position: static; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 6px; }
  .page-nav a { flex: none; white-space: nowrap; }
  .admin-columns, .credential-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  main { width: calc(100% - 24px); margin-top: 18px; }
  .settings-card { padding: 18px 16px 20px; }
  .profile-details { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .profile-details dd { margin-bottom: 10px; }
  .title-actions { width: 100%; justify-content: flex-start; }
  .settings-card .primary { width: 100%; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------
   Mailbox. The list is a tool, the message is a letter: every control
   around the message stays quiet and compact so the letter can breathe.
   ------------------------------------------------------------------ */
#reader-view { font-family: var(--ui); color: var(--ink); font-size: 14px; }
body:has(#reader-view:not([hidden])) { background: var(--canvas); }
body:has(#reader-view:not([hidden])) .masthead,
body:has(#reader-view:not([hidden])) > footer { display: none; }
main:has(#reader-view:not([hidden])) { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
main:has(#reader-view:not([hidden])) > #status { pointer-events: none; position: fixed; z-index: 40; top: 64px; right: 16px; max-width: min(460px, calc(100vw - 32px)); margin: 0; border-radius: 6px; box-shadow: 0 10px 30px #10354226; background: var(--paper); }

#reader-view h1, #reader-view h2, #reader-view h3 { color: var(--ink); }
#reader-view p { line-height: 1.5; }
#reader-view label { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
#reader-view input, #reader-view select { min-height: 38px; padding: 7px 10px; border-color: var(--input-line); border-radius: 6px; color: var(--ink); font-size: 14px; }
#reader-view textarea { border-color: var(--input-line); border-radius: 6px; color: var(--ink); }
#reader-view button { min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 600; }
#reader-view button:hover { background: var(--accent-wash); border-color: var(--accent-line); }
#reader-view button:disabled { opacity: .5; cursor: not-allowed; }
#reader-view .primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; margin: 0; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#reader-view .primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
#reader-view :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#reader-view .hint { color: var(--muted); font-size: 12.5px; }
#reader-view .notice { margin: 0 0 16px; border-radius: 6px; background: var(--accent-wash); border-left-color: var(--accent); }
#reader-view kbd { font: 11px ui-monospace, "Cascadia Mono", monospace; }

/* App bar */
.reader-topbar { position: relative; z-index: 30; flex: none; display: grid; grid-template-columns: 232px minmax(0, 1fr) auto; align-items: start; gap: 16px; min-height: 60px; padding: 10px 16px 10px 0; background: var(--harbor); color: #e8f2f0; }
.reader-identity { align-self: start; min-height: 40px; }
.reader-identity { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-left: 20px; }
.reader-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; letter-spacing: .01em; color: #fff; }
.reader-brand strong { font-weight: 400; }
.reader-brand .icon { width: 20px; height: 20px; color: #7fd1bd; }
#reader-view .reader-address { margin: 1px 0 0 28px; overflow: hidden; color: #9fc3bb; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }

/* Search: one field, filters on demand */
#reader-view .mail-search { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 760px; margin: 0; padding: 0; border: 0; }
#reader-view .mail-search .search-filters { display: contents; }
#reader-view .mail-search .search-filters::details-content { display: contents; }
.search-bar { display: flex; flex: 1; align-items: center; min-width: 0; height: 40px; padding: 0 4px 0 12px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.search-bar:focus-within { box-shadow: inset 0 0 0 2px #7fd1bd; }
.search-bar > .icon { color: var(--muted); }
#reader-view .search-bar input { flex: 1; min-width: 0; min-height: 0; height: 38px; border: 0; background: transparent; padding: 0 8px; font-size: 14.5px; }
#reader-view .search-bar input:focus-visible { outline: 0; }
#reader-view .search-bar button { min-height: 30px; padding: 3px 10px; font-size: 12.5px; }
#reader-view .search-bar .search-submit { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#reader-view .search-bar .search-clear { border-color: transparent; color: var(--ink-soft); font-weight: 500; }
.search-filters { position: relative; }
.search-filters > summary { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid #2d5b69; border-radius: 8px; color: #d7e8e4; cursor: pointer; font-weight: 500; list-style: none; }
.search-filters > summary::-webkit-details-marker { display: none; }
.search-filters > summary:hover, .search-filters[open] > summary { background: var(--harbor-2); }
.search-filter-panel { order: 3; flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px; border-radius: 10px; background: var(--paper); color: var(--ink); }
.search-filter-panel .search-field { min-width: 0; }
.search-filter-panel select, .search-filter-panel input { width: 100%; }
#reader-view .search-filter-panel .search-date-help { grid-column: 1 / -1; margin: 0; }
#mail-search-status:empty { display: none; }

/* Three panes */
#reader-view:not([hidden]) { display: flex; flex-direction: column; height: 100dvh; }
.mailbox-layout { flex: 1; display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }
.folder-rail { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding: 16px 12px 20px; background: var(--rail); border-right: 1px solid var(--line); }
.reader-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.reader-skip:focus-visible { position: static; width: auto; height: auto; margin-bottom: 8px; padding: 8px 10px; clip-path: none; border-radius: 6px; background: var(--paper); color: var(--accent); font-weight: 600; white-space: normal; }
#reader-view .compose-button { width: 100%; min-height: 44px; margin: 0 0 14px; justify-content: flex-start; padding: 0 16px; border-radius: 10px; font-size: 14.5px; box-shadow: 0 6px 16px #0f686930; }
.folder-list, .view-list { list-style: none; margin: 0; padding: 0; }
.view-list { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rail-tools { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
#reader-view .folder-list button, #reader-view .rail-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font-weight: 500; font-size: 14px; text-align: left; overflow-wrap: anywhere; }
#reader-view .folder-list button:hover, #reader-view .rail-item:hover { background: var(--hover); color: var(--ink); }
#reader-view .folder-list button[aria-current], #reader-view .rail-item[aria-current] { background: var(--accent-wash); color: var(--accent-strong); font-weight: 650; }
#reader-view .folder-list .icon, #reader-view .rail-item .icon { color: currentColor; opacity: .85; }
#reader-view .rail-item kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--muted); }
#reader-view #folders-more { margin: 4px 0; }
.folder-manage, .mail-shortcuts { margin-top: 6px; padding: 8px 10px 0; font-size: 13px; }
.folder-manage summary, .mail-shortcuts summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.folder-manage[open] summary, .mail-shortcuts[open] summary { margin-bottom: 8px; }
#reader-view .folder-manage button { width: 100%; margin-bottom: 6px; }
.mail-shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; }
.mail-shortcuts dd { margin: 0; color: var(--ink-soft); }
.mail-shortcuts kbd { display: inline-block; min-width: 22px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); text-align: center; }

.mailbox-content { position: relative; display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; background: var(--paper); }
.mailbox-content > * { min-width: 0; }
#mail-search-status { grid-column: 1; grid-row: 1; margin: 0; padding: 10px 18px 0; }
#message-list-view { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); }
#message-list-view:first-child, #mail-search-status[hidden] + #message-list-view, #mail-search-status:empty ~ #message-list-view { grid-row: 1 / -1; }
#message-detail-view, #message-empty-view { grid-column: 2; grid-row: 1 / -1; min-height: 0; overflow-y: auto; }
#draft-list-view, #compose-view { grid-column: 1 / -1; grid-row: 1 / -1; min-height: 0; overflow-y: auto; }
/* Pane placement puts the composer in the reading column beside the list. */
#reader-view[data-compose="pane"] #compose-view { grid-column: 2; max-width: none; margin: 0; }
/* Inline placement: the reply sits under the message it answers. */
#message-detail-view > #compose-view { max-width: none; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); overflow: visible; }
#message-detail-view.inline-collapsed > :not(#compose-view, .message-navigation, #message-subject) { display: none; }
/* Full screen keeps the folders on desktop; phones and Expand use the whole width. */
#reader-view[data-compose="expanded"] .mailbox-layout { grid-template-columns: minmax(0, 1fr); }
#reader-view[data-compose="expanded"] .folder-rail { display: none; }
@media (max-width: 960px) {
  #reader-view.compose-active .mailbox-layout { grid-template-columns: minmax(0, 1fr); }
  #reader-view.compose-active .folder-rail { display: none; }
}
.compose-resume:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 14px; padding: 8px 10px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-wash); }
#reader-view .compose-resume p { flex: 1 1 100%; margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
#reader-view .compose-resume button { min-height: 32px; padding: 0 10px; font-size: 13px; }
@media (max-width: 760px) { #reader-view .compose-resume button { min-height: 44px; } }

/* Message list */
.message-list-heading { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 18px 10px; background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-soft); }
#folder-heading { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; overflow-wrap: anywhere; }
.message-list-controls { display: flex; gap: 4px; }
#reader-view .message-list-controls button { min-height: 30px; padding: 3px 9px; font-size: 12px; font-weight: 500; color: var(--ink-soft); }
#reader-view .message-list-controls button[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent-line); color: var(--accent-strong); }
.conversation-backfill { padding: 0 18px; }
.conversation-backfill .hint { margin: 6px 0 0; }
#reader-view #message-order { margin: 8px 18px 0; }
#reader-view #messages-empty { margin: 28px 18px; color: var(--muted); }
#reader-view #messages-more { margin: 12px 18px 20px; }
.message-list { list-style: none; margin: 0; padding: 0; }
.message-list li { display: grid; grid-template-columns: minmax(0, 1fr) 36px; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.message-list li.conversation-item { grid-template-columns: minmax(0, 1fr); }
.message-list li.message-selectable { grid-template-columns: 34px minmax(0, 1fr) 36px; }
.message-list li.message-selectable.conversation-item { grid-template-columns: 34px minmax(0, 1fr); }
#reader-view .message-selectable .message-row { padding-left: 2px; }
.message-selectable > input[type="checkbox"] { width: 17px; min-width: 17px; height: 17px; min-height: 17px; margin: 0 0 0 12px; align-self: center; justify-self: center; accent-color: var(--accent); background: var(--paper); opacity: 0; cursor: pointer; }
/* Checkboxes show on hover or focus, on every row while selecting, and always on touch screens. */
#reader-messages > li:is(:hover, :focus-within) > input[type="checkbox"], #message-list-view.selecting #reader-messages > li > input[type="checkbox"], .message-selectable > input[type="checkbox"]:checked { opacity: 1; }
@media (hover: none) { .message-selectable > input[type="checkbox"] { opacity: 1; } }
.message-selectable:has(input:checked), .message-selectable:has(input:checked) .message-row, .message-selectable:has(input:checked) .message-flag { background: var(--selected) !important; }
#reader-view .message-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "sender date" "subject subject"; gap: 2px 10px; width: 100%; min-height: 64px; padding: 11px 6px 11px 22px; border: 0; border-radius: 0; background: var(--paper); color: var(--ink-soft); font-weight: 400; text-align: left; }
#reader-view .message-row:hover { background: var(--hover); }
#reader-view .message-row[aria-current="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 var(--accent); }
.message-sender { grid-area: sender; overflow: hidden; font-size: 14px; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.message-date { grid-area: date; align-self: baseline; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.message-summary { grid-area: subject; overflow: hidden; font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; text-overflow: ellipsis; }
.message-meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.message-row:not(.conversation-row) .message-meta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#reader-view .message-row.unread .message-sender { font-weight: 700; }
#reader-view .message-row.unread .message-summary { color: var(--ink); font-weight: 600; }
#reader-view .message-row.unread::before { content: ""; position: absolute; left: 8px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
#reader-view .message-flag { width: 36px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--paper); color: var(--flag); font-size: 17px; line-height: 1; }
#reader-view .message-flag:hover { color: var(--star); background: var(--star-wash); }
#reader-view .message-flag[aria-pressed="true"] { color: var(--star); }
/* Select all sits before the folder name; while anything is selected the
   selection toolbar takes the place of the name and controls. */
#reader-view .bulk-select-all { flex: none; width: 17px; min-height: 17px; height: 17px; margin: 0 2px 0 0; accent-color: var(--accent); cursor: pointer; }
#message-list-view.selecting .message-list-heading > :is(#folder-heading, .message-list-controls) { display: none; }
.bulk-toolbar:not([hidden]) { display: flex; flex: 1 1 0; align-items: center; gap: 4px; min-width: 0; }
#reader-view .bulk-toolbar #bulk-count { flex: none; margin: 0 6px 0 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.bulk-actions { display: flex; flex: 1 1 auto; align-items: center; gap: 2px; min-width: 0; }
#reader-view .bulk-actions > button, #reader-view .bulk-menu > summary { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 34px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
#reader-view .bulk-actions > button:hover:not(:disabled), #reader-view .bulk-menu > summary:hover { background: var(--hover); color: var(--ink); }
#reader-view .bulk-actions > button:disabled, .bulk-menu.disabled > summary { opacity: .45; pointer-events: none; }
.bulk-menu > summary { list-style: none; }
.bulk-menu > summary::-webkit-details-marker { display: none; }
.bulk-menu { position: relative; display: inline-flex; flex: none; }
.bulk-menu .menu-panel { top: calc(100% + 4px); left: 0; right: auto; display: grid; gap: 4px; min-width: 220px; }
#reader-view .bulk-menu .menu-panel label { margin: 6px 0 0; font-size: 12.5px; }
#reader-view .bulk-toolbar #bulk-clear { flex: none; width: 34px; min-height: 34px; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--muted); }
#reader-view .bulk-toolbar #bulk-clear:hover { background: var(--hover); color: var(--ink); }
.bulk-select-folder:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; padding: 8px 18px; border-bottom: 1px solid var(--line-soft); background: var(--accent-wash); font-size: 13px; }
#reader-view .bulk-select-folder button { min-height: 28px; padding: 0 6px; border: 0; background: transparent; color: var(--accent-strong); font-weight: 600; }
/* Narrow lists keep icons only for the main actions. */
@container list (max-width: 560px) {
  #reader-view .bulk-actions > button span, #reader-view .bulk-menu > summary span { display: none; }
  #reader-view .bulk-actions > button, #reader-view .bulk-menu > summary { padding: 0 8px; }
  .bulk-toolbar:not([hidden]) { flex-wrap: wrap; }
  .bulk-actions { order: 3; flex-basis: 100%; flex-wrap: wrap; justify-content: space-between; }
  #message-list-view.selecting .bulk-select-all { align-self: flex-start; margin-top: 14px; }
}
#message-list-view { container: list / inline-size; }

/* Undo bars float like a toast */
.mail-undo:not([hidden]) { position: fixed; z-index: 45; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 18px; border-radius: 10px; background: var(--harbor); color: #eef6f4; box-shadow: 0 14px 40px #10354244; }
#reader-view .mail-undo p { margin: 0; font-size: 13.5px; }
#reader-view .mail-undo button { background: transparent; border-color: #4d7c88; color: #9fe0cf; }
#reader-view .mail-undo button:hover { background: var(--harbor-2); }
#send-undo:not([hidden]) ~ #mail-undo:not([hidden]), #mail-undo:not([hidden]) ~ #send-undo:not([hidden]) { bottom: 84px; }
/* While writing, messages float above the composer's action bar. */
/* While writing beside the list, messages sit bottom left, clear of the composer;
   a full-screen composer lifts them above its action bar. */
#reader-view:is([data-compose="pane"], [data-compose="inline"]) .mail-undo:not([hidden]) { left: 16px; transform: none; max-width: min(420px, calc(100vw - 32px)); }
#reader-view:is([data-compose="full"], [data-compose="expanded"]) .mail-undo:not([hidden]) { bottom: 84px; }
#reader-view:is([data-compose="full"], [data-compose="expanded"]) #send-undo:not([hidden]) ~ #mail-undo:not([hidden]), #reader-view:is([data-compose="full"], [data-compose="expanded"]) #mail-undo:not([hidden]) ~ #send-undo:not([hidden]) { bottom: 144px; }

/* Empty reading pane */
.message-empty-pane { display: grid; place-content: center; justify-items: center; gap: 6px; padding: 40px; text-align: center; background: linear-gradient(var(--surface-2), var(--surface-2)); }
#reader-view .message-empty-pane h2 { margin: 0; font-family: var(--letter); font-size: 26px; font-weight: 400; }
#reader-view .message-empty-pane p { max-width: 34ch; margin: 0; color: var(--muted); }

/* Reading pane: the letter */
#message-detail-view { padding: 0 clamp(20px, 4vw, 56px) 48px; }
.message-navigation { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 6px; margin: 0 calc(-1 * clamp(20px, 4vw, 56px)) 0; padding: 10px clamp(20px, 4vw, 56px); background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line-soft); }
.message-stepper { display: flex; gap: 4px; margin-left: auto; }
#reader-view .message-navigation button { min-height: 30px; padding: 3px 10px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
#message-subject { max-width: 34ch; margin: 30px 0 18px; font-family: var(--letter); font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.conversation-view { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.conversation-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
#reader-view .conversation-heading h3 { margin: 0; font-size: 14px; font-weight: 650; }
#reader-view .conversation-heading p { margin: 0; font-size: 12.5px; }
.conversation-messages { list-style: none; margin: 8px 0 4px; padding: 0 0 0 16px; border-left: 2px solid var(--accent-line); }
.conversation-messages li { position: relative; margin: 0 0 2px; }
.conversation-messages li::before { content: ""; position: absolute; left: -21px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-line); border: 2px solid var(--surface-2); }
.conversation-messages li:has([aria-current="true"])::before { background: var(--accent); }
#reader-view .conversation-messages button { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; width: 100%; min-height: 36px; padding: 6px 10px; border: 0; background: transparent; text-align: left; font-weight: 500; }
#reader-view .conversation-messages button[aria-current="true"] { background: var(--accent-wash); font-weight: 650; }
.conversation-messages .conversation-date { color: var(--muted); font-size: 12px; font-weight: 400; }
#reader-view .conversation-view > button { min-height: 30px; font-size: 12px; }
.message-headers { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.message-headers dt { color: var(--muted); font-weight: 500; }
.message-headers dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.message-headers dt:first-of-type + dd { font-weight: 650; }
.message-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; padding: 0; border: 0; }
.message-primary-actions { margin-bottom: 6px; }
#reader-view .message-primary-actions button { min-height: 32px; padding: 4px 11px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
#reader-view .message-primary-actions :is(#message-reply, #message-reply-all, #message-forward-inline) { border-color: var(--accent-line); color: var(--accent-strong); font-weight: 650; }
#reader-view .message-primary-actions #message-reply { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#reader-view .message-primary-actions #message-reply:hover { background: var(--accent-strong); }
#reader-view .message-primary-actions #message-star[aria-pressed="true"] { color: var(--star); border-color: var(--star-line); background: var(--star-wash); }
#message-html-controls { margin-top: 12px; }
#reader-view #message-html-controls .hint { flex-basis: 100%; margin: 2px 0 0; }
#message-html { display: block; width: 100%; height: 62vh; min-height: 320px; margin: 18px 0; border: 0; border-top: 1px solid var(--line-soft); background: var(--paper); }
.message-body { max-width: 68ch; padding: 22px 0 8px; font-family: var(--letter); font-size: 16.5px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
#message-attachments { margin-top: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
#reader-view #message-attachments h3 { margin: 0 0 6px; font-size: 14px; }
#attachment-names { margin: 0 0 8px; padding-left: 18px; overflow-wrap: anywhere; line-height: 1.7; }
#reader-view #attachment-names button { max-width: 100%; margin-bottom: 6px; overflow-wrap: anywhere; }
#message-truncated { margin: 16px 0 0; }
.message-organize { display: grid; gap: 14px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.message-labels { margin: 0; padding: 0; }
#reader-view .message-labels h3, #reader-view .message-delivery h3 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--ink-soft); }
.message-labels ul { margin: 0 0 8px; padding-left: 18px; }
.message-label-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.message-label-field { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
#reader-view .message-label-controls select { width: min(100%, 320px); }
#reader-view .message-labels .hint { margin-top: 6px; }
.message-delivery { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.message-delivery-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.message-delivery ul { margin: 6px 0 10px; padding-left: 20px; }
.message-move-actions { gap: 8px; }
#reader-view .message-move-actions label { margin: 0; color: var(--ink-soft); font-weight: 500; }
#reader-view .message-move-actions select { width: auto; flex: 1 1 140px; max-width: 220px; }
#reader-view #message-delete { color: var(--danger); border-color: var(--danger-line); }
#reader-view #message-delete:hover { background: var(--danger-wash); }

/* Saved drafts */
#draft-list-view { padding: 24px clamp(20px, 4vw, 48px); }
#reader-view #draft-list-heading { margin: 0 0 6px; font-size: 20px; }
#draft-list { list-style: none; margin: 16px 0; padding: 0; max-width: 760px; }
#reader-view #draft-list button { width: 100%; margin-bottom: 6px; padding: 10px 14px; text-align: left; font-weight: 500; overflow-wrap: anywhere; }

/* Compose */
/* The composer fills its pane: header rows, a body that grows, one action bar. */
#compose-view:not([hidden]) { display: flex; flex-direction: column; width: 100%; padding: 14px clamp(12px, 2.4vw, 28px) 0; }
#reader-view[data-compose="full"] #compose-view { max-width: 1120px; margin-inline: auto; }
.compose-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; }
#reader-view #compose-heading { margin: 0; font-family: var(--letter); font-size: 20px; font-weight: 400; }
.compose-heading-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.compose-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 14px; color: var(--ink-soft); }
#reader-view .compose-meta p { margin: 0; }
#compose-save-status { color: var(--muted); font-size: 12.5px; }
.compose-workspace, .compose-workspace form, #compose-fields { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
#reader-view #compose-fields { display: flex; align-items: stretch; justify-items: stretch; gap: 0; margin: 0; padding: 0; border: 0; }
.compose-row, .compose-copies-fields > div { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 10px; min-height: 42px; padding: 1px 0; border-bottom: 1px solid var(--line); }
#reader-view .compose-row-label { flex: 0 0 3.6em; margin: 0; color: var(--muted); font-size: 13.5px; font-weight: 500; line-height: 40px; }
.compose-from-row strong { line-height: 40px; }
.compose-row > .recipient-picker, .compose-copies-fields .recipient-picker { min-height: 40px; }
#reader-view .compose-row > .recipient-picker, .compose-copies-fields .recipient-picker { flex: 1 1 0; }
#reader-view .compose-row > input { min-height: 40px; }
#reader-view .compose-row > input, #reader-view .compose-row .recipient-picker input:not([type="hidden"]), #reader-view .compose-copies-fields .recipient-picker input:not([type="hidden"]) { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#reader-view .compose-row > input { flex: 1 1 0; min-width: 0; }
#reader-view :is(.compose-row, .compose-copies-fields) input:focus-visible { outline: none; }
.compose-row:focus-within, .compose-copies-fields > div:focus-within { border-bottom-color: var(--accent); }
.compose-from-row strong { font-weight: 500; overflow-wrap: anywhere; }
.compose-row-links { display: flex; gap: 2px; padding-top: 4px; }
#reader-view .compose-row-links button { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--muted); font-weight: 500; text-decoration: none; }
#reader-view .compose-row-links button:hover { color: var(--ink); }
#compose-fields:has(#compose-copies[open]) .compose-row-links { display: none; }
.compose-row .recipient-note, .compose-copies-fields .recipient-note { flex-basis: 100%; }
.recipient-picker { position: relative; }
.recipient-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.recipient-chips { display: contents; margin: 0; padding: 0; list-style: none; }
.recipient-chip { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); }
#reader-view .recipient-chip .chip-label { min-width: 0; min-height: 28px; padding: 0 4px 0 10px; overflow: hidden; border: 0; background: transparent; color: var(--ink); font-weight: 500; font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
#reader-view .recipient-chip .chip-remove { width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); }
#reader-view .recipient-chip .chip-remove:hover { background: var(--hover); color: var(--ink); }
.recipient-chip.invalid { border-color: var(--danger); background: var(--danger-wash); }
.recipient-chip.invalid small { color: var(--danger); font-weight: 600; }
.recipient-note { margin: 4px 0 0; font-size: 13px; color: var(--warn); overflow-wrap: anywhere; }
#reader-view .recipient-picker input:not([type="hidden"]) { flex: 1 1 140px; min-width: 120px; }
@media (max-width: 760px) { #reader-view .recipient-chip :is(.chip-label, .chip-remove), #reader-view .recipient-picker input:not([type="hidden"]) { min-height: 44px; } #reader-view .recipient-chip .chip-remove { width: 44px; } }
.recipient-suggestions { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; right: 0; max-height: 240px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--accent-line); border-radius: 8px; background: var(--paper); box-shadow: 0 12px 28px #10354222; }
.recipient-suggestions [role="option"] { padding: 8px 10px; border-radius: 6px; cursor: pointer; overflow-wrap: anywhere; }
.recipient-suggestions [role="option"]:hover, .recipient-suggestions [aria-selected="true"] { background: var(--accent-wash); }
.recipient-suggestions strong, .recipient-suggestions small { display: block; }
.recipient-suggestions small { color: var(--muted); font-size: 12px; }
.compose-copies { margin: 0; }
.compose-copies > summary { display: none; }
.compose-templates summary, .compose-signature-settings summary, .compose-original summary { width: fit-content; cursor: pointer; color: var(--accent-strong); font-weight: 600; font-size: 13px; }
.compose-copies-fields { display: block; margin: 0; }
#reader-view #compose-text { flex: 1 1 auto; min-height: 220px; margin-top: 6px; padding: 12px 4px; border: 0; border-radius: 0; font-family: var(--letter); font-size: 16px; line-height: 1.65; resize: none; }
#reader-view #compose-text:focus-visible { outline: none; box-shadow: none; }
/* Formatting row at the top of the body. Menus open as panels on wide screens and as a bottom sheet on phones. */
#reader-view .compose-format-bar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; margin-top: 8px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
#reader-view .compose-format-bar[hidden] { display: none; }
#reader-view .compose-format-bar button { min-width: 32px; min-height: 32px; padding: 0 6px; border-color: transparent; background: transparent; font-size: 13px; }
#reader-view .compose-format-bar button:hover { background: var(--hover); border-color: var(--line); }
#reader-view .compose-format-bar button[aria-pressed="true"], #reader-view .compose-format-bar button[aria-expanded="true"] { background: var(--selected); border-color: var(--line); }
#reader-view .compose-format-bar button[aria-disabled="true"] { opacity: .5; }
#reader-view .compose-format-bar .fmt-label { display: inline-block; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.fmt-item { position: relative; }
#reader-view .fmt-panel { position: absolute; bottom: 100%; left: 0; z-index: 20; display: grid; gap: 2px; min-width: 10rem; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 16px rgb(0 0 0 / 0.2); }
#reader-view .fmt-panel[hidden] { display: none; }
#reader-view .fmt-panel button { justify-content: flex-start; text-align: left; white-space: nowrap; }
#reader-view .fmt-panel button[aria-pressed="true"]::before { content: "✓ "; }
/* The wide colour menu centres on its button; More, the last control, opens leftwards. */
#reader-view .fmt-colour-panel { left: 50%; transform: translateX(-50%); grid-template-columns: repeat(2, auto); gap: 10px; min-width: 0; }
#reader-view #compose-fmt-more { left: auto; right: 0; }
.fmt-colour-heading { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fmt-colour-grid { display: grid; grid-template-columns: repeat(8, 24px); gap: 2px; }
#reader-view .fmt-colour-grid .fmt-colour-none { grid-column: 1 / -1; }
#reader-view .compose-format-bar .fmt-swatch { width: 24px; min-width: 0; height: 24px; min-height: 0; padding: 2px; border: 1px solid var(--line); border-radius: 3px; background: transparent; }
#reader-view .compose-format-bar .fmt-swatch[aria-pressed="true"] { outline: 2px solid var(--accent, #1a73e8); outline-offset: 1px; background: transparent; }
#reader-view .compose-format-bar .fmt-swatch[aria-pressed="true"]::before { content: none; }
.fmt-swatch-fill { display: block; width: 100%; height: 100%; border-radius: 2px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
#reader-view #compose-format-options[aria-pressed="true"] { background: var(--selected); }
#reader-view .compose-link-panel { display: grid; gap: 4px; margin-top: 4px; padding: 8px; border: 1px solid var(--input-line); border-radius: 6px; background: var(--surface-2); }
#reader-view .compose-link-panel[hidden] { display: none; }
#reader-view .compose-link-panel label { margin: 0; }
@media (max-width: 760px) {
  #reader-view .compose-format-bar { flex-wrap: nowrap; overflow-x: auto; }
  #reader-view .compose-format-bar button, #reader-view .fmt-panel button, #reader-view #compose-format-options, #reader-view .compose-link-panel button { flex: 0 0 auto; min-width: 44px; min-height: 44px; }
  #reader-view .compose-link-panel input { min-height: 44px; }
  #reader-view .fmt-panel, #reader-view .fmt-colour-panel, #reader-view #compose-fmt-more { position: fixed; left: 8px; right: 8px; bottom: 8px; max-height: 60vh; overflow-y: auto; transform: none; }
  #reader-view .fmt-colour-panel { grid-template-columns: minmax(0, 1fr); }
  .fmt-colour-grid { grid-template-columns: repeat(auto-fill, 44px); }
  #reader-view .compose-format-bar .fmt-swatch { width: 44px; height: 44px; }
}
/* A narrow composer keeps formatting on one scrolling line; its menus open as bottom sheets. */
#compose-view { container: compose / inline-size; }
@container compose (max-width: 640px) {
  #reader-view .compose-format-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  #reader-view .compose-format-bar > * { flex: 0 0 auto; }
  #reader-view .fmt-panel, #reader-view .fmt-colour-panel, #reader-view #compose-fmt-more { position: fixed; left: 8px; right: 8px; bottom: 8px; max-height: 60vh; overflow-y: auto; transform: none; }
}
/* Formatted editor: a light "paper" in every theme, so chosen colours read as they will be sent. */
.compose-rich-editor { flex: 1 1 auto; margin-top: 6px; background: #ffffff; color: #222222; min-height: 220px; padding: 0.75rem; border: 1px solid var(--border, #c8c8c8); border-radius: 6px; font-family: arial, sans-serif; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.compose-rich-editor:focus { outline: 2px solid var(--focus, #1a73e8); outline-offset: 1px; }
.compose-rich-editor a { color: #1a0dab; }
/* Each block sets its own quote padding (--rt-q) and depth (--rt-d), so quotes, paragraph indents and list markers add up instead of overriding each other. */
.rt-block { margin: 0; min-height: 1.4em; --rt-q: 0px; --rt-d: 0; }
.rt-d-1 { --rt-d: 1; } .rt-d-2 { --rt-d: 2; } .rt-d-3 { --rt-d: 3; } .rt-d-4 { --rt-d: 4; } .rt-d-5 { --rt-d: 5; } .rt-d-6 { --rt-d: 6; } .rt-d-7 { --rt-d: 7; } .rt-d-8 { --rt-d: 8; }
.rt-q-1 { --rt-q: 1.8ex; } .rt-q-2 { --rt-q: 3.6ex; } .rt-q-3 { --rt-q: 5.4ex; } .rt-q-4 { --rt-q: 7.2ex; }
.rt-paragraph { padding-left: calc(var(--rt-q) + 40px * var(--rt-d)); }
.rt-bullet, .rt-numbered { position: relative; padding-left: calc(var(--rt-q) + 1.75em * (var(--rt-d) + 1)); }
.rt-bullet::before, .rt-numbered::before { position: absolute; left: calc(var(--rt-q) + 1.75em * var(--rt-d)); width: 1.5em; text-align: right; }
.rt-bullet::before { content: "•"; } .rt-bullet.rt-d-1::before, .rt-bullet.rt-d-4::before, .rt-bullet.rt-d-7::before { content: "◦"; } .rt-bullet.rt-d-2::before, .rt-bullet.rt-d-5::before, .rt-bullet.rt-d-8::before { content: "▪"; }
.rt-numbered::before { content: attr(data-n); }
.rt-q-1, .rt-q-2, .rt-q-3, .rt-q-4 { margin-left: 0.8ex; background-image: repeating-linear-gradient(to right, #cccccc 0 1px, transparent 1px 1.8ex); background-repeat: no-repeat; background-position: 0.8ex 0; background-size: var(--rt-q) 100%; }
.rt-a-center { text-align: center; } .rt-a-right { text-align: right; }
.rt-font-serif { font-family: 'times new roman', serif; } .rt-font-fixed_width { font-family: monospace; } .rt-font-wide { font-family: 'arial black', sans-serif; } .rt-font-narrow { font-family: 'arial narrow', sans-serif; }
.rt-font-comic_sans { font-family: 'comic sans ms', sans-serif; } .rt-font-garamond { font-family: garamond, 'times new roman', serif; } .rt-font-georgia { font-family: georgia, serif; }
.rt-font-tahoma { font-family: tahoma, sans-serif; } .rt-font-trebuchet { font-family: 'trebuchet ms', sans-serif; } .rt-font-verdana { font-family: verdana, sans-serif; }
.rt-size-small { font-size: x-small; } .rt-size-large { font-size: large; } .rt-size-huge { font-size: xx-large; }
.rt-c-000000 { color: #000000; }
.rt-bg-000000 { background-color: #000000; }
.rt-c-444444 { color: #444444; }
.rt-bg-444444 { background-color: #444444; }
.rt-c-666666 { color: #666666; }
.rt-bg-666666 { background-color: #666666; }
.rt-c-999999 { color: #999999; }
.rt-bg-999999 { background-color: #999999; }
.rt-c-cccccc { color: #cccccc; }
.rt-bg-cccccc { background-color: #cccccc; }
.rt-c-eeeeee { color: #eeeeee; }
.rt-bg-eeeeee { background-color: #eeeeee; }
.rt-c-f3f3f3 { color: #f3f3f3; }
.rt-bg-f3f3f3 { background-color: #f3f3f3; }
.rt-c-ffffff { color: #ffffff; }
.rt-bg-ffffff { background-color: #ffffff; }
.rt-c-ff0000 { color: #ff0000; }
.rt-bg-ff0000 { background-color: #ff0000; }
.rt-c-ff9900 { color: #ff9900; }
.rt-bg-ff9900 { background-color: #ff9900; }
.rt-c-ffff00 { color: #ffff00; }
.rt-bg-ffff00 { background-color: #ffff00; }
.rt-c-00ff00 { color: #00ff00; }
.rt-bg-00ff00 { background-color: #00ff00; }
.rt-c-00ffff { color: #00ffff; }
.rt-bg-00ffff { background-color: #00ffff; }
.rt-c-0000ff { color: #0000ff; }
.rt-bg-0000ff { background-color: #0000ff; }
.rt-c-9900ff { color: #9900ff; }
.rt-bg-9900ff { background-color: #9900ff; }
.rt-c-ff00ff { color: #ff00ff; }
.rt-bg-ff00ff { background-color: #ff00ff; }
.rt-c-f4cccc { color: #f4cccc; }
.rt-bg-f4cccc { background-color: #f4cccc; }
.rt-c-fce5cd { color: #fce5cd; }
.rt-bg-fce5cd { background-color: #fce5cd; }
.rt-c-fff2cc { color: #fff2cc; }
.rt-bg-fff2cc { background-color: #fff2cc; }
.rt-c-d9ead3 { color: #d9ead3; }
.rt-bg-d9ead3 { background-color: #d9ead3; }
.rt-c-d0e0e3 { color: #d0e0e3; }
.rt-bg-d0e0e3 { background-color: #d0e0e3; }
.rt-c-cfe2f3 { color: #cfe2f3; }
.rt-bg-cfe2f3 { background-color: #cfe2f3; }
.rt-c-d9d2e9 { color: #d9d2e9; }
.rt-bg-d9d2e9 { background-color: #d9d2e9; }
.rt-c-ead1dc { color: #ead1dc; }
.rt-bg-ead1dc { background-color: #ead1dc; }
.rt-c-ea9999 { color: #ea9999; }
.rt-bg-ea9999 { background-color: #ea9999; }
.rt-c-f9cb9c { color: #f9cb9c; }
.rt-bg-f9cb9c { background-color: #f9cb9c; }
.rt-c-ffe599 { color: #ffe599; }
.rt-bg-ffe599 { background-color: #ffe599; }
.rt-c-b6d7a8 { color: #b6d7a8; }
.rt-bg-b6d7a8 { background-color: #b6d7a8; }
.rt-c-a2c4c9 { color: #a2c4c9; }
.rt-bg-a2c4c9 { background-color: #a2c4c9; }
.rt-c-9fc5e8 { color: #9fc5e8; }
.rt-bg-9fc5e8 { background-color: #9fc5e8; }
.rt-c-b4a7d6 { color: #b4a7d6; }
.rt-bg-b4a7d6 { background-color: #b4a7d6; }
.rt-c-d5a6bd { color: #d5a6bd; }
.rt-bg-d5a6bd { background-color: #d5a6bd; }
.rt-c-e06666 { color: #e06666; }
.rt-bg-e06666 { background-color: #e06666; }
.rt-c-f6b26b { color: #f6b26b; }
.rt-bg-f6b26b { background-color: #f6b26b; }
.rt-c-ffd966 { color: #ffd966; }
.rt-bg-ffd966 { background-color: #ffd966; }
.rt-c-93c47d { color: #93c47d; }
.rt-bg-93c47d { background-color: #93c47d; }
.rt-c-76a5af { color: #76a5af; }
.rt-bg-76a5af { background-color: #76a5af; }
.rt-c-6fa8dc { color: #6fa8dc; }
.rt-bg-6fa8dc { background-color: #6fa8dc; }
.rt-c-8e7cc3 { color: #8e7cc3; }
.rt-bg-8e7cc3 { background-color: #8e7cc3; }
.rt-c-c27ba0 { color: #c27ba0; }
.rt-bg-c27ba0 { background-color: #c27ba0; }
.rt-c-cc0000 { color: #cc0000; }
.rt-bg-cc0000 { background-color: #cc0000; }
.rt-c-e69138 { color: #e69138; }
.rt-bg-e69138 { background-color: #e69138; }
.rt-c-f1c232 { color: #f1c232; }
.rt-bg-f1c232 { background-color: #f1c232; }
.rt-c-6aa84f { color: #6aa84f; }
.rt-bg-6aa84f { background-color: #6aa84f; }
.rt-c-45818e { color: #45818e; }
.rt-bg-45818e { background-color: #45818e; }
.rt-c-3d85c6 { color: #3d85c6; }
.rt-bg-3d85c6 { background-color: #3d85c6; }
.rt-c-674ea7 { color: #674ea7; }
.rt-bg-674ea7 { background-color: #674ea7; }
.rt-c-a64d79 { color: #a64d79; }
.rt-bg-a64d79 { background-color: #a64d79; }
.rt-c-990000 { color: #990000; }
.rt-bg-990000 { background-color: #990000; }
.rt-c-b45f06 { color: #b45f06; }
.rt-bg-b45f06 { background-color: #b45f06; }
.rt-c-bf9000 { color: #bf9000; }
.rt-bg-bf9000 { background-color: #bf9000; }
.rt-c-38761d { color: #38761d; }
.rt-bg-38761d { background-color: #38761d; }
.rt-c-134f5c { color: #134f5c; }
.rt-bg-134f5c { background-color: #134f5c; }
.rt-c-0b5394 { color: #0b5394; }
.rt-bg-0b5394 { background-color: #0b5394; }
.rt-c-351c75 { color: #351c75; }
.rt-bg-351c75 { background-color: #351c75; }
.rt-c-741b47 { color: #741b47; }
.rt-bg-741b47 { background-color: #741b47; }
.rt-c-660000 { color: #660000; }
.rt-bg-660000 { background-color: #660000; }
.rt-c-783f04 { color: #783f04; }
.rt-bg-783f04 { background-color: #783f04; }
.rt-c-7f6000 { color: #7f6000; }
.rt-bg-7f6000 { background-color: #7f6000; }
.rt-c-274e13 { color: #274e13; }
.rt-bg-274e13 { background-color: #274e13; }
.rt-c-0c343d { color: #0c343d; }
.rt-bg-0c343d { background-color: #0c343d; }
.rt-c-073763 { color: #073763; }
.rt-bg-073763 { background-color: #073763; }
.rt-c-20124d { color: #20124d; }
.rt-bg-20124d { background-color: #20124d; }
.rt-c-4c1130 { color: #4c1130; }
.rt-bg-4c1130 { background-color: #4c1130; }
#compose-rich-editor[hidden] { display: none; }
#reader-view #compose-size-summary { margin: 4px 0 0; }
.compose-templates, .compose-signature-settings { margin: 10px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.compose-template-create { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.compose-template-create label { flex: 1 1 200px; min-width: 0; }
.compose-template-list { margin: 8px 0 0; padding: 0; list-style: none; }
.compose-template-list li { padding: 10px 0; border-top: 1px solid var(--line); }
.compose-template-list strong, .compose-template-list small { display: block; overflow-wrap: anywhere; }
.compose-template-list small { color: var(--muted); }
.compose-template-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
#compose-template-status { min-height: 1.4em; overflow-wrap: anywhere; }
.compose-signature-settings textarea { min-height: 96px; }
.compose-signature-settings .signature-choice { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.compose-signature-settings .signature-choice input { width: 16px; min-height: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
#reader-view .compose-signature-settings > :is(p, label, button) { margin-top: 10px; }
#compose-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
#compose-files:empty { display: none; }
/* Attachments are chips: icon, name, size and a remove button. */
#compose-files li.compose-chip { display: flex; align-items: center; max-width: min(100%, 300px); border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
#reader-view #compose-files .attachment-card { display: flex; align-items: center; gap: 6px; width: auto; min-width: 0; min-height: 40px; padding: 4px 4px 4px 8px; border: 0; background: transparent; }
#compose-files .attachment-card > strong { min-width: 0; }
#compose-files .attachment-card > :is(small, .compose-file-note) { flex: none; }
#compose-files .compose-file-note::before { content: '· '; }
#compose-files .attachment-card > svg, #compose-files .attachment-card > img { width: 24px; height: 24px; }
#reader-view #compose-files li button { flex: none; width: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 18px; }
#reader-view #compose-files li button:hover { color: var(--ink); background: var(--hover); }
#compose-files li.failed { border-color: var(--danger, #c9483d); }
.compose-file-note { grid-column: 2; color: var(--muted); font-size: 12px; }
li.failed .compose-file-note { color: var(--danger, #c9483d); font-weight: 600; }
.compose-file-meter { display: block; width: 100%; max-width: 320px; height: 6px; margin: 4px 0 2px; accent-color: var(--accent); }
.compose-file-meter[data-level="warn"] { accent-color: #b7791f; }
.compose-file-meter[data-level="over"] { accent-color: var(--danger, #c9483d); }
#compose-file-usage[data-level="over"] { color: var(--danger, #c9483d); font-weight: 600; }
.compose-review-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#compose-attachment-warning { margin-top: 14px; }
#compose-validation { margin-bottom: 16px; }
.compose-original { min-width: 0; margin: 6px 0 0; }
.compose-original > summary { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 13px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 600; list-style: none; cursor: pointer; }
.compose-original > summary::-webkit-details-marker { display: none; }
.compose-original > summary:hover { color: var(--ink); background: var(--hover); }
.compose-original[open] { padding: 0 0 4px 12px; border-left: 3px solid var(--line); }
.compose-original[open] > summary { margin: 0 0 6px -12px; }
.compose-original dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 14px 0; font-size: 13px; }
.compose-original dt { font-weight: 600; color: var(--muted); }
.compose-original dd { margin: 0; overflow-wrap: anywhere; }
.compose-original blockquote { max-height: 360px; margin: 0; padding-right: 8px; overflow: auto; font-family: var(--letter); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.compose-bar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin-top: 8px; padding: 10px 0 12px; border-top: 1px solid var(--line); background: var(--paper); }
.compose-send-group { display: inline-flex; }
#reader-view .compose-send-group #compose-send { min-height: 40px; padding: 0 20px; border-radius: 8px 0 0 8px; }
#reader-view .compose-send-menu > summary { width: 34px; min-height: 40px; border-radius: 0 8px 8px 0; background: var(--accent); color: #fff; }
.compose-bar .menu { position: static; }
.compose-bar .menu-panel { top: auto; right: auto; bottom: calc(100% + 4px); left: 0; }
#reader-view .compose-bar #compose-save-status { flex: 1 1 0; min-width: 0; margin: 0 4px; overflow: hidden; color: var(--muted); font-size: 12.5px; text-align: right; white-space: nowrap; text-overflow: ellipsis; }
#reader-view .compose-bar #compose-save { margin: 0 0 0 auto; border: 0; background: transparent; color: var(--muted); font-weight: 500; text-decoration: none; }
.compose-bar { container-type: inline-size; }
.compose-bar > :not(#compose-save-status) { flex-shrink: 0; }
/* A narrow pane drops the Attach label and the Save draft button (autosave runs) to keep one row. */
@container (max-width: 520px) {
  #reader-view .compose-bar #compose-attach span, #reader-view .compose-bar #compose-save { display: none; }
  #reader-view .compose-bar #compose-discard { margin-left: auto; }
}
#reader-view .compose-bar .icon-button { width: 40px; min-height: 40px; padding: 0; }
#reader-view .compose-insert > summary { width: auto; padding: 0 12px; font-size: 13.5px; font-weight: 600; }
#reader-view .compose-more .menu-check { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 6px; color: var(--ink); font-weight: 500; cursor: pointer; }
#reader-view .compose-more .menu-check:hover { background: var(--hover); }
#reader-view #compose-plain-confirm:not([hidden]) { margin-top: 12px; }
.compose-schedule:not([hidden]) { margin-top: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
#compose-templates:not([open]), #compose-signature-settings:not([open]) { display: none; }
.compose-drop-zone { display: none; }
.compose-drop-zone.is-dragging { display: block; margin-top: 12px; padding: 14px; border: 1.5px dashed var(--accent); border-radius: 8px; background: var(--accent-wash); text-align: center; }
@media (max-width: 760px) {
  #reader-view .compose-bar :is(button, .menu > summary) { min-height: 44px; min-width: 44px; }
  #reader-view .compose-more .menu-check { min-height: 44px; }
  #reader-view #compose-plain-mode { width: 24px; height: 24px; }
  #reader-view #compose-plain-confirm button { min-height: 44px; min-width: 44px; }
  /* Phones keep one row: Save draft is left to autosave and the status floats above the bar. */
  #reader-view #compose-files li button { width: 44px; min-width: 44px; min-height: 44px; }
  #reader-view .compose-bar #compose-save { display: none; }
  #reader-view .compose-bar #compose-attach span { display: none; }
  #reader-view .compose-send-group #compose-send { padding: 0 14px; }
  #reader-view .compose-bar #compose-save-status { position: absolute; right: 0; bottom: 100%; max-width: 100%; padding: 2px 6px; background: var(--paper); }
  #reader-view .compose-bar #compose-save-status:empty { display: none; }
  #reader-view .compose-bar #compose-discard { margin-left: auto; }
}
@media (max-width: 360px) { .compose-bar { flex-wrap: wrap; } }
/* Dialogs */
.mail-command-dialog, .contacts-dialog { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px #10354255; overflow: auto; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
.mail-command-dialog::backdrop, .contacts-dialog::backdrop { background: #10354299; }
.mail-command-dialog { width: min(560px, calc(100vw - 24px)); max-height: min(640px, calc(100dvh - 24px)); padding-bottom: 10px; }
.mail-command-heading, .contacts-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line-soft); }
.mail-command-heading h2, .contacts-heading h2 { margin: 0 0 3px; font-size: 18px; }
.mail-command-heading p, .contacts-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.mail-command-dialog label { margin: 14px 20px 6px; font-size: 13px; }
#mail-command-query { display: block; width: calc(100% - 40px); margin: 0 20px; }
#mail-command-note, #mail-command-empty { margin: 8px 20px; color: var(--muted); font-size: 12.5px; }
#mail-command-results { margin: 6px 10px 0; padding: 0; list-style: none; }
#mail-command-results li { padding: 9px 12px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; }
#mail-command-results li[aria-selected="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 var(--accent); }
#mail-command-results strong, #mail-command-results small { display: block; }
#mail-command-results small { margin-top: 2px; color: var(--muted); }
.contacts-dialog { width: min(960px, calc(100vw - 28px)); max-height: min(820px, calc(100dvh - 28px)); }
.contacts-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contacts-layout > section { min-width: 0; padding: 18px 22px 24px; }
.contacts-layout > section + section { border-left: 1px solid var(--line-soft); background: var(--surface-2); }
.contacts-layout h3 { margin: 0 0 12px; font-size: 15px; }
.contacts-dialog label { margin: 10px 0 6px; font-size: 13px; }
.contacts-dialog input:not([type="file"]) { min-height: 38px; }
.contacts-search-row, .contacts-toolbar, .contacts-editor-actions, .contacts-field-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.contacts-search-row input { flex: 1; min-width: 120px; }
.contacts-toolbar { margin: 14px 0; }
.contacts-list { margin: 8px 0; padding: 0; list-style: none; }
.contacts-list li { border-bottom: 1px solid var(--line-soft); }
.contacts-list button { display: block; width: 100%; padding: 10px 8px; border: 0; background: transparent; text-align: left; }
.contacts-list button:hover, .contacts-list button:focus-visible { background: var(--selected); }
.contacts-list strong, .contacts-list small { display: block; overflow-wrap: anywhere; }
.contacts-list small { margin-top: 2px; color: var(--muted); }
.contacts-field-heading { justify-content: space-between; margin-top: 16px; font-weight: 600; }
.contacts-email-row { display: flex; align-items: end; gap: 6px; margin-bottom: 6px; }
.contacts-email-row label { flex: 1; min-width: 0; margin: 0; }
.contacts-email-row label span { display: block; margin-bottom: 4px; }
.contacts-editor-actions { margin-top: 16px; }
.contacts-editor-actions .primary { width: auto; margin: 0; }
#contacts-status { min-height: 1.4em; margin: 14px 0 0; overflow-wrap: anywhere; }
.contacts-import-preview { margin-top: 18px; padding: 14px; border: 1px solid var(--accent-line); border-radius: 8px; background: var(--surface-2); }
.contacts-import-preview h3 { margin: 0 0 6px; }
.contacts-import-preview button { margin: 6px 6px 0 0; }

/* Narrower screens: two panes, then one */
@media (max-width: 1180px) {
  .mailbox-content { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .reader-topbar { grid-template-columns: 200px minmax(0, 1fr) auto; }
  .mailbox-layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .reader-topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity account" "search search"; height: auto; row-gap: 10px; padding: 10px 12px 12px 0; }
  .reader-identity { grid-area: identity; }
  #account-menu { grid-area: account; }
  #reader-view .mail-search { grid-area: search; max-width: none; margin-left: 12px; }
  #reader-view:not([hidden]) { height: auto; min-height: 100dvh; }
  .mailbox-layout { display: block; }
  .search-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folder-rail { flex-direction: row; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  #reader-view .compose-button { width: auto; min-height: 36px; margin: 0; padding: 0 14px; box-shadow: none; }
  .folder-list, .view-list, .rail-tools { display: flex; flex: none; gap: 4px; margin: 0; padding: 0; border: 0; }
  .rail-tools { flex-direction: row; }
  #reader-view .folder-list button, #reader-view .rail-item { width: auto; min-height: 36px; white-space: nowrap; }
  #reader-view #reader-quick-actions kbd { display: none; }
  .folder-manage, .mail-shortcuts { flex: none; margin: 0; padding: 8px 6px; white-space: nowrap; }
  .folder-manage[open], .mail-shortcuts[open] { white-space: normal; }
  .mailbox-content { display: block; min-height: 60dvh; }
  #message-list-view { overflow: visible; border-right: 0; }
  #message-detail-view { overflow: visible; }
  .message-list-heading, .message-navigation { position: static; }
}
@media (max-width: 560px) {
  .search-filter-panel { grid-template-columns: minmax(0, 1fr); }
  #reader-view .search-bar .search-clear { display: none; }
  .contacts-layout { grid-template-columns: minmax(0, 1fr); }
  .contacts-layout > section + section { border-left: 0; border-top: 1px solid var(--line-soft); }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
#reader-view .search-bar:has(input:placeholder-shown) .search-clear { display: none; }
#reader-view #message-order { margin: 6px 18px 0; color: var(--muted); font-size: 12px; }
#reader-view #reader-quick-actions kbd { font-size: 10.5px; }
#reader-view .message-primary-actions button:not(#message-reply, #message-reply-all, #message-forward-inline) { border-color: transparent; background: transparent; color: var(--ink-soft); font-weight: 500; }
#reader-view .message-primary-actions button:not(#message-reply, #message-reply-all, #message-forward-inline):hover { border-color: var(--line); background: var(--hover); }
#reader-view .message-primary-actions #message-reply-all { margin-right: 0; }
#reader-view .message-primary-actions #message-forward-inline { margin-right: 10px; }
/* Writing is a focused surface: search, folders and account navigation step aside. */
#reader-view.compose-active .mail-search,
#reader-view.compose-active .reader-address,
#reader-view.compose-active #reader-back { display: none; }
#reader-view.compose-active .reader-topbar { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 960px) {
  #reader-view .folder-list button, #reader-view .rail-item, #reader-view .compose-button { min-height: 44px; }
  .folder-manage summary, .mail-shortcuts summary { min-height: 44px; display: flex; align-items: center; }
}
#reader-view .search-filters:not([open]) .search-filter-panel { display: none; }
.message-navigation { flex-wrap: wrap; }
@media (max-width: 560px) { .message-stepper { margin-left: 0; } #message-detail-view { padding-inline: 16px; } .message-navigation { margin-inline: -16px; padding-inline: 16px; } }
#reader-view textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; line-height: 1.6; padding: 12px 14px; background: var(--paper); }
@media (max-width: 960px) {
  .folder-rail { align-items: center; scrollbar-width: thin; }
  main:has(#reader-view:not([hidden])) > #status { top: auto; bottom: 16px; left: 12px; right: 12px; max-width: none; }
}
#profile-mfa[data-state="off"] { background: var(--warn-wash); color: var(--warn); }
.settings-card form :is(input, select), #settings-view .profile-details { max-width: 520px; }
.settings-card form .admin-checkbox input { max-width: none; }

/* ------------------------------------------------------------------
   Second pass: frame actions live in the brand bar, status reads as a
   toast in the mailbox, records read as people and things, not rows.
   ------------------------------------------------------------------ */
/* Sign out sits in the brand bar on every signed-in page */
body:is([data-view="home"], [data-view="settings"], [data-view="admin"]) { position: relative; }
:is(#logout, #settings-logout, #admin-logout) { position: absolute; top: 11px; right: 20px; min-height: 38px !important; padding: 6px 14px !important; border-color: var(--harbor-line) !important; background: transparent !important; color: #d7e8e4 !important; font-weight: 500 !important; }
:is(#logout, #settings-logout, #admin-logout):hover { background: var(--harbor-2) !important; border-color: #4d7c88 !important; }
.settings-topbar { margin: -6px 0 10px; }
:is(#settings-back, #admin-back) { display: inline-flex; align-items: center; gap: 8px; min-height: 36px !important; margin-left: -8px; padding: 4px 10px !important; border-color: transparent !important; background: transparent !important; color: var(--accent-strong); font-weight: 600; }
:is(#settings-back, #admin-back)::before { content: ""; width: 7px; height: 7px; margin-left: 3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
:is(#settings-back, #admin-back):hover { background: var(--accent-wash) !important; }
.settings-title { align-items: center; margin-bottom: 18px; }
#settings-refresh-help { margin: -8px 0 22px; }

/* Section index follows the page */
.page-nav a[aria-current] { background: var(--paper); color: var(--accent-strong); font-weight: 650; box-shadow: inset 3px 0 var(--accent), 0 1px 2px #10354214; }
@media (max-width: 860px) { .page-nav a[aria-current] { box-shadow: inset 0 -3px var(--accent); } }

/* Storage meters */
meter { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
meter::-webkit-meter-bar { height: 6px; border: 0; border-radius: 999px; background: var(--line); }
meter::-webkit-meter-optimum-value { border-radius: 999px; background: var(--accent); }
meter::-webkit-meter-suboptimum-value { border-radius: 999px; background: var(--warn-line); }
meter::-webkit-meter-even-less-good-value { border-radius: 999px; background: var(--danger); }
meter::-moz-meter-bar { border-radius: 999px; background: var(--accent); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--warn-line); }
.accounts li[data-enabled="false"] { background: var(--surface-2); box-shadow: none; }
.accounts li[data-enabled="false"] strong { color: var(--muted); }
.accounts li[data-enabled="false"] > button { background: var(--paper); border-color: var(--line); color: var(--ink); }
.accounts li[data-enabled="false"] > button:hover { background: var(--accent-wash); }

/* Administration records */
.credential-list .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: 999px; background: var(--chip); color: var(--ink-soft); font-size: 12px; font-weight: 600; line-height: 1.3; }
.chip-good { background: var(--accent-wash); color: var(--accent-strong); }
.chip-good::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; }
.chip-accent { background: #e3e8f6; color: #2f447a; }
.chip-info { background: #f1e4ee; color: #6b2e57; }
.chip-warn { background: var(--warn-wash); color: var(--warn); }
.chip-muted { background: var(--chip); color: var(--muted); }
.chip-code { border: 1px solid var(--line); background: var(--rail); font: 500 11.5px ui-monospace, "Cascadia Mono", monospace; }
.credential-list .usage { margin: 8px 0 2px; max-width: 360px; }
.credential-list .usage p { margin: 5px 0 0; font-size: 13px; }
.credential-list .record-id { margin: 4px 0 0; color: var(--muted); font: 11.5px/1.5 ui-monospace, "Cascadia Mono", monospace; }
.credential-list .record-id + .record-id { margin-top: 0; }
#admin-events li > p:not(.chips, .record-id) { color: var(--ink); }

/* Mailbox: status is a toast that steps aside */
:root main:has(#reader-view:not([hidden])) > #status { top: auto; bottom: 24px; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: min(560px, calc(100vw - 24px)); padding: 11px 16px; border: 0; border-radius: 10px; background: var(--harbor); color: #eef6f4; box-shadow: 0 14px 40px #10354244; }
main:has(#reader-view:not([hidden])) > #status:not(.error) { animation: toast-out .35s ease 6s forwards; }
main:has(#reader-view:not([hidden])) > #status.error { background: var(--paper); color: var(--danger); box-shadow: inset 3px 0 var(--danger), 0 14px 40px #10354244; }
:root main:has(#reader-view:not([hidden]) .mail-undo:not([hidden])) > #status { bottom: 84px; }
:root main:has(#reader-view:not([hidden]):is([data-compose="pane"], [data-compose="inline"])) > #status { left: 16px; transform: none; }
:root main:has(#reader-view:not([hidden]):is([data-compose="full"], [data-compose="expanded"])) > #status { bottom: 84px; }
:root main:has(#reader-view:not([hidden]):is([data-compose="full"], [data-compose="expanded"]) .mail-undo:not([hidden])) > #status { bottom: 144px; }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { main:has(#reader-view:not([hidden])) > #status:not(.error) { animation-duration: .01s; } }

/* Mailbox: people get a face */
#reader-view .message-row { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "avatar sender date" "avatar subject subject"; column-gap: 12px; padding-left: 20px; }
#reader-view .message-row::after { content: attr(data-initials) / ""; grid-area: avatar; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tone-bg, #dcefe9); color: var(--tone-fg, #0a4f50); font-size: 12.5px; font-weight: 650; letter-spacing: .02em; }
#reader-view .message-row.conversation-row .message-meta { grid-column: 2 / -1; }
#reader-view .message-row.unread::before { left: 7px; top: 50%; margin-top: -3.5px; }
[data-tone="0"] { --tone-bg: #dcefe9; --tone-fg: #0a4f50; }
[data-tone="1"] { --tone-bg: #e3e8f6; --tone-fg: #2f447a; }
[data-tone="2"] { --tone-bg: #f6e7d6; --tone-fg: #7a4a12; }
[data-tone="3"] { --tone-bg: #f1e4ee; --tone-fg: #6b2e57; }
[data-tone="4"] { --tone-bg: #deebf2; --tone-fg: #1f5572; }
[data-tone="5"] { --tone-bg: #e7eedb; --tone-fg: #4a5d1c; }
.message-list li:has(.message-row:hover) .message-flag { background: var(--hover); }
.message-list li:has(.message-row[aria-current="true"]) .message-flag { background: var(--accent-wash); }
.message-headers[data-initials] { position: relative; min-height: 58px; padding-left: 58px; }
.message-headers[data-initials]::before { content: attr(data-initials) / ""; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--tone-bg, #dcefe9); color: var(--tone-fg, #0a4f50); font: 650 15px var(--ui); }

/* Mailbox: reply first, then the quieter tools on their own line */
.message-primary-actions::before { content: ""; order: 1; flex-basis: 100%; height: 0; }
#reader-view .message-primary-actions button:not(#message-reply, #message-reply-all, #message-forward-inline) { order: 2; }
#reader-view .message-primary-actions :is(#message-reply, #message-reply-all, #message-forward-inline) { min-height: 36px; padding-inline: 14px; font-size: 13.5px; }


/* Compose: an envelope, then the letter */
.compose-heading-actions #compose-contacts { order: 1; }
.compose-heading-actions #compose-close-top { order: 2; }
#reader-view #compose-address-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#compose-fields { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; align-items: center; }
#compose-fields > * { grid-column: 1 / -1; }
#reader-view #compose-fields > label:is([for="compose-to-input"], [for="compose-subject"]) { grid-column: 1; margin: 0; color: var(--muted); font-weight: 500; font-size: 13.5px; }
#compose-fields > :is(.recipient-picker, #compose-subject, #compose-copies, #compose-recipient-summary) { grid-column: 2; }
#reader-view #compose-fields > .recipient-picker input:not([type="hidden"]), #reader-view #compose-fields > #compose-subject { min-height: 44px; padding-inline: 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 15px; }
#reader-view #compose-fields > #compose-subject { font-weight: 600; }
#reader-view #compose-fields > .recipient-picker input:not([type="hidden"]):focus-visible, #reader-view #compose-fields > #compose-subject:focus-visible { outline: 0; border-bottom: 2px solid var(--accent); }
#reader-view #compose-fields > #compose-copies { margin: 6px 0 0; }
#reader-view #compose-fields > #compose-recipient-summary { margin: 2px 0 8px; }
.compose-message-heading { margin-top: 22px; }
#reader-view #compose-size-summary { text-align: right; }
@media (max-width: 560px) { #compose-fields { grid-template-columns: 52px minmax(0, 1fr); } }
#reader-view .message-list li:has(.message-row:hover) .message-flag { background: var(--hover); }
#reader-view .message-list li:has(.message-row[aria-current="true"]) .message-flag { background: var(--accent-wash); }
#reader-view .message-primary-actions { gap: 6px 2px; }
#reader-view .message-primary-actions :is(#message-reply, #message-reply-all) { margin-right: 4px; }
#reader-view .message-primary-actions button:not(#message-reply, #message-reply-all, #message-forward-inline) { padding-inline: 9px; font-size: 12.5px; }
/* Envelope lines run under the label and the field as one row */
#compose-fields { column-gap: 0; }
#reader-view #compose-fields > label:is([for="compose-to-input"], [for="compose-subject"]) { align-self: stretch; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
#reader-view #compose-fields > .recipient-picker input:not([type="hidden"]), #reader-view #compose-fields > #compose-subject { padding-inline: 10px 2px; }
#reader-view #compose-fields > label:has(+ .recipient-picker:focus-within), #reader-view #compose-fields > label[for="compose-subject"]:has(+ #compose-subject:focus-visible) { border-bottom: 2px solid var(--accent); color: var(--accent-strong); }
#reader-view #compose-fields > #compose-copies { padding-left: 10px; }
#reader-view #compose-fields > #compose-recipient-summary { padding-left: 10px; }
/* Phones: toolbars scroll sideways instead of stacking */
@media (max-width: 560px) {
  .message-navigation, #reader-view .message-primary-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .message-navigation > *, #reader-view .message-navigation button, #reader-view .message-primary-actions button { flex: none; white-space: nowrap; }
  .message-stepper { margin-left: 0; }
  .message-primary-actions::before { display: none; }
  #reader-view .message-primary-actions { margin-inline: -16px; padding-inline: 16px; }
}

/* New app password: everything a mail app asks for, in the order it asks */
.connection-details { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: 10px 16px; margin: 14px 0; align-items: center; }
.connection-details dt { color: var(--muted); font-weight: 500; font-size: 13.5px; }
.connection-details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.connection-details .secret-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.connection-details .secret-row pre { flex: 1 1 260px; margin: 0; }
#settings-credential-copy { min-height: 38px; padding: 6px 14px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#settings-credential-copy:hover { background: var(--accent-strong); }
#settings-credential-servers .connection-details { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--accent-line); }
#settings-credential-servers .hint { margin: 0 0 14px; }
@media (max-width: 560px) { .connection-details { grid-template-columns: minmax(0, 1fr); gap: 2px; } .connection-details dd { margin-bottom: 10px; } }

/* Step-by-step set-up per mail app */
.setup-heading { margin: 18px 0 8px; font-size: 14px; }
.setup-guide { margin: 0 0 6px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--paper); }
.setup-guide > summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-weight: 600; }
.setup-guide[open] > summary { border-bottom: 1px solid var(--line-soft); }
.setup-guide ol { margin: 10px 0 12px; padding: 0 16px 0 36px; line-height: 1.6; }
.setup-guide li + li { margin-top: 6px; }
.mail-host { font-weight: 650; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------
   Dark theme: follows the device unless Settings picks Light or Dark.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ecf0f1; --ink-soft: #bcc6c8; --muted: #9aa6a5;
    --harbor: #0b1a1f; --harbor-2: #16303a; --harbor-line: #2a4a55;
    --accent: #46b5ab; --accent-strong: #70cfc5; --accent-wash: #1d3533; --accent-line: #2f6a64; --on-accent: #04211f;
    --paper: #1a2023; --rail: #191e21; --canvas: #121619; --field: #23292d; --line: #2a3135; --line-soft: #1f2528;
    --surface-2: #1f2528; --hover: #22292c; --selected: #1d3533; --input-line: #3a4449; --input-line-hover: #52606a;
    --star: #e0a84a; --star-wash: #2e2716; --star-line: #5c4a22; --flag: #56646a;
    --danger: #ff8a8f; --danger-wash: #3a1f22; --danger-line: #6b3a3e;
    --warn: #e8b75c; --warn-wash: #33291a; --warn-line: #a8792a; --chip: #262d31; --link: #6cc4e6;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #ecf0f1; --ink-soft: #bcc6c8; --muted: #9aa6a5;
  --harbor: #0b1a1f; --harbor-2: #16303a; --harbor-line: #2a4a55;
  --accent: #46b5ab; --accent-strong: #70cfc5; --accent-wash: #1d3533; --accent-line: #2f6a64; --on-accent: #04211f;
  --paper: #1a2023; --rail: #191e21; --canvas: #121619; --field: #23292d; --line: #2a3135; --line-soft: #1f2528;
  --surface-2: #1f2528; --hover: #22292c; --selected: #1d3533; --input-line: #3a4449; --input-line-hover: #52606a;
  --star: #e0a84a; --star-wash: #2e2716; --star-line: #5c4a22; --flag: #56646a;
  --danger: #ff8a8f; --danger-wash: #3a1f22; --danger-line: #6b3a3e;
  --warn: #e8b75c; --warn-wash: #33291a; --warn-line: #a8792a; --chip: #262d31; --link: #6cc4e6;
  color-scheme: dark;
}
body { background: var(--canvas); color: var(--ink); }

/* Density */
:root[data-density="compact"] { --row-min: 36px; --row-pad-block: 5px; }
#reader-view .message-row { min-height: var(--row-min); padding-block: var(--row-pad-block); }

/* Appearance settings */
.choice-groups { display: flex; flex-wrap: wrap; gap: 12px 48px; }
.choice-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-group legend { margin-bottom: 4px; padding: 0; font-weight: 650; }
.choice-group label { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; font-weight: 500; }
.choice-group input { flex: none; width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: var(--accent); }

/* ------------------------------------------------------------------
   Mail app shell: light chrome, an account menu, and a reading layout
   that is Auto (pane opens with a message), Pane or List.
   ------------------------------------------------------------------ */
.reader-topbar { align-items: center; background: var(--rail); color: var(--ink); border-bottom: 1px solid var(--line); }
.reader-topbar .reader-brand { color: var(--ink); }
.reader-topbar .reader-brand .icon { color: var(--accent); }
#reader-view .reader-topbar .reader-address { color: var(--muted); }
.reader-topbar .search-bar { background: var(--field); box-shadow: none; }
.reader-topbar .search-bar:focus-within { background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent); }
.reader-topbar .search-filters > summary { border-color: var(--line); color: var(--ink-soft); }
.reader-topbar .search-filters > summary:hover, .reader-topbar .search-filters[open] > summary { background: var(--hover); }
.reader-topbar .search-filter-panel { border: 1px solid var(--line); box-shadow: 0 14px 40px #10354222; background: var(--paper); }

.account-menu { position: relative; justify-self: end; }
.account-menu > summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { background: var(--hover); }
.account-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tone-bg, #dcefe9); color: var(--tone-fg, #0a4f50); font-size: 13px; font-weight: 650; }
.account-avatar::before { content: attr(data-initials); }
.account-menu-panel { position: absolute; z-index: 50; top: calc(100% + 6px); right: 0; display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 220px; max-width: calc(100vw - 24px); padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 14px 40px #10354233; }
.account-menu-address { margin: 4px 10px 8px; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
#reader-view .account-menu-panel button { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 40px; border: 0; background: transparent; color: var(--ink); font-weight: 500; text-align: left; }
#reader-view .account-menu-panel button:hover { background: var(--hover); }

.layout-switch { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; }
#reader-view .layout-switch button { min-height: 30px; padding: 3px 9px; border: 0; border-radius: 0; background: transparent; color: var(--ink-soft); font-size: 12px; font-weight: 500; }
#reader-view .layout-switch button + button { border-left: 1px solid var(--line); }
#reader-view .layout-switch button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.message-list-controls { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
/* Phones always read in place of the list, so there is no layout to choose. */
@media (max-width: 559px) { .layout-switch { display: none; } }

@media (min-width: 961px) {
  #reader-view[data-pane="closed"] .mailbox-content { grid-template-columns: minmax(0, 1fr); }
  #reader-view[data-pane="closed"] #message-list-view { border-right: 0; }
  #reader-view[data-pane="closed"] #message-detail-view { grid-column: 1 / -1; }
  #reader-view[data-pane="open"] .mailbox-content { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); }
}
.message-list-heading { flex-wrap: wrap; }
#folder-heading { flex: 1 1 8em; min-width: 0; }

/* ------------------------------------------------------------------
   Message rows: sender, subject, a muted preview and an attachment
   mark. With the reading pane closed on a wide screen, subject and
   preview share one line; compact density puts everything on one line.
   ------------------------------------------------------------------ */
/* Long lists skip rendering rows far below the first pages. */
#reader-messages > li { position: relative; }
#reader-messages > li:nth-child(n+41) { content-visibility: auto; contain-intrinsic-size: auto 64px; }
:root[data-density="compact"] #reader-messages > li:nth-child(n+41) { contain-intrinsic-size: auto 36px; }
#reader-view .message-row { grid-template-columns: 34px minmax(0, 1fr) auto auto; grid-template-areas: "avatar sender clip date" "avatar subject subject subject" "avatar preview preview preview"; row-gap: 1px; }
.message-preview { grid-area: preview; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.message-attachment { grid-area: clip; display: inline-flex; align-self: center; color: var(--muted); }
.message-attachment .icon { width: 14px; height: 14px; }
/* Compact rows always fit two lines: subject and preview share the second. */
:root[data-density="compact"] #reader-view .message-row { grid-template-columns: 34px fit-content(55%) minmax(0, 1fr) auto auto; grid-template-areas: "avatar sender sender clip date" "avatar subject preview preview preview"; column-gap: 8px; }
:root[data-density="compact"] #reader-view .message-preview::before { content: "\2014\00a0"; }
@media (min-width: 961px) {
  #reader-view[data-pane="closed"] .message-row { grid-template-columns: 34px fit-content(55%) minmax(0, 1fr) auto auto; grid-template-areas: "avatar sender sender clip date" "avatar subject preview preview preview"; }
  #reader-view[data-pane="closed"] .message-preview::before { content: "\2014\00a0"; }
  :root[data-density="compact"] #reader-view[data-pane="closed"] .message-row { grid-template-columns: 180px fit-content(45%) minmax(0, 1fr) auto auto; grid-template-areas: "sender subject preview clip date"; column-gap: 12px; align-items: baseline; }
  :root[data-density="compact"] #reader-view[data-pane="closed"] .message-row::after { display: none; }
  :root[data-density="compact"] #reader-view[data-pane="closed"] .message-row.unread::before { top: 50%; }
}

/* Row quick actions: on hover or keyboard focus, never on touch phones. */
.row-actions { position: absolute; z-index: 2; top: 50%; right: 44px; translate: 0 -50%; display: none; gap: 2px; padding: 2px; border-radius: 8px; background: var(--paper); box-shadow: 0 2px 10px #10354222; }
#reader-view .row-actions button { display: grid; place-items: center; width: 32px; min-height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); }
#reader-view .row-actions button:hover { background: var(--hover); color: var(--ink); }
@media (hover: hover) and (min-width: 561px) {
  #reader-messages > li:is(:hover, :focus-within) .row-actions { display: flex; }
  #reader-messages > li:is(:hover, :focus-within) .message-date, #reader-messages > li:is(:hover, :focus-within) .message-attachment { visibility: hidden; }
}

/* ------------------------------------------------------------------
   Reading toolbar: reply actions with text, quiet icon tools, and the
   less common actions in a More menu.
   ------------------------------------------------------------------ */
#reader-view .message-primary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
#reader-view .message-primary-actions::before { display: none; }
.message-reply-actions, .message-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#reader-view .message-tool-actions .tool-button { display: grid; place-items: center; width: 36px; padding: 0; }
.menu { position: relative; }
.menu > summary { display: grid; place-items: center; width: 36px; min-height: 36px; border-radius: 6px; color: var(--ink-soft); cursor: pointer; list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover, .menu[open] > summary { background: var(--hover); color: var(--ink); }
.menu[data-align="start"] .menu-panel { right: auto; left: 0; }
.menu-panel { position: absolute; z-index: 20; top: calc(100% + 4px); right: 0; display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 240px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); box-shadow: 0 14px 40px #10354233; }
#reader-view .menu-panel button { justify-content: flex-start; width: 100%; border: 0; background: transparent; color: var(--ink); font-weight: 500; text-align: left; }
#reader-view .menu-panel button:hover { background: var(--hover); }
@media (max-width: 560px) {
  #reader-view .message-primary-actions { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* Attachment cards with type icons, local thumbnails and Download all */
#reader-view #attachment-names:has(.attachment-card) { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; padding: 0; list-style: none; }
#reader-view #attachment-names:has(.attachment-card) > li { margin: 0; }
#reader-view .attachment-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 240px; max-width: 100%; min-height: 56px; margin: 0; padding: 8px 10px; text-align: left; font-weight: 500; }
.attachment-card > svg, .attachment-card > img { grid-row: 1 / 3; width: 40px; height: 40px; }
.attachment-card > img { border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.attachment-card > strong { overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.attachment-card > small { color: var(--muted); font-size: 12px; }
.attachment-card[data-kind="pdf"] > svg { color: #c9483d; }
.attachment-card[data-kind="image"] > svg { color: #3b7dd8; }
.attachment-card[data-kind="sheet"] > svg { color: #1f8a4c; }
.attachment-card[data-kind="zip"] > svg { color: #9a7417; }
.attachment-all { display: flex; align-items: center; }
#reader-view #attachments-download-all { display: inline-flex; align-items: center; gap: 6px; }
.message-tool-actions > .menu { order: 3; }

/* Touch screens open row actions from a menu button instead of hover. */
.row-more { display: none; }
@media (hover: none), (max-width: 560px) {
  #reader-view .row-more { position: absolute; z-index: 2; right: 40px; bottom: 4px; display: grid; place-items: center; width: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); }
  #reader-messages > li .row-actions.open { display: flex; top: auto; bottom: 4px; right: 80px; translate: none; }
}

/* Drag to folder */
#reader-messages > li[draggable="true"] { cursor: grab; }
#reader-view .folder-list button.drop-target { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-wash); color: var(--accent-strong); }

/* Phone row menu: its own 44px column so it never covers the row text. */
@media (hover: none), (max-width: 560px) {
  #reader-view .message-list li:has(.row-more) { grid-template-columns: minmax(0, 1fr) 36px 44px; }
  #reader-view .message-list li.message-selectable:has(.row-more) { grid-template-columns: 40px minmax(0, 1fr) 36px 44px; }
  .message-selectable > input[type="checkbox"] { width: 22px; height: 22px; margin-left: 10px; }
  #reader-view .bulk-actions > button, #reader-view .bulk-menu > summary, #reader-view .bulk-toolbar #bulk-clear { min-height: 44px; min-width: 44px; justify-content: center; }
  #reader-view .row-more { position: static; align-self: center; width: 44px; min-height: 44px; }
  #reader-messages > li .row-actions.open { top: 50%; bottom: auto; right: 84px; translate: 0 -50%; }
  #reader-view #reader-messages .row-actions.open button { width: 44px; min-height: 44px; }
}

/* ProseMirror base rules (prosemirror-view/style/prosemirror.css), needed for correct editing. */
.ProseMirror { position: relative; word-wrap: break-word; white-space: pre-wrap; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }
.ProseMirror [draggable][contenteditable=false] { user-select: text; }
.ProseMirror-selectednode { outline: 2px solid #8cf; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0 !important; }

/* List-Unsubscribe offer under the message headers. */
.message-unsubscribe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: -6px 0 16px; }
.message-unsubscribe .hint { margin: 0; }

/* Printing shows only the open message, copied into #print-view. */
.print-view { display: none; }
@media print {
  body > :not(.print-view) { display: none !important; }
  body { background: #fff; color: #000; }
  .print-view { display: block; font: 12pt/1.45 system-ui, sans-serif; color: #000; }
  .print-view h1 { font-size: 16pt; margin: 0 0 10pt; }
  .print-view dl { display: grid; grid-template-columns: max-content 1fr; gap: 2pt 10pt; margin: 0 0 12pt; padding-bottom: 8pt; border-bottom: 1px solid #999; }
  .print-view dt { font-weight: 600; }
  .print-view dd { margin: 0; overflow-wrap: anywhere; }
  .print-view .print-body { white-space: pre-wrap; overflow-wrap: anywhere; }
  .print-view .print-attachments { margin-top: 12pt; padding-top: 8pt; border-top: 1px solid #999; }
}
.mailbox-settings-dialog { width: min(720px, calc(100vw - 28px)); }
.mailbox-settings-body { display: grid; gap: 28px; padding: 0 20px 20px; }
.mailbox-settings-body label { margin: 10px 0 6px; font-size: 13px; }
.mailbox-settings-body .checkbox-row { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.mailbox-settings-body textarea, .mailbox-settings-body input:not([type="checkbox"]), .mailbox-settings-body select { width: 100%; }
.vacation-dates, .filter-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.filter-match { grid-template-columns: minmax(120px, 1fr) 2fr; }
.filter-list { list-style: none; margin: 8px 0; padding: 0; }
.filter-list li { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.filter-form { margin-top: 12px; }
.message-snooze-menu .menu-panel { min-width: 260px; }
.calendar-dialog { width: min(1100px, calc(100vw - 28px)); }
.calendar-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px; }
.calendar-toolbar h3 { margin: 0 8px; min-width: 10em; text-align: center; }
.calendar-toolbar .primary { margin-left: auto; }
#calendar-status { padding: 0 20px; min-height: 1.4em; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; margin: 0 20px 20px; background: var(--line); border: 1px solid var(--line); }
.calendar-weekdays { display: contents; }
.calendar-weekdays span { background: var(--paper); padding: 6px; font-size: 12px; font-weight: 600; text-align: center; }
.calendar-day { background: var(--paper); min-height: 96px; padding: 4px; overflow: hidden; }
.calendar-day.outside { opacity: .55; }
.calendar-day h4 { margin: 0 0 4px; font-size: 12px; font-weight: 600; }
.calendar-day.today h4 { color: var(--accent); }
.calendar-day ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.calendar-event { width: 100%; min-height: 0; padding: 2px 4px; text-align: left; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
.calendar-event.all-day { font-weight: 600; }
.calendar-detail, .calendar-form { margin: 8px 20px 16px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; }
.calendar-form label { display: block; margin: 10px 0 4px; font-size: 13px; }
.calendar-form input:not([type="checkbox"]), .calendar-form textarea { width: 100%; }
.calendar-form .checkbox-row { display: flex; gap: 8px; align-items: center; }
.calendar-when { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calendar-when input + input { margin-top: 4px; }
.calendar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.calendar-notes { white-space: pre-wrap; }
@media (max-width: 640px) {
  .calendar-grid { grid-template-columns: 1fr; }
  .calendar-weekdays, .calendar-day:not(.has-events) { display: none; }
  .calendar-day { min-height: 0; }
  .calendar-day h4 { font-size: 13px; }
  .calendar-when { grid-template-columns: 1fr; }
  .calendar-toolbar .primary { margin-left: 0; }
}
.menu-heading { margin: 4px 8px 6px; font-weight: 600; font-size: 13px; }
.snooze-choices button { display: flex; width: 100%; justify-content: space-between; gap: 16px; }
.snooze-choices .hint { margin: 0; }
.snooze-custom { display: grid; gap: 6px; padding: 8px; border-top: 1px solid var(--line); margin-top: 6px; }
.snooze-custom label { font-size: 13px; }
@media (max-width: 560px) { .vacation-dates, .filter-match { grid-template-columns: 1fr; } }