/* 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 { display: inline-flex; align-items: center; gap: 8px; color: var(--chrome-muted); text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; }
.apps a .icon { width: 17px; height: 17px; opacity: .85; }
.apps a[aria-current="page"] .icon, .apps a:hover .icon { opacity: 1; }
.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"], .icon-link[aria-pressed="true"] { 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; }
/* A message uses the whole reading pane unless the user asked for the
   calendar beside it (Settings), which keeps the message at a reading
   width and puts the calendar panel in the space that frees. The panel
   needs room, so narrower windows drop it and the message widens again. */
.with-cal .message { max-width: 980px; }
.mail-cal { flex: 0 0 260px; padding: 16px 12px; border-left: 1px solid var(--line); background: var(--ground); display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; }
.mail-cal h3 { margin: 4px 0 -6px; }
.upcoming, .upcoming ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.upcoming { gap: 10px; }
.upcoming > li > a { color: var(--ink); text-decoration: none; }
.upcoming > li > a.today { color: var(--accent-dark); }
.upcoming-item { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--ink); text-decoration: none; padding: 2px 4px; border-radius: 4px; overflow: hidden; white-space: nowrap; }
.upcoming-item:hover { background: var(--line-soft); }
.upcoming-item > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.upcoming-item .mono { font-size: 11px; flex: 0 0 auto; }
.upcoming-item .swatch { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; align-self: center; }
@media (max-width: 1399px) {
  .mail-cal, .cal-toggle { display: none; }
  .with-cal .message { max-width: none; }
}
.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; }
/* Near the top, where the eye lands after choosing a folder, not adrift
   in the middle of a tall empty pane. */
.reader-empty { margin: 56px auto 0; }
.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); text-decoration: none; font-weight: 500; }
.table td.folder-cell a:hover { color: var(--accent-dark); text-decoration: underline; }
.row-actions { display: flex; align-items: center; 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; }
.country-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.country-picker .country-none { margin: 0; }
.country-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.country-chips:empty { display: none; }
.country-chip { display: inline-flex; align-items: center; gap: 2px; padding: 3px 3px 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); font-size: 13px; }
.country-chip button { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.country-chip button:hover, .country-chip button:focus-visible { background: color-mix(in srgb, currentColor 18%, transparent); }
.country-picker .pair select { flex: 1 1 auto; }
.js .country-add { display: none; }
/* With scripts, the import is a link like its export neighbour: the label
   opens the file picker and choosing a file submits (app.js), so the
   browser's own file control, which can't be styled, stays out of sight.
   Without scripts the plain control and button remain. */
.js .import { padding: 0; gap: 0; }
.js .import label { color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0 10px; }
.js .import label:hover { color: var(--accent-dark); }
.js .import:focus-within label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.js .import input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.js .import button { display: none; }

.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; }
.login-footer a, .about a { color: inherit; }

/* ---- 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; }

/* The calendar views fit the window, like a desktop calendar, so the page
   never scrolls: month rows share the height left under the heading, and
   the week and day grids and the agenda list scroll inside themselves with
   a quiet scrollbar. Event and form pages are ordinary pages and keep
   scrolling, as do phones, where the views stack. */
@media (min-width: 721px) {
  body:has(.cal-body > .month, .cal-body > .time-grid, .cal-body > .agenda) { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(.cal-body > .month, .cal-body > .time-grid, .cal-body > .agenda) .shell { flex: 1 1 auto; min-height: 0; }
  body:has(.cal-body > .month, .cal-body > .time-grid, .cal-body > .agenda) .sidebar { overflow-y: auto; }
  body:has(.cal-body > .month, .cal-body > .time-grid, .cal-body > .agenda) .content { min-height: 0; }
  .cal-body:has(> .month, > .time-grid, > .agenda) { overflow: hidden; }
  .cal-body > .month { min-height: 0; overflow-y: auto; grid-template-rows: auto; grid-auto-rows: minmax(88px, 1fr); }
  .cal-body > .month .day { min-height: 0; overflow: hidden; }
  .cal-body > .agenda { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
  .cal-body > .time-grid { min-height: 0; max-height: none; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

/* ---- 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; }
  /* Four labels don't fit a phone's width: icons share the row evenly and
     each label stays as the link's accessible name. */
  .apps a { flex: 1; justify-content: center; padding: 10px 0; }
  .apps a .icon { width: 20px; height: 20px; }
  .apps a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .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; }
.cal-toggle button { border: 0; background: none; cursor: pointer; padding: 0; }
.cal-toggle button:hover, .cal-toggle button[aria-pressed="true"] { background: var(--chrome-2); color: var(--chrome-strong); }
.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); } }

/* Account security (settings): one-time secrets are large and easy to copy. */
.code-list { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.25rem 1rem; }
.app-password { font-size: 1.4rem; letter-spacing: 0.08em; user-select: all; margin: 0.25rem 0 1rem; }
.qr { background: #fff; padding: 8px; border-radius: 6px; image-rendering: pixelated; max-width: 100%; height: auto; }

/* ---- Settings ------------------------------------------------------------
   Settings, Filters and Folders share a sidebar of sections. Changes return
   to the card they were made in, so cards keep clear of the window edge. */
.page .card[id], .settings-form[id] { scroll-margin-top: 16px; }
.settings { max-width: 820px; }
.page-head h1 { margin: 0; font-size: 22px; }
.page-head p { margin: 4px 0 0; }
.sidebar-title { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 10px 6px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; padding: 0 10px; }
.back-link:hover { color: var(--ink); }
.back-link .icon { width: 14px; height: 14px; }
.settings-form { display: flex; flex-direction: column; gap: 16px; }
/* The one save button for the general settings stays in reach. */
.save-bar { position: sticky; bottom: 0; display: flex; justify-content: flex-end; padding: 12px 0; background: linear-gradient(to bottom, transparent, var(--ground) 40%); }
.card .card-title { margin: 0; }
.card.form-grid .card-title { margin-bottom: 4px; }
.card > p { margin: 10px 0 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line-soft); color: var(--muted); }
.badge.on { background: var(--accent-soft); color: var(--accent-dark); }
.card-notice { margin: 12px 0 0; }
.card .notice, .card .problem { margin-left: 0; margin-right: 0; }
.card .table { margin-top: 14px; }
.card .kv-list { margin-top: 14px; }
.table td.num { width: 1%; white-space: nowrap; }
.small-button { min-height: 30px; padding: 0 10px; font-size: 13px; }
.inline-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-fields input[type="text"] { min-height: 38px; border: 1px solid var(--line); border-radius: 6px; padding: 0 10px; flex: 1 1 220px; max-width: 360px; }
.card > form.inline-fields, .add-row { margin-top: 14px; }
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; max-width: 160px !important; flex: 0 1 160px !important; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.toggle-row p { margin: 4px 0 0; }
.setup-steps ol { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 18px; }
.setup-steps label { display: block; margin-bottom: 8px; }
.login .qr { align-self: center; }
.qr-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 10px; }
.qr-wrap .small { max-width: 280px; }
.setup-key { display: inline-block; margin-top: 4px; font-size: 14px; letter-spacing: .05em; user-select: all; }
.secret-box { margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.secret-box p { margin: 0; }
/* Native file pickers, styled like the other buttons in both themes. */
input[type="file"] { color: var(--muted); font: inherit; max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; margin-right: 10px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); cursor: pointer; }
input[type="file"]::file-selector-button:hover { border-color: var(--muted); }
/* Wide tables scroll inside their card on phones instead of overflowing it. */
.table-wrap { overflow-x: auto; margin-top: 14px; }
.table-wrap .table { margin-top: 0; }
@media (max-width: 720px) {
  .sidebar-title, .back-link { display: none; }
  .settings .table th, .settings .table td { padding: 8px 10px; }
  .card { padding: 16px; }
  .settings-nav .folder { min-height: 32px; }
  .toggle-row { flex-direction: column; align-items: flex-start; }
}

/* Availability on the event form: one row per person for the chosen day,
   busy times shaded, the proposed time outlined. */
.availability { display: grid; gap: 4px; font-size: .875rem; }
.availability .fb-row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 8px; align-items: center; }
.availability .fb-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.availability .fb-track { position: relative; height: 18px; background: var(--line-soft); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.availability .fb-hours { position: relative; height: 1.1em; color: var(--muted); font-size: .75rem; }
.availability .fb-hours span { position: absolute; transform: translateX(-50%); }
.availability .fb-busy { position: absolute; top: 0; bottom: 0; background: var(--accent); opacity: .75; }
.availability .fb-busy.tentative { background: repeating-linear-gradient(45deg, var(--accent) 0 4px, transparent 4px 8px); opacity: .6; }
.availability .fb-slot { position: absolute; top: -1px; bottom: -1px; border: 2px solid var(--ink); border-radius: 3px; pointer-events: none; }
.availability .fb-unknown { color: var(--muted); font-style: italic; }
.availability .fb-summary { margin: 2px 0 0; color: var(--muted); }
.availability .fb-summary.conflict { color: var(--warn-fg); }
.mailbox-switch{display:grid;gap:.35rem;margin-bottom:1rem}.mailbox-switch label{font-size:.8rem;color:var(--muted)}.mailbox-switch select{width:100%;min-width:0}
.admin-access-banner{padding:.65rem 1rem;background:var(--warn-bg,#fff3cf);color:var(--warn-fg,#5b3900);font-weight:600;text-align:center;border-bottom:1px solid var(--line)}