/* Elemta Webmail's visual system: the default palette, shared with the
   administration console, plus the choices in Settings, 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". The later
   palettes apply the same way. Every palette keeps --chrome and --surface
   near-neutral, with its colour in the ground and the accent: the logo sits
   on those two, and a tint there would dull its fire and water. */
: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;
  }
}

/* Forest: soft green-grey ground, one deep green accent. */
:root[data-palette="forest"] {
  --ground: #F2F5F1;
  --surface: #FFFFFF;
  --surface-2: #F8FAF7;
  --ink: #14201A;
  --muted: #4A5A50;
  --chrome: #FFFFFF;
  --chrome-2: #EBF0EA;
  --chrome-fg: #14201A;
  --chrome-muted: #4A5A50;
  --chrome-strong: #14201A;
  --chrome-line: #DCE4DB;
  --chrome-accent: #2F6B45;
  --chrome-placeholder: #667568;
  --on-accent: #FFFFFF;
  --line: #DCE4DB;
  --line-soft: #EBF0EA;
  --accent: #2F6B45;
  --accent-dark: #234F34;
  --accent-hover: #234F34;
  --accent-soft: #E2EFE5;
  --danger: #B3261E;
  --danger-soft: #FBE9E7;
  --pass-fg: #166534;
  --pass-bg: #DCFCE7;
  --warn-fg: #92400E;
  --warn-bg: #FEF3C7;
  --flag: #B45309;
  --shadow: 0 8px 24px rgba(20, 32, 26, .12);
  --c0-bg: #E2EFE5; --c0-fg: #234F34;
  --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: #E9E7FB; --c5-fg: #3D2F9E;
  --c6-bg: #FCE7F1; --c6-fg: #96285E;
  --c7-bg: #E8EBEF; --c7-fg: #2F3A4A;
  color-scheme: light;
}

:root[data-palette="forest"][data-theme="dark"] {
  --ground: #0C120E;
  --surface: #141C17;
  --surface-2: #101713;
  --ink: #E6EDE8;
  --muted: #9BABA0;
  --chrome: #0F1612;
  --chrome-2: #1D2820;
  --chrome-fg: #EEF3EF;
  --chrome-muted: #C4D0C7;
  --chrome-strong: #FFFFFF;
  --chrome-line: #243028;
  --chrome-accent: #7FD19B;
  --chrome-placeholder: #86958A;
  --on-accent: #08130C;
  --line: #2A372E;
  --line-soft: #1D2820;
  --accent: #4CAF73;
  --accent-dark: #7FD19B;
  --accent-hover: #7FD19B;
  --accent-soft: #16301F;
  --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: #16301F; --c0-fg: #7FD19B;
  --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: #211E4A; --c5-fg: #B3ACF5;
  --c6-bg: #3A1528; --c6-fg: #F3A3C8;
  --c7-bg: #222C3A; --c7-fg: #C5CDD8;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="forest"]:not([data-theme="light"]) {
    --ground: #0C120E;
    --surface: #141C17;
    --surface-2: #101713;
    --ink: #E6EDE8;
    --muted: #9BABA0;
    --chrome: #0F1612;
    --chrome-2: #1D2820;
    --chrome-fg: #EEF3EF;
    --chrome-muted: #C4D0C7;
    --chrome-strong: #FFFFFF;
    --chrome-line: #243028;
    --chrome-accent: #7FD19B;
    --chrome-placeholder: #86958A;
    --on-accent: #08130C;
    --line: #2A372E;
    --line-soft: #1D2820;
    --accent: #4CAF73;
    --accent-dark: #7FD19B;
    --accent-hover: #7FD19B;
    --accent-soft: #16301F;
    --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: #16301F; --c0-fg: #7FD19B;
    --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: #211E4A; --c5-fg: #B3ACF5;
    --c6-bg: #3A1528; --c6-fg: #F3A3C8;
    --c7-bg: #222C3A; --c7-fg: #C5CDD8;
    color-scheme: dark;
  }
}

/* Plum: lilac-grey ground, one violet accent. */
:root[data-palette="plum"] {
  --ground: #F5F3F7;
  --surface: #FFFFFF;
  --surface-2: #FAF8FB;
  --ink: #1E1726;
  --muted: #56495F;
  --chrome: #FFFFFF;
  --chrome-2: #EFEBF3;
  --chrome-fg: #1E1726;
  --chrome-muted: #56495F;
  --chrome-strong: #1E1726;
  --chrome-line: #E3DDE9;
  --chrome-accent: #6B3FA0;
  --chrome-placeholder: #736580;
  --on-accent: #FFFFFF;
  --line: #E3DDE9;
  --line-soft: #EFEBF3;
  --accent: #6B3FA0;
  --accent-dark: #53307E;
  --accent-hover: #53307E;
  --accent-soft: #EFE6F8;
  --danger: #B3261E;
  --danger-soft: #FBE9E7;
  --pass-fg: #166534;
  --pass-bg: #DCFCE7;
  --warn-fg: #92400E;
  --warn-bg: #FEF3C7;
  --flag: #B45309;
  --shadow: 0 8px 24px rgba(30, 23, 38, .12);
  --c0-bg: #EFE6F8; --c0-fg: #53307E;
  --c1-bg: #E4ECFA; --c1-fg: #1F4FA8;
  --c2-bg: #E3F1EF; --c2-fg: #08524C;
  --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="plum"][data-theme="dark"] {
  --ground: #100D15;
  --surface: #19141F;
  --surface-2: #15111B;
  --ink: #ECE7F1;
  --muted: #A99FB4;
  --chrome: #140F1A;
  --chrome-2: #251D2E;
  --chrome-fg: #F2EEF6;
  --chrome-muted: #CFC6D8;
  --chrome-strong: #FFFFFF;
  --chrome-line: #2A2233;
  --chrome-accent: #C9A8F0;
  --chrome-placeholder: #8F8399;
  --on-accent: #140A20;
  --line: #30273A;
  --line-soft: #251D2E;
  --accent: #A67BDB;
  --accent-dark: #C9A8F0;
  --accent-hover: #C9A8F0;
  --accent-soft: #2A1C3D;
  --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: #2A1C3D; --c0-fg: #C9A8F0;
  --c1-bg: #16264A; --c1-fg: #9DBBF5;
  --c2-bg: #10302D; --c2-fg: #7FE0D2;
  --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="plum"]:not([data-theme="light"]) {
    --ground: #100D15;
    --surface: #19141F;
    --surface-2: #15111B;
    --ink: #ECE7F1;
    --muted: #A99FB4;
    --chrome: #140F1A;
    --chrome-2: #251D2E;
    --chrome-fg: #F2EEF6;
    --chrome-muted: #CFC6D8;
    --chrome-strong: #FFFFFF;
    --chrome-line: #2A2233;
    --chrome-accent: #C9A8F0;
    --chrome-placeholder: #8F8399;
    --on-accent: #140A20;
    --line: #30273A;
    --line-soft: #251D2E;
    --accent: #A67BDB;
    --accent-dark: #C9A8F0;
    --accent-hover: #C9A8F0;
    --accent-soft: #2A1C3D;
    --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: #2A1C3D; --c0-fg: #C9A8F0;
    --c1-bg: #16264A; --c1-fg: #9DBBF5;
    --c2-bg: #10302D; --c2-fg: #7FE0D2;
    --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;
  }
}

/* Sand: warm paper ground, one bronze accent. */
:root[data-palette="sand"] {
  --ground: #F6F3EE;
  --surface: #FFFFFF;
  --surface-2: #FBF9F5;
  --ink: #241F19;
  --muted: #5C5347;
  --chrome: #FFFFFF;
  --chrome-2: #EFEAE2;
  --chrome-fg: #241F19;
  --chrome-muted: #5C5347;
  --chrome-strong: #241F19;
  --chrome-line: #E4DDD2;
  --chrome-accent: #7A5230;
  --chrome-placeholder: #786E60;
  --on-accent: #FFFFFF;
  --line: #E4DDD2;
  --line-soft: #EFEAE2;
  --accent: #7A5230;
  --accent-dark: #5E3E23;
  --accent-hover: #5E3E23;
  --accent-soft: #F3E9DE;
  --danger: #B3261E;
  --danger-soft: #FBE9E7;
  --pass-fg: #166534;
  --pass-bg: #DCFCE7;
  --warn-fg: #92400E;
  --warn-bg: #FEF3C7;
  --flag: #B45309;
  --shadow: 0 8px 24px rgba(36, 31, 25, .12);
  --c0-bg: #F3E9DE; --c0-fg: #5E3E23;
  --c1-bg: #E4ECFA; --c1-fg: #1F4FA8;
  --c2-bg: #F3E8FB; --c2-fg: #6B2C91;
  --c3-bg: #FBE9E7; --c3-fg: #9A2A1F;
  --c4-bg: #E3F1EF; --c4-fg: #08524C;
  --c5-bg: #E1F3E8; --c5-fg: #0B5A2E;
  --c6-bg: #FCE7F1; --c6-fg: #96285E;
  --c7-bg: #E8EBEF; --c7-fg: #2F3A4A;
  color-scheme: light;
}

:root[data-palette="sand"][data-theme="dark"] {
  --ground: #13110D;
  --surface: #1C1915;
  --surface-2: #181511;
  --ink: #EEE9E1;
  --muted: #ADA497;
  --chrome: #16130F;
  --chrome-2: #28241E;
  --chrome-fg: #F3EFE8;
  --chrome-muted: #D2CABE;
  --chrome-strong: #FFFFFF;
  --chrome-line: #2E2922;
  --chrome-accent: #E0BC94;
  --chrome-placeholder: #928878;
  --on-accent: #1A1108;
  --line: #352F27;
  --line-soft: #28241E;
  --accent: #C79A6B;
  --accent-dark: #E0BC94;
  --accent-hover: #E0BC94;
  --accent-soft: #33261A;
  --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: #33261A; --c0-fg: #E0BC94;
  --c1-bg: #16264A; --c1-fg: #9DBBF5;
  --c2-bg: #2C1840; --c2-fg: #D3A8F0;
  --c3-bg: #3A1714; --c3-fg: #F5A49B;
  --c4-bg: #10302D; --c4-fg: #7FE0D2;
  --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="sand"]:not([data-theme="light"]) {
    --ground: #13110D;
    --surface: #1C1915;
    --surface-2: #181511;
    --ink: #EEE9E1;
    --muted: #ADA497;
    --chrome: #16130F;
    --chrome-2: #28241E;
    --chrome-fg: #F3EFE8;
    --chrome-muted: #D2CABE;
    --chrome-strong: #FFFFFF;
    --chrome-line: #2E2922;
    --chrome-accent: #E0BC94;
    --chrome-placeholder: #928878;
    --on-accent: #1A1108;
    --line: #352F27;
    --line-soft: #28241E;
    --accent: #C79A6B;
    --accent-dark: #E0BC94;
    --accent-hover: #E0BC94;
    --accent-soft: #33261A;
    --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: #33261A; --c0-fg: #E0BC94;
    --c1-bg: #16264A; --c1-fg: #9DBBF5;
    --c2-bg: #2C1840; --c2-fg: #D3A8F0;
    --c3-bg: #3A1714; --c3-fg: #F5A49B;
    --c4-bg: #10302D; --c4-fg: #7FE0D2;
    --c5-bg: #12301F; --c5-fg: #8FD9AE;
    --c6-bg: #3A1528; --c6-fg: #F3A3C8;
    --c7-bg: #222C3A; --c7-fg: #C5CDD8;
    color-scheme: dark;
  }
}

/* Graphite: true neutral greys, so the logo is the only colour on the bar. */
:root[data-palette="graphite"] {
  --ground: #F3F3F4;
  --surface: #FFFFFF;
  --surface-2: #F9F9FA;
  --ink: #18181B;
  --muted: #52525B;
  --chrome: #FFFFFF;
  --chrome-2: #ECECEE;
  --chrome-fg: #18181B;
  --chrome-muted: #52525B;
  --chrome-strong: #18181B;
  --chrome-line: #E0E0E3;
  --chrome-accent: #3F3F46;
  --chrome-placeholder: #71717A;
  --on-accent: #FFFFFF;
  --line: #E0E0E3;
  --line-soft: #ECECEE;
  --accent: #3F3F46;
  --accent-dark: #27272A;
  --accent-hover: #27272A;
  --accent-soft: #E8E8EA;
  --danger: #B3261E;
  --danger-soft: #FBE9E7;
  --pass-fg: #166534;
  --pass-bg: #DCFCE7;
  --warn-fg: #92400E;
  --warn-bg: #FEF3C7;
  --flag: #B45309;
  --shadow: 0 8px 24px rgba(24, 24, 27, .12);
  --c0-bg: #E8E8EA; --c0-fg: #27272A;
  --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: #E3F1EF; --c7-fg: #08524C;
  color-scheme: light;
}

:root[data-palette="graphite"][data-theme="dark"] {
  --ground: #0E0E10;
  --surface: #18181B;
  --surface-2: #131316;
  --ink: #EDEDEF;
  --muted: #A1A1AA;
  --chrome: #131316;
  --chrome-2: #26262A;
  --chrome-fg: #F4F4F5;
  --chrome-muted: #D4D4D8;
  --chrome-strong: #FFFFFF;
  --chrome-line: #29292E;
  --chrome-accent: #D4D4D8;
  --chrome-placeholder: #85858E;
  --on-accent: #0E0E10;
  --line: #303035;
  --line-soft: #26262A;
  --accent: #A1A1AA;
  --accent-dark: #D4D4D8;
  --accent-hover: #D4D4D8;
  --accent-soft: #2A2A2E;
  --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: #2A2A2E; --c0-fg: #D4D4D8;
  --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: #10302D; --c7-fg: #7FE0D2;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --ground: #0E0E10;
    --surface: #18181B;
    --surface-2: #131316;
    --ink: #EDEDEF;
    --muted: #A1A1AA;
    --chrome: #131316;
    --chrome-2: #26262A;
    --chrome-fg: #F4F4F5;
    --chrome-muted: #D4D4D8;
    --chrome-strong: #FFFFFF;
    --chrome-line: #29292E;
    --chrome-accent: #D4D4D8;
    --chrome-placeholder: #85858E;
    --on-accent: #0E0E10;
    --line: #303035;
    --line-soft: #26262A;
    --accent: #A1A1AA;
    --accent-dark: #D4D4D8;
    --accent-hover: #D4D4D8;
    --accent-soft: #2A2A2E;
    --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: #2A2A2E; --c0-fg: #D4D4D8;
    --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: #10302D; --c7-fg: #7FE0D2;
    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: var(--on-accent); 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: var(--on-accent); 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: var(--on-accent); 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)}