/* mail.css — the Mail & Calendar shell (slice 3 part 3b).
   Built on app.css's tokens. Every colour here is a token; a new colour is a new
   token with a light value in :root (app.css) and a dark value in BOTH blocks below. */

/* ── Dark set. The layout sets data-theme on <html> from the person's choice;
   "auto" follows the operating system. Other layouts set none, so nothing here
   reaches another tool (spec R4). Keep the two blocks identical (MailCssTest). */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-canvas: #0b1220;
  --color-surface: #111a2e;
  --color-background: #0f172a;
  --color-border: #1f2a44;
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #a3b1c6;
  --color-text-muted: #7b8aa3;
  --color-slate-50: #16213a;
  --color-slate-100: #1b2742;
  --color-slate-200: #263556;
  --color-slate-300: #34446a;
  --color-slate-400: #94a3b8;   /* unchanged: the sidebar is dark in both themes */
  --color-primary-light: rgba(45, 212, 191, 0.14);
  --color-accent-light: rgba(45, 212, 191, 0.14);
  --color-success-light: rgba(34, 197, 94, 0.16);
  --color-warning-light: rgba(245, 158, 11, 0.16);
  --color-danger-light: rgba(239, 68, 68, 0.16);
  --color-info-light: rgba(59, 130, 246, 0.16);
  --color-success-dark: #86efac;
  --color-warning-dark: #fcd34d;
  --color-danger-dark: #fca5a5;
  --color-info-dark: #93c5fd;
  --color-info: #60a5fa;
  --color-link: #2dd4bf;
  --color-link-hover: #5eead4;
  --mail-icon-filter: invert(1);
  --color-on-primary: #fff;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    color-scheme: dark;
    --color-scrim: rgba(0, 0, 0, 0.6);
    --color-canvas: #0b1220;
    --color-surface: #111a2e;
    --color-background: #0f172a;
    --color-border: #1f2a44;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #a3b1c6;
    --color-text-muted: #7b8aa3;
    --color-slate-50: #16213a;
    --color-slate-100: #1b2742;
    --color-slate-200: #263556;
    --color-slate-300: #34446a;
    --color-slate-400: #94a3b8;   /* unchanged: the sidebar is dark in both themes */
    --color-primary-light: rgba(45, 212, 191, 0.14);
    --color-accent-light: rgba(45, 212, 191, 0.14);
    --color-success-light: rgba(34, 197, 94, 0.16);
    --color-warning-light: rgba(245, 158, 11, 0.16);
    --color-danger-light: rgba(239, 68, 68, 0.16);
    --color-info-light: rgba(59, 130, 246, 0.16);
    --color-success-dark: #86efac;
    --color-warning-dark: #fcd34d;
    --color-danger-dark: #fca5a5;
    --color-info-dark: #93c5fd;
    --color-info: #60a5fa;
    --color-link: #2dd4bf;
    --color-link-hover: #5eead4;
    --mail-icon-filter: invert(1);
    --color-on-primary: #fff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6);
  }
}
/* Shared primitives that app.css paints with var(--color-surface) follow the theme
   on their own. The few that name a literal are re-pointed here for the shell only. */
html[data-theme] body { background: var(--color-canvas); color: var(--color-text-primary); }
html[data-theme] .flash.notice { background: var(--color-success-light); color: var(--color-text-primary); border-color: var(--color-success); }
html[data-theme] .flash.alert { background: var(--color-danger-light); color: var(--color-text-primary); border-color: var(--color-danger); }
html[data-theme] .form-input, html[data-theme] select, html[data-theme] textarea, html[data-theme] trix-editor {
  background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border);
}
/* Trix's toolbar (actiontext.css is stock): black SVG icons on a transparent bar, light
   literal borders and a pale-blue pressed state. One token keeps the icons visible in dark.
   actiontext.css loads after this file, so each rule carries html[data-theme] to outrank it. */
html[data-theme] trix-toolbar .trix-button--icon::before { filter: var(--mail-icon-filter); }
html[data-theme] trix-toolbar .trix-button-group { background: var(--color-surface); border-color: var(--color-border); }
html[data-theme] trix-toolbar .trix-button { color: var(--color-text-primary); border-bottom-color: var(--color-border); }
html[data-theme] trix-toolbar .trix-button:not(:first-child) { border-left-color: var(--color-border); }
html[data-theme] trix-toolbar .trix-button.trix-active { background: var(--color-primary-light); color: inherit; }
html[data-theme] trix-toolbar .trix-dialog { background: var(--color-surface); color: var(--color-text-primary); border-top-color: var(--color-border); }
html[data-theme] trix-toolbar .trix-dialog .trix-input { background: var(--color-surface); color: var(--color-text-primary); border-color: var(--color-border); }

/* ── Profile menu (D3): the avatar row opens Theme and Logout. */
.sidebar-profile.sidebar-profile-menu { display: block; }
.sidebar-profile-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.sidebar-profile-menu > summary::-webkit-details-marker { display: none; }
.sidebar-profile-menu__panel { padding: var(--space-sm) 0 0 44px; display: grid; gap: var(--space-xs); }
.sidebar-profile-menu__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }
.theme-switch { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius-full); overflow: hidden; }
.theme-switch form { display: contents; }
.theme-switch button { background: transparent; border: 0; padding: 4px 10px; font-size: 12px; color: var(--color-text-secondary); cursor: pointer; }
.theme-switch button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }

/* ── Moved from app.css (unchanged): Today, email body, send-later, snooze, row
   actions, folder pane and menu, move picker, toolbar, template picker. ── */

/* ═══════════════════════════════════════════
   Mail Diary — Today stream
   (view + week_peek partial reference these classes; previously unstyled)
   ═══════════════════════════════════════════ */

.md-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-xl);
  align-items: start;
  max-width: 1180px;
}

/* ── Stream column ── */
.md-stream { min-width: 0; }

.md-stream-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.md-stream-header h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
}
.md-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.md-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.md-stream-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.stream-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.stream-item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stream-item-time {
  flex-shrink: 0;
  width: 64px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}
.stream-item-body { flex: 1; min-width: 0; }
.stream-item-title {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream-item-subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Stream item badges (reuse the .badge base; add the two Today variants) */
.badge-important { background: var(--color-danger-light); color: var(--color-danger-dark); }
.badge-rsvp { background: var(--color-info-light); color: var(--color-info-dark); }
.badge-snooze-return { background: var(--color-warning-light); color: var(--color-warning-dark); }

.md-empty {
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Week-peek rail ── */
.md-week-peek { position: sticky; top: var(--space-lg); }
.week-peek {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}
.week-peek-header {
  margin: 0 0 var(--space-sm);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.week-peek ul { list-style: none; margin: 0; padding: 0; }
.week-peek-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  font-size: 13px;
}
.week-peek-day + .week-peek-day { border-top: 1px solid var(--color-slate-100); }
.week-peek-date { font-weight: 500; color: var(--color-text-primary); }
.week-peek-count { font-size: 12px; color: var(--color-text-secondary); }
.week-peek-day.today { background: var(--color-primary-light); }
.week-peek-day.today .week-peek-date { color: var(--color-primary-hover); font-weight: 700; }
.week-peek-day.today .week-peek-count { color: var(--color-primary-hover); }

/* ── Responsive: stack the rail under the stream ── */
@media (max-width: 900px) {
  .md-today { grid-template-columns: minmax(0, 1fr); }
  .md-week-peek { position: static; }
}

/* ═══════════════════════════════════════════
   Inbox — rendered (decoded + sanitised) HTML email body
   ═══════════════════════════════════════════ */
.email-html-body {
  font-size: 0.9rem;
  line-height: 1.6;
  background: var(--color-surface);
  color: var(--color-text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}
.email-text-body { font-size: 0.85rem; line-height: 1.5; white-space: pre-wrap; color: var(--color-text-primary); }
.thread-message-actions { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--color-slate-100); }
.email-html-body img { max-width: 100%; height: auto; }
.email-html-body table { max-width: 100%; }
/* A held remote image (Inbox::ImagePolicy.hold): its alt text in a muted box. */
.mail-img-held { display: inline-block; padding: 2px 8px; border: 1px dashed var(--color-slate-200); border-radius: 4px; color: var(--color-text-muted); font-size: 0.8rem; }
.mail-images-notice { gap: var(--space-sm); align-items: center; margin-bottom: var(--space-sm); }
.mail-images-notice form { display: inline; }
.email-html-body a { color: var(--color-primary); text-decoration: underline; }
.email-html-body blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 3px solid var(--color-slate-200);
  color: var(--color-text-secondary);
}

/* ── Composer/reply split button: "Send later" preset menu (Slice 07) ── */
.send-later-group { position: relative; display: inline-flex; }
.send-later-toggle { border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 8px; padding-right: 8px; }
.send-later-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 20;
  min-width: 200px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
  padding: 6px;
}
.send-later-menu__item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: 6px; color: var(--color-text-primary, #0f172a); cursor: pointer; font-size: 13px; }
.send-later-menu__item:hover { background: var(--color-slate-50, #f1f5f9); }
.send-later-custom { display: flex; gap: 6px; align-items: center; padding: 8px 10px 4px; border-top: 1px solid var(--color-border, #eef2f6); margin-top: 4px; }

/* ── Snooze dropdown: thread-level presets (Slice 07 Task 6) ── */
.snooze-menu-group { position: relative; display: inline-flex; }
/* The last cell of a crowded inbox row shrinks to its narrowest: keep "Snooze ▾" on one line. */
.snooze-menu-group > .btn { white-space: nowrap; }
/* Positioned by snooze_menu_controller.js, which portals this element to
   <body> on open — .table's overflow:hidden would otherwise crop it and
   .card:hover's transform would capture it as a fixed-position containing
   block. top/left are set inline by the controller; do NOT reintroduce them
   here. z-index sits above page content and below the modal overlay (50). */
.snooze-menu {
  position: fixed;
  z-index: 40;
  min-width: 200px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
  padding: 6px;
}
.snooze-menu form { margin: 0; }
.snooze-menu__item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: 6px; color: var(--color-text-primary, #0f172a); cursor: pointer; font-size: 13px; }
.snooze-menu__item:hover { background: var(--color-slate-50, #f1f5f9); }
/* Slice 1b: row actions appear on hover (always on touch screens). */
.inbox-row-actions { visibility: hidden; display: inline-flex; margin-right: var(--space-sm); }
tr:hover .inbox-row-actions, tr:focus-within .inbox-row-actions { visibility: visible; }
@media (hover: none) { .inbox-row-actions { visibility: visible; } }
.inbox-flag { color: var(--color-warning); margin-left: 4px; }
.snooze-menu-custom { display: flex; gap: 6px; align-items: center; padding: 8px 10px 4px; border-top: 1px solid var(--color-border, #eef2f6); margin-top: 4px; }
/* Slice 1d (spec §8): the folder menu and Move to… (the folder pane is now the nav tree).
   Menus open in the flow (no absolute positioning), so .table's overflow cannot clip them. */
.folder-menu-toggle { cursor: pointer; list-style: none; padding: 0 4px; color: var(--color-text-secondary); }
.folder-menu-toggle::-webkit-details-marker { display: none; }
.folder-menu__body { padding: 4px 0; }
.folder-menu__body form { margin: 0; }
.move-picker { position: relative; display: inline-block; }
.inbox-row-actions:has(details[open]), .inbox-row-actions:has([aria-expanded="true"]) { visibility: visible; }
.inbox-row-folder { margin-left: var(--space-sm); }
/* The inbox control row: search, filter and sort inside whatever the pane has open, in one line.
   .form-input is full-width by default, which is what used to stack these fields down the page. */
/* G3: no card around it, one slim row above the list with a rule under it (the mockup's list is a header line then rows).
   Its own layer, so the More panel opens over the list's rows. */
.inbox-toolbar-card { position: relative; z-index: 2; }
.mail-list__tools { padding: 6px 0 8px; margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
/* The list fills the same width as the row above it (a .card is 640px wide by default, and the table used to spill past it). */
.inbox-list-card { max-width: none; padding: 0; }
.inbox-toolbar { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; }
.inbox-toolbar .form-input { width: auto; max-width: none; }
.inbox-toolbar .inbox-toolbar__search { flex: 1 1 140px; min-width: 0; }
.inbox-toolbar__field { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-secondary); white-space: nowrap; }
@media (max-width: 767px) { .inbox-toolbar { flex-wrap: wrap; } }
/* A narrow list pane (the 1024-1199 rail, the drawer widths) gives the search box its own line rather than squeezing it to nothing. */
@container (max-width: 420px) { .inbox-toolbar { flex-wrap: wrap; } .inbox-toolbar .inbox-toolbar__search { flex-basis: 100%; } }
.inbox-toolbar__more { position: relative; }
.inbox-toolbar__more > summary { list-style: none; }
.inbox-toolbar__more > summary::-webkit-details-marker { display: none; }
.inbox-toolbar__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 230px; padding: 12px; background: var(--color-surface, #fff); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.inbox-toolbar__panel .inbox-toolbar__field { justify-content: space-between; }
/* Once the list is narrow (phone width) the panel hangs off the card, not off the button, so it cannot run off either edge. */
@media (max-width: 768px) { .inbox-toolbar__more { position: static; } .inbox-toolbar__panel { left: 14px; right: 14px; min-width: 0; } }

/* ── Composer/reply template picker (Slice 07 Task 11) ── */
.template-picker-group { position: relative; display: inline-flex; margin-bottom: 8px; }
.template-picker-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  z-index: 20;
  min-width: 200px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));
  padding: 6px;
}
.template-picker-menu__item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; background: none; border-radius: 6px; color: var(--color-text-primary, #0f172a); cursor: pointer; font-size: 13px; }
.template-picker-menu__item:hover { background: var(--color-slate-50, #f1f5f9); }
.template-picker-error, .template-picker-note { margin: 6px 0 0; font-size: 12px; }

/* ── Shell grid (D2). The sidebar is the nav column; .mail-panes splits .page into
   list and message. --mail-list-width is the one knob. */
/* The page is the fixed-height box (viewport less the topbar) and the panes fill what is left
   of it, so a flash or the trial banner above them never pushes their bottom off-screen (I6). */
.shell--mail .page--panes { padding: 0; height: calc(100vh - 60px); min-height: 0; display: flex; flex-direction: column; }
.shell--mail .page--panes > .flash, .shell--mail .page--panes > .trial-banner { flex: none; margin: var(--space-md) var(--space-lg) 0; }
.mail-panes { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.6fr); flex: 1; min-height: 0; }
.mail-panes__list { overflow-y: auto; overflow-x: hidden; border-right: 1px solid var(--color-border); background: var(--color-surface); }
.mail-panes__message { overflow-y: auto; background: var(--color-canvas); }
.mail-panes__message > turbo-frame { display: block; min-height: 100%; }
.mail-list { padding: var(--space-md); }

/* ── Nav tree */
.mail-nav { display: grid; gap: 2px; }
.mail-nav__entry, .mail-nav__link { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--radius-md); font-size: 13.5px; color: var(--color-text-secondary); }
.mail-nav__entry:hover, .mail-nav__link:hover { background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.mail-nav__entry.nav-active, .mail-nav__link.is-active { background: rgba(45, 212, 191, 0.15); color: #5eead4; font-weight: 600; }
.mail-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-nav__count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.mail-nav__mailbox { margin-top: var(--space-sm); }
.mail-nav__mailbox-name { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-md); font-size: 13.5px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; list-style: none; overflow: hidden; white-space: nowrap; }
.mail-nav__mailbox-name:hover { background: rgba(255, 255, 255, 0.06); }
.mail-nav__mailbox-name::-webkit-details-marker { display: none; }
.mail-nav__chevron { flex: none; transition: transform 120ms ease; }
.mail-nav__mailbox-text { flex: 1; min-width: 0; display: grid; }
.mail-nav__mailbox-sub { font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details[open] > .mail-nav__mailbox-name .mail-nav__chevron { transform: rotate(90deg); }
.mail-nav__row { display: flex; align-items: center; gap: 6px; padding-left: calc(14px + 12px * var(--depth, 0)); }
.sidebar .mail-nav__row .nav-icon { width: 14px; height: 14px; flex: none; opacity: 0.75; }
.sidebar .mail-nav__row .mail-nav__link.is-active .nav-icon { color: inherit; opacity: 1; }
.mail-nav__row[data-depth="1"] { --depth: 1; } .mail-nav__row[data-depth="2"] { --depth: 2; } .mail-nav__row[data-depth="3"] { --depth: 3; } .mail-nav__row[data-depth="4"] { --depth: 4; }
.mail-nav__row .mail-nav__link { flex: 1; min-width: 0; padding: 5px 10px; font-size: 13px; }
.mail-nav__row.is-muted .mail-nav__link, .mail-nav__muted { opacity: 0.6; }
.mail-nav__row.is-drop-target .mail-nav__link { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.mail-nav__unsynced > summary { list-style: none; cursor: pointer; padding: 4px 10px 4px calc(14px + 10px); font-size: 12px; }
.mail-nav__new-folder > summary { list-style: none; cursor: pointer; font-size: 13px; padding: 5px 10px 5px calc(14px + 10px); }
.mail-nav__new-folder > summary::-webkit-details-marker { display: none; }
.mail-nav__new-folder-form { padding: 4px 10px; }
.mail-nav__group { margin-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: var(--space-sm); }
.mail-nav__rail-folders { display: none; }

/* ── 1024–1199: the icon rail. Same markup; labels, counts on folders and mailbox
   sections hidden; the Folders button opens the full tree as the drawer. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .shell--mail .sidebar { width: 64px; padding: var(--space-sm); }
  .shell--mail .sidebar .brand-text, .shell--mail .sidebar .tenant-switcher, .shell--mail .sidebar .tool-switcher-label,
  .shell--mail .mail-nav__label, .shell--mail .mail-nav__mailbox, .shell--mail .mail-nav__group .mail-nav__label { display: none; }
  .shell--mail .mail-nav__entry { justify-content: center; padding: 10px 0; }
  .shell--mail .mail-nav__count { position: absolute; transform: translate(14px, -10px); }
  /* The sidebar is always dark: the label takes the sidebar links' colour, never the body's (I5). */
  .shell--mail .mail-nav__rail-folders { display: block; margin: var(--space-sm) auto; font-size: 11px; background: none; border: 1px solid rgba(255,255,255,0.2); color: var(--color-slate-400); border-radius: var(--radius-md); padding: 4px 6px; cursor: pointer; }
  .shell--mail .sidebar .sidebar-section-label { display: none; }   /* "Booking" and "Admin" do not fit 64px */
  .shell--mail.is-open .sidebar .sidebar-section-label { display: revert; }
  .shell--mail.is-open .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; padding: var(--space-md); z-index: 50; }
  .shell--mail.is-open .sidebar .mail-nav__label, .shell--mail.is-open .sidebar .mail-nav__mailbox, .shell--mail.is-open .brand-text { display: revert; }
  .shell--mail.is-open .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 40; }
}

/* ── 768–1023: the drawer (the app.css 768 block, re-declared for the mail shell up to 1023). */
@media (min-width: 768px) and (max-width: 1023px) {
  .shell--mail .mobile-topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30; height: 52px; padding: 0 8px; background: #1e293b; color: #fff; }
  .shell--mail .mobile-topbar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; color: #fff; cursor: pointer; border-radius: 8px; }
  .shell--mail { display: block; }
  .shell--mail .main { width: 100%; }
  .shell--mail .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 85vw; transform: translateX(-100%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; z-index: 50; overflow-y: auto; }
  .shell--mail.is-open .sidebar { transform: translateX(0); visibility: visible; transition: transform 0.2s ease; }
  .shell--mail .drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; display: none; }
  .shell--mail.is-open .drawer-backdrop { display: block; }
  .shell--mail .page--panes { height: calc(100vh - 52px - 60px); }
  .mail-panes { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr); }
}

/* ── Under 768: one column per page. data-pane says which. */
@media (max-width: 767px) {
  .shell--mail .page--panes { height: auto; display: block; }
  .mail-panes { grid-template-columns: minmax(0, 1fr); height: auto; }   /* 1fr alone is min-content wide: a wide table would stretch the page */
  .mail-panes[data-pane="list"] .mail-panes__message { display: none; }
  .mail-panes[data-pane="message"] .mail-panes__list { display: none; }
  .mail-panes__list, .mail-panes__message { overflow: visible; border-right: 0; }
  /* W2: the topbar is one line. The breadcrumb ellipsises (its current segment first), Search
     shrinks to its icon, and nothing overlaps. */
  .shell--mail .topbar { padding: 0 var(--space-md); gap: var(--space-sm); }
  .shell--mail .topbar .breadcrumb { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
  .shell--mail .topbar .breadcrumb a, .shell--mail .topbar .breadcrumb .separator { flex: none; }
  .shell--mail .topbar .breadcrumb .current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell--mail .topbar > .cluster { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; }
  .shell--mail .topbar .palette-trigger span, .shell--mail .topbar .palette-trigger kbd { display: none; }
}

/* ── Pane states */
.mail-message { padding: var(--space-lg); max-width: 960px; }
.mail-empty { display: grid; place-items: center; min-height: 60vh; color: var(--color-text-muted); text-align: center; gap: var(--space-md); }
@media (min-width: 768px) { .mail-panes__message .mail-message__back, .mail-panes__message .mail-empty__back { display: none; } }   /* the list is beside the pane */
.mail-list .mail-rows tbody tr.is-selected { background: linear-gradient(var(--color-primary-light), var(--color-primary-light)), var(--color-surface); }
.mail-list .mail-rows tbody tr.is-focused { box-shadow: inset 3px 0 0 var(--color-primary); }
.mail-skeleton { padding: var(--space-md); display: grid; gap: 10px; }
.mail-skeleton__row { height: 18px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-slate-100), var(--color-slate-200), var(--color-slate-100)); background-size: 200% 100%; animation: mail-shimmer 1.2s linear infinite; }
turbo-frame#inbox_message[busy] > * { opacity: 0.4; transition: opacity var(--transition-fast); }
@keyframes mail-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mail-skeleton__row { animation: none; } }

/* Context card and the Details drawer */
.mail-context-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; margin: var(--space-sm) 0 var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-accent-light); font-size: 13px; }
.mail-context-card__details { margin-left: auto; }
.mail-drawer { border: 0; padding: var(--space-lg); width: min(440px, 92vw); max-width: none; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-lg); }
.mail-drawer::backdrop { background: var(--color-scrim); }
.mail-drawer__head { margin-bottom: var(--space-md); }
@media (max-width: 767px) { .mail-drawer { width: 100vw; } }

/* ── Today in the list slot */
.mail-panes__list .md-today { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.stream-item__link { display: flex; gap: 12px; align-items: center; width: 100%; color: inherit; text-decoration: none; }
.stream-item__link:hover { text-decoration: none; }
/* The week peek sits beside the list when the LIST PANE is wide, not the viewport. */
.mail-panes__list { container-type: inline-size; }
@container (min-width: 760px) { .mail-panes__list .md-today { grid-template-columns: minmax(0, 1fr) 220px; } }

/* ── Popover (Move to…) — portaled to <body> while open, positioned by move_picker_controller */
.mail-popover { width: 280px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-sm); }
.mail-popover form { margin: 0; }
.mail-popover__list { list-style: none; margin: var(--space-sm) 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.mail-popover__item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--color-text-primary); cursor: pointer; }
.mail-popover__item:hover, .mail-popover__item:focus { background: var(--color-slate-100); outline: none; }
tr[draggable="true"] { cursor: grab; }
.mail-popover [hidden] { display: none !important; }

/* ── Chip row, banner, undo toast (these classes had no rules before 3b) */
/* G3: seven chips (the nav carries Flagged, Snoozed, Drafts and Scheduled), sized to sit on one line at the list's width. */
.md-filter-chips { gap: 3px; margin-bottom: 12px; flex-wrap: wrap; }
.md-filter-chips a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: var(--radius-full); border: 1px solid var(--color-border); font-size: 12px; color: var(--color-text-secondary); background: var(--color-surface); }
.md-filter-chips a:hover { text-decoration: none; background: var(--color-slate-100); }
.md-filter-chips a.chip-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.md-filter-chips a .badge { font-size: 11px; }
.mailbox-updates-banner { justify-content: space-between; }
.mail-undo { position: sticky; top: var(--space-sm); z-index: 5; }
/* M3: beside the list, the list's own Undo (#inbox_undo) is the one shown; the pane's copy is for a
   phone page, or for a desktop page whose list has not loaded it. */
@media (min-width: 768px) { .mail-panes:has(#inbox_undo .mail-undo) .mail-panes__message .mail-undo { display: none; } }
#inbox_undo .flash { display: flex; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-sm); }

/* ── The stack tray (3c): the first threads of Reply later / Set aside under the default Inbox list.
   Desktop only: on a phone the nav entries are the way in, so the tray stays out of the way. */
.mail-stack-tray { display: flex; gap: var(--space-lg); margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mail-stack-tray__stack { flex: 1 1 0; min-width: 0; }
.mail-stack-tray__title { display: flex; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-xs); font-size: 13.5px; }
.mail-stack-tray__list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mail-stack-tray__list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .mail-stack-tray { display: none; } }

/* ── Empty states: one sentence each */
.mail-list .mail-empty { min-height: 0; padding: var(--space-xl) var(--space-md); }

/* ── Spacing and type helpers the Mail & Calendar views use instead of style= (16px is .card-mb in app.css) */
.mail-flush { margin: 0; }
.mail-flush-b { margin-bottom: 0; }
.mail-mb-6 { margin-bottom: 6px; }
.mail-mb-sm { margin-bottom: var(--space-sm); }
.mail-mb-md { margin-bottom: var(--space-md); }
.mail-mb-lg { margin-bottom: var(--space-lg); }
.mail-mt-md { margin-top: var(--space-md); }
.mail-mt-lg { margin-top: var(--space-lg); }
.mail-ml-xs { margin-left: var(--space-xs); }
.mail-ml-6 { margin-left: 6px; }
.mail-ml-sm { margin-left: var(--space-sm); }
.mail-mr-xs { margin-right: var(--space-xs); }
.mail-italic { font-style: italic; }
.mail-wrap { word-break: break-word; }
h1.mail-title { font-size: 1.25rem; }
h1.mail-title--sm { font-size: 1.15rem; }
.mail-list__heading { min-width: 0; }
.mail-place { margin: 2px 0 0; }
.mail-rule { border: none; border-top: 1px solid var(--color-slate-200); margin: 0 0 var(--space-md); }
.mail-rule--tight { border-top-color: var(--color-slate-100); margin-bottom: var(--space-sm); }
.mail-pager { margin-top: var(--space-md); }
.mail-link-button { background: none; border: none; cursor: pointer; }
.mail-inline-form { display: inline; }
.mail-back { font-size: 0.875rem; color: var(--color-text-muted); }

/* ── List rows */
.mail-unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-info); }
.mail-list td .badge, .mail-list td .inline-badge { margin-right: 6px; }
/* W1: a list row is a compact two-line grid, keyed by the cells' classes (the Scheduled and
   Snoozed rows have four cells, the others five; never nth-child). The markup, ids and data
   attributes are unchanged. Line one: sender and time; line two: badges, subject, snippet.
   The hover actions overlay the right end of line one (over the time, as in Gmail), out of
   the grid's sizing, so they never claim a column and never cover the subject link. */
.mail-rows { display: block; width: 100%; }
.mail-rows thead { display: none; }
.mail-rows tbody { display: block; }
.mail-rows tbody tr { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-areas: "dot from when" "dot subject subject"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.mail-rows tbody tr:last-child { border-bottom: 0; }
.mail-rows td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; }
.mail-rows .mail-row-dot { grid-area: dot; align-self: start; padding-top: 4px; }
.mail-rows .mail-row-from { grid-area: from; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-rows .mail-row-from br { display: none; }
.mail-rows .mail-row-from .action-link { margin-left: 6px; }
.mail-rows .mail-row-when { grid-area: when; white-space: nowrap; font-size: 12px; color: var(--color-text-muted); text-align: right; }
.mail-rows .mail-row-subject { grid-area: subject; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; row-gap: 1px; min-width: 0; }
.mail-rows .mail-row-subject > * { flex: none; }
.mail-rows .mail-row-subject .inline-badge, .mail-rows .mail-row-subject .badge { font-size: 11px; margin-right: 0; padding: 1px 6px; }
.mail-rows .mail-row-link { flex: 1 1 0; min-width: 4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-rows .mail-row-snippet { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.mail-rows .mail-row-actions { position: absolute; top: 4px; right: 10px; z-index: 1; display: flex; align-items: center; padding-left: var(--space-sm); background: inherit; visibility: hidden; white-space: nowrap; }
/* Keyboard focus reveals them (:focus-visible), a mouse click on the subject does not leave
   them covering the sender of the open row. */
.mail-rows tbody tr:hover .mail-row-actions, .mail-rows tbody tr:has(:focus-visible) .mail-row-actions,
.mail-rows .mail-row-actions:has([aria-expanded="true"]) { visibility: visible; }
.mail-rows .mail-row-actions .inbox-row-actions { margin-right: var(--space-xs); visibility: inherit; }   /* the cell decides, not the older row rules */
/* M11: status lines take a line of their own under the buttons. */
.mail-toolbar > .mail-toolbar__status { order: 10; flex-basis: 100%; }
/* Scheduled and Snoozed: the row's controls are its point, so they stay on a line of their own. */
.mail-rows tbody tr.mail-row--attachments { display: block; padding-top: 0; }   /* Receipts: the attachments card under its row */
.mail-feed { display: flex; flex-direction: column; gap: var(--space-md); }
.mail-feed-item { padding: var(--space-md); }
.mail-feed-item__subject { margin: var(--space-xs) 0; font-size: 1.05rem; }
.mail-rows tbody tr.mail-row--stacked { grid-template-areas: "dot from when" "dot subject subject" "dot actions actions"; }
.mail-rows tr.mail-row--stacked .mail-row-actions { position: static; grid-area: actions; justify-self: start; display: block; visibility: visible; background: none; padding-left: 0; white-space: normal; }
@media (hover: none) {
  .mail-rows .mail-row-actions { position: static; grid-area: auto; grid-row: 3; grid-column: 2 / 4; justify-self: start; visibility: visible; background: none; padding-left: 0; }
}
@media (max-width: 767px) {
  .mail-rows .mail-row-actions { display: none; }   /* touch has the bottom bar on the message page */
  .mail-rows tr.mail-row--stacked .mail-row-actions { display: block; }
}

/* ── Thread and message page */
/* G3: the mockup's message: the subject, ONE dim sender line, then the context line and the body. */
h1.mail-message__subject { margin-bottom: var(--space-xs); }
.mail-message__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 var(--space-sm); font-size: 13px; line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.mail-message__meta .inline-badge { margin-left: 2px; }
.mail-message__status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mail-message__status form { margin: 0; }
/* Attachments as small chips under the body. */
.mail-attachments-block { margin-top: var(--space-sm); }
.mail-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-xs); }
.mail-attachment { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: 12.5px; background: var(--color-surface); }
/* G3: the message actions are one slim row of borderless buttons. Scoped to the page header: the phone's More sheet
   moves this same node into its dialog (D14) and keeps its own look there. It wraps rather than overflow (the status
   lines take their own line under the row); never overflow: hidden, which would clip that line. */
.mail-panes__message .page-header .mail-toolbar { flex-wrap: wrap; gap: 2px; row-gap: 4px; align-items: center; }
.mail-panes__message .page-header .mail-toolbar .btn { padding: 4px 5px; font-size: 13px; font-weight: 500; border-radius: var(--radius-md); }
.mail-panes__message .page-header .mail-toolbar .btn-outline, .mail-panes__message .page-header .mail-toolbar .btn-secondary { background: transparent; border-color: transparent; color: var(--color-text-secondary); }
.mail-panes__message .page-header .mail-toolbar .btn-outline:hover, .mail-panes__message .page-header .mail-toolbar .btn-secondary:hover { background: var(--color-slate-100); color: var(--color-text-primary); border-color: transparent; }
.mail-panes__message .page-header .mail-toolbar .btn-primary { padding: 4px 11px; }
.mail-panes__message .page-header .mail-toolbar__status { flex-basis: 100%; }
@media (max-width: 1199px) { .mail-panes__message .page-header .mail-toolbar .btn { padding: 4px 4px; } }
.mail-from-name { font-size: 0.88rem; }
.mail-from-addr { font-size: 0.8rem; }
.mail-subject-line { color: var(--color-text-secondary); }

/* ── Invite preview */
.invite-icon { font-size: 1.2em; }
.invite-note { margin-top: 6px; color: var(--color-text-secondary); font-size: 0.9em; }
.invite-code { font-size: 0.85em; }
.invite-card { border-left: 4px solid var(--color-success); }
.invite-card--cancelled { border-left-color: var(--color-text-muted); opacity: 0.75; }
.cluster.invite-head { gap: 12px; margin-bottom: 12px; }
.invite-title { font-size: 1.05em; }
.badge.invite-cancelled-badge { background: var(--color-slate-200); color: var(--color-text-secondary); padding: 2px 8px; border-radius: 4px; font-size: 0.8em; }
.invite-cancelled-note { padding: 8px 12px; background: var(--color-slate-100); border-radius: 4px; margin-bottom: 12px; font-size: 0.9em; }

/* ── RSVP actions and the personal-account warning modal */
.rsvp-actions { margin-top: 12px; border-top: 1px solid var(--color-slate-200); padding-top: 12px; }
.callout.rsvp-callout { font-size: 0.9em; }
.rsvp-label { display: block; font-size: 0.85em; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.rsvp-select { margin-bottom: var(--space-sm); }
.rsvp-hint { font-size: 0.8em; color: var(--color-text-secondary); margin-bottom: var(--space-sm); }
.mail-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.card.mail-modal__box { max-width: 460px; background: var(--color-surface); padding: 20px; border-radius: var(--radius-lg); }
.mail-modal__box h3 { margin-top: 0; }

/* ── Email accounts and monitoring pages */
.mail-account-form { max-width: 600px; }
.mail-account-form__title { font-size: 1.25rem; font-weight: 600; margin: 0 0 var(--space-md); }
.mail-account-name { font-weight: 600; }
.mail-account-error { margin-top: 12px; padding: 8px 12px; background: var(--color-danger-light); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--color-danger); }
.mail-monitoring { max-width: 960px; }

/* ── Text conversation */
.sms-page { max-width: 720px; }
.sms-thread { padding: var(--space-md); display: block; }
.sms-row { margin-bottom: 12px; }
.sms-row--out { text-align: right; }
.sms-bubble { display: inline-block; max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--color-slate-100); }
.sms-bubble--out { background: var(--color-info-light); }
.sms-time { font-size: 0.75rem; }
.sms-error { color: var(--color-danger); }

/* ── The CRM contact card on the calendar event page */
.crm-link-card { background: var(--color-slate-50); border: 1px solid var(--color-slate-200); border-radius: 6px; padding: 12px var(--space-md); margin-bottom: var(--space-md); }
.crm-link-card .cluster { gap: 10px; }
.crm-link-card__none { font-size: 0.88rem; }

/* ── Shortcut sheet and focused row */
.mail-sheet { border: 0; border-radius: var(--radius-lg); padding: var(--space-lg); width: min(520px, 92vw); background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-lg); }
.mail-sheet::backdrop { background: var(--color-scrim); }
.mail-sheet__head { margin-bottom: var(--space-md); }
.mail-sheet__keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.mail-sheet__keys dt { text-align: right; } .mail-sheet__keys dd { margin: 0; }
kbd { font: 12px ui-monospace, monospace; padding: 1px 6px; border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: var(--radius-sm); background: var(--color-slate-50); }

/* ── Phone bottom bar */
.mail-bottom-bar { display: none; }
@media (max-width: 767px) {
  .mail-panes[data-pane="message"] .mail-toolbar { display: none; }         /* the header toolbar yields to the bar */
  /* 156px at the foot: the bar (84px) plus the fixed help button (56px) and a 16px gap, so the last line scrolls clear of it. */
  .mail-message { padding-bottom: 156px; }
  .mail-bottom-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px calc(8px + env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); gap: 6px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
  .mail-bottom-bar form { display: contents; }
  .mail-bottom-bar__item { flex: 1; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .mail-bottom-bar__item--danger { color: var(--color-danger); }
  body:has(.mail-bottom-bar) .help-widget { bottom: 84px; right: 12px; }   /* the help button would cover More */
  .mail-sheet--bottom { margin: auto 0 0; width: 100%; max-width: 100%; box-sizing: border-box; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .mail-panes[data-pane="message"] .mail-sheet--bottom .mail-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }   /* (0,4,0) outranks the hiding rule's (0,3,0) above; F6 */
}

/* ── Calendar (slice 4 part 4a, spec §6). Colours are tokens; a calendar's own colour is set
   by the grid controller from the JSON (border-left / background on .calendar-event). ── */
.calendar-view { display: flex; flex-direction: column; height: calc(100vh - 60px - var(--space-lg) * 2); min-height: 0; }
.calendar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); }
.calendar-nav__controls { display: flex; align-items: center; gap: 4px; }
.calendar-nav__date { width: 150px; padding: 4px 6px; }
.calendar-nav__label { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin: 0; flex: 1; min-width: 180px; }
.calendar-nav__views { display: flex; gap: 4px; }
.calendar-nav__status { display: flex; align-items: center; gap: var(--space-sm); }
.calendar-quick-add { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex-basis: 100%; }
.calendar-quick-add__input { flex: 1; min-width: 220px; padding: 4px 8px; }
.calendar-quick-add__target { width: auto; padding: 4px 6px; }
.calendar-quick-add__preview { flex-basis: 100%; margin: 0; min-height: 1.2em; }
.calendar-quick-add__preview:empty { display: none; }
.calendar-body { display: flex; flex: 1; min-height: 0; gap: var(--space-md); }
.calendar-body > .calendar-grid-wrapper, .calendar-body > .calendar-agenda, .calendar-body > .calendar-day-shell { flex: 1; min-width: 0; }
.calendar-drawer { width: 320px; flex: none; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.calendar-drawer[hidden] { display: none; }
.calendar-body--drawer-open .calendar-drawer { display: block; }
/* The EmpireVault form inside the drawer's frame (4b section 6.1) and drag-to-create's ghost. */
.calendar-drawer-form .form-group { margin-bottom: var(--space-sm); }
.calendar-drawer-form .form-actions { display: flex; gap: 6px; }
.calendar-event-form__attendee { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 4px; margin-bottom: 4px; }
/* In the drawer and the phone sheet the email takes its own line so it stays readable; name, role
   and remove share the second. The page keeps the one-line row. */
.calendar-drawer-form .calendar-event-form__attendee { grid-template-columns: minmax(0, 1fr) auto auto; margin-bottom: var(--space-sm); }
.calendar-drawer-form .calendar-event-form__attendee > input[type="email"] { grid-column: 1 / -1; }
.calendar-event-form__repeats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 4px; }
.calendar-event-form__repeat { display: inline-flex; align-items: center; gap: 4px; }
.calendar-event-form__cancel { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
/* One occurrence's cancel tells nobody, so the box goes when "This event" is picked. */
.calendar-event-form__cancel:has(input[name="scope"][value="this_only"]:checked) .calendar-event-form__cancel-notify { display: none; }
/* The frame's top bar: what the form is and a close control (a phone sheet has no Escape key). */
.calendar-drawer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-border); }
.calendar-drawer-bar__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text-primary); }
.calendar-drawer-bar__close { min-width: 32px; min-height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font-size: 20px; line-height: 1; cursor: pointer; }
.calendar-drawer-bar__close:hover, .calendar-drawer-bar__close:focus-visible { background: var(--color-slate-50); color: var(--color-text-primary); }
.calendar-day-column { user-select: none; }
.calendar-range-ghost { position: absolute; left: 2px; right: 2px; border: 1px dashed var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary-light); pointer-events: none; }
body.is-resizing { cursor: ns-resize; user-select: none; }
.calendar-grid-wrapper { display: flex; flex-direction: column; min-height: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.calendar-allday-row, .calendar-day-headers { display: grid; grid-template-columns: 56px repeat(var(--calendar-days, 7), minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); }
.calendar-view--day .calendar-allday-row, .calendar-view--day .calendar-day-headers { --calendar-days: 1; }
.calendar-allday-cell { min-height: 28px; padding: 2px 4px; border-left: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; }
.calendar-allday-event { font-size: 12px; padding: 2px 6px; border-radius: var(--radius-sm); color: var(--color-on-primary); background: var(--color-primary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.calendar-day-header { padding: 6px 4px; text-align: center; border-left: 1px solid var(--color-border); }
.calendar-day-name { display: block; font-size: 11px; text-transform: uppercase; color: var(--color-text-muted); }
.calendar-day-number { display: inline-block; min-width: 26px; line-height: 26px; border-radius: var(--radius-full); font-weight: 600; color: var(--color-text-primary); }
.calendar-day-today .calendar-day-number { background: var(--color-primary); color: var(--color-on-primary); }
.calendar-grid-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.calendar-grid { position: relative; display: grid; grid-template-columns: 56px repeat(var(--calendar-days, 7), minmax(0, 1fr)); }
.calendar-view--day .calendar-grid { --calendar-days: 1; }
.calendar-time-column .calendar-time-label { box-sizing: border-box; height: 60px; font-size: 11px; color: var(--color-text-muted); text-align: right; padding-right: 6px; transform: translateY(-7px); }
.calendar-day-column { position: relative; border-left: 1px solid var(--color-border); }
.calendar-day-today-col { background: var(--color-primary-light); }
/* R62: border-box, so an hour is exactly 60px with its line and blocks (60px an hour) stay on the lines. */
.calendar-hour-cell { box-sizing: border-box; height: 60px; border-bottom: 1px solid var(--color-border); }
.calendar-hour-cell:hover { background: var(--color-slate-50); }
.calendar-event { position: absolute; left: 2px; right: 4px; padding: 3px 6px; border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); background: var(--color-primary-light); color: var(--color-text-primary); font-size: 12px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); }
.calendar-event--empirevault { border-left-color: var(--color-primary); background: var(--color-primary-light); }
.calendar-event--tentative { border-left-style: dashed; }
.calendar-event--busy { opacity: 0.6; }
.calendar-event:hover { box-shadow: var(--shadow-md); }
.calendar-event--dragging { opacity: 0.5; }
.calendar-event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-event-time { color: var(--color-text-secondary); font-size: 11px; }
.calendar-event-resize-handle { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.calendar-time-indicator { position: absolute; height: 2px; background: var(--color-danger); pointer-events: none; }
.calendar-time-indicator::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-danger); }
.calendar-time-indicator[hidden] { display: none; }
.calendar-popover { position: fixed; z-index: 60; width: 320px; max-width: calc(100vw - 24px); }
.calendar-popover[hidden] { display: none; }
.calendar-popover__content { display: flex; flex-direction: column; gap: var(--space-sm); }
.calendar-popover__form { display: flex; flex-direction: column; gap: 6px; }
.calendar-popover__row { display: flex; gap: 6px; }
.calendar-popover__row .form-input { flex: 1; min-width: 0; }
.calendar-popover__actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 4px; }
.calendar-detail__title { font-size: 15px; font-weight: 600; color: var(--color-text-primary); display: flex; align-items: center; gap: 6px; }
.calendar-detail__meta { color: var(--color-text-secondary); font-size: 13px; }
.calendar-detail__attendees { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.calendar-detail__attendees li { display: flex; justify-content: space-between; gap: 6px; }
.calendar-detail__response { color: var(--color-text-muted); font-size: 12px; }
.calendar-detail__conflicts { font-size: 12px; }
.calendar-detail__conflicts--warning { color: var(--color-warning-dark); }
.calendar-detail__conflicts--ok { color: var(--color-success-dark); }
.calendar-detail__note { margin-top: var(--space-sm); }
.calendar-detail__crm { margin-top: var(--space-sm); }
.calendar-detail__link { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.calendar-detail__results { list-style: none; margin: 4px 0 0; padding: 0; width: 100%; }
.calendar-detail__result { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 6px; color: var(--color-text-primary); cursor: pointer; }
.calendar-detail__result:hover { background: var(--color-background); }
.calendar-detail__busy { font-size: 12px; color: var(--color-text-muted); }
.calendar-scope-dialog { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); padding: var(--space-md); box-shadow: var(--shadow-lg); }
.calendar-scope-dialog::backdrop { background: var(--color-scrim); }
.calendar-scope-dialog__question { margin: 0 0 var(--space-sm); }
.calendar-toast-container { position: fixed; bottom: 16px; right: 16px; z-index: 70; display: flex; flex-direction: column; gap: 6px; }
.calendar-toast { padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-primary); box-shadow: var(--shadow-md); font-size: 13px; animation: calendar-toast-in 150ms ease-out; }
.calendar-toast--error { border-color: var(--color-danger); color: var(--color-danger-dark); }
.calendar-toast--success { border-color: var(--color-success); }
@keyframes calendar-toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.calendar-date-strip { display: flex; justify-content: space-between; gap: 2px; padding: 4px 0 var(--space-sm); }
.calendar-date-strip__day { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 4px 0; border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; }
.calendar-date-strip__name { font-size: 11px; text-transform: uppercase; }
.calendar-date-strip__number { font-weight: 600; font-size: 15px; color: var(--color-text-primary); }
.calendar-date-strip__day.is-today .calendar-date-strip__number { color: var(--color-primary); }
.calendar-date-strip__day.is-selected { background: var(--color-primary); }
.calendar-date-strip__day.is-selected .calendar-date-strip__name, .calendar-date-strip__day.is-selected .calendar-date-strip__number { color: var(--color-on-primary); }
.calendar-day-shell { display: flex; flex-direction: column; min-height: 0; }
.calendar-agenda { overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.calendar-agenda__day { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin: var(--space-md) 0 var(--space-sm); }
.calendar-agenda__day.is-today { color: var(--color-primary); }
.calendar-agenda__list { list-style: none; margin: 0; padding: 0; }
.calendar-agenda__item { display: grid; grid-template-columns: 14px 80px minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.calendar-agenda__time { font-size: 13px; color: var(--color-text-secondary); }
.calendar-agenda__title { background: none; border: 0; padding: 0; text-align: left; font: inherit; color: var(--color-link); cursor: pointer; }
.calendar-agenda__calendar { font-size: 12px; }
.calendar-dot { flex: none; vertical-align: middle; }
.calendar-dot--empirevault { color: var(--color-primary); }
/* Month view (4c §7): a seven-column grid of server-rendered cells; chips on a desktop, a busy
   dot and the selected day's list on a phone. A calendar's own colour is data set by the JS. */
.calendar-body > .calendar-month { flex: 1; min-width: 0; }
.calendar-month { display: flex; flex-direction: column; min-height: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.calendar-month__weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--color-border); }
.calendar-month__weekday { padding: 6px 4px; text-align: center; font-size: 11px; text-transform: uppercase; color: var(--color-text-muted); }
/* Rows share the view's height (no inner scrollbar); a short viewport clips a cell's chips and
   "+n more" still links to the day. The week rows are role=row wrappers that do not box. */
.calendar-month__cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: hidden; }
.calendar-month__row { display: contents; }
.calendar-month__cell { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden; padding: 4px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); cursor: pointer; }
.calendar-month__cell:last-child { border-right: 0; }
.calendar-month__cell:hover { background: var(--color-slate-50); }
.calendar-month__cell--outside { background: var(--color-canvas); }
.calendar-month__cell--outside .calendar-month__number { color: var(--color-text-muted); }
.calendar-month__number { display: inline-block; align-self: center; flex: none; min-width: 24px; line-height: 24px; padding: 0 4px; text-align: center; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; color: var(--color-text-primary); }
.calendar-month__cell--today .calendar-month__number { background: var(--color-primary); color: var(--color-on-primary); }
.calendar-month__cell--selected { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.calendar-month__chips { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 0; overflow: hidden; }
.calendar-month__chip { font-size: 11px; line-height: 1.3; padding: 1px 4px; border-radius: var(--radius-sm); border-left: 3px solid var(--color-primary); background: var(--color-primary-light); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.calendar-month__chip--allday { border-left: 0; background: var(--color-primary); color: var(--color-on-primary); }
.calendar-month__chip--tentative { border-left-style: dashed; }
.calendar-month__more { font-size: 11px; font-weight: 600; color: var(--color-link-hover); padding-left: 4px; text-decoration: none; }
.calendar-month__dot { display: none; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-primary); margin: 2px auto 0; }
.calendar-month__day { display: none; }
.calendar-month__day-title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 var(--space-sm); }
.calendar-month__day-list { margin-bottom: var(--space-sm); }
.calendar-month__day-empty { padding: 6px 0; }
.mail-nav__calendars .mail-nav__calendar { display: flex; align-items: center; gap: 6px; padding: 4px 12px; color: var(--color-slate-400); font-size: 13px; cursor: pointer; }
.mail-nav__calendars input[type="checkbox"] { accent-color: var(--color-primary); }
.mail-nav__calendars .mail-nav__calendar--sub { padding-left: 28px; }
.mail-nav__calendar--reconnect:hover { text-decoration: none; }
.mail-nav__calendar--reconnect .mail-nav__hint { flex: none; font-size: 11px; color: var(--color-primary); }
.mail-nav__entry--muted { color: var(--color-slate-400); font-size: 12px; }
@media (max-width: 1023px) {
  .calendar-drawer { display: none; }
  .calendar-popover--sheet { position: fixed; inset: 0; width: auto; max-width: none; overflow-y: auto; border-radius: 0; }
}
@media (max-width: 767px) {
  .calendar-view { height: auto; }
  .calendar-month__cells { grid-auto-rows: 44px; flex: none; overflow: visible; }
  .calendar-month__cell { align-items: center; padding: 4px 0; }
  .calendar-month__chips, .calendar-month__more { display: none; }
  .calendar-month__dot { display: block; }
  .calendar-month__dot[hidden] { display: none; }
  /* 80px at the foot: the fixed help button (56px plus its offset) must not cover the last row. */
  .calendar-month__day { display: block; padding: var(--space-sm) var(--space-md) 80px; }
  .calendar-nav__label { order: -1; flex-basis: 100%; }
  .calendar-nav__views .btn, .calendar-nav__controls .btn { padding: 4px 8px; }
  .calendar-nav__controls { flex-wrap: wrap; max-width: 100%; }
  .calendar-nav__date { width: 120px; }
  .calendar-grid-scroll { overflow-y: visible; }
  .calendar-time-column .calendar-time-label { font-size: 10px; }
}

/* ── AI in Mail (slice 5): the summary card at the top of the message pane, the composer's panel and its
   recovery offers, the writing-style result. Existing tokens only (plan ruling PR-20): nothing here needs a
   new value in app.css :root or in the two dark blocks above. */
.mail-ai-card { margin: 0 0 var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-accent-light); font-size: 13.5px; }
.mail-ai-card:empty { display: none; }
.mail-ai-card__summary { margin: 0 0 var(--space-sm); white-space: pre-line; }
.mail-ai-card__actions { margin-bottom: var(--space-sm); }
.mail-ai-card__meta, .mail-ai-card__status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.mail-ai-card__meta { color: var(--color-text-muted); }
.mail-ai-inline-form { display: inline; margin: 0; }
.mail-ai-panel { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mail-ai-panel__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.mail-ai-panel__instruction { flex: 1 1 16rem; min-width: 0; }
.mail-ai-slot__status { margin: var(--space-xs) 0 0; }
.mail-ai-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); font-size: 13.5px; }
.mail-ai-style-result { margin-top: var(--space-sm); }