/* Elemta Webmail's visual system: two palettes (the default, shared with
   the administration console, and Tidewater), each with light and dark.
   Pages ship no inline styles (the CSP forbids them), so every visual
   decision lives here, including the calendar's event positions, which are
   classes generated at the end of this file. */

/* The default palette matches the administration console: the Tailwind
   slate ramp with its blue accent, so both apps read as one product.
   Tidewater, the original teal and IBM Plex palette, is kept as a choice
   in Settings and applies through data-palette="tidewater". */
:root {
  --ground: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --ink: #0F172A;
  --muted: #475569;
  --chrome: #FFFFFF;
  --chrome-2: #F1F5F9;
  --chrome-fg: #0F172A;
  --chrome-muted: #475569;
  --chrome-strong: #0F172A;
  --chrome-line: #E2E8F0;
  --chrome-accent: #2563EB;
  --chrome-placeholder: #64748B;
  --line: #E2E8F0;
  --line-soft: #F1F5F9;
  --accent: #2563EB;
  --accent-dark: #1D4ED8;
  /* Button hover: darker for white text, lighter for the dark teal text. */
  --accent-hover: #1D4ED8;
  --accent-soft: #E0EAFD;
  --on-accent: #FFFFFF;
  --danger: #B91C1C;
  --danger-soft: #FEE2E2;
  --pass-fg: #166534;
  --pass-bg: #DCFCE7;
  --warn-fg: #92400E;
  --warn-bg: #FEF3C7;
  --flag: #D97706;
  --shadow: 0 6px 16px rgba(15, 23, 42, .1);
  --radius: 8px;
  --hour: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Tag and calendar colours: readable text on a tinted chip. */
  --c0-bg: #E0EAFD; --c0-fg: #1D4ED8;
  --c1-bg: #E3F1EF; --c1-fg: #08524C;
  --c2-bg: #F3E8FB; --c2-fg: #6B2C91;
  --c3-bg: #FBE9E7; --c3-fg: #9A2A1F;
  --c4-bg: #FBF0D9; --c4-fg: #7A4E0A;
  --c5-bg: #E1F3E8; --c5-fg: #0B5A2E;
  --c6-bg: #FCE7F1; --c6-fg: #96285E;
  --c7-bg: #E8EBEF; --c7-fg: #2F3A4A;
  color-scheme: light;
}

/* The dark theme applies when the user chose it, or when they left the
   choice to the system and the system is dark. */
:root[data-theme="dark"] {
  --ground: #0B1120;
  --surface: #111827;
  --surface-2: #0F172A;
  --ink: #F1F5F9;
  --muted: #94A3B8;
  --chrome: #111827;
  --chrome-2: #1B2537;
  --chrome-fg: #F1F5F9;
  --chrome-muted: #CBD5E1;
  --chrome-strong: #FFFFFF;
  --chrome-line: #263349;
  --chrome-accent: #60A5FA;
  --chrome-placeholder: #7C8BA1;
  --on-accent: #FFFFFF;
  --line: #263349;
  --line-soft: #1B2537;
  --accent: #3B82F6;
  --accent-dark: #60A5FA;
  /* Button hover: darker for white text, lighter for the dark teal text. */
  --accent-hover: #2563EB;
  --accent-soft: #172A4A;
  --danger: #F87171;
  --danger-soft: #3B1518;
  --pass-fg: #86EFAC;
  --pass-bg: #12301F;
  --warn-fg: #FCD34D;
  --warn-bg: #33270F;
  --flag: #FBBF24;
  --shadow: 0 6px 16px rgba(2, 6, 23, .45);
  --c0-bg: #172A4A; --c0-fg: #93C5FD;
  --c1-bg: #10302D; --c1-fg: #7FE0D2;
  --c2-bg: #2C1840; --c2-fg: #D3A8F0;
  --c3-bg: #3A1714; --c3-fg: #F5A49B;
  --c4-bg: #33270F; --c4-fg: #F2C879;
  --c5-bg: #12301F; --c5-fg: #8FD9AE;
  --c6-bg: #3A1528; --c6-fg: #F3A3C8;
  --c7-bg: #222C3A; --c7-fg: #C5CDD8;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B1120;
    --surface: #111827;
    --surface-2: #0F172A;
    --ink: #F1F5F9;
    --muted: #94A3B8;
    --chrome: #111827;
    --chrome-2: #1B2537;
    --chrome-fg: #F1F5F9;
    --chrome-muted: #CBD5E1;
    --chrome-strong: #FFFFFF;
    --chrome-line: #263349;
    --chrome-accent: #60A5FA;
    --chrome-placeholder: #7C8BA1;
    --on-accent: #FFFFFF;
    --line: #263349;
    --line-soft: #1B2537;
    --accent: #3B82F6;
    --accent-dark: #60A5FA;
    /* Button hover: darker for white text, lighter for the dark teal text. */
    --accent-hover: #2563EB;
    --accent-soft: #172A4A;
    --danger: #F87171;
    --danger-soft: #3B1518;
    --pass-fg: #86EFAC;
    --pass-bg: #12301F;
    --warn-fg: #FCD34D;
    --warn-bg: #33270F;
    --flag: #FBBF24;
    --shadow: 0 6px 16px rgba(2, 6, 23, .45);
    --c0-bg: #172A4A; --c0-fg: #93C5FD;
    --c1-bg: #10302D; --c1-fg: #7FE0D2;
    --c2-bg: #2C1840; --c2-fg: #D3A8F0;
    --c3-bg: #3A1714; --c3-fg: #F5A49B;
    --c4-bg: #33270F; --c4-fg: #F2C879;
    --c5-bg: #12301F; --c5-fg: #8FD9AE;
    --c6-bg: #3A1528; --c6-fg: #F3A3C8;
    --c7-bg: #222C3A; --c7-fg: #C5CDD8;
    color-scheme: dark;
  }
}

/* Tidewater: cool grey ground, one teal accent, IBM Plex. */
:root[data-palette="tidewater"] {
  --ground: #F4F6F8;
  --surface: #FFFFFF;
  --surface-2: #F9FAFB;
  --ink: #0E1726;
  --muted: #4B5565;
  /* The top bar has its own tokens, so it can differ from the page:
     white with dark text in the light theme, near-black in the dark one. */
  --chrome: #FFFFFF;
  --chrome-2: #EEF1F4;
  --chrome-fg: #0E1726;
  --chrome-muted: #4B5565;
  --chrome-strong: #0E1726;
  --chrome-line: #DDE2E8;
  --chrome-accent: #0B6E66;
  --chrome-placeholder: #6B7685;
  --line: #DDE2E8;
  --line-soft: #EEF1F4;
  --accent: #0B6E66;
  --accent-dark: #08524C;
  /* Button hover: darker for white text, lighter for the dark teal text. */
  --accent-hover: #08524C;
  --accent-soft: #E3F1EF;
  --on-accent: #FFFFFF;
  --danger: #A1271D;
  --danger-soft: #FBE9E7;
  --pass-fg: #0B5A2E;
  --pass-bg: #E1F3E8;
  --warn-fg: #7A4E0A;
  --warn-bg: #FBF0D9;
  --flag: #B7791F;
  --shadow: 0 8px 24px rgba(14, 23, 38, .14);
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Tag and calendar colours: readable text on a tinted chip. */
  --c0-bg: #E3F1EF; --c0-fg: #08524C;
  --c1-bg: #E4ECFA; --c1-fg: #1F4FA8;
  --c2-bg: #F3E8FB; --c2-fg: #6B2C91;
  --c3-bg: #FBE9E7; --c3-fg: #9A2A1F;
  --c4-bg: #FBF0D9; --c4-fg: #7A4E0A;
  --c5-bg: #E1F3E8; --c5-fg: #0B5A2E;
  --c6-bg: #FCE7F1; --c6-fg: #96285E;
  --c7-bg: #E8EBEF; --c7-fg: #2F3A4A;
  color-scheme: light;
}

:root[data-palette="tidewater"][data-theme="dark"] {
  --ground: #0B111B;
  --surface: #121A27;
  --surface-2: #0F1622;
  --ink: #E6EAF0;
  --muted: #9AA5B4;
  --chrome: #070B12;
  --chrome-2: #1B2536;
  --chrome-fg: #F4F6F8;
  --chrome-muted: #C5CDD8;
  --chrome-strong: #FFFFFF;
  --chrome-line: #070B12;
  --chrome-accent: #5FD3C4;
  --chrome-placeholder: #8894A5;
  --on-accent: #04110F;
  --line: #253145;
  --line-soft: #1B2536;
  --accent: #2BA597;
  --accent-dark: #5FD3C4;
  /* Button hover: darker for white text, lighter for the dark teal text. */
  --accent-hover: #5FD3C4;
  --accent-soft: #10302D;
  --danger: #F08A80;
  --danger-soft: #3A1714;
  --pass-fg: #8FD9AE;
  --pass-bg: #12301F;
  --warn-fg: #F2C879;
  --warn-bg: #33270F;
  --flag: #F2C879;
  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --c0-bg: #10302D; --c0-fg: #7FE0D2;
  --c1-bg: #16264A; --c1-fg: #9DBBF5;
  --c2-bg: #2C1840; --c2-fg: #D3A8F0;
  --c3-bg: #3A1714; --c3-fg: #F5A49B;
  --c4-bg: #33270F; --c4-fg: #F2C879;
  --c5-bg: #12301F; --c5-fg: #8FD9AE;
  --c6-bg: #3A1528; --c6-fg: #F3A3C8;
  --c7-bg: #222C3A; --c7-fg: #C5CDD8;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="tidewater"]:not([data-theme="light"]) {
    --ground: #0B111B;
    --surface: #121A27;
    --surface-2: #0F1622;
    --ink: #E6EAF0;
    --muted: #9AA5B4;
    --chrome: #070B12;
    --chrome-2: #1B2536;
    --chrome-fg: #F4F6F8;
    --chrome-muted: #C5CDD8;
    --chrome-strong: #FFFFFF;
    --chrome-line: #070B12;
    --chrome-accent: #5FD3C4;
    --chrome-placeholder: #8894A5;
    --on-accent: #04110F;
    --line: #253145;
    --line-soft: #1B2536;
    --accent: #2BA597;
    --accent-dark: #5FD3C4;
    /* Button hover: darker for white text, lighter for the dark teal text. */
    --accent-hover: #5FD3C4;
    --accent-soft: #10302D;
    --danger: #F08A80;
    --danger-soft: #3A1714;
    --pass-fg: #8FD9AE;
    --pass-bg: #12301F;
    --warn-fg: #F2C879;
    --warn-bg: #33270F;
    --flag: #F2C879;
    --shadow: 0 8px 24px rgba(0, 0, 0, .5);
    --c0-bg: #10302D; --c0-fg: #7FE0D2;
    --c1-bg: #16264A; --c1-fg: #9DBBF5;
    --c2-bg: #2C1840; --c2-fg: #D3A8F0;
    --c3-bg: #3A1714; --c3-fg: #F5A49B;
    --c4-bg: #33270F; --c4-fg: #F2C879;
    --c5-bg: #12301F; --c5-fg: #8FD9AE;
    --c6-bg: #3A1528; --c6-fg: #F3A3C8;
    --c7-bg: #222C3A; --c7-fg: #C5CDD8;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--ground); color: var(--ink); font: 14px/1.45 var(--font); }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 18px; }
h2 { font-size: 22px; line-height: 1.3; }
h3 { font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--surface); }
kbd { font-family: var(--mono); font-size: 12px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--surface); }
[hidden], .hidden { display: none !important; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.strong { font-weight: 600; }
.pre { white-space: pre-wrap; }
.push { margin-left: auto; }
.inline { display: inline; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--surface); padding: 8px 12px; border-radius: var(--radius); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; }
.button:hover { color: var(--ink); border-color: var(--muted); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; min-height: 44px; }
.button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.button.primary-soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-dark); font-weight: 600; }
.button.danger { color: var(--danger); }
.button.ghost { border-color: transparent; background: transparent; }
.button.block { display: flex; width: 100%; }
.button.small-button { min-height: 30px; padding: 0 10px; font-size: 13px; }
.link-button { background: none; border: 0; color: var(--chrome-muted); cursor: pointer; min-height: 44px; padding: 0 8px; }
.link-button:hover { color: var(--chrome-strong); text-decoration: underline; }
.link-inline { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; text-decoration: underline; }
select.compact { min-height: 36px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; max-width: 200px; }

/* Top bar */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 8px 20px; background: var(--chrome); color: var(--chrome-fg); border-bottom: 1px solid var(--chrome-line); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--chrome-strong); text-decoration: none; font-weight: 600; font-size: 16px; }
.brand:hover { color: var(--chrome-strong); }
.brand .icon { width: 22px; height: 22px; stroke: var(--chrome-accent); }
/* The envelope logo is the administration console's, gradients and all;
   only its paper follows the theme so it sits on either top bar. */
.brand .logo { width: 34px; height: 27px; flex: none; }
.brand .logo .paper { fill: var(--chrome); }
.brand.dark { color: var(--ink); }
.apps { display: flex; gap: 4px; }
.apps a { color: var(--chrome-muted); text-decoration: none; padding: 8px 12px; border-radius: 6px; }
.apps a:hover { color: var(--chrome-strong); }
.apps a[aria-current="page"] { background: var(--chrome-2); color: var(--chrome-strong); font-weight: 500; }
.search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; background: var(--chrome-2); border-radius: var(--radius); padding: 0 12px; color: var(--chrome-muted); }
.search input { flex: 1; min-width: 0; min-height: 40px; background: transparent; border: 0; color: var(--chrome-strong); outline: none; }
.search input::placeholder { color: var(--chrome-placeholder); }
.account { display: flex; align-items: center; gap: 8px; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; color: var(--chrome-muted); }
.icon-link:hover, .icon-link[aria-current="page"] { color: var(--chrome-strong); background: var(--chrome-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: 0 0 auto; }
.avatar.soft { width: 40px; height: 40px; background: var(--c1-bg); color: var(--c1-fg); }
.avatar.small-avatar { width: 32px; height: 32px; font-size: 12px; }
.avatar.big-avatar { width: 64px; height: 64px; font-size: 22px; }

/* Shell */
.shell { display: flex; align-items: stretch; min-height: calc(100vh - 56px); }
.sidebar { flex: 0 0 232px; padding: 16px 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.folders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.folder { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.folder:hover { background: var(--line-soft); color: var(--ink); }
.folder[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depth-1 { padding-left: 24px; } .depth-2 { padding-left: 38px; } .depth-3 { padding-left: 52px; }
.depth-4 { padding-left: 66px; } .depth-5 { padding-left: 80px; }
.count { font-family: var(--mono); font-size: 12px; color: var(--accent-dark); font-weight: 600; }
.manage { color: var(--muted); padding: 0 10px; }
.content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.notice, .problem, .banner { margin: 12px 16px 0; padding: 10px 14px; border-radius: var(--radius); }
.notice { background: var(--accent-soft); color: var(--accent-dark); }
.problem { background: var(--danger-soft); color: var(--danger); }
.banner { background: var(--warn-bg); color: var(--warn-fg); margin: 0; }
.banner.subtle { background: var(--line-soft); color: var(--muted); }

/* Panes: list and reader side by side on wide screens. */
.panes { display: flex; flex: 1; align-items: stretch; min-height: 0; }
.list { flex: 0 0 400px; min-width: 0; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.list-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 56px; }
.list-head h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.bulk-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.js .bulk:not(.has-selection) .bulk-bar { display: none; }
.messages { list-style: none; margin: 0; padding: 0; }
.row-wrap { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line-soft); padding-left: 8px; }
.row-wrap .check { margin-top: 10px; }
.row-wrap:hover, .row-wrap.cursor { background: var(--surface-2); }
.row-wrap.selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.row-wrap.checked { background: var(--c1-bg); }
.row { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 12px 16px 12px 4px; color: var(--ink); text-decoration: none; }
.row:hover { color: var(--ink); }
.row-top { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.unread .dot { background: var(--accent); }
.unread .from, .unread .subject { font-weight: 600; }
.from, .subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row time { margin-left: auto; flex: 0 0 auto; }
.marker { color: var(--muted); display: inline-flex; }
.marker .icon { width: 14px; height: 14px; }
.flag { color: var(--flag); display: inline-flex; }
.flag .icon { width: 14px; height: 14px; fill: currentColor; }
.draft-mark { color: var(--danger); font-weight: 600; }
.empty { padding: 32px 16px; color: var(--muted); text-align: center; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; }
.empty-folder { padding: 8px 16px; border-top: 1px solid var(--line-soft); }
.contact-row { flex-direction: row; align-items: center; gap: 12px; }
.contact-text { display: flex; flex-direction: column; min-width: 0; }

/* Menus built on <details>, so they work without script. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.menu-body a { padding: 6px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.menu-body a:hover { background: var(--line-soft); }
.menu-body a[aria-current="true"] { color: var(--accent-dark); font-weight: 600; }
.menu-body input { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; }

/* Tags */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 1px 8px; border-radius: 999px; }
.tag-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 14px; line-height: 1; }
.tag-0, .cal-0 { background: var(--c0-bg); color: var(--c0-fg); }
.tag-1, .cal-1 { background: var(--c1-bg); color: var(--c1-fg); }
.tag-2, .cal-2 { background: var(--c2-bg); color: var(--c2-fg); }
.tag-3, .cal-3 { background: var(--c3-bg); color: var(--c3-fg); }
.tag-4, .cal-4 { background: var(--c4-bg); color: var(--c4-fg); }
.tag-5, .cal-5 { background: var(--c5-bg); color: var(--c5-fg); }
.tag-6, .cal-6 { background: var(--c6-bg); color: var(--c6-fg); }
.tag-7, .cal-7 { background: var(--c7-bg); color: var(--c7-fg); }
.add-tag input { min-height: 26px; width: 110px; border: 1px dashed var(--line); border-radius: 999px; padding: 0 10px; font-size: 12px; background: transparent; }

/* Reader */
.reader { flex: 1 1 auto; min-width: 0; background: var(--surface); display: flex; flex-direction: column; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.toolbar form.inline { display: contents; }
.toolbar .back { display: none; }
.nav-arrows { display: inline-flex; gap: 6px; }
.message { padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.priority { color: var(--danger); font-weight: 700; }
.sender { display: flex; align-items: flex-start; gap: 12px; }
.sender-text { flex: 1; min-width: 0; }
.sender-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--warn-bg); color: var(--warn-fg); }
.chip.pass { background: var(--pass-bg); color: var(--pass-fg); }
.body-frame { width: 100%; height: 70vh; min-height: 360px; border: 1px solid var(--line); border-radius: var(--radius); background: #FFFFFF; }
.text-body { margin: 0; white-space: pre-wrap; word-wrap: break-word; font: 15px/1.6 var(--font); }
.attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.attachment { display: flex; align-items: center; gap: 10px; min-width: 220px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.attachment > span { display: flex; flex-direction: column; }
.reader-empty { margin: auto; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.details dt { color: var(--muted); }
.details dd { margin: 0; }

/* Invitation card in the reader */
.invite { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; background: var(--surface-2); }
.invite .when { font-weight: 600; }
.invite .actions { padding: 0; border: 0; }
.rsvp-pending { color: var(--warn-fg); } .rsvp-accepted { color: var(--pass-fg); } .rsvp-declined { color: var(--danger); } .rsvp-tentative { color: var(--muted); }

/* Compose */
.compose { margin: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; max-width: 960px; }
.compose-head { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.field { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--line-soft); position: relative; }
.field-label { width: 72px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.field input[type="text"] { flex: 1; min-width: 200px; min-height: 36px; border: 0; outline: none; background: transparent; }
.field.attach .field-label, .forwarded .field-label { width: auto; }
.forwarded { border: 0; border-bottom: 1px solid var(--line-soft); margin: 0; }
.options { gap: 20px; }
.checkline { display: inline-flex; align-items: center; gap: 8px; }
.checkline input { accent-color: var(--accent); }
.field-group summary { padding: 10px 20px; color: var(--accent); cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.compose textarea { border: 0; outline: none; padding: 20px; resize: vertical; font: 15px/1.6 var(--font); background: transparent; min-height: 320px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.suggest { position: absolute; left: 104px; right: 20px; top: 100%; z-index: 30; list-style: none; margin: 0; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.suggest li { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--accent-soft); }
.suggest li.group { font-weight: 600; }

/* Plain pages: settings, folders, filters */
.page { margin: 24px; display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.card-title { font-size: 15px; grid-column: 1 / -1; margin-top: 8px; }
.card-title:first-of-type { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px 16px; align-items: center; }
.form-grid > label, .form-grid > .label { color: var(--muted); }
.form-grid input[type="text"], .form-grid input[type="email"], .form-grid input[type="tel"], .form-grid input[type="url"], .form-grid input[type="date"], .form-grid input[type="time"], .form-grid input[type="number"], .form-grid select, .form-grid textarea, .pair input { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; width: 100%; max-width: 520px; }
.form-grid textarea { padding: 8px 10px; resize: vertical; font: inherit; }
.form-grid select { width: auto; }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pair { display: flex; gap: 8px; max-width: 520px; }
.pair select { flex: 0 0 auto; }
.inline-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-fields input, .inline-fields select { width: auto !important; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line-soft); }
.table th { color: var(--muted); font-weight: 500; font-size: 13px; background: var(--surface-2); }
.table .num { text-align: right; }
.table td.folder-cell a { color: var(--ink); }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.link-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.import { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.import input { max-width: 100%; font-size: 12px; }

.error-page { margin: 32px; display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.error-page .problem { margin: 0; }

/* Shortcut help */
.shortcuts-help { position: fixed; inset: 0; z-index: 50; background: rgba(14, 23, 38, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { background: var(--surface); border-radius: 12px; padding: 24px; max-width: 460px; width: 100%; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.keys dt { font-family: var(--mono); font-size: 12px; color: var(--accent-dark); }
.keys dd { margin: 0; }
.kv-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; }
.kv-list dt { color: var(--muted); }
.kv-list dd { margin: 0; overflow-wrap: anywhere; }

/* Login */
/* The sign-in and recovery pages follow the administration console's sign-in:
   one centred card led by the full Elemta artwork. The artwork's lettering is
   white, so light themes get a copy with slate lettering (logo-light.png). */
.login-body { display: flex; flex-direction: column; min-height: 100vh; align-items: center; justify-content: center; gap: 24px; padding: 32px 16px; }
.login { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); }
.login-logo { display: flex; justify-content: center; }
.login-logo img { display: block; width: 100%; max-width: 280px; height: auto; }
.login-title { text-align: center; font-size: 15px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.login form { display: flex; flex-direction: column; gap: 8px; }
.login label { color: var(--ink); font-weight: 500; font-size: 14px; margin-top: 8px; }
.login input { min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; background: var(--surface-2); color: var(--ink); font-size: 15px; }
.login input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.login .button { margin-top: 16px; }
.login .notice, .login .problem { margin: 0; }
.login-links { margin: 0; text-align: center; }
.login-footer { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }

/* ---- Calendar ---------------------------------------------------------- */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cal-head h1 { margin-right: 8px; }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.segmented a { padding: 7px 12px; color: var(--ink); text-decoration: none; border-left: 1px solid var(--line); }
.segmented a:first-child { border-left: 0; }
.segmented a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.cal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--surface); }
.mini { width: 100%; border-collapse: collapse; font-size: 12px; text-align: center; }
.mini caption { font-weight: 600; padding-bottom: 6px; text-align: left; }
.mini th { color: var(--muted); font-weight: 500; padding: 2px 0; }
.mini td { padding: 0; }
.mini a { display: block; padding: 4px 0; border-radius: 50%; color: var(--ink); text-decoration: none; }
.mini a:hover { background: var(--line-soft); }
.mini .other a { color: var(--muted); }
.mini .today a { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.mini .chosen a { box-shadow: inset 0 0 0 2px var(--accent); }

.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1; border-top: 1px solid var(--line); }
.month .dow { padding: 6px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); text-align: left; }
.month .day { min-height: 110px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.month .day:nth-child(7n) { border-right: 0; }
.month .day.other { background: var(--surface-2); }
.month .day.other .daynum { color: var(--muted); }
.daynum { align-self: flex-start; font-size: 12px; padding: 2px 6px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.today .daynum { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.chip-ev { display: block; font-size: 12px; padding: 1px 6px; border-radius: 4px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-ev.timed { background: transparent; }
.chip-ev.timed::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: currentColor; vertical-align: 1px; }
.chip-ev .t { font-family: var(--mono); font-size: 11px; margin-right: 4px; }
.more { font-size: 12px; color: var(--muted); padding-left: 6px; text-decoration: none; }

.time-grid { flex: 1; overflow-y: auto; max-height: calc(100vh - 170px); }
.grid-top { position: sticky; top: 0; z-index: 6; background: var(--surface); }
.week-head { display: grid; border-bottom: 1px solid var(--line); }
.week-head .colhead { padding: 6px 8px; font-size: 12px; color: var(--muted); border-left: 1px solid var(--line-soft); }
.week-head .colhead a { color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 600; display: block; }
.week-head .colhead.today a { color: var(--accent-dark); }
.allday-row { display: grid; border-bottom: 1px solid var(--line); }
.allday-row .cell { border-left: 1px solid var(--line-soft); padding: 2px; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 24px; }
.allday-row .gutter, .week-head .gutter { font-size: 11px; color: var(--muted); padding: 4px; text-align: right; }
.cols-1 { grid-template-columns: 56px minmax(0, 1fr); }
.cols-7 { grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.hours { display: grid; position: relative; }
.hours .gutter { position: relative; }
.hours .hour-label { height: var(--hour); font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.daycol { position: relative; border-left: 1px solid var(--line-soft); }
.daycol .slot { height: var(--hour); border-bottom: 1px solid var(--line-soft); display: block; }
.daycol .slot:hover { background: var(--surface-2); }
.daycol.today { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.ev { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 2px 6px; font-size: 12px; overflow: hidden; text-decoration: none; border-left: 3px solid currentColor; z-index: 2; }
.ev .t { font-family: var(--mono); font-size: 11px; display: block; }
.ev strong { font-weight: 600; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; }

.agenda { padding: 8px 20px 24px; display: flex; flex-direction: column; gap: 4px; }
.agenda h2 { font-size: 14px; color: var(--muted); margin-top: 16px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.agenda h2.today { color: var(--accent-dark); }
.agenda-item { display: grid; grid-template-columns: 130px 10px 1fr; gap: 12px; align-items: baseline; padding: 6px 4px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.agenda-item:hover { background: var(--surface-2); }
.agenda-item .swatch { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }

.event-view { padding: 24px 32px; display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.event-view .when { font-size: 15px; }
.attendees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cal-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }

/* ---- Tasks ------------------------------------------------------------- */
.task-list { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.task form.inline { display: inline-flex; }
.task-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; cursor: pointer; padding: 0; flex: 0 0 auto; margin-top: 1px; }
.task-check:hover { border-color: var(--accent); }
.task.done .task-check { background: var(--accent); border-color: var(--accent); }
.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none; }
.task.done .task-title { text-decoration: line-through; color: var(--muted); }
.task .due { font-size: 12px; color: var(--muted); }
.task .due.overdue { color: var(--danger); font-weight: 600; }
.prio-high { color: var(--danger); font-weight: 700; }
.quick-add { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.quick-add input { flex: 1; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; }

/* ---- Filters ----------------------------------------------------------- */
.rule { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.rule-head { display: flex; align-items: center; gap: 10px; }
.rule-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rule-line input[type="text"], .rule-line select { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; }
.rule-line input[type="text"] { flex: 1 1 200px; }
.rules { display: flex; flex-direction: column; gap: 12px; }

/* Middle widths: the folder tree plus one pane at a time. */
@media (max-width: 1100px) {
  .list { flex: 1 1 auto; border-right: 0; }
  .panes.has-message .list { display: none; }
  .panes:not(.has-message) .reader { display: none; }
  .toolbar .back { display: inline-flex; }
}

/* Phones: the sidebar folds into a strip above the content. */
@media (max-width: 720px) {
  .topbar { padding: 8px 12px; gap: 10px; }
  .apps { order: 3; width: 100%; overflow-x: auto; }
  .shell { flex-direction: column; }
  .sidebar { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .folders { flex-direction: row; overflow-x: auto; }
  .folder { white-space: nowrap; }
  .folder[class*="depth-"] { padding-left: 10px; }
  .manage, .import, .cal-legend, .mini, .sidebar h3, .notify-enable { display: none; }
  .message, .event-view { padding: 16px; }
  .compose { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .page { margin: 12px; }
  .form-grid { grid-template-columns: 1fr; }
  .month .day { min-height: 72px; }
  .chip-ev .t { display: none; }
  .agenda-item { grid-template-columns: 90px 10px 1fr; }
  .suggest { left: 12px; right: 12px; }
}

/* Generated: an event's start (q = quarter hour of the day) and length (d = quarter hours), and its lane when events overlap. */
.q0 { top: calc(var(--hour) * 0 / 4); }
.q1 { top: calc(var(--hour) * 1 / 4); }
.q2 { top: calc(var(--hour) * 2 / 4); }
.q3 { top: calc(var(--hour) * 3 / 4); }
.q4 { top: calc(var(--hour) * 4 / 4); }
.q5 { top: calc(var(--hour) * 5 / 4); }
.q6 { top: calc(var(--hour) * 6 / 4); }
.q7 { top: calc(var(--hour) * 7 / 4); }
.q8 { top: calc(var(--hour) * 8 / 4); }
.q9 { top: calc(var(--hour) * 9 / 4); }
.q10 { top: calc(var(--hour) * 10 / 4); }
.q11 { top: calc(var(--hour) * 11 / 4); }
.q12 { top: calc(var(--hour) * 12 / 4); }
.q13 { top: calc(var(--hour) * 13 / 4); }
.q14 { top: calc(var(--hour) * 14 / 4); }
.q15 { top: calc(var(--hour) * 15 / 4); }
.q16 { top: calc(var(--hour) * 16 / 4); }
.q17 { top: calc(var(--hour) * 17 / 4); }
.q18 { top: calc(var(--hour) * 18 / 4); }
.q19 { top: calc(var(--hour) * 19 / 4); }
.q20 { top: calc(var(--hour) * 20 / 4); }
.q21 { top: calc(var(--hour) * 21 / 4); }
.q22 { top: calc(var(--hour) * 22 / 4); }
.q23 { top: calc(var(--hour) * 23 / 4); }
.q24 { top: calc(var(--hour) * 24 / 4); }
.q25 { top: calc(var(--hour) * 25 / 4); }
.q26 { top: calc(var(--hour) * 26 / 4); }
.q27 { top: calc(var(--hour) * 27 / 4); }
.q28 { top: calc(var(--hour) * 28 / 4); }
.q29 { top: calc(var(--hour) * 29 / 4); }
.q30 { top: calc(var(--hour) * 30 / 4); }
.q31 { top: calc(var(--hour) * 31 / 4); }
.q32 { top: calc(var(--hour) * 32 / 4); }
.q33 { top: calc(var(--hour) * 33 / 4); }
.q34 { top: calc(var(--hour) * 34 / 4); }
.q35 { top: calc(var(--hour) * 35 / 4); }
.q36 { top: calc(var(--hour) * 36 / 4); }
.q37 { top: calc(var(--hour) * 37 / 4); }
.q38 { top: calc(var(--hour) * 38 / 4); }
.q39 { top: calc(var(--hour) * 39 / 4); }
.q40 { top: calc(var(--hour) * 40 / 4); }
.q41 { top: calc(var(--hour) * 41 / 4); }
.q42 { top: calc(var(--hour) * 42 / 4); }
.q43 { top: calc(var(--hour) * 43 / 4); }
.q44 { top: calc(var(--hour) * 44 / 4); }
.q45 { top: calc(var(--hour) * 45 / 4); }
.q46 { top: calc(var(--hour) * 46 / 4); }
.q47 { top: calc(var(--hour) * 47 / 4); }
.q48 { top: calc(var(--hour) * 48 / 4); }
.q49 { top: calc(var(--hour) * 49 / 4); }
.q50 { top: calc(var(--hour) * 50 / 4); }
.q51 { top: calc(var(--hour) * 51 / 4); }
.q52 { top: calc(var(--hour) * 52 / 4); }
.q53 { top: calc(var(--hour) * 53 / 4); }
.q54 { top: calc(var(--hour) * 54 / 4); }
.q55 { top: calc(var(--hour) * 55 / 4); }
.q56 { top: calc(var(--hour) * 56 / 4); }
.q57 { top: calc(var(--hour) * 57 / 4); }
.q58 { top: calc(var(--hour) * 58 / 4); }
.q59 { top: calc(var(--hour) * 59 / 4); }
.q60 { top: calc(var(--hour) * 60 / 4); }
.q61 { top: calc(var(--hour) * 61 / 4); }
.q62 { top: calc(var(--hour) * 62 / 4); }
.q63 { top: calc(var(--hour) * 63 / 4); }
.q64 { top: calc(var(--hour) * 64 / 4); }
.q65 { top: calc(var(--hour) * 65 / 4); }
.q66 { top: calc(var(--hour) * 66 / 4); }
.q67 { top: calc(var(--hour) * 67 / 4); }
.q68 { top: calc(var(--hour) * 68 / 4); }
.q69 { top: calc(var(--hour) * 69 / 4); }
.q70 { top: calc(var(--hour) * 70 / 4); }
.q71 { top: calc(var(--hour) * 71 / 4); }
.q72 { top: calc(var(--hour) * 72 / 4); }
.q73 { top: calc(var(--hour) * 73 / 4); }
.q74 { top: calc(var(--hour) * 74 / 4); }
.q75 { top: calc(var(--hour) * 75 / 4); }
.q76 { top: calc(var(--hour) * 76 / 4); }
.q77 { top: calc(var(--hour) * 77 / 4); }
.q78 { top: calc(var(--hour) * 78 / 4); }
.q79 { top: calc(var(--hour) * 79 / 4); }
.q80 { top: calc(var(--hour) * 80 / 4); }
.q81 { top: calc(var(--hour) * 81 / 4); }
.q82 { top: calc(var(--hour) * 82 / 4); }
.q83 { top: calc(var(--hour) * 83 / 4); }
.q84 { top: calc(var(--hour) * 84 / 4); }
.q85 { top: calc(var(--hour) * 85 / 4); }
.q86 { top: calc(var(--hour) * 86 / 4); }
.q87 { top: calc(var(--hour) * 87 / 4); }
.q88 { top: calc(var(--hour) * 88 / 4); }
.q89 { top: calc(var(--hour) * 89 / 4); }
.q90 { top: calc(var(--hour) * 90 / 4); }
.q91 { top: calc(var(--hour) * 91 / 4); }
.q92 { top: calc(var(--hour) * 92 / 4); }
.q93 { top: calc(var(--hour) * 93 / 4); }
.q94 { top: calc(var(--hour) * 94 / 4); }
.q95 { top: calc(var(--hour) * 95 / 4); }
.d1 { height: calc(var(--hour) * 1 / 4 - 2px); }
.d2 { height: calc(var(--hour) * 2 / 4 - 2px); }
.d3 { height: calc(var(--hour) * 3 / 4 - 2px); }
.d4 { height: calc(var(--hour) * 4 / 4 - 2px); }
.d5 { height: calc(var(--hour) * 5 / 4 - 2px); }
.d6 { height: calc(var(--hour) * 6 / 4 - 2px); }
.d7 { height: calc(var(--hour) * 7 / 4 - 2px); }
.d8 { height: calc(var(--hour) * 8 / 4 - 2px); }
.d9 { height: calc(var(--hour) * 9 / 4 - 2px); }
.d10 { height: calc(var(--hour) * 10 / 4 - 2px); }
.d11 { height: calc(var(--hour) * 11 / 4 - 2px); }
.d12 { height: calc(var(--hour) * 12 / 4 - 2px); }
.d13 { height: calc(var(--hour) * 13 / 4 - 2px); }
.d14 { height: calc(var(--hour) * 14 / 4 - 2px); }
.d15 { height: calc(var(--hour) * 15 / 4 - 2px); }
.d16 { height: calc(var(--hour) * 16 / 4 - 2px); }
.d17 { height: calc(var(--hour) * 17 / 4 - 2px); }
.d18 { height: calc(var(--hour) * 18 / 4 - 2px); }
.d19 { height: calc(var(--hour) * 19 / 4 - 2px); }
.d20 { height: calc(var(--hour) * 20 / 4 - 2px); }
.d21 { height: calc(var(--hour) * 21 / 4 - 2px); }
.d22 { height: calc(var(--hour) * 22 / 4 - 2px); }
.d23 { height: calc(var(--hour) * 23 / 4 - 2px); }
.d24 { height: calc(var(--hour) * 24 / 4 - 2px); }
.d25 { height: calc(var(--hour) * 25 / 4 - 2px); }
.d26 { height: calc(var(--hour) * 26 / 4 - 2px); }
.d27 { height: calc(var(--hour) * 27 / 4 - 2px); }
.d28 { height: calc(var(--hour) * 28 / 4 - 2px); }
.d29 { height: calc(var(--hour) * 29 / 4 - 2px); }
.d30 { height: calc(var(--hour) * 30 / 4 - 2px); }
.d31 { height: calc(var(--hour) * 31 / 4 - 2px); }
.d32 { height: calc(var(--hour) * 32 / 4 - 2px); }
.d33 { height: calc(var(--hour) * 33 / 4 - 2px); }
.d34 { height: calc(var(--hour) * 34 / 4 - 2px); }
.d35 { height: calc(var(--hour) * 35 / 4 - 2px); }
.d36 { height: calc(var(--hour) * 36 / 4 - 2px); }
.d37 { height: calc(var(--hour) * 37 / 4 - 2px); }
.d38 { height: calc(var(--hour) * 38 / 4 - 2px); }
.d39 { height: calc(var(--hour) * 39 / 4 - 2px); }
.d40 { height: calc(var(--hour) * 40 / 4 - 2px); }
.d41 { height: calc(var(--hour) * 41 / 4 - 2px); }
.d42 { height: calc(var(--hour) * 42 / 4 - 2px); }
.d43 { height: calc(var(--hour) * 43 / 4 - 2px); }
.d44 { height: calc(var(--hour) * 44 / 4 - 2px); }
.d45 { height: calc(var(--hour) * 45 / 4 - 2px); }
.d46 { height: calc(var(--hour) * 46 / 4 - 2px); }
.d47 { height: calc(var(--hour) * 47 / 4 - 2px); }
.d48 { height: calc(var(--hour) * 48 / 4 - 2px); }
.d49 { height: calc(var(--hour) * 49 / 4 - 2px); }
.d50 { height: calc(var(--hour) * 50 / 4 - 2px); }
.d51 { height: calc(var(--hour) * 51 / 4 - 2px); }
.d52 { height: calc(var(--hour) * 52 / 4 - 2px); }
.d53 { height: calc(var(--hour) * 53 / 4 - 2px); }
.d54 { height: calc(var(--hour) * 54 / 4 - 2px); }
.d55 { height: calc(var(--hour) * 55 / 4 - 2px); }
.d56 { height: calc(var(--hour) * 56 / 4 - 2px); }
.d57 { height: calc(var(--hour) * 57 / 4 - 2px); }
.d58 { height: calc(var(--hour) * 58 / 4 - 2px); }
.d59 { height: calc(var(--hour) * 59 / 4 - 2px); }
.d60 { height: calc(var(--hour) * 60 / 4 - 2px); }
.d61 { height: calc(var(--hour) * 61 / 4 - 2px); }
.d62 { height: calc(var(--hour) * 62 / 4 - 2px); }
.d63 { height: calc(var(--hour) * 63 / 4 - 2px); }
.d64 { height: calc(var(--hour) * 64 / 4 - 2px); }
.d65 { height: calc(var(--hour) * 65 / 4 - 2px); }
.d66 { height: calc(var(--hour) * 66 / 4 - 2px); }
.d67 { height: calc(var(--hour) * 67 / 4 - 2px); }
.d68 { height: calc(var(--hour) * 68 / 4 - 2px); }
.d69 { height: calc(var(--hour) * 69 / 4 - 2px); }
.d70 { height: calc(var(--hour) * 70 / 4 - 2px); }
.d71 { height: calc(var(--hour) * 71 / 4 - 2px); }
.d72 { height: calc(var(--hour) * 72 / 4 - 2px); }
.d73 { height: calc(var(--hour) * 73 / 4 - 2px); }
.d74 { height: calc(var(--hour) * 74 / 4 - 2px); }
.d75 { height: calc(var(--hour) * 75 / 4 - 2px); }
.d76 { height: calc(var(--hour) * 76 / 4 - 2px); }
.d77 { height: calc(var(--hour) * 77 / 4 - 2px); }
.d78 { height: calc(var(--hour) * 78 / 4 - 2px); }
.d79 { height: calc(var(--hour) * 79 / 4 - 2px); }
.d80 { height: calc(var(--hour) * 80 / 4 - 2px); }
.d81 { height: calc(var(--hour) * 81 / 4 - 2px); }
.d82 { height: calc(var(--hour) * 82 / 4 - 2px); }
.d83 { height: calc(var(--hour) * 83 / 4 - 2px); }
.d84 { height: calc(var(--hour) * 84 / 4 - 2px); }
.d85 { height: calc(var(--hour) * 85 / 4 - 2px); }
.d86 { height: calc(var(--hour) * 86 / 4 - 2px); }
.d87 { height: calc(var(--hour) * 87 / 4 - 2px); }
.d88 { height: calc(var(--hour) * 88 / 4 - 2px); }
.d89 { height: calc(var(--hour) * 89 / 4 - 2px); }
.d90 { height: calc(var(--hour) * 90 / 4 - 2px); }
.d91 { height: calc(var(--hour) * 91 / 4 - 2px); }
.d92 { height: calc(var(--hour) * 92 / 4 - 2px); }
.d93 { height: calc(var(--hour) * 93 / 4 - 2px); }
.d94 { height: calc(var(--hour) * 94 / 4 - 2px); }
.d95 { height: calc(var(--hour) * 95 / 4 - 2px); }
.d96 { height: calc(var(--hour) * 96 / 4 - 2px); }
.lanes2.lane0 { left: calc(0 * 100% / 2 + 2px); right: auto; width: calc(100% / 2 - 4px); }
.lanes2.lane1 { left: calc(1 * 100% / 2 + 2px); right: auto; width: calc(100% / 2 - 4px); }
.lanes3.lane0 { left: calc(0 * 100% / 3 + 2px); right: auto; width: calc(100% / 3 - 4px); }
.lanes3.lane1 { left: calc(1 * 100% / 3 + 2px); right: auto; width: calc(100% / 3 - 4px); }
.lanes3.lane2 { left: calc(2 * 100% / 3 + 2px); right: auto; width: calc(100% / 3 - 4px); }
.lanes4.lane0 { left: calc(0 * 100% / 4 + 2px); right: auto; width: calc(100% / 4 - 4px); }
.lanes4.lane1 { left: calc(1 * 100% / 4 + 2px); right: auto; width: calc(100% / 4 - 4px); }
.lanes4.lane2 { left: calc(2 * 100% / 4 + 2px); right: auto; width: calc(100% / 4 - 4px); }
.lanes4.lane3 { left: calc(3 * 100% / 4 + 2px); right: auto; width: calc(100% / 4 - 4px); }

/* Additions for the calendar and tasks pages. */
.search-spacer { flex: 1 1 280px; }
.swatch-inline { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 10px; vertical-align: 1px; }
.form-grid input.narrow { width: 70px; }
.form-wide { grid-column: 1 / -1; margin: 0; }
.time-field { display: inline-flex; }
.compact-date { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; }
.task-delete { padding: 0 20px 20px; }
.reader > .card { margin: 20px; }
.event-view .icon, .muted .icon { width: 15px; height: 15px; vertical-align: -2px; }
.cal-legend .swatch { vertical-align: -1px; }
.ev.short { white-space: nowrap; line-height: 1.3; padding-top: 1px; }
.ev.short .t { display: inline; margin-right: 4px; }
.ev.short br, .ev.short br + span { display: none; }
.rule-line .narrow-text { flex: 0 1 160px; }
.sieve-raw { font-size: 12px; background: var(--surface-2); padding: 12px; border-radius: var(--radius); overflow-x: auto; }
.rules { list-style: none; margin: 0; padding: 0; }
.thread { border: 1px solid var(--line); border-radius: var(--radius); }
.thread summary { padding: 8px 12px; cursor: pointer; color: var(--muted); }
.thread-list { list-style: none; margin: 0; padding: 0 0 6px; }
.thread-list a { display: grid; grid-template-columns: minmax(120px, 220px) 1fr auto; gap: 12px; padding: 6px 12px; color: var(--ink); text-decoration: none; }
.thread-list a:hover { background: var(--surface-2); }
.thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--line-soft); }
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.toast a { color: var(--ink); font-weight: 600; text-decoration: none; }
.toast button { align-self: flex-end; }
.notify-enable { padding: 0 10px; text-align: left; }
.print-body { background: #FFFFFF; color: #0E1726; }
.print { max-width: 780px; margin: 24px auto; padding: 0 16px; display: flex; flex-direction: column; gap: 16px; }
@media print {
  .topbar, .sidebar, .toolbar, .bulk-bar, .notice, .toast-stack { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .print { margin: 0; }
}
.editor-wrap { display: flex; flex-direction: column; border-bottom: 1px solid var(--line-soft); }
.editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 16px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.tb { border: 1px solid transparent; background: transparent; border-radius: 4px; min-height: 30px; padding: 0 8px; cursor: pointer; color: var(--ink); }
.tb:hover { border-color: var(--line); background: var(--surface); }
.tb-sep { width: 1px; background: var(--line); margin: 4px 4px; }
.editor { min-height: 320px; padding: 20px; outline: none; font: 15px/1.6 var(--font); overflow-wrap: anywhere; }
.editor blockquote { margin: 0 0 0 4px; padding-left: 12px; border-left: 3px solid var(--line); color: var(--muted); }
.editor:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-soft); }
.to-rich { border-bottom: 0; }
.toolbar .menu-body { left: 0; right: auto; }
.menu-body form { display: flex; flex-direction: column; gap: 2px; }
.menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; color: var(--ink); }
.menu-item:hover { background: var(--line-soft); }
.menu-body select[size] { max-width: none; width: 100%; padding: 4px; }
.quick-add input { min-width: 0; }
.quick-add .compact-date { flex: 0 0 auto; width: 140px; }

/* Theme toggle: shows a moon in the light theme (go dark) and a sun in the
   dark one (go light), whichever way the theme was chosen. */
.theme-toggle { border: 0; background: none; cursor: pointer; padding: 0; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
.source-page { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.source-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.source { margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* Context menus (right-click). Positioned by script with left/top, which
   the CSP allows: it forbids style attributes in markup, not CSSOM writes. */
.ctx-menu { position: fixed; z-index: 70; min-width: 200px; max-height: 70vh; overflow-y: auto; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.ctx-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); padding: 7px 12px; border-radius: 6px; cursor: pointer; font: inherit; white-space: nowrap; }
.ctx-item:hover, .ctx-item:focus { background: var(--accent-soft); color: var(--accent-dark); outline: none; }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover, .ctx-item.danger:focus { background: var(--danger-soft); color: var(--danger); }
.ctx-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }
.tb-group { display: inline-flex; align-items: center; gap: 2px; padding-right: 6px; margin-right: 2px; border-right: 1px solid var(--line); }
.tb-select { min-height: 30px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); padding: 0 4px; font-size: 13px; max-width: 120px; }
.tb-color { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.tb-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.tb-a { font-weight: 700; text-decoration: underline; text-decoration-color: #c0392b; text-decoration-thickness: 3px; }
.tb-hl { color: #e6c700; }
.tb.danger { color: var(--danger); }
.image-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.editor img { max-width: 100%; height: auto; cursor: pointer; }
.editor table { border-collapse: collapse; }
.editor td, .editor th { border: 1px solid var(--line); padding: 4px 6px; min-width: 40px; }
.editor pre { background: var(--surface-2); padding: 8px; border-radius: 4px; }
.body-frame.autosized { min-height: 120px; }
.refresh { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--muted); }
.refresh:hover { background: var(--line-soft); color: var(--accent-dark); }
.refresh .icon { width: 16px; height: 16px; }
.refresh.spinning .icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .refresh.spinning .icon { animation: none; } }
.thread-count { font-size: 11px; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; line-height: 16px; }
.thread-note { margin: -8px 0 0; }
.thread-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.thread-card > summary { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; list-style: none; }
.thread-card > summary::-webkit-details-marker { display: none; }
.thread-card[open] > summary { border-bottom: 1px solid var(--line-soft); }
.tc-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tc-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.unread-dot { background: var(--accent); }
.tc-frame { height: 240px; min-height: 120px; }
.form-grid input[type="password"] { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; width: 100%; max-width: 520px; }
.form-grid input[type="password"] { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; width: 100%; max-width: 520px; }
.new-mail-pill { align-self: center; margin: 8px auto; border: 0; border-radius: 999px; padding: 6px 14px; background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.row-wrap.new-arrival { animation: arrive 2.5s ease-out; }
@keyframes arrive { from { background: var(--accent-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .row-wrap.new-arrival { animation: none; background: var(--accent-soft); } }