/* No rubber-band bounce past the top or bottom of the page. */
html { scrollbar-width: none; overscroll-behavior-y: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; min-height: 100dvh; }

/* Keyboard focus: a faint 1px hairline in place of the theme's thick 3px ring.
   Mouse clicks never show it (:focus-visible only). Text fields are left out:
   they have their own cues (the search glow, the reply tint, the caret). */
[data-trylle-theme] :where(button, a, select, summary):focus-visible {
  outline: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent);
  outline-offset: 2px;
}

.app {
  max-width: var(--container-3xl);
  margin: 0 auto;
  /* Side gutters grow into a notch or rounded corner in landscape (safe areas). */
  --gl: max(24px, env(safe-area-inset-left));
  --gr: max(24px, env(safe-area-inset-right));
  padding: 32px var(--gr) 96px var(--gl);
}

/* The toolbar reaches past the column by the app's side padding, so rows' tubes and
   glows (which overhang the column) pass underneath it instead of beside it.
   Scrolled, it slims down; its bottom margin grows by exactly what the padding and
   search lose, so the page below never shifts. */
.toolbar {
  --toolbar-ease: 240ms var(--ease-out);
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr));
  padding: 16px var(--gr) 12px var(--gl);
  background: color-mix(in oklab, var(--background) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: padding var(--toolbar-ease), margin var(--toolbar-ease);
}
/* A short fade under the bar, so rows dissolve into it rather than meeting a hard line. */
.toolbar::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 18px;
  background: linear-gradient(color-mix(in oklab, var(--background) 92%, transparent), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--toolbar-ease);
}
.toolbar { flex-wrap: wrap; }

/* Beacon: a short-lived, lit row under the search that surfaces one actionable thing
   from your mail (a code, a meeting, a payment link…). Enter acts when nothing has focus.
   Its height opens and closes from app.js; everything inside is choreographed here. */
.beacon {
  --label: var(--brand);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  position: relative;
  flex: 1 0 100%; /* its own row, the same width as the search above it */
  transition: height var(--toolbar-ease), scale 120ms var(--ease-out);
  display: flex;
  align-items: center;
  height: 38px;
  padding-right: 4px;
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-3);
  box-shadow: var(--overview-metric-card-shadow);
}
[data-trylle-theme="dark"] .beacon { background: var(--ff-surface-3); box-shadow: var(--ff-shadow-3); }
.beacon[hidden] { display: none; }
.toolbar[data-compact] .beacon { height: 34px; }
/* Pressing anywhere on it gives a hair of give. */
.beacon:has(.beacon-act:active) { scale: .996; }

/* Glow off the tube: fades in on arrival, brightens on hover and when copied. */
.beacon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--label) 16%, transparent),
    color-mix(in oklab, var(--label) 5%, transparent) 90px,
    transparent 240px);
  opacity: .8;
  animation: beacon-glow-in 520ms 60ms var(--ease-out) backwards;
  transition: opacity 220ms var(--ease-out);
}
[data-trylle-theme="dark"] .beacon::before {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--label) 26%, transparent),
    color-mix(in oklab, var(--label) 8%, transparent) 90px,
    transparent 240px);
}
.beacon:has(.beacon-act:hover)::before, .beacon[data-done]::before { opacity: 1; }
/* Handing over to the next beacon re-lights the glow in the new colour
   (a different animation name restarts it). */
.beacon[data-swap="a"]::before { animation-name: beacon-glow-in-a; }
.beacon[data-swap="b"]::before { animation-name: beacon-glow-in-b; }

/* Copy: a band of light sweeps across, left to right, once. */
.beacon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 35%, color-mix(in oklab, var(--label) 22%, transparent) 50%, transparent 65%);
  translate: -100% 0;
  pointer-events: none;
}
[data-trylle-theme="dark"] .beacon::after {
  background: linear-gradient(100deg, transparent 35%, color-mix(in oklab, color-mix(in oklab, var(--label) 50%, white) 22%, transparent) 50%, transparent 65%);
}
.beacon[data-done]::after { animation: beacon-sheen 720ms var(--ease-out); }

.beacon-act {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 0 10px 0 12px;
  border: 0;
  background: none;
  color: var(--foreground);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
[data-trylle-theme] .beacon-act:focus-visible { outline-offset: -3px; border-radius: 9px; }

/* The tube lights from its middle outward, then flares white on copy. */
.beacon-tube {
  flex: none;
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--label) 78%, white);
  box-shadow: 0 0 1px 0 var(--label), 0 0 4px 0 color-mix(in oklab, var(--label) 70%, transparent);
  animation: beacon-tube-in 420ms 40ms var(--ease-spring) backwards;
}
[data-trylle-theme="dark"] .beacon-tube { background: color-mix(in oklab, var(--label) 40%, white); box-shadow: 0 0 1px 0 var(--label), 0 0 6px 0 var(--label); }
.beacon[data-done] .beacon-tube { animation: beacon-flare 900ms var(--ease-out); }

.beacon-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted-foreground); }
.beacon-text strong { color: var(--foreground); font-weight: 500; }
.beacon-value {
  display: inline-flex;
  flex: none;
  gap: .38em;
  color: var(--foreground);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: scale 120ms var(--ease-out), color 200ms var(--ease-out);
}
/* Codes are the one thing you read digit by digit: mono, heavier, a touch tracked. */
.beacon[data-kind="code"] .beacon-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
/* A quoted question can run long; it gives way before the action does. */
.beacon[data-kind="waiting"] .beacon-value { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: color-mix(in oklab, var(--foreground) 85%, var(--muted-foreground)); font-weight: 400; }
/* More beacons waiting behind this one. */
.beacon-more {
  flex: none;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 7%, transparent);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  animation: beacon-rise 360ms 160ms var(--ease-out) backwards;
}
.beacon-act:active .beacon-value { scale: .97; }
.beacon[data-done] .beacon-value { animation: beacon-pop 420ms var(--ease-spring); }

/* Arrival: content follows the tube in a short stagger, rising 3px. */
.beacon-text, .beacon-value, .beacon-hint, .beacon-dismiss { animation: beacon-rise 360ms var(--ease-out) backwards; }
.beacon-text { animation-delay: 90ms; }
.beacon-value { animation-delay: 130ms; }
.beacon-hint { animation-delay: 190ms; }
.beacon-dismiss { animation-delay: 220ms; }

.beacon-hint {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: 12px;
  transition: color 150ms var(--ease-in-out);
}
.beacon-hint .tl-kbd {
  padding: 0 5px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent), 0 1px 0 color-mix(in oklab, var(--border) 70%, transparent);
  transition: translate 90ms var(--ease-out), box-shadow 90ms var(--ease-out), color 150ms;
}
/* Enter: the key visibly goes down before the confirmation replaces it. */
.beacon[data-pressing] .beacon-hint .tl-kbd {
  translate: 0 1px;
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 30%, transparent), 0 0 0 transparent;
}
.beacon-act:hover .beacon-hint { color: var(--foreground); }
.beacon[data-done] .beacon-hint { color: var(--brand); font-weight: 500; animation: beacon-rise 260ms var(--ease-out) backwards; }
/* The check draws itself (its path is ~20 units long). */
.beacon-hint .tl-icon { width: 14px; height: 14px; stroke-width: 2; stroke-dasharray: 20; animation: beacon-check 380ms 60ms var(--ease-out) backwards; }

.beacon-dismiss {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 150ms var(--ease-in-out), color 150ms var(--ease-in-out), scale 120ms var(--ease-out), rotate 200ms var(--ease-out);
}
.beacon-dismiss:hover { background: var(--accent); color: var(--foreground); rotate: 90deg; }
.beacon-dismiss:active { scale: .9; }
.beacon-dismiss .tl-icon { width: 14px; height: 14px; }


@keyframes beacon-glow-in { from { opacity: 0; } }
@keyframes beacon-glow-in-a { from { opacity: 0; } }
@keyframes beacon-glow-in-b { from { opacity: 0; } }
@keyframes beacon-tube-in { from { transform: scaleY(0); opacity: 0; } }
@keyframes beacon-rise { from { opacity: 0; translate: 0 3px; } }
@keyframes beacon-sheen { from { translate: -100% 0; } to { translate: 100% 0; } }
@keyframes beacon-pop { 40% { scale: 1.05; } }
@keyframes beacon-check { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes beacon-flare {
  25% {
    background: #fff;
    box-shadow: 0 0 2px #fff, 0 0 8px var(--label), 0 0 18px var(--label), 6px 0 28px color-mix(in oklab, var(--label) 60%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .beacon::before, .beacon::after, .beacon-tube, .beacon-text, .beacon-value, .beacon-hint, .beacon-dismiss,
  .beacon[data-done] .beacon-tube, .beacon[data-done] .beacon-value, .beacon[data-done] .beacon-hint, .beacon-hint .tl-icon { animation: none; }
}

.toolbar[data-compact] { padding-top: 8px; padding-bottom: 8px; margin-bottom: 18px; }
.toolbar[data-compact]::after { opacity: 1; }
/* With a beacon showing, the compact bar also takes 4px off it; the margin makes that up too. */
.toolbar[data-compact]:has(.beacon:not([hidden])) { margin-bottom: 22px; }

.search { flex: 1; min-height: 40px; cursor: text; transition: min-height var(--toolbar-ease), box-shadow 180ms var(--ease-out); }
.toolbar[data-compact] .search { min-height: 34px; }
/* Hover: the faintest hint of the focus hairline, so the bar feels touchable. */
.search.tl-input-group:hover:not(:focus-within) {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 9%, transparent), var(--overview-metric-card-shadow);
}
[data-trylle-theme="dark"] .search.tl-input-group:hover:not(:focus-within) {
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent), var(--ff-shadow-3);
}
.search .tl-input { height: auto; min-height: 0; font-size: 14px; } /* the group sets the height, so it can slim down */
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search .tl-kbd { padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }
.search:focus-within .tl-kbd { visibility: hidden; }
/* Focus: a hairline of light with a soft halo, like the app's other glows, instead of a thick ring. */
.search.tl-input-group:focus-within {
  outline: none;
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--foreground) 16%, transparent),
    0 0 14px -2px color-mix(in oklab, var(--foreground) 10%, transparent),
    var(--overview-metric-card-shadow);
}
[data-trylle-theme="dark"] .search.tl-input-group:focus-within {
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--foreground) 22%, transparent),
    0 0 16px -2px color-mix(in oklab, var(--foreground) 14%, transparent),
    var(--ff-shadow-3);
}

.meta {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 24px;
  padding: 8px 2px 6px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#count { margin-inline-start: auto; }
/* While rows are selected, the selection summary takes the "c New" hint's place. */
.meta:has(.count-selected) > .meta-hint { display: none; }

.views { display: flex; align-items: center; gap: 14px; }
.view {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 150ms var(--ease-in-out);
}
.view:hover { color: var(--foreground); }
.view[aria-current="true"] { color: var(--foreground); font-weight: 600; }
.views .tl-kbd { margin-inline-start: -4px; opacity: .7; }
#filters:empty { display: none; }
#filters::before { content: "·"; margin-inline-end: 10px; }

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

.mail {
  --label: var(--muted-foreground);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  padding: 12px 12px 12px 27px;
  margin: 0 -12px;
  border-radius: 10px;
  isolation: isolate;
  transition: background-color 150ms var(--ease-in-out);
}
/* Selecting text inside an email tints it with that email's label; unlabeled mail gets a neutral tint. */
:is(.mail, .reader) ::selection {
  background: color-mix(in oklab, var(--label) 35%, transparent);
  color: var(--foreground);
}
/* Registered so the flare can transition it. */
@property --a { syntax: "<number>"; inherits: false; initial-value: 0; }

/* The glow: light off the bar, full bar height, decaying exponentially to the right (λ ≈ 40px). */
:is(.mail, .reader-head)::after {
  --g: var(--label);
  --a: .13;
  content: "";
  position: absolute;
  z-index: -1;
  top: 10px;
  bottom: 10px;
  left: 13px;
  width: 260px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--g) calc(var(--a) * 100%), transparent) 0,
    color-mix(in oklab, var(--g) calc(var(--a) * 78%), transparent) 10px,
    color-mix(in oklab, var(--g) calc(var(--a) * 61%), transparent) 20px,
    color-mix(in oklab, var(--g) calc(var(--a) * 37%), transparent) 40px,
    color-mix(in oklab, var(--g) calc(var(--a) * 22%), transparent) 60px,
    color-mix(in oklab, var(--g) calc(var(--a) * 11%), transparent) 90px,
    color-mix(in oklab, var(--g) calc(var(--a) * 4%), transparent) 130px,
    color-mix(in oklab, var(--g) calc(var(--a) * 1.5%), transparent) 180px,
    transparent 260px);
  filter: blur(1px);
  pointer-events: none;
  transition: --a 180ms var(--ease-out);
}
[data-trylle-theme="dark"] :is(.mail, .reader-head)::after { --a: .25; }

/* Hover, keyboard focus, and open rows are lit; the row itself gets no background. */
:where(:root:not([data-pointer-away])) .mail:hover::after, .mail:focus-visible::after, .mail[data-lift]::after, .reader-head::after { --a: .26; }
:where(:root:not([data-pointer-away])) [data-trylle-theme="dark"] .mail:hover::after,
[data-trylle-theme="dark"] .mail:focus-visible::after,
[data-trylle-theme="dark"] .mail[data-lift]::after,
[data-trylle-theme="dark"] .reader-head::after { --a: .5; }
/* Compose has no category yet: the same brand hue, lit low rather than at full "open" strength. */
.reader:has(.compose) .reader-head::after { --a: .1; }
[data-trylle-theme="dark"] .reader:has(.compose) .reader-head::after { --a: .18; }

/* Category tag: vertical text that slides out from behind the bar on hover.
   The wrapper's right edge sits at the bar, and clips only horizontally. */
.mail-tag {
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(100% - 13px);
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  clip-path: inset(-32px 0 -32px 0);
  pointer-events: none;
  user-select: none;
}
.mail-tag > span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  translate: calc(100% + 14px) 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in oklab, var(--label) 72%, var(--foreground));
  transition: translate 180ms var(--ease-in-out);
}
:where(:root:not([data-pointer-away])) .mail:hover .mail-tag > span,
.mail:focus-visible .mail-tag > span,
.mail[data-lift] .mail-tag > span {
  translate: 0 0;
  transition: translate 260ms 50ms var(--ease-out);
}
/* While the pointer is over the list, hover wins: the keyboard-selected row
   goes back to rest so two rows never light up at once. */
:where(:root:not([data-pointer-away])) .mail-list:has(.mail:hover) .mail:focus-visible:not(:hover) .mail-tag > span {
  translate: calc(100% + 14px) 0;
  transition: translate 180ms var(--ease-in-out);
}
:where(:root:not([data-pointer-away])) .mail-list:has(.mail:hover) .mail:focus-visible:not(:hover)::after { --a: .13; }
:where(:root:not([data-pointer-away])) [data-trylle-theme="dark"] .mail-list:has(.mail:hover) .mail:focus-visible:not(:hover)::after { --a: .25; }
.mail[data-archiving] .mail-tag > span { translate: calc(100% + 14px) 0; }

/* Stage: the list. While reading, it stays put but falls out of focus. */
.stage-wrap { position: relative; }
.stage {
  --lift: cubic-bezier(.45, 0, .15, 1);
  transform-origin: 50% 40%;
  will-change: filter, transform, opacity;
  transition: filter 336ms var(--lift), opacity 336ms var(--lift), transform 336ms var(--lift);
}
.stage[data-behind] {
  filter: blur(8px) saturate(.85);
  opacity: .3;
  transform: scale(.975);
  pointer-events: none;
}

/* Reader: an overlay card that rises out of its row. */
.reader {
  --label: var(--muted-foreground);
  position: absolute;
  z-index: 3;
  top: 0;
  left: -12px;
  right: -12px;
  isolation: isolate;
  overflow: hidden;
  --pt: 22px; --pr: 24px; --pb: 20px; --pl: 27px;
  padding: var(--pt) var(--pr) var(--pb) var(--pl);
  border-radius: 16px;
  box-shadow: var(--card-edge-shadow), 0 24px 48px -24px #0000004d;
  outline: none;
}
[data-trylle-theme="dark"] .reader { box-shadow: var(--ff-shadow-4), 0 24px 56px -20px #000000a6; }
/* The card's contents scroll inside it, up to the height set in placeReader. The
   negative margin reaches out over the card's padding so the tube and its glow,
   which sit in that padding, aren't clipped by the scroll box. */
.reader-content {
  max-height: var(--reader-max, none);
  margin: calc(-1 * var(--pt)) calc(-1 * var(--pr)) calc(-1 * var(--pb)) calc(-1 * var(--pl));
  padding: var(--pt) var(--pr) var(--pb) var(--pl);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.reader-content::-webkit-scrollbar { display: none; }
/* While a card is open the page behind it doesn't scroll, so the card stays put. */
html:has(.stage[data-behind]) { overflow: hidden; }
.reader-surface {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--surface-3);
}
[data-trylle-theme="dark"] .reader-surface { background: var(--ff-surface-3); }
/* The row's stand-in during open/close: outside the clipped card so its tag survives. */
.reader-ghost {
  position: absolute;
  z-index: 4;
  left: -12px;
  right: -12px;
  margin: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.reader-ghost[data-divider]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: color-mix(in oklab, var(--border) 75%, transparent);
  transition: opacity 120ms var(--ease-out);
}
/* While morphing, the card's header plays the subject, sender and bar. */
.reader-ghost[data-morph] :is(.mail-subject, .mail-from, .mail-time, .mail-bar) { visibility: hidden; }
.reader-ghost[data-morph]::after { display: none; }
.reader-ghost[data-morph]::before { opacity: 0; }
.reader-ghost .mail-snippet { will-change: transform, opacity; }
.reader-meta-rest { display: inline-block; }
.reader-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  margin-right: -12px; /* the time sits 12px from the card edge, exactly where the row's does */
}
.reader-time {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 3px;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.reader-meta { grid-column: 1 / -1; }
.reader-head .mail-bar { top: -6px; bottom: -6px; left: -21px; cursor: default; }
.reader-head::after { top: -2px; bottom: -2px; left: -14px; width: 320px; }
/* Everything that moves during the morph is positioned, never transformed (see app.js). */
.reader-subject, .reader-time, .reader-meta, .reader-meta-rest, .reader-body, .reader-foot, .reply { position: relative; }
.reader-subject { grid-column: 1; }
.reader-subject {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 25px; /* fixed so the font-size morph doesn't move the lines below */
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.reader-meta { margin: 6px 0 0; color: var(--muted-foreground); font-size: 13px; }
.reader-meta strong { color: var(--foreground); font-weight: 500; }
.reader-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  font-size: 14px;
  line-height: 1.6;
  color: color-mix(in oklab, var(--foreground) 88%, var(--muted-foreground));
  white-space: pre-line;
}
.reader-body p { margin: 0 0 14px; max-width: 62ch; }
.reader-body p:last-child { margin-bottom: 0; }
.reader-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 22px;
  color: var(--muted-foreground);
  font-size: 12px;
}
.reader-foot .tl-kbd, .reply-actions .tl-kbd {
  margin-right: 6px;
  padding: 0 5px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent);
}
.reader:has(.reply:not([hidden])) .reader-foot { display: none; }
/* Reader actions: they read as key hints, but each one is pressable too. */
.foot-act {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 150ms var(--ease-in-out);
}
button.foot-act:hover { color: var(--foreground); }
.foot-act > .tl-icon { display: none; }
.foot-step { cursor: default; }

/* Selection actions in the mailbox row, pressable as well as keyed. */
#count { display: inline-flex; align-items: center; gap: 14px; }
.sel-act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  transition: color 150ms var(--ease-in-out);
}
.sel-act:hover { color: var(--foreground); }
.sel-act .tl-kbd { padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }
.meta:has(.count-selected) > .meta-settings { display: none; }

/* Swipe actions on touch: the row's content slides and a panel opens behind it
   on the side it uncovers, filling with colour once releasing would act. */
.mail[data-swiping] > :not(.mail-swipe), .mail[data-swiping]::after { translate: var(--dx, 0px) 0; }
.mail[data-settling] > :not(.mail-swipe), .mail[data-settling]::after { transition: translate 260ms var(--ease-out); }
.mail[data-swiping]::before { opacity: 0; }
.mail-swipe {
  --c: var(--brand);
  position: absolute;
  top: 2px;
  bottom: 2px;
  z-index: -2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  overflow: hidden;
  border-radius: 12px;
  background: color-mix(in oklab, var(--c) 16%, transparent);
  color: color-mix(in oklab, var(--c) 75%, var(--foreground));
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.mail-swipe[data-side="archive"] { right: 0; width: max(0px, calc(-1 * var(--dx, 0px))); justify-content: flex-end; }
.mail-swipe[data-side="read"] { --c: var(--color-sky-500); left: 0; width: max(0px, var(--dx, 0px)); }
.mail[data-settling] .mail-swipe { transition: width 260ms var(--ease-out), background-color 180ms var(--ease-out); }
.mail-swipe[data-armed] { background: var(--c); color: oklch(16% 0 0); }
.mail-swipe .tl-icon { flex: none; width: 20px; height: 20px; transition: scale 260ms cubic-bezier(.34, 1.5, .64, 1); }
.mail-swipe[data-armed] .tl-icon { scale: 1.18; }

/* Compose button: shown where there's no c key (phones, touch screens). */
.fab {
  position: fixed;
  z-index: 5;
  right: max(18px, calc(env(safe-area-inset-right) + 12px));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
  display: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 18px;
  background: var(--surface-3);
  color: var(--foreground);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent),
    0 0 22px -6px color-mix(in oklab, var(--brand) 55%, transparent),
    0 12px 28px -10px #0006;
  cursor: pointer;
  transition: translate 300ms var(--ease-out), opacity 200ms var(--ease-out), scale 200ms var(--ease-out);
}
[data-trylle-theme="dark"] .fab {
  background: var(--ff-surface-4);
  box-shadow:
    0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent),
    0 0 24px -6px color-mix(in oklab, var(--brand) 60%, transparent),
    0 14px 32px -10px #000c;
}
.fab .tl-icon { width: 22px; height: 22px; stroke-width: 1.8; }
.fab:active { scale: .92; }
/* It steps aside for an open card, a selection or a sheet, and lifts over a toast. */
html:has(.stage[data-behind]) .fab, html:has(.count-selected) .fab, html:has(dialog[open]) .fab { opacity: 0; scale: .85; pointer-events: none; }
body:has(#toast:not([hidden])) .fab { translate: 0 -62px; }

.compose-close {
  position: absolute;
  top: -10px;
  right: -8px;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
}
.compose-close:active { background: var(--accent); }
.compose-close .tl-icon { width: 18px; height: 18px; }

@media (max-width: 640px), (hover: none) and (pointer: coarse) {
  .fab { display: grid; }
  .compose-close { display: grid; }
  .reader:has(.compose) .reader-subject { padding-right: 34px; }
  /* Toasts span the screen with a margin, like a native snackbar, instead of
     shrinking to fit half of it. */
  .tl-toast {
    left: max(16px, env(safe-area-inset-left));
    right: max(16px, env(safe-area-inset-right));
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px));
    max-width: none;
    transform: none;
  }
  .toast-text { flex: 1; }
}

/* Touch screens: no hover effects to get stuck, no key badges, bigger targets,
   and the reader's actions become a toolbar pinned to the bottom of the card. */
@media (hover: none) and (pointer: coarse) {
  .mail { touch-action: pan-y; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  .mail:active:not([data-swiping]) { background: color-mix(in oklab, var(--foreground) 4%, transparent); transition-duration: 60ms; }
  .mail-bar { pointer-events: none; } /* the label filter is a precision target; not for thumbs */
  :is(.views > .tl-kbd, .search > .tl-kbd, .reply-actions > .tl-kbd, .sel-act .tl-kbd, .beacon-hint .tl-kbd) { display: none; }
  .view { position: relative; }
  .view::after { content: ""; position: absolute; inset: -12px -8px; }
  .sel-act { padding: 10px 6px; margin: -10px -6px; color: var(--foreground); font-weight: 500; }
  .beacon-dismiss { width: 40px; height: 100%; border-radius: 0; }
  .beacon-dismiss:hover { rotate: none; background: none; }
  .meta-settings { width: 44px; height: 44px; margin: -12px -12px -12px 0; }
  .settings [data-keyboard] { display: none; }
  .toast-undo .tl-kbd { display: none; }
  .toast-undo { padding: 8px 12px; margin-block: -8px; }
  /* With no key badge between them, Discard moves to the far side from Send. */
  .reply-actions > .tl-kbd + .tl-button { margin-left: auto; }

  .reader-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-wrap: nowrap;
    gap: 0;
    margin: 18px calc(-1 * var(--pr)) calc(-1 * var(--pb)) calc(-1 * var(--pl));
    padding: 4px 8px 6px;
    border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    background: color-mix(in oklab, var(--surface-3) 88%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  [data-trylle-theme="dark"] .reader-foot { background: color-mix(in oklab, var(--ff-surface-3) 88%, transparent); }
  .foot-act {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
  }
  .foot-act > .tl-icon { display: block; width: 22px; height: 22px; }
  .foot-act > .tl-kbd, .foot-step { display: none; }
  .foot-act:active { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 6%, transparent); }
  .foot-back { order: -3; }
  .foot-read { order: -2; }
  .foot-archive { order: -1; }
  .foot-reply { color: var(--foreground); }
}

/* Compact density: one line per email. Sender, subject, then as much preview as fits. */
html[data-density="compact"] .mail {
  grid-template-columns: 150px minmax(0, max-content) minmax(0, 1fr) auto;
  grid-template-areas: "from subject preview time";
  align-items: baseline;
  gap: 0 12px;
  padding-top: 7px;
  padding-bottom: 7px;
}
html[data-density="compact"] .mail-snippet { display: contents; }
html[data-density="compact"] .mail-from { grid-area: from; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-density="compact"] .mail-from::after { content: none; }
html[data-density="compact"] .mail[data-unread] .mail-from { font-weight: 600; }
html[data-density="compact"] .mail-head { grid-area: subject; }
html[data-density="compact"] .mail-preview { grid-area: preview; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-density="compact"] .mail-time { grid-area: time; padding-top: 0; }
html[data-density="compact"] :is(.mail, .reader-ghost)::after { top: 6px; bottom: 6px; }
html[data-density="compact"] .mail > .mail-bar { top: 4px; bottom: 4px; }
html[data-density="compact"] .mail-tag { display: none; }
@media (max-width: 640px) {
  /* Phones: sender and time, then the subject; the preview is left for the email itself. */
  html[data-density="compact"] .mail {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "from time" "subject subject";
    gap: 1px 12px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
  html[data-density="compact"] .mail-from { font-size: 14px; }
  html[data-density="compact"] .mail-preview { display: none; }
}

.reply {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.reply .tl-textarea { min-height: 96px; }
.reply .tl-textarea:focus-visible {
  box-shadow: var(--input-edge-shadow);
  background: color-mix(in oklab, var(--input-surface) 94%, var(--foreground));
}
.reply-actions { display: flex; align-items: center; gap: 8px; }
.reply-actions .tl-kbd { margin-right: auto; }

/* Compose: the same card, unrolling from under the toolbar with the brand-green tube.
   No inner box: To, Subject and the message sit directly on the card, flush with the header text. */
.compose {
  position: relative;
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.compose-sheet { display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.compose-line { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; cursor: text; }
.compose-label { flex: none; color: var(--muted-foreground); font-weight: 500; }
/* To: typed straight after the colon. Subject: a placeholder line, no label, set like a subject. */
.compose-subject { font-weight: 600; }
.compose-subject .compose-input::placeholder { font-weight: 600; }
.compose-input, .compose-body {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--foreground);
  font: inherit;
  resize: none;
}
[data-trylle-theme] .compose-input:focus-visible, [data-trylle-theme] .compose-body:focus-visible { outline: none; box-shadow: none; }
.compose-input::placeholder, .compose-body::placeholder { color: color-mix(in oklab, var(--muted-foreground) 70%, transparent); opacity: 1; }
.compose-body {
  display: block;
  width: 100%;
  min-height: 140px;
  /* Match the header lines' 3px padding, less the body's extra half-leading. */
  padding-top: calc(3px - 0.05em);
  line-height: 1.6;
  field-sizing: content;
}
.compose-error { margin: -6px 0 0; }
.compose .reply-actions { margin-top: 0; }

.meta-hint { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 16px; white-space: nowrap; }
.meta-hint .tl-kbd { padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }

/* Mailbox switch: quick crossfade; the toolbar stays put. */
.toolbar { view-transition-name: toolbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
::view-transition-group(toolbar) { animation: none; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Archive: the tube flares white-hot, then the row recedes (driven from app.js). */
.mail[data-archiving] { pointer-events: none; transform-origin: 50% 0; outline: none; }
.mail[data-archiving]::after, .mail[data-archiving] .mail-bar::before { transition-duration: 110ms; }
.mail[data-archiving]::after { --a: .6; }
[data-trylle-theme="dark"] .mail[data-archiving]::after { --a: 1; }
.mail[data-archiving] .mail-bar::before {
  background: #fff;
  box-shadow:
    0 0 2px #fff,
    0 0 6px var(--label),
    0 0 14px var(--label),
    4px 0 28px color-mix(in oklab, var(--label) 60%, transparent);
}
.mail-bar {
  position: absolute;
  z-index: 1;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 15px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* The tube: a hot, near-white core with tight saturated halo and a wide soft bloom biased rightward. */
.mail-bar::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 6px;
  width: 3px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--label) 78%, white);
  box-shadow: 0 0 1px 0 var(--label), 0 0 3px 0 color-mix(in oklab, var(--label) 70%, transparent);
  transition: width 150ms var(--ease-in-out), left 150ms var(--ease-in-out),
    background-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
[data-trylle-theme="dark"] .mail-bar::before {
  background: color-mix(in oklab, var(--label) 40%, white);
  box-shadow: 0 0 1px 0 var(--label), 0 0 3px 0 var(--label);
}
.reader:has(.compose) .mail-bar::before {
  background: color-mix(in oklab, var(--label) 55%, var(--muted-foreground));
  box-shadow: 0 0 2px 0 color-mix(in oklab, var(--label) 45%, transparent);
}
.mail-bar:hover::before, .mail-bar:focus-visible::before { left: 5.5px; width: 4px; }
.mail-bar:focus-visible { outline-offset: -2px; border-radius: 6px; }
.mail + .mail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: color-mix(in oklab, var(--border) 75%, transparent);
}
.mail:focus-visible { outline: none; }
/* Selected (x): a faint wash of the label colour; the divider hides so adjacent picks read as one block. */
.mail[data-selected] { background: color-mix(in oklab, var(--label) 9%, transparent); }
[data-trylle-theme="dark"] .mail[data-selected] { background: color-mix(in oklab, var(--label) 13%, transparent); }
.mail[data-selected] + .mail[data-selected]::before { opacity: 0; }
.count-selected { color: var(--foreground); font-weight: 600; }

.mail-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail-subject {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -.005em;
  color: color-mix(in oklab, var(--foreground) 82%, var(--muted-foreground));
}
.mail[data-unread] .mail-subject { font-weight: 600; color: var(--foreground); }

.mail-time {
  align-self: start;
  padding-top: 1px;
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mail[data-unread] .mail-time { color: var(--foreground); font-weight: 500; }

.mail-snippet {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
  line-height: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.mail-from { color: color-mix(in oklab, var(--foreground) 70%, var(--muted-foreground)); font-weight: 500; }
.mail[data-unread] .mail-from { color: var(--foreground); }
.mail-from::after { content: " · "; color: var(--muted-foreground); font-weight: 400; }

.label {
  --label: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 0 4px 0 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
}
.label::before {
  content: "";
  width: 3px;
  height: 12px;
  border-radius: 999px;
  background: var(--label);
}

.filter-clear {
  border: 0;
  padding: 0 4px;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-underline-offset: 3px;
}
.filter-clear:hover { color: var(--foreground); text-decoration: underline; }

#empty { padding: 48px 16px; }

/* Toast undo: a quiet text button with its key, flush right of the message. */
.toast-undo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -4px -8px -4px 8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--foreground);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms var(--ease-in-out);
}
.toast-undo:hover { background: var(--accent); }
.toast-undo .tl-kbd { padding: 0 5px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }

/* Settings: a native-style preferences window. A toolbar of sections up top, grouped
   rows below (label left, control right), and every change applies immediately. */
.settings { width: min(560px, calc(100vw - 32px)); }
.settings:focus { outline: none; }
.settings-head {
  position: relative;
  display: grid;
  flex: none;
  justify-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.settings-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -.005em; }
.settings-tabs { display: flex; gap: 4px; }
.settings-tab {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 78px;
  padding: 7px 10px 6px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms var(--ease-in-out), background-color 150ms var(--ease-in-out), scale 120ms var(--ease-out);
}
.settings-tab .tl-icon { width: 20px; height: 20px; stroke-width: 1.5; transition: color 200ms var(--ease-out), filter 200ms var(--ease-out); }
.settings-tab:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 4%, transparent); }
.settings-tab:active { scale: .97; }
.settings-tab[aria-selected="true"] { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 8%, transparent); }
/* The Beacons tab's tube lights up when it's the open section. */
.settings-tab#st-beacons[aria-selected="true"] .tl-icon {
  color: color-mix(in oklab, var(--brand) 70%, var(--foreground));
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--brand) 55%, transparent));
}
.settings-body {
  display: grid;
  padding: 16px 20px 22px;
  max-height: calc(85dvh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.settings-panel { display: grid; gap: 18px; align-content: start; }
.settings-panel[hidden] { display: none; }
.set-section { display: grid; gap: 6px; transition: opacity 200ms var(--ease-out); }
.set-heading { margin: 0 0 0 14px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.set-group {
  border-radius: 12px;
  background: color-mix(in oklab, var(--foreground) 2.5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
}
[data-trylle-theme="dark"] .set-group { background: color-mix(in oklab, var(--foreground) 3.5%, transparent); }
.set-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 9px 14px;
}
label.set-row { cursor: pointer; }
/* Hairlines between rows, inset from the left like a native grouped list. */
.set-row + .set-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 1px;
  background: color-mix(in oklab, var(--border) 65%, transparent);
}
.set-label { display: grid; flex: 1; gap: 2px; min-width: 0; font-size: 13px; }
.set-label > span { color: var(--foreground); }
.set-label small { color: var(--muted-foreground); font-size: 12px; line-height: 1.4; }
.set-label .tl-kbd { padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }
.set-row > .tl-button .tl-kbd { margin-left: 4px; padding: 0 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }
.set-reset[data-armed] { color: var(--destructive); background: color-mix(in oklab, var(--destructive) 10%, transparent); }

/* Segmented control with a thumb that slides to the chosen option. */
.set-seg { position: relative; flex: none; isolation: isolate; }
.set-seg::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2px;
  bottom: 2px;
  left: var(--x, 2px);
  width: var(--w, 0px);
  border-radius: 7px;
  background: var(--ff-surface-3);
  box-shadow: var(--ff-segmented-thumb-shadow);
  transition: left 240ms var(--ease-out), width 240ms var(--ease-out);
}
[data-trylle-theme="dark"] .set-seg::before { background: var(--ff-surface-4); box-shadow: var(--ff-shadow-4); }
.set-seg[data-still]::before { transition: none; }
.set-seg .tl-segment[aria-checked="true"] { color: var(--foreground); font-weight: 600; }
.set-seg .tl-segment:active { scale: .96; }
.set-seg .tl-segment { transition: color 150ms var(--ease-in-out), scale 120ms var(--ease-out); }

/* Beacon kinds carry a small tube that goes dark when switched off. */
.set-tube {
  flex: none;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--k) 45%, white);
  box-shadow: 0 0 1px 0 var(--k), 0 0 6px 0 color-mix(in oklab, var(--k) 80%, transparent);
  transition: opacity 200ms var(--ease-out), box-shadow 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
[data-trylle-theme="light"] .set-tube { background: color-mix(in oklab, var(--k) 80%, white); box-shadow: 0 0 1px 0 var(--k), 0 0 4px 0 color-mix(in oklab, var(--k) 60%, transparent); }
.set-row:has(.tl-switch:not(:checked)) .set-tube { opacity: .35; box-shadow: none; background: var(--muted-foreground); }
.set-kinds[data-off] { opacity: .5; }
.set-kinds[data-off] label.set-row { cursor: default; }
.tl-switch:focus-visible { outline: 1px solid color-mix(in oklab, var(--foreground) 22%, transparent); outline-offset: 2px; }

/* Settings opener: only shown where there's no keyboard to press ⌘, (phones, touch). */
.meta-settings {
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: -6px -8px -6px 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
}
.meta-settings:hover { color: var(--foreground); background: var(--accent); }
@media (max-width: 640px), (pointer: coarse) {
  .meta-settings { display: grid; }
  .settings-tab { min-width: 0; flex: 1; }
  .settings-tabs { align-self: stretch; }
  .settings-body { padding: 14px 16px max(20px, env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  /* Full-width bottom sheets, as on iOS. */
  .settings, .shortcuts { width: 100%; }
  /* Segmented controls drop under their label and share its full width. */
  .set-row:has(> .set-seg) { flex-direction: column; align-items: stretch; gap: 10px; padding-block: 12px; }
  .set-row > .set-seg { display: flex; }
  .set-row > .set-seg .tl-segment { flex: 1; }
}

/* Settings → Motion → Reduced: everything settles instantly. */
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: 1ms !important;
  animation-delay: 0ms !important;
  transition-duration: 1ms !important;
  transition-delay: 0ms !important;
}
/* Settings → Shortcut hints off: the key badges around the app go quiet. */
html[data-hints="off"] :is(.meta-hint, .views > .tl-kbd, .search > .tl-kbd, .foot-act .tl-kbd, .foot-step, .sel-act .tl-kbd, .reply-actions > .tl-kbd, .beacon-hint .tl-kbd) { display: none; }
html[data-hints="off"] .beacon-hint { gap: 0; }

/* ---------- Accounts: sign-in, connect cards and sheets ---------- */

/* Each provider is a tube of light in its own colours, read top to bottom like the Aurora icon. */
[data-brand="gmail"] { --b1: #ea4335; --b2: #fbbc05; --b3: #34a853; --b4: #4285f4; }
[data-brand="outlook"] { --b1: #28a8ea; --b2: #0f78d4; --b3: #0a5fb4; --b4: #0078d4; }
[data-brand="icloud"] { --b1: #8fd3ff; --b2: #4fb2f7; --b3: #2f8cf0; --b4: #3b6ff0; }
[data-brand="fastmail"] { --b1: #69b3e7; --b2: #2f86d0; --b3: #0067b9; --b4: #164b91; }
[data-brand="yahoo"] { --b1: #b67cff; --b2: #8a3ffc; --b3: #6001d2; --b4: #4a00a8; }
[data-brand="inbound"] { --b1: color-mix(in oklab, var(--brand) 40%, white); --b2: var(--brand); --b3: var(--brand); --b4: color-mix(in oklab, var(--brand) 70%, black); }
[data-brand="test"] { --b1: var(--color-yellow-400); --b2: var(--color-orange-500); --b3: var(--color-orange-500); --b4: var(--color-red-500); }
:is(.pcard-tube, .connect-tube, .account-tube, .onboard-tube, .gate-tube) {
  flex: none;
  border-radius: 999px;
  background: linear-gradient(var(--b1), var(--b2) 35%, var(--b3) 68%, var(--b4));
  box-shadow: 0 0 1px 0 var(--b2), 0 0 8px -1px color-mix(in oklab, var(--b3) 70%, transparent);
}

/* Provider cards */
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pcard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px 12px 16px;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-radius: 12px;
  background: color-mix(in oklab, var(--foreground) 2.5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 70%, transparent);
  color: var(--foreground);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 180ms var(--ease-out), background-color 180ms var(--ease-out), scale 120ms var(--ease-out);
}
[data-trylle-theme="dark"] .pcard { background: color-mix(in oklab, var(--foreground) 3.5%, transparent); }
/* Light off the tube, like a mail row's glow, brightening on hover. */
.pcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklab, var(--b2) 14%, transparent), transparent 55%);
  opacity: .55;
  transition: opacity 200ms var(--ease-out);
}
.pcard-tube { width: 3px; height: 30px; }
.pcard-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.pcard-text strong { font-size: 13.5px; font-weight: 600; }
.pcard-text small { overflow: hidden; color: var(--muted-foreground); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pcard-state { display: inline-flex; flex: none; align-items: center; gap: 4px; color: var(--muted-foreground); font-size: 12px; }
.pcard-state .tl-icon { width: 14px; height: 14px; transition: translate 180ms var(--ease-out); }
.pcard[data-state="connected"] .pcard-state { color: var(--brand); font-weight: 500; }
@media (hover: hover) {
  .pcard:not(:disabled):hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--b2) 35%, var(--border)); }
  .pcard:not(:disabled):hover::before { opacity: 1; }
  .pcard:not(:disabled):hover .pcard-state .tl-icon { translate: 2px 0; }
}
.pcard:not(:disabled):active { scale: .985; }
.pcard:disabled { cursor: default; }
.pcard:disabled .pcard-tube { filter: saturate(.25); opacity: .5; box-shadow: none; }
.pcard:disabled::before { opacity: 0; }
.pcard:disabled .pcard-text strong { color: color-mix(in oklab, var(--foreground) 70%, var(--muted-foreground)); }

/* Onboarding: signed in, no accounts yet. It takes the list's place. */
.onboard { display: grid; justify-items: center; padding: 40px 0 24px; text-align: center; animation: onboard-in 420ms var(--ease-out) both; }
.onboard[hidden] { display: none; }
.onboard-tube { width: 4px; height: 44px; margin-bottom: 18px; --b1: #38bdf8; --b2: #a78bfa; --b3: #fb923c; --b4: #ef4444; }
.onboard-title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.onboard-lede { max-width: 38ch; margin: 6px 0 24px; color: var(--muted-foreground); font-size: 14px; line-height: 1.5; }
.onboard .pcards { width: 100%; max-width: 560px; text-align: left; }
.onboard-note { display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0; color: var(--muted-foreground); font-size: 12px; }
.onboard-note .tl-icon, .connect-lock .tl-icon { width: 13px; height: 13px; }
@keyframes onboard-in { from { opacity: 0; translate: 0 8px; } }

/* Connect sheet */
.connect { width: min(460px, calc(100vw - 32px)); }
.connect:focus { outline: none; }
.connect-view { display: grid; gap: 16px; padding: 14px 20px 22px; }
.connect-head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin: 0 -8px -4px; }
.connect-head > .connect-title { margin-left: 8px; }
.connect-icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 150ms var(--ease-in-out), color 150ms var(--ease-in-out);
}
.connect-icon-btn:hover { background: var(--accent); color: var(--foreground); }
.connect-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.connect-lede { margin: -8px 0 0; color: var(--muted-foreground); font-size: 13px; }
.connect .pcards { grid-template-columns: 1fr; gap: 8px; }
.connect-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
}
.connect-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklab, var(--b2) 22%, transparent), color-mix(in oklab, var(--b3) 6%, transparent) 50%, transparent 80%);
}
.connect-tube { width: 4px; height: 40px; animation: connect-tube-in 480ms cubic-bezier(.34, 1.4, .64, 1) both; }
.connect-hero-text p { margin: 3px 0 0; color: var(--muted-foreground); font-size: 13px; }
.connect-hero[data-done] .connect-tube { animation: connect-tube-in 480ms cubic-bezier(.34, 1.4, .64, 1) both, connect-flare 1100ms 200ms var(--ease-out); }
@keyframes connect-tube-in { from { transform: scaleY(0); opacity: 0; } }
@keyframes connect-flare { 30% { background: #fff; box-shadow: 0 0 3px #fff, 0 0 12px var(--b2), 0 0 26px var(--b3); } }
.connect-help { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: color-mix(in oklab, var(--foreground) 2.5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 60%, transparent); font-size: 12.5px; line-height: 1.5; }
.connect-help p { margin: 0; color: color-mix(in oklab, var(--foreground) 80%, var(--muted-foreground)); }
.connect-help a { display: inline-flex; align-items: center; gap: 5px; justify-self: start; color: var(--foreground); font-weight: 500; text-decoration: none; }
.connect-help a:hover { text-decoration: underline; text-underline-offset: 3px; }
.connect-help a .tl-icon { width: 12px; height: 12px; }
.connect-form { display: grid; gap: 12px; }
.connect-note { margin: 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }
.connect-error, .gate-error { margin: 0; color: var(--destructive); font-size: 12.5px; }
.connect-submit, .gate-submit { width: 100%; min-height: 38px; font-weight: 600; }
.connect-submit[data-busy] { cursor: progress; opacity: .8; }
.connect-alt, .gate-demo {
  justify-self: center;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.connect-alt:hover, .gate-demo:hover { color: var(--foreground); }
.connect-lock { display: inline-flex; align-items: center; justify-self: center; gap: 6px; margin: -4px 0 0; color: var(--muted-foreground); font-size: 12px; }

/* Fields shared by the gate and the connect forms */
.gate-field { display: grid; gap: 6px; }
.gate-field[hidden] { display: none; }
.gate-field > span { color: color-mix(in oklab, var(--foreground) 80%, var(--muted-foreground)); font-size: 12.5px; font-weight: 500; }
.gate-field .tl-input { min-height: 38px; font-size: 14px; }

/* Settings → Accounts */
.account-tube { width: 3px; height: 22px; }
.account-add { justify-content: flex-end; }
.accounts .set-section + .set-section { margin-top: 18px; }

/* Sign-in gate: the whole screen until you sign in (or choose the demo). */
html[data-gate] .app, html[data-gate] .fab { display: none; }
.gate {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.gate[hidden] { display: none; }
.gate-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: min(380px, 100%);
  animation: onboard-in 460ms var(--ease-out) both;
}
.gate-tube { width: 5px; height: 56px; --b1: #38bdf8; --b2: #a78bfa; --b3: #fb923c; --b4: #ef4444; box-shadow: 0 0 2px 0 var(--b2), 0 0 18px -2px color-mix(in oklab, var(--b2) 70%, transparent), 0 0 40px -8px var(--b3); }
.gate-title { margin: 4px 0 0; font-size: 24px; font-weight: 650; letter-spacing: -.03em; }
.gate-lede { margin: -10px 0 4px; color: var(--muted-foreground); font-size: 14px; }
.gate-tabs { display: flex; width: 100%; }
.gate-tabs .tl-segment { flex: 1; }
.gate-form { display: grid; gap: 12px; width: 100%; }
.gate-google-wrap { display: grid; gap: 12px; width: 100%; }
.gate-google-wrap[hidden] { display: none; }
.gate-or { display: flex; align-items: center; gap: 10px; color: var(--muted-foreground); font-size: 12px; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--border) 70%, transparent); }
.gate-google { width: 100%; min-height: 38px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent); }
.gate-demo span { color: var(--foreground); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--foreground) 30%, transparent); text-underline-offset: 3px; }

@media (max-width: 640px) {
  .pcards { grid-template-columns: 1fr; }
  .connect { width: 100%; }
  .connect-view { padding: 10px 16px max(20px, env(safe-area-inset-bottom)); }
  .gate-field .tl-input { font-size: 16px; min-height: 44px; }
  .connect-submit, .gate-submit, .gate-google { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboard, .gate-card, .connect-tube, .connect-hero[data-done] .connect-tube { animation: none; }
}

/* Site footer: what Embox is, and the legal pages (Google's verification needs both on the home page). */
.site-foot { display: grid; justify-items: center; gap: 6px; margin-top: 56px; color: var(--muted-foreground); font-size: 12px; text-align: center; }
.site-foot p { margin: 0; }
.site-foot nav, .gate-legal { display: flex; gap: 14px; }
.site-foot a, .gate-legal a { color: var(--muted-foreground); text-decoration: none; }
.site-foot a:hover, .gate-legal a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.gate-legal { justify-content: center; margin-top: -6px; font-size: 12px; }
html:has(.stage[data-behind]) .site-foot { visibility: hidden; }

/* Shortcut sheet */
.shortcuts { width: min(420px, calc(100vw - 32px)); }
.shortcuts:focus { outline: none; }
.shortcuts .tl-dialog-body { gap: 20px; }
.keys-group h3 { margin: 0 0 6px; color: var(--muted-foreground); font-size: 12px; font-weight: 500; }
.keys { display: grid; gap: 2px; margin: 0; font-size: 13px; }
.keys > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 28px; }
.keys dt { color: var(--foreground); }
.keys dd { display: flex; gap: 4px; margin: 0; }
.keys .tl-kbd {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  text-align: center;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--border) 80%, transparent);
}

@media (max-width: 640px) {
  .app {
    --gl: max(16px, env(safe-area-inset-left));
    --gr: max(16px, env(safe-area-inset-right));
    /* Room at the bottom for the compose button and the home indicator. */
    padding: 8px var(--gr) calc(104px + env(safe-area-inset-bottom)) var(--gl);
  }
  /* Phone: the same slimming, from a 44px search to 40px, with the margin making up
     what the bar loses. The top padding clears the status bar when installed. */
  .toolbar { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: 12px; }
  .toolbar[data-compact] {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
    margin-bottom: calc(10px + max(8px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-top)));
  }
  .search { min-height: 44px; }
  .toolbar[data-compact] .search { min-height: 40px; }
  .toolbar[data-compact]:has(.beacon:not([hidden])) { margin-bottom: calc(14px + max(8px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-top))); }
  .search .tl-kbd { display: none; }
  /* Rows keep the tube's gutter on phones, and read a size up. */
  .mail { padding: 14px 12px 14px 27px; }
  .mail-subject { font-size: 15px; line-height: 22px; }
  .mail-snippet { font-size: 14px; line-height: 21px; }
  .mail-time { font-size: 12.5px; }
  .view, .views { font-size: 13px; }
  .views { gap: 18px; }
  .reader-body { font-size: 15px; }
  .reader-meta { font-size: 13.5px; }
  /* Selecting takes over the mailbox row, like an edit mode. */
  .meta:has(.count-selected) :is(.views, #filters, .meta-settings) { display: none; }
  .meta:has(.count-selected) #count { margin-inline-start: 0; flex: 1; justify-content: space-between; }
  .mail-tag { display: none; }
  .meta-hint { display: none; }
  .compose-sheet { font-size: 16px; }
  .compose-body { min-height: 200px; }
  .reader { left: -4px; right: -4px; --pt: 18px; --pr: 16px; --pb: 16px; --pl: 27px; border-radius: 14px; }
  .reader-body p { max-width: none; }
}