/* =====================================================
   CALM EMAIL REFACTOR — full active stylesheet bundle
   Captured: 2026-05-10T22:19:46.229Z
   Source URL: staging email app
   Total sheets: 11
   ===================================================== */


/* =====================================================
   calm-email-consolidated (22067 chars)
   ===================================================== */

/* ============================================================================
   Calm Email UI — Single consolidated stylesheet
   Scope: .email-page .email-list-items  (primary)
          .email-page .email-reader-header  (only the trims allowed by spec)

   Color = meaning.
     Selected row   ........  soft sage tint
     Unread         ........  bold typography + tiny sage dot in left controls
     Starred        ........  filled warm-grey star
     Hover icons    ........  warm light grey
     Focus          ........  sage outline

   Forbidden:
     teal, blue icon bg, rose/coral unread bars, yellow/gold star/VIP,
     selected-row left bar, inset 3px 0 shadow, hover height jumps.
   ============================================================================ */

/* ---- Tokens ---- */
.email-page,
.email-page .email-app {
  --bb-cream:           #FBF8F2;
  --bb-cream-soft:      #FFFEFB;
  --bb-warm-text:       #5C4D43;
  --bb-warm-grey:       #8A7E72;
  --bb-warm-grey-light: #B5A99D;
  --bb-sage:            #A8C5B8;
  --bb-sage-dark:       #4A7A68;

  --email-list-icon-muted:        #9A8E82;
  --email-list-icon-active:       #5C4D43;
  --email-list-row-hover-bg:      rgba(255, 254, 251, 0.55);
  --email-list-selected-bg:       rgba(168, 197, 184, 0.12);
  --email-list-selected-hover-bg: rgba(168, 197, 184, 0.14);
  --email-list-dot-color:         #6E8A7E;

  /* Neutralise the global teal/accent inside the email list */
  --email-active-mark:  transparent;
  --email-list-accent:  transparent;
  --email-unread-mark:  transparent;

  /* One consistent mark system */
  --mark-size:    14px;
  --hit-size:     22px;
  --mark-stroke:  1.5px;
}

/* Dark-mode counterpart — prevents calm-preview light tokens from clobbering
   the dark values defined earlier in email-blod-bolge.css (#1371). */
[data-theme="dark"] .email-page,
[data-theme="dark"] .email-page .email-app {
  --bb-warm-text:       #EDE6DD;
  --bb-warm-grey:       #C9BAAA;
  --bb-warm-grey-light: #9A8E82;
  --bb-sage:            #A8C5B8;
  --bb-sage-dark:       #5A9A82;
}

/* ============================================================================
   ROW BACKGROUNDS — read / hover / selected / selected-hover
   Selectors include the .email-app.is-thread-open.is-reader-split path used in
   email-list-panel.css so we can beat its !important box-shadow rule.
   ============================================================================ */
.email-page .email-list-items .email-message-item.email-dense-row,
.email-page .email-list .email-list-items .email-message-item.email-dense-row,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row {
  background: transparent !important;
  box-shadow: none !important;
  border-left: 0 !important;
  outline: none !important;
  transition: background-color 120ms ease !important;
}

.email-page .email-list-items .email-message-item.email-dense-row:hover,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:hover {
  background: var(--email-list-row-hover-bg) !important;
  box-shadow: none !important;
}

.email-page .email-list-items .email-message-item.email-dense-row.selected,
.email-page .email-list-items .email-message-item.email-dense-row[aria-selected="true"],
.email-page .email-list-items .email-message-item.email-dense-row[aria-current="true"],
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.selected,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row[aria-current="true"] {
  background: var(--email-list-selected-bg) !important;
  box-shadow: none !important;
  border-left: 0 !important;
}

.email-page .email-list-items .email-message-item.email-dense-row.selected:hover,
.email-page .email-list-items .email-message-item.email-dense-row[aria-selected="true"]:hover,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected:hover,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.selected:hover {
  background: var(--email-list-selected-hover-bg) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Sage focus ring, never teal */
.email-page .email-list-items .email-message-item.email-dense-row:focus-visible,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:focus-visible {
  outline: none!important;
  outline-offset: -2px !important;
  box-shadow: none !important;
}

/* Keyboard browse cursor (RED #3): selection and focus are DIFFERENT statements.
   The open/selected row (mouse click also sets aria-current + .selected via
   message-changed) gets the calm sage FILL only — never a resting ring (a
   permanent ring is a keyboard costume on a mouse state; Morten: no focus halos
   at rest). The 2px sage ring lives exclusively on :focus-visible — arrowing the
   list moves real keyboard focus (keyboard.js row.focus()), so the browse cursor
   stays clearly visible while arrowing, and mouse clicks never summon it. The
   #email-list-items ID selector beats the outline:none suppressor above. */
/* [class]-armor: the row-redesign's "no backgrounds" reset (email-base
   #email-list-items … .unread/:not(.unread) { background-color: transparent
   !important }, 1-4-0) must not eat the SELECTED fill — these run at 1-5-0. */
.email-page #email-list-items .email-message-item.email-dense-row[class][aria-current="true"],
.email-page #email-list-items .email-message-item.email-dense-row[class].selected {
  border-radius: 10px !important;
  background-color: rgba(168, 197, 184, 0.18) !important;
}
.email-page #email-list-items .email-message-item.email-dense-row[class]:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: -2px !important;
  border-radius: 10px !important;
  background-color: rgba(168, 197, 184, 0.18) !important;
}

/* Kill stray pseudo bars on the row itself */
.email-page .email-list-items .email-message-item.email-dense-row::before,
.email-page .email-list-items .email-message-item.email-dense-row::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

/* Row height NEVER jumps on hover */
.email-page .email-list-items .email-message-item.email-dense-row,
.email-page .email-list-items .email-message-item.email-dense-row:hover,
.email-page .email-list-items .email-message-item.email-dense-row.selected,
.email-page .email-list-items .email-message-item.email-dense-row.selected:hover,
.email-page .email-list-items .email-message-item.email-dense-row.unread,
.email-page .email-list-items .email-message-item.email-dense-row.unread:hover {
  min-height: 68px !important;
}

/* ============================================================================
   ROW GRID — widen first track so dot+checkbox+star fit on one line
   ============================================================================ */
.email-page .email-message-item.email-dense-row,
.email-page .email-list-items .email-message-item.email-dense-row,
.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row {
  grid-template-columns: 72px minmax(0, 1fr) 72px !important;
}

/* ============================================================================
   TYPOGRAPHY HIERARCHY
   ============================================================================ */
.email-page .email-list-items .email-dense-row.unread .email-message-sender,
.email-page .email-list-items .email-dense-row.unread .email-sender-name {
  font-weight: 650 !important;
  color: var(--bb-warm-text) !important;
}
.email-page .email-list-items .email-dense-row.unread .email-message-subject {
  font-weight: 600 !important;
  color: var(--bb-warm-text) !important;
}
.email-page .email-list-items .email-dense-row:not(.unread) .email-message-sender,
.email-page .email-list-items .email-dense-row:not(.unread) .email-sender-name {
  font-weight: 500 !important;
  color: var(--bb-warm-text) !important;
}
.email-page .email-list-items .email-dense-row:not(.unread) .email-message-subject {
  font-weight: 400 !important;
  color: var(--bb-warm-text) !important;
}
.email-page .email-list-items .email-dense-row .email-message-snippet,
.email-page .email-list-items .email-dense-row .email-message-time {
  color: var(--bb-warm-grey) !important;
  font-weight: 400 !important;
}

/* ============================================================================
   LEFT CLUSTER (.email-row-controls)
   dot · checkbox · star — one system, 22px hit, 14px glyph, 1.5px stroke
   ============================================================================ */
.email-page .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-row-controls,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 0 6px 0 12px !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 100% !important;
  flex: 0 0 72px !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  position: relative !important;
}

/* DOT slot — always reserves space so columns align across read/unread rows.
   Visible filled disc only on unread rows. */
.email-page .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-list-items .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls::before {
  content: "" !important;
  width: var(--mark-size) !important;
  height: var(--mark-size) !important;
  flex: 0 0 var(--mark-size) !important;
  display: inline-block !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  align-self: center !important;
  box-shadow: none !important;
}
.email-page .email-list-items .email-dense-row.unread .email-row-controls::before {
  background:
    radial-gradient(circle at center,
      var(--email-list-dot-color) 0,
      var(--email-list-dot-color) 4px,
      transparent 4.2px) !important;
}

/* CHECKBOX — 22px hit target, 14px circle inside, hidden until row hover */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-bulk-cb,
.email-page .email-list-items .email-message-item.email-dense-row .email-bulk-cb,
.email-page .email-message-item.email-dense-row .email-bulk-cb {
  width: var(--hit-size) !important;
  height: var(--hit-size) !important;
  min-width: var(--hit-size) !important;
  min-height: var(--hit-size) !important;
  max-width: var(--hit-size) !important;
  max-height: var(--hit-size) !important;
  flex: 0 0 var(--hit-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  border: 0 !important;
  position: relative !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-bulk-cb::before,
.email-page .email-list-items .email-message-item.email-dense-row .email-bulk-cb::before,
.email-page .email-message-item.email-dense-row .email-bulk-cb::before {
  position: absolute !important;
  inset: 4px !important;
  width: auto !important;
  height: auto !important;
  border: var(--mark-stroke) solid var(--email-list-icon-muted) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transition: opacity 120ms ease, background 120ms ease, border-color 120ms ease !important;
}
.email-page .email-list-items .email-dense-row .email-bulk-cb:checked::before {
  background: var(--email-list-icon-active) !important;
  border-color: var(--email-list-icon-active) !important;
  opacity: 1 !important;
}

/* STAR — 22px hit target, 14px glyph */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-message-star,
.email-page .email-list-items .email-message-item.email-dense-row .email-message-star,
.email-page .email-message-item.email-dense-row .email-message-star {
  width: var(--hit-size) !important;
  height: var(--hit-size) !important;
  min-width: var(--hit-size) !important;
  min-height: var(--hit-size) !important;
  max-width: var(--hit-size) !important;
  max-height: var(--hit-size) !important;
  flex: 0 0 var(--hit-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--email-list-icon-muted) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  transition: opacity 120ms ease, color 120ms ease !important;
}
.email-page .email-list-items .email-dense-row .email-message-star::before,
.email-page .email-list-items .email-dense-row .email-message-star::after {
  background: transparent !important;
  box-shadow: none !important;
  content: none !important;
}
.email-page .email-list-items .email-dense-row .email-message-star svg {
  width: var(--mark-size) !important;
  height: var(--mark-size) !important;
  stroke: currentColor !important;
  stroke-width: var(--mark-stroke) !important;
  fill: none !important;
}

/* Hover/focus reveal — checkbox + unmarked star */
.email-page .email-list-items .email-dense-row:hover .email-bulk-cb::before,
.email-page .email-list-items .email-dense-row:focus-within .email-bulk-cb::before {
  opacity: 1 !important;
}
.email-page .email-list-items .email-dense-row:hover .email-message-star,
.email-page .email-list-items .email-dense-row:focus-within .email-message-star {
  opacity: 1 !important;
}

/* Filled star — warm dark grey, never yellow/gold/blue */
.email-page .email-list-items .email-dense-row .email-message-star.starred,
.email-page .email-list-items .email-dense-row .email-message-star[aria-pressed="true"],
.email-page .email-list-items .email-dense-row .email-message-star.is-starred {
  opacity: 1 !important;
  color: var(--email-list-icon-active) !important;
}
.email-page .email-list-items .email-dense-row .email-message-star.starred svg,
.email-page .email-list-items .email-dense-row .email-message-star[aria-pressed="true"] svg,
.email-page .email-list-items .email-dense-row .email-message-star.is-starred svg {
  fill: var(--email-list-icon-active) !important;
  stroke: var(--email-list-icon-active) !important;
}

/* Icon hover — darken only, no tile */
.email-page .email-list-items .email-dense-row .email-message-star:hover,
.email-page .email-list-items .email-dense-row .email-message-star:hover svg {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--email-list-icon-active) !important;
  stroke: var(--email-list-icon-active) !important;
}

/* ============================================================================
   RIGHT CLUSTER (.email-message-hover-actions) — match left cluster system
   ============================================================================ */
.email-page .email-list-items .email-message-item.email-dense-row .email-message-hover-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 0 12px 0 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.email-page .email-list-items .email-message-item.email-dense-row .email-hover-btn {
  width: var(--hit-size) !important;
  height: var(--hit-size) !important;
  min-width: var(--hit-size) !important;
  min-height: var(--hit-size) !important;
  max-width: var(--hit-size) !important;
  max-height: var(--hit-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 4px !important;
  color: var(--email-list-icon-muted) !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
.email-page .email-list-items .email-message-item.email-dense-row .email-hover-btn svg {
  width: var(--mark-size) !important;
  height: var(--mark-size) !important;
  stroke: currentColor !important;
  stroke-width: var(--mark-stroke) !important;
  fill: none !important;
}
.email-page .email-list-items .email-message-item.email-dense-row .email-hover-btn:hover,
.email-page .email-list-items .email-message-item.email-dense-row .email-hover-btn:focus,
.email-page .email-list-items .email-message-item.email-dense-row .email-hover-btn:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--email-list-icon-active) !important;
  outline: none !important;
}

/* ============================================================================
   HIDE VIP BADGES / DECORATIVE AVATARS in list view
   ============================================================================ */
.email-page .email-list-items .email-dense-row .email-vip-badge,
.email-page .email-list-items .email-dense-row .email-vip-dot,
.email-page .email-list-items .email-dense-row [class*="vip-badge"],
.email-page .email-list-items .email-dense-row [class*="vip-dot"] {
  display: none !important;
}
.email-page .email-list-items .email-dense-row .email-message-avatar,
.email-page .email-list-items .email-dense-row [class*="avatar"]:not([class*="reader"]) {
  background: var(--bb-cream-soft) !important;
  color: var(--bb-warm-text) !important;
  box-shadow: none !important;
  border: 1px solid rgba(138, 126, 114, 0.15) !important;
}

/* ============================================================================
   READER HEADER — only the trims allowed by spec
   (no broader redesign; no duplicate Sofia; quiet Svar; 22px gutter)
   ============================================================================ */
.email-page .email-reader-header {
  padding: 22px 22px 18px 22px !important;
  border-bottom: 1px solid rgba(138, 126, 114, 0.14) !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ── Svar — sage-fill primary anchor pill (#2306) ── */
.email-page .email-reader-header .email-reader-actions [data-action="reply"],
.email-page .email-app.is-thread-open .email-reader-header .email-reader-actions [data-action="reply"],
.email-page .email-app.is-thread-open.is-reader-split .email-reader-header .email-reader-actions [data-action="reply"],
#email-reader-header .email-reader-actions [data-action="reply"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  flex: 0 0 auto !important;
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  border: 1px solid #5F7B6F !important;
  border-radius: 18px !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 1px 0 rgba(255, 254, 251, 0.18) inset, 0 1px 2px rgba(74, 122, 104, 0.18) !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="reply"] svg,
#email-reader-header .email-reader-actions [data-action="reply"] svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #FFFEFB !important;
  color: #FFFEFB !important;
  stroke-width: 2 !important;
  fill: none !important;
  flex: 0 0 15px !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="reply"] span,
#email-reader-header .email-reader-actions [data-action="reply"] span {
  display: inline-block !important;
  visibility: visible !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="reply"]:hover,
#email-reader-header .email-reader-actions [data-action="reply"]:hover {
  background: #5F7B6F !important;
  border-color: #4A7A68 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 1px 0 rgba(255, 254, 251, 0.20) inset, 0 3px 8px rgba(74, 122, 104, 0.22) !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="reply"]:active,
#email-reader-header .email-reader-actions [data-action="reply"]:active {
  background: #4A7A68 !important;
  transform: none !important;
}

/* ── Supportive chips: Resumé + Lav opgave — identical quiet ivory (#2306, #2499) ── */
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"],
.email-page .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"],
.email-page .email-app.is-thread-open .email-reader-header .email-reader-actions [data-action="quick-summary"],
.email-page .email-app.is-thread-open .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"],
.email-page .email-app.is-thread-open.is-reader-split .email-reader-header .email-reader-actions [data-action="quick-summary"],
.email-page .email-app.is-thread-open.is-reader-split .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"],
#email-reader-header .email-reader-actions [data-action="quick-summary"],
#email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  flex: 0 0 auto !important;
  flex-basis: auto !important;
  background: #FFFEFB !important;
  color: #5C4D43 !important;
  border: 1px solid rgba(92, 77, 67, 0.14) !important;
  border-radius: 10px !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"] svg,
.email-page .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"] svg,
#email-reader-header .email-reader-actions [data-action="quick-summary"] svg,
#email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"] svg {
  width: 15px !important;
  height: 15px !important;
  stroke: #9A8E82 !important;
  color: #9A8E82 !important;
  stroke-width: 1.75 !important;
  fill: none !important;
  flex: 0 0 15px !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"] span,
.email-page .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"] span,
#email-reader-header .email-reader-actions [data-action="quick-summary"] span,
#email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"] span {
  display: inline-block !important;
  visibility: visible !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
  color: inherit !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"]:hover,
.email-page .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"]:hover,
#email-reader-header .email-reader-actions [data-action="quick-summary"]:hover,
#email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"]:hover {
  background: #FBF8F2 !important;
  color: #3A2F26 !important;
  border-color: rgba(110, 138, 126, 0.45) !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"]:hover svg,
.email-page .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"]:hover svg,
#email-reader-header .email-reader-actions [data-action="quick-summary"]:hover svg,
#email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"]:hover svg {
  stroke: #6E8A7E !important;
  color: #6E8A7E !important;
}
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"]:active,
.email-page .email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"]:active,
#email-reader-header .email-reader-actions [data-action="quick-summary"]:active,
#email-reader-header .email-reader-actions .email-todo-action[data-action="extract-todo"]:active {
  background: rgba(110, 138, 126, 0.12) !important;
  border-color: #6E8A7E !important;
}

/* ── Overflow ⋮ — 36x36 calm icon button (#2306) ── */
.email-page .email-reader-header .email-reader-actions .email-more-btn,
.email-page .email-reader-header .email-reader-actions button[aria-label="Flere handlinger"],
#email-reader-header .email-reader-actions .email-more-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #9A8E82 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.email-page .email-reader-header .email-reader-actions .email-more-btn svg,
#email-reader-header .email-reader-actions .email-more-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}
.email-page .email-reader-header .email-reader-actions .email-more-btn:hover,
#email-reader-header .email-reader-actions .email-more-btn:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  color: #3A2F26 !important;
}

/* ── Close × — 36x36 calm icon button (#2306) ── */
.email-page .email-reader-header .email-reader-close-btn,
#email-reader-header .email-reader-close-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #9A8E82 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-left: 4px !important;
  box-shadow: none !important;
  transition: background 160ms ease, color 160ms ease !important;
}
.email-page .email-reader-header .email-reader-close-btn svg,
#email-reader-header .email-reader-close-btn svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}
.email-page .email-reader-header .email-reader-close-btn:hover,
#email-reader-header .email-reader-close-btn:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  color: #3A2F26 !important;
}

/* ── Focus ring for all action-row buttons (#2306) ── */
.email-page .email-reader-header .email-reader-actions [data-action="reply"]:focus-visible,
.email-page .email-reader-header .email-reader-actions [data-action="quick-summary"]:focus-visible,
.email-page .email-reader-header .email-reader-actions .email-todo-action:focus-visible,
.email-page .email-reader-header .email-reader-actions .email-more-btn:focus-visible,
.email-page .email-reader-header .email-reader-close-btn:focus-visible,
#email-reader-header .email-reader-actions [data-action]:focus-visible,
#email-reader-header .email-reader-actions .email-more-btn:focus-visible,
#email-reader-header .email-reader-close-btn:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 2px !important;
}

/* ── Timestamp in .email-reader-from (#2306) ── */
.email-page .email-reader-header .email-reader-from .email-reader-time,
#email-reader-header .email-reader-from .email-reader-time {
  color: #9A8E82 !important;
  font-size: var(--font-size-xs) !important;
  font-weight: 400 !important;
  letter-spacing: 0.005em !important;
  white-space: nowrap !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  order: 3 !important;
  padding-left: 12px !important;
  position: relative !important;
}
.email-page .email-reader-header .email-reader-from .email-reader-time::before,
#email-reader-header .email-reader-from .email-reader-time::before {
  content: "\00B7" !important;
  position: relative !important;
  left: -4px !important;
  color: #C9BFB5 !important;
  font-weight: 600 !important;
}
.email-page .email-reader-header .email-reader-from .email-reader-details-toggle,
#email-reader-header .email-reader-from .email-reader-details-toggle {
  order: 4 !important;
}

/* ── Reduced motion (#2306) ── */
@media (prefers-reduced-motion: reduce) {
  .email-page .email-reader-header .email-reader-actions [data-action="reply"],
  .email-page .email-reader-header .email-reader-actions [data-action="quick-summary"],
  .email-page .email-reader-header .email-reader-actions .email-todo-action,
  .email-page .email-reader-header .email-reader-actions .email-more-btn,
  .email-page .email-reader-header .email-reader-close-btn {
    transition: none !important;
  }
  .email-page .email-reader-header .email-reader-actions [data-action="reply"]:hover {
    transform: none !important;
  }
}


/* =====================================================
   calm-email-modern-polish (16048 chars)
   ===================================================== */

/* Tokens */
.email-page,
.email-app.is-thread-open.is-reader-split .email-page {
  --email-list-icon-muted: #9A8E82;
  --email-list-icon-active: #5C4D43;
  --email-list-icon-hover-bg: rgba(92, 77, 67, 0.06);
  --email-list-unread-dot: #6E8A7E;
  --email-list-selected-bg: rgba(168, 197, 184, 0.12);
  --email-list-selected-hover-bg: rgba(168, 197, 184, 0.14);
  --email-list-row-hover-bg: rgba(255, 254, 251, 0.55);
  --hit-size: 22px;
}

/* Row rhythm */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row,
.email-page .email-list .email-list-items .email-message-item.email-dense-row {
  min-height: 62px !important;
  padding: 10px 14px 10px 16px !important;
  grid-template-columns: 70px minmax(0, 1fr) 104px !important;
  column-gap: 10px !important;
  align-items: center !important;
  transition: background-color 120ms ease !important;
  background: transparent !important;
  box-shadow: none !important;
  border-left: 0 !important;
  border-bottom: 1px solid rgba(92, 77, 67, 0.06) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:last-child,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:last-child { border-bottom: 0 !important; }

.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover { background: var(--email-list-row-hover-bg) !important; }

.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.selected {
  background: var(--email-list-selected-bg) !important;
  box-shadow: none !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.selected:hover {
  background: var(--email-list-selected-hover-bg) !important;
  box-shadow: none !important;
}

/* Controls cluster: dot · circle · star */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 !important;
  width: 70px !important;
  height: 100% !important;
}

/* Unread dot (with soft halo) */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 999px !important;
  background: var(--email-list-unread-dot) !important;
  margin: 0 4px 0 2px !important;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.10) !important;
}
/* Read rows reserve same space */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  margin: 0 4px 0 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Checkbox: pure circle */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.4px solid var(--email-list-icon-muted) !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: 0 !important;
  position: relative !important;
  box-shadow: none !important;
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb::before {
  content: none !important;
  display: none !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:hover {
  border-color: var(--email-list-icon-active) !important;
  background: var(--email-list-icon-hover-bg) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked {
  border-color: #6E8A7E !important;
  background: #6E8A7E !important;
  opacity: 1 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked::after,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 2.5px !important;
  top: 6px !important;
  width: 8px !important;
  height: 4px !important;
  border-left: 1.5px solid #FFFEFB !important;
  border-bottom: 1.5px solid #FFFEFB !important;
  border-right: 0 !important;
  border-top: 0 !important;
  transform: rotate(-45deg) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Star */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  cursor: pointer !important;
  color: var(--email-list-icon-muted) !important;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.4 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star:hover {
  background: var(--email-list-icon-hover-bg) !important;
  color: var(--email-list-icon-active) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred {
  opacity: 1 !important;
  color: var(--email-list-icon-active) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred svg {
  fill: var(--email-list-icon-active) !important;
  stroke: var(--email-list-icon-active) !important;
}

/* Right hover cluster */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  padding: 0 !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--email-list-icon-muted) !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn:hover {
  background: var(--email-list-icon-hover-bg) !important;
  color: var(--email-list-icon-active) !important;
}

/* Reveal on row hover/focus-within */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-bulk-cb,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover .email-bulk-cb,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-bulk-cb,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-bulk-cb,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-star,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-hover-actions,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-hover-actions {
  opacity: 1 !important;
}
/* starred persists */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred { opacity: 1 !important; }

/* Content rhythm */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-content,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  justify-content: center !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-sender,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-sender {
  font-size: var(--calm-fs-14, 14px) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em !important;
  color: var(--bb-warm-text, #5C4D43) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-time,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-time {
  font-size: var(--calm-fs-12, 12px) !important;
  line-height: 1.3 !important;
  color: #8A7E72 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  font-variant-numeric: tabular-nums !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-subject,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-subject {
  font-size: var(--calm-fs-13, 13px) !important;
  line-height: 1.35 !important;
  color: #8A7E72 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-weight: 400 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-sender,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-sender {
  font-weight: 650 !important;
  color: var(--bb-warm-text, #5C4D43) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-subject,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-subject {
  font-weight: 500 !important;
  color: var(--bb-warm-text, #5C4D43) !important;
}

/* Hide VIP badges in list */
.email-page .email-list-items .email-vip-badge { display: none !important; }


/* =====================================================
   calm-email-unread-dot-fix (784 chars)
   ===================================================== */

/* Unread dot — bump specificity to beat the placeholder ::before rule
   in .is-thread-open.is-reader-split paths */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-list-items .email-dense-row.unread .email-row-controls::before {
  background:
    radial-gradient(circle at center,
      var(--email-list-dot-color, #6E8A7E) 0,
      var(--email-list-dot-color, #6E8A7E) 4px,
      transparent 4.2px) !important;
}


/* =====================================================
   calm-email-hover-reveal-fix (2896 chars)
   ===================================================== */

/* Hover/focus reveal — match the highest-specificity selectors used in
   the consolidated stylesheet's base hide rules */

.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-bulk-cb::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-bulk-cb::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:hover .email-bulk-cb::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:focus-within .email-bulk-cb::before,
.email-page .email-list-items .email-message-item.email-dense-row:hover .email-bulk-cb::before,
.email-page .email-list-items .email-message-item.email-dense-row:focus-within .email-bulk-cb::before {
  opacity: 1 !important;
}

.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:focus-within .email-message-star,
.email-page .email-list-items .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-list-items .email-message-item.email-dense-row:focus-within .email-message-star {
  opacity: 1 !important;
}

/* Filled star always visible, regardless of hover state */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star[aria-pressed="true"],
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.is-starred,
.email-page .email-list-items .email-message-item.email-dense-row .email-message-star.starred,
.email-page .email-list-items .email-message-item.email-dense-row .email-message-star[aria-pressed="true"],
.email-page .email-list-items .email-message-item.email-dense-row .email-message-star.is-starred {
  opacity: 1 !important;
}

/* Checked checkbox circle always visible */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked::before,
.email-page .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked::before {
  opacity: 1 !important;
}


/* =====================================================
   calm-reader-header-rebuild (13080 chars)
   ===================================================== */

/* ====================================================================
   CALM READER HEADER — action-cluster polish
   Structure, subject, from, date, to, details-toggle, and grid layout
   moved to source email-reader.css (#1473).
   Only action-button styling remains here.
==================================================================== */

/* ── calm-reader-header-rebuild: replaced by #2306 approved action row ── */
/* Svar, ask-sofia, close, more, chips now defined in the #2306 block above. */

/* Hide the absolutely-positioned snooze wrapper noise */
.email-page .email-reader-header .email-snooze-btn-wrapper,
#email-reader-header .email-snooze-btn-wrapper {
  display: none !important;
}

/* Suppress the more-dropdown items from showing inline (only show as menu) */
.email-page .email-reader-header .email-more-dropdown,
#email-reader-header .email-more-dropdown {
  /* Keep the existing display rules; only restyle if visible */
  font-size: var(--calm-fs-14, 14px) !important;
}

/* Mobile fallback: stack actions full width */
@media (max-width: 640px) {
  .email-page .email-reader-header,
  #email-reader-header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "subject" "actions" "meta" !important;
  }
  .email-page .email-reader-header .email-reader-actions,
  #email-reader-header .email-reader-actions {
    justify-content: flex-start !important;
  }
}

/* ── Reply/chip/close span & size overrides: now handled by #2306 block ── */


/* =====================================================
   calm-reader-reply-polish (9343 chars)
   ===================================================== */

.email-page {
  --reply-h-pad-x:               22px;
  --reply-h-pad-top:             14px;
  --reply-h-pad-bottom:          22px;
  --reply-divider:               rgba(92, 77, 67, 0.08);

  --reply-pill-bg:               #FFFEFB;
  --reply-pill-border:           rgba(92, 77, 67, 0.16);
  --reply-pill-border-focus:     rgba(92, 77, 67, 0.55);
  --reply-pill-shadow:           0 1px 2px rgba(58, 47, 38, 0.04);
  --reply-pill-shadow-focus:     0 0 0 2px rgba(92, 77, 67, 0.08),
                                 0 1px 2px rgba(58, 47, 38, 0.05);
  --reply-pill-radius:           999px;
  --reply-pill-height:           56px;
  --reply-pill-pad-l:            22px;
  --reply-pill-pad-r:            6px;       /* tight so draft sits flush inside */
  --reply-pill-gap:              8px;

  --reply-input-color:           #3A2F26;
  --reply-input-placeholder:     #9A8E82;
  --reply-input-size:            16px;
  --reply-input-weight:          500;

  /* Mic: bigger, real affordance */
  --reply-mic-size:              44px;
  --reply-mic-glyph:             22px;
  --reply-mic-color:             #7A6E62;
  --reply-mic-color-hover:       #5C4D43;
  --reply-mic-bg-hover:          rgba(92, 77, 67, 0.06);
  --reply-mic-bg-active:         rgba(110, 138, 126, 0.16);
  --reply-mic-color-active:      #4A7A68;

  /* Draft: solid sage fill, no outline, sits flush inside pill */
  --reply-draft-bg:              #6E8A7E;
  --reply-draft-bg-hover:        #5E7A6E;
  --reply-draft-bg-active:       #4A7A68;
  --reply-draft-color:           #FFFEFB;
  --reply-draft-height:          44px;
  --reply-draft-pad-x:           18px;

  --reply-tone-color:            #9A8E82;
  --reply-tone-size:             12px;
}

/* Dark-værn for reply-pill-varsene (follow-up fra mobil-skærm-2, 9/7):
   varsene ovenfor er LYS-værdier på .email-page uden dark-override; dark
   reddes i dag af KONKRETE senere regler (email-reader.css:2588-2600 +
   email-darkmode-detail-polish.css:288) der overskriver properties — så
   enhver NY forbruger af var(--reply-pill-*) får lyse værdier i dark
   (fx mobil-footerens fallbacks). Blokken spejler de FAKTISK renderede
   dark-værdier 1:1 (status quo — reglerne vinder stadig; rendering
   uændret), så varsene er retvisende i begge temaer. Geometri-vars er
   theme-neutrale og gentages ikke. Placeholder har INGEN dark-korrektion
   i dag og beholdes derfor bevidst (status quo). */
[data-theme="dark"] .email-page {
  --reply-pill-bg:               rgba(255, 255, 255, 0.06);
  --reply-pill-border:           rgba(255, 255, 255, 0.14);
  --reply-pill-border-focus:     rgba(200, 190, 178, 0.48);
  --reply-pill-shadow:           none;
  --reply-pill-shadow-focus:     0 0 0 2px rgba(200, 190, 178, 0.10);
  --reply-input-color:           var(--color-text-primary, #E8DDD4);
}

/* Container */
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply,
.email-page .email-reader-reply {
  display: block !important;
  padding: var(--reply-h-pad-top) var(--reply-h-pad-x) var(--reply-h-pad-bottom) var(--reply-h-pad-x) !important;
  margin: 0 !important;
  background: transparent !important;
  border-top: 1px solid var(--reply-divider) !important;
}

/* Input zone */
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input-zone,
.email-page .email-reader-reply .email-reply-input-zone {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Pill */
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input-wrap,
.email-page .email-reader-reply .email-reply-input-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--reply-pill-gap) !important;
  width: 100% !important;
  height: var(--reply-pill-height) !important;
  min-height: var(--reply-pill-height) !important;
  padding: 0 var(--reply-pill-pad-r) 0 var(--reply-pill-pad-l) !important;
  background: var(--reply-pill-bg) !important;
  border: 1.5px solid var(--reply-pill-border) !important;
  border-radius: var(--reply-pill-radius) !important;
  box-shadow: var(--reply-pill-shadow) !important;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease !important;
  overflow: hidden !important;     /* keep children visually inside the pill */
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input-wrap:hover,
.email-page .email-reader-reply .email-reply-input-wrap:hover {
  border-color: rgba(92, 77, 67, 0.22) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input-wrap:focus-within,
.email-page .email-reader-reply .email-reply-input-wrap:focus-within {
  border-color: var(--reply-pill-border-focus) !important;
  box-shadow: var(--reply-pill-shadow-focus) !important;
  background: #FFFEFB !important;
}

/* Input */
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input,
.email-page .email-reader-reply .email-reply-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: var(--reply-input-size) !important;
  font-weight: var(--reply-input-weight) !important;
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  color: var(--reply-input-color) !important;
  font-family: var(--font-family)!important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input::placeholder,
.email-page .email-reader-reply .email-reply-input::placeholder {
  color: var(--reply-input-placeholder) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input:focus,
.email-page .email-reader-reply .email-reply-input:focus,
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-input:focus-visible,
.email-page .email-reader-reply .email-reply-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Mic — bigger glyph, bigger hit, sits between input and draft */
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-mic,
.email-page .email-reader-reply .email-reply-mic {
  flex: 0 0 var(--reply-mic-size) !important;
  width: var(--reply-mic-size) !important;
  height: var(--reply-mic-size) !important;
  min-width: var(--reply-mic-size) !important;
  min-height: var(--reply-mic-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--reply-mic-color) !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-mic svg,
.email-page .email-reader-reply .email-reply-mic svg {
  width: var(--reply-mic-glyph) !important;
  height: var(--reply-mic-glyph) !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-mic:hover,
.email-page .email-reader-reply .email-reply-mic:hover {
  background: var(--reply-mic-bg-hover) !important;
  color: var(--reply-mic-color-hover) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-mic[aria-pressed="true"],
.email-page .email-reader-reply .email-reply-mic[aria-pressed="true"] {
  background: var(--reply-mic-bg-active) !important;
  color: var(--reply-mic-color-active) !important;
}

/* Draft — solid sage fill, no outline, fits inside pill cleanly */
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft,
.email-page .email-reader-reply .email-reply-draft {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  height: var(--reply-draft-height) !important;
  min-height: var(--reply-draft-height) !important;
  padding: 0 var(--reply-draft-pad-x) !important;
  margin: 0 !important;
  background: var(--reply-draft-bg) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--reply-draft-color) !important;
  font-family: var(--font-family)!important;
  font-size: var(--calm-fs-14, 14px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color 120ms ease, color 120ms ease !important;
  flex: 0 0 auto !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft span,
.email-page .email-reader-reply .email-reply-draft span {
  display: inline-block !important;
  visibility: visible !important;
  font-size: var(--calm-fs-14, 14px) !important;
  font-weight: 600 !important;
  color: inherit !important;
  line-height: 1 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft:hover,
.email-page .email-reader-reply .email-reply-draft:hover {
  background: var(--reply-draft-bg-hover) !important;
  color: var(--reply-draft-color) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft:active,
.email-page .email-reader-reply .email-reply-draft:active {
  background: var(--reply-draft-bg-active) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft:focus-visible,
.email-page .email-reader-reply .email-reply-draft:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
  background: var(--reply-draft-bg-hover) !important;
}

.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft.email-chip-generating,
.email-page .email-reader-reply .email-reply-draft.email-chip-generating {
  position: relative !important;
  overflow: hidden !important;
  opacity: 0.7 !important;
  pointer-events: none !important;
  cursor: wait !important;
}

.email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft.email-chip-generating::after,
.email-page .email-reader-reply .email-reply-draft.email-chip-generating::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 8px !important;
  right: 8px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 254, 251, 0.6), transparent) !important;
  background-size: 200% 100% !important;
  animation: email-shimmer 1.2s ease infinite !important;
  border-radius: 0 0 999px 999px !important;
}

@media (prefers-reduced-motion: reduce) {
  .email-page .email-app.is-thread-open.is-reader-split .email-reader-reply .email-reply-draft.email-chip-generating::after,
  .email-page .email-reader-reply .email-reply-draft.email-chip-generating::after {
    animation: none !important;
    background: rgba(255, 254, 251, 0.6) !important;
    background-size: auto !important;
    opacity: 0.75 !important;
  }
}


/* =====================================================
   calm-hide-decor-arcs (205 chars)
   ===================================================== */

/* Remove decorative arc rings — they carry no meaning and add visual noise */
.bb-decor,
.bb-decor .bb-arc,
.bb-arc-rose-1,
.bb-arc-rose-2,
.bb-arc-sage-1,
.bb-arc-sage-2 {
  display: none !important;
}


/* =====================================================
   calm-list-header-polish (6390 chars)
   ===================================================== */

/* ====================================================================
   CALM EMAIL LIST HEADER — ADHD/DYSLEXIA POLISH
   - Folder name as anchor (22px / weight 650 / near-black warm)
   - One clear count line: unread FIRST, sage-highlighted; total second
   - Warm color system everywhere (no cool blue-greys)
   - Tools (when shown) match reader-header icon buttons
==================================================================== */

/* Container */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header,
.email-page .email-list-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 22px 14px 22px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(92, 77, 67, 0.08) !important;
}

/* Heading block */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-heading,
.email-page .email-list-header .email-list-heading {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Title — the anchor */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-title,
.email-page .email-list-header .email-list-title {
  font-family: var(--font-family)!important;
  font-size: var(--calm-fs-22, 22px) !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: #3A2F26 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Count line */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-count,
.email-page .email-list-header .email-list-count {
  font-family: var(--font-family)!important;
  font-size: var(--calm-fs-13, 13px) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  color: #9A8E82 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Sage emphasis on the unread number (added via JS wrapper) */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-count .calm-unread-num,
.email-page .email-list-header .email-list-count .calm-unread-num {
  color: #4A7A68 !important;
  font-weight: 650 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-count .calm-unread-num::before,
.email-page .email-list-header .email-list-count .calm-unread-num::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #6E8A7E !important;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.10) !important;
  margin: 0 7px 1px 0 !important;
  vertical-align: middle !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-count .calm-dim,
.email-page .email-list-header .email-list-count .calm-dim {
  color: #9A8E82 !important;
  font-weight: 500 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-count .calm-sep,
.email-page .email-list-header .email-list-count .calm-sep {
  color: rgba(154, 142, 130, 0.5) !important;
  margin: 0 8px !important;
  font-weight: 400 !important;
}

/* Tools cluster — when not display:none, match reader-header icon buttons */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-tools,
.email-page .email-list-header .email-list-tools {
  /* display intentionally not forced — respect responsive hiding */
  align-items: center !important;
  gap: 4px !important;
  flex: 0 0 auto !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-tool,
.email-page .email-list-header .email-list-tool {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9A8E82 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-tool svg,
.email-page .email-list-header .email-list-tool svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-tool:hover,
.email-page .email-list-header .email-list-tool:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  color: #5C4D43 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-tool[aria-pressed="true"],
.email-page .email-list-header .email-list-tool[aria-pressed="true"] {
  background: rgba(168, 197, 184, 0.14) !important;
  color: #4A7A68 !important;
}
/* Selection count badge (when active) */
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-select-count,
.email-page .email-list-header .email-list-select-count {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: #6E8A7E !important;
  color: #FFFEFB !important;
  font-size: var(--calm-fs-10, 10px) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: 16px !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list-header .email-list-select-count:empty,
.email-page .email-list-header .email-list-select-count:empty { display: none !important; }

/* =====================================================
   cl-refresh — calm manual refresh status in list header
   ===================================================== */

.email-page .email-list-header .email-list-title-row {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  gap: 8px !important;
  min-width: 0 !important;
}
.email-page .email-list-header .email-list-title-row .email-list-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.email-page .email-list-header .cl-refresh {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.email-page .email-list-header .cl-refresh__label {
  font-family: var(--font-family) !important;
  font-size: var(--calm-fs-12, 12px) !important;
  line-height: 1.3 !important;
  font-weight: 500 !important;
  color: var(--bb-warm-grey-light, #B5A99D) !important;
  white-space: nowrap !important;
  user-select: none !important;
  transition: color 180ms ease !important;
}
.email-page .email-list-header .cl-refresh__label--error {
  color: #C97A5A !important;
}
.email-page .email-list-header .cl-refresh__label--dot::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: #6E8A7E !important;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.10) !important;
  margin: 0 5px 1px 0 !important;
  vertical-align: middle !important;
}

.email-page .email-list-header .cl-refresh__btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(92, 77, 67, 0.12) !important;
  background: transparent !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--bb-warm-grey, #8A7E72) !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease !important;
}
.email-page .email-list-header .cl-refresh__btn:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  border-color: rgba(92, 77, 67, 0.18) !important;
  color: var(--bb-warm-text, #5C4D43) !important;
}
.email-page .email-list-header .cl-refresh__btn:active {
  background: rgba(92, 77, 67, 0.10) !important;
  border-color: rgba(92, 77, 67, 0.22) !important;
}
.email-page .email-list-header .cl-refresh__btn:focus-visible {
  outline: 2px solid var(--bb-sage, #A8C5B8) !important;
  outline-offset: 2px !important;
}
.email-page .email-list-header .cl-refresh__btn:disabled {
  cursor: default !important;
  opacity: 1 !important;
}

.email-page .email-list-header .cl-refresh__btn--loading .cl-refresh__icon {
  animation: none !important;
  opacity: 0 !important;
}
.email-page .email-list-header .cl-refresh__btn--loading {
  position: relative !important;
}
.email-page .email-list-header .cl-refresh__btn--loading::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 14px !important;
  margin: -7px 0 0 -7px !important;
  border: 2px solid rgba(168, 197, 184, 0.35) !important;
  border-top-color: #6E8A7E !important;
  border-radius: 50% !important;
  will-change: transform !important;
  transform-origin: 50% 50% !important;
  animation: cl-refresh-spin 800ms linear infinite !important;
}
@keyframes cl-refresh-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .email-page .email-list-header .cl-refresh__btn--loading::before {
    animation: none !important;
    border-color: rgba(168, 197, 184, 0.35) !important;
    border-top-color: #6E8A7E !important;
    opacity: 0.6 !important;
  }
}

.email-page .email-list-header .cl-refresh__icon {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  transition: none !important;
}

[data-theme="dark"] .email-page .email-list-header .cl-refresh__label {
  color: var(--bb-warm-grey-light, #9A8E82) !important;
}
[data-theme="dark"] .email-page .email-list-header .cl-refresh__label--error {
  color: #D4896A !important;
}
[data-theme="dark"] .email-page .email-list-header .cl-refresh__btn {
  border-color: rgba(237, 230, 221, 0.10) !important;
  color: var(--bb-warm-grey, #C9BAAA) !important;
}
[data-theme="dark"] .email-page .email-list-header .cl-refresh__btn:hover {
  background: rgba(237, 230, 221, 0.06) !important;
  border-color: rgba(237, 230, 221, 0.16) !important;
  color: var(--bb-warm-text, #EDE6DD) !important;
}

/* =====================================================
   Mobile list header — two-row grid (max-width: 600px)
   Row 1: title (left) + refresh button (right)
   Row 2: meta/count line spanning full width
   ===================================================== */

@media (max-width: 600px) {

  /* --- sr-only clip for refresh label (keeps aria-live/atomic in a11y tree) --- */
  .email-page .email-list-header .cl-refresh__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* --- Two-row grid header --- */
  .email-page .email-list-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 14px 16px 10px !important;
  }

  .email-page .email-list-header .email-list-heading {
    display: contents !important;
  }

  .email-page .email-list-header .email-list-title-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .email-page .email-list-header .email-list-title-row .email-list-title {
    font-size: var(--font-size-2xl) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .email-page .email-list-header .cl-refresh {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* --- Pull-to-refresh owns mobile refresh; keep aria-live label only --- */
  .email-page .email-list-header .cl-refresh__btn {
    display: none !important;
  }

  /* --- Meta line: count + last-updated suffix --- */
  .email-page .email-list-header .email-list-count {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: var(--font-size-sm) !important;
    color: #9A8E82 !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .email-page .email-list-header .email-list-count[data-last-updated-text]::after {
    content: " \00B7  " attr(data-last-updated-text) !important;
    color: #B5A99D !important;
    font-weight: 400 !important;
  }

  /* --- Hide bulk-select tools on mobile --- */
  .email-page .email-list-header .email-list-tools {
    display: none !important;
  }
}

/* --- Mobile dark-mode header overrides --- */
@media (max-width: 600px) {
  [data-theme="dark"] .email-page .email-list-header .cl-refresh__btn:active {
    background: rgba(237, 230, 221, 0.10) !important;
  }
  [data-theme="dark"] .email-page .email-list-header .email-list-count[data-last-updated-text]::after {
    color: var(--bb-warm-grey-light, #9A8E82) !important;
  }
}

/* =====================================================
   Landscape phone list header — same two-row grid treatment
   Targets phones in landscape (width ≤ 900px, height ≤ 500px, orientation: landscape)
   e.g. 667x375, 640x360, 568x320
   ===================================================== */

@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {

  /* --- sr-only clip for refresh label (keeps aria-live/atomic in a11y tree) --- */
  .email-page .email-list-header .cl-refresh__label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* --- Two-row grid header --- */
  .email-page .email-list-header {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 2px 8px !important;
    padding: 14px 16px 10px !important;
  }

  .email-page .email-list-header .email-list-heading {
    display: contents !important;
  }

  .email-page .email-list-header .email-list-title-row {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  .email-page .email-list-header .email-list-title-row .email-list-title {
    font-size: var(--font-size-2xl) !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .email-page .email-list-header .cl-refresh {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* --- Pull-to-refresh owns mobile refresh; keep aria-live label only --- */
  .email-page .email-list-header .cl-refresh__btn {
    display: none !important;
  }

  /* --- Meta line: count + last-updated suffix --- */
  .email-page .email-list-header .email-list-count {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: var(--font-size-sm) !important;
    color: #9A8E82 !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .email-page .email-list-header .email-list-count[data-last-updated-text]::after {
    content: " \00B7  " attr(data-last-updated-text) !important;
    color: #B5A99D !important;
    font-weight: 400 !important;
  }

  /* --- Hide bulk-select tools on landscape phones --- */
  .email-page .email-list-header .email-list-tools {
    display: none !important;
  }

  /* --- Landscape scrollbars: 4px thin --- */
  .email-page .email-list-items,
  .email-page .email-columns,
  .email-page .email-reader,
  .email-page .email-reader-body,
  .email-page .email-compose-body-wrap,
  .email-page .email-drawer-content,
  .email-page .email-attachment-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.18) transparent !important;
  }
  .email-page .email-list-items::-webkit-scrollbar,
  .email-page .email-columns::-webkit-scrollbar,
  .email-page .email-reader::-webkit-scrollbar,
  .email-page .email-reader-body::-webkit-scrollbar,
  .email-page .email-compose-body-wrap::-webkit-scrollbar,
  .email-page .email-drawer-content::-webkit-scrollbar,
  .email-page .email-attachment-list::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }
  .email-page .email-list-items::-webkit-scrollbar-thumb,
  .email-page .email-columns::-webkit-scrollbar-thumb,
  .email-page .email-reader::-webkit-scrollbar-thumb,
  .email-page .email-reader-body::-webkit-scrollbar-thumb,
  .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb,
  .email-page .email-drawer-content::-webkit-scrollbar-thumb,
  .email-page .email-attachment-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18) !important;
    border-radius: 4px !important;
  }
}

/* --- Landscape dark-mode header overrides --- */
@media (orientation: landscape) and (max-width: 900px) and (max-height: 500px) {
  [data-theme="dark"] .email-page .email-list-header .cl-refresh__btn:active {
    background: rgba(237, 230, 221, 0.10) !important;
  }
  [data-theme="dark"] .email-page .email-list-header .email-list-count[data-last-updated-text]::after {
    color: var(--bb-warm-grey-light, #9A8E82) !important;
  }
  [data-theme="dark"] .email-page .email-list-items,
  [data-theme="dark"] .email-page .email-columns,
  [data-theme="dark"] .email-page .email-reader,
  [data-theme="dark"] .email-page .email-reader-body,
  [data-theme="dark"] .email-page .email-compose-body-wrap,
  [data-theme="dark"] .email-page .email-drawer-content,
  [data-theme="dark"] .email-page .email-attachment-list {
    scrollbar-color: rgba(255,255,255,0.18) transparent !important;
  }
  [data-theme="dark"] .email-page .email-list-items::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-columns::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-reader::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-reader-body::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-drawer-content::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-attachment-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18) !important;
  }
}


/* =====================================================
   calm-list-item-polish (24827 chars)
   ===================================================== */

/* ====================================================================
   CALM EMAIL LIST ITEM — ADHD/DYSLEXIA POLISH (v3 — correct grid)
   Row grid: controls · avatar · content · time · hover-actions
==================================================================== */

/* Row container — 5 columns, content is the flexible one */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row,
.email-page .email-list .email-list-items .email-message-item.email-dense-row {
  display: grid !important;
  grid-template-columns: 72px 32px minmax(0, 1fr) auto 84px !important;
  column-gap: 12px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 12px 14px 12px 12px !important;
  background: transparent !important;
  border-left: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(92, 77, 67, 0.06) !important;
  transition: background-color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:last-child,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:last-child { border-bottom: 0 !important; }

/* Backgrounds */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover { background: rgba(255, 254, 251, 0.55) !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.selected {
  background: rgba(168, 197, 184, 0.12) !important;
  box-shadow: none !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.selected:hover { background: rgba(168, 197, 184, 0.14) !important; }

/* =====================================================
   1. CONTROLS COLUMN — dot · checkbox · star
   ===================================================== */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  padding: 0 !important;
  width: 56px !important; height: 100% !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  border-radius: 999px !important;
  background: #6E8A7E !important;
  margin: 0 4px 0 2px !important;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.10) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  margin: 0 4px 0 2px !important;
  background: transparent !important;
}
/* Checkbox */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1.4px solid #9A8E82 !important;
  border-radius: 999px !important;
  background: transparent !important;
  cursor: pointer !important;
  opacity: 0 !important;
  position: relative !important;
  box-shadow: none !important;
  transition: opacity 120ms ease, border-color 120ms ease, background-color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb::before { content: none !important; display: none !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:hover {
  border-color: #5C4D43 !important;
  background: rgba(92, 77, 67, 0.06) !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked {
  border-color: #6E8A7E !important;
  background: #6E8A7E !important;
  opacity: 1 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked::after,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-bulk-cb:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 2.5px !important;
  top: 6px !important;
  width: 8px !important;
  height: 4px !important;
  border-left: 1.5px solid #FFFEFB !important;
  border-bottom: 1.5px solid #FFFEFB !important;
  border-right: 0 !important;
  border-top: 0 !important;
  transform: rotate(-45deg) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
/* Star */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  cursor: pointer !important;
  color: #9A8E82 !important;
  transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.4 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  color: #5C4D43 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred {
  opacity: 1 !important;
  color: #5C4D43 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred svg {
  fill: #5C4D43 !important;
  stroke: #5C4D43 !important;
}

/* Reveal cluster on hover/focus-within */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-bulk-cb,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover .email-bulk-cb,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-bulk-cb,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-bulk-cb,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-star,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-star,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:hover .email-message-hover-actions,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:focus-within .email-message-hover-actions {
  opacity: 1 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred { opacity: 1 !important; }

/* =====================================================
   2. AVATAR COLUMN — calm warm monogram
   ===================================================== */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 999px !important;
  background: var(--calm-avatar-bg, #EFE7DF) !important;
  color: var(--calm-avatar-fg, #5C4D43) !important;
  font-family: var(--font-family)!important;
  font-size: var(--calm-fs-12, 12px) !important;
  font-weight: 650 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  user-select: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Starred → soft sage ring */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-star.starred ~ * .email-message-avatar { box-shadow: none !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.starred-row .email-message-avatar,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.starred-row .email-message-avatar { box-shadow: 0 0 0 1.5px #6E8A7E !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.selected .email-message-avatar,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.selected .email-message-avatar {
  background: rgba(168, 197, 184, 0.22) !important;
  color: #3F6A5A !important;
}

/* =====================================================
   3. CONTENT COLUMN — sender + subject + snippet
   ===================================================== */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-content,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  justify-content: center !important;
}

/* Sender line — 14px, weight 600, near-black warm */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-sender,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-sender {
  font-family: var(--font-family)!important;
  font-size: var(--calm-fs-14, 14px) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: #3A2F26 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-sender,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-sender {
  font-weight: var(--font-weight-bold, 700) !important;
}

/* Line (subject + snippet inline) */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-line,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-line {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  font-size: var(--calm-fs-13, 13px) !important;
  line-height: 1.4 !important;
}
/* Subject — body weight */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-subject,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-subject {
  font-size: var(--calm-fs-13, 13px) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #5C4D43 !important;
  letter-spacing: 0 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-subject,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-subject {
  font-weight: 600 !important;
  color: #3A2F26 !important;
}
/* Snippet — muted body text after subject. Separated by " — " inserted via ::before */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet {
  font-size: var(--calm-fs-13, 13px) !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  /* #9A8E82 was 3.17:1 on #FFFEFB — the triage line must clear AA (4.98:1) */
  color: #7A6D60 !important;
  letter-spacing: 0 !important;
  margin-left: 6px !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet:not(:empty)::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet:not(:empty)::before {
  content: "\2014\00a0" !important;
  color: rgba(154, 142, 130, 0.5) !important;
  margin-right: 2px !important;
}

/* =====================================================
   4. META COLUMN — time only
   ===================================================== */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-time,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-time {
  font-size: var(--calm-fs-12, 12px) !important;
  line-height: 1.3 !important;
  color: #7A6D60 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
/* Unread time: weight only — the colour is owned by email-base's #email-list-items
   ID rule (warm near-black); a colour here can never win and would only zombie. */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-time,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-message-time {
  font-weight: 600 !important;
}

/* Attachment paperclip — if it lives in meta column, make it inline pre-time, smaller */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta svg,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta .email-message-attachment-icon,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta .email-message-attachment-icon {
  width: 12px !important;
  height: 12px !important;
  stroke: #9A8E82 !important;
  stroke-width: 1.8 !important;
  fill: none !important;
  flex: 0 0 12px !important;
  margin: 0 !important;
  opacity: 0.8 !important;
}

/* Flags container — release earlier narrow max-width caps (#3415) */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-flags,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-flags {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: none !important;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* Reply badge — keep visible Svaret, never shrink/clip (#3415) */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-replied-badge,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-replied-badge {
  flex-shrink: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* =====================================================
   5. HOVER ACTIONS COLUMN — archive · trash · mail
   ===================================================== */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  height: 100% !important;
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #9A8E82 !important;
  cursor: pointer !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn svg,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn svg {
  width: 15px !important;
  height: 15px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn:hover,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions .email-hover-btn:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  color: #5C4D43 !important;
}

/* =====================================================
   Date-group landmark — slightly stronger
   ===================================================== */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-list-time-group,
.email-page .email-list .email-list-items .email-list-time-group {
  font-family: var(--font-family)!important;
  font-size: var(--calm-fs-11, 11px) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9A8E82 !important;
  /* left 66px = the sender rail (row margin 6 + pad 4 + control col 44 + gap 12) —
     the group label sits ON the reading rail, not over the checkbox column */
  padding: 16px 14px 8px 66px !important;
  margin: 0 !important;
  background: var(--email-list-surface, rgba(255, 254, 251, 0.94)) !important;
  border: 0 !important;
  position: static !important;
}

/* VIP badges hidden in list view */
.email-page .email-list-items .email-vip-badge { display: none !important; }

/* Explicit grid placement — override legacy grid-column assignments */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls          { grid-column: 1 / 2 !important; grid-row: 1 / 2 !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-avatar        { grid-column: 2 / 3 !important; grid-row: 1 / 2 !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-content,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-content       { grid-column: 3 / 4 !important; grid-row: 1 / 2 !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta          { grid-column: 4 / 5 !important; grid-row: 1 / 2 !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions { grid-column: 5 / 6 !important; grid-row: 1 / 2 !important; }

.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet.calm-snippet-redundant,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet.calm-snippet-redundant {
  display: none !important;
}
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet.calm-snippet-redundant::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet.calm-snippet-redundant::before {
  content: none !important;
  display: none !important;
}

/* Subject + snippet inline so they share the line */
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-subject,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-subject { display: inline !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet { display: inline !important; }
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet.calm-snippet-redundant,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-snippet.calm-snippet-redundant { display: none !important; }


/* =====================================================
   calm-email-folders-polish (9506 chars)
   ===================================================== */

/* =========================================================
   CALM FOLDERS RAIL — ADHD/dyslexia polish
   Goal: clear hierarchy (hero compose → landmark → folders),
   warm palette only, sage = active/meaning, quiet icons.
   ========================================================= */

/* The rail itself */
.email-page .email-folders {
  background: #FBF8F2 !important;
  padding: 18px 14px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* --- Header zone --------------------------------------------- */
.email-page .email-folders .email-rail-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  padding: 0 4px 10px !important;
  margin: 0 0 6px !important;
  border-bottom: 1px solid rgba(92, 77, 67, 0.08) !important;
}

/* Compose: hero sage-fill action, matches "Svar" / "Lav udkast" */
.email-page .email-folders .email-rail-compose {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  height: 46px !important;
  padding: 0 18px !important;
  background: #6E8A7E !important;
  color: #FFFDF7 !important;
  font: 650 14.5px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.005em !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(63, 106, 90, 0.16) !important;
  cursor: pointer !important;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
}
.email-page .email-folders .email-rail-compose svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2 !important;
  color: #FFFDF7 !important;
  opacity: 1 !important;
}
.email-page .email-folders .email-rail-compose:hover {
  background: #5F7C70 !important;
  box-shadow: 0 2px 6px rgba(63, 106, 90, 0.22) !important;
}
.email-page .email-folders .email-rail-compose:active {
  background: #4A7A68 !important;
  /* press = settle: a real 1px drop and the hover-lift shadow flattens back to rest */
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 rgba(63, 106, 90, 0.16) !important;
}
/* Keyboard focus in the house language (Morten: no focus line): the hover state
   doubles as the focus state — outline stays suppressed by the global reset. */
.email-page .email-folders .email-rail-compose:focus-visible {
  outline: none !important;
  background: #5F7C70 !important;
  box-shadow: 0 2px 6px rgba(63, 106, 90, 0.22) !important;
}

/* "Mapper" landmark heading — small caps, calm warm */
@media (max-width: 600px) {
  .email-page .email-columns > .email-folders .email-rail-compose {
    width: calc(100% - 64px) !important;
    max-width: calc(100% - 64px) !important;
    margin-right: 64px !important;
    min-width: 0 !important;
  }
}

.email-page .email-folders .email-rail-heading {
  display: block !important;
  font: 700 11px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #9A8E82 !important;
  padding: 0 8px !important;
  margin: 0 !important;
}

/* --- Folder items -------------------------------------------- */
.email-page .email-folders .email-folder-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  color: #5C4D43 !important;            /* warm dark — readable, not loud */
  font: 500 14.5px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.002em !important;
  cursor: pointer !important;
  text-align: left !important;
  position: relative !important;
  transition: background 120ms ease, color 120ms ease !important;
  box-shadow: none !important;
}

/* Icon: quieter than label, so label leads the scan */
.email-page .email-folders .email-folder-item .email-folder-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  color: #9A8E82 !important;             /* muted warm — supportive, not loud */
  opacity: 1 !important;
}
.email-page .email-folders .email-folder-item .email-folder-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.85 !important;
}

/* Label: takes the visual weight */
.email-page .email-folders .email-folder-item .email-folder-label {
  flex: 1 1 auto !important;
  color: inherit !important;
  font: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Idle hover: subtle warm wash */
.email-page .email-folders .email-folder-item:hover {
  background: rgba(255, 254, 251, 0.85) !important;
  color: #3A2F26 !important;
}
.email-page .email-folders .email-folder-item:hover .email-folder-icon {
  color: #6E5B4E !important;
}

/* Active folder: sage tint + sage icon + warm-black label weight up */
.email-page .email-folders .email-folder-item.active,
.email-page .email-folders .email-folder-item[aria-current="true"] {
  background: rgba(168, 197, 184, 0.16) !important;
  color: #3A2F26 !important;             /* warm near-black */
  font-weight: var(--font-weight-bold, 700) !important;
}
.email-page .email-folders .email-folder-item.active .email-folder-icon,
.email-page .email-folders .email-folder-item[aria-current="true"] .email-folder-icon {
  color: #4A7A68 !important;             /* sage — meaning: you are here */
}
.email-page .email-folders .email-folder-item.active .email-folder-icon svg,
.email-page .email-folders .email-folder-item[aria-current="true"] .email-folder-icon svg {
  stroke-width: 2 !important;
}

.email-page .email-folders .email-folder-item.active:hover,
.email-page .email-folders .email-folder-item[aria-current="true"]:hover {
  background: rgba(168, 197, 184, 0.22) !important;
}

/* Focus ring (keyboard only) */
.email-page .email-folders .email-folder-item:focus-visible {
  outline: none!important;
  outline-offset: -1px !important;
}

/* --- Count badge --------------------------------------------- */
/* Idle count: muted warm — supportive info */
.email-page .email-folders .email-folder-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  height: 20px !important;
  padding: 0 7px !important;
  background: transparent !important;
  color: #9A8E82 !important;
  font: 600 12px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
}

/* Active count: sage on sage tint — meaning matches the row */
.email-page .email-folders .email-folder-item.active .email-folder-count,
.email-page .email-folders .email-folder-item[aria-current="true"] .email-folder-count {
  background: rgba(168, 197, 184, 0.22) !important;
  color: #3F6A5A !important;
  font-weight: var(--font-weight-bold, 700) !important;
}

/* --- "Flere mapper" toggle ----------------------------------- */
.email-page .email-folders .email-folder-more-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  margin-top: 4px !important;
  background: transparent !important;
  border: none !important;
  color: #8A7E72 !important;
  font: 600 12.5px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.01em !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: background 120ms ease, color 120ms ease !important;
}
.email-page .email-folders .email-folder-more-toggle svg {
  width: 12px !important;
  height: 12px !important;
  stroke-width: 2.2 !important;
  color: #9A8E82 !important;
  transition: transform 180ms ease !important;
}
.email-page .email-folders .email-folder-more-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg) !important;
}
.email-page .email-folders .email-folder-more-toggle:hover {
  background: rgba(255, 254, 251, 0.85) !important;
  color: #3A2F26 !important;
}
.email-page .email-folders .email-folder-more-toggle:hover svg {
  color: #6E5B4E !important;
}

/* "More" count: quiet pill — sage hint, doesn't shout */
.email-page .email-folders .email-folder-more-count {
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 18px !important;
  padding: 0 6px !important;
  background: rgba(168, 197, 184, 0.14) !important;
  color: #4A7A68 !important;
  font: 700 11px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
}

/* --- Extra folders section ----------------------------------- */
.email-page .email-folders .email-folders-extra-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding-top: 4px !important;
  min-height: 0 !important;
}

/* "Smarte mapper" / "Labels" section heading */
.email-page .email-folders .email-labels-section {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 8px 8px !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(92, 77, 67, 0.08) !important;
}
.email-page .email-folders .email-labels-section-title {
  display: block !important;
  color: #9A8E82 !important;
  font: 700 11px/1 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}

/* Kill any cool blue-grey leftovers */
.email-page .email-folders [style*="rgb(47, 41, 52)"],
.email-page .email-folders [style*="rgb(105, 113, 126)"] {
  color: inherit !important;
}

/* Fast polish: keep message text attached to avatar instead of collapsing at the right edge. */
.email-page .email-list .email-list-items .email-message-item.email-dense-row {
  grid-template-columns: 72px 32px minmax(220px, 1fr) max-content 44px !important;
}

.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-content {
  width: 100% !important;
  max-width: 100% !important;
  justify-self: stretch !important;
  align-items: flex-start !important;
  text-align: left !important;
}

.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-sender,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-line {
  width: 100% !important;
  max-width: 100% !important;
}

/* Fast polish: keep reader close action and divider visible in the calm header. */
.email-page .email-reader-header .email-reader-actions,
#email-reader-header .email-reader-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.email-page .email-reader-header .email-reader-actions .email-more-wrapper,
#email-reader-header .email-reader-actions .email-more-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.email-page .email-reader-header .email-reader-actions .email-reader-close-btn,
#email-reader-header .email-reader-actions .email-reader-close-btn {
  position: relative !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #9A8E82 !important;
  flex: 0 0 auto !important;
}

.email-page .email-reader-header .email-reader-actions .email-reader-close-btn::before,
#email-reader-header .email-reader-actions .email-reader-close-btn::before {
  content: "" !important;
  position: absolute !important;
  left: -9px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 1px !important;
  background: rgba(92, 77, 67, 0.24) !important;
  pointer-events: none !important;
}

.email-page .email-reader-header .email-reader-actions .email-reader-close-btn svg,
#email-reader-header .email-reader-actions .email-reader-close-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  fill: none !important;
}

.email-page .email-reader-header .email-reader-actions .email-reader-close-btn:hover,
#email-reader-header .email-reader-actions .email-reader-close-btn:hover {
  background: rgba(92, 77, 67, 0.06) !important;
  color: #5C4D43 !important;
}

/* Fast polish: Sofia compose assistant panel for ADHD/dyslexia scanning. */
.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia {
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
  min-height: 0 !important;
  background: #FBF8F2 !important;
  color: #5C4D43 !important;
  border-radius: 0 22px 22px 0 !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 7px 12px 7px 14px !important;
  border-bottom: 1px solid rgba(92, 77, 67, 0.06) !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-sofia-avatar {
  display: none !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-sofia-name {
  display: none !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-sofia-name::after {
  display: none !important;
}

.email-compose-dialog .bb-compose-action:focus-visible,
.email-compose-dialog .ask-ai-mic:focus-visible,
.email-compose-dialog .ask-ai-send:focus-visible {
  outline: 2px solid #6E8A7E !important;
  outline-offset: 2px !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-messages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 16px 20px !important;
  background: #FBF8F2 !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-sofia-reply-chips:empty,
.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-sofia-refinement-chips:empty {
  display: none !important;
}

/* Compose Sofia footer: row is transparent layout slot, shell owns chrome.
   Source CSS in email-compose-sofia.css is the single source of truth.
   Only narrow overrides remain here for the unfolded footer context. */
.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-input-row {
  flex-shrink: 0 !important;
}
.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-input-row::before {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .calm-input-shell,
  .email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .calm-input-shell * {
    transition: none !important;
    animation: none !important;
  }
}

/* Final winning pass for browser review markings. */
.email-page .email-folder-item {
  min-height: 42px !important;
  overflow: visible !important;
}

.email-page .email-folder-item .email-folder-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 19px !important;
  line-height: 1.32 !important;
  padding-block: 1px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.email-page .email-list .email-message-item.email-dense-row {
  grid-template-columns: 52px minmax(0, 1fr) clamp(102px, 18%, 120px) !important;
  column-gap: 10px !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-row-controls {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-list .email-message-item.email-dense-row .email-avatar-stack {
  display: none !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  min-width: 0 !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-meta {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.email-page .email-list .email-message-item.email-dense-row .email-message-hover-actions {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.email-page .email-compose-footer .email-draft-saved,
.email-page .email-draft-saved,
.email-draft-toast {
  display: none !important;
  visibility: hidden !important;
}

.email-compose-dialog.with-sofia .bb-compose-sofia .ask-ai-mic svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8 !important;
}

.email-compose-dialog.with-sofia .bb-compose-sofia .ask-ai-mic.ss-mic--connecting,
.email-compose-dialog.with-sofia .bb-compose-sofia .ask-ai-mic.ss-mic--listening {
  background: rgba(168, 197, 184, 0.24) !important;
  color: #4A7A68 !important;
  box-shadow: 0 0 0 3px rgba(168, 197, 184, 0.18) !important;
}

.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-mic.recording,
.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-mic.ss-mic--listening,
.email-compose-dialog.with-sofia:not(.is-sofia-folded) .bb-compose-sofia .ask-ai-mic.ss-mic--recording {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  background: rgba(239, 68, 68, 0.06) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

/* Absolute final override for the compact list row. */
.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row,
.email-page .email-list .email-list-items .email-message-item.email-dense-row,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row {
  grid-template-columns: 52px minmax(0, 1fr) clamp(102px, 18%, 120px) !important;
  column-gap: 10px !important;
}

.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls {
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
}

.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row .email-avatar-stack,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-avatar-stack,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-avatar,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-avatar-stack {
  display: none !important;
}

.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row .email-message-content,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-content,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-content {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 2 !important;
  width: auto !important;
  min-width: 0 !important;
}

.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row .email-message-meta,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

.email-page .email-app:not(.is-thread-open) .email-list .email-message-item.email-dense-row .email-message-hover-actions,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-message-hover-actions {
  grid-column: 3 / 4 !important;
  grid-row: 1 / 2 !important;
  justify-self: end !important;
}

/* ============================================================================
   ROW-CONTROL CENTERING — canonical stable geometry (#1601)
   dot(6) + gap(4) + checkbox(16) + gap(4) + star(22) = 52 px
   Fills the 52 px grid column exactly; justify-content:center keeps it stable
   across read/unread, hover/focus, starred, selected, bulk, and split states.
   ============================================================================ */
.email-page .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-row-controls,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 100% !important;
  flex: 0 0 52px !important;
  position: relative !important;
}

/* Dot — symmetric; gap handles spacing between dot and checkbox */
.email-page .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-list-items .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls::before {
  content: "" !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  inset: auto !important;
  width: 6px !important;
  height: 6px !important;
  flex: 0 0 6px !important;
  display: inline-block !important;
  margin: 0 !important;
  border-radius: 999px !important;
  align-self: center !important;
}

/* Unread dot — filled with halo */
.email-page .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row.unread .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row.unread .email-row-controls::before {
  background: var(--email-list-dot-color, #6E8A7E) !important;
  box-shadow: 0 0 0 3px rgba(110, 138, 126, 0.10) !important;
  margin: 0 !important;
}

/* Read dot — transparent, reserves same geometry */
.email-page .email-message-item.email-dense-row:not(.unread) .email-row-controls::before,
.email-page .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before,
.email-page .email-list .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-message-item.email-dense-row:not(.unread) .email-row-controls::before,
.email-page .email-app.is-thread-open.is-reader-split .email-list .email-list-items .email-message-item.email-dense-row:not(.unread) .email-row-controls::before {
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Final mobile list-mode edge-to-edge guard.
   email-calm-preview.css loads after email-responsive.css and the dense-row
   compact-list rules, so keep this list-mode-only override here. */
@media (max-width: 600px) {
  .app-layout.email-page .main-content > .email-app.is-list-mode {
    padding: 0 !important;
  }

  .email-page .email-app.is-list-mode .email-toolbar.email-header,
  .email-page .email-app.is-list-mode .email-columns,
  .email-page .email-app.is-list-mode .email-columns > .email-list,
  .email-page .email-app.is-list-mode #email-list-items,
  .email-page .email-app.is-list-mode .email-message-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .email-page .email-app.is-list-mode .email-toolbar.email-header,
  .email-page .email-app.is-list-mode .email-columns,
  .email-page .email-app.is-list-mode .email-columns > .email-list,
  .email-page .email-app.is-list-mode #email-list-items {
    width: 100% !important;
    max-width: 100% !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border-left-width: 0 !important;
  }
}

/* =====================================================
   Mobile subtle scrollbars — 4px pill thumb
   Covers email inner scrollers: list-items, email-columns,
   reader, compose, drawer, attachment scrollers.
   ===================================================== */

@media (max-width: 600px) {
  .email-page .email-list-items,
  .email-page .email-columns,
  .email-page .email-reader,
  .email-page .email-reader-body,
  .email-page .email-compose-body-wrap,
  .email-page .email-drawer-content,
  .email-page .email-attachment-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,0,0,0.18) transparent !important;
  }

  .email-page .email-list-items::-webkit-scrollbar,
  .email-page .email-columns::-webkit-scrollbar,
  .email-page .email-reader::-webkit-scrollbar,
  .email-page .email-reader-body::-webkit-scrollbar,
  .email-page .email-compose-body-wrap::-webkit-scrollbar,
  .email-page .email-drawer-content::-webkit-scrollbar,
  .email-page .email-attachment-list::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
  }
  .email-page .email-list-items::-webkit-scrollbar-track,
  .email-page .email-columns::-webkit-scrollbar-track,
  .email-page .email-reader::-webkit-scrollbar-track,
  .email-page .email-reader-body::-webkit-scrollbar-track,
  .email-page .email-compose-body-wrap::-webkit-scrollbar-track,
  .email-page .email-drawer-content::-webkit-scrollbar-track,
  .email-page .email-attachment-list::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .email-page .email-list-items::-webkit-scrollbar-thumb,
  .email-page .email-columns::-webkit-scrollbar-thumb,
  .email-page .email-reader::-webkit-scrollbar-thumb,
  .email-page .email-reader-body::-webkit-scrollbar-thumb,
  .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb,
  .email-page .email-drawer-content::-webkit-scrollbar-thumb,
  .email-page .email-attachment-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18) !important;
    border-radius: 4px !important;
  }
  .email-page .email-list-items::-webkit-scrollbar-thumb:hover,
  .email-page .email-columns::-webkit-scrollbar-thumb:hover,
  .email-page .email-reader::-webkit-scrollbar-thumb:hover,
  .email-page .email-reader-body::-webkit-scrollbar-thumb:hover,
  .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb:hover,
  .email-page .email-drawer-content::-webkit-scrollbar-thumb:hover,
  .email-page .email-attachment-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.32) !important;
  }
  .email-page .email-list-items::-webkit-scrollbar-thumb:active,
  .email-page .email-columns::-webkit-scrollbar-thumb:active,
  .email-page .email-reader::-webkit-scrollbar-thumb:active,
  .email-page .email-reader-body::-webkit-scrollbar-thumb:active,
  .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb:active,
  .email-page .email-drawer-content::-webkit-scrollbar-thumb:active,
  .email-page .email-attachment-list::-webkit-scrollbar-thumb:active {
    background: rgba(0,0,0,0.32) !important;
  }

  /* Dark-mode scrollbar overrides */
  [data-theme="dark"] .email-page .email-list-items,
  [data-theme="dark"] .email-page .email-columns,
  [data-theme="dark"] .email-page .email-reader,
  [data-theme="dark"] .email-page .email-reader-body,
  [data-theme="dark"] .email-page .email-compose-body-wrap,
  [data-theme="dark"] .email-page .email-drawer-content,
  [data-theme="dark"] .email-page .email-attachment-list {
    scrollbar-color: rgba(255,255,255,0.18) transparent !important;
  }
  [data-theme="dark"] .email-page .email-list-items::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-columns::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-reader::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-reader-body::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-drawer-content::-webkit-scrollbar-thumb,
  [data-theme="dark"] .email-page .email-attachment-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18) !important;
  }
  [data-theme="dark"] .email-page .email-list-items::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .email-page .email-columns::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .email-page .email-reader::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .email-page .email-reader-body::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .email-page .email-drawer-content::-webkit-scrollbar-thumb:hover,
  [data-theme="dark"] .email-page .email-attachment-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.32) !important;
  }
  [data-theme="dark"] .email-page .email-list-items::-webkit-scrollbar-thumb:active,
  [data-theme="dark"] .email-page .email-columns::-webkit-scrollbar-thumb:active,
  [data-theme="dark"] .email-page .email-reader::-webkit-scrollbar-thumb:active,
  [data-theme="dark"] .email-page .email-reader-body::-webkit-scrollbar-thumb:active,
  [data-theme="dark"] .email-page .email-compose-body-wrap::-webkit-scrollbar-thumb:active,
  [data-theme="dark"] .email-page .email-drawer-content::-webkit-scrollbar-thumb:active,
  [data-theme="dark"] .email-page .email-attachment-list::-webkit-scrollbar-thumb:active {
    background: rgba(255,255,255,0.32) !important;
  }
}

/* ── Sent status badge calm polish (#1820) ─────────────────────────── */

.email-message-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.email-message-meta .email-sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border: 1px solid rgba(74, 122, 104, 0.22);
  border-radius: 999px;
  background: rgba(74, 122, 104, 0.08);
  color: rgb(74, 122, 104);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.email-message-meta .email-sent-badge svg {
  width: 9px;
  height: 9px;
  stroke-width: 2.25;
  opacity: 0.85;
}

.email-list .email-message-meta .email-sent-badge,
#email-list .email-message-meta .email-sent-badge,
.email-message-item .email-message-meta .email-sent-badge {
  box-sizing: border-box;
  flex: 0 0 16px;
  padding: 2px;
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  justify-content: center;
  gap: 0;
  font-size: 0;
  overflow: hidden;
}

.email-list .email-message-meta .email-sent-badge svg,
#email-list .email-message-meta .email-sent-badge svg,
.email-message-item .email-message-meta .email-sent-badge svg {
  width: 10px;
  height: 10px;
}

.email-message-meta .email-message-attach-icon {
  opacity: 0.55;
  vertical-align: middle;
  flex-shrink: 0;
}

.email-message-meta .email-message-time {
  color: rgb(154, 142, 130) !important;
  font-size: var(--font-size-xs);
  font-weight: 500;
  white-space: nowrap;
}

/* MOBILE TOUCH TARGETS
   Final mobile row geometry for 375-412px: keep the sender readable at rest,
   expose the star as a real 44px target, and reserve checkbox space only while
   bulk selection is active. */
@media (max-width: 600px) {
  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row {
    grid-template-columns: minmax(0, 1fr) 44px clamp(102px, 24vw, 120px) !important;
    gap: 6px !important;
    align-items: center !important;
    min-height: 66px !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items.bulk-mode .email-message-item.email-dense-row {
    grid-template-columns: minmax(0, 1fr) 92px clamp(102px, 24vw, 120px) !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row .email-message-content {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    gap: 0 !important;
    justify-content: center !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items.bulk-mode .email-message-item.email-dense-row .email-row-controls {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    flex: 0 0 92px !important;
    gap: 4px !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row .email-row-controls::before {
    content: none !important;
    display: none !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items:not(.bulk-mode) .email-message-item.email-dense-row .email-bulk-cb {
    display: none !important;
    pointer-events: none !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items.bulk-mode .email-message-item.email-dense-row .email-bulk-cb {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    opacity: 1 !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row .email-message-star {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
    opacity: 1 !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row .email-message-star svg {
    width: 20px !important;
    height: 20px !important;
  }

  .email-page .email-app.is-list-mode .email-list .email-list-items .email-message-item.email-dense-row .email-message-meta {
    grid-column: 3 / 4 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: visible !important;
  }
}


/* =====================================================
   MOBILE LIGHT SURFACE POLISH — #FBF8F2 over #FAF7F3 canvas
   Applied at <=768px so desktop (>=769px) is unaffected.
   ===================================================== */

@media (max-width: 768px) {
  .email-page .email-app .email-toolbar.email-header,
  .email-page .email-app.is-list-mode .email-toolbar.email-header {
    background: #FBF8F2 !important;
  }

  .email-page .email-list-header,
  .email-page .email-app .email-list-header {
    background: #FBF8F2 !important;
  }

  .email-page .email-list,
  .email-page .email-app .email-list,
  .email-page .email-app .email-columns > .email-list {
    background: #FBF8F2 !important;
  }

  body:has(.email-page) #bb-mobile-nav,
  body:has(.email-page) #bb-mobile-nav.mn-bar,
  .email-page #bb-mobile-nav .mn-bar,
  .email-page .mn-bar {
    background: #FBF8F2 !important;
  }

  .email-page .vs-viewport,
  .email-page .email-app .vs-viewport {
    background: #FBF8F2 !important;
  }
}


/* =====================================================
   PULL-TO-REFRESH SPINNER — conic ring replacement
   SVG stays in DOM but hidden; ::before is the 18×18 masked ring.
   ===================================================== */

@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ptr-mount {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ptr-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes ptr-halo {
  from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

@keyframes ptr-row-in {
  from { max-height: 0; opacity: 0; padding: 0; }
  to { max-height: 44px; opacity: 1; padding: 12px 0; }
}

@media (max-width: 768px) {
.email-page .email-ptr-spinner,
.email-page .email-app .email-ptr-spinner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  border-radius: 0 !important;
  border: 0 none !important;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
  position: relative !important;
  transition: max-height 180ms ease, opacity 180ms ease, padding 180ms ease !important;
}

.email-page .email-ptr-spinner.visible,
.email-page .email-app .email-ptr-spinner.visible {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 12px 0 !important;
  opacity: 1 !important;
  animation: ptr-row-in 200ms ease both !important;
}

.email-page .email-ptr-spinner svg,
.email-page .email-app .email-ptr-spinner svg {
  display: none !important;
}

.email-page .email-ptr-spinner::before,
.email-page .email-app .email-ptr-spinner::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: conic-gradient(transparent 30%, #6E8A7E) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)) !important;
  animation: ptr-spin 0.8s linear infinite, ptr-mount 200ms ease both, ptr-breathe 2s ease infinite 200ms !important;
}

.email-page .email-ptr-spinner::after,
.email-page .email-app .email-ptr-spinner::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(110, 138, 126, 0.12) 0%, transparent 70%) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  animation: ptr-halo 1.8s ease infinite !important;
}
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .email-page .email-ptr-spinner::before,
  .email-page .email-app .email-ptr-spinner::before {
    animation: ptr-spin 2s linear infinite !important;
  }
  .email-page .email-ptr-spinner::after,
  .email-page .email-app .email-ptr-spinner::after {
    animation: none !important;
    opacity: 0.5 !important;
  }
  .email-page .email-ptr-spinner.visible,
  .email-page .email-app .email-ptr-spinner.visible {
    animation: none !important;
  }
}

/* ===== Calm header v2: refresh status is screen-reader-only =====
   The bare refresh button is the only visible refresh control; no "last
   updated" text shows on any width (kept in the a11y tree via aria-live). */
.email-page .email-list-header .cl-refresh .cl-refresh__label {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}
.email-page .email-list-header .email-list-heading .email-list-count[data-last-updated-text]::after {
  content: none !important;
}