/* team-mail.css — Team Mail (shared group mailboxes).
 * Built on the live tokens.css design system, matching the approved preview
 * (docs/specs/2026-08-26-team-mail-preview.html). Chip inks are the WCAG-
 * measured ones from that preview, so semantic text on a tinted chip stays
 * ≥4.5:1 in both themes. Nothing here is named *-overlay on purpose — that
 * naming makes erp-layer fight itself and freezes the tab.
 */
:root {
  --tm-warn-ink: #7A5512; --tm-info-ink: #2C567E; --tm-danger-ink: #A23530;
  --tm-plum-ink: #753A6C; --tm-ok-ink: #2D5A2A; --tm-teal-ink: #1D5B6B;
  --tm-plum: #8E4585; --tm-plum-bg: #F4E7F1;
}

/* ── rail ─────────────────────────────────────────────────────────────── */
.tm-railsec { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, #E6E6E0); }
.tm-railsec h4 { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #65655D; /* text-3 measured 4.41:1 on the grey ground - this passes AA and stays quiet */ padding: 0 10px; margin: 2px 0 6px; }
.tm-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.tm-dot.lg { width: 11px; height: 11px; }
/* A count is information, not an alarm — red stays reserved for SLA chips. */
.tm-cnt { margin-left: auto; font: 600 11px var(--mono, ui-monospace); font-variant-numeric: tabular-nums;
  background: var(--surface-3, #F1F1ED); color: var(--text-2, #54544E); border-radius: 6px; padding: 2px 6px; }
.tm-cnt:empty { display: none; }

/* ── box list ─────────────────────────────────────────────────────────── */
.tm-boxhead { display: flex; align-items: center; gap: 10px; padding: 14px 16px 8px; }
.tm-boxhead b { font-size: 15px; }
.tm-addr { font: 500 12px var(--mono, ui-monospace); color: var(--text-3,#6C6C64); }
.tm-ftabs { display: flex; gap: 2px; padding: 0 12px 10px; border-bottom: 1px solid var(--border, #E6E6E0); flex-wrap: wrap; }
.tm-ftab { border: none; background: none; padding: 7px 11px; border-radius: 8px; font-size: 12.5px;
  color: var(--text-2, #54544E); cursor: pointer; min-height: 36px; }
.tm-ftab.on { background: var(--surface-3, #F1F1ED); color: var(--text, #1B1B19); font-weight: 600; }
.tm-ftab .k { font: 600 11px var(--mono, ui-monospace); color: var(--text-3,#6C6C64); margin-left: 5px; }
/* A team row is built with the mail hub's OWN row classes now, so its grid,
   spacing, snippet and timestamp all come from there and cannot drift apart
   from the inbox. This file used to declare `display:block` here, which
   fought .mhx-row's three-column grid and dropped the avatar, sender and
   time into one 36px column — the time then wrapped onto two lines and sat
   on top of the subject. Layout is deliberately NOT redeclared. */
.tm-chips { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.tm-av { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff; flex: none; }
.tm-av.lg { width: 30px; height: 30px; font-size: 11.5px; }
/* The ERP profile picture sits ON TOP of the coloured initials rather than
 * replacing them, so a photo that 404s — a deleted upload, a slow link — is
 * removed by its own onerror and leaves something readable behind instead of
 * an empty circle. position:relative on the parent is what anchors it. */
.tm-av { position: relative; overflow: hidden; }
.tm-av > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tm-unas { width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--border-strong, #D6D6CE);
  display: inline-grid; place-items: center; color: var(--text-3,#6C6C64); font-size: 11px; flex: none; }

/* chips — stage colours from the approved preview */
.tm-chip { display: inline-flex; align-items: center; line-height: 1.35; font-size: 11px; font-weight: 600; padding: 2.5px 8px; border-radius: 999px; border: 1px solid transparent; }
.tm-chip.stg-new { background: var(--surface-3, #F1F1ED); color: #45453F; }
.tm-chip.stg-assigned { background: var(--info-bg, #E5EEF6); color: var(--tm-info-ink); }
.tm-chip.stg-pending { background: var(--warn-bg, #F6ECD9); color: var(--tm-warn-ink); }
.tm-chip.stg-replied { background: #DFF0F2; color: var(--tm-teal-ink); }
.tm-chip.stg-price_quoted { background: var(--tm-plum-bg); color: var(--tm-plum-ink); }
.tm-chip.stg-closed_won { background: var(--ok-bg, #EAF1E8); color: var(--tm-ok-ink); }
.tm-chip.stg-closed_lost { background: var(--danger-bg, #F7E5E3); color: var(--tm-danger-ink); }
.tm-chip.lbl { background: var(--surface-2, #FBFBF9); border-color: var(--border-strong, #D6D6CE); color: var(--text-2, #54544E); }
/* SLA chips sit in the same row as the stage and the labels, so they are the
 * same chip — only the colour differs. They used to be the one monospace thing
 * on the screen, which read as a different KIND of object rather than an
 * urgent one. Geist's tabular figures keep 42m and 2h aligned without it
 * (measured 30 Aug 2026: every other chip in that row is Geist). */
.tm-chip.sla-ok { background: var(--ok-bg, #EAF1E8); color: var(--tm-ok-ink); font-variant-numeric: tabular-nums; }
.tm-chip.sla-warn { background: var(--warn-bg, #F6ECD9); color: var(--tm-warn-ink); font-variant-numeric: tabular-nums; }
.tm-chip.sla-late { background: var(--danger-bg, #F7E5E3); color: var(--tm-danger-ink); font-variant-numeric: tabular-nums; }
.tm-ai { font-style: normal; font-size: 9px; font-weight: 700; background: var(--tm-plum-bg);
  color: var(--tm-plum-ink); border-radius: 4px; padding: 1px 4px; margin-left: 4px; }

/* ── thread ───────────────────────────────────────────────────────────── */
.tm-thread { display: flex; flex-direction: column; min-height: 0; }
.tm-tools { padding: 10px 16px 6px; gap: 6px; }
.tm-toolchips { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; flex-wrap: wrap; }
/* Same subject scale as the inbox reading view — one hierarchy, both surfaces. */
.tm-subject { font-size: 20px; font-weight: 700; letter-spacing: -.011em; line-height: 1.25; padding: 4px 16px 10px; }
.tm-collide { display: flex; align-items: center; gap: 9px; margin: 0 16px 12px; padding: 9px 13px;
  background: var(--warn-bg, #F6ECD9); border: 1px solid #E8D5AC; color: var(--tm-warn-ink);
  border-radius: 9px; font-size: 12.5px; }
.tm-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--warn, #B5781A);
  animation: tmpp 1.4s ease-in-out infinite; flex: none; }
@keyframes tmpp { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .tm-pulse { animation: none } }
.tm-approve { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 16px 12px; padding: 10px 13px;
  background: var(--tm-plum-bg); border: 1px solid #E0D2DE; color: var(--tm-plum-ink); border-radius: 9px; font-size: 12.5px; }
.tm-apbtns { margin-left: auto; display: flex; gap: 6px; }
.tm-dtabs { display: flex; gap: 16px; padding: 0 16px; border-bottom: 1px solid var(--border, #E6E6E0); }
.tm-dtabs button { border: none; background: none; padding: 9px 2px; font-size: 13px; cursor: pointer;
  color: var(--text-2, #54544E); border-bottom: 2px solid transparent; min-height: 40px; }
.tm-dtabs button.on { color: var(--text, #1B1B19); font-weight: 600; border-bottom-color: var(--brand, #3C7538); }
.tm-dtabs .nn { font: 600 11px var(--mono, ui-monospace); background: var(--surface-3, #F1F1ED);
  border-radius: 6px; padding: 1px 5px; color: #65655D; margin-left: 5px; }
.tm-dbody { padding: 14px 16px 24px; }
.tm-msg { border: 1px solid var(--border, #E6E6E0); border-radius: 9px; margin-bottom: 12px; background: var(--surface, #fff); }
.tm-msg .mh { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--border, #E6E6E0); background: var(--surface-2, #FBFBF9); border-radius: 9px 9px 0 0; }
.tm-msg .who { font-weight: 600; font-size: 13px; }
/* Timestamps match the inbox: same size, tabular digits, no monospace. */
.tm-msg .when { margin-left: auto; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text-3,#6C6C64); }
.tm-msg .mb { padding: 13px 14px; font-size: 13.5px; color: var(--text-2, #54544E); white-space: pre-line; }
.tm-reply { border: 1px solid var(--border-strong, #D6D6CE); border-radius: 9px; padding: 12px 14px; background: var(--surface, #fff); }
.tm-reply .as { font-size: 12px; color: var(--text-2, #54544E); margin-bottom: 8px; }
/* The reply card already draws the frame — a second border inside it read as
   boxes-in-boxes. The textarea sits quiet until focus, then takes the ring. */
.tm-reply textarea, .tm-noteadd textarea { width: 100%; border: 1px solid transparent; background: var(--surface-2, #FBFBF9);
  border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.tm-reply textarea:focus, .tm-noteadd textarea:focus { outline: none; border-color: var(--brand, #3C7538);
  background: var(--surface, #fff); box-shadow: 0 0 0 3px var(--brand-ring, #CADFC3); }
.tm-replyrow { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
.tm-apnote { font-size: 12px; color: var(--tm-plum-ink); }
/* notes — the yellow sticky feel from the preview */
.tm-note2, .tm-notes .tm-note { background: #FFF9E3; border: 1px solid #F0E4B8; border-radius: 9px;
  padding: 11px 13px; margin-bottom: 10px; }
.tm-notes .tx { font-size: 13.5px; color: #4A4326; white-space: pre-wrap; }
.tm-notes .mt { font-size: 11.5px; color: #8A7C4E; margin-top: 6px; }
.tm-men { color: var(--info, #3A6FA0); font-weight: 600; }
.tm-noteadd { display: flex; gap: 8px; align-items: flex-start; margin-top: 4px; }
.tm-noteadd textarea { flex: 1; }

/* ── popovers ─────────────────────────────────────────────────────────── */
.tm-pop { position: absolute; z-index: 9460; min-width: 240px; max-width: 320px; background: var(--surface, #fff);
  border: 1px solid var(--border, #E6E6E0); border-radius: 12px; box-shadow: 0 14px 44px rgba(20, 26, 20, .2); padding: 6px; }
.tm-pophead { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3,#6C6C64); padding: 8px 10px 5px; }
.tm-poprow { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; min-height: 42px; }
.tm-poprow:hover { background: var(--surface-2, #FBFBF9); }
.tm-poprow.on { background: var(--brand-bg, #EAF1E8); }
.tm-poprow b { display: block; font-weight: 600; }
.tm-poprow small { display: block; color: var(--text-3,#6C6C64); font-size: 11.5px; }
.tm-poprow .tm-tick { margin-left: auto; color: var(--brand, #3C7538); font-weight: 700; }
.tm-popsep { height: 1px; background: var(--border, #E6E6E0); margin: 4px 6px; }
.tm-popempty { padding: 10px; color: var(--text-3,#6C6C64); font-size: 12.5px; }

/* ── panels (console + pulse) ─────────────────────────────────────────── */
.tm-panel { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: flex-start; justify-content: center; }
.tm-scrim { position: absolute; inset: 0; background: rgba(20, 26, 20, .42); }
.tm-sheet { position: relative; margin: 4vh auto; width: min(1080px, calc(100vw - 32px)); max-height: 92vh;
  background: var(--surface, #fff); border-radius: 16px; box-shadow: 0 24px 60px rgba(20, 26, 20, .3);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.tm-sheethead { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border, #E6E6E0); }
.tm-sheethead h2 { font-size: 17px; font-weight: 600; }
.tm-sheethead p { font-size: 12.5px; color: var(--text-3,#6C6C64); margin-top: 3px; }
.tm-sheethead .mhx-btn { margin-left: auto; }
.tm-sheetbody { padding: 18px 20px 28px; overflow-y: auto; flex: 1; min-height: 0; }
.tm-loading { padding: 40px 10px; text-align: center; color: var(--text-3,#6C6C64); font-size: 13px; }

.tm-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; }
.tm-card { text-align: left; background: var(--surface, #fff); border: 1px solid var(--border, #E6E6E0);
  border-radius: 12px; padding: 13px 14px; cursor: pointer; font: inherit; display: block; }
.tm-card:hover { border-color: var(--border-strong, #D6D6CE); }
.tm-card.on { border-color: var(--brand, #3C7538); box-shadow: 0 0 0 3px rgba(60, 117, 56, .16); }
.tm-card.add { border-style: dashed; display: grid; place-items: center; gap: 2px; text-align: center; color: var(--text-2, #54544E); }
.tm-card.add span { font-size: 20px; color: var(--brand, #3C7538); }
.tm-card.add small { color: var(--text-3,#6C6C64); font-size: 11.5px; }
.tm-cardtop { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tm-cardaddr { font: 500 11.5px var(--mono, ui-monospace); color: var(--text-3,#6C6C64); margin: 3px 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.tm-tag { font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-3, #F1F1ED); color: var(--text-2, #54544E); }
.tm-tag.ok { background: var(--ok-bg, #EAF1E8); color: var(--tm-ok-ink); }
.tm-tag.info { background: var(--info-bg, #E5EEF6); color: var(--tm-info-ink); }
.tm-tag.plum { background: var(--tm-plum-bg); color: var(--tm-plum-ink); }
.tm-cardfoot { display: flex; align-items: center; gap: 8px; }
.tm-avstack { display: inline-flex; }
.tm-avstack .tm-av { margin-left: -6px; border: 2px solid var(--surface, #fff); }
.tm-avstack .tm-av:first-child { margin-left: 0; }
.tm-cardfoot small { color: var(--text-3,#6C6C64); font-size: 11.5px; margin-left: auto; }

.tm-detail { margin-top: 20px; border-top: 1px solid var(--border, #E6E6E0); padding-top: 14px; }
.tm-detailhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tm-dtabs2 { display: flex; gap: 4px; flex-wrap: wrap; }
.tm-dtab { border: 1px solid transparent; background: none; padding: 7px 12px; border-radius: 9px;
  font-size: 12.5px; color: var(--text-2, #54544E); cursor: pointer; min-height: 38px; }
.tm-dtab.on { background: var(--surface-3, #F1F1ED); color: var(--text, #1B1B19); font-weight: 600; }
.tm-danger { color: var(--danger, #C0443D); margin-left: auto; }
.tm-pane { font-size: 13px; }
.tm-h4 { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3,#6C6C64); margin: 18px 0 8px; }
.tm-h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.tm-mrow, .tm-lrow, .tm-arow, .tm-exrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: 9px; }
.tm-mrow:hover, .tm-lrow:hover { background: var(--surface-2, #FBFBF9); }
.tm-mname, .tm-lname { min-width: 0; }
.tm-mname b, .tm-lname b { display: block; font-size: 13px; font-weight: 600; }
.tm-mname small, .tm-lname small { display: block; color: var(--text-3,#6C6C64); font-size: 11.5px;
  font-family: var(--mono, ui-monospace); }
.tm-lrule { flex: 1; min-width: 0; color: var(--text-2, #54544E); font-size: 12px; }
.tm-emoji { font-size: 16px; width: 22px; text-align: center; }
.tm-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.tm-badge.black { background: #1B1B19; color: #fff; }
.tm-badge.green { background: var(--ok-bg, #EAF1E8); color: var(--tm-ok-ink); }
.tm-gmpill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 4px; }
.tm-synced { font-size: 10.5px; color: var(--text-3,#6C6C64); }
.tm-train { border: 1px solid var(--border-strong, #D6D6CE); background: var(--surface, #fff); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: 11.5px; cursor: pointer; min-height: 32px; }
.tm-train.ok { background: var(--ok-bg, #EAF1E8); color: var(--tm-ok-ink); border-color: #CBDFC8; }
.tm-train.warn { background: var(--warn-bg, #F6ECD9); color: var(--tm-warn-ink); border-color: #E8D5AC; }
.tm-x { min-width: 34px; padding: 0 8px; color: var(--text-3,#6C6C64); }
.tm-addrow { display: flex; gap: 8px; align-items: center; margin: 12px 0; flex-wrap: wrap; }
.tm-addrow input, .tm-addrow select { flex: 1; min-width: 160px; border: 1px solid var(--border, #E6E6E0);
  border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13px; min-height: 42px; }
.tm-note { color: var(--text-2, #54544E); font-size: 12.5px; line-height: 1.65; margin: 10px 0;
  padding: 10px 13px; border: 1px dashed var(--border-strong, #D6D6CE); border-radius: 9px;
  background: var(--surface-2, #FBFBF9); }
.tm-swrow { display: flex; align-items: center; gap: 11px; padding: 10px; border-radius: 9px; cursor: pointer; }
.tm-swrow:hover { background: var(--surface-2, #FBFBF9); }
.tm-swrow input { width: 18px; height: 18px; flex: none; }
.tm-swrow b { display: block; font-size: 13px; }
.tm-swrow small { display: block; color: var(--text-3,#6C6C64); font-size: 11.5px; }
.tm-sw input { width: 18px; height: 18px; }
.tm-field { margin: 12px 0; }
.tm-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.tm-field input, .tm-field select, .tm-field textarea { width: 100%; border: 1px solid var(--border, #E6E6E0);
  border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 13px; min-height: 42px; }
.tm-field small { display: block; color: var(--text-3,#6C6C64); font-size: 11.5px; margin-top: 5px; line-height: 1.55; }
.tm-connrow { padding: 10px 13px; border-radius: 9px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.6; }
.tm-connrow.ok { background: var(--ok-bg, #EAF1E8); color: var(--tm-ok-ink); }
.tm-connrow.warn { background: var(--warn-bg, #F6ECD9); color: var(--tm-warn-ink); }
.tm-connrow code { font-family: var(--mono, ui-monospace); font-size: 11.5px; }

/* wizard */
.tm-wizprog { display: flex; gap: 6px; margin-bottom: 16px; }
.tm-wizprog span { flex: 1; height: 4px; border-radius: 999px; background: var(--surface-3, #F1F1ED); }
.tm-wizprog span.on { background: var(--brand, #3C7538); }
.tm-wizh { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.tm-wizbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
.tm-chips2 { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.tm-chipbtn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border, #E6E6E0);
  background: var(--surface, #fff); border-radius: 999px; padding: 6px 13px 6px 6px; font: inherit;
  font-size: 12.5px; cursor: pointer; min-height: 38px; }
.tm-chipbtn.on { border-color: var(--brand, #3C7538); background: var(--brand-bg, #EAF1E8); font-weight: 600; }
/* A 6-digit code should look like a code, not a comment box: short, centred,
   spaced out, tabular so the digits don't jitter as they are typed. */
#tmOtpCode { max-width: 260px; text-align: center; font: 600 24px/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: .30em; text-indent: .30em; font-variant-numeric: tabular-nums; padding: 12px 14px; }
/* The hint should read as a hint, not as a code already typed in. */
#tmOtpCode::placeholder { font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0; text-indent: 0; opacity: .55; }
/* Someone's standing on the Google Group itself (owner / manager), shown so
   the person picking members knows who already runs that group. */
.tm-grole { margin-left: 6px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 4px; background: var(--chip-bg, #F1F1EC); color: var(--muted, #6B6B63); font-weight: 600; }

/* trainer drawer */
.tm-drawer { position: fixed; right: 18px; bottom: 18px; z-index: 9600; width: min(420px, calc(100vw - 36px));
  background: var(--surface, #fff); border: 1px solid var(--border, #E6E6E0); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(20, 26, 20, .26); padding: 14px 16px 16px; }
.tm-drawerhead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tm-drawerhead b { font-size: 14px; }
.tm-drawerhead .tm-x { margin-left: auto; }
.tm-prog { height: 6px; border-radius: 999px; background: var(--surface-3, #F1F1ED); overflow: hidden; margin-bottom: 10px; }
.tm-prog span { display: block; height: 100%; background: var(--brand, #3C7538); }
.tm-exrow { border: 1px solid var(--border, #E6E6E0); border-radius: 9px; margin-bottom: 7px; padding: 8px 10px; }
.tm-exrow b { display: block; font-size: 12.5px; }
.tm-exrow small { display: block; color: var(--text-3,#6C6C64); font-size: 11px; }
.tm-exrow .tm-x { margin-left: auto; }

/* pulse */
.tm-pulsebar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tm-kpi { background: var(--surface-2, #FBFBF9); border: 1px solid var(--border, #E6E6E0); border-radius: 12px; padding: 12px 14px; }
.tm-kpi small { display: block; font-size: 11.5px; color: var(--text-3,#6C6C64); }
.tm-kpi b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 3px 0 2px;
  font-variant-numeric: tabular-nums; }
.tm-kpi span { font-size: 11.5px; color: var(--text-2, #54544E); }
.tm-live { background: var(--brand-bg, #EAF1E8); border: 1px solid #CBDFC8; border-radius: 12px;
  padding: 12px 14px; font-size: 12.5px; color: var(--tm-ok-ink); margin-bottom: 8px; }
.tm-live .tm-pulse { background: var(--brand, #3C7538); margin-right: 8px; display: inline-block; }
.tm-livegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.tm-livegrid b { display: block; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tm-livegrid small { color: var(--text-2, #54544E); font-size: 11.5px; }
.tm-fbar { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.tm-flabel { width: 110px; font-size: 12.5px; color: var(--text-2, #54544E); flex: none; }
.tm-ftrack { flex: 1; height: 16px; background: var(--surface-3, #F1F1ED); border-radius: 6px; overflow: hidden; }
.tm-ftrack span { display: block; height: 100%; border-radius: 6px; }
.tm-fn { width: 34px; text-align: right; font: 600 12px var(--mono, ui-monospace); }
.tm-aname { width: 150px; flex: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-aname2 { flex: 1; font-size: 12.5px; color: var(--text-2, #54544E); }
.tm-astack { flex: 1; display: flex; height: 18px; border-radius: 6px; overflow: hidden; background: var(--surface-3, #F1F1ED); }
.tm-astack span { display: grid; place-items: center; color: #fff; font: 600 10px var(--mono, ui-monospace); }
.tm-arow small { width: 96px; text-align: right; font-size: 11.5px; color: var(--text-3,#6C6C64); }
.tm-good { color: var(--ok, #3C7538); }
.tm-bad { color: var(--danger, #C0443D); }
.tm-insight { font-size: 12.5px; color: var(--text-2, #54544E); margin: 8px 0 4px; }
.tm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tm-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3,#6C6C64); padding: 8px 10px; border-bottom: 1px solid var(--border, #E6E6E0); }
.tm-table td { padding: 9px 10px; border-bottom: 1px solid var(--border, #E6E6E0); font-variant-numeric: tabular-nums; }

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .tm-sheet { margin: 0; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .tm-cardgrid { grid-template-columns: 1fr; }
  .tm-ftab, .tm-dtab, .tm-poprow, .tm-chipbtn { min-height: 44px; }
  .tm-panel .mhx-btn, .tm-thread .mhx-btn, .tm-drawer .mhx-btn { min-height: 44px; }
  .tm-aname { width: 108px; }
  .tm-arow small { width: 74px; }
  .tm-drawer { right: 8px; left: 8px; bottom: 8px; width: auto; }
  .tm-table { display: block; overflow-x: auto; }
}

/* attachments on a team reply — click or drop */
.tm-reply.drop { border-color: var(--brand, #3C7538); background: var(--brand-bg, #EAF1E8); }
.tm-atts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tm-att { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2, #FBFBF9);
  border: 1px solid var(--border, #E6E6E0); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; }
.tm-att small { color: var(--text-3,#6C6C64); }
.tm-att button { border: none; background: none; cursor: pointer; color: var(--text-3,#6C6C64);
  min-width: 24px; min-height: 24px; border-radius: 50%; font: inherit; }
.tm-att button:hover { background: var(--surface-3, #F1F1ED); color: var(--danger, #C0443D); }

.tm-thread .mhx-popwrap { position: relative; }

/* ── phone: the three thread menus become bottom sheets ──────────────────
 * A 254px popover anchored to a button runs off the right edge of a 390px
 * screen (measured: the Label menu ended at 430px). The mail hub already
 * solves this for its own menus by turning them into sheets; Team Mail's
 * menus now do the same, which also makes every row a comfortable tap. */
@media (max-width: 600px) {
  .tm-pop { position: fixed; left: 8px; right: 8px; bottom: 8px; top: auto; width: auto;
    max-width: none; min-width: 0; max-height: 72vh; overflow: auto; border-radius: 16px;
    box-shadow: 0 -8px 40px rgba(20, 26, 20, .28); padding: 8px 8px 12px; }
  .tm-pop .tm-poprow { min-height: 48px; }
  .tm-pophead { font-size: 12px; padding: 10px 12px 6px; }
  /* Conversation / Notes tabs measured 40px — under the touch floor. */
  .tm-dtabs button { min-height: 44px; }
  .tm-tools { overflow-x: auto; scrollbar-width: none; }
  .tm-tools::-webkit-scrollbar { display: none; }
  .tm-toolchips { margin-left: 0; }
  .tm-subject { font-size: 17px; }
  .tm-boxhead { flex-wrap: wrap; gap: 4px 8px; }
  .tm-addr { width: 100%; }
}

/* ── Team Mail rail, Hiver-shaped ────────────────────────────────────────
 * A shared inbox is a section, not a folder: the box you are in unfolds to
 * show its own views with live counts, the way Hiver nests views under each
 * shared mailbox. Counts appear only for the loaded box — see railHtml. */
.tm-railsec h4 { display: flex; align-items: center; }
.tm-addbox { margin-left: auto; border: none; background: none; cursor: pointer; font-size: 16px;
  line-height: 1; color: #65655D; min-width: 28px; min-height: 28px; border-radius: 7px; }
.tm-addbox:hover { background: var(--surface-3, #F1F1ED); color: var(--brand, #3C7538); }
.tm-boxrow { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px;
  color: var(--text-2, #54544E); min-height: 40px; }
.tm-boxrow:hover { background: var(--surface-3, #F1F1ED); }
.tm-boxrow.on { background: var(--brand-bg, #EAF1E8); color: var(--brand, #3C7538); font-weight: 600; }
.tm-boxname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A count informs; red is for SLA breaches. Matches the inbox's quiet counter. */
.tm-boxn { font: 700 11px var(--mono, ui-monospace); font-variant-numeric: tabular-nums; background: var(--surface-3, #F1F1ED);
  color: var(--text-2, #54544E); border-radius: 6px; padding: 2px 7px; }
.tm-views { margin: 2px 0 6px 19px; padding-left: 9px; border-left: 2px solid var(--brand-ring, #CADFC3); }
.tm-view { display: flex; align-items: center; gap: 8px; width: 100%; border: none; background: none;
  text-align: left; padding: 6px 9px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12.5px;
  color: var(--text-2, #54544E); min-height: 34px; }
.tm-view:hover { background: var(--surface-3, #F1F1ED); }
.tm-view.on { background: var(--surface-3, #F1F1ED); color: var(--text, #1B1B19); font-weight: 600; }
.tm-viewname { flex: 1; min-width: 0; }
.tm-viewn { font: 600 11px var(--mono, ui-monospace); color: var(--text-2, #54544E); }
.tm-viewn.z { color: #6E6E66; } /* a zero is quiet, not illegible - the old .55 opacity measured ~2.5:1 */
.tm-railfoot { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.tm-railmini { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #E6E6E0);
  background: var(--surface, #fff); border-radius: 999px; padding: 5px 11px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--text-2, #54544E); min-height: 32px; }
.tm-railmini:hover { border-color: var(--border-strong, #D6D6CE); color: var(--text, #1B1B19); }

/* ── settings: a group list beside the pane, not a tab strip ───────────── */
.tm-detailtop { display: flex; align-items: center; gap: 9px; margin: 20px 0 12px;
  padding-top: 16px; border-top: 1px solid var(--border, #E6E6E0); }
.tm-detailtop b { font-size: 15px; }
.tm-split { display: grid; grid-template-columns: 236px 1fr; gap: 18px; align-items: start; }
.tm-gnavs { display: flex; flex-direction: column; gap: 2px; }
.tm-gnav { display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: none;
  text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer; font: inherit; min-height: 46px; }
.tm-gnav:hover { background: var(--surface-2, #FBFBF9); }
.tm-gnav.on { background: var(--brand-bg, #EAF1E8); }
.tm-gico { width: 22px; text-align: center; font-size: 14px; flex: none; }
.tm-gtx { min-width: 0; }
.tm-gtx b { display: block; font-size: 13px; font-weight: 600; }
.tm-gtx small { display: block; font-size: 11.5px; color: var(--text-3,#6C6C64); }
.tm-gnav.on .tm-gtx b { color: var(--brand, #3C7538); }
.tm-gnav.on .tm-gtx small { color: var(--text-2, #54544E); } /* text-3 on the green fill measured 4.15:1 */
.tm-paneh { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.tm-paneh small { display: block; font-size: 12px; font-weight: 400; color: var(--text-3,#6C6C64); margin-top: 2px; }
.tm-pane .tm-field input[type=color] { padding: 4px; height: 42px; }

@media (max-width: 700px) {
  .tm-split { grid-template-columns: 1fr; gap: 10px; }
  .tm-gnavs { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px;
    scrollbar-width: none; }
  .tm-gnavs::-webkit-scrollbar { display: none; }
  .tm-gnav { min-height: 44px; white-space: nowrap; border: 1px solid var(--border, #E6E6E0); }
  .tm-gtx small { display: none; }
  .tm-views { margin-left: 14px; }
  .tm-view { min-height: 44px; }
  .tm-boxrow { min-height: 46px; }
}

/* the server narrowed the list to yours + unassigned (box.visibility, 23 Sep 2026) */
.tm-scopeline { font-size: 11.5px; color: var(--text-3, #6C6C64); padding: 4px 9px 2px; line-height: 1.4; }
/* Close what is not a lead — the automation block in box settings (#16, 23 Sep 2026) */
.tm-acbox { margin-top: 6px; }
.tm-acrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 6px 30px; font-size: 12.5px; }
.tm-aclbl { color: var(--text-2, #54544E); }
.tm-acchip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--border, #E6E6E0); border-radius: 999px; cursor: pointer; min-height: 28px; }
/* nothing addressed to the group has reached the anchor — an explanation, never a blank list */
.tm-notmember { margin: 22px 16px; padding: 18px 20px; border: 1px dashed var(--border-strong, #D6D6CE);
  border-radius: 12px; background: var(--surface-2, #FBFBF9); }
.tm-notmember b { display: block; font-size: 14px; margin-bottom: 6px; }
.tm-notmember p { font-size: 12.5px; color: var(--text-2, #54544E); line-height: 1.6; margin: 6px 0 0; }
/* who the reply goes out as */
.tm-asopt { display: inline-flex; align-items: center; gap: 7px; margin-right: 14px; cursor: pointer; min-height: 32px; }
.tm-asopt input { width: 16px; height: 16px; }
@media (max-width: 600px) { .tm-asopt { min-height: 44px; } }

/* The rail with no mailboxes yet: an admin still needs a way in, so the
   section shows a single invitation rather than vanishing (which made the
   very first mailbox impossible to add). */
.tm-railempty { display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 12px; margin: 2px 0 6px; border: 1px dashed var(--border, #E6E6E0);
  border-radius: 10px; background: transparent; color: inherit; min-height: 44px; }
.tm-railempty:hover { border-color: var(--brand, #3C7538); background: var(--brand-bg, #EAF1E8); }
.tm-railempty b { display: block; font-size: 13px; font-weight: 600; }
.tm-railempty small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--muted, #6B6B63); }

/* Box admin is a STAR, not a checkbox (owner, 27 Aug). A checkbox reads as
   "selected"; a star reads as "this one is special", which is what a box
   admin is. Yellow when on, a quiet outline when not. */
.tm-star { border: none; background: none; cursor: pointer; padding: 4px 6px; line-height: 1;
  font-size: 19px; color: var(--text-3,#6C6C64); min-height: 44px; min-width: 34px; /* border-strong measured 1.46:1 - an invisible toggle */
  border-radius: 8px; transition: color .12s, transform .12s; }
.tm-star:hover { color: #C9A227; transform: scale(1.12); }
.tm-star.on { color: #B8860B; } /* #E8B923 measured 1.84:1 on white; this matches the inbox star and clears 3:1 */
.tm-star:focus-visible { outline: 2px solid var(--brand, #3C7538); outline-offset: 2px; }

/* Mailboxes you are not in. Nobody is added automatically any more, so this
   is the way in — and Join puts the person on the Google Group first, since
   that is what actually delivers the mail. */
.tm-joinsec { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--border, #E6E6E0); }
.tm-joinsec h4 { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3,#6C6C64); margin: 0 0 4px; }
.tm-joinrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; margin-top: 6px;
  border: 1px solid var(--border, #E6E6E0); border-radius: 10px; background: var(--surface, #fff); }
.tm-joinrow:hover { border-color: var(--border-strong, #D6D6CE); }
.tm-joinmeta { flex: 1; min-width: 0; }
.tm-joinmeta b { display: block; font-size: 13px; }
.tm-joinmeta small { display: block; font-size: 11px; color: var(--text-3,#6C6C64);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-joinrow .mhx-btn { min-height: 36px; flex: none; }
@media (max-width: 560px) {
  .tm-joinrow { flex-wrap: wrap; }
  .tm-joinmeta { flex-basis: 100%; }
  .tm-joinrow .mhx-btn { min-height: 44px; margin-left: auto; }
}

/* The ⋮ beside +. Mail Pulse and settings are occasional actions, so they
   moved off the rail into this menu instead of holding a permanent row of
   pills (owner, 27 Aug). */
.tm-railsec h4 { display: flex; align-items: center; gap: 2px; }
.tm-more { margin-left: auto; border: none; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; color: #65655D;
  min-width: 26px; min-height: 26px; border-radius: 7px; }
.tm-addbox + .tm-more { margin-left: 0; }
.tm-more:hover { background: var(--surface-3, #F1F1ED); color: var(--text, #1B1B19); }
.tm-more:focus-visible { outline: 2px solid var(--brand, #3C7538); outline-offset: 1px; }
.tm-moremenu { position: fixed; z-index: 2147483100; background: var(--surface, #fff);
  border: 1px solid var(--border, #E6E6E0); border-radius: 10px; padding: 5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14); }
.tm-moremenu button { display: flex; align-items: center; gap: 9px; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 9px 10px; border-radius: 7px; font-size: 13px; color: var(--text, #1B1B19);
  min-height: 42px; }
.tm-moremenu button:hover { background: var(--surface-3, #F1F1ED); }
@media (max-width: 560px) {
  .tm-moremenu button { min-height: 46px; }
  .tm-more { min-width: 34px; min-height: 34px; }
}

/* ── Team rows: the inbox anatomy, plus the team-only bits ───────────────
   The row is built with the mail hub's own classes now, so grid, spacing,
   timestamp and snippet all come from there and cannot drift. Only what is
   specific to a team row lives here. */
/* Visible on BOTH row grounds — border-strong vanished on white unread rows,
   which read as a missing avatar rather than "nobody has taken this". */
.mhx-av.tm-unasav { background: var(--surface-2, #FBFBF9) !important; border: 1.5px dashed var(--text-3,#6C6C64);
  color: var(--text-2, #54544E); display: inline-grid; place-items: center; }
.tm-avwrap { background: transparent !important; padding: 0; display: inline-grid; place-items: center; }
.tm-avwrap .tm-av { width: 100%; height: 100%; font-size: 11px; }
/* who is holding it, said in the chip row rather than hidden in the avatar */
.tm-chip.who { background: var(--surface-3, #F1F1ED); color: var(--text-2, #54544E);
  display: inline-flex; align-items: center; gap: 4px; }
.tm-chip.who svg { opacity: .7; }

/* Colour swatches — in the wizard, in settings, and on right-click in the
   rail. The colour is how four shared mailboxes are told apart at a glance,
   so it is chosen where they are made and changed where they are seen. */
.tm-cols { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.tm-col { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.tm-col:hover { transform: scale(1.1); }
.tm-col.on { border-color: var(--text, #1B1B19); box-shadow: inset 0 0 0 2px #fff; }
.tm-col:focus-visible { outline: 2px solid var(--brand, #3C7538); outline-offset: 2px; }
.tm-colmenu { padding: 10px; }
.tm-colhead { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3,#6C6C64); margin: 0 0 8px 2px; }
@media (max-width: 560px) { .tm-col { width: 32px; height: 32px; } }

/* The colour swatches sit INSIDE .tm-moremenu, whose `button` rule makes
   every child full-width and 42px tall — which turned the swatches into
   giant coloured slabs. Same specificity class, so it needed a more
   specific selector rather than a different colour. */
.tm-moremenu .tm-cols { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 0 0; }
.tm-moremenu button.tm-col {
  width: 26px; height: 26px; min-height: 26px; flex: 0 0 26px;
  padding: 0; border-radius: 50%; display: inline-block;
  border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.tm-moremenu button.tm-col:hover { background-clip: padding-box; transform: scale(1.1); }
.tm-moremenu button.tm-col.on { border-color: var(--text, #1B1B19); box-shadow: inset 0 0 0 2px #fff; }
/* the colour row inside the mailbox menu */
.tm-colrow { padding: 8px 10px 10px; border-top: 1px solid var(--border, #E6E6E0);
  border-bottom: 1px solid var(--border, #E6E6E0); margin: 4px 0; }
.tm-collbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-3,#6C6C64); margin-bottom: 7px; }
/* a long menu scrolls inside itself rather than running off the screen */
.tm-moremenu { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.tm-boxmenu { padding: 8px 5px; }
@media (max-width: 560px) { .tm-moremenu button.tm-col { width: 32px; height: 32px; min-height: 32px; flex-basis: 32px; } }

/* Assignee filter — "whose is this?" is the first question on a shared queue,
   so it sits right under the view tabs rather than inside a menu. */
.tm-whofilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 8px 14px 10px; border-bottom: 1px solid var(--border, #E6E6E0); }
.tm-wholbl { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3,#6C6C64); margin-right: 2px; }
.tm-whochip { border: 1px solid var(--border, #E6E6E0); background: var(--surface, #fff);
  border-radius: 999px; padding: 4px 10px; font-size: 11.5px; cursor: pointer;
  color: var(--text-2, #54544E); min-height: 28px; }
.tm-whochip b { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 10.5px;
  color: var(--text-3,#6C6C64); margin-left: 3px; }
.tm-whochip:hover { border-color: var(--border-strong, #D6D6CE); }
.tm-whochip.on { background: var(--brand-bg, #EAF1E8); border-color: var(--brand, #3C7538);
  color: var(--text, #1B1B19); font-weight: 600; }
.tm-whochip.on b { color: var(--brand, #3C7538); }
@media (max-width: 560px) { .tm-whochip { min-height: 34px; } .tm-whofilter { padding: 8px 12px 10px; } }

/* "…is replying" — the one pill that has to stop you before you start
   writing. Amber and pulsing, ahead of the stage chip. */
.tm-chip.typing { background: var(--warn-bg, #F6ECD9); color: var(--tm-warn-ink);
  border-color: #E8D5AC; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.mhx-chip.mhx-tmstate { background: var(--surface-3, #F1F1ED); color: var(--text-2, #54544E); }
.mhx-chip.mhx-tmstate.typing { background: var(--warn-bg, #F6ECD9); color: #7A5512; font-weight: 600; }

/* Same in a team thread: the toolbar is icons plus the one word that matters.
   Assign / Stage / Label keep their text because they are the whole point of
   a shared mailbox; the rest are recognisable icons with tooltips. */
.tm-tools .mhx-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* …except the dropdown controls themselves: Assign shows the person (or the
   word), Stage its stage, Label its word — that was always the intent above,
   but the blanket rule clipped them too. */
.tm-tools .mhx-popwrap .mhx-btn .t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.tm-tools { flex-wrap: wrap; gap: 5px; }
/* One toolbar language across the hub: the inbox reading toolbar runs 40px
   tall on a 10px radius, so the team thread's does too. */
.tm-tools .mhx-btn { min-height: 40px; border-radius: 10px; }

/* The stage dot rides on the funnel so the current stage is readable at a
   glance without the word taking toolbar width. */
.tm-stagedot { width: 7px; height: 7px; margin-left: -3px; margin-top: -8px; }

/* Mail hub owns the header while it is open. The yearly target, the next
   order id, the global search and refresh belong to the dashboard, not to a
   mailbox, and they were crowding the account switcher (owner, 27 Aug).
   The mail page keeps its own account picker, +, search and Refresh. */
body.mhx-page-open #sales-yt-top,
body.mhx-page-open #next-oid,
body.mhx-page-open #scope-badge,
body.mhx-page-open #aiTopBtn,
body.mhx-page-open #aiGmgTop,
body.mhx-page-open #newOrderBtn,
body.mhx-page-open #topbarCalcBtn,
body.mhx-page-open #searchBtn,
body.mhx-page-open #fetched-at { display: none !important; }

/* Separator before the Closed chip — it filters by STATUS, not by person, so
   it should not read as another name in the assignee row. */
.tm-whosep { width: 1px; height: 20px; background: var(--border, #E6E6E0); margin: 0 4px; flex: none; }

/* ── Phone: every floating menu is a bottom sheet ─────────────────────
   A popover placed at the pointer has no pointer to sit near on a phone,
   and the thumb lives at the bottom of the screen — so the ⋮ menu, the
   mailbox right-click/long-press menu and the colour row all present as
   bottom sheets there, over a scrim, padded past the home-indicator with
   env(safe-area-inset-bottom). The !importants defeat the desktop
   left/top/width inline styles the placer writes. */
@media (max-width: 560px) {
  .tm-moremenu {
    left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: auto !important; max-height: 70vh !important;
    border-radius: 16px 16px 0 0; border-bottom: none;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(0,0,0,.22);
    animation: tmSheetUp .18s ease-out;
  }
  @keyframes tmSheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .tm-moremenu { animation: none; } }
  /* a visible grab handle says 'sheet', not 'lost dropdown' */
  .tm-moremenu::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px;
    background: var(--border-strong, #D6D6CE); margin: 0 auto 10px; }
  .tm-moremenu button { min-height: 48px; font-size: 14.5px; }
  .tm-moremenu button.tm-col { min-height: 36px; width: 36px; height: 36px; flex-basis: 36px; }
  .tm-colrow { padding: 10px 4px 12px; }
  /* the wizard/console sheet hugs the bottom too, full-width */
  .tm-sheet { border-radius: 16px 16px 0 0; }
  .tm-sheetbody { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
/* touch niceties everywhere — no grey tap flash, no double-tap zoom */
.tm-moremenu button, .tm-more, .tm-addbox, .tm-whochip, .mhx-latt, .tm-col, .ws-grow, .ws-alias button, .ws-aliasadd {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* A <button> does not inherit the page font — it falls back to the browser's
 * own (Arial here). Measured 30 Aug 2026 in the login-free harness: the
 * assignee filter chips, the box tabs and the More button were rendering in
 * Arial beside Geist everywhere else, which is why that row never quite
 * looked like the rest of the app. Family only — each rule keeps its own
 * size and weight. */
.tm-whochip, .tm-ftab, .tm-more, .tm-addbox, .tm-col, .tm-dtab, .tm-poprow,
.tm-chipbtn, .tm-moremenu button, .tm-sheet button, .tm-stage, .tm-asg {
  font-family: var(--font, 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif); }

/* ── Workspace panel: two columns on desk, one under the thumb on phone ── */
.ws-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ws-col h4 { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3,#6C6C64); margin: 2px 0 8px; display: flex; align-items: center; gap: 6px; }
.ws-n { font: 600 10.5px var(--mono, ui-monospace); background: var(--surface-3, #F1F1ED);
  border-radius: 6px; padding: 1px 6px; color: var(--text-3,#6C6C64); }
.ws-grow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--border, #E6E6E0); background: var(--surface, #fff); cursor: pointer;
  border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; min-height: 48px; }
.ws-grow:hover { border-color: var(--border-strong, #D6D6CE); }
.ws-grow.on { border-color: var(--brand, #3C7538); background: var(--brand-bg, #EAF1E8); }
.ws-gmeta { flex: 1; min-width: 0; }
.ws-gmeta b { display: block; font-size: 13px; }
.ws-gmeta small { display: block; font-size: 11px; color: var(--text-3,#6C6C64);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-members { border: 1px solid var(--border, #E6E6E0); border-top: none; border-radius: 0 0 10px 10px;
  margin: -7px 0 8px; padding: 10px 12px; background: var(--surface-2, #FBFBF9); }
.ws-mrow { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; min-height: 40px; }
.ws-mrow span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ws-mrow button, .ws-alias button { border: none; background: none; cursor: pointer; color: var(--text-3,#6C6C64);
  min-width: 34px; min-height: 34px; border-radius: 7px; }
.ws-mrow button:hover, .ws-alias button:hover { background: var(--danger-bg, #f7e5e3); color: var(--tm-danger-ink, #A23530); }
.ws-urow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border, #E6E6E0); }
.ws-aliases { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 55%; }
.ws-alias { display: inline-flex; align-items: center; gap: 2px; font-size: 11px;
  background: var(--surface-3, #F1F1ED); border-radius: 999px; padding: 3px 4px 3px 10px; color: var(--text-2, #54544E); }
.ws-aliasadd { border: 1px dashed var(--border-strong, #D6D6CE); background: none; cursor: pointer;
  border-radius: 999px; padding: 3px 10px; font-size: 11px; color: var(--text-3,#6C6C64); min-height: 30px; }
.ws-aliasadd:hover { border-color: var(--brand, #3C7538); color: var(--brand, #3C7538); }
.ws-new { border: 1px dashed var(--border-strong, #D6D6CE); border-radius: 10px; padding: 12px; margin-top: 10px; }
.ws-new h5 { margin: 0 0 8px; font-size: 12px; }
.ws-new input, #wsUserQ, #wsMemIn { width: 100%; border: 1px solid var(--border, #E6E6E0); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 14px; margin-bottom: 8px; min-height: 44px; }
#wsUserQ { margin-bottom: 10px; }
.ws-new .mhx-btn { width: 100%; min-height: 44px; }
@media (max-width: 700px) {
  .ws-cols { grid-template-columns: 1fr; }
  .ws-aliases { max-width: 100%; justify-content: flex-start; }
  .ws-urow { flex-wrap: wrap; }
  .ws-mrow, .ws-grow { min-height: 48px; }
}

/* An ASSIGNED conversation reads as settled rather than as an empty control:
 * the button carries the person's face and first name, so it needs a filled
 * state to match. Kept quiet — this is a status, not a call to action. */
.mhx-btn.tm-assigned { background: var(--green-soft, #EEF4EC); border-color: var(--green-soft, #DCE7D8); }
.mhx-btn.tm-assigned .tm-av { margin-right: 1px; }

/* The collision warning repeated at the reply box: a reminder rather than an
 * announcement, so it is smaller and sits directly above Send, where the
 * decision to answer is actually made. The banner under the subject has
 * scrolled out of sight on any real thread by that point. */
.tm-collide.compact { margin: 0 0 8px; padding: 7px 11px; font-size: 12px; }
.tm-collide .tm-av { flex: none; }

/* ── Phone: spend the pixels on mail, not chrome. The box header holds one
   line (address ellipsized), the assignee pills hold one scrollable line
   with the ASSIGNEE label dropped — the pills are self-evident — and each
   pill stays thumb-sized. ── */
#mailHubPage.mhx-phone .tm-boxhead { padding: 8px 14px 4px; }
#mailHubPage.mhx-phone .tm-boxhead b { font-size: 14.5px; white-space: nowrap; }
#mailHubPage.mhx-phone .tm-addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mailHubPage.mhx-phone .tm-whofilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 14px 8px;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
#mailHubPage.mhx-phone .tm-whofilter::-webkit-scrollbar { display: none; }
#mailHubPage.mhx-phone .tm-wholbl { display: none; }
#mailHubPage.mhx-phone .tm-whochip { min-height: 40px; white-space: nowrap; flex: none; padding: 4px 12px; }

/* A renamed conversation still says what it really is, quietly. */
.tm-origsubj { font-size: 12px; color: var(--text-3,#6C6C64); padding: 0 16px 8px; margin-top: -6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The draft under review, quoted inside the banner. */
.tm-draftbox { background: var(--surface, #fff); border: 1px solid #E0D2DE; border-radius: 8px;
  padding: 9px 12px; margin: 8px 0; font-size: 12.5px; color: var(--text, #1B1B19);
  white-space: pre-wrap; max-height: 180px; overflow: auto; }

/* Pulse additions: per-person table, CSAT bars, six-month trend. */
.tm-mrow.off { opacity: .55; }
.tm-ftrack .ok { background: var(--brand, #3C7538); }
.tm-ftrack .mid { background: #B5781A; }
.tm-ftrack .bad { background: #A23530; }
.tm-trend { display: flex; gap: 10px; align-items: flex-end; padding: 6px 2px 2px; }
.tm-tcol { display: grid; justify-items: center; gap: 4px; }
.tm-tbar { width: 26px; border-radius: 6px 6px 2px 2px; background: var(--brand-ring, #CADFC3); display: block; }
.tm-tcol:last-child .tm-tbar { background: var(--brand, #3C7538); }
.tm-tcol small { font: 500 10.5px var(--mono, ui-monospace); color: var(--text-3,#6C6C64); }

/* Collapsed conversation messages — the inbox anatomy in the team thread. */
.tm-msg.col { cursor: pointer; }
.tm-msg.col .mh { border-bottom: none; border-radius: 9px; }
.tm-msg.col .snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-3,#6C6C64); }
.tm-msg .mh[data-tm-mcol] { cursor: pointer; }
/* Reply / Reply all mode chips above the reply box. */
.tm-rmode { display: flex; gap: 6px; margin: 2px 0 8px; }
.tm-rmode .tm-chipbtn { padding: 5px 13px; min-height: 34px; }

/* ── AI popover in the reply box (29 Aug) — mail-hub aipop, tm-pop scoped ── */
.tm-pop .ai-q{width:100%;box-sizing:border-box;border:1px solid var(--border,#E6E6E0);border-radius:9px;padding:8px 10px;font:inherit;font-size:12.5px;outline:none;resize:vertical;margin:2px 0 8px;min-width:260px}
.tm-pop .ai-q:focus{border-color:var(--brand,#3C7538)}
.tm-pop .ai-row{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.tm-pop .ai-tone{flex:1;border:1px solid var(--border,#E6E6E0);border-radius:9px;padding:8px;font:inherit;font-size:12.5px;background:var(--surface,#fff)}
.tm-pop .ai-row .mhx-btn{min-height:34px;font-size:12px;justify-content:center}
.tm-pop .ai-row .ai-go{flex:none}
.tm-pop .ai-row .ai-mode{flex:1}

/* ── Row chips live in ONE place: the right edge, under the date (29 Aug) ── */
.tm-row .mhx-right.tm-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 380px; min-width: 0; }
/* The date STAYS on hover (owner, 30 Aug): the inbox hides .mhx-when to make
 * room for its same-height action buttons — team rows have no such buttons,
 * so inheriting that rule collapsed the line and the whole list jumped up
 * and down under the pointer. Higher specificity than the injected
 * `.mhx-row:hover .mhx-when{display:none}` on purpose. */
.tm-row.mhx-row:hover .mhx-when, .tm-row.mhx-row.sel .mhx-when { display: block; }
/* ── somebody else is in this conversation ──────────────────────────────
 * The banner alone can be scrolled past, so the whole conversation washes
 * light red while a colleague is in here (owner, 30 Aug 2026). Deliberately
 * a WASH, not an alarm: #FCF3F2 keeps body text at 15:1 and the white message
 * cards still read as cards on top of it. It clears itself when they leave —
 * the class is toggled by the presence ping, never by a repaint, because a
 * repaint would take a half-typed reply with it.
 * This is the one place red is not about an overdue SLA, and it earns it:
 * two people answering the same customer is the costlier mistake. */
.tm-thread { transition: background-color .18s ease-out; }
/* min-height so the wash fills the pane on a short thread too — a tint that
 * stops halfway down reads as a broken card, not as a state. */
.tm-thread.tm-busy { background: #FCF3F2; min-height: 100%; }
.tm-thread.tm-busy .tm-msg,
.tm-thread.tm-busy .tm-reply,
.tm-thread.tm-busy .tm-note,
.tm-thread.tm-busy .tm-noteadd textarea { background: var(--surface, #fff); }
/* The banner sharpens a shade so it still reads as the loudest thing on a
 * ground that is now tinted too. */
.tm-thread.tm-busy .tm-collide { border-color: #E9C4BF; }
@media (prefers-reduced-motion: reduce) { .tm-thread { transition: none; } }

/* A conversation past its first-reply target. Three class names deep on
 * purpose: the hub's own `.mhx-row.unread` rule is injected into <head> after
 * this file loads, so an equally specific selector would lose the tie. */
.tm-row.mhx-row.tm-late { box-shadow: inset 3px 0 0 var(--danger, #C0443D); }

.tm-rowchips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; align-items: center; }
.tm-rowchips:empty { display: none; }
#mailHubPage.mhx-phone .tm-row .mhx-right.tm-rt { max-width: 52vw; }
/* F32 (mobile audit, 21 Oct 2026): on a phone the row chips stay on ONE line; what does not fit goes behind a
 * "+N" chip that opens the rest (fitChips in erp-mail.js). Wrapping chips made team rows 150px+ tall. */
#mailHubPage.mhx-phone .tm-row .tm-rowchips { flex-wrap: nowrap; overflow-x: clip; max-width: 100%; }
#mailHubPage.mhx-phone .tm-row .tm-rowchips > * { flex: none; }
#mailHubPage.mhx-phone .tm-row .tm-rowchips.all { flex-wrap: wrap; overflow-x: visible; }

/* ── The Team Mail rail in SLIM (icon-rail) mode. Before this the section had
   no slim rules at all: "TEAM MAIL" clipped mid-word and the view rows shrank
   to lone letters (owner's 29 Aug screenshot). Slim follows the folder rail's
   own anatomy: the box DOT is the icon, everything textual steps aside. ── */
#mailHubPage.mhx-slim .tm-railsec { border-top: 1px solid var(--border, #E6E6E0); margin-top: 8px; padding-top: 8px; }
#mailHubPage.mhx-slim .tm-railsec h4 { display: none; }
#mailHubPage.mhx-slim .tm-boxrow { width: 48px; min-height: 44px; justify-content: center; padding: 0; margin: 0; border-radius: 12px; }
#mailHubPage.mhx-slim .tm-boxrow .tm-boxname, #mailHubPage.mhx-slim .tm-boxrow .tm-boxn { display: none; }
#mailHubPage.mhx-slim .tm-boxrow .tm-dot { width: 14px; height: 14px; margin: 0; }
#mailHubPage.mhx-slim .tm-view, #mailHubPage.mhx-slim .tm-railempty { display: none; }

/* Rule actions that act on Gmail itself — added 31 Aug 2026 with the
   workflow-builder actions (mark read / star / Set aside). A checkbox row
   rather than another select: these are independent switches, not a choice
   between alternatives, and the label reads as the sentence it completes. */
.tm-check { display: flex; align-items: center; gap: 9px; padding: 7px 2px; font-size: 12.5px; color: var(--text, #1B1B19); cursor: pointer; }
.tm-check input { width: 17px; height: 17px; accent-color: var(--brand, #3C7538); flex: none; cursor: pointer; }
.tm-check span { line-height: 1.45; }
.tm-check:hover span { color: var(--brand, #3C7538); }

/* TeleCRM line in the team side panel: the "Add as lead" button (Team Mail can file
 * a lead now, not only look one up — owner, 21 Sep 2026), and the message chip for a
 * customer's reply to the form's own acknowledgement, folded into the enquiry. */
.tm-lead-line .tm-lead-add { margin-top: 8px; }
.tm-msg .tm-chip { background: var(--surface-3, #F1F1ED); color: var(--text-2, #54544E); border-color: var(--border, #E6E6E0); margin-left: 8px; }

/* Stage rows drag to reorder (owner, 21 Sep 2026: a new stage can sit between two others). */
.tm-strow { cursor: default; }
.tm-strow[draggable="true"] .tm-drag { cursor: grab; color: var(--text-3, #6C6C64); display: inline-flex; align-items: center; flex: none; touch-action: none; }
.tm-strow[draggable="true"] .tm-drag:active { cursor: grabbing; }
.tm-strow.tm-dragging { opacity: 0.45; }
.tm-strow.tm-dropinto { box-shadow: inset 0 2px 0 var(--brand, #3C7538); background: var(--surface-2, #FBFBF9); }

/* Status pills glow (owner, 29 Oct 2026): "a golden border, continuously glowing, across the status pill — new,
 * replied, lost — so a salesperson sees at a glance that it is the mail's status". Stage chips only (never labels
 * or SLA chips). The glow is an ::after layer whose OPACITY animates (compositor-only), so a long list never
 * repaints; reduced-motion keeps a steady gold border. */
.tm-chip[class*="stg-"] { position: relative; border-color: #C9A227; box-shadow: 0 0 0 1px rgba(201,162,39,.35); }
.tm-chip[class*="stg-"]::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 6px 1px rgba(232,190,60,.75), 0 0 0 1px rgba(232,190,60,.55);
  opacity: .25; animation: tmStageGlow 2.4s ease-in-out infinite;
}
@keyframes tmStageGlow { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tm-chip[class*="stg-"]::after { animation: none; opacity: .6; } }