/* AH suite branding: green #0f6334, dark by default, Inter, tokens as CSS variables. */
:root {
  --ah-green: #0f6334;
  --bg: #101312;
  --bg-raised: #171b1a;
  --bg-sunken: #0b0e0d;
  --fg: #e8ece9;
  --fg-muted: #9aa5a0;
  --line: #262c2a;
  --danger: #d8603f;
  /* Distinct from --danger on purpose. "Something is catching up by itself" and "something
     needs you" must not look the same, or the red one stops being read. */
  --notice: #c9973f;
  --radius: 10px;
  --tap: 44px;
  --font: Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f6f8f7;
  --bg-raised: #ffffff;
  --bg-sunken: #ecefed;
  --fg: #14201a;
  --fg-muted: #5c6b64;
  --line: #d7ded9;
  color-scheme: light;
}

* { box-sizing: border-box; }

/* Any author rule that sets display beats the browser's own [hidden] rule, so hiding an
   element silently stops working the moment it gets a display value. This makes the
   attribute mean what it says, for every element, permanently. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
}
.topbar-left { display: flex; align-items: baseline; gap: 10px; }
.brand { font-weight: 650; letter-spacing: -0.01em; }
.version-badge {
  font: inherit;
  font-size: 12px;
  color: var(--fg-muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  min-height: 26px;
}
.version-badge:hover { color: var(--fg); border-color: var(--fg-muted); }

.icon-btn {
  font: inherit;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 14px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--fg);
  cursor: pointer;
}
.icon-btn:hover { border-color: var(--fg-muted); }

/* ---------- views ---------- */
#main { flex: 1; display: flex; }
.view { flex: 1; display: flex; }
.view[hidden] { display: none; }
.centered {
  margin: auto;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
  max-width: 460px;
  text-align: center;
}
h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 10px; }
.lede { color: var(--fg-muted); margin: 0 0 24px; line-height: 1.6; }
.fineprint { color: var(--fg-muted); font-size: 13px; line-height: 1.6; margin-top: 20px; }
.placeholder {
  margin-top: 24px;
  padding: 20px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.placeholder p { margin: 0 0 8px; }
.placeholder p:last-child { margin-bottom: 0; }

.row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.warn { color: var(--danger); }

#settings-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--fg-muted);
}
#settings-form input,
#settings-form textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  min-height: var(--tap);
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: 8px;
}
#settings-form textarea { min-height: 72px; resize: vertical; }
.checks { display: block; margin-top: 6px; }
.checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 12px 6px 0;
  min-height: 32px;
  color: var(--fg);
}
.checks input { width: auto; min-height: 0; margin: 0; }

/* ---------- the playbook ---------- */
.pb-rule {
  margin: 10px 0; padding: 12px;
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px;
}
.pb-rule.pb-approved { border-left: 3px solid var(--ah-green); }
.pb-rule.pb-disabled { opacity: 0.55; }
.pb-rule-head { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.pb-layer {
  font-size: 11px; padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--fg-muted);
}
.pb-badge { font-size: 11px; color: var(--fg-muted); }
.pb-badge.ok { color: var(--ah-green); }
.pb-text { margin: 0 0 8px; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }
.pb-edit {
  width: 100%; min-height: 64px; margin: 8px 0; padding: 8px 10px;
  font: inherit; font-size: 13px; color: var(--fg);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
}

/* ---------- the mail surface ----------
   Outlook's skeleton, Gmail's threading. EVERY colour lives in a --ma-* variable in the two
   blocks below and nowhere else, so tuning the surface later means editing only this block.
   Dark = Outlook's blue on deep neutrals; light = Gmail's blue on its cool light ground. */
.mail-app {
  --ma-accent: #4a9eed;     /* Outlook blue, dark-mode strength */
  --ma-bg: #1b1a19;         /* window ground */
  --ma-surface: #201f1e;    /* rail and list ground */
  --ma-raised: #292827;     /* reader, cards */
  --ma-hover: #323130;
  --ma-selected: color-mix(in srgb, #4a9eed 22%, #201f1e);
  --ma-line: #3b3a39;
  --ma-fg: #f3f2f1;
  --ma-muted: #a19f9d;
  --ma-warn: #ff8a65;
}
:root[data-theme="light"] .mail-app {
  --ma-accent: #0b57d0;     /* Gmail blue */
  --ma-bg: #f6f8fc;         /* Gmail's light ground */
  --ma-surface: #ffffff;
  --ma-raised: #ffffff;
  --ma-hover: #eaf1fb;
  --ma-selected: #d3e3fd;
  --ma-line: #e0e3e7;
  --ma-fg: #1f1f1f;
  --ma-muted: #5e5e5e;
  --ma-warn: #b3261e;
}

.mail-app {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column;
  background: var(--ma-bg); color: var(--ma-fg);
}
.mail-app[hidden] { display: none; }

.ma-top {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--ma-line);
  background: var(--ma-surface); flex-wrap: wrap;
}
.ma-title { font-weight: 600; font-size: 15px; }
.ma-icon-btn {
  min-width: var(--tap); min-height: var(--tap);
  font: inherit; font-size: 18px; cursor: pointer;
  color: var(--ma-fg); background: none; border: none; border-radius: 8px;
}
.ma-icon-btn:hover { background: var(--ma-hover); }
.ma-search { display: flex; gap: 6px; flex: 1 1 240px; min-width: 0; }
.ma-search input {
  flex: 1 1 160px; min-width: 0; padding: 8px 12px; min-height: 40px;
  font: inherit; font-size: 14px; color: var(--ma-fg);
  background: var(--ma-bg); border: 1px solid var(--ma-line); border-radius: 20px;
}
.ma-search input:focus { outline: 2px solid var(--ma-accent); outline-offset: -1px; }
.ma-search-btn {
  min-height: 40px; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ma-fg); background: none; border: 1px solid var(--ma-line); border-radius: 20px;
}
.ma-search-btn:hover { background: var(--ma-hover); }
.ma-modes { display: flex; border: 1px solid var(--ma-line); border-radius: 8px; overflow: hidden; }
.ma-mode {
  min-height: 40px; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ma-muted); background: none; border: none;
}
.ma-mode.active { color: var(--ma-fg); background: var(--ma-selected); }

.ma-body {
  flex: 1; display: grid; min-height: 0;
  /* Two draggable boundaries, Outlook style. The widths live in variables so a saved layout
     restores with two assignments; the 6px tracks are the splitters themselves. */
  grid-template-columns: var(--ma-w-rail, 220px) 6px var(--ma-w-list, 400px) 6px minmax(0, 1fr);
}
.ma-splitter {
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}
.ma-splitter:hover, .ma-splitter:active { background: var(--ma-accent); opacity: 0.5; }
.ma-rail {
  overflow-y: auto; padding: 8px; border-right: 1px solid var(--ma-line);
  background: var(--ma-surface); min-width: 0;
}
/* One tree row = a caret (only when there are children) beside the folder button, indented
   by depth. The tree is Outlook's own hierarchy, assembled from the provider's parent ids. */
.ma-folder-row { display: flex; align-items: center; min-width: 0; }
.ma-caret {
  flex: none; width: 22px; min-height: var(--tap);
  font: inherit; font-size: 11px; cursor: pointer;
  color: var(--ma-muted); background: none; border: none; border-radius: 6px;
}
.ma-caret:hover:not(:disabled) { background: var(--ma-hover); color: var(--ma-fg); }
.ma-caret:disabled { cursor: default; }
.ma-rail-head {
  margin: 14px 0 2px; padding: 0 10px;
  font-size: 12px; font-weight: 600; color: var(--ma-muted);
}
.ma-label-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
/* The pin. Quiet until hovered, so 121 rows do not become 121 stars. */
.ma-star {
  flex: none; width: 26px; min-height: var(--tap);
  font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ma-muted); background: none; border: none; border-radius: 6px;
  opacity: 0; transition: opacity 0.1s;
}
.ma-folder-row:hover .ma-star, .ma-star.on { opacity: 1; }
.ma-star.on { color: var(--ma-accent); }
@media (hover: none) { .ma-star { opacity: 1; } }
.ma-folder {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0;
  padding: 6px 10px; min-height: var(--tap);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  color: var(--ma-fg); background: none; border: none; border-radius: 8px;
}
.ma-folder:hover { background: var(--ma-hover); }
.ma-folder.active { background: var(--ma-selected); font-weight: 600; }
.ma-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-folder-unread { flex: none; font-size: 12px; font-weight: 600; color: var(--ma-accent); }
/* Shrinkable and clipped: at the rail's minimum width this line gives way, the name stays. */
.ma-folder-sub {
  flex: 0 1 auto; min-width: 0; font-size: 11px; color: var(--ma-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-folder.unsynced { color: var(--ma-muted); }

.ma-listpane {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  border-right: 1px solid var(--ma-line); background: var(--ma-surface);
}
.ma-count { margin: 0; padding: 8px 14px 4px; font-size: 12px; color: var(--ma-muted); }
.ma-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.ma-more-row { padding: 8px 14px; }

/* Outlook's date bands. */
.ma-group-head {
  padding: 8px 14px 4px; font-size: 12px; font-weight: 600; color: var(--ma-muted);
  position: sticky; top: 0; background: var(--ma-surface); z-index: 1;
}

.ma-row {
  display: flex; gap: 10px; width: 100%; min-width: 0; text-align: left; cursor: pointer;
  padding: 10px 14px; font: inherit; color: var(--ma-fg);
  background: none; border: none; border-bottom: 1px solid var(--ma-line);
}
.ma-row:hover { background: var(--ma-hover); }
.ma-row.selected { background: var(--ma-selected); }
/* Unread carries Outlook's accent bar and bold sender; read rows stay quiet. */
.ma-row.unread { box-shadow: inset 3px 0 0 var(--ma-accent); }
.ma-row.unread .ma-row-from, .ma-row.unread .ma-row-subject { font-weight: 700; }
.ma-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: #fff;
}
.ma-row-main { flex: 1; min-width: 0; }
.ma-row-top { display: flex; gap: 8px; min-width: 0; align-items: baseline; }
.ma-row-from {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px;
}
.ma-row-count { flex: none; font-size: 12px; color: var(--ma-muted); }
.ma-row-date { flex: none; font-size: 12px; color: var(--ma-muted); white-space: nowrap; }
.ma-row-subject {
  margin-top: 2px; font-size: 13px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-row-snippet {
  margin-top: 2px; font-size: 12px; color: var(--ma-muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-row-flags { flex: none; font-size: 12px; color: var(--ma-muted); align-self: center; }

/* Label chips: membership shown wherever the message shows. Clicking one filters by it. */
.ma-chips { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.ma-chip {
  font-size: 11px; padding: 0 8px; border-radius: 10px; cursor: pointer;
  color: var(--ma-fg); border: 1px solid var(--ma-line); background: var(--ma-raised);
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ma-chip-more { cursor: default; color: var(--ma-muted); }

.ma-pill {
  min-height: 40px; padding: 0 14px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ma-muted); background: none; border: 1px solid var(--ma-line); border-radius: 20px;
}
.ma-pill.active { color: var(--ma-fg); background: var(--ma-selected); border-color: var(--ma-accent); }

.ma-atts { margin-top: 8px; }
.ma-att {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 6px 0; font-size: 12px;
}
.ma-att-name { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ma-fg); }
.ma-att .btn { border-color: var(--ma-line); color: var(--ma-fg); text-decoration: none; }

.ma-readerpane {
  position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--ma-bg);
}
.ma-reader-nav {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 20px 0;
}
.ma-reader-nav button:disabled { opacity: 0.4; cursor: default; }
.ma-nav-hint { font-size: 11px; color: var(--ma-muted); }
.ma-reader { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; min-height: 0; }
.ma-reader-back { display: none; position: absolute; top: 6px; left: 6px; z-index: 2; }
.ma-empty { color: var(--ma-muted); }
.ma-subject { margin: 0 0 10px; font-size: 18px; overflow-wrap: anywhere; }
.ma-msg { border: 1px solid var(--ma-line); border-radius: 10px; background: var(--ma-raised); margin-bottom: 10px; }
.ma-msg-head {
  display: flex; gap: 10px; align-items: center; width: 100%; min-width: 0;
  padding: 10px 12px; font: inherit; text-align: left; cursor: pointer;
  color: var(--ma-fg); background: none; border: none;
}
.ma-msg-who { flex: 1; min-width: 0; }
.ma-msg-from { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ma-msg-meta { font-size: 12px; color: var(--ma-muted); overflow-wrap: anywhere; }
.ma-msg-date { flex: none; font-size: 12px; color: var(--ma-muted); white-space: nowrap; }
.ma-msg-folder {
  flex: none; font-size: 11px; color: var(--ma-muted);
  border: 1px solid var(--ma-line); border-radius: 10px; padding: 1px 8px;
}
.ma-msg-body { padding: 0 12px 12px; }
/* Attachment names arrive unbroken and 80 characters long; they wrap here, they do not
   widen the reader. Measured, not assumed. */
.ma-note { margin: 6px 0; font-size: 12px; color: var(--ma-muted); overflow-wrap: anywhere; }
.ma-note.warn { color: var(--ma-warn); }
/* The body renders inside a sandboxed frame — no scripts, no same-origin access. */
.ma-frame {
  width: 100%; min-height: 340px; margin-top: 8px;
  background: var(--ma-surface); border: 1px solid var(--ma-line); border-radius: 8px;
}
.ma-msg-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ma-msg-actions .btn { border-color: var(--ma-line); color: var(--ma-fg); }

/* Narrow: the rail becomes a chip strip, the list fills the width, and the reader slides
   over the top as its own layer (both mobile apps do exactly this). */
@media (max-width: 900px) {
  .ma-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ma-splitter { display: none; }
  .ma-nav-hint { display: none; }
  .ma-reader-nav { padding-top: 52px; }
  .ma-reader-nav:not([hidden]) ~ .ma-reader { padding-top: 8px; }
  .ma-rail {
    display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-bottom: 1px solid var(--ma-line); padding: 6px 10px;
  }
  /* In the strip the tree flattens to chips: no shrinking, no depth indent. */
  .ma-folder-row { flex: none; padding-left: 0 !important; }
  .ma-folder { width: auto; flex: none; }
  .ma-folder-sub { display: none; }
  .ma-rail-head { flex: none; align-self: center; margin: 0 4px; }
  .ma-listpane { border-right: none; }
  .ma-readerpane {
    position: fixed; inset: 0; z-index: 35; background: var(--ma-bg);
    transform: translateX(100%); transition: transform 0.15s ease;
  }
  .ma-readerpane.open { transform: translateX(0); }
  .ma-reader-back { display: block; }
  .ma-reader { padding-top: 52px; }
}

/* ---------- model connection ---------- */
.modal-wide { max-width: 620px; }
.mc-section { margin-bottom: 26px; }
.mc-section h3 { margin: 0 0 4px; font-size: 16px; }
.mc-group { margin: 18px 0 8px; font-size: 13px; color: var(--fg-muted); font-weight: 600; }
.mc-cap { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mc-cap:last-child { border-bottom: none; }
.mc-cap-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.mc-cap-head strong { font-size: 14px; }
.mc-cap-use { font-size: 12px; color: var(--fg-muted); }

/* AI-CONNECT v12: rows of choice + button on one line, status underneath, no nested boxes. */
.ai-slot { margin-top: 8px; }
.ai-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ai-slot-label { flex: 0 0 auto; min-width: 3.5em; font-size: 13px; color: var(--fg-muted); }
.ai-select {
  flex: 1 1 220px; min-width: 0; padding: 9px 10px; min-height: var(--tap);
  font: inherit; font-size: 14px; color: var(--fg);
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px;
}
.ai-divider { margin: 12px 0 0; border-top: 1px dashed var(--line); }
.ai-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ai-card-title { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.ai-card-title strong { font-size: 14px; }
.ai-status { font-size: 12px; color: var(--fg-muted); }
.ai-status.ok { color: var(--ah-green); }
.ai-status.bad { color: var(--danger); }
.ai-hint { margin-top: 8px; }
.ai-details { margin-top: 8px; font-size: 13px; }
.ai-details summary { cursor: pointer; color: var(--fg-muted); min-height: 32px; display: flex; align-items: center; }
.ai-details input { width: 100%; margin-top: 8px; padding: 9px 10px; min-height: var(--tap);
  font: inherit; font-size: 13px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.mc-row > div > input[type="text"] { margin-top: 8px; }

/* One card per connection source; connection state is said in words on the card head. */
.mc-row {
  padding: 12px; margin-bottom: 8px;
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px;
}
.mc-row input[type="password"], .mc-row input[type="text"] {
  width: 100%; margin-top: 8px; padding: 9px 10px; min-height: var(--tap);
  font: inherit; font-size: 13px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.mc-result { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.mc-result.ok { color: var(--ah-green); }
.mc-result.bad { color: var(--danger); }
/* Our own missing path is grey, never a red cross: a red cross blames the provider. */
.mc-result.none { color: var(--fg-muted); }

/* Failure is loud on purpose: background work must never look fine while it is stopped. */
.needs-attention {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-sunken));
}
.needs-attention #mailbox-line { color: var(--danger); font-weight: 600; }

.catching-up {
  border-color: var(--notice);
  background: color-mix(in srgb, var(--notice) 10%, var(--bg-sunken));
}

/* What the state means, in words the reader can act on. Sits above the raw provider detail. */
#sub-explain {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}

.status {
  margin: 18px 0 0;
  padding: 16px;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  text-align: left;
  font-size: 13px;
}
.status[hidden] { display: none; }
.status dt { color: var(--fg-muted); }
.status dd { margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--ah-green); color: #fff; }
.btn-primary:hover { filter: brightness(1.12); }
.btn-small { min-height: 34px; padding: 0 14px; font-size: 14px; }
.btn-quiet { background: none; border-color: var(--line); color: var(--fg); }

.spinner {
  margin: auto;
  width: 26px; height: 26px;
  border: 2px solid var(--line);
  border-top-color: var(--ah-green);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

/* ---------- What's New modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  padding: 20px;
  z-index: 40;
}
.modal[hidden] { display: none; }
/* While any overlay is open, the page behind it must not move. Without this, the wheel keeps
   going once the card's own scroll ends and the background scrolls under the overlay. */
body:has(.modal:not([hidden])),
body:has(.mail-app:not([hidden])) { overflow: hidden; }
.modal-card { overscroll-behavior: contain; }
.modal-card {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  overflow-y: auto;
  /* Belt and braces: a card must never scroll sideways. Anything genuinely too wide
     (a table in an email) scrolls inside its own container instead. */
  overflow-x: hidden;
  padding: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
/* Required: a modal that does not close on outside click must carry a × top right. */
.modal-close {
  position: absolute;
  top: 8px; right: 8px;
  min-width: var(--tap);
  min-height: var(--tap);
  font-size: 22px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--fg-muted);
  cursor: pointer;
}
.modal-close:hover { color: var(--fg); }
.modal h2 { margin: 0 0 14px; font-size: 18px; padding-right: 40px; }
.release { margin-bottom: 18px; }
.release:last-child { margin-bottom: 0; }
.release h3 { margin: 0 0 2px; font-size: 15px; }
.release .date { color: var(--fg-muted); font-size: 12px; }
.release ul { margin: 8px 0 0; padding-left: 18px; }
.release li { margin-bottom: 6px; line-height: 1.55; }

/* ---------- update banner: bottom centre ---------- */
.update-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
  z-index: 50;
}
.update-banner[hidden] { display: none; }