/* Kit Mail (#/mail) on the Kit design system (KT-60538; docs/design/visual-rules.md, the S1 round in
   docs/design/mail-calendar-s1/). Every colour is a --d-* token from refined.css; no hex here.

   The hall table (KT-60053) keeps its rule: sage is Kit's words; everything else on the page is the email's own words.
   Option 2 of the S1 round (Michelle, 2026-10-16): green, not orange, with terracotta only on the one act-now control
   of a screen (Make a task, Reply, Turn filing on); the rules page has none. Headings are Familjen Grotesk in sentence
   case, with no all-caps eyebrow, no bare count and no " · " string. Open sections sit on hairlines; the raised
   surfaces are the phone's focus card and the open letter on a desktop. */
.mail-view, .mail-send-preview {
  --table: var(--d-paper); --table-worn: var(--d-paper2); --letter: var(--d-surface);
  --slip: var(--d-sage); --slip-edge: var(--d-sage-edge); --olive-ink: var(--d-olive-ink); --postmark: var(--d-olive);
  --pencil: var(--d-muted); --magnet: var(--d-brand); --magnet-press: var(--d-hover);
  --hair: var(--d-line); --hair-firm: var(--d-sage-edge);
  --lift: 0 1px 2px rgba(var(--d-shade-rgb), .05), 0 18px 40px -28px rgba(var(--d-shade-rgb), .30);
  --r-chip: 6px; --r-ctl: 8px; --r-card: 12px;
}
.mail-view .sub { color: var(--d-muted); font-size: 0.8667rem; }
.mail-view .on-phone { display: none; }
/* Opening the tray from the row after the lists scrolls the page back to its head, clear of the top bar. */
.mail-view { scroll-margin-top: 72px; }
.mail-view :focus-visible { outline: 2px solid var(--d-olive-ink); outline-offset: 2px; box-shadow: none; }
.mail-head { flex-wrap: wrap; align-items: baseline; }
.mail-lede { margin: -14px 0 16px; color: var(--d-muted); font-size: 1rem; max-width: 62ch; }

/* Headings: Familjen Grotesk, sentence case, no serif. */
.mail-open-subj, .mail-focus-subj, .mail-tray-head h2, .mail-cap, .mail-rules h3, .mail-place b, .gate-page .group-title {
  font-family: var(--d-heading); font-weight: 650; letter-spacing: -.01em; text-wrap: pretty;
}

/* Mine / an adult's name / House: one olive segmented control; the address is on hover. */
.mail-switch { margin-left: auto; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.mail-switch-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--d-line); border-radius: 999px; background: var(--d-paper2); min-width: 0; }
.mail-switch-opt { border: 1px solid transparent; background: none; border-radius: 999px; padding: 0 14px; min-height: 40px; font: inherit; font-size: 0.9333rem; color: var(--d-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-switch-opt:hover { color: var(--d-ink); }
.mail-switch-opt.on { background: var(--d-surface); border-color: var(--d-sage-edge); color: var(--d-olive-ink); font-weight: 650; }

/* Kit's note, the signature: a sage slip in olive ink, square at the corner where it is clipped on. */
.mail-slip { display: inline-block; max-width: 100%; background: var(--d-sage); color: var(--d-olive-ink); border: 1px solid var(--d-sage-edge); border-radius: 0 8px 8px 8px; font-size: 0.8667rem; line-height: 1.35; font-weight: 500; padding: 2px 8px; }
.mail-slip.tag, .mail-slip.when { border-color: transparent; font-size: 0.8333rem; padding: 1px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-slip.big { display: block; font-size: 1rem; line-height: 1.45; padding: 10px 12px; border-radius: 0 var(--r-ctl) var(--r-ctl) var(--r-ctl); }
.mail-slip .k { display: block; font-size: 0.8667rem; font-weight: 650; margin-bottom: 2px; }

/* Section heads: sentence case in olive ink, no count. */
.mail-cap { display: flex; align-items: baseline; gap: 8px; font-size: 1rem; color: var(--d-olive-ink); margin: 28px 0 6px; padding: 0 12px; }
.mail-page > .mail-cap:first-child, .mail-col > .mail-cap:first-child, .mail-focus-band + .mail-cap { margin-top: 8px; }

/* The list: one line per email, hairlines between. */
.mail-list { border-top: 1px solid var(--d-line); }
.mail-letter { position: relative; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-bottom: 1px solid var(--d-line); cursor: pointer; }
.mail-letter:hover { background: var(--d-paper2); }
.mail-letter:focus-visible { outline-offset: -2px; }
.mail-letter.sel { background: var(--d-surface); box-shadow: inset 0 0 0 1px var(--d-line); border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.mail-letter.done .mail-letter-main { opacity: .55; }
.mail-letter .mail-dot { margin-top: 7px; }
.mail-letter.unread .mail-dot { background: var(--d-olive); }
.mail-letter-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mail-letter-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mail-letter .mail-from { font-weight: 500; min-width: 0; }
.mail-letter.unread .mail-from { font-weight: 700; }
.mail-letter .mail-n { background: none; padding: 0; color: var(--d-muted); font-size: 0.8rem; }
.mail-fam { font-size: 0.8rem; color: var(--d-olive-ink); font-weight: 600; }
.mail-time { margin-left: auto; flex: none; font-size: 0.8333rem; color: var(--d-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mail-letter.unread .mail-time { color: var(--d-ink); font-weight: 600; }
.mail-letter-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mail-letter-line .mail-slip.tag { flex: 0 1 auto; max-width: 62%; }
.mail-subj { flex: 1 1 0; min-width: 0; color: var(--d-muted); font-size: 0.9333rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-letter.unread .mail-subj { color: var(--d-ink); }
.mail-letter.parked .mail-from, .mail-letter.parked .mail-subj { color: var(--d-muted); }
.mail-back-now { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: var(--d-surface) !important; box-shadow: 0 0 0 1px var(--d-line); opacity: 0; }
.mail-letter:hover .mail-back-now, .mail-letter:focus-within .mail-back-now { opacity: 1; }
.mail-empty { padding: 14px 12px; color: var(--d-muted); font-size: 0.9333rem; }
.mail-more-btn { display: block; width: 100%; min-height: 40px; text-align: left; border: 0; background: none; font: inherit; font-size: 0.9333rem; font-weight: 600; color: var(--d-olive-ink); padding: 10px 12px; cursor: pointer; }
.mail-more-btn:hover { text-decoration: underline; }

/* Buttons: olive outline on the letter; the magnet is the screen's one terracotta control. */
.mail-btn { border: 1px solid var(--d-sage-edge); background: var(--d-surface); color: var(--d-olive-ink); border-radius: var(--r-ctl); padding: 0 14px; min-height: 40px; font: inherit; font-weight: 600; font-size: 0.9333rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.mail-btn:hover { background: var(--d-sage); }
.mail-btn:disabled { opacity: .6; cursor: default; }
.mail-btn.magnet { background: var(--magnet); border-color: var(--magnet); color: var(--d-surface); }
.mail-btn.magnet:hover { background: var(--magnet-press); border-color: var(--magnet-press); }
.mail-btn.quiet { border-color: transparent; background: transparent; padding: 0 8px; font-size: 0.9333rem; }
.mail-btn.quiet:hover { background: var(--d-paper2); }
/* KT-60404: Archive's place on an account Kit may not move is a link to Reconnect. */
a.mail-reconnect { text-decoration: none; }

/* Not now back Thu 8am: one bordered button carrying its return time in plain words, and a small attached chevron to
   change the time. Its menu hangs from the chevron's edge, sized to its longest choice, and opens upward near the foot. */
.mail-notnow { position: relative; display: inline-flex; align-items: stretch; min-width: 0; }
.mail-btn.notnow { gap: 6px; padding: 0 8px 0 12px; border-radius: var(--r-ctl) 0 0 var(--r-ctl); min-width: 0; }
.mail-btn.notnow .mail-slip.when { background: none; border: 0; padding: 0; color: var(--d-muted); font-weight: 500; font-size: 0.9333rem; min-width: 0; }
.mail-btn.notnow-pick { padding: 0 10px; min-width: 40px; border-left: 0; border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.mail-chev { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.mail-menu { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 236px; width: max-content; max-width: calc(100vw - 32px); background: var(--d-surface); border: 1px solid var(--d-sage-edge); border-radius: var(--r-ctl); box-shadow: var(--lift); padding: 4px; }
.mail-menu[hidden] { display: none; }
.mail-menu.up { top: auto; bottom: calc(100% + 6px); }
.mail-menu-item { display: flex; width: 100%; min-height: 40px; gap: 16px; justify-content: space-between; align-items: center; border: 0; background: none; font: inherit; font-size: 0.9333rem; color: var(--d-ink); padding: 9px 10px; border-radius: 6px; cursor: pointer; text-align: left; }
.mail-menu-item:hover, .mail-menu-item:focus-visible { background: var(--d-sage); }
.mail-menu-when { color: var(--d-olive-ink); font-size: 0.8667rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The focus card below 1024px: Kit's pick on a sage band, the one raised surface. Desktop shows the open letter instead. */
.mail-focus-band { display: none; }
.mail-focus { background: var(--d-surface); border: 1px solid var(--d-sage-edge); border-radius: var(--r-card); box-shadow: var(--lift); padding: 16px; }
.mail-focus-meta { display: flex; gap: 8px; font-size: 0.8667rem; color: var(--d-muted); min-width: 0; }
.mail-focus-meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-focus-meta time { margin-left: auto; flex: none; }
.mail-focus-subj { font-size: 1.3333rem; line-height: 1.25; margin: 4px 0 12px; color: var(--d-ink); overflow-wrap: anywhere; }
.mail-focus-acts { display: flex; gap: 8px; margin-top: 12px; }
.mail-focus-acts .mail-btn { min-height: 44px; flex: 1 1 0; font-size: 1rem; }
.mail-focus-later { display: flex; margin-top: 8px; }
.mail-focus-later .mail-btn { min-height: 44px; }

/* "Kit moved N": a quiet row after the lists. It opens the tray (KT-60538; it led the page before). */
.mail-moved-row { display: flex; align-items: center; gap: 12px; padding: 4px 12px; margin-top: 28px; border-top: 1px solid var(--d-line); border-bottom: 1px solid var(--d-line); min-height: 48px; color: var(--d-muted); font-size: 0.9333rem; }
.mail-moved-row p { margin: 0; flex: 1 1 auto; min-width: 0; }
.mail-moved-row b { color: var(--d-ink); font-weight: 600; }
.mail-moved-row .mail-link { margin-left: auto; white-space: nowrap; }
.mail-moved-row.on { background: var(--d-surface); }

.mail-page { display: flex; flex-direction: column; gap: 14px; }
.mail-foot { color: var(--d-muted); font-size: 0.8667rem; margin-top: 12px; padding: 0 12px; }

/* Below 1024px there is no reading pane (mail.ts desktop()), so Kit's pick leads the list as the focus card, on a
   tablet as on a phone; the chevron is thumb-sized wherever the card shows. */
@media (max-width: 1023px) {
  .mail-view .on-desk { display: none; }
  .mail-view .on-phone { display: inline; }
  .mail-focus-band { display: block; background: var(--d-sage); border: 1px solid var(--d-sage-edge); border-radius: var(--r-card); padding: 10px; margin: 0 -4px 8px; }
  .mail-letter.is-focus { display: none; }
  .mail-btn.notnow-pick { min-width: 44px; min-height: 44px; padding: 0; }
  /* The phone's round + is fixed at the foot: the list's last row and the tray scroll clear of it (KT-60199). */
  .mail-view { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}
@media (max-width: 719px) {
  .mail-view .view-head h1 { font-size: 1.8rem; }
  .mail-switch { margin-left: 0; flex-basis: 100%; }
  .mail-lede { margin-top: -8px; }
  .mail-letter { padding: 12px 4px; }
  .mail-cap { padding: 0 4px; }
  .mail-moved-row { padding: 4px; flex-wrap: wrap; gap: 0 12px; }
  .mail-foot { padding: 0 4px; }
  .mail-back-now { position: static; transform: none; align-self: center; box-shadow: none; background: none !important; opacity: 1; }
  .mail-letter-line { align-items: flex-start; }
  .mail-letter-line .mail-slip.tag { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mail-notnow { flex: 1 1 auto; }
  /* Not now's time wraps under its words on a narrow phone rather than cutting to "back tomorr…" (KT-60199). */
  .mail-btn.notnow { flex: 1 1 auto; justify-content: flex-start; flex-wrap: wrap; white-space: normal; text-align: left; column-gap: 6px; row-gap: 0; line-height: 1.25; padding-block: 4px; }
  .mail-btn.notnow .mail-slip.when { overflow: visible; }
  /* Every quiet button is thumb-sized on a phone (KT-60409). */
  .mail-view .mail-btn, .mail-send-preview .mail-btn { min-height: 44px; }
}

/* The rules page and the cleanup review: open sections on hairlines (KT-60538), not a card per section. */
.mail-group { border-top: 1px solid var(--d-line); }
.kit-board .mail-view .mail-group > .group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 14px 0 6px; list-style: none; cursor: default; font-weight: 400; color: var(--d-muted); }
details.mail-group > summary.group-head { cursor: pointer; }
.mail-group > summary { cursor: pointer; padding: 10px 0; display: flex; gap: 12px; align-items: baseline; list-style: none; }
.mail-group > summary::-webkit-details-marker { display: none; }
.group-title { font-weight: 650; font-size: 1.0667rem; color: var(--d-ink); }
.group-sub { flex-basis: 100%; font-size: 0.8667rem; color: var(--d-muted); }
/* An empty section is one plain line: no card, no sleeping fox (refined.css gives a bare .empty both). */
.kit-board .mail-view .mail-group .empty.small { padding: 4px 0 8px; font-size: 0.9333rem; color: var(--d-muted); background: none; border: 0; margin: 0; text-align: left; }
.kit-board .mail-view .mail-group .empty.small::before, .kit-board .mail-view .mail-group .empty.small::after { display: none; }
.mail-rows { border-top: 1px solid var(--d-line); }
.mail-subgroup { border-top: 1px solid var(--d-line); }
.mail-subgroup > summary { display: flex; gap: 8px; align-items: baseline; padding: 8px 0; cursor: pointer; list-style: none; font-size: 0.8667rem; }
.mail-subgroup > summary::-webkit-details-marker { display: none; }
.mail-subgroup-title { font-weight: 600; }
.mail-more { padding: 8px 0 12px; font-size: 0.8667rem; color: var(--d-muted); }

.mail-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--d-line); }
.mail-row:last-child { border-bottom: 0; }
.mail-row.acting { opacity: .7; pointer-events: none; }
.mail-row.done .mail-main { opacity: .55; }
.mail-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: transparent; }
.mail-main { flex: 1 1 auto; min-width: 0; }
.mail-l1 { display: flex; gap: 8px; align-items: baseline; font-size: 0.9333rem; }
.mail-from { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-n { font-size: 0.8rem; color: var(--d-muted); }
.mail-date { margin-left: auto; color: var(--d-muted); font-size: 0.8333rem; white-space: nowrap; }
.mail-l2 { display: flex; gap: 8px; align-items: baseline; font-size: 0.9rem; min-width: 0; }
.mail-state { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-l3 { font-size: 0.8667rem; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mail-view .dim, .gate-page .mail-subject.dim, .gate-page .mail-l2.dim { color: var(--d-muted); opacity: 1; }
.mail-verb { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; min-height: 40px; }
.mail-noted, .mail-saving { font-size: 0.8667rem; color: var(--d-muted); }
.mail-done { display: flex; align-items: center; gap: 8px; font-size: 0.8667rem; color: var(--d-muted); flex-wrap: wrap; justify-content: flex-end; }
.mail-view .btn.small { min-height: 40px; font-size: 0.8667rem; padding: 0 12px; border-radius: var(--r-ctl); }
/* The rules page has no act-now control: its filled buttons are olive, never terracotta. */
.gate-page .btn.primary { background: var(--d-olive-ink); border-color: var(--d-olive-ink); color: var(--d-surface); }
.gate-page .btn.primary:hover { background: var(--d-ink); border-color: var(--d-ink); }
.gate-standing .btn.primary { background: var(--d-sage); border-color: var(--d-sage-edge); color: var(--d-olive-ink); }
.gate-standing .btn { white-space: nowrap; }

.gate-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 0 10px; }
.gate-mode { border: 1px solid var(--d-line); border-radius: var(--r-ctl); padding: 10px 12px; min-height: 40px; cursor: pointer; background: var(--d-paper); }
.gate-mode.on { border-color: var(--d-olive-ink); box-shadow: inset 0 0 0 1px var(--d-olive-ink); background: var(--d-surface); }
.gate-mode.disabled { opacity: .55; cursor: default; }
.gate-mode-title { font-weight: 650; }
.gate-mode-sub { font-size: 0.8667rem; color: var(--d-muted); margin-top: 2px; }
.gate-numbers { padding: 0 0 8px; margin: 0; font-size: 0.9333rem; }
.gate-search { margin: 0 0 10px; width: 100%; min-height: 40px; box-sizing: border-box; font: 0.9333rem var(--d-body); padding: 7px 10px; border: 1px solid var(--d-line); border-radius: var(--r-ctl); background: var(--d-surface); color: var(--d-ink); }
.mail-dot.gate-file, .mail-dot.standing-file { background: var(--d-olive); }
.mail-dot.gate-keep, .mail-dot.standing-inbox { background: var(--d-olive-ink); }
.mail-dot.gate-ask, .mail-dot.standing-judge, .mail-dot.gate-undo { background: var(--d-sage-edge); }
.gate-backlog-body { padding: 0 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gate-backlog-body > .mail-rows { align-self: stretch; }
.gate-older { padding: 8px 0; border-top: 1px solid var(--d-line); font-size: 0.8667rem; color: var(--d-muted); }
.gate-backlog .mail-actions { align-items: center; }
.gate-filter .mail-l3 { white-space: normal; }
@media (max-width: 720px) { .gate-modes { grid-template-columns: 1fr; } }

/* A thread's messages. */
.mail-body { display: flex; flex-direction: column; gap: 10px; }
.mail-msg { border: 1px solid var(--d-line); border-radius: var(--r-ctl); padding: 10px 12px; background: var(--d-surface); }
.mail-msg-head { display: flex; gap: 10px; align-items: baseline; font-size: 0.9333rem; min-width: 0; margin-bottom: 4px; }
.mail-msg-from { font-weight: 650; color: var(--d-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg-when { margin-left: auto; flex: none; color: var(--d-muted); font-size: 0.8667rem; white-space: nowrap; }
.mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font: 0.9333rem/1.5 var(--d-body); margin: 6px 0 0; max-height: 60vh; overflow: auto; }
.mail-draft-box[hidden] { display: none; }
.mail-draft-box { display: flex; flex-direction: column; gap: 6px; }
.mail-draft { width: 100%; box-sizing: border-box; font: 0.9333rem/1.5 var(--d-body); padding: 10px 12px; border: 1px solid var(--d-sage-edge); border-radius: var(--r-ctl); background: var(--d-paper); color: var(--d-ink); resize: vertical; }
.mail-draft:focus-visible { border-color: var(--d-olive); }
/* Board-wide helpers that have always lived in this file; other pages (Calendar's Ahead) use them, so they keep their
   board tokens. Mail's own surfaces never paint a badge. */
.dim { color: var(--ink-2); }
.small { font-size: 0.8333rem; }
.btn.small { font-size: 0.8rem; padding: 3px 8px; }
.badge { font-size: 0.7667rem; border-radius: 999px; padding: 1px 8px; background: var(--paper-2); color: var(--ink-2); }
.badge.due.today, .badge.due.overdue { background: rgba(var(--d-danger-rgb),.10); color: var(--danger); }
.badge.due.soon { background: rgba(var(--d-snooze-rgb),.14); color: var(--snooze); }
.badge.wait { background: rgba(var(--d-accent-rgb),.10); color: var(--accent); }
.badge.draft { background: rgba(var(--d-ok-rgb),.12); color: var(--ok); }

/* Mail tidy review (#/mail/proposals). */
.mail-runs { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.mail-run { text-align: left; font: inherit; color: inherit; background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-ctl); padding: 12px 14px; cursor: pointer; }
.mail-run:hover { background: var(--d-paper2); }
.mail-run-title { font-weight: 600; }
.mail-run-sub { font-size: 0.8667rem; color: var(--d-muted); margin-top: 2px; }
.mail-detail { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-group-title { font-weight: 600; }
.mail-group-sub { font-size: 0.8667rem; color: var(--d-muted); margin-left: auto; }
.mail-group-tools { display: flex; gap: 8px; padding: 0 0 8px; }
.mail-items { border-top: 1px solid var(--d-line); }
.mail-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--d-line); }
.mail-item:last-child { border-bottom: 0; }
.mail-item.rejected .mail-item-body { opacity: .45; text-decoration: line-through; }
.mail-item input[type=checkbox] { margin-top: 3px; }
.mail-item-status { width: 16px; display: inline-block; color: var(--d-muted); }
.mail-item-body { min-width: 0; flex: 1; }
.mail-item-from { font-weight: 500; font-size: 0.9333rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item.unread .mail-item-from { font-weight: 700; }
.mail-item-subject { font-size: 0.9333rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-item-why { font-size: 0.8667rem; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 719px) {
  .mail-row { flex-wrap: wrap; }
  .mail-verb { flex: 1 0 100%; justify-content: flex-end; padding-left: 18px; }
  .mail-text { max-height: none; }
  body.embed-mobile .mail-view .view-head { display: none; }
}

/* Desktop: the list beside the open letter (KT-60053). Between 1024 and 1180 the list narrows so the letter keeps
   room for its words (KT-60199). */
.mail-split { display: grid; grid-template-columns: minmax(0, 392px) minmax(0, 1fr); align-items: start; }
.mail-col { border-right: 1px solid var(--d-line); min-height: 640px; padding-right: 0; }
.mail-pane { padding-left: 24px; position: sticky; top: 16px; min-width: 0; }
.mail-col .mail-letter.sel { margin-right: -1px; position: relative; z-index: 1; }
@media (max-width: 1180px) {
  .mail-split { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
  .mail-pane { padding-left: 16px; }
  .mail-open { padding: 20px; }
}

/* Under 1024px there is no room for a letter beside the list: the list takes the width and an email opens as its own
   page, as on a phone (mail.ts desktop() reads this same query). */
@media (max-width: 1023px) {
  .mail-split { display: block; }
  .mail-col { border-right: 0; min-height: 0; }
  .mail-pane { display: none; }
}

/* The open letter: the one raised surface on a desktop screen. */
.mail-open { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-card); box-shadow: var(--lift); padding: 24px 28px 20px; min-width: 0; }
.mail-open-head { display: flex; align-items: baseline; gap: 12px; font-size: 0.9333rem; color: var(--d-muted); min-width: 0; }
.mail-open-head .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-open-head b { color: var(--d-ink); font-weight: 600; }
.mail-open-head time { margin-left: auto; white-space: nowrap; flex: none; }
.mail-open-subj { font-size: 1.6rem; line-height: 1.2; color: var(--d-ink); margin: 6px 0 16px; overflow-wrap: anywhere; }
.mail-open-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 24px; }
.mail-open-done { margin: 0 0 16px; color: var(--d-olive-ink); font-weight: 600; font-size: 0.9333rem; }
.mail-open-body { border-top: 1px solid var(--d-line); padding-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.mail-open-body .mail-msg { border: 0; padding: 2px 0 0; background: none; border-radius: 0; }
.mail-open-body .mail-msg + .mail-msg { border-top: 1px solid var(--d-line); padding-top: 14px; }
.mail-open .mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.65; color: var(--d-ink); margin: 0; }
.mail-att { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; border: 1px solid var(--d-line); border-radius: var(--r-ctl); padding: 8px 12px; font-size: 0.8667rem; color: var(--d-muted); max-width: 100%; overflow-wrap: anywhere; }
.mail-att i { width: 14px; height: 17px; border: 1.5px solid var(--d-muted); border-radius: 2px; flex: none; }
.mail-open .mail-draft-box { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--d-line); }
.mail-draft-label { font-size: 0.9333rem; color: var(--d-ink); font-weight: 600; }
.mail-draft-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mail-draft-note { font-size: 0.8667rem; color: var(--d-muted); }
.mail-open-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--d-line); }
.mail-open-foot .grow { flex: 1; }
.mail-open-foot .mail-btn.quiet { color: var(--d-olive-ink); }
.mail-gmail { display: inline-flex; align-items: center; min-height: 40px; color: var(--d-olive-ink); font-size: 0.9333rem; text-decoration: underline; text-decoration-color: var(--d-sage-edge); text-underline-offset: 3px; }
.mail-gmail:hover { color: var(--d-ink); }
.mail-btn.small { min-height: 40px; padding: 0 10px; font-size: 0.8667rem; }
.mail-link { display: inline-flex; align-items: center; min-height: 40px; border: 0; background: none; padding: 0; font: inherit; color: var(--d-olive-ink); font-weight: 600; font-size: 0.9333rem; cursor: pointer; text-align: left; }
.mail-link:hover { text-decoration: underline; }
.mail-back { margin-left: -8px; }

/* The tray Kit moved N opens: what left the inbox this week, by where it went. A desktop pane, or a phone screen. */
.mail-tray { background: var(--d-surface); border: 1px solid var(--d-line); border-radius: var(--r-card); }
.mail-tray.open { box-shadow: var(--lift); }
.mail-tray-head { padding: 20px 22px 0; }
.mail-tray-head h2 { font-size: 1.4667rem; line-height: 1.2; color: var(--d-ink); margin: 0 0 4px; }
.mail-tray-head p { margin: 0; color: var(--d-muted); font-size: 0.9333rem; }
.mail-tray-body { padding: 0 22px 20px; }
.mail-place { display: flex; align-items: baseline; gap: 4px 8px; margin: 20px 0 4px; min-width: 0; flex-wrap: wrap; }
.mail-place b { font-size: 1rem; color: var(--d-olive-ink); }
.mail-place .where { font-size: 0.8667rem; color: var(--d-muted); min-width: 0; }
.mail-fl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--d-line); }
.mail-fl .who { font-size: 0.9333rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mail-fl .who span { color: var(--d-muted); }
.mail-fl .mail-slip { grid-column: 1; justify-self: start; border-color: transparent; }
.mail-fl .undo { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.mail-tray-more { font-size: 0.8667rem; color: var(--d-muted); padding: 2px 0; }
.mail-aside { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8667rem; color: var(--d-muted); padding: 4px 0; }
.mail-rules { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--d-line); }
.mail-rules h3 { margin: 0 0 6px; font-size: 1rem; color: var(--d-olive-ink); }
.mail-rules ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 0.9333rem; color: var(--d-ink); }
.mail-rules li b { font-weight: 600; }
.mail-rules-acts { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 8px; }
.mail-unsubs { background: var(--d-paper); border: 1px solid var(--d-line); border-radius: var(--r-ctl); padding: 4px 12px; margin: 4px 0; }
.mail-unsubs[hidden] { display: none; }
.mail-unsub-how { margin: 8px 0; font-size: 0.8667rem; color: var(--d-muted); }
.mail-unsub { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--d-line); flex-wrap: wrap; }
.mail-unsub .who { flex: 1 1 200px; min-width: 0; font-size: 0.9333rem; }
.mail-unsub .who span { color: var(--d-muted); }
.mail-unsub .acts { display: flex; gap: 6px; align-items: center; }
.mail-unsub .mail-noted { font-size: 0.8667rem; color: var(--d-olive-ink); font-weight: 600; }

@media (max-width: 719px) {
  .mail-tray.open.phone { box-shadow: none; margin-top: 4px; }
  .mail-tray.open.phone .mail-tray-head { padding: 16px 14px 0; }
  .mail-tray.open.phone .mail-tray-body { padding: 0 14px 12px; }
  .mail-page-letter .mail-open { border: 0; box-shadow: none; border-radius: 0; padding: 0; background: none; }
  /* A column flex child sizes to its nowrap text unless stretched, so the sender line would push the page wide. */
  .mail-page-letter .mail-open-head { flex-direction: column; align-items: stretch; gap: 2px; }
  .mail-page-letter .mail-open-head time { margin-left: 0; font-size: 0.8667rem; }
  .mail-page-letter .mail-open-subj { font-size: 1.4667rem; }
  .mail-open-acts .mail-notnow { flex: 1 1 100%; }
  .mail-open-foot .mail-btn { flex: 1 1 40%; }
}

/* Send with her OK (KT-60259): who it goes to before the tap, then the 30-second Undo strip and the outcome. */
.mail-send-who { margin: 0; font-size: 0.8667rem; color: var(--d-muted); overflow-wrap: anywhere; }
.mail-send-who b { color: var(--d-ink); font-weight: 600; }
.mail-send-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--d-sage); color: var(--d-olive-ink); font-weight: 600; font-size: 0.9333rem; }
.mail-send-strip.problem { color: var(--d-ink); font-weight: 500; }
.mail-send-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mail-send-link { color: var(--d-olive-ink); }
.mail-send-see { white-space: nowrap; }

/* The send preview opened from a list (KT-60311: Today's Kit card), in the board's side panel, outside
   .mail-view: the same tokens for its hold strip and buttons, every button 44px tall. */
.mail-send-preview .mail-send-subject { margin: 0 0 8px; font: 650 1.0667rem var(--d-heading); }
.mail-send-preview .mail-send-body { margin: 12px 0; padding: 12px; border-radius: var(--r-ctl); background: var(--d-paper); color: var(--d-ink); overflow-wrap: anywhere; }
.mail-send-preview .mail-send-note { margin: 0; color: var(--d-muted); font-size: 0.8667rem; }
.mail-send-preview .mail-send-acts { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.mail-send-preview .btn, .mail-send-preview .mail-btn { min-height: 44px; }
.mail-settings-gear{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--d-muted);cursor:pointer}
.mail-settings-gear:hover{background:var(--d-paper2);color:var(--d-ink)}
.mail-settings-gear:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.mail-settings{max-width:760px;padding-bottom:40px}
.mail-settings-intro{line-height:1.6;margin:0 0 28px}
.mail-settings-section{min-width:0;border:1px solid var(--d-line);border-radius:14px;padding:22px 24px;margin:0 0 24px;background:var(--d-surface)}
.mail-settings-section legend,.mail-settings-section h2{font-size:18px;font-weight:650;padding:0 6px;margin:0}
.mail-settings-help{display:block;font-size:14px;line-height:1.55;color:var(--d-muted);margin:6px 0 12px;font-weight:400}
.mail-settings-toggle{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--d-line);cursor:pointer}
.mail-settings-toggle input{width:20px;height:20px;flex:0 0 20px;margin:2px 0;accent-color:var(--d-olive)}
.mail-settings-toggle strong,.mail-settings-select strong{display:block;font-size:16px}
.mail-settings-options{margin-left:9px;padding-left:24px;border-left:2px solid var(--d-line)}
.mail-settings-options.paused .mail-settings-toggle{opacity:.55;cursor:default}
.mail-settings-paused{font-size:14px;font-weight:600;line-height:1.55;color:var(--d-muted);margin:0;padding:10px 0 14px}
.mail-settings-select{display:block;margin:20px 0}
.mail-settings select{font:inherit;max-width:100%;padding:10px 12px;border:1px solid var(--d-line);border-radius:8px;background:var(--d-surface);color:inherit}
.mail-settings-link{display:block;margin:16px 0 0;color:var(--d-olive-ink);text-decoration:underline;text-underline-offset:3px;line-height:1.5}
.mail-settings-save{min-height:44px}
.mail-settings-status{min-height:24px;margin:12px 0 24px;line-height:1.5}
@media(max-width:600px){.mail-settings-section{padding:18px 16px}.mail-settings select{width:100%}.mail-settings .mail-btn{white-space:normal;text-align:left}.mail-switch{gap:6px}}

.mail-head .mail-switch{gap:8px}.mail-settings-gear{flex:0 0 44px}.mail-settings-title{display:none}
@media(max-width:719px){body.embed-mobile .mail-view .mail-head.has-settings{display:flex}body.embed-mobile .mail-head.has-settings>h1,body.embed-mobile .mail-head.has-settings>.sub{display:none}body.embed-mobile .mail-settings-title{display:block;font-size:24px;margin:0 0 20px}}

.mail-settings-actions{position:sticky;top:8px;z-index:2;display:flex;gap:16px;align-items:center;padding:12px 0;margin-bottom:20px;background:var(--d-paper)}
.mail-settings-actions .mail-settings-status{margin:0;font-size:14px;flex:1}.mail-settings-actions .mail-settings-status:empty{display:none}