@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/font-0.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/font-1.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/font-2.ttf) format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  font-display: swap;
  src: url(assets/font-3.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/font-4.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/font-5.ttf) format('truetype');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/font-6.ttf) format('truetype');
}
/* Rustmail token contract v1. Import without a preprocessor. */
:root {
  --rm-font-ui: "IBM Plex Sans", "Segoe UI", sans-serif;
  --rm-font-reading: "Source Serif 4", Georgia, serif;
  --rm-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --rm-text-xs: .75rem; --rm-text-sm: .8125rem; --rm-text-md: .875rem;
  --rm-text-base: 1rem; --rm-text-lg: 1.125rem; --rm-text-xl: 1.5rem;
  --rm-text-display: 2rem;
  --rm-leading-ui: 1.45; --rm-leading-reading: 1.65;
  --rm-weight-regular: 400; --rm-weight-medium: 500; --rm-weight-semibold: 600;
  --rm-space-1: .25rem; --rm-space-2: .5rem; --rm-space-3: .75rem;
  --rm-space-4: 1rem; --rm-space-5: 1.25rem; --rm-space-6: 1.5rem;
  --rm-space-8: 2rem; --rm-space-10: 2.5rem; --rm-space-12: 3rem;
  --rm-radius-sm: .25rem; --rm-radius-md: .5rem; --rm-radius-lg: .75rem;
  --rm-radius-pill: 99rem;
  --rm-shadow-popover: 0 8px 28px #101A2024;
  --rm-shadow-modal: 0 24px 80px #101A204D;
  --rm-duration-fast: 100ms; --rm-duration-normal: 160ms;
  --rm-ease: cubic-bezier(.2, 0, 0, 1);
  --rm-sidebar-width: 14rem; --rm-list-width: 23rem; --rm-header-height: 4.5rem;
  --rm-target: 2.75rem; --rm-row-height: 6.75rem;
  --rm-z-sticky: 10; --rm-z-popover: 20; --rm-z-dialog: 40; --rm-z-toast: 50;
}

:root, [data-theme="rag"] {
  color-scheme: light;
  --rm-canvas: #F4F0E8;
  --rm-surface: #FBFAF6;
  --rm-raised: #FFFEFB;
  --rm-subtle: #E7E1D6;
  --rm-text: #231F1C;
  --rm-muted: #5E564E;
  --rm-accent: #6E2C26;
  --rm-accent-hover: #5C241F;
  --rm-on-accent: #FBF6F1;
  --rm-selected: #E4D2CC;
  --rm-line: #D5CFC6;
  --rm-control: #908A82;
  --rm-focus: #6E2C26;
  --rm-work-bg: #E4EDF5;
  --rm-work-fg: #254C70;
  --rm-work-mark: #386B94;
  --rm-personal-bg: #F4EADB;
  --rm-personal-fg: #6B4820;
  --rm-personal-mark: #8A6028;
  --rm-local-bg: #EEE7F6;
  --rm-local-fg: #5C4275;
  --rm-local-mark: #75558D;
  --rm-danger-bg: #FBE8E8;
  --rm-danger-fg: #972E34;
  --rm-warning-bg: #FFF1CF;
  --rm-warning-fg: #755119;
  --rm-success-bg: #E2EFE9;
  --rm-success-fg: #245B4D;
}

[data-theme="porcelain"] {
  color-scheme: light;
  --rm-canvas: #F1F3F2;
  --rm-surface: #F7F8F8;
  --rm-raised: #FFFFFF;
  --rm-subtle: #E3E7E6;
  --rm-text: #1C2826;
  --rm-muted: #4E5C58;
  --rm-accent: #6E2C26;
  --rm-accent-hover: #5C241F;
  --rm-on-accent: #FBF6F1;
  --rm-selected: #E4D5D2;
  --rm-line: #D3D8D6;
  --rm-control: #868E8C;
  --rm-focus: #6E2C26;
  --rm-work-bg: #E4EDF5;
  --rm-work-fg: #254C70;
  --rm-work-mark: #386B94;
  --rm-personal-bg: #F4EADB;
  --rm-personal-fg: #6B4820;
  --rm-personal-mark: #8A6028;
  --rm-local-bg: #EEE7F6;
  --rm-local-fg: #5C4275;
  --rm-local-mark: #75558D;
  --rm-danger-bg: #FBE8E8;
  --rm-danger-fg: #972E34;
  --rm-warning-bg: #FFF1CF;
  --rm-warning-fg: #755119;
  --rm-success-bg: #E2EFE9;
  --rm-success-fg: #245B4D;
}

[data-theme="cloth"] {
  color-scheme: light;
  --rm-canvas: #F3EBDF;
  --rm-surface: #FBF6EE;
  --rm-raised: #FFFCF7;
  --rm-subtle: #E6DDD0;
  --rm-text: #2A221C;
  --rm-muted: #5C5148;
  --rm-accent: #6E2C26;
  --rm-accent-hover: #5C241F;
  --rm-on-accent: #FBF6F1;
  --rm-selected: #E6D4CE;
  --rm-line: #DDD4C6;
  --rm-control: #8C867E;
  --rm-focus: #6E2C26;
  --rm-work-bg: #E4EDF5;
  --rm-work-fg: #254C70;
  --rm-work-mark: #386B94;
  --rm-personal-bg: #F4EADB;
  --rm-personal-fg: #6B4820;
  --rm-personal-mark: #8A6028;
  --rm-local-bg: #EEE7F6;
  --rm-local-fg: #5C4275;
  --rm-local-mark: #75558D;
  --rm-danger-bg: #FBE8E8;
  --rm-danger-fg: #972E34;
  --rm-warning-bg: #FFF1CF;
  --rm-warning-fg: #755119;
  --rm-success-bg: #E2EFE9;
  --rm-success-fg: #245B4D;
}

[data-theme="clarity-light"] {
  color-scheme: light;
  --rm-canvas: #F4F5F5;
  --rm-surface: #FFFFFF;
  --rm-raised: #FFFFFF;
  --rm-subtle: #E7ECF0;
  --rm-text: #192D3B;
  --rm-muted: #485D6B;
  --rm-accent: #165C85;
  --rm-accent-hover: #12476A;
  --rm-on-accent: #FFFFFF;
  --rm-selected: #DDEDF7;
  --rm-line: #B8C5CF;
  --rm-control: #6B7D89;
  --rm-focus: #005B93;
  --rm-work-bg: #E4EDF5;
  --rm-work-fg: #254C70;
  --rm-work-mark: #386B94;
  --rm-personal-bg: #F4EADB;
  --rm-personal-fg: #6B4820;
  --rm-personal-mark: #8A6028;
  --rm-local-bg: #EEE7F6;
  --rm-local-fg: #5C4275;
  --rm-local-mark: #75558D;
  --rm-danger-bg: #FBE8E8;
  --rm-danger-fg: #972E34;
  --rm-warning-bg: #FFF1CF;
  --rm-warning-fg: #755119;
  --rm-success-bg: #E2EFE9;
  --rm-success-fg: #245B4D;
}

[data-theme="lamp"] {
  color-scheme: dark;
  --rm-canvas: #1C1A17;
  --rm-surface: #24211D;
  --rm-raised: #2C2823;
  --rm-subtle: #2A2622;
  --rm-text: #F0E9DE;
  --rm-muted: #C2B6A8;
  --rm-accent: #E4C4B8;
  --rm-accent-hover: #F0D5CC;
  --rm-on-accent: #2A1814;
  --rm-selected: #3A2C28;
  --rm-line: #3A342E;
  --rm-control: #7C706A;
  --rm-focus: #E4C4B8;
  --rm-work-bg: #223B50;
  --rm-work-fg: #C5DEF6;
  --rm-work-mark: #A7CFF3;
  --rm-personal-bg: #46351F;
  --rm-personal-fg: #F5D3A3;
  --rm-personal-mark: #EBC68C;
  --rm-local-bg: #3D2E50;
  --rm-local-fg: #E0D0F2;
  --rm-local-mark: #CDB1ED;
  --rm-danger-bg: #4B272C;
  --rm-danger-fg: #FFC3C7;
  --rm-warning-bg: #48391D;
  --rm-warning-fg: #F6D18C;
  --rm-success-bg: #294337;
  --rm-success-fg: #BDE7D0;
}

[data-theme="indigo"] {
  color-scheme: dark;
  --rm-canvas: #171A20;
  --rm-surface: #1E222A;
  --rm-raised: #262B34;
  --rm-subtle: #22262F;
  --rm-text: #E8E6DF;
  --rm-muted: #C4C0B6;
  --rm-accent: #E4C4B8;
  --rm-accent-hover: #F0D5CC;
  --rm-on-accent: #2A1814;
  --rm-selected: #3A2E32;
  --rm-line: #2C3340;
  --rm-control: #70767A;
  --rm-focus: #E4C4B8;
  --rm-work-bg: #223B50;
  --rm-work-fg: #C5DEF6;
  --rm-work-mark: #A7CFF3;
  --rm-personal-bg: #46351F;
  --rm-personal-fg: #F5D3A3;
  --rm-personal-mark: #EBC68C;
  --rm-local-bg: #3D2E50;
  --rm-local-fg: #E0D0F2;
  --rm-local-mark: #CDB1ED;
  --rm-danger-bg: #4B272C;
  --rm-danger-fg: #FFC3C7;
  --rm-warning-bg: #48391D;
  --rm-warning-fg: #F6D18C;
  --rm-success-bg: #294337;
  --rm-success-fg: #BDE7D0;
}

[data-theme="plum"] {
  color-scheme: dark;
  --rm-canvas: #1E181E;
  --rm-surface: #261E26;
  --rm-raised: #2E242E;
  --rm-subtle: #2A222A;
  --rm-text: #F3EBE6;
  --rm-muted: #D0C0C4;
  --rm-accent: #E4C4B8;
  --rm-accent-hover: #F0D5CC;
  --rm-on-accent: #2A1814;
  --rm-selected: #3C2C34;
  --rm-line: #342830;
  --rm-control: #7C6E74;
  --rm-focus: #E4C4B8;
  --rm-work-bg: #223B50;
  --rm-work-fg: #C5DEF6;
  --rm-work-mark: #A7CFF3;
  --rm-personal-bg: #46351F;
  --rm-personal-fg: #F5D3A3;
  --rm-personal-mark: #EBC68C;
  --rm-local-bg: #3D2E50;
  --rm-local-fg: #E0D0F2;
  --rm-local-mark: #CDB1ED;
  --rm-danger-bg: #4B272C;
  --rm-danger-fg: #FFC3C7;
  --rm-warning-bg: #48391D;
  --rm-warning-fg: #F6D18C;
  --rm-success-bg: #294337;
  --rm-success-fg: #BDE7D0;
}

[data-theme="clarity-dark"] {
  color-scheme: dark;
  --rm-canvas: #151B20;
  --rm-surface: #1E2931;
  --rm-raised: #29353E;
  --rm-subtle: #32414C;
  --rm-text: #F2F6FA;
  --rm-muted: #BFCDD8;
  --rm-accent: #B7DCFF;
  --rm-accent-hover: #D5EBFF;
  --rm-on-accent: #132E43;
  --rm-selected: #324A5D;
  --rm-line: #536B7D;
  --rm-control: #91A6B7;
  --rm-focus: #C2E3FF;
  --rm-work-bg: #223B50;
  --rm-work-fg: #C5DEF6;
  --rm-work-mark: #A7CFF3;
  --rm-personal-bg: #46351F;
  --rm-personal-fg: #F5D3A3;
  --rm-personal-mark: #EBC68C;
  --rm-local-bg: #3D2E50;
  --rm-local-fg: #E0D0F2;
  --rm-local-mark: #CDB1ED;
  --rm-danger-bg: #4B272C;
  --rm-danger-fg: #FFC3C7;
  --rm-warning-bg: #48391D;
  --rm-warning-fg: #F6D18C;
  --rm-success-bg: #294337;
  --rm-success-fg: #BDE7D0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --rm-canvas: #1C1A17;
  --rm-surface: #24211D;
  --rm-raised: #2C2823;
  --rm-subtle: #2A2622;
  --rm-text: #F0E9DE;
  --rm-muted: #C2B6A8;
  --rm-accent: #E4C4B8;
  --rm-accent-hover: #F0D5CC;
  --rm-on-accent: #2A1814;
  --rm-selected: #3A2C28;
  --rm-line: #3A342E;
  --rm-control: #7C706A;
  --rm-focus: #E4C4B8;
  --rm-work-bg: #223B50;
  --rm-work-fg: #C5DEF6;
  --rm-work-mark: #A7CFF3;
  --rm-personal-bg: #46351F;
  --rm-personal-fg: #F5D3A3;
  --rm-personal-mark: #EBC68C;
  --rm-local-bg: #3D2E50;
  --rm-local-fg: #E0D0F2;
  --rm-local-mark: #CDB1ED;
  --rm-danger-bg: #4B272C;
  --rm-danger-fg: #FFC3C7;
  --rm-warning-bg: #48391D;
  --rm-warning-fg: #F6D18C;
  --rm-success-bg: #294337;
  --rm-success-fg: #BDE7D0;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rm-duration-fast: 0ms; --rm-duration-normal: 0ms; }
}
/* Focus offset exposes surface between control fill and the ring. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--rm-focus); outline-offset: 3px;
}
::selection { color: var(--rm-text); background: var(--rm-selected); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--rm-canvas); color: var(--rm-text); font: 400 var(--rm-text-md)/var(--rm-leading-ui) var(--rm-font-ui); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rm-accent); text-underline-offset: .2em; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: var(--rm-target); padding: .6rem .9rem; background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-control); border-radius: var(--rm-radius-md); text-decoration: none; cursor: pointer; font-weight: 500; }
button:hover, .button:hover { background: var(--rm-subtle); }
button[aria-disabled=true] { cursor: not-allowed; }
.primary { background: var(--rm-accent); color: var(--rm-on-accent); border-color: var(--rm-accent); }
.primary:hover { background: var(--rm-accent-hover); }
.quiet { border-color: transparent; background: transparent; }
.icon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 44px; padding: .65rem; }
h1,h2,h3,p { margin-top: 0; }
h1 { font: 500 var(--rm-text-display)/1.18 var(--rm-font-reading); letter-spacing: -.025em; margin-bottom: .5rem; }
h2 { font-size: var(--rm-text-lg); font-weight: 600; }
h3 { font-size: var(--rm-text-base); font-weight: 600; }
small, .small { font-size: var(--rm-text-sm); }
.muted { color: var(--rm-muted); }
.eyebrow { font-size: var(--rm-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--rm-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 100; top: -100px; left: 12px; padding: 12px; color: var(--rm-text); background: var(--rm-surface); }
.skip:focus { top: 12px; }
.topbar { height: var(--rm-header-height); display: grid; grid-template-columns: var(--rm-sidebar-width) 1fr auto; align-items: center; border-bottom: 1px solid var(--rm-line); padding-right: 1.5rem; gap: 1.5rem; background: var(--rm-surface); }
/* Header lockup: the folded-sheet mark plus the wordmark in Source Serif 4 at
   weight 500, sentence case, tracking -0.03em (design/identity/IDENTITY.md). */
.brand { display: flex; align-items: center; gap: .6rem; padding-left: 1.5rem; font: 500 1.5rem var(--rm-font-reading); letter-spacing: -.03em; text-decoration: none; color: var(--rm-text); }
.brand-mark { display: block; width: 26px; height: 26px; flex: none; }
/* The stamp preview sits under the compose body, quietly: it is a reminder of
   what will be appended, not a second place to type. */
.stamp-preview { display: flex; flex-direction: column; gap: .1rem; margin: .5rem 0 0; padding-top: .6rem; border-top: 1px solid var(--rm-line); color: var(--rm-muted); font-size: .75rem; }
.stamp-name { font: 500 .8125rem var(--rm-font-reading); letter-spacing: -.02em; color: var(--rm-text); }
.stamp-preview::before { content: "Added when this message is sent"; font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }

/* Opening window: startup only, over the shell, closed as soon as the boot
   requests settle (design/identity/IDENTITY.md "Opening window"). */
.opening-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: var(--rm-canvas); }
.opening-window { width: min(380px, calc(100vw - 3rem)); padding: 2.25rem 2rem 1.75rem; background: var(--rm-surface); border: 1px solid var(--rm-control); box-shadow: 0 18px 48px rgb(35 31 28 / 12%); }
.opening-brand { display: flex; align-items: center; gap: .6rem; }
.opening-brand .brand-mark { width: 28px; height: 28px; }
.opening-word { font: 500 1.75rem var(--rm-font-reading); letter-spacing: -.03em; }
.opening-window h2 { font: 500 1.25rem var(--rm-font-reading); letter-spacing: -.02em; margin: 1.75rem 0 .4rem; }
.opening-status { font-size: .8125rem; color: var(--rm-muted); margin: 0 0 1.375rem; }
/* Track and fill are siblings, not parent and child: `opacity` forms a group,
   so a dimmed track holding the fill would also fade the accent to 35% exactly
   where the bar should be strongest. The track is dimmed on its own layer. */
.opening-bar { position: relative; height: 2px; width: 100%; }
.opening-track { height: 2px; width: 100%; background: var(--rm-line); opacity: .35; }
.opening-fill { position: absolute; inset: 0 auto 0 0; height: 2px; background: var(--rm-accent); transition: width .18s ease-out; }
.opening-count { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--rm-muted); }
/* A text action, per the identity's window: the generic button rule gives every
   button the 44px target, a surface fill and a rounded border, so this one has
   to unset all four or it reads as a second primary action. The underline is
   drawn with box-shadow so it does not add a second baseline. */
.opening-cancel { min-height: 0; margin-top: 1.625rem; padding: 0; border: 0; border-radius: 0; background: none; font-size: .8125rem; font-weight: 400; color: var(--rm-muted); box-shadow: inset 0 -1px 0 currentColor; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .opening-fill { transition: none; } }

/* Watermark: low and to the right of the reading sheet only, never the sidebar
   or list. Easy to see means too strong. */
.sheet-mark { position: absolute; right: 1.5rem; bottom: 1.25rem; width: 104px; height: 104px; color: var(--rm-text); opacity: .05; pointer-events: none; }
.sheet-mark svg { width: 100%; height: 100%; display: block; }
[data-theme="lamp"] .sheet-mark, [data-theme="indigo"] .sheet-mark, [data-theme="plum"] .sheet-mark,
[data-theme="clarity-dark"] .sheet-mark { opacity: .07; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .sheet-mark { opacity: .07; } }
.search { display: flex; align-items: center; gap: .75rem; max-width: 670px; background: var(--rm-canvas); border: 1px solid var(--rm-control); border-radius: var(--rm-radius-md); padding: 0 .8rem; }
.search input { width: 100%; height: 42px; border: 0; background: transparent; min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--rm-muted); opacity: 1; }
kbd { font: .75rem var(--rm-font-mono); padding: .2rem .35rem; border: 1px solid var(--rm-control); border-radius: 4px; background: var(--rm-surface); color: var(--rm-muted); white-space: nowrap; }
.top-actions { display: flex; align-items: center; gap: .5rem; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; background: var(--rm-subtle); color: var(--rm-text); border-radius: 50%; font-size: .8rem; font-weight: 600; }
.workspace { display: grid; grid-template-columns: var(--rm-sidebar-width) minmax(0,1fr); height: calc(100dvh - var(--rm-header-height) - 45px); min-height: 0; }
.sidebar, .mail-list, .reader, .calendar-main, .settings-main, .states-main { overflow: auto; }
.main-mail { min-height: 0; }
.sidebar { display: flex; flex-direction: column; padding: 1.5rem 1rem 1rem; gap: 1.4rem; border-right: 1px solid var(--rm-line); }
.switcher { position: relative; }
.switcher summary { list-style: none; cursor: pointer; display: flex; gap: .6rem; align-items: center; min-height: 44px; }
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary small { display: block; color: var(--rm-muted); font-weight: 400; }
.switcher-menu { position: absolute; top: 100%; left: 0; z-index: 20; width: 240px; padding: .5rem; border: 1px solid var(--rm-control); background: var(--rm-raised); box-shadow: var(--rm-shadow-popover); border-radius: var(--rm-radius-md); }
.switcher-menu { width: 100%; }
.switcher-menu a { display: block; padding: .7rem; text-decoration: none; overflow-wrap: anywhere; }
.nav { display: grid; gap: .25rem; }
.nav a { display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border-radius: var(--rm-radius-md); color: var(--rm-muted); text-decoration: none; min-height: 44px; }
.nav a:hover { background: var(--rm-subtle); }
.nav a[aria-current=page] { background: var(--rm-selected); color: var(--rm-accent); font-weight: 600; }
.count { margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--rm-text-xs); }
.sidebar .eyebrow { padding: 0 .75rem; margin-bottom: .6rem; }
.sources { display: grid; gap: .1rem; }
.source { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .75rem; }
.source input { width: 18px; height: 18px; accent-color: var(--rm-accent); }
.source .shape { font-size: 1rem; }
.sidebar-bottom { margin-top: auto; padding: .5rem .75rem; }
.sidebar-bottom p { margin: .4rem 0; }
.sidebar-bottom a { text-decoration: underline; }
.sync-dot { display: inline-block; width: .45rem; height: .45rem; background: var(--rm-accent); border-radius: 50%; margin-right: .35rem; }
.main-mail { display: grid; grid-template-columns: var(--rm-list-width) minmax(0,1fr); min-width: 0; }
.mail-list { border-right: 1px solid var(--rm-line); background: var(--rm-surface); min-width: 0; }
.list-head { padding: 1.6rem 1.5rem .75rem; }
.list-head h1 { font-size: 1.6rem; }
.split { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.filters { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.5rem .9rem; border-bottom: 1px solid var(--rm-line); }
.filters button { min-height: 36px; padding: .35rem .7rem; border: 0; font-size: var(--rm-text-sm); }
.filters button[aria-pressed=true] { background: var(--rm-selected); color: var(--rm-accent); }
.list-help { padding: .6rem 1.5rem; margin: 0; background: var(--rm-canvas); font-size: var(--rm-text-xs); color: var(--rm-muted); }
.message { padding: 1rem 1.5rem; border-bottom: 1px solid var(--rm-line); min-height: var(--rm-row-height); cursor: pointer; position: relative; }
.message:hover { background: var(--rm-subtle); }
.message[aria-selected=true] { background: var(--rm-selected); }
.message[data-open=true]::before { content: ''; position: absolute; inset: 1rem auto 1rem 0; width: 3px; background: var(--rm-accent); }
.message:focus-visible { outline-offset: -4px; }
.message time { font-size: var(--rm-text-xs); color: var(--rm-muted); }
.message .sender { font-weight: 600; }
.message .subject { display: block; margin: .35rem 0 .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message .snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rm-muted); font-size: var(--rm-text-sm); margin: 0; }
.message .badge { margin-top: .45rem; }
[data-density="compact"] { --rm-row-height: 4.5rem; }
[data-density="compact"] .message { padding: .6rem 1.5rem; }
[data-density="compact"] .message .snippet { display: none; }
.badge { display: inline-flex; gap: .35rem; align-items: center; padding: .15rem .45rem; border-radius: 4px; font-size: var(--rm-text-xs); font-weight: 500; background: var(--rm-subtle); color: var(--rm-text); }
.work { background: var(--rm-work-bg); color: var(--rm-work-fg); }
.personal { background: var(--rm-personal-bg); color: var(--rm-personal-fg); }
.local { background: var(--rm-local-bg); color: var(--rm-local-fg); }
.warning { background: var(--rm-warning-bg); color: var(--rm-warning-fg); }
.danger { background: var(--rm-danger-bg); color: var(--rm-danger-fg); }
.success { background: var(--rm-success-bg); color: var(--rm-success-fg); }
.reader { background: var(--rm-surface); min-width: 0; }
.reader-toolbar { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: .5rem; border-bottom: 1px solid var(--rm-line); padding: .75rem 1.6rem; }
.toolbar-group { display: flex; gap: .3rem; align-items: center; }
.reader-body { padding: 2rem clamp(1.5rem, 3.3vw, 3.5rem); max-width: 950px; margin: auto; position: relative; }
.reader-body h1 { margin: .7rem 0 1.4rem; }
.metadata { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem; }
.metadata time { margin-left: auto; font-size: var(--rm-text-xs); color: var(--rm-muted); white-space: nowrap; }
.prose { font: 400 var(--rm-text-lg)/var(--rm-leading-reading) var(--rm-font-reading); max-width: 66ch; }
.prose p { margin-bottom: 1rem; }
.attachment { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--rm-control); border-radius: var(--rm-radius-md); margin: 1.5rem 0; background: var(--rm-canvas); }
.attachment .icon { width: 28px; height: 28px; }
.attachment .quiet { margin-left: auto; }
.reply-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.3rem; border-top: 1px solid var(--rm-line); }
.fold { border-top: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); padding: 1rem 0; margin: 1rem 0 1.5rem; }
.fold summary { cursor: pointer; min-height: 44px; align-content: center; }
.fold p { margin: .5rem 0; }
.mobile-back { display: none; }
.reference-bar { padding: .4rem 1.5rem; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: .8rem; background: var(--rm-subtle); border-top: 1px solid var(--rm-line); font-size: var(--rm-text-xs); }
.reference-bar select { background: var(--rm-surface); padding: .3rem; border: 1px solid var(--rm-control); border-radius: 4px; max-width: 180px; min-height: 32px; }
.reference-bar a { font-weight: 500; }
.reference-bar .theme-control { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.empty-reader { display: grid; place-content: center; padding: 3rem; text-align: center; background: var(--rm-surface); }
.empty-reader .icon { width: 44px; height: 44px; margin: 0 auto 1.4rem; color: var(--rm-accent); }
.empty-reader h2 { font: 500 1.6rem var(--rm-font-reading); }
.empty-reader p { color: var(--rm-muted); max-width: 30ch; }
dialog { margin: auto; padding: 0; width: min(760px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); background: var(--rm-raised); color: var(--rm-text); border: 1px solid var(--rm-control); border-radius: var(--rm-radius-lg); box-shadow: var(--rm-shadow-modal); }
dialog[open].compose-dialog { display: flex; flex-direction: column; }
.compose-dialog .dialog-body { flex: 1; min-height: 0; overflow: auto; }
.compose-dialog .dialog-head, .compose-dialog .dialog-foot { flex: none; }
dialog::backdrop { background: #101A2070; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--rm-line); }
.dialog-head h2 { margin: 0; }
.dialog-body { padding: 0 1.5rem 1.5rem; }
.field-row { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--rm-line); padding: .5rem 0; }
.field-row > label { width: 4rem; flex: none; color: var(--rm-muted); }
.field-row input, .field-row select { flex: 1; min-width: 0; border: 1px solid var(--rm-control); background: var(--rm-raised); padding: .6rem; border-radius: 4px; }
.recipient { display: flex; gap: .4rem; align-items: center; }
.editor { width: 100%; height: 220px; resize: vertical; border: 1px solid var(--rm-control); background: var(--rm-raised); border-radius: 4px; padding: 1rem; font: 1rem/1.65 var(--rm-font-reading); margin-top: 1rem; }
.format-bar { display: flex; gap: .4rem; align-items: center; }
.dialog-foot { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: 1rem 1.5rem; background: var(--rm-canvas); border-top: 1px solid var(--rm-line); flex-wrap: wrap; }
.notice { padding: .75rem 1rem; border-radius: var(--rm-radius-sm); margin: 1rem 0; }
.notice p { margin: .25rem 0; }
.notice button { margin-top: .5rem; }
.toast { position: fixed; bottom: 4rem; right: 1.5rem; max-width: min(420px, calc(100vw - 48px)); background: var(--rm-raised); color: var(--rm-text); padding: 1rem 1.5rem; border: 1px solid var(--rm-control); border-radius: 8px; box-shadow: var(--rm-shadow-popover); z-index: 60; }
[hidden] { display: none !important; }
.calendar-main { background: var(--rm-surface); padding: 1.5rem 1.5rem 0; min-width: 0; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-bottom: 1rem; }
.calendar-head h1 { margin: .3rem 0; }
.view-switch { display: flex; gap: .25rem; padding: .25rem; background: var(--rm-canvas); border-radius: 8px; }
.view-switch button { border: 0; background: transparent; min-height: 36px; padding: .4rem .7rem; }
.view-switch button[aria-pressed=true] { background: var(--rm-selected); color: var(--rm-accent); }
.cal-meta { display: flex; justify-content: space-between; gap: 1rem; margin: .5rem 0 1rem; color: var(--rm-muted); font-size: var(--rm-text-sm); }
.calendar-scroll { overflow-x: auto; }
.week-grid { min-width: 760px; display: grid; grid-template-columns: 60px repeat(7,minmax(0,1fr)); border-top: 1px solid var(--rm-line); border-left: 1px solid var(--rm-line); }
.week-grid [role=row] { display: contents; }
.week-grid [role=columnheader] { padding: .8rem .5rem; text-align: center; border-bottom: 1px solid var(--rm-line); border-right: 1px solid var(--rm-line); color: var(--rm-muted); font-size: var(--rm-text-xs); }
.day-number { display: block; font-size: 1.4rem; color: var(--rm-text); font-weight: 500; margin-top: .3rem; }
.today .day-number { width: 36px; height: 36px; line-height: 36px; margin: .1rem auto 0; background: var(--rm-accent); color: var(--rm-on-accent); border-radius: 50%; }
.week-grid [role=rowheader] { font-size: var(--rm-text-xs); text-align: center; padding-top: .5rem; color: var(--rm-muted); border-bottom: 1px solid var(--rm-line); }
.week-grid [role=gridcell] { min-height: 86px; border-right: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); padding: .25rem; min-width: 0; }
.week-grid [role=gridcell]:focus-visible { outline-offset: -4px; }
.event { padding: .4rem .5rem; border-radius: 4px; font-size: var(--rm-text-xs); display: block; min-height: 74px; }
.event strong { display: block; font-weight: 600; font-size: var(--rm-text-sm); }
.event .event-source { display: block; font-weight: 500; margin-bottom: .15rem; }
.all-day [role=gridcell] { min-height: 40px; }
.all-day .event { min-height: 32px; }
.agenda { margin: 1rem 0; border-top: 1px solid var(--rm-line); }
.agenda-row { display: grid; grid-template-columns: 100px 1fr; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--rm-line); }
.agenda-row h3 { margin-bottom: .4rem; }
.drawer { width: min(480px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; }
.drawer .dialog-body { padding-top: 1rem; }
.form-stack { display: grid; gap: 1.1rem; }
.form-stack label { display: grid; gap: .4rem; font-weight: 500; min-width: 0; }
.form-stack input, .form-stack select, .form-stack textarea { background: var(--rm-raised); border: 1px solid var(--rm-control); border-radius: 4px; padding: .7rem; width: 100%; min-height: 44px; }
.form-stack .pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.form-stack input { min-width: 0; max-width: 100%; }
.drawer form { height: 100%; display: flex; flex-direction: column; }
.drawer .dialog-body { flex: 1; min-height: 0; overflow: auto; }
.drawer .dialog-head, .drawer .dialog-foot { flex: none; }
.calendar-scroll-hint { display: none; }
.settings-main { padding: 2rem clamp(1.5rem, 4vw, 4rem); background: var(--rm-surface); min-width: 0; }
.settings-layout { display: grid; grid-template-columns: 170px minmax(0,780px); gap: 3rem; margin-top: 2rem; }
.settings-layout > .nav { align-content: start; }
.settings-section { padding: 0 0 1.6rem; border-bottom: 1px solid var(--rm-line); margin-bottom: 1.6rem; }
.settings-section h2 { margin-bottom: .3rem; }
.theme-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; margin-top: 1rem; }
.theme-card { display: grid; justify-content: stretch; text-align: left; min-width: 0; padding: .65rem; background: var(--rm-canvas); color: var(--rm-text); border-color: var(--rm-control); font-size: var(--rm-text-sm); }
.theme-card:hover { background: var(--rm-surface); }
.theme-preview { background: var(--rm-surface); border: 1px solid var(--rm-line); display: flex; align-items: center; gap: .35rem; padding: .65rem; margin-bottom: .5rem; border-radius: 4px; }
.theme-preview i { display: block; width: 16px; height: 24px; background: var(--rm-subtle); }
.theme-preview b { display: block; flex: 1; height: 12px; background: var(--rm-accent); border-radius: 2px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; }
.setting-row p { margin: .2rem 0; }
.states-main { padding: 2rem; background: var(--rm-surface); }
.state-example { border-top: 1px solid var(--rm-line); padding: 1.5rem 0; }
.skeleton { height: 18px; width: 70%; margin: .8rem 0; border-radius: 3px; background: var(--rm-subtle); }
@media (min-width: 1440px) { :root { --rm-sidebar-width: 15rem; --rm-list-width: 25rem; } }
@media (max-width: 1199px) {
 :root { --rm-sidebar-width: 12rem; --rm-list-width: 20rem; }
 .sidebar { padding: 1rem .65rem; }
 .topbar { gap: 1rem; padding-right: 1rem; }
 .brand { padding-left: 1rem; }
 .message { padding: 1rem; }
 .reader-toolbar { padding: .65rem 1rem; }
 .reader-body { padding: 1.5rem; }
 .toolbar-label { display: none; }
 .settings-layout { gap: 1.5rem; }
}
@media (max-width: 1023px) {
 :root { --rm-sidebar-width: 11rem; }
 .main-mail { grid-template-columns: 1fr; }
 .main-mail .reader { display: none; }
 .main-mail.reading .mail-list { display: none; }
 .main-mail.reading .reader { display: block; }
 .empty-reader { display: none; }
 .mobile-back { display: inline-flex; }
 .top-actions .sync-summary { display: none; }
 .list-head { padding-top: 1.3rem; }
 .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .settings-layout { grid-template-columns: 1fr; gap: 1rem; }
 .settings-layout > .nav { display: flex; overflow-x: auto; }
 .calendar-scroll-hint { display: block; color: var(--rm-muted); font-size: var(--rm-text-xs); }
 .reference-bar .theme-control { margin-left: 0; }
}
@media (max-width: 767px) {
 .topbar { grid-template-columns: 1fr auto; padding: .5rem .75rem; height: auto; }
 .brand { padding-left: 0; }
 .search { grid-column: 1/-1; grid-row: 2; max-width: none; }
 .workspace { grid-template-columns: 1fr; height: auto; }
 .sidebar, .mail-list, .reader, .calendar-main, .settings-main, .states-main { overflow: visible; }
 .sidebar { border-right: 0; border-bottom: 1px solid var(--rm-line); padding: .75rem; gap: .5rem; }
 .sidebar .nav { display: flex; }
 .sidebar .nav a { padding: .6rem; }
 .sidebar .folders, .sidebar .sources-wrap, .sidebar-bottom { display: none; }
 .switcher summary { min-height: 44px; }
 .calendar-main { padding: 1rem .75rem; }
 .calendar-head h1 { font-size: 1.65rem; }
 .view-switch { display: none; }
 .agenda-view { display: none; }
 .calendar-scroll { display: none; }
 .calendar-scroll-hint { display: none; }
 .agenda-mobile { display: block !important; }
 .settings-main { padding: 1.5rem 1rem; }
 .setting-row { align-items: start; flex-wrap: wrap; }
 .reader-body { padding: 1.25rem; }
 h1 { font-size: 1.75rem; }
 .metadata { flex-wrap: wrap; }
 .metadata time { margin-left: 0; }
 dialog { width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
 .dialog-head, .dialog-body, .dialog-foot { padding-left: 1rem; padding-right: 1rem; }
 .field-row { gap: .4rem; flex-wrap: wrap; }
 .field-row > label { width: 3.2rem; }
 .recipient { flex-wrap: wrap; }
 .reference-bar { padding: .75rem; }
 .reference-bar select { min-height: 44px; }
 .reference-bar a { display: inline-flex; align-items: center; min-height: 44px; }
 .cal-meta { flex-wrap: wrap; }
 .agenda-row { grid-template-columns: 65px 1fr; padding: 1rem 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { button, .button, .message[aria-selected=true], .event { border: 1px solid ButtonText; } .message[aria-selected=true] { outline: 2px solid Highlight; } }

/* ---- Application layer (Rustmail web UI) ---------------------------------- */
/* Structure mirrors design/mockups.css; these additions cover app-only states. */
body { min-height: 100dvh; }
.message { display: block; color: inherit; text-decoration: none; overflow: hidden; }
.message .badge { align-self: flex-start; }
.message[aria-selected=true] .badge { box-shadow: 0 0 0 1px var(--rm-selected); }
.listbox-body { overflow: auto; overscroll-behavior: contain; }
.listbox { min-height: 12rem; }
.selection-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .6rem 1.5rem; background: var(--rm-selected); border-bottom: 1px solid var(--rm-line); }
.selection-bar strong { margin-right: auto; font-size: var(--rm-text-sm); }
.offline-banner, .session-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .5rem 1.5rem; background: var(--rm-warning-bg); color: var(--rm-warning-fg); border-bottom: 1px solid var(--rm-line); font-size: var(--rm-text-sm); }
.offline-banner .grow, .session-banner .grow { flex: 1; min-width: 12rem; }
.sync-indicator { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sync-indicator[data-state=error] .sync-dot { background: var(--rm-danger-fg); }
.sync-indicator[data-state=pending] .sync-dot { background: var(--rm-warning-fg); }
.skeleton-row { padding: 1rem 1.5rem; border-bottom: 1px solid var(--rm-line); }
.skeleton-line { height: 14px; border-radius: 3px; background: var(--rm-subtle); margin: .45rem 0; }
.skeleton-line.title { width: 62%; height: 18px; }
.skeleton-line.meta { width: 38%; }
.skeleton-line.body { width: 88%; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--rm-control); border-top-color: var(--rm-accent); border-radius: 50%; animation: rm-spin .8s linear infinite; flex: none; }
@keyframes rm-spin { to { transform: rotate(360deg); } }
.inline-status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--rm-text-sm); color: var(--rm-muted); }
.field-error { color: var(--rm-danger-fg); font-size: var(--rm-text-sm); margin: .3rem 0 0; }

/* Search completions. The list hangs off the search field, so it must sit above
   the page content and align with the input's own box, not the header. */
.suggestion-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 55; list-style: none; margin: .25rem 0 0; padding: .25rem 0; background: var(--rm-surface); border: 1px solid var(--rm-control); border-radius: var(--rm-radius-md); box-shadow: 0 10px 24px rgb(0 0 0 / .12); max-height: 60vh; overflow-y: auto; }
.search { position: relative; }
.suggestion { display: flex; width: 100%; gap: .6rem; align-items: baseline; justify-content: flex-start; min-height: var(--rm-target); padding: .45rem .85rem; background: none; border: 0; border-radius: 0; color: inherit; font: inherit; font-weight: 400; text-align: left; cursor: pointer; }
.suggestion:hover, .suggestion:focus-visible { background: var(--rm-subtle); }
.suggestion-kind { flex: none; min-width: 4.5rem; }
.suggestion-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-count { flex: none; font-variant-numeric: tabular-nums; }

/* The live-update indicator. A dot plus a word: the state a reader most needs to
   notice is "not updating", which a quiet dot alone would hide. */
.live-dot { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--rm-text-xs); color: var(--rm-muted); white-space: nowrap; }
.live-dot-mark { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.live-ok { color: var(--rm-success-fg); }
.live-wait { color: var(--rm-muted); }
.live-off { color: var(--rm-danger-fg); }

/* Outbox rows. Queued is not sent, so the status is the first thing on the row
   rather than a trailing detail. */
.outbox-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.outbox-row { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: .8rem 1rem; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); }
.outbox-main { display: grid; gap: .2rem; min-width: 0; }
.outbox-main .badge { justify-self: start; }
.outbox-subject { overflow-wrap: anywhere; }
.outbox-error { color: var(--rm-danger-fg); margin: .2rem 0 0; }
.outbox-actions { display: flex; gap: .35rem; flex: none; }

/* The sender lists reuse the outbox row's geometry: same border, same radius,
    same gap, because the two screens sit side by side in Settings and a reader
    moving between them should not have to re-learn where the buttons are. */
.sender-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .5rem; }
.sender-row { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: .8rem 1rem; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); }
.sender-main { display: grid; gap: .15rem; min-width: 0; }
.sender-name { overflow-wrap: anywhere; }
.sender-address { overflow-wrap: anywhere; }
/* Badge and actions share one right-hand column so the badge sits on the same
   line whether or not the row has an action beside it. */
.sender-side { display: grid; gap: .4rem; justify-items: end; flex: none; max-width: 15rem; }
.sender-meta { display: grid; gap: .2rem; justify-items: end; }
.sender-actions { display: flex; gap: .35rem; align-items: center; }
.settings-section h3 { margin: 1.6rem 0 .5rem; font-size: var(--rm-text-md); font-weight: 600; }
@media (max-width: 720px) {
    /* Below this width the three columns cannot share a row without the
       actions being pushed off the card. Laid out as a grid instead of a
       wrapping flex row: wrapping left the buttons on their own line with the
       card's full height above them, which read as an empty card with two
       orphaned buttons. Two columns still hold here. */
    .sender-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: start; }
    .sender-main { grid-column: 1; }
    .sender-side { grid-column: 2; grid-row: 1; max-width: 11rem; }
}
@media (max-width: 560px) {
    /* One column: with the side column squeezing it, an address breaks
       mid-word and reads as two addresses. Stacking gives the address its own
       full line and keeps the actions reachable at the end of the row. */
    .sender-row { grid-template-columns: 1fr; }
    .sender-main { grid-column: 1; }
    .sender-side { grid-column: 1; grid-row: auto; justify-items: start; max-width: none; }
    /* The badge carries its own padding, so the side column's own alignment is
       what left it hanging a few pixels inside the card's text column. */
    .sender-meta { justify-items: start; }
}

/* Composer drafts. These are not messages — no sender column, no unread dot —
   so they get their own list rather than pretending to be rows above. */
.draft-list { list-style: none; margin: 0; padding: 0; }
.draft-row { display: flex; align-items: center; gap: .5rem; border-bottom: 1px solid var(--rm-line); }
/* The generic `button` rule centres its content and paints a surface; a draft
   row is a text block, so both are undone here. `justify-content` matters even
   though this is a grid: it aligns the grid's tracks horizontally. */
.draft-open { flex: 1; min-width: 0; display: grid; justify-content: start; gap: .15rem; text-align: left; background: none; border: 0; border-radius: 0; min-height: 0; font-weight: 400; padding: .85rem 1.5rem; cursor: pointer; color: inherit; font: inherit; }
.draft-open:hover { background: var(--rm-surface); }
.draft-open:focus-visible { outline: 2px solid var(--rm-accent); outline-offset: -2px; }
.draft-subject { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-to { color: var(--rm-muted); font-size: var(--rm-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-meta { font-variant-numeric: tabular-nums; }
.move-select { min-height: var(--rm-target); padding: 0 .5rem; }

/* What each transport said on the last connection test. Two lines rather than
   one verdict, because IMAP and SMTP fail independently and the half that
   failed is the only thing that tells a reader which field to fix. */
.verify-result { margin: .5rem 0 0; }
.verify-list { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; }
.verify-line { font-size: var(--rm-text-sm); }
.verify-line.ok { color: var(--rm-success-fg); }
.verify-line.failed { color: var(--rm-danger-fg); }

/* A checkbox inside a form reads as one row of label text, not as a stacked
   field like the inputs above it. */
.checkbox { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--rm-text-sm); color: var(--rm-muted); }
.checkbox input { width: 18px; height: 18px; margin: .1rem 0 0; flex: none; accent-color: var(--rm-accent); }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--rm-danger-fg); box-shadow: 0 0 0 1px var(--rm-danger-fg); }
.recipient-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; background: var(--rm-subtle); border: 1px solid var(--rm-control); border-radius: 999px; font-size: var(--rm-text-sm); max-width: 100%; }
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { min-height: 24px; padding: 0 .3rem; border: 0; background: transparent; }
.attachment-list { display: grid; gap: .5rem; margin: .75rem 0; }
.attachment-list .attachment { margin: 0; }
.attachment .attachment-actions { margin-left: auto; display: flex; gap: .3rem; }
.upload-state { font-size: var(--rm-text-xs); color: var(--rm-muted); }
.upload-state.failed { color: var(--rm-danger-fg); }
.dropzone { border: 1px dashed var(--rm-control); border-radius: var(--rm-radius-md); padding: 1rem; text-align: center; background: var(--rm-canvas); }
.dropzone input[type=file] { max-width: 100%; }
.compose-row { display: grid; grid-template-columns: 4rem minmax(0,1fr); gap: .75rem; align-items: start; border-bottom: 1px solid var(--rm-line); padding: .4rem 0; }
.compose-row > label { padding-top: .65rem; color: var(--rm-muted); }
.compose-row input, .compose-row select { width: 100%; border: 1px solid var(--rm-control); background: var(--rm-raised); padding: .6rem; border-radius: 4px; min-height: 44px; }
.compose-row .toolbar-group { justify-content: flex-end; }
.compose-body { width: 100%; min-height: 45vh; border: 1px solid var(--rm-control); border-radius: 4px; padding: .8rem; background: var(--rm-raised); resize: vertical; }
.dialog .dialog-body { overflow: auto; }
.dialog-foot .status { flex: 1; min-width: 10rem; }
.confirm-inline { border: 1px solid var(--rm-warning-fg); background: var(--rm-warning-bg); color: var(--rm-warning-fg); padding: .75rem 1rem; border-radius: var(--rm-radius-sm); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.confirm-inline .grow { flex: 1; min-width: 10rem; }
.badge.neutral { background: var(--rm-subtle); color: var(--rm-text); }
.badge.ok { background: var(--rm-success-bg); color: var(--rm-success-fg); }
.badge.readonly { background: var(--rm-subtle); color: var(--rm-muted); }
.source-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px; margin-right: .35rem; border: 1px solid var(--rm-control); }
.calendar-head .range-note { color: var(--rm-muted); font-size: var(--rm-text-xs); }
.month-grid { display: flex; flex-direction: column; border-top: 1px solid var(--rm-line); border-left: 1px solid var(--rm-line); min-width: 720px; }
.month-grid > [role=row] { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.month-cell { min-height: 112px; border-right: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); padding: .4rem; display: flex; flex-direction: column; gap: .25rem; min-width: 0; background: var(--rm-surface); }
.month-cell:focus-visible { outline-offset: -4px; }
.month-cell.other-month { background: var(--rm-canvas); color: var(--rm-muted); }
.month-cell[aria-current=date] .month-date { background: var(--rm-accent); color: var(--rm-on-accent); border-radius: 50%; width: 28px; height: 28px; display: inline-grid; place-content: center; }
.month-date { font-size: var(--rm-text-sm); font-weight: 600; align-self: flex-start; }
.month-event { display: block; font-size: var(--rm-text-xs); padding: .12rem .3rem; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; min-height: 22px; border: 0; }
.month-event.work { background: var(--rm-work-bg); color: var(--rm-work-fg); }
.month-event.personal { background: var(--rm-personal-bg); color: var(--rm-personal-fg); }
.month-event.local { background: var(--rm-local-bg); color: var(--rm-local-fg); }
.month-more { font-size: var(--rm-text-xs); text-align: left; padding: .1rem .3rem; min-height: 24px; }
.day-grid { display: grid; grid-template-columns: 64px minmax(0,1fr); border-top: 1px solid var(--rm-line); border-left: 1px solid var(--rm-line); }
.day-row { display: contents; }
.day-rowheader { padding: .35rem .4rem; font-size: var(--rm-text-xs); color: var(--rm-muted); border-right: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); text-align: center; }
.day-cell { min-height: 64px; border-right: 1px solid var(--rm-line); border-bottom: 1px solid var(--rm-line); padding: .2rem; display: flex; flex-direction: column; gap: .2rem; }
.day-cell:focus-visible { outline-offset: -4px; }
.day-events { display: grid; gap: .2rem; }
.event { border: 1px solid transparent; text-align: left; }
.event:hover { filter: brightness(1.03); }
.event.tentative { border-style: dashed; }
.event.cancelled, .event[data-status=cancelled] { text-decoration: line-through; }
.event.overlap { outline: 2px solid var(--rm-warning-fg); outline-offset: 1px; }
.agenda-group { border-bottom: 1px solid var(--rm-line); }
.agenda-group > h2 { font-size: var(--rm-text-sm); padding: .75rem 1rem 0; color: var(--rm-muted); margin: 0; }
.agenda-event { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; width: 100%; border: 0; border-bottom: 1px solid var(--rm-line); border-radius: 0; background: transparent; padding: .75rem 1rem; text-align: left; min-height: 44px; }
.agenda-event:hover { background: var(--rm-subtle); }
.agenda-event time { color: var(--rm-muted); font-size: var(--rm-text-sm); min-width: 4.5rem; }
.agenda-event strong { font-weight: 600; }
.agenda-mobile { display: none; }
.settings-main .settings-layout { align-items: start; }
.settings-help { max-width: 62ch; }
.inline-form { display: grid; gap: .8rem; padding: 1rem; border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); background: var(--rm-canvas); margin-top: .8rem; }
.inline-form .pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.inline-form label { display: grid; gap: .3rem; font-weight: 500; }
.inline-form input, .inline-form select, .inline-form textarea { border: 1px solid var(--rm-control); border-radius: 4px; padding: .55rem; background: var(--rm-raised); min-height: 40px; }
.inline-form input[type=checkbox] { min-height: 18px; width: 18px; }
.setting-row-stacked { display: grid; gap: .75rem; align-items: start; }
.password-form { display: grid; gap: .6rem; max-width: 26rem; }
.password-form .field { display: grid; gap: .25rem; }
.password-form .field span { font-size: var(--rm-text-sm); color: var(--rm-muted); }
.session-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.session-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-top: 1px solid var(--rm-line); }
.setting-row .status-stack { display: grid; gap: .2rem; min-width: 0; }
.setting-row .actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }
.usage-bar { height: 6px; border-radius: 3px; background: var(--rm-subtle); overflow: hidden; margin-top: .4rem; }
.usage-bar > span { display: block; height: 100%; background: var(--rm-accent); }
.toast { display: grid; gap: .5rem; }
.toast .toast-row { display: flex; align-items: start; gap: .75rem; }
.toast .toast-row strong { flex: 1; }
.toast .dismiss { min-height: 32px; padding: .2rem .5rem; }
.toast.danger-toast { border-left: 4px solid var(--rm-danger-fg); }
.toast.success-toast { border-left: 4px solid var(--rm-success-fg); }
.toast.info-toast { border-left: 4px solid var(--rm-accent); }
.search-scope { border: 0; background: transparent; min-height: 36px; color: var(--rm-muted); }
.search-results { padding: 1.5rem clamp(1rem, 3vw, 3rem); max-width: 900px; }
.result-group { border-top: 1px solid var(--rm-line); margin-top: 1.5rem; }
.result-item { display: block; padding: .8rem 0; border-bottom: 1px solid var(--rm-line); color: inherit; text-decoration: none; }
.result-item:hover { background: var(--rm-subtle); }
.result-item strong { display: block; }
.kbd-grid { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .4rem 1.2rem; margin: 1rem 0; }
.kbd-grid dt { font-family: var(--rm-font-ui); font-weight: 600; }
kbd { font: 500 var(--rm-text-xs)/1 var(--rm-font-ui); border: 1px solid var(--rm-control); border-bottom-width: 2px; border-radius: 4px; padding: .2rem .35rem; background: var(--rm-canvas); }
.print-only { display: none; }
@media (max-width: 1023px) {
  .compose-row { grid-template-columns: 3.2rem minmax(0,1fr); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-layout > .nav { overflow-x: auto; flex-wrap: nowrap; }
  .month-grid { min-width: 700px; }
}
@media (max-width: 767px) {
  .selection-bar { padding: .6rem 1rem; }
  .offline-banner, .session-banner { padding: .5rem .75rem; }
  .compose-row { grid-template-columns: 1fr; gap: .2rem; }
  .compose-row > label { padding-top: .2rem; }
  .month-grid, .day-grid { min-width: 640px; }
  .settings-main { padding: 1.25rem 1rem; }
  .inline-form .pair { grid-template-columns: 1fr; }
  .agenda-mobile { display: block; }
}
@media print {
  .topbar, .sidebar, .reference-bar, .reader-toolbar, .reply-actions, .toast { display: none !important; }
  .workspace, .main-mail { display: block; height: auto; }
  .reader-body { max-width: none; }
  .print-only { display: block; }
}

/* Calendar density and app-only layout corrections */
.week-grid-tall [role=gridcell] { min-height: 56px; }
.day-grid-view { grid-template-columns: 64px minmax(0,1fr); }
.week-grid-tall .event { min-height: 0; padding: .35rem .45rem; }
.month-cell .month-event { min-height: 24px; }
.inline-check { display: flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 500; }
.inline-check input { width: 18px; height: 18px; min-height: 18px; accent-color: var(--rm-accent); }
/* The undo bar sits at the bottom edge, in the layout rather than floating over
   a corner: it is the one message a reader must not have to hunt for. */
.undo-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.25rem; z-index: 70; display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; max-width: min(720px, calc(100vw - 2rem)); padding: .7rem 1.1rem; background: var(--rm-surface); color: var(--rm-text); border: 1px solid var(--rm-control); border-radius: var(--rm-radius-md); box-shadow: 0 8px 24px rgb(0 0 0 / .18); }
.undo-text { display: grid; gap: .1rem; }
.undo-track { flex: 1 1 120px; height: 2px; background: var(--rm-line); opacity: .5; }
.undo-fill { display: block; height: 100%; background: var(--rm-accent); transition: width .9s linear; }
@media (prefers-reduced-motion: reduce) { .undo-fill { transition: none; } }
.toast-region { position: fixed; bottom: 6.5rem; right: 1.5rem; display: grid; gap: .5rem; z-index: 60; max-width: min(420px, calc(100vw - 48px)); }
.toast-region .toast { position: static; max-width: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
.thread-messages details.fold { border-bottom: 1px solid var(--rm-line); padding: .75rem 0; }
.thread-messages details.fold > summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; min-height: 44px; list-style: none; }
.thread-messages details.fold > summary::-webkit-details-marker { display: none; }
.thread-messages details.fold > summary .small { display: block; }
.thread-messages details.fold[open] > summary { margin-bottom: .9rem; }
.thread-messages .prose { margin-bottom: 1rem; }
.compose-dialog { width: min(760px, calc(100vw - 48px)); }
.compose-form { display: grid; gap: .75rem; }
.settings-section .theme-card .badge { margin-top: .4rem; }
.month-grid .month-cell { cursor: pointer; }
.month-grid .month-event { cursor: pointer; }
@media (max-width: 767px) {
  .toast-region { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
  .thread-messages details.fold > summary { flex-wrap: wrap; }
}

/* Text decoration is opt-in: only links inside prose and inline text carry it. */
* { text-decoration: none; }
a { text-decoration: none; }
.prose a, .notice a { text-decoration: underline; }

.icon-glyph { display: inline-grid; place-content: center; width: 1.25rem; height: 1.25rem; flex: none; font-family: var(--rm-font-ui); font-size: 1.05rem; line-height: 1; color: currentColor; }
.brand .icon-glyph { font-size: 1.35rem; }
.empty-reader .icon-glyph { font-size: 2.2rem; color: var(--rm-accent); margin: 0 auto 1.4rem; }
.attachment .icon-glyph { color: var(--rm-muted); }

/* Line icons drawn in CSS: no inline SVG, no icon-font glyph coverage gaps. */
.icon-glyph { display: inline-grid; place-content: center; width: 1.25rem; height: 1.25rem; flex: none; position: relative; font-family: var(--rm-font-ui); font-size: .95rem; line-height: 1; color: currentColor; }
.icon-glyph::before, .icon-glyph::after { content: ""; position: absolute; box-sizing: border-box; }
.icon-mail::before { width: 16px; height: 12px; border: 1.6px solid currentColor; border-radius: 2px; }
.icon-mail::after { width: 12px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) skew(-12deg, -12deg); top: 5px; }
.icon-calendar::before { width: 16px; height: 14px; border: 1.6px solid currentColor; border-radius: 2px; }
.icon-calendar::after { width: 16px; height: 1.6px; background: currentColor; top: 5px; }
.icon-search::before { width: 11px; height: 11px; border: 1.7px solid currentColor; border-radius: 50%; top: 3px; left: 3px; }
.icon-search::after { width: 6px; height: 1.7px; background: currentColor; transform: rotate(45deg); right: 2px; bottom: 4px; }
.icon-settings::before { width: 16px; height: 1.6px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor; top: 4px; }
.icon-settings::after { width: 3px; height: 3px; border: 1.5px solid currentColor; border-radius: 50%; top: 2px; left: 4px; box-shadow: 6px 5px 0 -1px var(--rm-surface), 6px 5px 0 0 currentColor, 2px 10px 0 -1px var(--rm-surface), 2px 10px 0 0 currentColor; }
.icon-compose::before, .icon-drafts::before { width: 4px; height: 14px; background: currentColor; transform: rotate(42deg); border-radius: 1px; }
.icon-compose::after, .icon-drafts::after { width: 0; height: 0; border-left: 3px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(42deg); bottom: 1px; left: 3px; }
.icon-star::before { width: 14px; height: 14px; background: currentColor; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.icon-sent::before { content: "→"; position: static; font-size: 1rem; }
.icon-back::before { content: "←"; position: static; font-size: 1rem; }
.icon-reply::before { content: "↩"; position: static; font-size: 1rem; }
.icon-forward::before { content: "↪"; position: static; font-size: 1rem; }
.icon-archive::before { width: 16px; height: 12px; border: 1.5px solid currentColor; border-radius: 1px; top: 5px; }
.icon-archive::after { width: 16px; height: 3px; background: currentColor; top: 2px; border-radius: 1px; }
.icon-trash::before { width: 12px; height: 12px; border: 1.5px solid currentColor; border-top: 0; top: 6px; border-radius: 0 0 2px 2px; }
.icon-trash::after { width: 16px; height: 1.6px; background: currentColor; top: 4px; }
.icon-chevron::before { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); top: 3px; }
.icon-attachment::before { width: 7px; height: 13px; border: 1.6px solid currentColor; border-radius: 4px; transform: rotate(38deg); top: 2px; left: 6px; }
.icon-download::before { content: "↓"; position: static; font-size: 1rem; }
.icon-check::before { content: "✓"; position: static; font-size: 1rem; }
.icon-warning::before { content: "!"; position: static; font-weight: 700; font-size: 1rem; }
.icon-close::before { content: "×"; position: static; font-size: 1.3rem; }
.icon-plus::before { content: "+"; position: static; font-size: 1.2rem; }
.icon-clock::before { width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.icon-clock::after { width: 1.5px; height: 4px; background: currentColor; top: 5px; left: 9.5px; box-shadow: 2.5px 4px 0 -0.2px currentColor; }
.icon-refresh::before { content: "↻"; position: static; font-size: 1rem; }
.icon-external::before { content: "↗"; position: static; font-size: 1rem; }
/* A door with an arrow leaving it: an open jamb on the left, the arrow at right. */
.icon-logout::before { width: 8px; height: 12px; border: 1.6px solid currentColor; border-right: 0; border-radius: 1px 0 0 1px; left: 1px; top: 2px; }
.icon-logout::after { content: "→"; position: static; font-size: 0.95rem; }
.icon-user::before { width: 7px; height: 7px; border: 1.6px solid currentColor; border-radius: 50%; top: 2px; }
.icon-user::after { width: 13px; height: 7px; border: 1.6px solid currentColor; border-bottom: 0; border-radius: 7px 7px 0 0; bottom: 2px; }
.icon-flag::before { width: 1.6px; height: 14px; background: currentColor; left: 5px; top: 3px; }
.icon-flag::after { width: 8px; height: 8px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); left: 6px; top: 3px; }
.icon-more::before { content: "…"; position: static; font-size: 1.1rem; letter-spacing: .05em; }
@media (max-width: 767px) { .icon-glyph { width: 1.3rem; height: 1.3rem; } }

/* Phone dialogs honour the design contract: full screen, no UA max-width cap. */
@media (max-width: 767px) {
  dialog.compose-dialog, dialog.drawer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
}

/* Sign-in screen. Rendered instead of the shell, so it owns the viewport and
   centres one sheet on the desk — the same reading-surface logic as the reader,
   because the credentials sheet is the first page the writer sees. */
.signin-main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2.5rem 1.25rem;
  background: var(--rm-canvas);
}
.signin-desk {
  width: min(24rem, 100%);
  padding: 2rem;
  background: var(--rm-surface);
  border: 1px solid var(--rm-control);
  border-radius: var(--rm-radius-lg);
  box-shadow: var(--rm-shadow-modal);
}
.signin-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 500 1.5rem var(--rm-font-reading);
  letter-spacing: -0.03em;
  color: var(--rm-text);
}
.signin-brand .brand-mark { width: 26px; height: 26px; }
.signin-title {
  margin: 1.5rem 0 0.4rem;
  font: 500 1.375rem var(--rm-font-reading);
  letter-spacing: -0.02em;
  color: var(--rm-text);
}
.signin-help {
  margin: 0 0 1.5rem;
  font: 400 0.8125rem/1.5 var(--rm-font-ui);
  color: var(--rm-muted);
}
.signin-form { display: flex; flex-direction: column; gap: 0.9rem; }
.signin-field { display: flex; flex-direction: column; gap: 0.35rem; }
.signin-field > span {
  font: 500 0.75rem var(--rm-font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rm-muted);
}
.signin-field input {
  min-height: var(--rm-target);
  padding: 0 0.7rem;
  font: 400 0.9375rem var(--rm-font-ui);
  color: var(--rm-text);
  background: var(--rm-raised);
  border: 1px solid var(--rm-control);
  border-radius: var(--rm-radius-sm);
}
.signin-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font: 400 0.8125rem var(--rm-font-ui);
  color: var(--rm-text);
}
.signin-remember input { width: 1rem; height: 1rem; accent-color: var(--rm-accent); }
.signin-error {
  margin: 0;
  font: 400 0.8125rem/1.45 var(--rm-font-ui);
  color: var(--rm-danger-fg);
}
.signin-submit { width: 100%; justify-content: center; }
.signin-foot {
  margin: 1.25rem 0 0;
  font: 400 0.75rem/1.5 var(--rm-font-ui);
  color: var(--rm-muted);
}
.signin-foot .linkish {
  padding: 0;
  font: inherit;
  color: var(--rm-accent);
  background: none;
  border: 0;
  box-shadow: inset 0 -1px 0 currentColor;
  cursor: pointer;
}