/* ---------------------------------------------------------------------------
   ahoj — base stylesheet
   Typography: Newsreader (display/serif), Inter (UI), JetBrains Mono (code)
   Palette: warm cream/charcoal, hey/campfire-inspired, auto light/dark.
--------------------------------------------------------------------------- */

/* Color tokens (--bg, --surface, --text, --accent, etc.) live in
   priv/static/themes/<theme>.css and are loaded by the layout BEFORE
   this file. Themes may provide --theme-font-* aliases; spacing, radii,
   and measurements stay here because they're theme-independent. */
:root {
  --font-serif: var(--theme-font-serif, "Newsreader", Georgia, "Times New Roman", serif);
  --font-sans:  var(--theme-font-sans, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --font-mono:  var(--theme-font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  --app-topbar-clearance: 4.9rem;
}

[x-cloak] {
  display: none !important;
}

[hidden] {
  display: none !important;
}

/* Notes, quick-note panels, and contact sticky-notes now get their warm
   sticky-note palette from the [--note-*] tokens in the theme file, so
   the old @media (prefers-color-scheme: dark) per-component overrides
   have been retired. If a future theme wants black-on-grey instead of
   yellow-on-cream for notes, swap the tokens — this file needs no edit.
*/

/* ---------------------------------------------------------------------------
   Reset + base
--------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  color: var(--text);
}

h1 { font-size: 2rem;    letter-spacing: -0.02em; }
h2 { font-size: 1.5rem;  letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 600; }

p  { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

small { color: var(--text-muted); font-size: 0.875rem; }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.15em;
  transition: color 120ms ease;
}
a:hover { color: var(--accent-strong); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
  box-shadow: var(--native-focus-shadow, none);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-5) 0;
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
pre {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.5;
}

time { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   Shared component palettes

   The app has several "same shape, different context" families of
   elements (primary CTAs scattered across compose/screener/bubble-up,
   circular initials avatars in four different views, ghost dismiss
   buttons in modals and toolbars, …). Rather than let each per-feature
   class carry its own full set of declarations, the shared colour and
   shape rules live in these multi-selector blocks. Per-feature rules
   below keep only what's genuinely different (sizing, positioning,
   font-size tweaks).

   A new feature that wants one of these looks adds its class here and
   gets the styling for free — no duplication to drift out of sync.
--------------------------------------------------------------------------- */

/* Floating surfaces (menus, popovers, dropdowns). Alpine panels and
   toolbar overlays share one visual language so the theme swap
   cascades without per-component edits. Position/size stays on the
   per-feature rule. */
.ahoj-menu,
.account-menu,
.app-topbar__menu,
.bubble-up-menu__panel {
  /* Two-layer stack mirroring NSVisualEffectView: the top layer is a
     near-transparent accent tint, the bottom layer is the opaque-enough
     surface that keeps text legible. The backdrop-filter blurs and
     re-saturates whatever is *behind* the element, so the visual order
     when the macOS theme is active is:
       blurred window content → surface tint → accent tint → menu text. */
  background:
    linear-gradient(
      var(--native-overlay-tint, transparent),
      var(--native-overlay-tint, transparent)
    ),
    var(--native-overlay-bg, var(--overlay-bg));
  color: var(--text);
  border: 1px solid var(--overlay-border);
  box-shadow: var(--shadow-lg);
  backdrop-filter: var(--native-overlay-filter, none);
}

button,
select,
input,
textarea {
  transition: background-color var(--native-control-duration, 120ms) ease,
    border-color var(--native-control-duration, 120ms) ease,
    box-shadow var(--native-control-duration, 120ms) ease,
    color var(--native-control-duration, 120ms) ease,
    transform var(--native-control-duration, 120ms) ease,
    filter var(--native-control-duration, 120ms) ease;
}

button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active {
  transform: var(--native-button-active-transform, translateY(0));
  filter: var(--native-button-active-filter, none);
}

/* Primary, call-to-action buttons — filled accent on any page. The
   note popover's submit button gets the same palette via
   [.note > [popover] footer > button[type="submit"]]. */
.bubble-up__save,
.mailbox > nav > a,
.mailbox-toolbar__button--primary,
.note > [popover] footer > button[type="submit"],
.screener-button--primary {
  background: var(--native-primary-bg, var(--accent));
  color: var(--on-accent);
  border-color: transparent;
  box-shadow: var(--native-button-shadow, none);
}

.bubble-up__save:hover,
.mailbox > nav > a:hover,
.mailbox-toolbar__button--primary:hover,
.note > [popover] footer > button[type="submit"]:hover,
.screener-button--primary:hover {
  background: var(--native-primary-hover-bg, var(--accent-strong));
  color: var(--on-accent);
  border-color: transparent;
  text-decoration: none;
  box-shadow: var(--native-button-hover-shadow, var(--native-button-shadow, none));
}

/* Ghost / secondary buttons — quiet surface with a subtle border.
   The note popover's Cancel button is the only [popovertarget] inside
   the footer, so the attribute selector unambiguously picks it up. */
.mailbox-toolbar__dismiss,
.screener-button--ghost,
.screener-dialog__close,
.note > [popover] footer > button[popovertarget] {
  background: var(--native-secondary-bg, var(--surface));
  color: var(--text);
  border: 1px solid var(--border-soft);
  box-shadow: var(--native-control-shadow, none);
}

.mailbox-toolbar__dismiss:hover,
.screener-button--ghost:hover,
.screener-dialog__close:hover,
.note > [popover] footer > button[popovertarget]:hover {
  background: var(--native-secondary-hover-bg, var(--surface-strong));
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--native-control-hover-shadow, var(--native-control-shadow, none));
}

/* Danger buttons — destructive confirm. The note delete button has
   [hx-post] but no [popovertarget] / [type="submit"], which is the
   distinguishing attribute in the footer. */
.note > [popover] footer > button[hx-post] {
  background: var(--danger-bg);
  color: var(--danger-text);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
}

.note > [popover] footer > button[hx-post]:hover {
  background: var(--danger);
  color: var(--on-accent);
  border-color: var(--danger);
}

/* Circular initials avatars. Every avatar in the app is a filled
   circle with two-letter initials; per-view classes only tweak the
   diameter and font size. */
.app-topbar__avatar,
.contacts-detail__avatar,
.mailbox-card__avatar,
.message article > header > span[data-avatar],
.contacts article > a > span,
.contacts article > a > img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-alt);
  color: var(--on-accent);
  font-weight: 800;
  overflow: hidden;
}

/* ---------------------------------------------------------------------------
   App shell: top navigation + content
--------------------------------------------------------------------------- */

body {
  min-height: 100vh;
  min-height: 100dvh;
}

#app-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  max-width: 77rem;
  margin: 0 auto;
  padding: 0.85rem var(--space-5) 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg) 90%, transparent));
  backdrop-filter: blur(18px);
}

.app-topbar-nav {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.app-topbar-nav > a[aria-label] {
  display: inline-flex;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  font-weight: 800;
  box-shadow: var(--shadow);
}

.app-topbar-nav > a[aria-label]:hover,
.app-topbar-nav > a[aria-label]:focus-visible {
  background: var(--accent-strong);
  color: var(--on-accent);
  text-decoration: none;
}

.app-topbar__brand,
.app-topbar__account {
  position: relative;
}

.app-topbar__brand {
  justify-self: center;
}

.app-topbar__brand-button,
.app-topbar__account-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  color: var(--text);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease,
    box-shadow 120ms ease;
}

.app-topbar__brand-button:hover,
.app-topbar__account-button:hover {
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--bg));
  border-color: color-mix(in srgb, var(--border-soft) 88%, white);
  color: var(--text);
}

.app-topbar__brand-button:focus-visible,
.app-topbar__account-button:focus-visible {
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--bg));
  border-color: color-mix(in srgb, var(--accent-alt) 35%, var(--border-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-alt) 14%, transparent);
}

.app-topbar__brand-wordmark {
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.075em;
  text-transform: lowercase;
}

.app-topbar__brand-caret {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.app-topbar__account {
  justify-self: end;
}

.app-topbar__account-name {
  font-size: 0.95rem;
  font-weight: 700;
}

.app-topbar__avatar {
  width: 2.35rem;
  height: 2.35rem;
  font-size: 0.82rem;
  box-shadow: var(--shadow);
}

.app-topbar__menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  border-radius: 1.4rem;
  padding: 1rem;
  transform: translateX(var(--topbar-menu-x, 0)) translateY(0) scaleY(1);
  /* colour palette handled by the shared overlay rule above. */
}

.ahoj-menu {
  --topbar-menu-x: -50%;
  left: 50%;
  width: min(34rem, calc(100vw - 2rem));
  transform-origin: top center;
}

.account-menu {
  --topbar-menu-x: 0;
  right: 0;
  width: min(19.4rem, calc(100vw - 2rem));
  transform-origin: top right;
}

.topbar-menu-enter,
.topbar-menu-leave {
  transition: opacity 130ms ease, transform 130ms ease;
}

.topbar-menu-enter-start,
.topbar-menu-leave-end {
  opacity: 0;
  transform: translateX(var(--topbar-menu-x, 0)) translateY(-0.45rem) scaleY(0.96);
}

.topbar-menu-enter-end,
.topbar-menu-leave-start {
  opacity: 1;
  transform: translateX(var(--topbar-menu-x, 0)) translateY(0) scaleY(1);
}

.topbar-menu__hint {
  margin: 0 0 0.65rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.topbar-menu__hint--center {
  text-align: center;
}

.topbar-menu__section + .topbar-menu__section {
  margin-top: 0.75rem;
}

.topbar-menu__section h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ahoj-menu__search {
  margin: 0 0 0.75rem;
}

.ahoj-menu__search-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text);
}

.ahoj-menu__search-icon {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.ahoj-menu__search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.94rem;
  padding: 0;
}

.ahoj-menu__search-input::placeholder {
  color: var(--text-muted);
}

.ahoj-menu__search-input:focus {
  outline: 0;
}

.ahoj-menu__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.topbar-tile,
.topbar-row-link {
  color: var(--text);
}

.topbar-tile:hover,
.topbar-row-link:hover {
  color: var(--text);
  text-decoration: none;
}

.topbar-tile {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.15rem;
  min-height: 5rem;
  padding: 0.7rem 0.55rem;
  border-radius: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.topbar-tile:hover {
  background: var(--surface-strong);
  border-color: var(--border);
}

.topbar-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  margin-bottom: 0.05rem;
  font-size: 1.05rem;
}

.topbar-tile__label,
.topbar-row-link__label {
  font-size: 0.98rem;
  font-weight: 800;
}

.topbar-tile__meta,
.topbar-row-link__meta {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.ahoj-menu .topbar-tile__meta {
  display: none;
}

.topbar-menu__rows {
  display: grid;
  gap: 0.05rem;
}

.topbar-row-link {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  align-items: start;
  gap: 0.6rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.8rem;
}

.topbar-row-link:hover {
  /* --surface-strong rather than --surface: in dark mode --overlay-bg
     and --surface are both --gruv-dark-bg1, so hovering a row inside
     the menu wouldn't show any feedback. --surface-strong picks up
     --gruv-*-bg2 in both modes, guaranteeing contrast. */
  background: var(--surface-strong);
}

.topbar-row-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.2rem;
  font-size: 0.9rem;
}

.topbar-row-link__body {
  display: grid;
  gap: 0.05rem;
}

.app-main {
  width: 100%;
  padding: var(--space-5) var(--space-5) var(--space-8);
}

#app-flash:not(:empty) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 0.45rem var(--space-4);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-4);
  font-size: 0.95rem;
}

.app-flash__message {
  margin: 0;
}

.app-flash__dismiss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.app-flash__dismiss:hover,
.app-flash__dismiss:focus-visible {
  background: var(--surface-strong);
  color: var(--text);
}

.app-topbar__alert-listener {
  display: none;
}

.app-topbar-nav > a:not([aria-label]) {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--accent-alt) 18%, var(--border-soft));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--bg));
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.app-topbar-nav > a:not([aria-label]):hover,
.app-topbar-nav > a:not([aria-label]):focus-visible {
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  color: var(--text);
  text-decoration: none;
}

.app-section-hero {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.app-section-hero h1 {
  margin: 0;
}

.app-section-hero p {
  margin: 0;
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.app-section-hero--center {
  justify-items: center;
  text-align: center;
}

.app-section-hero--display h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 850;
  letter-spacing: -0.05em;
}

.app-page {
  display: grid;
  gap: var(--space-5);
}

.app-page,
.activity-page,
.search {
  width: min(100%, 70rem);
  min-width: 0;
  margin: 0 auto;
}

/* Background palette vars are injected inline on the page wrapper —
   see [login_palette_style] in overview_view.ml. Falls back to the
   theme [--bg] if vars are missing so the page is never naked.
   [--login-bg-blob] and [--login-canvas] flip with the system theme
   so the same per-time-of-day hues stay readable on a dark canvas. */
.account-setup-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  --login-bg-blob: 90%;
  --login-canvas: var(--login-bg-base, var(--bg));
  background-color: var(--login-canvas);
  background-image:
    radial-gradient(ellipse 60% 50% at 15% 25%,
      color-mix(in srgb, var(--login-bg-1, transparent) var(--login-bg-blob), transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 55% 50% at 85% 75%,
      color-mix(in srgb, var(--login-bg-2, transparent) var(--login-bg-blob), transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 70% 55% at 50% 100%,
      color-mix(in srgb, var(--login-bg-3, transparent) var(--login-bg-blob), transparent) 0%,
      transparent 65%),
    radial-gradient(ellipse 40% 35% at 75% 15%,
      color-mix(in srgb, var(--login-bg-2, transparent) calc(var(--login-bg-blob) - 20%), transparent) 0%,
      transparent 70%);
}

/* Dark theme: keep the seasonal hues but project them onto a deep
   canvas at reduced strength so the form stays the focal point.
   Both selectors carry the same overrides — one for explicit
   [data-theme-mode="dark"], one for "auto" honoring the OS. */
:root[data-theme-mode="dark"] .account-setup-page {
  --login-bg-blob: 38%;
  --login-canvas: color-mix(in srgb, var(--login-bg-base, #0a0c14) 22%, #050810);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme-mode="light"]) .account-setup-page {
    --login-bg-blob: 38%;
    --login-canvas: color-mix(in srgb, var(--login-bg-base, #0a0c14) 22%, #050810);
  }
}

.account-setup-shell {
  width: min(30rem, 100%);
  display: grid;
  gap: var(--space-5);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 1.2rem;
  background: var(--surface);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.05),
    0 14px 40px rgb(0 0 0 / 0.12);
}

.account-setup-shell__hero {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}

.account-setup-shell__wordmark {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.08em;
  text-transform: lowercase;
}

.account-setup-shell__hero h1 {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.3rem);
}

.account-setup-shell__hero p {
  margin: 0;
  max-width: 26rem;
  color: var(--text-muted);
}

.account-setup-form {
  display: grid;
  gap: var(--space-5);
}

/* Boxless inputs: dotted underline, centered bold value, no fill,
   no rounded corners. Scoped to [.account-setup-form] so it does
   not leak into other forms that rely on the global boxed style. */
.account-setup-form label {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0;
}

/* The global [form label > input] rule adds an extra margin-top that
   stacks with the grid gap; reset it so the underline sits exactly
   one gap below the label. */
.account-setup-form label > input { margin-top: 0; }

.account-setup-form input[type="email"],
.account-setup-form input[type="password"],
.account-setup-form input[type="text"],
.account-setup-form input[type="number"] {
  width: 100%;
  border: 0;
  border-bottom: 1px dotted color-mix(in srgb, var(--text-muted) 55%, transparent);
  border-radius: 0;
  background: transparent;
  padding: var(--space-2) 0;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  box-shadow: none;
  transition: border-color 120ms ease;
}

.account-setup-form input:focus {
  outline: none;
  border-bottom-color: var(--accent);
  box-shadow: none;
}

/* Manual server settings are still part of the same minimal form,
   but a few fields stacked at 1.4rem feel heavy. Drop the size and
   weight a notch so they read as settings, not headline inputs. */
.account-setup-form__manual {
  display: grid;
  gap: var(--space-4);
}

.account-setup-form__manual input {
  font-size: 1.05rem;
  font-weight: 500;
}

.account-setup-form__hint {
  margin: 0;
  color: var(--text-muted);
}

.account-setup-form__footer {
  display: flex;
  justify-content: center;
  margin-top: var(--space-2);
}

/* Overrides for the global [details]/[summary] styling (top of forms
   section): drop the bottom border, the ▸ marker pseudo, and the
   indent that would otherwise leave space for the arrow. Specificity
   is raised via the parent class because [details:last-of-type] wins
   against a single-class rule. */
.account-setup-shell .account-setup-alt {
  text-align: center;
  border-top: 1px solid var(--border-soft);
  border-bottom: none;
  padding: var(--space-4) 0 0;
}

.account-setup-alt__toggle {
  cursor: pointer;
  color: var(--accent);
  list-style: none;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 0;
}

.account-setup-alt__toggle::-webkit-details-marker { display: none; }
.account-setup-alt__toggle::marker { content: ""; }
.account-setup-alt__toggle::before,
.account-setup-alt[open] > .account-setup-alt__toggle::before { content: none; }

.account-setup-alt[open] .account-setup-alt__toggle {
  margin-bottom: var(--space-4);
}

.account-setup-form--alt {
  text-align: left;
}

.account-setup-shell--progress {
  justify-items: center;
  text-align: center;
}

.account-setup-progress {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
}

.account-setup-progress p {
  margin: 0;
}

.account-setup-progress__spinner {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 3px solid var(--border-soft);
  border-top-color: var(--accent);
  animation: ahoj-spin 900ms linear infinite;
}

.account-setup-progress__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-weight: 800;
}

@keyframes ahoj-spin {
  to { transform: rotate(360deg); }
}

.activity-page {
  display: grid;
  gap: var(--space-3);
}

/* Tighter hero for this debug-oriented page — keeps it identifiable
   but cedes vertical space to the log rows. */
.activity-page > .app-section-hero {
  padding: 0;
  margin-bottom: 0;
}

.activity-page > .app-section-hero h1 {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.activity-page > .app-section-hero p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.activity-page__search {
  display: flex;
  gap: var(--space-2);
}

.activity-page__search input {
  flex: 1 1 auto;
}

.activity-log {
  display: grid;
  gap: var(--space-2);
}

.activity-log__toolbar {
  display: flex;
  justify-content: flex-end;
}

/* Activity log is a debug/technical view — render it as a dense log
   stream rather than a list of cards. Rows are single-line where
   possible, monospace for metadata, with details optionally spilling
   onto a second line. */

.activity-log__list {
  display: grid;
  gap: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.85rem;
}

.activity-log__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: baseline;
  padding: 0.35rem var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  border-left: 2px solid transparent;
}

.activity-log__item:last-child {
  border-bottom: 0;
}

.activity-log__item:nth-child(even) {
  background: color-mix(in srgb, var(--surface-soft) 50%, var(--bg));
}

.activity-log__item.is-unread {
  border-left-color: var(--accent);
}

.activity-log__select {
  display: inline-flex;
  align-self: center;
}

.activity-log__entry {
  display: grid;
  gap: 0.15rem;
}

.activity-log__meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.activity-log__time {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.activity-log__event::before {
  content: "· ";
  opacity: 0.5;
}

.activity-log__message {
  margin: 0;
  font-weight: 500;
  line-height: 1.35;
  word-break: break-word;
}

.activity-log__details {
  margin: 0.1rem 0 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
  border: 0;
}

.activity-log__empty {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.activity-log__load-more {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-3);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: italic;
  font-family: var(--font-mono);
  border-bottom: 0;
  background: color-mix(in srgb, var(--surface-soft) 30%, var(--bg));
}

#app-content { display: block; }

/* ---------------------------------------------------------------------------
   Lists (mailbox / screener / thread)
--------------------------------------------------------------------------- */

#app-content ol,
#app-content ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#app-content > ol > li,
#app-content > ul > li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-soft);
}
#app-content > ol > li:last-child,
#app-content > ul > li:last-child { border-bottom: 0; }

article header h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-serif);
}
article header p {
  margin: 0 0 var(--space-2);
  color: var(--text-muted);
  font-size: 0.9rem;
}
article > p { margin-bottom: var(--space-3); color: var(--text-muted); }
article > footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: var(--space-2);
}

.email-html {
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 0;
  width: 100%;
  max-width: 820px;
  min-width: 0;
  margin: 0 auto;
  overflow: auto;
}

.email-html-frame {
  display: block;
  width: 100%;
  min-width: min(100%, 320px);
  height: clamp(32rem, 72vh, 62rem);
  border: 0;
  background: #fff;
}

/* Message-reading page. One [.message] section wraps a centered
   hero <header>, an <article> reader with its own <header> + <section>
   body + <aside> footer panels, and a <nav> action bar. Subordinate
   parts are styled via descendant selectors — no __hero / __body /
   __sender / __who / __name BEM names. */
.message {
  display: grid;
  gap: var(--space-5);
  width: min(100%, 70rem);
  min-width: 0;
  margin: 0 auto;
  padding-bottom: 7rem;
}

.message > header {
  display: grid;
  gap: var(--space-2);
  justify-items: center;
  text-align: center;
}

.message > header > p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.message > header > h1 {
  max-width: 44rem;
  font-family: var(--font-sans);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0;
}

.email-analyzer {
  display: grid;
  gap: var(--space-5);
  width: min(100%, 76rem);
  margin: 0 auto;
}

.email-analyzer > header {
  display: grid;
  gap: var(--space-2);
  text-align: center;
  justify-items: center;
}

.email-analyzer > header h1 { margin: 0; }

.email-analyzer > header p {
  margin: 0;
  color: var(--text-muted);
}

.email-analyzer > nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.email-analyzer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: var(--space-4);
}

.email-analyzer-section,
.email-analyzer-llm {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border-soft);
  border-left: 0.45rem solid var(--accent);
  border-radius: 1.1rem;
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
  padding: var(--space-4);
  min-width: 0;
}

.email-analyzer-section--routing { border-left-color: #60a5fa; }
.email-analyzer-section--auth { border-left-color: #34d399; }
.email-analyzer-section--identity { border-left-color: #f59e0b; }
.email-analyzer-section--impersonation { border-left-color: #fb7185; }
.email-analyzer-section--list { border-left-color: #a78bfa; }
.email-analyzer-section--unsubscribe { border-left-color: #10b981; }
.email-analyzer-section--abuse { border-left-color: #ef4444; }
.email-analyzer-section--mime { border-left-color: #f472b6; }
.email-analyzer-section--body { border-left-color: #22d3ee; }
.email-analyzer-section--other { border-left-color: var(--text-muted); }

.email-analyzer-section h2,
.email-analyzer-llm h2 { margin: 0; }

.email-analyzer-section p { margin: 0; color: var(--text-muted); }

.email-analyzer-section pre,
.email-analyzer-llm pre {
  max-height: 28rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  padding: var(--space-3);
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--bg) 84%, #000);
  color: var(--text);
}

.email-analyzer-llm--error { border-left-color: var(--danger); }

/* Tag chips below the subject. [data-source] keys off the tag origin
   so LLM-proposed and user-confirmed tags read differently. */
.message-tags {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.message-tags > li {
  font-size: 0.78rem;
  line-height: 1;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--bg));
  color: var(--text-muted);
}

.message-tags > li[data-source="user"] {
  border-color: var(--accent-alt);
  color: var(--accent-alt);
  background: color-mix(in srgb, var(--accent-alt) 10%, var(--bg));
}

/* Article reader card — same chrome as the legacy .message-panel
   (kept as an alias so the thread/summary card and the inline
   compose reader keep their look). */
.message > article,
.message-panel,
.message-reader {
  background: color-mix(in srgb, var(--bg) 82%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}

.message > article,
.message-reader {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

/* Article header: avatar | who-block | timestamp */
.message > article > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.message > article > header > span[data-avatar] {
  width: 3rem;
  height: 3rem;
  font-size: 1rem;
}

.message > article > header > div {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.message > article > header > div > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  flex-wrap: wrap;
}

.message > article > header > div h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  word-break: break-word;
  min-width: 0;
}

.message > article > header > div > p {
  margin: 0;
  color: var(--text-muted);
  word-break: break-word;
}

.message > article > header > time {
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  padding-top: 0.1rem;
}

.message-copy {
  position: relative;
  display: inline-flex;
  flex: none;
}

.message-copy__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1;
}

.message-copy__button:hover {
  color: var(--text);
  background: var(--surface);
}

.message-copy__tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.1rem);
  white-space: nowrap;
  padding: 0.35rem 0.55rem;
  margin-top: 0.2rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.55rem;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.message-copy:hover .message-copy__tooltip,
.message-copy:focus-within .message-copy__tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.message-crypto {
  position: relative;
  display: inline-flex;
  flex: none;
}

.message-crypto__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

.message-crypto__icon {
  width: 0.9rem;
  height: 0.9rem;
  display: block;
}

.message-crypto__button:hover {
  color: var(--text);
  background: var(--surface);
}

.message-crypto__button--ok {
  border-color: color-mix(in srgb, var(--success) 55%, var(--border));
  background: color-mix(in srgb, var(--success) 16%, var(--surface-soft));
  color: var(--success);
}

.message-crypto__button--key {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  color: var(--success);
}

.message-crypto__key-indicator {
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  display: inline-grid;
  place-items: center;
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid var(--surface);
  border-radius: 999px;
  background: var(--success);
  color: var(--surface);
  font-size: 0.5rem;
  font-weight: 900;
  line-height: 1;
}

.message-crypto__button--error {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-soft));
  color: var(--danger);
}

/* Article body section — holds the email's HTML iframe or the
   plain-text <pre>. Subsequent <section>s (calendar invitations,
   etc.) and <aside>s (attachments, trackers) sit alongside. */
.message > article > section {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  overflow: hidden;
}

.message > article > section > pre {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.75;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.message > article > aside {
  display: grid;
  gap: var(--space-3);
}

.message > article > aside > h3,
.message-panel h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 800;
}

.message-pill-list,
.message-thread {
  display: grid;
  gap: var(--space-2);
}

.message-resource-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.message-pill-list__item,
.message-resource-list li,
.message-thread__item {
  padding: 0 !important;
  border: 0 !important;
}

.message-pill-list__item,
.message-resource-list li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--surface);
  padding: 0.45rem 0.8rem !important;
  color: var(--text-muted);
}

.message-resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: min(34rem, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-resource-pill--tracker {
  color: var(--danger-text);
  font-weight: 800;
}

.message-resource-pill__icon {
  color: var(--danger-text);
  font-size: 0.92rem;
  line-height: 1;
}

.message-pill-list__meta {
  font-size: 0.8125rem;
}

.message-thread__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.message-thread__row .message-thread__link {
  flex: 1 1 auto;
}

.conversation-reader {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.conversation-reader__list {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.conversation-reader__message {
  gap: var(--space-4);
  min-width: 0;
  width: 100%;
}

.conversation-reader__subject {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 750;
  line-height: 1.35;
}

.conversation-summary {
  display: grid;
  gap: var(--space-3);
}

.conversation-summary__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.conversation-summary__meta,
.conversation-summary__pending,
.conversation-summary__empty,
.conversation-summary__error {
  margin: 0;
}

.conversation-summary__meta,
.conversation-summary__pending,
.conversation-summary__empty {
  color: var(--text-muted);
}

.conversation-summary__error {
  color: var(--danger-text);
  font-weight: 700;
}

.conversation-summary__body {
  margin: 0;
  white-space: pre-wrap;
  line-height: 1.7;
}

.conversation-summary__button--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.conversation-summary__button--disabled:hover {
  background: inherit;
  border-color: inherit;
  color: inherit;
}

.message-safety {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--bg));
  color: var(--text);
}

.message-safety--clean {
  background: var(--success-bg);
  color: var(--success-text);
}

.message-safety--pending,
.message-safety--unsupported {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.message-safety--suspicious,
.message-safety--error {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.message-safety--malicious {
  background: var(--danger-bg);
  color: var(--danger-text);
}

/* ---------------------------------------------------------------------------
   Settings: index + per-section panels
   ---------------------------------------------------------------------------
   The /settings URL renders an index (account card + row list);
   each row htmx-loads a panel at /settings/<section> that replaces the
   content region and pushes its own URL so the browser back button
   returns here. Panels share .settings-panel chrome (back pill + card)
   so every subpage looks the same. */

.settings-panel {
  display: grid;
  gap: var(--space-3);
  max-width: 46rem;
  margin: 0 auto;
}

.settings-panel__nav {
  display: flex;
  justify-content: center;
}

.settings-panel__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.92rem;
  background: transparent;
  transition: background 120ms ease, color 120ms ease;
}

.settings-panel__back:hover,
.settings-panel__back:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  text-decoration: none;
}

.settings-panel__card {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--native-card-bg, color-mix(in srgb, var(--surface) 82%, var(--bg)));
  border: 1px solid var(--border-soft);
  border-radius: 1.2rem;
  box-shadow: var(--shadow);
  backdrop-filter: var(--native-card-filter, none);
}

.settings-panel__title {
  margin: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
}

.settings-panel__subtitle {
  margin: calc(-1 * var(--space-3)) 0 0;
  color: var(--text-muted);
  text-align: center;
}

.settings-panel__notice {
  margin: 0;
  padding: 0.6rem 0.85rem;
  border-radius: 0.7rem;
  background: var(--info-bg);
  color: var(--info-text);
  font-size: 0.92rem;
}

.settings-panel__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  margin-top: var(--space-2);
}

.settings-panel__footer--top {
  margin-top: 0;
}

.settings-panel__save {
  background: var(--native-primary-bg, var(--accent));
  color: var(--on-accent);
  border: 1px solid transparent;
  padding: 0.55rem 1.25rem;
  font-weight: 700;
  box-shadow: var(--native-button-shadow, none);
}

.settings-panel__save:hover {
  background: var(--native-primary-hover-bg, var(--accent-strong));
  color: var(--on-accent);
  box-shadow: var(--native-button-hover-shadow, var(--native-button-shadow, none));
}

.settings-panel__save--ghost {
  background: var(--native-secondary-bg, transparent);
  color: var(--text);
  border: 1px solid var(--border-soft);
  box-shadow: var(--native-control-shadow, none);
}

.settings-panel__save--ghost:hover {
  background: var(--native-secondary-hover-bg, var(--surface-strong));
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--native-control-hover-shadow, var(--native-control-shadow, none));
}

.settings-panel__save[disabled],
.settings-panel__save:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Index: grouped rows showing account + sections. */

.settings-index {
  display: grid;
  gap: var(--space-4);
}

.settings-index__group {
  background: var(--native-list-bg, color-mix(in srgb, var(--surface-soft) 80%, var(--bg)));
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--native-list-shadow, none);
  backdrop-filter: var(--native-card-filter, none);
}

.settings-index__group--rows {
  display: block;
}

.settings-index__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  color: var(--text);
  background: transparent;
  border-top: 1px solid var(--border-soft);
  transition: background 120ms ease;
}

.settings-index__row:first-child {
  border-top: none;
}

.settings-index__row:hover,
.settings-index__row:focus-visible {
  background: var(--native-row-hover-bg, color-mix(in srgb, var(--surface-strong) 80%, transparent));
  color: var(--text);
  text-decoration: none;
}

.settings-index__row--account {
  padding: 1rem 1.1rem;
}

.settings-index__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--accent-alt);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 0.9rem;
}

.settings-index__account-body {
  display: grid;
  gap: 0.15rem;
}

.settings-index__account-name {
  font-weight: 700;
  font-size: 1.05rem;
}

.settings-index__account-email {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.settings-index__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  color: var(--text-muted);
  font-size: 1rem;
}

.settings-index__label {
  font-weight: 600;
  font-size: 1rem;
}

.settings-index__chevron {
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
}

/* Forms inside panels: one column of fields. */

.settings-form {
  display: grid;
  gap: var(--space-4);
}

.settings-field {
  display: grid;
  gap: 0.4rem;
}

.settings-field__label {
  font-weight: 700;
  font-size: 0.95rem;
}

.settings-field__input {
  width: 100%;
  background: var(--native-input-bg, revert);
  border-color: var(--native-input-border, revert);
  box-shadow: var(--native-control-shadow, none);
}

.settings-field__input:hover {
  background: var(--native-input-hover-bg, var(--native-input-bg, revert));
  border-color: var(--native-input-hover-border, var(--native-input-border, revert));
  box-shadow: var(--native-control-hover-shadow, var(--native-control-shadow, none));
}

.settings-field__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.settings-field--static .settings-field__static-value {
  margin: 0;
  color: var(--text);
  font-weight: 500;
}

.settings-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.settings-grid dt {
  color: var(--text-muted);
  font-weight: 600;
}

.settings-grid dd {
  margin: 0;
}

.settings-table-wrap {
  overflow-x: auto;
}

.settings-table {
  width: 100%;
  font-size: 0.9rem;
}

.settings-table--mailboxes {
  min-width: 42rem;
  border-collapse: collapse;
}

.settings-table--mailboxes th,
.settings-table--mailboxes td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
  white-space: nowrap;
}

.settings-table--mailboxes thead th {
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.settings-table--mailboxes tbody tr:hover {
  background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.settings-table--mailboxes tbody tr:last-child th,
.settings-table--mailboxes tbody tr:last-child td {
  border-bottom: 0;
}

.settings-table__primary {
  max-width: 16rem;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
}

.settings-table__number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-tracker-list {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.settings-tracker-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  min-width: 0;
}

.settings-tracker-card__main,
.settings-tracker-card__header {
  min-width: 0;
}

.settings-tracker-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
}

.settings-tracker-card__title {
  margin: 0;
  font-size: 0.98rem;
}

.settings-tracker-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.settings-tracker-card__badge {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.settings-tracker-card__badge-label {
  color: var(--text);
  font-weight: 700;
}

.settings-tracker-card__description {
  margin: 0.55rem 0;
  color: var(--text-muted);
  line-height: 1.45;
}

.settings-tracker-card__pattern {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--text);
}

.settings-tracker-card--disabled {
  opacity: 0.72;
}

.settings-tracker-card__actions {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  margin: 0;
}

.settings-tracker-card__enabled-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.settings-tracker-card__enabled-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.6rem;
  height: 1.45rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 85%, var(--bg));
  transform: translateY(-50%);
  transition: background 140ms ease, border-color 140ms ease;
}

.settings-tracker-card__enabled-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translateY(-50%);
  transition: transform 140ms ease, background 140ms ease;
}

.settings-tracker-card__enabled-button--on::before {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-tracker-card__enabled-button--on::after {
  background: var(--on-accent);
  transform: translate(1.15rem, -50%);
}

.settings-tracker-card__enabled-button:focus-visible::before {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.settings-tracker-card__icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.settings-tracker-card__icon-button:hover {
  color: var(--text);
  border-color: var(--border);
}

.settings-tracker-card__icon-button--danger:hover {
  color: var(--danger, #b42318);
}

.settings-tracker-card__edit-panel {
  position: absolute;
  position-area: block-end inline-end;
  z-index: 5;
  width: min(28rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 0.5rem 0 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg, 0 18px 45px rgba(0, 0, 0, 0.16));
}

.settings-tracker-card__edit-panel::backdrop {
  background: rgba(0, 0, 0, 0.12);
}

.openpgp-key-section {
  display: grid;
  gap: 0.8rem;
}

.openpgp-key-section__header,
.openpgp-settings-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.openpgp-key-section__header h2 {
  margin: 0;
  font-size: 1rem;
}

.openpgp-settings-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.openpgp-discovery-review {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
}

.openpgp-discovery-review h4 {
  margin: 0;
  font-size: 0.95rem;
}

.openpgp-discovered-key {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
}

.openpgp-discovered-key__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 0.6rem;
  margin: 0;
  font-size: 0.82rem;
}

.openpgp-discovered-key__details dt {
  color: var(--text-muted);
  font-weight: 700;
}

.openpgp-discovered-key__details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.openpgp-key-list {
  display: grid;
  gap: 0.65rem;
  min-width: 0;
}

.openpgp-key-list__empty {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.openpgp-key-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.openpgp-key-card__main {
  min-width: 0;
}

.openpgp-key-card__label,
.openpgp-key-card__email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.openpgp-key-card__label {
  margin: 0;
  font-size: 0.95rem;
}

.openpgp-key-card__email {
  margin: 0.2rem 0;
  color: var(--text-muted);
  font-size: 0.86rem;
}

.openpgp-key-card__fingerprint {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

.openpgp-key-card__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.openpgp-key-card__icon-button {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}

.openpgp-key-card__icon-button:hover {
  color: var(--text);
  border-color: var(--border);
}

.openpgp-key-card__icon-button--danger:hover {
  color: var(--danger, #b42318);
}

.openpgp-key-card__details {
  position: absolute;
  position-area: block-end inline-end;
  z-index: 5;
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow: auto;
  margin: 0.5rem 0 0;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg, 0 18px 45px rgba(0, 0, 0, 0.16));
}

.openpgp-key-card__details h4 {
  margin: 0 0 0.75rem;
}

.openpgp-key-card__detail-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.45rem 0.75rem;
  margin: 0;
}

.openpgp-key-card__detail-list dt {
  color: var(--text-muted);
  font-weight: 700;
}

.openpgp-key-card__detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.openpgp-settings-dialog .settings-form h3 {
  display: none;
}

.openpgp-settings-dialog textarea {
  min-height: 12rem;
}

@media (max-width: 760px) {
  .settings-tracker-card,
  .settings-tracker-card__header {
    display: block;
  }

  .settings-tracker-card__meta {
    justify-content: flex-start;
    margin-top: 0.5rem;
  }

  .settings-tracker-card__actions {
    margin-top: 0.75rem;
    flex-wrap: wrap;
  }

  .settings-tracker-card__edit-panel {
    position-area: block-end center;
    width: min(28rem, calc(100vw - 1.5rem));
  }

  .openpgp-key-card {
    grid-template-columns: 1fr;
  }

  .openpgp-key-card__actions {
    justify-content: flex-end;
  }

  .openpgp-key-card__details {
    position-area: block-end center;
    width: min(30rem, calc(100vw - 1.5rem));
  }

  .openpgp-key-card__detail-list {
    grid-template-columns: 1fr;
  }
}

/* iOS-style toggle. The actual checkbox is visually hidden but still
   focusable; the track + thumb are CSS-only styling that keys off
   :checked and :focus-visible on the sibling input. */

.settings-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.9rem;
  cursor: pointer;
}

.settings-toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-toggle__track {
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 1.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 85%, var(--bg));
  border: 1px solid var(--border-soft);
  transition: background 140ms ease, border-color 140ms ease;
}

.settings-toggle__thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translateY(-50%);
  transition: transform 140ms ease, background 140ms ease;
}

.settings-toggle__input:checked + .settings-toggle__track {
  background: var(--accent);
  border-color: var(--accent);
}

.settings-toggle__input:checked + .settings-toggle__track .settings-toggle__thumb {
  transform: translate(1.15rem, -50%);
  background: var(--on-accent);
}

.settings-toggle__input:focus-visible + .settings-toggle__track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

.settings-toggle__body {
  display: grid;
  gap: 0.15rem;
}

.settings-toggle__label {
  font-weight: 700;
}

.settings-toggle__hint {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.settings-toggle--compact {
  display: inline-grid;
  grid-template-columns: auto;
  gap: 0;
}

.settings-toggle--compact .settings-toggle__body {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Vertical option list (Appearance panel). Radios are hidden; the row
   hover/selected state is driven by :checked on the input. Clicking a
   row auto-submits the form via hx-trigger="change". */

.settings-options {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  background: var(--native-list-bg, color-mix(in srgb, var(--surface-soft) 82%, var(--bg)));
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: var(--native-list-shadow, none);
  backdrop-filter: var(--native-card-filter, none);
}

.settings-options > li {
  border-top: 1px solid var(--border-soft);
}

.settings-options > li:first-child {
  border-top: none;
}

.settings-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: background var(--native-control-duration, 120ms) ease,
    color var(--native-control-duration, 120ms) ease,
    transform var(--native-control-duration, 120ms) ease;
}

.settings-option:hover {
  background: var(--native-row-hover-bg, color-mix(in srgb, var(--surface-strong) 70%, transparent));
}

.settings-option:active {
  transform: var(--native-button-active-transform, translateY(0));
}

.settings-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.settings-option__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  color: var(--text-muted);
  filter: var(--native-icon-filter, none);
}

.settings-option__label {
  font-weight: 600;
}

.settings-option__check {
  color: var(--accent);
  opacity: 0;
  transition: opacity 140ms ease;
}

.settings-option__input:checked ~ .settings-option__icon,
.settings-option__input:checked ~ .settings-option__label {
  color: var(--accent);
}

.settings-option__input:checked ~ .settings-option__check {
  opacity: 1;
}

/* Row that places a tiny action (e.g. Refresh models) on the right
   edge of a form-field label so it doesn't steal the full-width button
   slot below the field. */
.settings-form__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0.25rem;
}

.settings-form__inline-action {
  appearance: none;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1;
  transition: color 0.15s, border-color 0.15s;
}

.settings-form__inline-action:hover,
.settings-form__inline-action:focus-visible {
  color: var(--text);
  border-color: var(--accent-alt);
}

.settings-subcards {
  display: grid;
  gap: var(--space-3);
}

.settings-subcard {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--bg));
  border: 1px solid var(--border-soft);
}

.settings-subcard h4 {
  margin: 0;
}

.attachments-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
}

.attachments-card {
  min-width: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
}

.attachments-card__summary {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  min-width: 0;
  list-style: none;
  text-align: center;
  cursor: pointer;
}

.attachments-card__summary::-webkit-details-marker {
  display: none;
}

.attachments-card > .attachments-card__summary {
  padding-left: 0;
}

.attachments-card > .attachments-card__summary::before,
.attachments-card[open] > .attachments-card__summary::before {
  content: none;
}

.attachments-card__preview {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 6.8rem;
  margin: 0;
  border-radius: 0.85rem;
  background: color-mix(in srgb, var(--surface) 80%, var(--bg));
  overflow: hidden;
}

.attachments-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachments-card__icon {
  display: inline-grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  color: var(--accent);
  font-size: 4.2rem;
}

.attachments-card__body {
  display: grid;
  gap: 0.25rem;
  justify-items: center;
  min-width: 0;
}

.attachments-card__title,
.attachments-empty {
  margin: 0;
}

.attachments-card__title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1rem;
  line-height: 1.2;
}

.attachments-card__file-link {
  color: inherit;
  text-decoration: none;
}

.attachments-card__file-link:hover {
  color: inherit;
  text-decoration: underline;
}

.attachments-card__from,
.attachments-card__meta {
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.attachments-card__from {
  color: var(--text);
  font-size: 0.92rem;
}

.attachments-card__meta {
  font-size: 0.86rem;
}

.attachments-card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
}

.attachments-card__message-count {
  display: inline-flex;
  align-items: center;
  min-height: 1.45rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-strong) 72%, var(--bg));
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.attachments-card__messages {
  grid-column: 1 / -1;
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-soft);
  padding-top: var(--space-3);
}

.attachments-card__messages-section .mailbox-section__header {
  margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
  .attachments-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .attachments-list {
    grid-template-columns: 1fr;
  }
}

.message-thread__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: 1rem;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: inherit;
}

.message-thread__link:hover {
  color: inherit;
  text-decoration: none;
  border-color: color-mix(in srgb, var(--accent-alt) 35%, var(--border));
}

.message-thread__link.is-current {
  border-color: color-mix(in srgb, var(--accent-alt) 55%, var(--border));
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}

.message-thread__link p {
  margin: 0;
  color: var(--text-muted);
}

/* Sticky action toolbar shared by message and compose navs. */
.message > nav,
.compose-dock {
  position: sticky;
  bottom: var(--space-4);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
  border: 1px solid var(--border-soft);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-lg);
}

.message > nav form,
.compose-dock form { margin: 0; }

/* The hidden "More" panel sits inside the nav and unfolds full-width
   beneath the primary pills when the More button toggles it. */
.message > nav > [data-section="more"] {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  padding-top: 0.35rem;
}

.message > nav > [data-section="more"][hidden] { display: none; }

/* Unified compact pill. */
.message-action {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--bg));
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: none;
}

.message-action:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  text-decoration: none;
}

.message-action span[aria-hidden="true"] {
  color: currentColor;
  font-size: 0.95rem;
}

.message-action span[aria-hidden="true"] i,
.compose-form__attachment-icon i {
  color: currentColor;
}

.message-action span:not([aria-hidden]) {
  font-size: 0.85rem;
  font-weight: 700;
}

.message-inline-compose__reader {
  gap: var(--space-4);
}

.message-inline-compose__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.message-inline-compose__header h3 {
  margin: 0;
  font-family: var(--font-sans);
}

.message-inline-compose__dock,
.compose-dock {
  justify-content: flex-start;
}

.message-modal {
  width: min(40rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 1.2rem;
  background: transparent;
  box-shadow: none;
}

.message-modal::backdrop {
  background: var(--overlay-backdrop);
  backdrop-filter: blur(3px);
}

.message-modal__panel {
  background:
    linear-gradient(
      var(--native-overlay-tint, transparent),
      var(--native-overlay-tint, transparent)
    ),
    var(--native-overlay-bg, var(--overlay-bg));
  border: 1px solid var(--overlay-border);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  backdrop-filter: var(--native-overlay-filter, none);
}

.message-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.message-modal__header h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.15rem;
}

.message-modal__close {
  color: var(--text);
  background: var(--native-secondary-bg, var(--surface-soft));
  border: 1px solid var(--border);
  box-shadow: var(--native-control-shadow, none);
}

.message-modal__close:hover {
  color: var(--text);
  background: var(--native-secondary-hover-bg, var(--surface));
  box-shadow: var(--native-control-hover-shadow, var(--native-control-shadow, none));
}

.message-modal__body {
  display: grid;
  gap: var(--space-4);
}

.bubble-up {
  display: grid;
  gap: var(--space-3);
}

.bubble-up-menu {
  display: inline-flex;
}

/* Native popover panel — rendered in the browser top layer, so it
   sits above the topbar without z-index gymnastics. We anchor it to
   the trigger button via [anchor=...] in HTML and try to position it
   above the dock; CSS anchor positioning has [position-try-fallbacks]
   to flip when there isn't enough room. Browsers that don't support
   anchor positioning fall back to the default centered popover, with
   [max-block-size] keeping it inside the viewport. */
.bubble-up-menu__panel[popover] {
  position: fixed;
  inset: auto;
  bottom: calc(var(--space-4) + 3.5rem);
  left: 50%;
  translate: -50% 0;
  width: min(20rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - var(--app-topbar-clearance, 4rem) - var(--space-4) - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--overlay-border, var(--border));
  border-radius: 1.2rem;
  background: var(--overlay-bg, var(--surface));
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

/* Anchored variant (modern browsers): position the popover above the
   trigger button, flipping below if there isn't room. */
@supports (anchor-name: --a) {
  .bubble-up-menu__panel[popover] {
    position-anchor: --bubble-up-anchor;
    inset: auto;
    bottom: anchor(top);
    left: anchor(center);
    translate: -50% calc(-1 * var(--space-2));
    position-try-fallbacks: flip-block;
  }
  #bubble-up-toggle { anchor-name: --bubble-up-anchor; }
}

.bubble-up-menu__panel--down {
  top: calc(100% + 0.45rem);
  bottom: auto;
}

.bubble-up-menu__panel--compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  width: max-content;
  min-width: 12rem;
  max-width: min(18rem, calc(100vw - 2rem));
  padding: var(--space-2);
  border-radius: 1rem;
}

.bubble-up-menu__panel[hidden] {
  display: none;
}

.message-crypto > .bubble-up-menu__panel:not([popover]) {
  position: absolute;
  z-index: 20;
}

.bubble-up-menu__panel--stacked {
  display: grid;
  gap: var(--space-3);
}

.bubble-up-menu__panel--stacked p {
  margin: 0;
}

.bubble-up-menu__item {
  width: 100%;
  border: 0;
  border-radius: 0.65rem;
  padding: 0.5rem 0.65rem;
  background: transparent;
  color: var(--text);
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
}

.bubble-up-menu__item:hover {
  background: var(--surface-soft);
}

.bubble-up-menu__status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.bubble-up-menu__status--error {
  color: var(--danger);
}

.bubble-up-menu__output {
  max-height: 14rem;
  overflow: auto;
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  background: var(--surface-soft);
  color: var(--text);
  white-space: pre-wrap;
}

.compose-form__crypto-status {
  margin: 0;
}

.bubble-up__label {
  margin: 0;
  color: var(--accent-alt);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.bubble-up__intro {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.bubble-up__options {
  display: grid;
  gap: 0.3rem;
}

.bubble-up__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: 2rem;
  padding: 0.35rem 0.6rem;
  border-radius: 0.7rem;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.bubble-up__option form {
  margin: 0;
}

.bubble-up__option:hover {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--border);
}

.bubble-up__option-main {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}

.bubble-up__option-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 2px solid var(--text-muted);
}

.bubble-up__option-hint {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.bubble-up__picker {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.bubble-up__picker input {
  color: var(--text);
  font-size: 0.82rem;
  background: var(--bg);
  border-color: var(--border-soft);
}

.bubble-up__save {
  margin-top: var(--space-2);
}

.mailbox {
  width: min(100%, 70rem);
  margin: 0 auto;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  background: color-mix(in srgb, var(--bg) 72%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.35rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
  min-height: calc(
    100dvh - var(--app-topbar-clearance) - var(--space-5) - var(--space-8)
  );
}

.mailbox-toolbar {
  position: fixed;
  top: calc(var(--app-topbar-clearance) + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: block;
  width: min(72rem, calc(100vw - (var(--space-4) * 2)));
  max-width: calc(100vw - (var(--space-4) * 2));
  padding: 0.7rem;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px);
  pointer-events: auto;
}

.mailbox-toolbar[hidden] {
  display: none;
}

.mailbox-toolbar__menu {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) auto;
  gap: 0.55rem;
  align-items: stretch;
}

.mailbox-toolbar__primary,
.mailbox-toolbar__secondary {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mailbox-toolbar__primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.mailbox-toolbar__secondary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
}

.mailbox-toolbar__primary > li,
.mailbox-toolbar__secondary > li {
  min-width: 0;
}

.mailbox-toolbar__button {
  width: 100%;
  min-height: 3rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  padding: 0.55rem 0.75rem;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.mailbox-toolbar__dialog {
  width: min(30rem, calc(100vw - 2rem));
}

.mailbox-toolbar__dialog-panel {
  background: var(--bg);
}

.mailbox-toolbar__dialog-copy {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
}

.mailbox-toolbar__dialog-label {
  margin: 0;
}

.mailbox-toolbar__dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.mailbox-toolbar__button:hover {
  color: var(--text);
  background: var(--surface-strong);
  border-color: var(--border);
}

.mailbox-toolbar__dismiss {
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  box-shadow: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.mailbox-toolbar__button--primary {
  min-height: 4.6rem;
  grid-template-columns: 1fr;
  justify-items: start;
  align-content: end;
  gap: 0.2rem;
  padding: 0.9rem 0.95rem;
  border-radius: 1rem;
}

.mailbox-toolbar__icon {
  font-size: 1rem;
}

.mailbox-toolbar__button--primary .mailbox-toolbar__icon {
  font-size: 1.2rem;
}

.mailbox-toolbar__label {
  justify-self: start;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
}

.mailbox-toolbar__button--primary .mailbox-toolbar__label {
  font-size: 1rem;
}

.mailbox-toolbar__hint {
  justify-self: end;
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.mailbox-toolbar__button--primary .mailbox-toolbar__hint {
  justify-self: start;
  color: color-mix(in srgb, var(--on-accent) 70%, transparent);
}

/* Inner feed wrapper that the SSE refresh swaps. The id is the only
   handle htmx needs; no class because nothing else styles it. */
#mailbox-feed {
  display: grid;
  gap: var(--space-4);
}

/* Page-level hero header — hidden by default since the title lives in
   the topbar. Pages can opt back in with their own rules. */
.mailbox > header {
  display: none;
}

.mailbox > header h1 {
  font-family: var(--font-sans);
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  font-weight: 850;
  letter-spacing: -0.05em;
  margin: 0;
}

.mailbox > header p {
  max-width: 42rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  margin: 0;
}

/* Page-level action nav. Currently only Compose lives here; future
   actions can branch on attributes or first-of-type. */
.mailbox > nav {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  width: min(100%, 52rem);
  margin: 0 auto var(--space-2);
}

.mailbox > nav > a {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.mailbox-section {
  display: grid;
  align-content: start;
  gap: 0.15rem;
}

.mailbox-section--bubble-up .mailbox-section__header h2 {
  color: var(--accent-alt);
}

.mailbox-section--bubble-up .mailbox-section__header::after {
  border-top-color: color-mix(in srgb, var(--accent-alt) 45%, var(--border-soft));
}

/* Contacts page — same shape as the mailbox: one .contacts section
   with a header, an action nav, an optional create-form section, and
   a list section of <article> contacts. All children are styled by
   tag, not by extra classes. */
.contacts {
  width: min(100%, 60rem);
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

.contacts > header {
  text-align: center;
}

.contacts > header h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
}

.contacts > header p {
  margin: var(--space-1) 0 0;
  color: var(--text-muted);
}

.contacts > nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.contacts > nav form { margin: 0; }

/* "Import vCard" label-as-button — the actual <input type="file"> is
   hidden via the [hidden] attribute and the label inherits the same
   pill shape as the surrounding buttons. */
.contacts > nav label {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  margin: 0;
}

.contacts > nav label:hover {
  background: var(--surface-soft);
  border-color: var(--border-strong);
}

.contacts > nav button {
  min-height: 2.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
}

#contacts-create {
  background: color-mix(in srgb, var(--bg) 82%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.25rem;
  box-shadow: var(--shadow);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

#contacts-create > header h2 {
  margin: 0;
  font-family: var(--font-sans);
}

#contacts-create form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

#contacts-create form label:nth-child(2),
#contacts-create form label:last-of-type {
  grid-column: 1 / -1;
}

#contacts-create form button {
  justify-self: start;
  grid-column: 1 / -1;
}

/* Contact list — flat sequence of <article> children, each holding a
   single full-row <a>. The link is the only interactive surface so
   the whole row is clickable. */
.contacts > section > article {
  border-top: 1px solid var(--border-soft);
}

.contacts > section > article:last-child {
  border-bottom: 1px solid var(--border-soft);
}

.contacts > section > article > a {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: inherit;
  text-decoration: none;
}

.contacts > section > article > a:hover {
  background: color-mix(in srgb, var(--accent-alt) 6%, transparent);
  text-decoration: none;
}

.contacts article > a > span,
.contacts article > a > img {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

.contacts article > a > header h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
}

.contacts article > a > header p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.contacts article > a > footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: 0.85rem;
  justify-self: end;
}

.contacts > section > article > aside {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0 var(--space-2) var(--space-3) calc(2.5rem + var(--space-3) + var(--space-2));
}

.contacts > section > article > aside > span {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--note-pill-bg);
  color: var(--note-pill-text);
  font-size: 0.72rem;
  font-weight: 700;
}

.contacts > .empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6) 0;
}

/* Note pills shared by [.contacts-card__notes-list] on the contact
   detail page and the thread view. The outer contacts-card chrome
   (header / avatar / identity / details / notes section) was
   deleted along with the unused [contact_card_view]. */
.contacts-card__note {
  margin: 0;
  color: var(--text-muted);
}

.contacts-card__notes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  min-width: 0;
}

.contacts-card__note-item {
  max-width: 100%;
  min-width: 0;
}

.contacts-card__note {
  display: inline-flex;
  align-items: start;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.5rem 0.55rem 0.5rem 0.7rem;
  border-radius: 0.8rem;
  border: 1px solid var(--note-border);
  background: var(--note-bg);
  color: var(--note-text);
}

.contacts-card__note-label {
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
  box-shadow: none;
}

.contacts-card__note-delete {
  margin: 0;
}

.contacts-card__note-delete-button {
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--note-text) 12%, transparent);
  color: var(--note-text);
  font-size: 0.85rem;
  line-height: 1;
  box-shadow: none;
}

.contacts-card__note-edit,
.contacts-card__note-create {
  display: grid;
  gap: var(--space-2);
  max-width: 100%;
}

.contacts-note-editor {
  display: grid;
  gap: var(--space-2);
}

.compose-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contacts-note-editor .compose-editor__bubble {
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
}

.contacts-note-editor .compose-editor__tool {
  min-height: 1.8rem;
  min-width: 1.8rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.76rem;
}

.contacts-note-editor .compose-form__body {
  padding-top: 0;
}

.contacts-note-editor .compose-form__body .swc-editor-panel {
  min-height: 10rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.message-modal .compose-form__body .swc-editor-panel {
  min-height: 10rem;
}

.contacts-card__note-edit textarea,
.contacts-card__note-create textarea {
  min-height: 4.5rem;
}

.contacts-card__note-edit-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.contacts-detail {
  display: grid;
  gap: var(--space-5);
}

.contacts-detail__hero,
.contacts-detail__panel {
  background: color-mix(in srgb, var(--bg) 82%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.4rem;
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

.contacts-detail__hero {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--space-3);
}

.contacts-detail__back {
  justify-self: start;
  font-size: 0.9rem;
  font-weight: 700;
}

.contacts-detail__avatar {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.4rem;
}

.contacts-detail__hero h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.04em;
}

.contacts-detail__email {
  margin: 0;
  color: var(--text-muted);
}

.contacts-detail__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
}

.contacts-detail__actionbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, var(--bg));
}

.contacts-detail__action {
  display: inline-flex;
  align-items: center;
  min-height: 2.3rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: none;
}

.contacts-detail__action.is-active {
  color: var(--text);
  background: var(--bg);
  border-color: color-mix(in srgb, var(--accent-alt) 35%, var(--border));
  box-shadow: var(--shadow);
}

.contacts-detail__action.is-muted {
  color: var(--note-pill-text);
  background: var(--note-pill-bg);
  border-color: var(--note-border);
}

.contacts-detail__panel {
  display: grid;
  gap: var(--space-3);
}

.contacts-detail__panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.contacts-detail__panel-header h2 {
  margin: 0;
  font-family: var(--font-sans);
}

.contacts-detail__messages {
  display: grid;
  gap: var(--space-3);
}

.contacts-detail__composer {
  display: grid;
  gap: var(--space-3);
}

/* Per-message quick-note: [<div class="note">] wraps a toggle
   [<button>] and a [<div popover>] panel. The wrapper is also used
   in read-only contexts as [<span class="note">…</span>] to render
   the existing note as a static pill, so the same base styles cover
   both forms. Subordinate styling is descendant-selector-driven —
   no __row / __toggle / __pill / __panel / __actions / __button
   class names. */
.note {
  margin-top: 0.2rem;
  display: inline-flex;
  align-items: center;
}

/* Read-only pill: a [<span class="note">] with icon + text inside.
   Editor toggle without an existing note is a plain [<button>] with
   the same pill shape; existing-note button uses [data-has-note] so
   we can render the body the same way as the read-only pill. */
.note,
.note > button {
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 600;
}

.note > button {
  min-height: 1.45rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--note-border);
  background: var(--note-pill-bg);
  color: var(--note-pill-text);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: none;
}

.note > button[data-has-note] {
  font-size: 0.84rem;
  font-weight: 600;
  border-radius: 0.45rem;
  max-width: min(100%, 24rem);
  padding: 0.42rem 0.7rem;
}

.note > button > span[aria-hidden] { font-size: 0.82rem; }

.note > button > span:not([aria-hidden]) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Native popover panel. Top-layer rendering escapes the [.mailbox]
   card's overflow:hidden so the panel can extend past the card
   border. Centered modal style; light-dismiss / Escape handled by
   the browser via [popover="auto"]. Note: do NOT set [display] here
   — the user-agent stylesheet sets [display: none] on closed
   popovers and [display: revert] when opened. Forcing a value would
   make the popover always visible. Layout for the inner form is
   applied on [.note > [popover] > form] below. */
.note > [popover] {
  position: fixed;
  inset: auto;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(34rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - var(--app-topbar-clearance, 4rem) - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--note-border);
  border-radius: 1rem;
  background: var(--note-bg);
  color: var(--note-text);
  box-shadow: var(--shadow-lg);
}

.note > [popover] > form {
  display: grid;
  gap: var(--space-3);
}

.note > [popover] .compose-editor__bubble { display: none; }

.note > [popover] .compose-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
}

.note > [popover] .compose-editor__tool {
  min-height: 1.8rem;
  min-width: 1.8rem;
  padding: 0.2rem 0.45rem;
  font-size: 0.76rem;
  border: 1px solid var(--note-border);
  background: color-mix(in srgb, var(--note-bg) 50%, var(--bg));
  color: var(--note-text);
}

.note > [popover] .compose-editor__tool.is-active {
  background: var(--bg);
  border-color: var(--note-border);
  color: var(--note-text);
}

.note > [popover] .compose-form__body { padding-top: 0; }

.note > [popover] .compose-form__body .swc-editor-panel {
  min-height: 7rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.note > [popover] footer {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.note > [popover] footer > button {
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.8rem;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: none;
}

/* Palette for the footer buttons (primary submit / secondary cancel /
   danger delete) is applied via the shared button rules near the top
   of this file, keyed off [type="submit"] / [popovertarget] / [hx-post]. */

.note > [popover] .compose-editor,
.note > [popover] .compose-form__body,
.note > [popover] .swc-editor-panel {
  position: relative;
  z-index: 1;
}

.compose-card {
  display: grid;
  gap: var(--space-4);
  background: color-mix(in srgb, var(--bg) 82%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

.compose-card__from {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.compose-card__contacts-link {
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 700;
}

.compose-form {
  display: grid;
  gap: var(--space-4);
}

.compose-form__row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}

.compose-form__row--recipient {
  align-items: start;
}

.compose-form__row--recipient > .compose-form__label {
  padding-top: 0.7rem;
}

.compose-form__recipient-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
}

.compose-form__cc-toggle {
  align-self: center;
  padding: 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: none;
}

.compose-form__cc-toggle:hover {
  color: var(--accent);
  background: transparent;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .compose-form__recipient-line {
    grid-template-columns: 1fr;
  }

  .compose-form__cc-toggle {
    justify-self: start;
  }
}

.compose-form__label {
  font-size: 0.95rem;
  font-weight: 700;
}

.compose-form__input {
  border: 0;
  background: transparent;
  padding-inline: 0;
}

.compose-form__input:focus {
  box-shadow: none;
}

.compose-form__attachment-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.compose-form__attachment-dropzone {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 4rem;
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-soft) 70%, transparent);
  color: var(--text-muted);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.compose-form--dragging .compose-form__attachment-dropzone {
  color: var(--text);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-soft));
}

.compose-form__attachment-icon {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, var(--bg));
  color: var(--text);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.compose-form__attachment-copy {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.compose-form__attachment-copy strong {
  color: var(--text);
  font-size: 0.92rem;
}

.compose-form__attachment-copy span,
.compose-form__attachment-list {
  font-size: 0.82rem;
}

.compose-form__attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  color: var(--text);
}

.compose-form__attachment-list li {
  max-inline-size: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-soft);
}

.recipient-picker {
  position: relative;
  min-width: 0;
}

.recipient-picker__surface {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.35rem 0;
}

.recipient-picker__input {
  flex: 1 1 10rem;
  min-width: 8rem;
  border: 0;
  background: transparent;
  padding: 0.25rem 0;
}

.recipient-picker__input:focus {
  box-shadow: none;
}

.recipient-picker__dropdown {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  z-index: 6;
}

.recipient-picker__option {
  width: 100%;
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.recipient-picker__option:hover {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border-soft);
}

.recipient-picker__option-main {
  display: grid;
  gap: 0.15rem;
}

.recipient-picker__option-main strong {
  font-size: 0.92rem;
}

.recipient-picker__option-main span {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.recipient-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.28rem 0.35rem 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}

.recipient-pill--unknown {
  background: var(--warning-bg);
  border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.recipient-pill__label,
.recipient-pill__remove {
  box-shadow: none;
}

.recipient-pill__label {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
}

.recipient-pill__label span {
  display: inline-block;
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recipient-pill__remove {
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
}

.recipient-pill__menu {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  width: 14rem;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px solid var(--border-soft);
  border-radius: 0.9rem;
  background: var(--bg);
  box-shadow: var(--shadow-lg);
  z-index: 7;
}

.recipient-pill__hint {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.recipient-pill__action {
  justify-self: start;
}

.compose-form__body {
  min-height: 20rem;
  border: 0;
  padding: var(--space-2) 0 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 1.15rem;
  line-height: 1.7;
  min-width: 0;
}

.compose-editor {
  display: grid;
  gap: var(--space-3);
}

.compose-editor__bubble {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 999px;
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  box-shadow: var(--shadow-lg);
}

.compose-editor__tool {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: none;
}

.compose-editor__tool--italic {
  font-style: italic;
}

.compose-editor__tool.is-active {
  background: var(--surface-strong);
  border-color: var(--border-soft);
}

.compose-editor__color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2rem;
  min-width: 2rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.compose-editor__color input {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  flex: 0 0 1rem;
  margin: 0;
  display: block;
}

.compose-editor__color input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.compose-editor__color input::-webkit-color-swatch {
  border: 0;
  border-radius: 999px;
}

.compose-editor__color input::-moz-color-swatch {
  border: 0;
  border-radius: 999px;
}

.compose-form__body {
  inline-size: 100%;
  min-block-size: 20rem;
  outline: none;
  font-family: var(--font-sans);
  font-size: 1.12rem;
  line-height: 1.7;
  --swc-editor-min-height: 20rem;
  --swc-editor-max-height: 70vh;
}

.compose-form__secondary {
  color: var(--text);
  background: var(--surface-soft);
  border-color: var(--border);
}

.compose-form__secondary:hover {
  color: var(--text);
  background: var(--surface);
}

.mailbox-section__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: var(--space-3) var(--space-5) var(--space-2);
}

.mailbox-section__header h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mailbox-section__header::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--border-soft);
}

.mailbox-section__count {
  color: var(--accent);
  font-weight: 850;
}

.maillists-page {
  gap: var(--space-6);
}

.maillists-layout {
  display: grid;
  grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.maillists-nav,
.maillists-content {
  background: color-mix(in srgb, var(--bg) 82%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.35rem;
  box-shadow: var(--shadow);
}

.maillists-nav {
  padding: var(--space-4);
  display: grid;
  gap: var(--space-3);
}

.maillists-nav__header,
.maillists-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.maillists-nav__header h2,
.maillists-content__header h2 {
  margin: 0;
  font-family: var(--font-sans);
}

.maillists-nav__list {
  display: grid;
  gap: var(--space-2);
}

.maillists-nav__item {
  padding: 0 !important;
  border: 0 !important;
}

.maillists-nav__link {
  display: grid !important;
  gap: 0.2rem;
  padding: 0.95rem 1rem !important;
  margin: 0 !important;
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-soft) 78%, var(--bg));
  color: var(--text) !important;
}

.maillists-nav__link:hover {
  text-decoration: none !important;
  border-color: color-mix(in srgb, var(--accent-alt) 35%, var(--border));
  transform: translateY(-1px);
}

.maillists-nav__link.is-active {
  border-color: color-mix(in srgb, var(--accent-alt) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-alt) 10%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-alt) 22%, transparent);
}

.maillists-nav__name {
  font-size: 1rem;
  font-weight: 700;
}

.maillists-nav__meta,
.maillists-content__header p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.maillists-nav__count {
  color: var(--accent-alt);
  font-size: 0.82rem;
  font-weight: 800;
}

.maillists-content {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.maillists-content > p {
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .maillists-layout {
    grid-template-columns: 1fr;
  }

}

.mailbox-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.mailbox-section-nav a,
.mailbox-section__load-more {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text);
  font-weight: 700;
}

.mailbox-section-nav a:hover,
.mailbox-section__load-more:hover {
  background: var(--surface-strong);
  border-color: var(--border);
  color: var(--text);
  text-decoration: none;
}

.mailbox-section__pager {
  display: flex;
  justify-content: center;
  min-height: 3rem;
}

.mailbox-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: center;
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.85rem;
  padding: 0.5rem var(--space-5);
  box-shadow: none;
  cursor: pointer;
  transition: background-color var(--native-control-duration, 120ms) ease,
    border-color var(--native-control-duration, 120ms) ease,
    box-shadow var(--native-control-duration, 120ms) ease,
    transform var(--native-control-duration, 120ms) ease;
}

.mailbox-card:hover {
  background: var(--native-row-hover-bg, color-mix(in srgb, var(--surface) 44%, transparent));
  border-color: color-mix(in srgb, var(--accent-alt) 20%, transparent);
  box-shadow: var(--native-row-hover-shadow, none);
  transform: var(--native-row-hover-transform, none);
  z-index: 2;
}

/* [.is-open] was set by alpine while the legacy absolute-positioned
   note editor was visible; the native popover renders in the top
   layer so the row no longer needs a z-index lift. */

.mailbox-card.is-selected {
  border-color: color-mix(in srgb, var(--accent-alt) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-alt) 12%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-alt) 18%, transparent);
}

.mailbox-card__status {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.mailbox-card__dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--accent);
}

.mailbox-card__dot.is-read {
  background: transparent;
}

.mailbox-card__avatar {
  border: 0;
  width: 2.55rem;
  height: 2.55rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  font-size: 0.92rem;
}

.mailbox-card__avatar--read {
  background: transparent;
  color: var(--accent-alt);
  border: 4px solid var(--accent-alt);
}

.mailbox-card__avatar-check {
  display: none;
  font-size: 1.4rem;
  line-height: 1;
}

.mailbox-card.is-selected .mailbox-card__avatar {
  background: var(--accent-alt);
  border-color: var(--accent-alt);
  color: var(--on-accent);
}

.mailbox-card.is-selected .mailbox-card__avatar-initials {
  display: none;
}

.mailbox-card.is-selected .mailbox-card__avatar-check {
  display: inline;
}

.mailbox-card__content {
  min-width: 0;
  display: grid;
  gap: 0.05rem;
}

.mailbox-card__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  justify-content: space-between;
}

.mailbox-card__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.mailbox-card__conversation-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.25rem 0.55rem;
  background: color-mix(in srgb, var(--accent-alt) 10%, var(--surface));
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1;
}

.mailbox-card__conversation-link:hover {
  color: var(--accent-alt);
  background: color-mix(in srgb, var(--accent-alt) 16%, var(--surface));
}

.mailbox-card__conversation-icon {
  font-size: 0.9rem;
}

.mailbox-card__conversation-count {
  min-width: 0.8rem;
  text-align: center;
}

.mailbox-card__subject {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.18;
}

.mailbox-card__subject:hover {
  color: var(--accent-alt);
}

.mailbox-card__date {
  flex: none;
  color: var(--text-muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.mailbox-card__meta {
  margin: 0;
  color: var(--text-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  line-height: 1.25;
}

.mailbox-card__sender {
  color: var(--text);
  font-weight: 600;
}

.screened-out-page {
  display: grid;
  gap: var(--space-6);
}

.screened-out-section,
.screened-out-list {
  display: grid;
  gap: var(--space-4);
}

.screened-out-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.screened-out-rule {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: stretch;
}

.screened-out-rule__actions {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  position: sticky;
  top: calc(var(--app-topbar-clearance) + var(--space-2));
}

.screened-out-rule__recover {
  width: 5.25rem;
  min-height: 3.6rem;
  height: 100%;
  padding: 0.5rem 0.4rem;
  gap: 0.25rem;
}

.screened-out-rule__icon {
  width: 2rem;
  height: 2rem;
  color: var(--on-accent);
  background: var(--accent-alt);
  font-size: 1.35rem;
}

.screened-out-rule__details {
  min-width: 0;
}

.screened-out-rule__name,
.screened-out-rule__address {
  margin: 0;
}

.screened-out-rule__address {
  white-space: normal;
}

.screener-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  isolation: isolate;
}

.screener-entry:has(.screener-overflow[open]) {
  z-index: 60;
}

.screener-entry__actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-self: center;
  gap: 0.55rem;
  position: sticky;
  top: calc(var(--app-topbar-clearance) + var(--space-2));
  z-index: 20;
}

.screener-entry__actions:has(.screener-overflow[open]) {
  z-index: 70;
}

.screener-entry__details {
  margin: 0;
  padding: 0;
  border: 0;
}

.screener-entry__summary {
  list-style: none;
}

.screener-entry__summary::before,
.screener-entry__details > summary::before,
.screener-entry__details[open] > summary::before {
  content: none;
}

.screener-decision,
.screener-more-toggle {
  flex: none;
  color: var(--text);
  background: color-mix(in srgb, var(--bg) 92%, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.screener-decision {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.6rem;
  min-height: 4.2rem;
  gap: 0.15rem;
  border-radius: 1rem;
  padding: 0.6rem 0.45rem;
}

.screener-decision:hover,
.screener-more-toggle:hover {
  color: var(--text);
  background: var(--bg);
  transform: translateY(-1px);
}

.screener-decision__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 85%, var(--bg));
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.screener-decision__label {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.screener-more-toggle {
  width: 3rem;
  min-height: 2.6rem;
  border-radius: 999px;
  padding: 0.35rem;
}

.screener-more-toggle__icon {
  font-size: 1rem;
  line-height: 1;
}

.screener-more-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screener-action--suggested {
  border-color: color-mix(in srgb, var(--accent-alt) 60%, var(--border));
  background: color-mix(in srgb, var(--accent-alt) 10%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-alt) 28%, transparent);
}

.screener-action--suggested .screener-decision__icon {
  color: var(--on-accent);
  background: var(--accent-alt);
}

.screener-ai-toggle {
  width: 0.95rem;
  height: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: 999px;
  color: var(--accent);
  background: transparent;
  font-size: 0.78rem;
}

.screener-ai-toggle:hover,
.screener-ai-toggle:focus-visible {
  color: var(--on-accent);
  background: var(--accent);
}

.screener-ai-toggle[aria-expanded="true"] {
  color: var(--on-accent);
  background: var(--accent);
}

.screener-ai-toggle__icon {
  line-height: 1;
}

.screener-overflow {
  position: relative;
  z-index: 1;
}

.screener-overflow[open] {
  z-index: 80;
}

/* Opt the three-dots <details> out of the global [details > summary]
   styling further down this file — that rule paints a "▸" caret via
   ::before and reserves 1.25rem of left padding for it. Neither
   belong on a circular icon button, so we reset them all here AND
   kill the UA disclosure marker in one block. */
.screener-overflow > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0.35rem;
  border-top: 0;
}

.screener-overflow > summary::-webkit-details-marker {
  display: none;
}

.screener-overflow > summary::marker {
  content: "";
}

.screener-overflow > summary::before,
.screener-overflow[open] > summary::before {
  content: none;
}

.screener-overflow__menu {
  display: none;
  position: absolute;
  left: calc(100% + 0.65rem);
  top: 0;
  bottom: auto;
  width: min(18.5rem, calc(100vw - 2rem));
  z-index: 90;
}

.screener-overflow[open] .screener-overflow__menu {
  display: block;
}

.screener-overflow__item {
  width: 100%;
  justify-items: start;
  text-align: left;
  background: transparent;
  border: 0;
}

.screener-overflow__item.is-selected {
  background: var(--surface-strong);
}

.screener-overflow__item .topbar-row-link__body {
  text-align: left;
}

.screener-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.screener-tag-list__item {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, var(--bg));
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

/* LLM suggestion panel shown directly below the message summary. Keep this
   subordinate to the sender card: compact metadata, visible reason, and one
   small accept action for the exact proposed decision. */
.screener-suggestion {
  --suggestion-accent: var(--accent-alt);
  --suggestion-accent-soft: color-mix(in srgb, var(--suggestion-accent) 12%, var(--bg));
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--suggestion-accent);
  border-radius: 0.75rem;
  background: var(--suggestion-accent-soft);
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto auto auto;
  gap: var(--space-2);
  align-items: center;
}

/* Per-decision accents pull from theme-scoped variables so the dark and
   light variants each pick the Gruvbox hue that reads well on their
   background. See --decision-* in themes/gruvbox.css. */
.screener-suggestion--decision-imbox        { --suggestion-accent: var(--decision-imbox); }
.screener-suggestion--decision-block        { --suggestion-accent: var(--decision-block); }
.screener-suggestion--decision-feed         { --suggestion-accent: var(--decision-feed); }
.screener-suggestion--decision-papertrail   { --suggestion-accent: var(--decision-papertrail); }
.screener-suggestion--decision-mistakes     { --suggestion-accent: var(--decision-mistakes); }
.screener-suggestion--decision-mailing_list { --suggestion-accent: var(--decision-mailing_list); }
.screener-suggestion--decision-pending      { --suggestion-accent: var(--text-muted); }

.screener-suggestion--error {
  --suggestion-accent: var(--danger);
}

.screener-suggestion__headline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--space-2);
  margin: 0;
  min-width: 0;
}

.screener-suggestion__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--suggestion-accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.screener-suggestion__eyebrow {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  color: var(--text-muted);
}

.screener-suggestion__decision-name {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--suggestion-accent);
  line-height: 1.2;
}

.screener-suggestion__confidence {
  grid-column: 2;
  grid-row: 1;
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border-soft) 60%, var(--bg));
}

.screener-suggestion__reason,
.screener-suggestion__error-body {
  margin: 0;
  color: var(--text);
  line-height: 1.35;
  font-size: 0.9rem;
}

.screener-suggestion__reason {
  display: none;
}

.screener-suggestion__error-body {
  grid-column: 1 / -1;
}

.screener-suggestion > .screener-tag-list {
  grid-column: 3;
  margin-top: 0;
  justify-content: flex-end;
}

.screener-suggestion__hints {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-2);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.screener-suggestion__hints li::before {
  content: "• ";
  color: var(--suggestion-accent);
}

.screener-suggestion__accept-form {
  grid-column: 4;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-self: center;
  justify-self: end;
}

.screener-suggestion__accept {
  min-width: 0;
  padding: 0.42rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.15;
  background: var(--suggestion-accent);
  border-color: var(--suggestion-accent);
  color: var(--on-accent);
}

.screener-suggestion__accept:hover,
.screener-suggestion__accept:focus-visible {
  background: color-mix(in srgb, var(--suggestion-accent) 82%, var(--text));
  border-color: color-mix(in srgb, var(--suggestion-accent) 82%, var(--text));
  color: var(--on-accent);
}

.screener-thread {
  padding: 0 var(--space-5) var(--space-5);
}

.screener-thread__label {
  margin: 0 0 var(--space-3);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.screener-thread__list {
  display: grid;
  gap: var(--space-2);
}

.screener-thread__item {
  padding: 0 !important;
  border: 0 !important;
}

.screener-thread__link {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 1rem;
  color: inherit;
}

.screener-thread__link:hover {
  text-decoration: none;
  color: inherit;
  border-color: color-mix(in srgb, var(--accent-alt) 45%, var(--border));
}

.screener-thread__link strong {
  font-size: 0.98rem;
}

.screener-thread__link p {
  margin: 0;
  color: var(--text-muted);
}

.screener-dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 1.25rem;
  background: transparent;
  box-shadow: none;
}

.screener-dialog::backdrop {
  background: var(--overlay-backdrop);
  backdrop-filter: blur(3px);
}

.screener-dialog__panel {
  background: var(--overlay-bg);
  border: 1px solid var(--overlay-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}

.screener-dialog__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.screener-dialog__header h3 {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
}

.screener-dialog__header p {
  margin: 0;
  color: var(--text-muted);
}

/* Palette for [.screener-button--ghost], [.screener-button--primary],
   and [.screener-dialog__close] is applied via the shared ghost/primary
   rules near the top of this file. */

.screener-dialog__form {
  display: grid;
  gap: var(--space-4);
}

.screener-dialog__form label {
  margin: 0;
}

.screener-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Forms & buttons
--------------------------------------------------------------------------- */

form { margin: 0; }

form label {
  display: block;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
form label > input,
form label > textarea,
form label > select {
  margin-top: var(--space-1);
}

input, textarea, select {
  display: block;
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input[type="checkbox"], input[type="radio"] {
  width: auto;
  display: inline-block;
  margin-right: var(--space-2);
  accent-color: var(--accent);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15);
}

textarea { min-height: 8rem; resize: vertical; font-family: var(--font-sans); }

fieldset {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}
legend {
  font-family: var(--font-serif);
  font-weight: 600;
  padding: 0 var(--space-2);
  color: var(--text);
}

button,
input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: inherit;
  font-weight: 500;
  color: var(--bg);
  background: var(--text);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 80ms ease;
}
button:hover { background: var(--accent); }
button:active { transform: translateY(1px); }
button[type="submit"][value="send"],
button[type="submit"]:not([value]):not([name]) { /* primary action */ }

form footer,
article > footer > form {
  display: inline;
}

article > footer form + form,
form + form { margin-left: var(--space-2); }

details > summary {
  cursor: pointer;
  font-weight: 500;
  padding: var(--space-2) 0;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-left: 1.25rem;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--text-muted);
  transition: transform 120ms ease;
}
details[open] > summary::before { transform: rotate(90deg); }

details {
  border-top: 1px solid var(--border-soft);
  padding: var(--space-2) 0;
}
details:last-of-type { border-bottom: 1px solid var(--border-soft); }

/* Mailbox rows are reused by Feed, Paper Trail, Mistakes, and Screener. Keep
   those pages on the compact mailbox treatment even after the generic element
   rules above have styled buttons, details, summaries, and paragraphs. */
.mailbox .mailbox-section {
  align-content: start;
  gap: 0.15rem;
}

.mailbox .mailbox-section-nav {
  gap: var(--space-2);
}

.mailbox .mailbox-section-nav a,
.mailbox .mailbox-section__load-more {
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}

.mailbox .mailbox-card {
  gap: 0.7rem;
  background: transparent;
  border-color: transparent;
  border-radius: 0.85rem;
  padding: 0.5rem var(--space-5);
  box-shadow: none;
}

.mailbox .mailbox-card__actions,
.mailbox .mailbox-card__meta {
  margin: 0;
}

.mailbox details.screener-entry__details,
.mailbox details.screener-entry__details:last-of-type {
  border: 0;
  padding: 0;
}

.mailbox details.screener-entry__details > summary {
  padding: 0;
}

.mailbox details.screener-entry__details > summary::before,
.mailbox details.screener-entry__details[open] > summary::before {
  content: none;
}

/* ---------------------------------------------------------------------------
   Tables (mailbox status on overview)
--------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-4);
}
th, td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-soft);
}
th {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-5);
  margin: 0 0 var(--space-5);
}
dt { color: var(--text-muted); font-size: 0.875rem; }
dd { margin: 0; color: var(--text); font-weight: 500; }

/* ---------------------------------------------------------------------------
   Search landmark
--------------------------------------------------------------------------- */

search form {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
search form label { flex: 1; margin: 0; }
search form input[type="search"] {
  font-size: 1rem;
  padding: var(--space-3);
}

/* ---------------------------------------------------------------------------
   Mobile
--------------------------------------------------------------------------- */

@media (max-width: 768px) {
  #app-topbar {
    grid-template-columns: 1fr;
    padding: var(--space-3) var(--space-3) 0;
    gap: var(--space-3);
  }

  :root {
    --app-topbar-clearance: 8.5rem;
  }

  .app-topbar__brand,
  .app-topbar__account {
    justify-self: stretch;
  }

  .app-topbar__brand-button,
  .app-topbar__account-button {
    width: 100%;
    justify-content: space-between;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 78%, var(--surface-soft));
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow);
  }

  .app-topbar__account-name {
    flex: 1 1 auto;
    text-align: left;
  }

  .app-topbar__menu,
  .ahoj-menu,
  .account-menu {
    --topbar-menu-x: 0;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
  }

  .ahoj-menu__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-main {
    padding: var(--space-4);
  }

  dl { grid-template-columns: 1fr; gap: 0 var(--space-3); }
  dd { margin-bottom: var(--space-3); }
  table { font-size: 0.875rem; }
  th, td { padding: var(--space-2); }

  .screener-entry,
  .screened-out-rule {
    grid-template-columns: 1fr;
  }

  .screener-entry__actions,
  .screened-out-rule__actions {
    justify-content: start;
    position: static;
  }

  .screener-overflow__menu {
    left: 0;
    right: auto;
    top: calc(100% + 0.65rem);
    bottom: auto;
  }

  .screener-thread {
    padding: 0 var(--space-4) var(--space-4);
  }

  .screener-suggestion {
    grid-template-columns: 1fr;
  }

  .screener-suggestion__headline,
  .screener-suggestion__confidence,
  .screener-suggestion > .screener-tag-list,
  .screener-suggestion__accept-form {
    grid-column: 1;
  }

  .screener-suggestion__confidence {
    justify-self: start;
    margin-left: 0;
  }

  .screener-suggestion__accept-form {
    justify-self: start;
  }

  .mailbox-toolbar {
    top: calc(var(--app-topbar-clearance) + var(--space-2));
    width: calc(100vw - (var(--space-3) * 2));
    max-width: calc(100vw - (var(--space-3) * 2));
  }

  .mailbox-toolbar__menu {
    grid-template-columns: 1fr;
  }

  .mailbox-toolbar__primary,
  .mailbox-toolbar__secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mailbox-toolbar__dismiss {
    justify-self: end;
  }

  .mailbox-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
  }

  .mailbox > nav {
    grid-template-columns: 1fr;
  }

  .mailbox > nav > a {
    justify-self: center;
  }

  .mailbox-card__header {
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
  }

  .message > article > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .message > article > header > time {
    grid-column: 1 / -1;
    text-align: left;
    padding-top: 0;
  }

  .message > nav {
    bottom: var(--space-2);
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5rem; }
  .screener-entry__actions {
    gap: 0.45rem;
  }

  .screener-decision {
    width: 100%;
  }

  .screener-overflow__menu {
    left: 0;
    right: 0;
    width: auto;
  }

  .mailbox-toolbar__primary,
  .mailbox-toolbar__secondary {
    grid-template-columns: 1fr;
  }

  .mailbox-card {
    padding: 0.55rem var(--space-3);
  }

  .mailbox {
    padding-inline: var(--space-2);
  }

  .mailbox-section__header {
    padding-inline: var(--space-3);
  }

  .mailbox-card__meta {
    white-space: normal;
  }

  .message-action {
    flex: 1 1 calc(50% - var(--space-2));
    justify-content: center;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   SWC widget integration

   SWC documents theme customization through CSS custom properties on the
   custom-element hosts. Keep this scoped to the actual hosts rather than
   leaking generic --swc-* values from :root; the widget shadow DOM defines
   its own defaults on :host, so app tokens must be applied directly here.
--------------------------------------------------------------------------- */
.swc-calendar-host,
.swc-editor-host > swc-editor {
  --swc-color-bg: var(--bg);
  --swc-color-fg: var(--text);
  --swc-color-muted: var(--text-muted);
  --swc-color-border: var(--border);
  --swc-color-border-strong: var(--border-strong);
  --swc-color-surface: var(--surface);
  --swc-color-surface-hover: var(--surface-soft);
  --swc-color-surface-active: var(--surface-strong);
  --swc-color-accent: var(--accent);
  --swc-color-accent-fg: var(--on-accent);
  --swc-color-accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --swc-color-danger: var(--danger);
  --swc-color-success: var(--success);
  --swc-color-warning: var(--warning);
  --swc-color-focus-ring: var(--focus);
  --swc-font-family: var(--font-sans);
  --swc-font-family-mono: var(--font-mono);
  --swc-font-size-sm: 0.875rem;
  --swc-font-size-md: 1rem;
  --swc-font-size-lg: 1.125rem;
  --swc-line-height: 1.55;
  --swc-radius-sm: var(--radius-sm);
  --swc-radius-md: var(--radius);
  --swc-radius-lg: var(--radius-lg);
  --swc-border-width: 1px;
  --swc-space-1: var(--space-1);
  --swc-space-2: var(--space-2);
  --swc-space-3: var(--space-3);
  --swc-space-4: var(--space-4);
  --swc-space-6: var(--space-6);
  --swc-space-8: var(--space-8);
  --swc-shadow-sm: var(--shadow);
  --swc-shadow-md: var(--shadow-lg);
  --swc-shadow-lg: var(--shadow-lg);
  --swc-transition-fast: 120ms ease;
  --swc-transition-base: 200ms ease;
  --swc-cal-time-w: 5.75rem;
  --swc-cal-modal-z: 10000;
}

.swc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
}

.swc-layout--with-search {
  grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr);
  align-items: start;
}

.swc-layout--calendar-only .swc-calendar-shell {
  grid-column: 1 / -1;
}

.calendar-countdowns {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  border-block-end: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.calendar-countdowns__header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
}

.calendar-countdowns__header h2 {
  margin: 0;
  color: var(--text);
  font-size: 0.95rem;
}

.calendar-countdowns__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.calendar-countdowns__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-inline-size: min(100%, 26rem);
  padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.calendar-countdowns__item:hover,
.calendar-countdowns__item:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  outline: none;
}

.calendar-countdowns__item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-countdowns__time {
  flex: 0 0 auto;
  color: var(--accent);
  font-weight: 800;
}

.swc-calendar-shell {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  min-inline-size: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 0.08);
  overflow: visible;
}

.swc-calendar-host {
  inline-size: 100%;
}

.swc-calendar-host swc-calendar-wrapper,
.swc-calendar-host swc-calendar {
  inline-size: 100%;
  min-inline-size: 0;
}

.swc-calendar-host swc-calendar {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  border: 0;
}

.swc-calendar-host swc-calendar-header,
.swc-calendar-host .swc-view-selection,
.swc-calendar-host .swc-date-input-wrapper {
  border-color: var(--border);
}

.swc-calendar-host .swc-time-grid-day {
  position: relative;
}

.ahoj-calendar-now-line {
  position: absolute;
  inset-inline: 0.15rem 0;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  pointer-events: none;
  transform: translateY(-50%);
}

.ahoj-calendar-now-line::before {
  content: "";
  flex: 1;
  block-size: 2px;
  border-radius: 999px;
  background: currentcolor;
  box-shadow: 0 0 0.4rem color-mix(in srgb, var(--accent) 42%, transparent);
}

.ahoj-calendar-now-line__dot {
  inline-size: 0.55rem;
  block-size: 0.55rem;
  border-radius: 999px;
  background: currentcolor;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.ahoj-calendar-now-line__label {
  border-radius: 999px;
  background: var(--surface);
  padding: 0.08rem 0.32rem;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.swc-search-results {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 0.9rem;
}

.swc-search-results nav {
  display: grid;
  gap: 0.5rem;
}

.swc-search-result {
  display: grid;
  gap: 0.1rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.swc-search-result:hover,
.swc-search-result:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.swc-search-result span,
.swc-search-result small {
  color: var(--muted);
}

@media (max-width: 56rem) {
  .swc-layout {
    grid-template-columns: 1fr;
  }

  .swc-calendar-host {
    min-block-size: 36rem;
    block-size: 72vh;
  }
}


.message-invitations {
  display: grid;
  gap: var(--space-3);
}

.calendar-invite-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding: 0.7rem;
  border: 1px solid color-mix(in srgb, var(--surface-strong) 60%, var(--panel-border));
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface-strong) 38%, var(--bg));
}

.calendar-invite-card__event {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.85rem;
  min-inline-size: 0;
}

.calendar-invite-card__date-tile {
  display: grid;
  align-content: start;
  justify-items: center;
  overflow: hidden;
  inline-size: 3.4rem;
  border: 1px solid var(--accent);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--text);
  text-align: center;
}

.calendar-invite-card__month {
  inline-size: 100%;
  padding-block: 0.08rem;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-invite-card__day {
  font-size: 1.25rem;
  line-height: 1.05;
  padding-block-start: 0.18rem;
}

.calendar-invite-card__weekday {
  color: var(--muted-text);
  font-size: 0.64rem;
  font-weight: 700;
  padding-block-end: 0.2rem;
  text-transform: uppercase;
}

.calendar-invite-card__main {
  display: grid;
  gap: 0.28rem;
  min-inline-size: 0;
}

.calendar-invite-card__eyebrow {
  color: var(--muted-text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.calendar-invite-card__title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.calendar-invite-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text);
  font-size: 0.88rem;
}

.calendar-invite-card__facts li {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-inline-size: 0;
}

.calendar-invite-card__fact-icon {
  display: inline-block;
  inline-size: 1em;
  color: var(--muted-text);
  text-align: center;
}

.calendar-invite-card__map-link {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  text-decoration: none;
}

.calendar-invite-card__map-link:hover {
  color: var(--accent);
}

.calendar-invite-card__description {
  margin: 0;
  color: var(--text);
  font-size: 0.88rem;
}

.calendar-invite-card__reply {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.calendar-invite-card__import-form,
.calendar-invite-card__rsvp-form {
  margin: 0;
}

.calendar-invite-card__add,
.calendar-invite-card__rsvp {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.42rem 0.68rem;
  background: var(--button-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
}

.calendar-invite-card__rsvp-icon {
  font-size: 0.9rem;
  line-height: 1;
}

.calendar-invite-card__response {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 0.42rem 0.68rem;
  background: color-mix(in srgb, var(--button-bg) 78%, var(--surface));
  color: var(--text);
  font-size: 0.84rem;
  font-weight: 850;
}

.calendar-invite-card__response-icon {
  line-height: 1;
}

.calendar-invite-card__response--accepted {
  background: var(--accent);
  color: var(--accent-contrast);
}

.calendar-invite-card__response--declined {
  background: transparent;
}

.calendar-invite-card__response--tentative {
  background: color-mix(in srgb, var(--button-bg) 86%, var(--accent));
}

.calendar-invite-card__rsvp--yes {
  background: var(--accent);
  color: var(--accent-contrast);
}

.calendar-invite-card__rsvp--maybe {
  background: color-mix(in srgb, var(--button-bg) 86%, var(--accent));
}

.calendar-invite-card__rsvp--no,
.calendar-invite-card__add {
  background: transparent;
  border-color: var(--panel-border);
}

.calendar-invite-card__add {
  color: var(--muted-text);
  font-size: 0.82rem;
}

@media (max-width: 46rem) {
  .calendar-invite-card {
    grid-template-columns: 1fr;
  }

  .calendar-invite-card__reply {
    justify-content: flex-start;
  }
}

/* Search page — same card chrome as .mailbox / .contacts. Results
   are grouped by kind into <section>s, each holding a <header>
   (h2 + count) and a flat sequence of <article> result rows. No
   subordinate classes — styling is descendant-selector-driven and
   theme tokens are reused so the page reads correctly in both
   light and dark themes. */
.search {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4) clamp(var(--space-4), 4vw, var(--space-8));
  background: color-mix(in srgb, var(--bg) 72%, var(--surface-soft));
  border: 1px solid var(--border-soft);
  border-radius: 1.35rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.search > header {
  display: grid;
  gap: var(--space-1);
}

.search > header h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
}

.search > header p {
  margin: 0;
  color: var(--text-muted);
}

.search > header span[data-search-query] {
  color: var(--text);
  font-weight: 700;
}

.search > .empty-state {
  text-align: center;
  color: var(--text-muted);
  padding: var(--space-6) 0;
}

/* Per-kind group: header (label + count) then articles. */
.search > section {
  display: grid;
  gap: var(--space-2);
}

.search > section > header {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: var(--space-2);
}

.search > section > header h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
}

.search > section > header span {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Each result is an <article> wrapping a single <a>. The link grids
   the kind tag, title, and snippet. */
.search > section > article {
  border-bottom: 1px solid var(--border-soft);
}

.search > section > article:last-child {
  border-bottom: 0;
}

.search > section > article > a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-2);
  color: inherit;
  text-decoration: none;
}

.search > section > article > a:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  text-decoration: none;
}

.search > section > article > a > header {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.search > section > article > a > header h3 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
}

/* Kind tag — small uppercase pill, color keyed off the article's
   data-kind so each kind gets a distinct accent from the theme. */
.search > section > article > a > header span {
  grid-column: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--accent-alt);
}

.search article[data-kind="message"] > a > header > span { background: var(--decision-imbox); }
.search article[data-kind="event"] > a > header > span { background: var(--decision-feed); }
.search article[data-kind="note"] > a > header > span { background: var(--decision-papertrail); color: var(--text); }
.search article[data-kind="contact"] > a > header > span { background: var(--accent-alt); }
.search article[data-kind="document"] > a > header > span { background: var(--text-muted); }

.search > section > article > a > p {
  grid-column: 2;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}