/* Evermail — Airy defaults (applied globally on top of kit styles.css)
   No nested cards, generous whitespace, sections divided by rules not chrome.
   ========================================================================= */

{
  background: var(--color-surface); /* single-surface canvas */
}

/* Main content padding — more room to breathe */
.main {
  padding: 2rem 3.5rem 5rem;
  gap: 3rem;
  max-width: 1280px;
}

/* Topbar: stripped of chrome — becomes a bare row */
.topbar {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  height: auto;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.topbar .icon-btn { background: transparent; }
.topbar .user-pill { background: transparent; }

/* Page hero — no card chrome, just typography */
.page-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 1rem 0 0;
  border-radius: 0;
}
.page-hero h1 {
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.02em;
}

/* Stat / KPI cards — become borderless, rely on scale + whitespace */
.stat-card,
.kpi-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.kpi-card .value,
.stat-card .value {
  font-size: 2.25rem;
  line-height: 1.1;
}
.kpi-card .spark { margin-top: .75rem; }
.stat-grid,
.kpi-grid { gap: 2.5rem; padding: .5rem 0; border-top: 1px solid var(--color-border); padding-top: 2rem; }

/* Search panel — no card */
.search-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.search-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: .75rem 1.25rem;
}

/* Modern cards / chart cards — demote to sections */
.modern-card,
.chart-card,
.table-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 2rem;
  border-radius: 0;
}

/* Chart area — lose the inner card */
.chart-area {
  background: transparent;
  border-radius: 0;
}

/* Health bar — flatten to row of stats */
.health-bar {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.health-cell {
  padding: 1.25rem 1.5rem 1.25rem 0;
  border-right: 0;
}

/* Activity feed / card rows — looser spacing, no inner chrome */
.activity-feed .row,
.card-row { padding: 1.1rem 0; }

/* Tables — drop wrapper chrome */
.archives-table,
.admin-data-table {
  background: transparent;
}
.admin-data-table thead th,
.archives-table thead th { background: transparent; }

/* Table head banner */
.table-card__head {
  padding: 0 0 1rem;
  border-bottom: 0;
}

/* Donut — remove wrapper chrome */
.donut-wrap { padding-top: 1.25rem; }

/* Alert banner — less-loud treatment */
.alert-banner {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--color-warning);
  border-radius: 0;
  padding: .75rem 0 .75rem 1rem;
}

/* Section header pattern — eyebrow + title, used to introduce sections */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}
.section-head h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
.section-head .eyebrow { margin-bottom: .25rem; }

/* ============ Contacts: hidden canvas wrap during loading / empty state ====
   Used by `ContactGraphView.razor` when the graph has no nodes or is still
   pulling data — keeps the design's `.cg-canvas-wrap` chrome out of the way
   so the loader / empty state owns the vertical real estate. */
.cg-canvas-wrap--hidden { display: none !important; }

/* ============ Airy search refinements ============ */
/* `gap: .5rem` overrides app.css `.search-panel { gap: 1.5rem }` so the three
   stacked rows (search-bar / filter-chips / saved-searches) sit ~8px apart
   instead of 24px. The per-row `margin-top` rules below were redundant once
   the parent gap shrank, so they're zeroed out to avoid double-spacing. */
.search-panel { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: .5rem !important; }
.search-bar { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: .85rem 1.4rem; }
.search-bar:focus-within { border-color: var(--color-border-strong); box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
.search-bar.is-disabled { background: var(--color-surface-muted); }

.search-allowance {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: .75rem 0 1.25rem;
  padding: .9rem 1rem;
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  animation: search-allowance-in 300ms ease-out both;
}
.search-allowance--caution {
  background: color-mix(in oklch, var(--color-warning) 9%, var(--color-surface));
  border: 1px solid color-mix(in oklch, var(--color-warning) 28%, var(--color-border));
}
.search-allowance--exhausted {
  background: color-mix(in oklch, var(--color-brand-primary) 8%, var(--color-surface));
  border: 1px solid color-mix(in oklch, var(--color-brand-primary) 25%, var(--color-border));
}
.search-allowance__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: color-mix(in oklch, currentColor 9%, transparent);
  color: var(--color-brand-primary);
}
.search-allowance__copy { display: grid; gap: .15rem; min-width: 0; }
.search-allowance__copy strong { font-size: .9rem; letter-spacing: -.01em; }
.search-allowance__copy span,
.search-allowance__copy small { color: var(--color-text-secondary); line-height: 1.45; }
.search-allowance__copy span { font-size: .84rem; }
.search-allowance__copy small { font-size: .75rem; font-variant-numeric: tabular-nums; }
.saved-pill--disabled { opacity: .5; cursor: not-allowed !important; }

@keyframes search-allowance-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .search-allowance { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .search-allowance__upgrade { grid-column: 2; justify-self: start; margin-left: -.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .search-allowance { animation: none; }
}

.filter-chips { margin-top: 0; align-items: center; }
/* Bare-text `.chip` style — designed for the SEARCH RESULTS filter row
   (`/emails`), where every visible chip is a `.chip.active` (with `::before`
   × dismisser), `.chip.add-filter`, or `.chip.chip--clear-all`. The plain
   base would never be visible there.
   On `/home`, the `.filter-chips` row holds plain `<a class="chip">` quick-
   action shortcuts ("Last 90 days", "Upload archive", …) that must render
   as the canonical rounded pill from `webapp.css` line 522. The home page
   marks itself with `.home-search` so we can exclude it cleanly here
   instead of `!important`-ing the canonical pill. */
.search-panel:not(.home-search) .chip { background: transparent; border: 0; color: var(--color-text-secondary); padding: .3rem .4rem; font-weight: 500; }
.search-panel:not(.home-search) .chip:hover { color: var(--color-text-primary); background: transparent; }
/* Active filter chip — balances the "Clear all" pill on the right: same
   horizontal rhythm (~.8rem inline padding) so the × has breathing room
   on its left edge. */
.chip.active {
  background: transparent;
  color: var(--color-brand-primary);
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .8rem;
}
.chip.active::before {
  content: '×';
  /* Make the × a proper centered glyph: bigger, vertically aligned to the
     middle of the label (not sitting on the baseline), and slightly less
     faded so it reads as a dismiss control. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1.1rem;
  line-height: 1;
  opacity: .7;
  margin-right: 0;
}
.chip.active:hover::before { opacity: 1; }
.chip .x { display: none; }

/* Email list — airy, chrome-less: hairline separators only, no cards.
   Many of these `!important`s defeat the legacy `app.css .email-list` /
   `app.css .email-card` rules (rounded card container, vertical flex
   layout, oversized padding). Without them the airy refinements lose to
   the later-loaded app.css cascade. */
.email-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-top: 2rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.email-card {
  /* The 3-column grid (avatar | body | right meta) is the design's layout.
     app.css has `display: flex; flex-direction: column` which collapses
     everything into a single vertical stack — force the grid back. */
  display: grid !important;
  grid-template-columns: 36px 1fr auto !important;
  gap: 1rem !important;
  align-items: start !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  padding: 1rem 1rem 1rem .85rem !important;
  transition: background .12s ease, box-shadow .12s ease !important;
  /* Left accent stripe — transparent by default, teal on active */
  box-shadow: inset 3px 0 0 transparent !important;
}
.email-card:hover {
  transform: none !important;
  background: var(--color-surface-muted) !important;
  border-bottom-color: var(--color-border) !important;
  box-shadow: inset 3px 0 0 transparent !important;
}
.email-card.active {
  background: color-mix(in oklch, var(--color-brand-primary) 6%, transparent) !important;
  border-bottom-color: color-mix(in oklch, var(--color-brand-primary) 30%, var(--color-border)) !important;
  box-shadow: inset 3px 0 0 var(--color-brand-primary) !important;
}
/* Restore the design's compact pill shape for `.email-card .att` (paperclip
   badge in the right column). The base `.email-card .att` rule in
   webapp.css gives it a rounded muted-surface pill; we keep the muted
   background and add a tighter padding so it doesn't dominate the card. */
.email-card .att {
  background: var(--color-surface-muted);
  padding: 2px 8px;
  border-radius: 999px;
}

/* Attachment pill in the email-viewer footer — `app.css` overrides the
   design's compact `.attachment-pill` (border-radius 999px, .45rem .9rem
   padding) with a chunky 18px-radius .8rem-padded button. Force the
   design's shape back. Only used in the new EmailViewer. */
.attachment-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: .5rem !important;
  padding: .45rem .9rem !important;
  border-radius: 999px !important;
  background: var(--color-surface-muted) !important;
  border: 1px solid var(--color-border) !important;
  font-size: .8rem !important;
  color: var(--color-text-primary) !important;
  text-align: left !important;
}
.attachment-pill i { color: var(--color-brand-primary) !important; }
.attachment-pill:hover {
  border-color: color-mix(in oklch, var(--color-brand-primary) 35%, var(--color-border)) !important;
  background: color-mix(in oklch, var(--color-brand-primary) 5%, var(--color-surface-muted)) !important;
}

/* Colored sender avatars — rotate a palette by card position */
.email-card .avatar {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  background: linear-gradient(135deg, #2563eb, #06b6d4) !important;
}
.email-card:nth-child(6n+1) .avatar { background: linear-gradient(135deg, #0891b2, #06b6d4) !important; }
.email-card:nth-child(6n+2) .avatar { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; }
.email-card:nth-child(6n+3) .avatar { background: linear-gradient(135deg, #db2777, #ec4899) !important; }
.email-card:nth-child(6n+4) .avatar { background: linear-gradient(135deg, #ea580c, #f97316) !important; }
.email-card:nth-child(6n+5) .avatar { background: linear-gradient(135deg, #059669, #10b981) !important; }
.email-card:nth-child(6n)   .avatar { background: linear-gradient(135deg, #2563eb, #4f46e5) !important; }

/* Viewer — single pane, no card chrome.
   The flex column + min-height: 100% combo lets the right cell stretch to
   the row height (set by the email list on the left) so the divider runs
   the full length, and the empty-state placeholder centres inside it
   instead of collapsing to its content size. */
.email-viewer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--color-border) !important;
  padding-left: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
}
/* Stretch the grid children to the row height. webapp.css uses
   `align-items:start` which collapses the right pane around its content
   (visible as a short divider under the empty state). */
.split { gap: 2.5rem !important; align-items: stretch !important; }

/* Empty placeholder when no email is selected — centred vertically and
   horizontally inside the now-full-height viewer. */
.email-viewer__empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 2rem 1.5rem;
  color: var(--color-text-muted);
  text-align: center;
}
.email-viewer__empty i { font-size: 2rem; opacity: .35; }
.email-viewer__empty p { margin: 0; font-size: .9rem; }

/* Saved searches row — subtle dashed rule above so it reads as a distinct
   "presets" group, but the rhythm stays tight: ~8px gap above the rule
   (from the parent `.search-panel { gap: .5rem }`) and ~10px padding
   below it. The previous 1rem margin + 1rem padding doubled up with the
   parent gap and produced a 32px void; this trims it back. */
.saved-searches { display:flex; align-items:center; gap:.75rem; margin-top:0; padding-top:.625rem; border-top:1px dashed var(--color-border); flex-wrap:wrap; }
.saved-label { font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); font-weight:600; }
/* `.saved-pill` and `.chip.add-filter` use the same vertical padding so the
   two read as the same component when wrapped in adjacent rows (same height). */
.saved-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; border-radius:999px; background:var(--color-surface-muted); color:var(--color-text-secondary); font-size:.8rem; font-weight:500; cursor:pointer; border:1px solid transparent; }
.saved-pill:hover { background:var(--color-surface); border-color:var(--color-border); color:var(--color-text-primary); }
.saved-pill i { color:var(--color-brand-accent); font-size:.78rem; }
.saved-save { margin-left:auto; border:0; background:transparent; color:var(--color-brand-primary); font:600 .8rem/1 var(--font-family-base); cursor:pointer; display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .4rem; }
.saved-save:hover { text-decoration:underline; }

/* Add-filter chip — pill-shaped CTA, distinct from `.chip.active` (which is
   plain text + ::before X). Padding + font-size match `.saved-pill` so the
   two pills read as the same component when stacked across rows. */
.chip.add-filter {
  color: var(--color-brand-primary) !important;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-weight: 600;
  font-size: .8rem;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.chip.add-filter:hover {
  background: color-mix(in oklch, var(--color-brand-primary) 8%, var(--color-surface));
  border-color: color-mix(in oklch, var(--color-brand-primary) 28%, var(--color-border));
}
.filter-menu {
  /* Anchored to the left edge of the +Add filter chip so the menu opens
     rightward into the visible area. The original design used right:0
     because the chip was always in the middle of an active chip row, but
     in practice the chip is often the leftmost item and right:0 pushed
     the menu off the viewport. */
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: .5rem; min-width: 260px;
  display: none; flex-direction: column; gap: .15rem;
  font-size: .85rem; color: var(--color-text-primary); font-weight: 500;
}
.filter-menu--open { display: flex; }
.filter-menu__label { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted); font-weight:600; padding: .5rem .75rem .25rem; }
.filter-menu__item { display:flex; align-items:center; gap:.6rem; padding: .5rem .75rem; border-radius: 10px; cursor: pointer; }
.filter-menu__item i { color: var(--color-text-secondary); width:16px; }
.filter-menu__item kbd { margin-left:auto; font-family: var(--font-family-mono); font-size:.72rem; background: var(--color-surface-muted); color: var(--color-text-secondary); padding: 1px 6px; border-radius: 4px; border:1px solid var(--color-border); }
.filter-menu__item:hover { background: var(--color-surface-muted); }
.filter-menu__item:hover i { color: var(--color-brand-primary); }
.filter-menu__divider { height:1px; background: var(--color-border); margin: .4rem 0; }
.filter-menu__item--advanced { color: var(--color-brand-primary); }
.filter-menu__item--advanced i { color: var(--color-brand-primary); }
.filter-menu__item.is-disabled { cursor: not-allowed; color: var(--color-text-muted); }
.filter-menu__item.is-disabled i { color: var(--color-text-muted); }
.filter-menu__item.is-disabled:hover { background: transparent; }
.filter-menu__item.is-disabled:hover i { color: var(--color-text-muted); }

/* Picker panel (nested inside .filter-menu--picker) */
.filter-menu--picker { padding: 0; min-width: 380px; cursor: default; font-weight: 400; }
.picker { display: flex; flex-direction: column; color: var(--color-text-primary); }
.picker__head {
  display:flex; align-items:center; gap:.55rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--color-border);
  font-weight: 600; font-size: .92rem;
}
.picker__head i { color: var(--color-brand-primary); }
.picker__close {
  margin-left:auto; background:transparent; border:0; cursor:pointer;
  color: var(--color-text-secondary); font-size: 1rem; padding: .2rem .35rem;
  border-radius: 6px; line-height: 1;
}
.picker__close:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.picker__body { padding: 1rem; display:flex; flex-direction:column; gap:.8rem; }
.picker__body--pad { padding: 1.25rem 1rem; }
.picker__body--row { flex-direction: row; gap: 1.25rem; padding: 1rem; }
.picker__presets { display:flex; flex-direction:column; gap:.2rem; min-width: 130px; border-right: 1px solid var(--color-border); padding-right: 1rem; }
.picker__preset {
  background: transparent; border: 0; text-align:left; padding: .4rem .6rem;
  border-radius: 8px; font-size: .82rem; color: var(--color-text-secondary); cursor: pointer;
}
.picker__preset:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.picker__fields { display:flex; flex-direction:column; gap:.6rem; flex:1; }
.picker__fields label { display:flex; flex-direction:column; gap:.25rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--color-text-muted); font-weight:600; }
.picker__fields input[type="date"],
.picker__input {
  font: inherit; font-size: .9rem; color: var(--color-text-primary);
  padding: .55rem .75rem; border: 1px solid var(--color-border);
  border-radius: 10px; background: var(--color-surface); font-weight: 400;
  letter-spacing: normal; text-transform: none;
}
.picker__fields input:focus,
.picker__input:focus { outline: 2px solid var(--color-brand-primary); outline-offset: -1px; border-color: transparent; }
.picker__summary { font-size: .82rem; color: var(--color-text-secondary); padding-top: .25rem; }
.picker__suggestions { display:flex; flex-direction:column; gap:.1rem; }
.picker__suggestions-label { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--color-text-muted); font-weight:600; margin-bottom: .15rem; }
.picker__suggestion {
  display:flex; align-items:center; justify-content:flex-start;
  gap:.55rem; background:transparent; border:0;
  padding: .45rem .65rem; border-radius: 8px; cursor:pointer; text-align:left;
  width: 100%;
  font-size:.88rem; color: var(--color-text-primary);
}
.picker__suggestion i { color: var(--color-text-muted); }
.picker__suggestion:hover { background: var(--color-surface-muted); }
.picker__radios { display:flex; flex-direction:column; gap: .1rem; }
.picker__radio {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .6rem;
  border-radius: 10px; cursor:pointer; font-size:.9rem;
}
.picker__radio:hover { background: var(--color-surface-muted); }
.picker__radio input { position:absolute; opacity:0; pointer-events:none; }
.picker__radio-dot {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--color-border); background: var(--color-surface);
  display:inline-block; flex-shrink:0; position:relative;
}
.picker__radio.is-sel .picker__radio-dot { border-color: var(--color-brand-primary); }
.picker__radio.is-sel .picker__radio-dot::after {
  content:''; position:absolute; inset:3px; border-radius:999px;
  background: var(--color-brand-primary);
}
.picker__foot {
  display:flex; justify-content:flex-end; gap:.5rem;
  padding: .75rem 1rem; border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  border-radius: 0 0 16px 16px;
}
.picker__foot .btn { font-size:.85rem; padding: .5rem 1rem; }

/* Folder picker (EVE-3111) — used both by FilterPickerFolder (the Folder filter chip,
   inside .filter-menu--picker) and MailboxFolderTree (the archive detail "Browse by
   folder" section, standalone). Shares .folder-picker__* class names across both call
   sites so the tree itself looks identical wherever it appears. */
.picker--folder { min-width: 380px; max-width: 420px; }
.folder-picker__body { max-height: 360px; overflow-y: auto; padding: .6rem 0; }
.folder-picker__tree { display: flex; flex-direction: column; }
.ad-folders-section__tree { border: 1px solid var(--color-border); border-radius: 12px; padding: .4rem 0; max-height: 420px; overflow-y: auto; }
.folder-picker__node { display: flex; flex-direction: column; }
.folder-picker__row {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .75rem .4rem calc(.75rem + var(--folder-depth, 0) * 1.15rem);
  cursor: pointer; border-radius: 8px; margin: 0 .4rem;
}
.ad-folders-section__tree .folder-picker__row { cursor: default; border-radius: 0; margin: 0; }
.folder-picker__row:hover { background: var(--color-surface-muted); }
.folder-picker__row:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: -2px; }
.folder-picker__row.is-selected { background: color-mix(in oklch, var(--color-brand-primary) 12%, var(--color-surface)); }
.folder-picker__row.is-selected .folder-picker__name { color: var(--color-brand-primary); font-weight: 600; }
.folder-picker__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; padding: 0;
  background: transparent; border: 0; border-radius: 4px; color: var(--color-text-muted);
}
.folder-picker__toggle:hover { background: var(--color-border); color: var(--color-text-primary); }
.folder-picker__toggle--spacer { pointer-events: none; }
.folder-picker__row > i.bi { color: var(--color-text-secondary); flex: none; font-size: .92rem; }
.folder-picker__name {
  flex: 1; min-width: 0; font-size: .86rem; color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-picker__name--link { text-decoration: none; }
.folder-picker__name--link:hover { text-decoration: underline; color: var(--color-brand-primary); }
.folder-picker__count {
  flex: none; font-size: .74rem; font-variant-numeric: tabular-nums;
  color: var(--color-text-muted); background: var(--color-surface-muted);
  padding: .1rem .45rem; border-radius: 999px;
}
.folder-picker__children { display: flex; flex-direction: column; }
.folder-picker__skeleton { display: flex; flex-direction: column; gap: .6rem; padding: .5rem .75rem; }
.folder-picker__skeleton-row { height: 1.1rem; width: 80%; }
.folder-picker__skeleton-row:nth-child(2) { width: 60%; margin-left: 1.15rem; }
.folder-picker__skeleton-row:nth-child(3) { width: 68%; margin-left: 1.15rem; }
.folder-picker__skeleton-row:nth-child(4) { width: 50%; }
.folder-picker__state {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  padding: .75rem; font-size: .85rem; color: var(--color-text-secondary);
}
.folder-picker__state--empty {
  align-items: center; text-align: center; padding: 1.5rem 1rem;
}
.folder-picker__state--empty i { font-size: 1.5rem; color: var(--color-text-muted); }
.folder-picker__state--empty p { max-width: 320px; margin: 0; }
.folder-picker__banner {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 .75rem .5rem; padding: .5rem .75rem;
  font-size: .78rem; color: var(--color-text-secondary);
  background: var(--color-surface-muted); border-radius: 8px;
}
.folder-picker__unfiled { font-size: .78rem; color: var(--color-text-muted); padding: .5rem .75rem 0; margin: 0; }

/* Archive detail "Browse by folder" section (EVE-3111) — mirrors .ad-detail-column's
   heading treatment but is full-width, below the two-column stats/timeline stream. */
.ad-folders-section { padding-top: 1rem; margin-top: 1.5rem; border-top: 1px solid var(--color-border); }
.ad-folders-section h3 { margin: 0 0 .85rem; color: var(--color-text-primary); font-size: .95rem; letter-spacing: -0.01em; }
.ad-folders-section .folder-picker__state { padding: .75rem 0; }
.ad-folders-section .folder-picker__state--empty { padding: 1.5rem 1rem; background: var(--color-surface-muted); border-radius: 12px; }

/* Calendar picker */
.picker--cal .picker__body--row { padding: 1rem 1rem 1rem 0; }
.picker--cal .picker__presets { padding: .25rem 1rem 0; min-width: 140px; }
.filter-menu--picker:has(.picker--cal) { min-width: 620px; }
.picker__cal-wrap { display:flex; flex-direction:column; gap:.65rem; flex:1; }
.cal__nav {
  display:flex; align-items:center; gap:.5rem;
  padding: 0 .25rem;
}
.cal__navbtn {
  background: transparent; border: 1px solid var(--color-border);
  width: 28px; height: 28px; border-radius: 8px; cursor:pointer;
  color: var(--color-text-secondary); display:grid; place-items:center;
}
.cal__navbtn:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.cal__summary {
  flex:1; display:flex; align-items:center; justify-content:center; gap:.55rem;
  font-size: .85rem; font-weight: 500; color: var(--color-text-primary);
}
.cal__summary i { color: var(--color-text-muted); font-size:.78rem; }
.cal__summary .muted { color: var(--color-text-muted); font-weight: 400; }
.cal__months { display:flex; gap: 1.5rem; }
.cal { flex:1; min-width: 0; }
.cal__title {
  text-align:center; font-size:.82rem; font-weight:600;
  color: var(--color-text-primary); margin-bottom: .5rem;
  letter-spacing: -0.01em;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
}
.cal__title-btn {
  background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; padding: .2rem .45rem;
  border-radius: 6px;
}
.cal__title-btn:hover { background: var(--color-surface-muted); color: var(--color-brand-primary); }
.cal__grid { display:grid; grid-template-columns: repeat(7, 1fr); }
.cal__grid--dow { margin-bottom: .25rem; }
.cal__dow {
  text-align:center; font-size:.66rem; font-weight:600;
  color: var(--color-text-muted); letter-spacing: .08em; text-transform:uppercase;
  padding: .2rem 0;
}
.cal__cell {
  height: 30px; border: 0; background: transparent; cursor:pointer;
  font-size: .82rem; font-weight: 500; color: var(--color-text-primary);
  display:grid; place-items:center; position: relative;
  border-radius: 0;
}
.cal__cell--blank { cursor: default; }
.cal__cell:not(.cal__cell--blank):hover:not(.in-range):not(.is-start):not(.is-end) {
  background: var(--color-surface-muted); border-radius: 8px;
}
.cal__cell.in-range {
  background: color-mix(in oklch, var(--color-brand-primary) 14%, transparent);
  color: var(--color-text-primary);
}
.cal__cell.is-start, .cal__cell.is-end {
  background: var(--color-brand-primary); color: white; font-weight: 600;
  border-radius: 8px; z-index: 1;
}
.cal__cell.is-start { border-radius: 8px 0 0 8px; }
.cal__cell.is-end { border-radius: 0 8px 8px 0; }
.cal__cell.is-start.is-end { border-radius: 8px; }

/* Month/year overlay for quick jumping */
.cal__overlay {
  position: absolute; inset: 0;
  background: color-mix(in oklch, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(4px);
  display:grid; place-items:start center;
  padding-top: 0;
  z-index: 5;
  animation: calOverlayIn .12s ease-out;
}
@keyframes calOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.cal__overlay-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: .75rem;
  width: 100%; max-width: 420px;
}
.cal__overlay-head {
  display:flex; align-items:center; gap:.5rem;
  padding: .25rem .35rem .6rem;
}
.cal__overlay-year, .cal__overlay-range {
  flex:1; text-align:center;
  font-size: .95rem; font-weight: 600; color: var(--color-text-primary);
  background: transparent; border: 0; cursor: pointer;
  padding: .35rem; border-radius: 8px;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
}
.cal__overlay-year i { color: var(--color-text-muted); font-size: .78rem; }
.cal__overlay-year:hover { background: var(--color-surface-muted); color: var(--color-brand-primary); }
.cal__overlay-grid { display:grid; gap:.35rem; }
.cal__overlay-grid--months { grid-template-columns: repeat(3, 1fr); }
.cal__overlay-grid--years { grid-template-columns: repeat(4, 1fr); }
.cal__overlay-cell {
  padding: .6rem .5rem;
  background: transparent; border: 1px solid transparent;
  border-radius: 10px;
  font-size: .85rem; font-weight: 500; color: var(--color-text-primary);
  cursor: pointer; text-align: center;
}
.cal__overlay-cell:hover { background: var(--color-surface-muted); border-color: var(--color-border); }
.cal__overlay-cell.is-active {
  background: var(--color-brand-primary); color: white; border-color: var(--color-brand-primary);
}

/* ——— Saved-searches overflow menu ——— */
.saved-pill--active {
  background: color-mix(in oklch, var(--color-brand-primary) 14%, transparent) !important;
  color: var(--color-brand-primary) !important;
  border-color: color-mix(in oklch, var(--color-brand-primary) 30%, transparent) !important;
}
.saved-pill--active i { color: var(--color-brand-primary) !important; }
.saved-more { position: relative; display:inline-flex; }
.saved-pill--more { cursor: pointer; color: var(--color-text-secondary); }
.saved-pill--more:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.saved-menu {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  width: 300px; overflow: hidden;
  display:flex; flex-direction:column;
}
.saved-menu__search {
  display:flex; align-items:center; gap:.5rem;
  padding: .75rem .85rem; border-bottom: 1px solid var(--color-border);
}
.saved-menu__search i { color: var(--color-text-muted); font-size: .9rem; }
.saved-menu__search input {
  flex:1; border:0; background:transparent; outline:none;
  font: inherit; font-size: .88rem; color: var(--color-text-primary);
}
.saved-menu__list { max-height: 280px; overflow-y: auto; padding: .35rem; }
.saved-menu__item {
  display:flex; align-items:center; gap:.6rem;
  width: 100%; padding: .5rem .6rem;
  background: transparent; border: 0; border-radius: 8px;
  cursor: pointer; text-align: left;
  font: inherit; font-size: .88rem; color: var(--color-text-primary);
}
.saved-menu__item:hover { background: var(--color-surface-muted); }
.saved-menu__item i { color: var(--color-brand-primary); font-size: .82rem; }
.saved-menu__name { flex: 1; }
.saved-menu__meta {
  font-size: .72rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.saved-menu__foot {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-muted);
  padding: .5rem;
}
.saved-menu__manage {
  display:flex; align-items:center; gap:.5rem; width: 100%;
  padding: .45rem .6rem; background: transparent; border: 0; border-radius: 8px;
  cursor:pointer; font: inherit; font-size: .82rem; color: var(--color-text-secondary);
}
.saved-menu__manage:hover { background: var(--color-surface); color: var(--color-text-primary); }

/* ——— Viewer toolbar: rendered / raw toggle ——— */
.email-viewer__toolbar {
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem; margin-top: 1rem;
}
.view-toggle {
  display:inline-flex; gap: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0; background: transparent;
  border-radius: 0;
}
.view-toggle__btn {
  display:inline-flex; align-items:center; gap:.4rem;
  border: 0; background: transparent; cursor: pointer;
  padding: .5rem 0; margin-right: 1.5rem; border-radius: 0;
  font: inherit; font-size: .82rem; font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.view-toggle__btn:hover { color: var(--color-text-primary); }
.view-toggle__btn.is-active {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-brand-primary);
}
.view-toggle__btn i { font-size: .85rem; opacity: .7; }
.view-toggle__btn.is-active i { opacity: 1; color: var(--color-brand-primary); }
.viewer-actions { display:flex; gap: .25rem; }
.viewer-actions .icon-btn {
  width: 32px; height: 32px; display:inline-grid; place-items:center;
  border: 0; background: transparent;
  border-radius: 8px; cursor: pointer;
  color: var(--color-text-muted); font-size: .95rem;
  transition: background .12s ease, color .12s ease;
}
.viewer-actions .icon-btn i { line-height: 1; }
.viewer-actions .icon-btn:hover {
  background: var(--color-surface-muted); color: var(--color-brand-primary);
}

/* ——— Inline image figure in email body ——— */
.email-figure {
  margin: 1.5rem 0;
  border: 1px solid var(--color-border);
  border-radius: 12px; overflow: hidden;
  background: var(--color-surface);
}
.email-figure__image {
  height: 220px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--color-brand-primary) 10%, var(--color-surface-muted)),
    var(--color-surface-muted));
  position: relative;
}
.email-figure__placeholder {
  position: absolute; inset: 0;
  display:flex; flex-direction:column;
  padding: 1.25rem 1.5rem;
  gap: 1rem;
}
.email-figure__chart {
  flex: 1; display:flex; align-items:flex-end; gap: 10%;
  padding-bottom: .25rem;
}
.email-figure__chart .bar {
  flex: 1; border-radius: 6px 6px 0 0;
  background: color-mix(in oklch, var(--color-brand-primary) 40%, transparent);
}
.email-figure__chart .bar--hl {
  background: var(--color-brand-primary);
  box-shadow: 0 4px 12px color-mix(in oklch, var(--color-brand-primary) 30%, transparent);
}
.email-figure__caption-inner {
  display:flex; justify-content:space-between; align-items:center;
  font-size: .78rem; font-weight: 500; color: var(--color-text-primary);
}
.email-figure__caption-inner .muted {
  color: var(--color-text-muted); font-family: var(--font-family-mono); font-size: .72rem;
}
.email-figure figcaption {
  padding: .65rem 1rem; font-size: .78rem; color: var(--color-text-muted);
  border-top: 1px solid var(--color-border); background: var(--color-surface-muted);
}

/* ——— Raw email view ——— */
.email-viewer__raw {
  margin-top: 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: 12px; overflow: hidden;
  background: var(--color-surface);
}
.raw-toolbar {
  display:flex; justify-content:space-between; align-items:center;
  padding: .55rem .85rem; background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
  font-size: .76rem;
}
.raw-toolbar__label {
  color: var(--color-text-muted);
  font-family: var(--font-family-mono);
}
.raw-toolbar__copy {
  display:inline-flex; align-items:center; gap:.35rem;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: 7px; padding: .3rem .6rem; cursor: pointer;
  font: inherit; font-size: .76rem; color: var(--color-text-secondary);
}
.raw-toolbar__copy:hover { background: var(--color-surface); color: var(--color-text-primary); }
.raw-source {
  margin: 0; padding: 1rem 1.25rem;
  font-family: var(--font-family-mono);
  font-size: .78rem; line-height: 1.65;
  color: var(--color-text-primary);
  white-space: pre-wrap; word-break: break-word;
  max-height: 420px; overflow-y: auto;
}
.raw-source .raw-h { color: var(--color-brand-primary); font-weight: 600; }
.raw-source .raw-dim { color: var(--color-text-muted); }
.raw-source mark {
  background: color-mix(in oklch, var(--color-brand-primary) 22%, transparent);
  color: var(--color-text-primary); padding: 0 2px; border-radius: 3px;
}

/* ——— Pagination ——— */
.pagination {
  display:flex; justify-content:space-between; align-items:center;
  padding: 1rem .25rem .25rem;
  margin-top: .75rem;
  border-top: 1px solid var(--color-border);
  gap: 1rem;
}
.pagination__info { font-size: .8rem; color: var(--color-text-secondary); }
.pagination__info strong { color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.pagination__estimate {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .35rem;
  color: var(--color-text-secondary);
}
.pagination__estimate i { color: var(--color-brand-primary); }
.pagination__controls { display:flex; gap: .15rem; }
.pager {
  min-width: 32px; height: 32px; padding: 0 .5rem;
  border: 1px solid transparent; background: transparent;
  border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 500;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  display:inline-flex; align-items:center; justify-content:center;
}
.pager:hover:not(:disabled):not(.is-active) {
  background: var(--color-surface-muted); color: var(--color-text-primary);
  border-color: var(--color-border);
}
.pager.is-active {
  background: var(--color-brand-primary); color: white;
  border-color: var(--color-brand-primary);
}
.pager:disabled { opacity: .4; cursor: not-allowed; }
.pager--dots { cursor: default; color: var(--color-text-muted); }

/* Time under date in email list cards */
.email-card .right .when-time {
  font-size: .72rem; color: var(--color-text-muted);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* Per-page selector */
.pagination__left { display:flex; align-items:center; gap: 1rem; }
.perpage { position: relative; }
.perpage__btn {
  display:inline-flex; align-items:center; gap:.4rem;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: 8px; padding: .3rem .6rem;
  cursor: pointer; font: inherit; font-size: .78rem;
  color: var(--color-text-secondary);
}
.perpage__btn strong { color: var(--color-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.perpage__btn i { color: var(--color-text-muted); font-size: .72rem; }
.perpage__btn:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }
.perpage__menu {
  position: absolute; bottom: calc(100% + .4rem); left: 0; z-index: 20;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  padding: .3rem; min-width: 140px;
  display:flex; flex-direction:column; gap: .1rem;
}
.perpage__item {
  display:flex; align-items:center; justify-content:space-between;
  padding: .45rem .6rem; background: transparent; border: 0;
  border-radius: 7px; cursor: pointer;
  font: inherit; font-size: .82rem; color: var(--color-text-primary); text-align: left;
}
.perpage__item:hover { background: var(--color-surface-muted); }
.perpage__item.is-active { color: var(--color-brand-primary); font-weight: 600; }
.perpage__item i { color: var(--color-brand-primary); }

/* ════════════════════════════════════════════════════════════
   Settings
   ════════════════════════════════════════════════════════════ */

/* Hero — compact transparent row matching home-hero */
.settings-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: .25rem 0 0;
  margin-bottom: 0;
}
.settings-hero h1 {
  margin: .5rem 0 .5rem;
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.settings-hero__sub {
  font-size: .92rem;
  color: var(--color-text-secondary);
  margin: 0;
}
.settings-hero__sub strong { color: var(--color-text-primary); }
.settings-wrapper {
  container-type: inline-size;
}

/* Settings tab rail — flat underline tabs on a hairline rule (Airy).
   Mobile turns this into a scrollable pill rail (mobile.css). */
.settings-tabs {
  display: flex;
  gap: 1.75rem;
  border-bottom: 1px solid var(--color-border);
  margin-top: -1.25rem;
}
.settings-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .1rem .8rem;
  margin-bottom: -1px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.settings-tabs__tab i { font-size: .95rem; line-height: 1; }
.settings-tabs__tab:hover {
  color: var(--color-text-primary);
  text-decoration: none;
}
.settings-tabs__tab.is-active {
  color: var(--color-brand-primary);
  border-bottom-color: var(--color-brand-primary);
  font-weight: 600;
}
/* The rail already draws a hairline; don't double it on the first section */
.settings-tabs + .settings-control-panel {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* Danger zone — calm flat section with a danger-tinted top rule */
.settings-danger {
  border-top-color: color-mix(in oklch, #ef4444 40%, var(--color-border)) !important;
}
.settings-danger .settings-control-panel__head h3 {
  color: color-mix(in oklch, #ef4444 70%, var(--color-text-primary));
}
.settings-profile-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .55rem;
  margin: 0;
  color: var(--color-text-secondary);
  max-width: 60ch;
}
.settings-profile-summary strong {
  color: var(--color-text-primary);
}
.settings-profile-summary span {
  min-width: 0;
}
.settings-profile-summary span::before {
  content: '·';
  margin-right: .55rem;
  color: var(--color-text-muted);
}

/* Collapsible section using native <details> */
.settings-expandable {
  border: 0;
  background: transparent;
}
.settings-expandable > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .25rem 0;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 1rem;
}
.settings-expandable > summary::-webkit-details-marker { display: none; }
.settings-expandable > summary::marker { display: none; content: ''; }
.settings-expandable > summary::after {
  content: '\F282';
  font-family: 'bootstrap-icons';
  font-size: .85rem;
  transition: transform .2s ease;
  color: var(--color-text-muted);
}
.settings-expandable[open] > summary::after {
  transform: rotate(180deg);
}
.settings-expandable > .expandable-body {
  padding-top: 1rem;
}

/* Security overview dashboard */
.security-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.security-overview__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.security-overview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.security-overview__dot--green { background: #22c55e; }
.security-overview__dot--yellow { background: #eab308; }
.security-overview__dot--red { background: #ef4444; }
.security-overview__dot--gray { background: var(--color-text-muted); }
.security-overview__label {
  font-size: .85rem;
  color: var(--color-text-secondary);
}
.security-overview__value {
  font-weight: 600;
  font-size: .85rem;
  color: var(--color-text-primary);
}

/* Airy section: no card chrome, separated by top rule */
.airy-section {
  background: transparent; border: 0; box-shadow: none; padding: 2rem 0 0;
  border-top: 1px solid var(--color-border);
}
.airy-section:first-of-type { border-top: 0; padding-top: 1rem; }
.airy-section__title {
  margin: .4rem 0 1.5rem;
  font-size: 1.75rem; letter-spacing: -0.02em; font-weight: 600;
}

/* Usage stats — borderless in airy mode */
.airy-usage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.airy-usage .usage-stat {
  background: transparent; border: 0; padding: 0;
  min-width: 0;
}
.usage-stat__label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
}
.usage-stat__value {
  margin: .4rem 0 .7rem;
  font-size: clamp(1.1rem, 2.2vw, 1.75rem); font-weight: 700; color: var(--color-text-primary);
  letter-spacing: -0.015em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.usage-stat__bar {
  height: 4px; background: var(--color-border); border-radius: 999px; overflow: hidden;
}
.usage-stat__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--color-brand-primary), #49d9c9);
  border-radius: 999px;
}
.settings-card__actions { display: flex; gap: .6rem; margin-top: 1.5rem; }

/* Account settings: plan metrics + security/access panels */
.settings-usage {
  grid-template-columns: minmax(10.5rem, 1.35fr) minmax(4.8rem, .75fr) minmax(6.8rem, .9fr);
  gap: 1.1rem;
  align-items: start;
}
.settings-usage .usage-stat {
  display: grid;
  grid-template-rows: auto minmax(2.35rem, auto) 4px;
  align-content: start;
}
.settings-usage .usage-stat__value {
  display: flex;
  align-items: baseline;
  margin: .35rem 0 .65rem;
  min-width: 0;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.15;
  white-space: nowrap;
}
.usage-stat__bar--empty {
  opacity: 0;
}
.settings-usage-hint {
  margin: .85rem 0 0;
  max-width: 42rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.settings-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}
.settings-summary-grid::before {
  display: none;
}
.settings-product-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: 2.25rem;
}
.settings-product-grid::before {
  display: none;
}
.settings-product-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.settings-product-panel__head {
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0;
}
.settings-product-panel__head .status-pill,
.settings-product-panel__head .btn {
  flex: 0 0 auto;
}
.settings-flat-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .85rem 0;
  border-top: 1px solid var(--color-border);
}
.settings-flat-row--compact {
  padding-top: .65rem;
}
.settings-flat-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, var(--color-brand-primary) 8%, var(--color-surface));
  color: var(--color-brand-primary);
  font-size: 1rem;
}
.settings-flat-row__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.settings-flat-row__body strong {
  color: var(--color-text-primary);
  font-size: .92rem;
  letter-spacing: -0.005em;
}
.settings-flat-row__body span,
.settings-muted {
  color: var(--color-text-secondary);
  font-size: .84rem;
  line-height: 1.5;
}
.settings-contained-details {
  padding: .75rem 0 0;
  border-top: 1px solid var(--color-border);
}
.settings-contained-details > summary {
  font-size: .9rem;
}
.settings-backup-codes {
  margin: .5rem 0 0;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .05em;
  white-space: pre-wrap;
  color: var(--color-text-primary);
}
.settings-setup-panel {
  margin-top: .25rem;
  border-radius: 18px;
}
.settings-step-title {
  font-weight: 600;
  margin: 0 0 .5rem;
  color: var(--color-text-primary);
}
.settings-code-input {
  max-width: 180px;
  margin-top: .5rem;
}
.settings-key-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.settings-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .8rem 0;
  border-bottom: 1px solid var(--color-border);
}
.settings-key-row__main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.settings-key-row__main strong {
  color: var(--color-text-primary);
  font-size: .9rem;
}
.settings-key-row__main code {
  font-size: .78rem;
  opacity: .65;
}
.settings-empty-row {
  padding: .85rem 0 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: .84rem;
  line-height: 1.5;
}

/* Account settings: AI + search controls */
.settings-control-panel {
  border-top: 1px solid var(--color-border) !important;
  padding-top: 2rem !important;
  gap: 1.5rem !important;
}
.settings-control-panel__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.settings-control-panel__head h3 {
  margin: .15rem 0 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.settings-control-panel__meta {
  color: var(--color-text-muted);
  font-size: .8rem;
  white-space: nowrap;
}
.settings-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}
.settings-control-grid--single {
  grid-template-columns: minmax(0, 42rem);
}
.settings-control-module {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
/* Column-aware dividers: right column gets a left hairline,
   second row and beyond get a top hairline. */
.settings-control-grid .settings-control-module:nth-child(2n) {
  border-left: 1px solid var(--color-border);
  padding-left: 2.5rem;
}
.settings-control-grid .settings-control-module:nth-child(n+3) {
  border-top: 1px solid var(--color-border);
  padding-top: 1.75rem;
}
.settings-control-grid--single .settings-control-module:nth-child(2n) {
  border-left: 0;
  padding-left: 0;
}
.settings-control-grid--single .settings-control-module + .settings-control-module {
  border-top: 1px solid var(--color-border);
  padding-top: 1.75rem;
}
.settings-control-module__head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
}
.settings-control-module__head h4 {
  margin: .1rem 0 0;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}
.settings-control-module__head .status-pill {
  justify-self: end;
  white-space: nowrap;
}
.settings-control-module__copy {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: .88rem;
  line-height: 1.55;
  max-width: 62ch;
}
.settings-control-details {
  border-top: 1px solid var(--color-border);
  padding-top: .75rem;
}
.settings-control-details > summary {
  font-size: .92rem;
}
.settings-provider-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.settings-provider-toggle .btn.is-active {
  color: var(--color-brand-primary);
  border-color: color-mix(in oklch, var(--color-brand-primary) 34%, var(--color-border));
  background: color-mix(in oklch, var(--color-brand-primary) 8%, transparent);
}
.settings-field {
  width: min(100%, 30rem);
}
.settings-card__actions .spinner-border {
  margin-right: .5rem;
}
.settings-confirm-panel {
  margin-top: 1rem;
}
.settings-confirm-panel__title {
  margin: 0 0 .35rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.settings-confirm-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.settings-preference-grid {
  display: grid;
  grid-template-columns: minmax(12rem, .95fr) minmax(13rem, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.settings-preference-fields {
  display: grid;
  gap: 1rem;
  min-width: 0;
}
.settings-choice-group {
  display: grid;
  gap: .65rem;
  min-width: 0;
}
.settings-choice-group__label {
  margin: 0 0 .15rem;
  font-size: .86rem;
  font-weight: 650;
  color: var(--color-text-primary);
}
.settings-choice-group__hint {
  margin: 0;
  font-size: .78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
}
.settings-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.settings-segmented__option {
  min-height: 36px;
  padding: .48rem .8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.settings-segmented__option:hover {
  border-color: color-mix(in oklch, var(--color-brand-primary) 35%, var(--color-border));
  color: var(--color-text-primary);
}
.settings-segmented__option:active {
  transform: scale(.98);
}
.settings-segmented__option.is-active {
  background: color-mix(in oklch, var(--color-brand-primary) 10%, transparent);
  border-color: color-mix(in oklch, var(--color-brand-primary) 50%, var(--color-border));
  color: var(--color-brand-primary);
}
.settings-toggle-list {
  display: grid;
  gap: .15rem;
  min-width: 0;
}
.settings-toggle-list .mud-switch {
  min-width: 0;
}
.settings-notification-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .15rem .9rem;
}
.settings-notification-list .mud-switch {
  min-width: 0;
}
.settings-export-attribution-locked {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  border-radius: var(--radius-input);
  background: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: .85rem;
  margin-top: .5rem;
}
.settings-export-attribution-locked i {
  flex-shrink: 0;
  opacity: .65;
}
.settings-export-attribution-locked span {
  flex: 1;
}

/* Privacy tiers — typographic, hairline columns */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
.tier {
  text-align: left; padding: 1.2rem 1.5rem 1.2rem 0;
  background: transparent;
  border-radius: 0 !important;
  border-top: 0;
  border-bottom: 0;
  border-right: 1px solid var(--color-border);
  border-left: 0;
  position: relative;
  border: 1.5px solid var(--color-border); border-radius: 12px;
  cursor: pointer; font: inherit; color: var(--color-text-primary);
  display: flex; flex-direction: column; gap: .5rem;
  transition: border-color .12s ease, background .12s ease;
}
.tier-grid > .tier:last-child { border-right: 0; }
.tier:not(:first-child) { padding-left: 1.5rem; }
.tier:hover { background: color-mix(in oklch, var(--color-brand-primary) 3%, transparent); }
.tier.is-active { background: transparent; }
.tier.is-active::before {
  content: ''; position: absolute; left: 0; right: 1px; top: -1px; height: 2px;
  background: var(--color-brand-primary);
}
.tier:first-child.is-active::before { left: 0; }

.tier__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.tier__title { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.tier__badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; color: var(--color-brand-primary);
  background: color-mix(in oklch, var(--color-brand-primary) 12%, transparent);
}
.tier__badge .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-brand-primary); }
.tier__desc { margin: 0; font-size: .82rem; color: var(--color-text-secondary); line-height: 1.5; }
.tier__bullets { list-style: none; padding: 0; margin: .35rem 0 0; display: flex; flex-direction: column; gap: .3rem; }
.tier__bullets li { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--color-text-secondary); }
.tier__bullets i { color: var(--color-brand-primary); font-size: .8rem; }

.security-command {
  display: grid;
  gap: 1.5rem;
}
.security-command .home-panel__head h3,
.security-mode-panel .home-panel__head h3,
.security-activity-panel .home-panel__head h3,
.security-data-panel .home-panel__head h3 {
  margin: .15rem 0 0;
  font-size: 1.05rem;
}
.security-next-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.security-next-step__title {
  margin: 0 0 .2rem;
  font-weight: 650;
  color: var(--color-text-primary);
}
.security-next-step__copy,
.security-mode-copy p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.security-mode-copy {
  display: grid;
  gap: .6rem;
  max-width: 62ch;
}
.security-mode-picker {
  display: grid;
  gap: .75rem;
}
.security-mode-picker .eyebrow {
  margin: 0;
}
.security-mode-grid {
  align-items: start;
}
.security-mode-panel {
  min-width: 0;
}
.security-mode-panel .settings-expandable {
  margin-top: .75rem;
}
.security-activity-panel,
.security-data-panel {
  display: grid;
  gap: 1rem;
}
.security-activity-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 1.5rem;
}
.security-activity-module {
  min-width: 0;
}
.security-activity-module + .security-activity-module {
  border-left: 1px solid var(--color-border);
  padding-left: 1.5rem;
}
.settings-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, .34);
}
.settings-confirm-sheet {
  width: min(100%, 30rem);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
}
.settings-confirm-sheet h3 {
  margin: .2rem 0 .65rem;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.settings-confirm-sheet p {
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.settings-confirm-sheet__label {
  display: block;
  margin: 1rem 0 .45rem;
  font-size: .86rem;
  color: var(--color-text-secondary);
}
.settings-confirm-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: 1rem;
}

@media (max-width: 880px) {
  .airy-usage, .tier-grid { grid-template-columns: 1fr; }
  .settings-usage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1080px) {
  .settings-product-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .settings-control-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .settings-control-grid .settings-control-module:nth-child(2n) {
    border-left: 0;
    padding-left: 0;
  }
  .settings-control-grid .settings-control-module + .settings-control-module {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
  }
}

@media (max-width: 640px) {
  .settings-usage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
  }
  .settings-usage .usage-stat:first-child {
    grid-column: 1 / -1;
  }
  .settings-control-panel__head {
    align-items: flex-start;
    flex-direction: column;
  }
  .settings-control-panel__meta {
    white-space: normal;
  }
  .settings-control-module__head {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .settings-control-module__head .settings-flat-row__icon {
    display: none;
  }
  .settings-preference-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .settings-usage {
    grid-template-columns: 1fr;
  }
  .settings-usage .usage-stat:first-child {
    grid-column: auto;
  }
  .settings-flat-row,
  .settings-key-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .settings-flat-row__icon {
    display: none;
  }
  .settings-flat-row .btn,
  .settings-key-row .btn {
    justify-self: start;
  }
}

@container (max-width: 520px) {
  .settings-profile-summary {
    display: grid;
    gap: .15rem;
  }
  .settings-profile-summary span::before {
    content: '';
    margin: 0;
  }
  .settings-flat-row,
  .settings-key-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .settings-flat-row__icon {
    display: none;
  }
  .settings-flat-row .btn,
  .settings-key-row .btn {
    justify-self: start;
  }
}

/* Sidebar sub-nav (Settings accordion) */
.nav-link--parent { cursor: pointer; }
.nav-link--parent .bi-gear {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.nav-link--parent.is-open .bi-gear {
  transform: rotate(90deg);
}
.nav-link--parent:active .bi-gear {
  transform: rotate(180deg);
}
.nav-link__chev {
  margin-left: auto; font-size: .7rem !important; opacity: .6;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.nav-link--parent.is-open .nav-link__chev {
  transform: rotate(90deg);
  opacity: 1;
}
.nav-sublist {
  display: flex; flex-direction: column; gap: .1rem;
  margin: .2rem 0 .4rem .75rem; padding-left: .5rem;
  border-left: 1px solid rgba(255,255,255,.08);
  animation: sublist-reveal .32s cubic-bezier(.22,.9,.3,1.2) both;
  transform-origin: top;
  overflow: hidden;
}
@keyframes sublist-reveal {
  0%   { opacity: 0; transform: translateY(-4px) scaleY(.85); max-height: 0; }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scaleY(1); max-height: 400px; }
}
.nav-sublink {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .6rem; border-radius: 8px;
  color: rgba(255,255,255,.55); font-size: .82rem; cursor: pointer;
  text-decoration: none;
  animation: sublink-in .38s cubic-bezier(.22,.9,.3,1.2) both;
  animation-delay: calc(60ms + var(--i, 0) * 32ms);
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
@keyframes sublink-in {
  0%   { opacity: 0; transform: translateX(-8px); }
  100% { opacity: 1; transform: translateX(0); }
}
.nav-sublink i { font-size: .8rem; width: 14px; opacity: .7; }
.nav-sublink:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.04);
  transform: translateX(2px);
}
.nav-sublink.active {
  color: #fff; background: rgba(73,217,201,.12);
  font-weight: 600;
}
.nav-sublink.active i { color: #49d9c9; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav-sublist, .nav-sublink { animation: none; }
  .nav-link--parent .bi-gear,
  .nav-link__chev { transition: none; }
}

/* ════════════════════════════════════════════════════════════
   Upload flow (airy)
   ════════════════════════════════════════════════════════════ */

/* Hero with right-side metric chips */
.upload-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
}
.upload-hero--airy {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: .35rem 0 1.35rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--color-border);
}
.upload-hero--airy .eyebrow { margin: 0 0 .35rem; }
.upload-hero--airy h1 {
  margin: 0;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 1;
}
.upload-hero--airy .text-muted {
  max-width: 54ch;
  margin-top: .65rem;
  line-height: 1.45;
}
.upload-hero__meta {
  display: flex;
  gap: 0;
}
.airy-metric {
  display: flex; flex-direction: column; gap: .15rem;
  justify-content: flex-end;
  padding: 0 1.15rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  min-width: 110px;
}
/* Only divide between metrics — no floating outer rules on the first/last. */
.airy-metric + .airy-metric { border-left: 1px solid var(--color-border); }
.airy-metric:last-child { padding-right: 0; }

/* app.css (loaded after airy.css) styles `.upload-hero__meta .airy-metric` as
   bordered chips, which fights the airy borderless hero and leaves a stray
   vertical rule beside the first metric. Re-assert the airy look on desktop
   with a higher-specificity selector so it wins without !important. Mobile
   keeps the app.css / mobile.css chip behaviour. */
@media (min-width: 993px) {
  .upload-hero--airy .upload-hero__meta .airy-metric {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 1.15rem;
  }
  .upload-hero--airy .upload-hero__meta .airy-metric + .airy-metric {
    border-left: 1px solid var(--color-border);
  }
  .upload-hero--airy .upload-hero__meta .airy-metric:first-child { padding-left: 0; }
  .upload-hero--airy .upload-hero__meta .airy-metric:last-child { padding-right: 0; }
}
.airy-metric__value { font-weight: 700; font-size: .95rem; letter-spacing: -0.01em; }
.airy-metric__label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 600; }

/* Upload grid: dropzone | sidebar */
.upload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
  gap: 2.5rem;
}
/* The hero's bottom divider already separates the header from the content,
   so suppress the airy-section top rule here to avoid a doubled line. */
.airy-section.upload-grid { border-top: 0; padding-top: 1.25rem; }
.upload-main { display: flex; flex-direction: column; gap: 1rem; }
.upload-aside { display: flex; flex-direction: column; gap: 1rem; }

/* Dropzone — airy, generous */
.airy-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 310px;
  padding: 4.25rem 2rem;
  border: 1px dashed color-mix(in oklch, var(--color-brand-primary) 32%, var(--color-border));
  border-radius: 18px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.airy-dropzone:hover, .airy-dropzone.is-over {
  border-color: var(--color-brand-primary);
  background: color-mix(in oklch, var(--color-brand-primary) 3%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-brand-primary) 20%, transparent);
}
.airy-dropzone__ico {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-brand-primary) 8%, var(--color-surface));
  color: var(--color-brand-primary); font-size: 1.5rem;
  margin-bottom: .4rem;
}
.airy-dropzone.is-over .airy-dropzone__ico { animation: bounce-in .5s ease; }
@keyframes bounce-in { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.airy-dropzone__title { font-size: 1.05rem; font-weight: 500; color: var(--color-text-primary); }
.airy-dropzone__title .mono { font-family: ui-monospace, monospace; font-size: .9rem; color: var(--color-text-secondary); }
.airy-dropzone__hint { font-size: .85rem; color: var(--color-text-secondary); }
.airy-dropzone__lock { font-size: .75rem; color: var(--color-text-muted); margin-top: .4rem; display: inline-flex; align-items: center; gap: .3rem; }

.upload-note { font-size: .8rem; color: var(--color-text-muted); margin: 0; }

.upload-status-strip {
  padding: 1.35rem 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.upload-status-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem;
  margin-bottom: .85rem;
}
.upload-status-strip__head .eyebrow { margin: 0 0 .35rem; }
.upload-status-strip h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 720;
  letter-spacing: -0.035em;
}
.upload-status-strip__head strong {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.upload-status-strip .usage-progress {
  height: 9px;
  border-radius: 999px;
  margin: 0;
}
.upload-status-strip .progress-bar { border-radius: inherit; }
.upload-status-strip__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .65rem;
  color: var(--color-text-muted);
  font-size: .82rem;
}
.upload-cancel {
  margin-top: 1.2rem;
  color: #e11d48 !important;
}
.upload-status-strip__icon {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #10b981;
  background: color-mix(in oklch, #10b981 12%, var(--color-surface));
  font-size: 1.35rem;
  flex: 0 0 auto;
}

/* FAQ row */
.faq-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  cursor: pointer; font: inherit; color: var(--color-text-primary); text-align: left;
}
.faq-row:hover { border-color: color-mix(in oklch, var(--color-brand-primary) 40%, var(--color-border)); }
.faq-row__chev { margin-left: auto; transition: transform .25s ease; }
.faq-row.is-open .faq-row__chev { transform: rotate(180deg); }
.faq-body { padding: .2rem 1rem 0; font-size: .88rem; color: var(--color-text-secondary); line-height: 1.6; animation: sublist-reveal .3s ease; }
.faq-body .mono { font-family: ui-monospace, monospace; background: var(--color-surface-muted); padding: 1px 5px; border-radius: 4px; }

/* Aside notes — typographic blocks */
.airy-note {
  padding: 1.25rem 0 0;
  background: transparent;
  border-top: 1px solid var(--color-border);
  border-radius: 0 !important;
  --_fallback:
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.airy-note .eyebrow { margin: 0 0 .5rem; }
.airy-note__big { font-size: 1.25rem; font-weight: 700; margin: .3rem 0 .2rem; letter-spacing: -0.015em; }
.airy-note__muted { font-size: .8rem; color: var(--color-text-muted); margin: 0; }

.sec-options { display: flex; flex-direction: column; gap: .5rem; }
.sec-opt {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .2rem;
  font-size: .85rem;
  cursor: pointer;
  color: var(--color-text-secondary);
}
.sec-opt input { display: none; }
.sec-opt__dot {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}
.sec-opt.is-sel .sec-opt__dot {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
  box-shadow: inset 0 0 0 3px var(--color-surface);
}
.sec-opt__title { font-weight: 600; color: var(--color-text-primary); }
.sec-opt__sub { color: var(--color-text-muted); }

.btn-upload {
  width: 100%;
  padding: .85rem 1rem !important;
  font-size: .95rem !important;
  justify-content: center;
  background: linear-gradient(90deg, #3b82f6, #49d9c9) !important;
  border: 0 !important;
  box-shadow: 0 6px 18px -6px color-mix(in oklch, var(--color-brand-primary) 60%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-upload:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -6px color-mix(in oklch, var(--color-brand-primary) 70%, transparent); }
.btn-upload:active { transform: translateY(0) scale(.99); }

@media (max-width: 1100px) {
  .upload-hero { grid-template-columns: 1fr; gap: 1rem; }
  .upload-hero-stats { justify-content: flex-start; }
  .upload-hero__meta {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: .85rem 0;
  }
  .airy-metric:first-child { padding-left: 0; }
}

/* Cloud import sources — secondary to the dropzone, side-by-side tiles under
   a quiet section head. The drive cards keep their component markup but get a
   compact, equal-height treatment here so neither reads as the primary CTA. */
.upload-cloud-sources { margin-top: 2.5rem; }
.upload-cloud-sources__head { margin-bottom: 1.35rem; }
.upload-cloud-sources__head h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.upload-cloud-sources__head .text-muted { font-size: .9rem; margin-top: .35rem; max-width: 62ch; }
.upload-cloud-sources__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
.upload-cloud-sources .drive-import-card {
  margin-bottom: 0;
  padding: 1.35rem 1.4rem;
  gap: 1rem;
  height: 100%;
}
.upload-cloud-sources .drive-import-card .provider-connect-card__logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  padding: 7px;
}
.upload-cloud-sources .drive-import-card .provider-connect-card__logo svg { width: 26px; height: 26px; }
.upload-cloud-sources .drive-import-card__body h3 { font-size: 1rem; margin-bottom: .25rem; }
.upload-cloud-sources .drive-import-card__body p { font-size: .85rem; }
.upload-cloud-sources .drive-import-card__action { margin-top: auto; }
.upload-cloud-sources .drive-import-card__privacy {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: .78rem;
  color: var(--color-text-muted);
}
.upload-cloud-sources .provider-connect-card__logo--mailbox i { font-size: 1.15rem; }

@media (max-width: 880px) {
  .upload-hero, .upload-grid { grid-template-columns: 1fr; }
  .upload-cloud-sources__grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   Archive detail (processing / done)
   ════════════════════════════════════════════════════════════ */

.archive-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .25rem; }
.btn-back {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px;
  font: inherit; font-size: .85rem; font-weight: 500; color: var(--color-text-primary);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-back:hover { border-color: color-mix(in oklch, var(--color-brand-primary) 40%, var(--color-border)); transform: translateX(-2px); }

/* spinning indicator in the processing pill */
.spin { display: inline-block; animation: spin 1.2s linear infinite; margin-left: .25rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Archive hero — filename as the title */
.archive-hero {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start;
  padding: .5rem 0 1.5rem;
}
.archive-hero__title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  word-break: break-all;
}
.archive-hero__meta { color: var(--color-text-muted); margin: .4rem 0 0; font-size: .82rem; }
.archive-hero__right { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; min-width: 220px; }
.archive-kv { display: grid; grid-template-columns: auto 1fr; gap: .15rem .75rem; margin: 0; font-size: .85rem; }
.archive-kv > div { display: contents; }
.archive-kv dt { color: var(--color-text-muted); font-size: .78rem; }
.archive-kv dd { margin: 0; font-weight: 600; color: var(--color-text-primary); }
.archive-hero__icons { display: flex; gap: .35rem; }
/* icon-chip / icon-btn — unified in styles.css */

.btn-search-emails {
  background: linear-gradient(90deg, #3b82f6, #49d9c9) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px -6px color-mix(in oklch, var(--color-brand-primary) 60%, transparent);
}

/* Airy stats row (borderless row of three) */
.archive-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 1.5rem 0 !important; }
.airy-stat {
  padding: 0 2rem;
  border-left: 1px solid var(--color-border);
}
.airy-stat:first-child { border-left: 0; padding-left: 0; }
.airy-stat .eyebrow { margin: 0 0 .5rem; }
.airy-stat__value {
  font-size: 2rem; font-weight: 700; letter-spacing: -0.02em;
  margin: 0 0 .35rem; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.airy-stat__value--sm { font-size: 1.35rem; }
.airy-stat__sub { margin: 0; font-size: .8rem; color: var(--color-text-muted); }
.em-dash { color: var(--color-text-muted); font-weight: 400; }

/* Big progress bar block */
.progress-section { padding: 1.75rem 0 !important; }
.big-progress { margin-top: .5rem; }
.big-progress__bar {
  height: 10px; border-radius: 999px; background: var(--color-surface-muted); overflow: hidden;
}
.big-progress__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #3b82f6, #49d9c9);
  border-radius: 999px;
  transition: width .25s ease;
  box-shadow: 0 0 12px -2px color-mix(in oklch, #49d9c9 60%, transparent);
}
.big-progress__meta {
  display: flex; justify-content: space-between; margin-top: .7rem;
  font-size: .82rem; color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.big-progress__pct { font-weight: 700; color: var(--color-text-primary); }

.done-banner {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: color-mix(in oklch, #10b981 6%, var(--color-surface));
  border: 1px solid color-mix(in oklch, #10b981 25%, var(--color-border));
  border-radius: 14px;
  animation: done-in .4s cubic-bezier(.22,.9,.3,1.2);
}
@keyframes done-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.done-banner__ico {
  width: 38px; height: 38px; border-radius: 999px;
  background: #10b981; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  animation: pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Two-up panels (Statistics + Timeline) */
.airy-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.airy-panel {
  padding: 1.25rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.airy-panel__title { margin: 0 0 1rem; font-size: 1.15rem; letter-spacing: -0.01em; }
.airy-rows { display: flex; flex-direction: column; gap: 0; margin: 0; }
.airy-rows > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .65rem 0;
  border-top: 1px solid var(--color-border);
  font-size: .9rem;
}
.airy-rows > div:first-child { border-top: 0; }
.airy-rows dt { color: var(--color-text-secondary); margin: 0; }
.airy-rows dd { margin: 0; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

@media (max-width: 880px) {
  .archive-hero, .archive-stats, .airy-twoup { grid-template-columns: 1fr; }
  .airy-stat { border-left: 0; padding: 0; border-top: 1px solid var(--color-border); padding-top: 1rem; }
  .airy-stat:first-child { border-top: 0; padding-top: 0; }
}

/* ════════════════════════════════════════════════════════════
   Archives list (search-page inspired)
   ════════════════════════════════════════════════════════════ */

.archives-panel { margin-bottom: 1.25rem; }

.archives-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
  padding: .35rem 0 1.35rem;
  border-bottom: 1px solid var(--color-border);
}
.archives-hero__copy { min-width: 0; }
.archives-hero__copy .eyebrow { margin: 0 0 .35rem; }
.archives-hero__copy h1 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.045em;
}
.archives-hero__copy p {
  margin: .65rem 0 0;
  color: var(--color-text-secondary);
  font-size: .92rem;
  line-height: 1.45;
}
.archives-hero__meta {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
}
.archives-hero__meta div {
  min-width: 112px;
  padding: 0 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
}
.archives-hero__meta div + div { border-left: 1px solid var(--color-border); }
.archives-hero__meta span {
  color: var(--color-text-muted);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.archives-hero__meta strong {
  color: var(--color-text-primary);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.archives-hero .btn {
  align-self: end;
  white-space: nowrap;
}

/* Free-tier storage warning banner — persuasive nudge above the hero. Amber,
   non-blocking, dismissible. Never gates actions. */
.storage-warning-banner {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .8rem 1rem;
  margin-bottom: 1.1rem;
  border-radius: var(--radius-input);
  border: 1px solid color-mix(in oklch, var(--color-warning) 40%, transparent);
  background: color-mix(in oklch, var(--color-warning) 12%, var(--color-surface));
}
.storage-warning-banner__icon {
  font-size: 1.25rem;
  color: var(--color-warning);
  flex-shrink: 0;
}
.storage-warning-banner__copy {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .85rem;
  color: var(--color-text-secondary);
  flex: 1 1 auto;
  min-width: 0;
}
.storage-warning-banner__copy strong { color: var(--color-text-primary); font-weight: 650; }
.storage-warning-banner__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.storage-warning-banner__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.storage-warning-banner__dismiss:hover {
  background: color-mix(in oklch, var(--color-warning) 18%, transparent);
  color: var(--color-text-primary);
}

/* Storage usage meter — full-width row beneath the hero stats. Makes the
   used/limit split obvious and offers a path to buy more space. */
.archives-hero__usage { grid-column: 1 / -1; margin-top: 1.1rem; }
.storage-meter { display: flex; flex-direction: column; gap: .5rem; }
.storage-meter__track {
  height: 6px;
  border-radius: 999px;
  background: var(--color-surface-muted);
  overflow: hidden;
}
.storage-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand-primary);
  transition: width .35s cubic-bezier(.32,.72,.3,1), background-color .2s ease;
}
.storage-meter__fill.is-warn { background: var(--color-warning); }
.storage-meter__fill.is-critical { background: var(--color-danger); }
.storage-meter__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--color-text-secondary);
}
.storage-meter__label strong {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.storage-meter__upgrade {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-brand-primary);
  white-space: nowrap;
}
.storage-meter__upgrade:hover { text-decoration: underline; }
.storage-meter__upgrade i { font-size: .9rem; }

.archive-list { display: flex; flex-direction: column; gap: 0; }

.archive-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem .25rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease;
}
.archive-row:hover {
  background: var(--color-surface-muted);
  transform: none;
  box-shadow: none;
  border-bottom-color: var(--color-border);
}

.archive-row__ico {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in oklch, var(--color-brand-primary) 8%, var(--color-surface-muted));
  color: var(--color-brand-primary);
  font-size: 1.25rem; flex-shrink: 0;
}
.archive-row__ico--processing { background: color-mix(in oklch, #3b82f6 12%, var(--color-surface)); color: #3b82f6; animation: ico-pulse 2s ease-in-out infinite; }
.archive-row__ico--warning    { background: color-mix(in oklch, #f59e0b 12%, var(--color-surface)); color: #f59e0b; }
@keyframes ico-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

.archive-row__body { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.archive-row__top {
  display: flex; align-items: baseline; gap: .6rem; min-width: 0;
}
.archive-row__name {
  font-weight: 600; color: var(--color-text-primary); font-size: .98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.archive-row__fmt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .72rem; color: var(--color-text-muted);
  padding: 1px 6px; border-radius: 5px; background: var(--color-surface-muted);
  flex-shrink: 0;
}
.archive-row__snippet {
  font-size: .82rem; color: var(--color-text-secondary);
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
}
.archive-row__snippet strong { color: var(--color-text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.archive-row__snippet .sep { color: var(--color-border); }

.archive-row__error {
  font-size: .8rem; color: var(--color-danger);
  display: flex; gap: .4rem; align-items: flex-start;
}
.archive-row__error i { flex-shrink: 0; margin-top: .1rem; }
/* EVE-3056: a partially indexed archive explains itself in the same row, but it is a
   warning, not a failure — the emails it did index are already searchable. */
.archive-row__error--warning { color: var(--color-warning); }

.archive-row__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: .25rem;
  min-width: 120px;
}
.archive-row__when { font-size: .78rem; color: var(--color-text-muted); }

/* EVE-3761: fixed-slot grid so shared icons align vertically across rows
   regardless of which status/permission-gated actions a row has.
   Slot width = .icon-btn width (36px, webapp.css); Reconnect and Retry are
   mutually exclusive so they share the "recover" slot. */
.archive-row__actions {
  display: grid;
  grid-template-columns: repeat(5, 36px);
  gap: .25rem;
  align-items: center;
  justify-items: end;
}
.archive-row__action--search  { grid-column: 1; }
.archive-row__action--recover { grid-column: 2; }
.archive-row__action--view    { grid-column: 3; }
.archive-row__action--rename  { grid-column: 4; }
.archive-row__action--delete  { grid-column: 5; }
.archive-row .icon-btn.is-spinning i,
.archive-row .icon-chip.is-spinning i { animation: spin .8s linear infinite; }

.inline-confirm {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .5rem .25rem .75rem;
  background: color-mix(in oklch, #e11d48 8%, var(--color-surface));
  border: 1px solid color-mix(in oklch, #e11d48 30%, var(--color-border));
  border-radius: 999px;
  font-size: .8rem; color: #e11d48; font-weight: 600;
  animation: confirm-in .2s ease;
}
@keyframes confirm-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }

.archives-empty {
  padding: 3rem 1rem; text-align: center;
  background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 14px;
  color: var(--color-text-secondary);
}
.archives-empty i { font-size: 2rem; color: var(--color-text-muted); display: block; margin-bottom: .6rem; }

/* ════════════════════════════════════════════════════════════
   Archive detail (redesign — dense, content-rich)
   ════════════════════════════════════════════════════════════ */

/* Icon palette (shared by detail header and archive list rows)
   Uses a stronger mix + always-light text color so tiles stay legible in dark mode */
.ad-icon--teal   { background: color-mix(in oklch, #14b8a6 22%, var(--color-surface)); color: #2dd4bf; }
.ad-icon--blue   { background: color-mix(in oklch, #3b82f6 22%, var(--color-surface)); color: #60a5fa; }
.ad-icon--violet { background: color-mix(in oklch, #8b5cf6 22%, var(--color-surface)); color: #a78bfa; }
.ad-icon--rose   { background: color-mix(in oklch, #f43f5e 22%, var(--color-surface)); color: #fb7185; }
.ad-icon--amber  { background: color-mix(in oklch, #f59e0b 22%, var(--color-surface)); color: #fbbf24; }
.ad-icon--green  { background: color-mix(in oklch, #10b981 22%, var(--color-surface)); color: #34d399; }
.ad-icon--slate  { background: color-mix(in oklch, #64748b 22%, var(--color-surface)); color: #94a3b8; }

/* In light mode keep deeper foreground colors */
:root[data-theme='light'] .ad-icon--teal,
:root:not([data-theme='dark']) .ad-icon--teal   { color: #0d9488; background: color-mix(in oklch, #14b8a6 14%, var(--color-surface)); }
:root[data-theme='light'] .ad-icon--blue,
:root:not([data-theme='dark']) .ad-icon--blue   { color: #2563eb; background: color-mix(in oklch, #3b82f6 14%, var(--color-surface)); }
:root[data-theme='light'] .ad-icon--violet,
:root:not([data-theme='dark']) .ad-icon--violet { color: #7c3aed; background: color-mix(in oklch, #8b5cf6 14%, var(--color-surface)); }
:root[data-theme='light'] .ad-icon--rose,
:root:not([data-theme='dark']) .ad-icon--rose   { color: #e11d48; background: color-mix(in oklch, #f43f5e 14%, var(--color-surface)); }
:root[data-theme='light'] .ad-icon--amber,
:root:not([data-theme='dark']) .ad-icon--amber  { color: #d97706; background: color-mix(in oklch, #f59e0b 14%, var(--color-surface)); }
:root[data-theme='light'] .ad-icon--green,
:root:not([data-theme='dark']) .ad-icon--green  { color: #059669; background: color-mix(in oklch, #10b981 14%, var(--color-surface)); }
:root[data-theme='light'] .ad-icon--slate,
:root:not([data-theme='dark']) .ad-icon--slate  { color: #475569; background: color-mix(in oklch, #64748b 14%, var(--color-surface)); }

/* Dense identity hero */
.ad-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: .25rem 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
}
.ad-hero__identity { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }

.ad-icon-wrap { position: relative; flex-shrink: 0; }
.ad-icon {
  width: 64px; height: 64px; border-radius: 16px;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ad-icon:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 20px -8px rgba(0,0,0,.15); }
.ad-icon__edit {
  position: absolute; right: -4px; bottom: -4px;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--color-text-primary); color: var(--color-surface);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .65rem;
  opacity: 0; transition: opacity .15s ease;
  box-shadow: 0 0 0 2px var(--color-surface);
}
.ad-icon:hover .ad-icon__edit { opacity: 1; }

.ad-hero__text { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ad-name {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.025em;
  margin: 0; line-height: 1.1;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--color-text-primary);
}
.ad-name__edit {
  font-size: .9rem; color: var(--color-text-muted);
  opacity: 0; transition: opacity .15s ease;
}
.ad-name:hover .ad-name__edit { opacity: 1; }
.ad-name-input {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.025em;
  padding: .1rem .35rem; margin: -.1rem -.35rem;
  border: 0; background: var(--color-surface-muted);
  border-radius: 8px;
  font-family: inherit; color: var(--color-text-primary);
  outline: 2px solid var(--color-brand-primary);
  min-width: 280px;
}
.ad-filename {
  font-size: .82rem; color: var(--color-text-muted);
  margin: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  display: inline-flex; align-items: center; gap: .35rem;
}

.ad-hero__facts { display: flex; gap: 2rem; }
.ad-hero__facts > div {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 70px;
  padding-left: 1.5rem;
  border-left: 1px solid var(--color-border);
}
.ad-hero__facts > div:first-child { padding-left: 0; border-left: 0; }
.ad-hero__facts .eyebrow { margin: 0; font-size: .65rem; }
.ad-hero__facts strong {
  font-size: 1.1rem; font-weight: 700; color: var(--color-text-primary);
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}

/* Icon picker popover */
.icon-picker {
  position: absolute; top: calc(100% + .5rem); left: 0;
  width: 280px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: .9rem;
  box-shadow: 0 20px 48px -12px rgba(15,23,42,.18);
  z-index: 50;
  animation: notif-in .2s cubic-bezier(.22,.9,.3,1.2);
  transform-origin: top left;
}
.icon-picker__label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  margin-bottom: .5rem;
}
.icon-picker__label + * { margin-bottom: .75rem; }
.icon-picker__grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem;
}
.icon-picker__item {
  aspect-ratio: 1; border: 0; border-radius: 8px;
  background: transparent; color: var(--color-text-secondary);
  cursor: pointer; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .1s ease, transform .1s ease, color .1s ease;
}
.icon-picker__item:hover { background: var(--color-surface-muted); transform: scale(1.08); color: var(--color-text-primary); }
.icon-picker__item.is-sel { background: color-mix(in oklch, var(--color-brand-primary) 12%, transparent); color: var(--color-brand-primary); }

.icon-picker__colors { display: flex; gap: .4rem; flex-wrap: wrap; }
.icon-picker__color {
  width: 26px; height: 26px; border-radius: 999px;
  border: 2px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .7rem;
  transition: transform .1s ease;
}
.icon-picker__color:hover { transform: scale(1.12); }
.icon-picker__color.is-sel { border-color: var(--color-text-primary); }
.icon-picker__color--teal   { background: #14b8a6; }
.icon-picker__color--blue   { background: #3b82f6; }
.icon-picker__color--violet { background: #8b5cf6; }
.icon-picker__color--rose   { background: #f43f5e; }
.icon-picker__color--amber  { background: #f59e0b; }
.icon-picker__color--green  { background: #10b981; }
.icon-picker__color--slate  { background: #64748b; }

/* Main 2-column grid */
.ad-grid {
  display: grid; grid-template-columns: 1fr 300px; gap: 2.5rem;
  margin-top: 1.25rem;
}
.ad-main, .ad-aside { display: flex; flex-direction: column; gap: 1.5rem; }

.ad-panel {
  padding: 2rem 0 0;
  background: transparent;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  --_fallback:
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.ad-panel__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.ad-panel__title { margin: 0 0 1rem; font-size: 1rem; letter-spacing: -0.01em; font-weight: 600; }
.ad-panel__head .ad-panel__title { margin: 0; }
.ad-panel__hint { font-size: .78rem; color: var(--color-text-muted); }
.ad-panel__sub { margin: .35rem 0 0; color: var(--color-text-secondary); font-size: .88rem; }

.ad-panel--action {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.5rem 0 2rem;
  border-top: 0;
  /* hide the default top rule for the action panel */
  /* background kept transparent — headline + CTA is the design */
  --_gradient:
    color-mix(in oklch, var(--color-brand-primary) 5%, var(--color-surface)),
    color-mix(in oklch, #49d9c9 3%, var(--color-surface)));
  border-color: color-mix(in oklch, var(--color-brand-primary) 30%, var(--color-border));
}
.ad-panel--action .ad-panel__title { margin: 0; font-size: 1.25rem; letter-spacing: -0.015em; }

.ad-command-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-border);
}
.ad-command-strip__copy { min-width: 0; }
.ad-command-strip__copy .eyebrow { margin: 0 0 .35rem; }
.ad-command-strip__copy h2 {
  margin: 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.ad-command-strip__copy p {
  margin: .35rem 0 0;
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: .9rem;
  line-height: 1.45;
}
.ad-command-strip__actions {
  display: flex;
  gap: .45rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ad-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}
.ad-metric {
  min-width: 0;
  padding: 1.35rem 1.25rem 1.35rem 0;
  border-right: 1px solid var(--color-border);
}
.ad-metric + .ad-metric { padding-left: 1.25rem; }
.ad-metric:last-child { border-right: 0; }
.ad-metric span {
  display: block;
  margin-bottom: .45rem;
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.ad-metric strong {
  display: block;
  color: var(--color-text-primary);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.ad-metric small {
  display: block;
  margin-top: .5rem;
  color: var(--color-text-secondary);
  font-size: .78rem;
  line-height: 1.35;
}

.ad-processing-strip {
  padding: 1.2rem 0 1.35rem;
  margin: .25rem 0 1.5rem;
  border-bottom: 1px solid var(--color-border);
}
.ad-processing-strip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: .75rem;
}
.ad-processing-strip__head .eyebrow { margin: 0 0 .25rem; }
.ad-processing-strip__head h3 {
  margin: 0;
  font-size: 1.08rem;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}
.ad-processing-strip__head strong {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.ad-processing-strip .usage-progress {
  height: 8px;
  border-radius: 999px;
  margin: 0;
}
.ad-processing-strip .progress-bar { border-radius: inherit; }
.ad-processing-strip__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .55rem;
  color: var(--color-text-muted);
  font-size: .78rem;
}

.ad-detail-stream {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-top: .75rem;
}
.ad-detail-column {
  min-width: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}
.ad-detail-column h3 {
  margin: 0 0 .85rem;
  color: var(--color-text-primary);
  font-size: .95rem;
  letter-spacing: -0.01em;
}
.ad-detail-column .detail-dl { gap: 0; }
.ad-detail-column .detail-dl div {
  padding: .72rem 0;
  border-bottom: 1px solid var(--color-border);
}
.ad-detail-column .detail-dl div:last-child { border-bottom: 0; }
.ad-detail-column .detail-dl dt {
  font-size: .84rem;
  color: var(--color-text-secondary);
}
.ad-detail-column .detail-dl dd {
  font-size: .86rem;
  font-variant-numeric: tabular-nums;
}

/* Top senders list */
.sender-list { display: flex; flex-direction: column; gap: .5rem; }
.sender-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px auto;
  gap: .75rem; align-items: center;
  padding: .35rem 0;
}
.sender-avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: linear-gradient(120deg, #6366f1, #49d9c9);
  color: #fff; font-size: .72rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: .02em;
}
.sender-info { min-width: 0; }
.sender-name { font-size: .88rem; font-weight: 600; color: var(--color-text-primary); }
.sender-addr { font-size: .75rem; color: var(--color-text-muted); font-family: ui-monospace, monospace; }
.sender-bar {
  height: 4px; border-radius: 999px; background: var(--color-surface-muted); overflow: hidden;
}
.sender-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #3b82f6, #49d9c9);
  border-radius: 999px;
}
.sender-count {
  font-size: .8rem; font-weight: 600; color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  min-width: 48px; text-align: right;
}

/* Activity timeline */
.activity-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.activity-item {
  display: grid; grid-template-columns: 28px 1fr; gap: .75rem; align-items: flex-start;
  padding: .45rem 0; position: relative;
}
.activity-item::before {
  content: ''; position: absolute; left: 13px; top: 30px; bottom: -8px;
  width: 1px; background: var(--color-border);
}
.activity-item:last-child::before { display: none; }
.activity-dot {
  width: 28px; height: 28px; border-radius: 999px;
  background: color-mix(in oklch, var(--color-brand-primary) 10%, var(--color-surface));
  color: var(--color-brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; z-index: 1; position: relative;
}
.activity-body { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-height: 28px; }
.activity-label { font-size: .88rem; color: var(--color-text-primary); font-weight: 500; }
.activity-time { font-size: .76rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Quick actions */
.quick-actions { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.qa {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .75rem; background: transparent; border: 0; border-radius: 8px;
  font: inherit; font-size: .88rem; color: var(--color-text-primary);
  cursor: pointer; text-align: left;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.qa i { color: var(--color-text-muted); font-size: .95rem; width: 18px; }
.qa:hover { background: var(--color-surface-muted); transform: translateX(2px); }
.qa:hover i { color: var(--color-brand-primary); }
.qa.danger:hover { background: color-mix(in oklch, #e11d48 8%, transparent); color: #e11d48; }
.qa.danger:hover i { color: #e11d48; }
.qa__end { margin-left: auto; font-size: .78rem; color: var(--color-text-muted); opacity: .7; transition: opacity .12s ease, color .12s ease; }
.qa:hover .qa__end { opacity: 1; }
.qa__tag {
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--color-surface-muted);
  font-size: .7rem; font-weight: 600;
  color: var(--color-text-secondary);
  margin-left: auto;
}
.qa:disabled { opacity: .6; cursor: not-allowed; }
.qa:disabled:hover { background: transparent; transform: none; }

/* ─ Modal ─ */
/* `.home-wrapper` keeps the page-fade animation's final transform because the
   animation uses `forwards`. A transformed ancestor traps fixed overlays inside
   the page column, so remove that containing block whenever a modal is open. */
.home-wrapper:has(.modal-scrim),
.home-wrapper:has(.first-search-overlay) {
  animation: none !important;
  transform: none !important;
}

.modal-scrim {
  position: fixed; inset: 0; z-index: 1060;
  background: color-mix(in oklch, var(--color-text-primary) 40%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  animation: modal-fade .15s ease-out;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
/* IMPORTANT: explicit `display: block !important` here is required because
   Bootstrap's `.modal { display: none }` (loaded earlier) wins by source
   order otherwise, and our help/feedback/changelog modals reuse this class.
   z-index also bumped above Bootstrap's modal stack (1055/1060) so we
   layer above any stray Bootstrap dialogs and the cookie banner. */
.modal {
  display: block !important;
  width: min(520px, 100%); max-height: 90vh; overflow: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15,23,42,.35);
  animation: modal-pop .2s cubic-bezier(.22,.9,.3,1.2);
  /* Reset Bootstrap's .modal padding/positioning so our flex-centered scrim
     works as the design intended. */
  position: static;
  inset: auto;
  height: auto;
  margin: 0;
  pointer-events: auto;
}
/* webapp.css's `.modal { padding: 1.6rem 1.7rem }` is load-bearing for the
   legacy `.modal-backdrop > .modal` dialogs, but Airy dialogs already get
   their padding from `.modal__head`/`.modal__body` — undo the double dose
   here rather than blanket-resetting `.modal` padding. */
.modal-scrim > .modal {
  padding: 0;
}
.modal--wide { width: min(720px, 100%); }
.modal--danger .modal__head h3 { color: #e11d48; }
@keyframes modal-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--color-border);
}
.modal__head h3 { margin: 0; font-size: 1.05rem; letter-spacing: -0.01em; font-weight: 600; }
.modal__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.modal__close:hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  transform: translateY(-1px);
}
.modal__body { padding: 1.25rem 1.35rem 1.35rem; }
.modal__lede { margin: 0 0 1rem; color: var(--color-text-secondary); font-size: .92rem; line-height: 1.5; }
.archive-detail-modal__field {
  display: grid;
  gap: .45rem;
}
.archive-detail-modal__field span {
  color: var(--color-text-primary);
  font-size: .9rem;
  font-weight: 650;
}
.archive-detail-modal__field .form-control {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: 10px;
}
.archive-detail-modal__field .form-control:focus {
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-brand-primary) 12%, transparent);
}
.modal__options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.modal__option {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid var(--color-border);
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.modal__option:hover { background: var(--color-surface-muted); }
.modal__option:has(input:checked) {
  border-color: var(--color-brand-primary);
  background: color-mix(in oklch, var(--color-brand-primary) 6%, transparent);
}
.modal__option input { margin-top: .2rem; accent-color: var(--color-brand-primary); }
.modal__option-title {
  font-weight: 600; color: var(--color-text-primary); font-size: .92rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.modal__option-title .tag {
  font-size: .65rem; padding: .1rem .45rem; border-radius: 999px;
  background: color-mix(in oklch, var(--color-brand-primary) 14%, transparent);
  color: var(--color-brand-primary); font-weight: 700; letter-spacing: .02em;
}
.modal__option-sub { font-size: .8rem; color: var(--color-text-muted); margin-top: .15rem; }
.modal__confirm {
  display: block; margin: .5rem 0 1rem;
  font-size: .85rem; color: var(--color-text-secondary);
}
.modal__confirm code {
  background: var(--color-surface-muted); padding: .1rem .4rem;
  border-radius: 4px; font-size: .82rem; color: var(--color-text-primary);
}
.modal__confirm input {
  display: block; width: 100%; margin-top: .4rem;
  padding: .55rem .75rem; border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
}
.modal__confirm input:focus { outline: 2px solid var(--color-brand-primary); border-color: transparent; }
/* Bootstrap's `.btn` is `white-space: nowrap`, so a footer row that does not
   fit can neither shrink nor break — and `justify-content: flex-end` then puts
   the overflow off the LEFT edge of the screen rather than the right. That is
   EVE-3485: "Cancel" rendered at `left: -18px` on a 360px viewport in every
   dialog using this footer, so only "...cel" was visible. `flex-wrap` gives the
   overflow somewhere to go; the phone breakpoint below stacks instead. */
.modal__footer {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem;
  margin-top: .5rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.modal__footer > * { white-space: normal; }
@media (max-width: 480px) {
  /* Full-width stacked actions, so a wrapped button never reads as a stray one.
     DOM order is kept (dismiss first, primary last) so the visual order still
     matches focus order, and the primary action stays the furthest one along
     the reading direction exactly as it is on desktop. */
  .modal__footer { flex-direction: column; }
}

/* ─ Toast ─ */
.ad-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  z-index: 300;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.1rem; border-radius: 999px;
  background: var(--color-text-primary); color: var(--color-surface);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.3);
  font-size: .88rem; font-weight: 500;
  animation: toast-in .25s cubic-bezier(.22,.9,.3,1.2);
}
.ad-toast i { font-size: 1rem; }
.ad-toast--success i { color: #10b981; }
.ad-toast--danger  i { color: #f43f5e; }
.ad-toast--info    i { color: #49d9c9; }
@keyframes toast-in { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }

/* ─ Danger button ─ */
.btn-danger {
  background: #e11d48; color: #fff; border: 1px solid #e11d48;
}
.btn-danger:hover { background: #be123c; border-color: #be123c; }

/* ─ Audit log ─ */
.audit-log { list-style: none; padding: 0; margin: 0 0 .5rem; display: flex; flex-direction: column; gap: .15rem; }
.audit-row {
  display: grid; grid-template-columns: 28px 1fr auto; gap: .75rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px dashed var(--color-border);
}
.audit-row:last-child { border-bottom: 0; }
.audit-label { font-size: .88rem; color: var(--color-text-primary); font-weight: 500; }
.audit-sub { font-size: .72rem; color: var(--color-text-muted); }
.audit-time { font-size: .78rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Update archive-row filename styling */
.archive-row__filename { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .78rem; color: var(--color-text-muted); }

@media (max-width: 1080px) {
  .ad-grid { grid-template-columns: 1fr; }
  .ad-hero { grid-template-columns: 1fr; }
  .ad-hero__facts { justify-content: flex-start; }
  .archives-hero { grid-template-columns: 1fr; align-items: start; }
  .archives-hero__meta {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: .85rem 0;
  }
  .archives-hero__meta div:first-child { padding-left: 0; }
  .archives-hero .btn { justify-self: start; }
  .ad-command-strip { align-items: flex-start; flex-direction: column; }
  .ad-command-strip__actions { justify-content: flex-start; }
  .ad-detail-stream { grid-template-columns: 1fr; gap: 1.5rem; }
  .picker--folder { min-width: 0; max-width: none; width: min(92vw, 380px); }
}

@media (max-width: 720px) {
  .upload-hero__meta { flex-direction: column; gap: .75rem; }
  .airy-metric,
  .airy-metric:first-child {
    min-width: 0;
    padding: 0;
    border-left: 0;
  }
  .airy-dropzone { min-height: 240px; padding: 3rem 1.25rem; }
  .upload-status-strip__head,
  .upload-status-strip__meta { flex-direction: column; align-items: flex-start; }
  .archives-hero__meta { flex-direction: column; gap: .75rem; }
  .archives-hero__meta div,
  .archives-hero__meta div:first-child {
    min-width: 0;
    padding: 0;
    border-left: 0;
  }
  .settings-notification-list { grid-template-columns: 1fr; }
  .ad-metrics-strip { grid-template-columns: 1fr; }
  .ad-metric,
  .ad-metric + .ad-metric {
    padding: 1rem 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }
  .ad-metric:last-child { border-bottom: 0; }
  .ad-processing-strip__meta { flex-direction: column; gap: .25rem; }
}

/* ════════════════════════════════════════════════════════════
   Notifications — bell dropdown + toasts
   ════════════════════════════════════════════════════════════ */

.notif-wrap { position: relative; display: inline-flex; }
.icon-btn { position: relative; }
.icon-btn.has-unread i { color: var(--color-brand-primary); }
.notif-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: #e11d48; color: #fff;
  font-size: .62rem; font-weight: 700;
  box-shadow: 0 0 0 2px var(--color-surface);
  animation: badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes badge-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }

.notif-panel {
  position: absolute; top: calc(100% + .5rem); right: 0;
  width: 400px; max-width: calc(100vw - 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 48px -12px rgba(15,23,42,.18), 0 4px 12px -4px rgba(15,23,42,.08);
  z-index: 100;
  overflow: hidden;
  animation: notif-in .2s cubic-bezier(.22,.9,.3,1.2);
  transform-origin: top right;
}
@keyframes notif-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.notif-panel__head {
  padding: 1rem 1.1rem .75rem;
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--color-border);
}
.notif-panel__mark {
  padding: .35rem .6rem; border: 0; background: transparent;
  color: var(--color-brand-primary); font: inherit; font-size: .8rem; font-weight: 600;
  border-radius: 6px; cursor: pointer;
}
.notif-panel__mark:hover { background: color-mix(in oklch, var(--color-brand-primary) 8%, transparent); }

.notif-panel__list { max-height: 420px; overflow-y: auto; }
.notif-group-label {
  padding: .55rem 1.1rem .3rem;
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600;
  position: sticky; top: 0; background: var(--color-surface); z-index: 1;
}

.notif-item {
  display: grid; grid-template-columns: 32px 1fr; gap: .7rem;
  padding: .75rem 1.1rem;
  cursor: pointer;
  border-top: 1px solid color-mix(in oklch, var(--color-border) 60%, transparent);
  transition: background .12s ease;
}
.notif-item:first-of-type { border-top: 0; }
.notif-item:hover { background: var(--color-surface-muted); }
.notif-item.is-unread { background: color-mix(in oklch, var(--color-brand-primary) 3%, var(--color-surface)); }
.notif-item.is-unread:hover { background: color-mix(in oklch, var(--color-brand-primary) 6%, var(--color-surface)); }

.notif-item__ico {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.notif-item__ico--success { background: color-mix(in oklch, #10b981 14%, var(--color-surface)); color: #10b981; }
.notif-item__ico--info    { background: color-mix(in oklch, #3b82f6 14%, var(--color-surface)); color: #3b82f6; }
.notif-item__ico--warning { background: color-mix(in oklch, #f59e0b 14%, var(--color-surface)); color: #f59e0b; }
.notif-item__ico--danger  { background: color-mix(in oklch, #e11d48 14%, var(--color-surface)); color: #e11d48; }

.notif-item__title {
  display: flex; align-items: center; gap: .4rem;
  font-weight: 600; font-size: .9rem; color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.notif-item__dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--color-brand-primary);
}
.notif-item__desc {
  font-size: .82rem; color: var(--color-text-secondary);
  line-height: 1.45; margin-top: .15rem;
}
.notif-item__time {
  font-size: .72rem; color: var(--color-text-muted); margin-top: .3rem;
  font-variant-numeric: tabular-nums;
}

.notif-panel__foot {
  border-top: 1px solid var(--color-border);
  padding: .6rem 1.1rem;
  text-align: center;
}
.notif-panel__settings {
  font-size: .82rem; color: var(--color-brand-primary); font-weight: 600;
  cursor: pointer;
}
.notif-panel__settings:hover { text-decoration: underline; }

/* ─── Toasts ─────────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
  z-index: 1000; pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: grid; grid-template-columns: 36px 1fr auto; gap: .75rem; align-items: flex-start;
  width: 360px;
  padding: .85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow: 0 20px 40px -12px rgba(15,23,42,.2), 0 4px 10px -4px rgba(15,23,42,.1);
  position: relative; overflow: hidden;
  animation: toast-slide .35s cubic-bezier(.22,.9,.3,1.2), toast-exit 0 linear 5.4s forwards;
}
@keyframes toast-slide {
  from { opacity: 0; transform: translateX(120%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toast-exit {
  to { opacity: 0; transform: translateX(12%); }
}

.toast__ico {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.toast__ico--success { background: color-mix(in oklch, #10b981 14%, var(--color-surface)); color: #10b981; }
.toast__ico--info    { background: color-mix(in oklch, #3b82f6 14%, var(--color-surface)); color: #3b82f6; }
.toast__ico--warning { background: color-mix(in oklch, #f59e0b 14%, var(--color-surface)); color: #f59e0b; }
.toast__ico--danger  { background: color-mix(in oklch, #e11d48 14%, var(--color-surface)); color: #e11d48; }

.toast__title { font-weight: 600; color: var(--color-text-primary); font-size: .9rem; letter-spacing: -0.005em; }
.toast__desc  { font-size: .82rem; color: var(--color-text-secondary); line-height: 1.4; margin-top: .15rem; }
.toast__close {
  width: 26px; height: 26px; border-radius: 8px;
  background: transparent; border: 0; color: var(--color-text-muted);
  cursor: pointer; font-size: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.toast__close:hover { background: var(--color-surface-muted); color: var(--color-text-primary); }

.toast__progress {
  position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; background: color-mix(in oklch, var(--color-brand-primary) 40%, transparent);
  transform-origin: left;
  animation: toast-progress 5.4s linear forwards;
}
.toast--success .toast__progress { background: color-mix(in oklch, #10b981 60%, transparent); }
.toast--warning .toast__progress { background: color-mix(in oklch, #f59e0b 60%, transparent); }
.toast--info    .toast__progress { background: color-mix(in oklch, #3b82f6 60%, transparent); }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ════════════════════════════════════════════════════════════
   Mobile patterns — reusable primitives
   Shared across webapp & adminapp. All scoped to ≤768px or to
   .is-mobile / [data-sheet-open] toggles so they never bleed into
   desktop layouts.
   ════════════════════════════════════════════════════════════ */

/* ─── Bottom sheet ──────────────────────────────────────────
   Full-width sheet that rises from the bottom, with a drag-handle
   hint and matching body-level backdrop. Usage:

     <div class="bottom-sheet" data-open>
       <header class="bottom-sheet__head">…</header>
       <div   class="bottom-sheet__body">…</div>
     </div>

   And somewhere global:
     body:has(.bottom-sheet[data-open])::before { … backdrop … }

   The mobile webapp wires this through class overrides on
   .notif-panel and .help-menu (their markup predates this primitive),
   but new code should use .bottom-sheet directly.
   ──────────────────────────────────────────────────────────── */
.bottom-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-height: 82vh;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  box-shadow: var(--sheet-shadow);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 4px);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sheet-up var(--duration-sheet) var(--ease-soft-out);
}
/* Drag-handle hint — visual only, no gesture yet */
.bottom-sheet::before {
  content: "";
  display: block;
  width: 42px; height: 4px;
  border-radius: 2px;
  background: var(--sheet-handle-color);
  margin: 8px auto 0;
  flex: 0 0 auto;
}
.bottom-sheet__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Global backdrop — rendered via body::before so tap-to-close works
   (the backdrop is outside any panel's ref, so existing outside-click
   handlers fire and dismiss the sheet).

   Scoped to mobile because:
     - .bottom-sheet is a mobile-only primitive (slides up from the bottom).
     - .notif-panel / .help-menu only morph into bottom-sheet shape on
       mobile (see mobile.css). On desktop they're absolute-positioned
       dropdowns and a fullscreen scrim would cover them and steal clicks.
   Desktop dismiss is handled by re-clicking the icon button (toggle). */
@media (max-width: 768px) {
  body:has(.bottom-sheet[data-open])::before,
  body:has(.notif-panel)::before,
  body:has(.help-menu)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--backdrop-color);
    z-index: 1049;
    pointer-events: none;
    animation: sheet-fade-in 200ms ease-out;
  }
}
@keyframes sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
@keyframes sheet-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Pill sub-nav (horizontal scroll rail) ─────────────────
   A horizontally-scrollable pill bar. Used anywhere a tab group
   exceeds the mobile viewport — Settings sub-sections today.
   Fade-mask hints at overflow.

     <nav class="pill-subnav">
       <button class="pill-subnav__pill is-active">…</button>
       <button class="pill-subnav__pill">…</button>
     </nav>
   ──────────────────────────────────────────────────────────── */
.pill-subnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 12px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.pill-subnav::-webkit-scrollbar { display: none; }

.pill-subnav__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: 500 0.82rem/1 var(--font-family-base);
  cursor: pointer;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
}
.pill-subnav__pill i { font-size: .95rem; line-height: 1; }
.pill-subnav__pill:active { transform: scale(.96); }
.pill-subnav__pill.is-active {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
  color: #fff;
}
.pill-subnav__pill:not(.is-active):hover {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}
[data-theme="dark"] .pill-subnav__pill {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ─── Animated tab-indicator (D+A: strip + glow) ────────────
   Utility for any horizontal tab bar that wants a sliding indicator.
   Parent sets CSS custom props --ind-x and --ind-w from JS (measure
   the active tab's rect on change). The indicator rides on top,
   the glow trails behind at a softer easing.

     <div class="tab-indicator" style="--ind-x:120px;--ind-w:40px">
       <span class="tab-indicator__glow"></span>
       <span class="tab-indicator__strip"></span>
     </div>

   Add .is-ready after the first measurement so the initial paint
   doesn't animate from (0, 0).
   ──────────────────────────────────────────────────────────── */
.tab-indicator__strip {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: var(--ind-w, 0);
  transform: translateX(var(--ind-x, 0));
  background: var(--color-brand-primary);
  border-radius: 0 0 3px 3px;
  pointer-events: none;
}
.tab-indicator__glow {
  position: absolute;
  top: -6px; left: 0;
  height: 42px;
  width: var(--ind-w, 0);
  transform: translateX(var(--ind-x, 0));
  background: radial-gradient(
    ellipse at 50% 0%,
    color-mix(in oklch, var(--color-brand-primary) 55%, transparent) 0%,
    color-mix(in oklch, var(--color-brand-primary) 20%, transparent) 40%,
    transparent 75%
  );
  filter: blur(10px);
  pointer-events: none;
}
.is-ready .tab-indicator__strip {
  transition:
    transform var(--duration-tab-indicator) var(--ease-spring),
    width var(--duration-tab-indicator) var(--ease-spring);
}
.is-ready .tab-indicator__glow {
  transition:
    transform 500ms var(--ease-soft-out),
    width 500ms var(--ease-soft-out);
}

/* ─── Sticky mobile viewer bar ──────────────────────────────
   The header above a detail view on mobile: Back pill · counter ·
   prev/next arrows. Frosted backdrop so it stays legible over
   scrolling content. Used by email viewer, could be used by any
   list→detail flow.

     <header class="viewer-mobilebar">
       <button class="viewer-mobilebar__back">…</button>
       <div    class="viewer-mobilebar__counter">3 of 42</div>
       <div    class="viewer-mobilebar__nav">
         <button class="viewer-mobilebar__navbtn">↑</button>
         <button class="viewer-mobilebar__navbtn">↓</button>
       </div>
     </header>
   ──────────────────────────────────────────────────────────── */
.viewer-mobilebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.viewer-mobilebar__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 8px;
  background: color-mix(in oklch, var(--color-brand-primary) 10%, transparent);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-brand-primary);
  font: 600 .88rem/1 var(--font-family-base);
  cursor: pointer;
  min-height: 36px;
  transition: background .15s ease, transform .1s ease;
}
.viewer-mobilebar__back i { font-size: 1.05rem; }
.viewer-mobilebar__back:hover { background: color-mix(in oklch, var(--color-brand-primary) 16%, transparent); }
.viewer-mobilebar__back:active { transform: scale(.96); }

.viewer-mobilebar__counter {
  font: 500 .78rem/1 var(--font-family-base);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.viewer-mobilebar__counter span {
  color: var(--color-text-muted);
  font-weight: 400;
  margin: 0 2px;
}

.viewer-mobilebar__nav {
  display: inline-flex;
  background: var(--color-surface-muted);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
}
.viewer-mobilebar__navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.viewer-mobilebar__navbtn:hover:not(:disabled) {
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.viewer-mobilebar__navbtn:active:not(:disabled) { transform: scale(.9); }
.viewer-mobilebar__navbtn:disabled {
  color: var(--color-text-muted);
  opacity: .4;
  cursor: not-allowed;
}
.viewer-mobilebar__navbtn i { font-size: 1.05rem; }

/* color-mix fallback for older Safari */
@supports not (background: color-mix(in oklch, red, blue)) {
  .viewer-mobilebar { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(15, 23, 42, 0.08); }
  [data-theme="dark"] .viewer-mobilebar { background: rgba(15, 23, 42, 0.92); }
  .viewer-mobilebar__back { background: rgba(37, 99, 235, 0.10); }
  .viewer-mobilebar__back:hover { background: rgba(37, 99, 235, 0.16); }
  .tab-indicator__glow {
    background: radial-gradient(
      ellipse at 50% 0%,
      rgba(37, 99, 235, 0.5) 0%,
      rgba(37, 99, 235, 0.2) 40%,
      transparent 75%
    );
  }
}

/* ============ Airy assistant (/assistant) — EVE-3422 ============
   The Airy redesign only ever targeted Search, so `/assistant` kept the
   pre-Airy bordered-panel look defined in `assistant.css`. These rules
   de-chrome it the same way `.search-panel` / `.email-list` were done
   above: outer panels lose border + radius + shadow, nested sub-panels
   become hairline-separated sections, spacing carries the structure.

   No `!important` needed — `App.razor` loads `assistant.css` BEFORE
   `airy.css`, so equal-specificity rules here win on source order.
   `mobile.css` still loads last and has no `.assistant-*` rules, so its
   @media block continues to win where it does have something to say. */

/* Page column — no measure of its own (EVE-3466). This used to be
   `max-width: 1200px`, justified as matching `.home-wrapper` on /emails; no
   such rule exists. Paired with `margin: 0 auto` in assistant.css it inset the
   whole page from `.main`'s left content edge, which every other page sits
   flush against. `.main` already caps the measure at 1280px for all pages. */
.assistant-page__head { margin-bottom: 1.5rem; }
.assistant-page__head h1 { font-size: 1.75rem; letter-spacing: -0.02em; }

/* Outer surfaces — the three that were full cards (sidebar, main, gate) plus
   the loading skeletons. Flattened onto the page canvas. */
.assistant-sidebar,
.assistant-main,
.assistant-gate,
.assistant-skeleton-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The sidebar/main split is drawn by ONE vertical hairline instead of two
   facing card borders, so the grid gap goes to 0 and the breathing room
   moves inside as padding either side of the rule. */
.assistant-shell,
.assistant-skeleton-shell { gap: 0; }
.assistant-sidebar { border-right: 1px solid var(--color-border); padding-right: 1.5rem; }
.assistant-main { padding-left: 2rem; }
.assistant-skeleton-panel { padding: 0.25rem 0 0; }
.assistant-skeleton-panel:first-child { border-right: 1px solid var(--color-border); padding-right: 1.5rem; }
.assistant-skeleton-panel + .assistant-skeleton-panel { padding-left: 2rem; }

/* Column headers keep their hairline (that IS the airy separator) but lose
   the card's inner padding. The `min-height` has to clear the tallest thing
   either header holds — the `.assistant-new-btn` pill (~2.15rem) PLUS the
   0.85rem padding-bottom, since min-height is border-box here — or the
   sidebar's rule lands ~10px below main's and the split reads crooked. */
.assistant-sidebar__header,
.assistant-main__header {
  min-height: 3.1rem;
  align-items: center;
  padding: 0 0.65rem 0.85rem;
}
.assistant-main__header { padding-left: 0; }

/* Conversation list — rows sit flush under the header, active state is the
   same left accent stripe `.email-card.active` uses on /emails. */
.assistant-conversation-list { padding: 0.75rem 0; gap: 0.1rem; }
.assistant-conversation-row {
  border: 0;
  border-radius: 10px;
  padding: 0.6rem 0.65rem;
}
.assistant-conversation-row.is-active {
  background: color-mix(in srgb, var(--color-brand-primary) 6%, transparent);
  box-shadow: inset 3px 0 0 var(--color-brand-primary);
}
:root[data-theme='dark'] .assistant-conversation-row.is-active {
  background: color-mix(in srgb, var(--color-brand-primary) 14%, transparent);
}
.assistant-sidebar-empty { padding: 1.75rem 0; }

/* Message stream — no card, so no inner gutter to pay for. */
.assistant-messages { padding: 1.5rem 0.25rem; }

/* Sources block — was a bordered card nested inside the answer bubble.
   Now a hairline-topped section of the answer. The dark-mode rule at
   `assistant.css` re-adds a background at higher specificity, so it is
   matched and neutralised here rather than left to lose. */
.assistant-sources {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  padding: 0.6rem 0 0;
  margin-top: 0.65rem;
}
:root[data-theme='dark'] .assistant-sources { background: transparent; }

/* Tool trail — bare text row, matching the bare `.chip` treatment the airy
   search filters got, instead of a bordered pill per tool call. */
.assistant-tool-chip {
  background: transparent;
  border: 0;
  padding: 0.15rem 0;
}
:root[data-theme='dark'] .assistant-tool-chip { background: transparent; }

/* Suggestion chips and the retry button keep their outline (they are
   controls, and airy keeps outlines on controls like `.attachment-pill`)
   but drop the filled surface that made them read as little cards. */
.assistant-suggestion-chip,
.assistant-message__retry { background: transparent; }

/* Composer — deliberately NOT stripped. Airy keeps chrome on `.search-bar`
   (line 159) because a text input needs a visible affordance; the composer
   is the assistant's search bar, so it gets the same treatment: surface
   fill, hairline outline, and the same focus ring. */
.assistant-composer { padding: 1rem 0 0.25rem; }
.assistant-composer__form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 0.5rem 0.6rem 0.5rem 1.1rem;
}
.assistant-composer__form:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}
.assistant-composer__foot { padding: 0; }

/* Mobile: the sidebar and main swap via `display:none` below 900px, so only
   one column is ever on screen — the vertical rule and the facing padding
   would just be a stray line and a stray indent. */
@media (max-width: 900px) {
  .assistant-sidebar,
  .assistant-skeleton-panel:first-child { border-right: 0; padding-right: 0; }
  .assistant-main,
  .assistant-skeleton-panel + .assistant-skeleton-panel { padding-left: 0; }
  .assistant-sidebar__header { padding-left: 0; }
  .assistant-messages { padding: 1.25rem 0; }
}