/* =============================================================================
   mh-teams.css  -  Teams chat, "Editorial" re-skin (KICKOFF 02 · P1).
   Re-skinned IN PLACE on the existing .tm-* scaffold (one source of truth; the
   MHchat JS hooks and every wiring path are preserved). Ported from DESIGN's
   Editorial direction (team/dir3 + chat). All colour comes from the shared --mh-*
   theme tokens, so light + dark follow body.dark automatically. The mock's
   slate-teal accent is single-sourced to the brand pine --mh-green (outgoing
   bubble, send button, primary CTAs). Plain hyphens only.
   ========================================================================== */

.tm-page { display:flex; gap:16px; height:calc(calc(100 * var(--mh-vh)) - 124px); min-height:520px; min-width:0; }

/* ---- sidebar (Editorial .side) ---- */
.tm-page .tm-list { width:360px; flex:none; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-lhead { padding:20px 20px 16px; border-bottom:1px solid var(--mh-line-cool); }

/* user header (.me) + read-only status display (write wiring is P2) */
.tm-page .tm-me { display:flex; align-items:center; gap:13px; }
.tm-page .tm-me-av { width:50px; height:50px; font-size:17px; font-family:var(--mh-font-head); flex:none; }
.tm-page .tm-me-info { flex:1; min-width:0; }
.tm-page .tm-me-nm { font-family:var(--mh-font-head); font-size:21px; font-weight:700; color:var(--mh-ink); letter-spacing:-0.015em; line-height:1.08; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-me-statuswrap { position:relative; margin-top:6px; }
.tm-page .tm-me-status { display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:600; color:var(--mh-slate); padding:5px 10px 5px 9px; border-radius:20px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); cursor:pointer; transition:.14s; }
.tm-page .tm-me-status:hover, .tm-page .tm-me-status.open { border-color:var(--mh-green); color:var(--mh-ink); }
.tm-page .tm-me-status .dot { width:9px; height:9px; border-radius:50%; flex:none; background:#8A8B83; }
.tm-page .tm-me-status .chev { display:grid; place-items:center; color:var(--mh-muted); transition:transform .18s; }
.tm-page .tm-me-status.open .chev { transform:rotate(180deg); }
.tm-page .tm-me-status .chev svg { width:14px; height:14px; }
/* status dropdown menu */
.tm-page .tm-me-menu { position:absolute; top:calc(100% + 7px); left:0; z-index:30; width:214px; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:14px; box-shadow:var(--mh-shadow,0 8px 24px rgba(52,69,77,.10)); padding:6px; }
.tm-page .tm-mi { display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border:none; background:none; border-radius:10px; font:inherit; font-size:14px; font-weight:600; color:var(--mh-ink); text-align:left; cursor:pointer; transition:background .12s; }
.tm-page .tm-mi:hover, .tm-page .tm-mi.on { background:var(--mh-cream-2); }
.tm-page .tm-mi .dot { width:10px; height:10px; border-radius:50%; flex:none; }
.tm-page .tm-mi .lab { flex:1; }
.tm-page .tm-mi .ck { color:var(--mh-green-d); display:grid; place-items:center; }
.tm-page .tm-mi .ck svg { width:15px; height:15px; }
.tm-page .tm-statusback { position:fixed; inset:0; z-index:20; border:none; background:transparent; cursor:default; }
/* SECOND-PASS FIX: the status note is a LIGHT TEXT affordance (Slack-style), NOT a
   second bordered pill - so it never reads as a duplicate of the search field below.
   ONLY the search keeps the bordered pill spec. */
.tm-page .tm-searchrow .tm-search { height:44px; border-radius:22px; padding:0 14px; }

.tm-page .tm-me-statusbar { margin-top:12px; }
/* KICKOFF 08 B - "Set a status" / status-show are now the BIG full-width button,
   the SAME size as the search pill below (44px / radius 22) so they stack cleanly. */
.tm-page .tm-me-statusadd,
.tm-page .tm-me-statusshow { display:flex; align-items:center; gap:8px; width:100%; height:44px; padding:0 16px; border:1px solid var(--mh-line-cool); border-radius:22px; background:var(--mh-cream-2); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left; transition:border-color .14s, background .14s, color .14s; }
.tm-page .tm-me-statusadd { color:var(--mh-slate); }
.tm-page .tm-me-statusadd:hover { border-color:var(--mh-green); color:var(--mh-green-d); }
.tm-page .tm-me-statusadd svg { width:16px; height:16px; flex:none; }
.tm-page .tm-me-statusshow:hover { border-color:var(--mh-green); }
.tm-page .tm-me-statusshow .si { color:#D89B3D; flex:none; display:grid; place-items:center; }
.tm-page .tm-me-statusshow .si svg { width:16px; height:16px; }
.tm-page .tm-me-statusshow .txt { flex:1; min-width:0; font-size:13px; color:var(--mh-ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-me-statusshow .pen { color:var(--mh-muted); flex:none; display:grid; place-items:center; opacity:0; transition:opacity .14s; }
.tm-page .tm-me-statusshow:hover .pen { opacity:1; }
.tm-page .tm-me-statusshow .pen svg { width:13px; height:13px; }
/* KICKOFF 08 - editing matches the Set-a-status button + search size (44px / radius 22)
   so the stack stays uniform; single box via :focus-within only. */
.tm-page .tm-me-statusedit { display:flex; align-items:center; gap:8px; height:44px; padding:0 16px; border-radius:22px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); transition:border-color .14s, box-shadow .14s; }
.tm-page .tm-me-statusedit:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-page .tm-me-statusedit .si { color:#D89B3D; flex:none; display:grid; place-items:center; }
.tm-page .tm-me-statusedit .si svg { width:16px; height:16px; }
.tm-page .tm-me-statusedit input { flex:1; min-width:0; border:none; outline:none; background:none; font:inherit; font-size:13.5px; color:var(--mh-ink); font-weight:600; }
.tm-page .tm-me-statusedit input::placeholder { color:var(--mh-muted); font-weight:500; }
/* KICKOFF 08 E - the New Group button moved to the header row, so the search is now
   FULL-WIDTH, the same size as the Set-a-status button above it. */
.tm-page .tm-searchrow { margin-top:10px; }
.tm-page .tm-searchrow .tm-search { width:100%; margin-top:0; }
/* KICKOFF 08 D - New Group button now lives in the header top row (in .tm-me),
   right-aligned across from the avatar; pushed right by .tm-me-info's flex:1. */
.tm-page .tm-me .tm-newgroup { flex:none; align-self:center; }
.tm-page .tm-newgroup { width:42px; height:42px; border:none; border-radius:50%; background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 4px 12px rgba(78,124,114,.26); transition:.14s; }
.tm-page .tm-newgroup:hover { filter:brightness(1.07); }
.tm-page .tm-newgroup svg { width:19px; height:19px; }

/* pill search (.s-search) - min-width:0 lets it shrink so the placeholder never pushes under the + button */
.tm-page .tm-search { display:flex; align-items:center; gap:8px; margin-top:12px; min-width:0; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); border-radius:22px; padding:0 14px; height:44px; transition:.14s; }
.tm-page .tm-search:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-page .tm-search svg { width:17px; height:17px; color:var(--mh-muted); flex:none; }
.tm-page .tm-search input { flex:1; min-width:0; border:none; background:none; outline:none; font:inherit; font-size:14px; color:var(--mh-ink); text-overflow:ellipsis; }

.tm-page .tm-scroll { flex:1; overflow-y:auto; padding:14px 14px 16px; }
/* clean small-caps section label, no awkward partial divider */
.tm-page .tm-seclbl { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--mh-muted); margin:16px 8px 9px; }
.tm-page .tm-scroll > .tm-seclbl:first-child { margin-top:6px; }

/* conversation card (.card) */
.tm-page .tm-row { display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:18px; margin-bottom:6px; cursor:pointer; transition:.16s; border:1.5px solid transparent; background:none; width:100%; text-align:left; position:relative; }
.tm-page .tm-row:hover { background:var(--mh-surface); border-color:var(--mh-line-cool); box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-row.on { background:var(--mh-cream-2); border-color:var(--mh-green); box-shadow:none; }
.tm-page .tm-av { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; flex:none; position:relative; background-size:cover; background-position:center; }
.tm-page .tm-av .tm-dot { position:absolute; right:-1px; bottom:-1px; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--mh-surface); background:#8A8B83; }
.tm-page .tm-dot.av { background:#3FA372; }
.tm-page .tm-dot.na { background:#8A8B83; }
.tm-page .tm-meta { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; }
.tm-page .tm-nm { font-size:15px; font-weight:700; color:var(--mh-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-st { font-size:12.5px; color:var(--mh-muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Online presence = the green avatar dot only; the green "Active now" text was removed
   (enterprise standard). Offline keeps a muted text label. */
.tm-page .tm-st .stxt.na { color:var(--mh-muted); }
.tm-page .tm-rowend { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:6px; flex:none; min-width:34px; }
.tm-page .tm-rowtime { font-size:11.5px; color:var(--mh-muted); font-variant-numeric:tabular-nums; line-height:1; }
.tm-page .tm-badge { flex:none; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--mh-clay,#C97B5A); color:#fff; font-size:11.5px; font-weight:800; display:grid; place-items:center; line-height:1; font-variant-numeric:tabular-nums; box-shadow:0 2px 6px rgba(201,123,90,.30); }
.tm-page .tm-roster-empty { padding:24px 14px; color:var(--mh-muted); font-size:13px; text-align:center; }

/* group avatar - real colored disc + glyph (kept; restyled Editorial) */
.tm-page .tm-gav { width:48px; height:48px; border-radius:15px; flex:none; display:grid; place-items:center; color:#fff; }
.tm-page .tm-gav svg { width:22px; height:22px; }
.tm-page .tm-gav.lg { width:46px; height:46px; }

/* avatar size variants */
.tm-page .tm-av.sm { width:38px; height:38px; font-size:13px; }
.tm-page .tm-av.xs { width:30px; height:30px; font-size:11px; }

/* ---- chat panel (.chat) ---- */
.tm-page .tm-chat { flex:1; min-width:0; position:relative; background:var(--mh-cream); border:1px solid var(--mh-line-cool); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-chead { flex:none; display:flex; align-items:center; gap:14px; padding:16px 24px; border-bottom:1px solid var(--mh-line-cool); background:var(--mh-surface); }
.tm-page .tm-chead .tm-av { width:46px; height:46px; }
.tm-page .tm-chmeta { flex:1; min-width:0; }
.tm-page .tm-chead .tm-nm { font-family:var(--mh-font-head); font-size:19px; }
.tm-page .tm-chead .tm-cstatus { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; margin-top:2px; color:var(--mh-green-d); }
/* Chosen-status dot (colour from lkp_PresenceStatus) + the offline muted state. */
.tm-page .tm-chead .tm-cstatus .dot { flex:none; width:8px; height:8px; border-radius:50%; }
.tm-page .tm-chead .tm-cstatus.na { color:var(--mh-muted); }
/* Status note (StatusMessage) below the name, e.g. "Test Account". */
.tm-page .tm-chead .tm-cnote { font-size:12px; font-style:italic; color:var(--mh-muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tm-page .tm-chacts { display:flex; align-items:center; gap:8px; flex:none; }

/* message scroll (.ch-scroll) + day separators */
.tm-page .tm-msgs { flex:1; overflow-y:auto; padding:24px 28px 14px; display:flex; flex-direction:column; gap:14px; background:var(--mh-cream); }
.tm-page .tm-daysep { align-self:center; font-size:11px; font-weight:700; color:var(--mh-muted); background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:999px; padding:4px 13px; margin:2px 0; }

/* bubbles (.bub) - outgoing single-sourced to brand pine --mh-green */
/* DYNAMIC (Messenger/Teams): the bubble sizes to its CONTENT (fit-content) up to the
   wrapper max-width; text wraps at WORD boundaries only (overflow-wrap breaks only a
   single word too long to fit; word-break:normal so nothing splits mid-character). */
.tm-page .tm-msg { width:fit-content; max-width:100%; padding:11px 15px; border-radius:18px; font-size:14.5px; line-height:1.45; position:relative; white-space:pre-wrap; overflow-wrap:break-word; word-break:normal; }
.tm-page .tm-msg .tm-time { display:block; font-size:11px; margin-top:4px; opacity:.62; }
.tm-page .tm-msg.them { align-self:flex-start; background:var(--mh-surface); border:1.5px solid var(--mh-line-cool); color:var(--mh-ink); border-bottom-left-radius:6px; box-shadow:var(--mh-shadow-sm,0 1px 3px rgba(52,69,77,.07)); }
.tm-page .tm-msg.me { align-self:flex-end; background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); border:1.5px solid var(--mh-green-d); color:#F4F8F6; border-bottom-right-radius:6px; box-shadow:0 6px 16px rgba(78,124,114,.24); }

/* composer (.composewrap + .compose) - rounded pill, our emoji button */
/* KICKOFF 08 follow-up - shorter composer + emoji/send vertically centered with the
   textarea (was align-items:flex-end + a tall 60px textarea that made the box bulky). */
.tm-page .tm-compose { flex:none; display:flex; align-items:center; gap:8px; margin:14px 20px 18px; padding:5px; background:var(--mh-surface); border:1.5px solid var(--mh-line-cool); border-radius:26px; transition:border-color .14s, box-shadow .14s; }
/* KICKOFF 08 A - single subtle ring on the wrapper only (was the thick .45 ring). */
.tm-page .tm-compose:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-page .tm-compose textarea { flex:1; resize:none; border:none; background:none; padding:8px 10px; font:inherit; font-size:15px; line-height:1.35; color:var(--mh-ink); outline:none; max-height:120px; min-height:24px; }
/* KICKOFF 08 A - composer textarea draws NO box of its own (same single-box reset as
   KICKOFF 07): out-specifies the global .mh-app control base + its :focus ring so the
   wrapper is the only box. Padding stays via the rule above. */
.mh-app .tm-page .tm-compose textarea,
.mh-app .tm-page .tm-compose textarea:focus {
  border:none; outline:none; box-shadow:none; background:transparent; border-radius:0;
}
.tm-page .tm-send { width:44px; height:44px; flex:none; border:none; border-radius:50%; background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 14px rgba(78,124,114,.28); transition:.14s; }
.tm-page .tm-send:hover:not(:disabled) { filter:brightness(1.07); }
.tm-page .tm-send:disabled { background:var(--mh-cream-2); color:var(--mh-muted); box-shadow:none; cursor:default; }
.tm-page .tm-send svg { width:18px; height:18px; }

/* ---- empty state (.empty) - floating community bubbles ---- */
.tm-page .tm-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px; }
.tm-page .tm-bubbles { position:relative; height:150px; width:330px; margin:0 auto 14px; }
.tm-page .tm-bubbles .bb { position:absolute; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-family:inherit; padding:0; border:4px solid var(--mh-cream); box-shadow:0 12px 26px rgba(52,69,77,.16); background-size:cover; background-position:center; }
/* Only CLICKABLE bubbles get the pointer + float animation - motion must never imply
   interactivity that is not there. The static center (.bb-self) carries neither. */
.tm-page .tm-bubbles .bb-clk { cursor:pointer; animation:tmBbFloat 3.6s ease-in-out infinite alternate; will-change:transform; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(1){ --fl:-9px; animation-duration:3.3s; animation-delay:-.2s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(2){ --fl:-13px; animation-duration:4.2s; animation-delay:-1.2s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(3){ --fl:-7px; animation-duration:4.8s; animation-delay:-.6s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(4){ --fl:-15px; animation-duration:3.0s; animation-delay:-1.7s; }
.tm-page .tm-bubbles .bb-clk:nth-of-type(5){ --fl:-12px; animation-duration:3.9s; animation-delay:-.9s; }
.tm-page .tm-bubbles .bb-clk:hover { box-shadow:0 14px 30px rgba(52,69,77,.24); filter:brightness(1.04); }
@keyframes tmBbFloat { from{ transform:translateY(0); } to{ transform:translateY(var(--fl,-10px)); } }
@media (prefers-reduced-motion:reduce){ .tm-page .tm-bubbles .bb-clk{ animation:none; } }
.tm-page .tm-empty h4 { font-family:var(--mh-font-head); font-size:32px; font-weight:700; color:var(--mh-ink); line-height:1.06; letter-spacing:-0.02em; }
.tm-page .tm-empty p { font-size:15px; color:var(--mh-slate); line-height:1.55; margin:16px auto 0; max-width:42ch; }
.tm-page .tm-acts { display:flex; gap:13px; justify-content:center; margin-top:28px; }
.tm-page .tm-cta { height:48px; padding:0 22px; border-radius:24px; font:inherit; font-size:15px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:9px; border:1.5px solid transparent; }
.tm-page .tm-cta svg { width:19px; height:19px; }
.tm-page .tm-cta.p { background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; box-shadow:0 10px 22px rgba(78,124,114,.26); }
.tm-page .tm-cta.p:hover { filter:brightness(1.06); }
.tm-page .tm-cta.g { background:var(--mh-surface); border-color:var(--mh-line-cool); color:var(--mh-ink); }
.tm-page .tm-cta.g:hover { border-color:var(--mh-green); color:var(--mh-green-d); }

/* ---- star / pin ---- */
.tm-page .tm-star { flex:none; width:26px; height:26px; border:none; background:none; padding:0; border-radius:8px; display:grid; place-items:center; color:var(--mh-muted); cursor:pointer; opacity:0; transition:.12s; }
.tm-page .tm-star svg { width:16px; height:16px; }
.tm-page .tm-row:hover .tm-star { opacity:.7; }
.tm-page .tm-star:hover { background:var(--mh-cream-2); color:#E0A82E; opacity:1; }
.tm-page .tm-star.on { opacity:1; color:#E0A82E; }
.tm-page .tm-starbtn { flex:none; width:40px; height:40px; border:none; background:var(--mh-cream-2); border-radius:12px; display:grid; place-items:center; color:var(--mh-muted); cursor:pointer; transition:.12s; }
.tm-page .tm-starbtn svg { width:19px; height:19px; }
.tm-page .tm-starbtn:hover { background:var(--mh-cream); color:var(--mh-ink); }
.tm-page .tm-starbtn.on { color:#E0A82E; }

/* header icon buttons (.ch-ic) + close */
.tm-page .tm-iconbtn { flex:none; width:40px; height:40px; border:none; background:var(--mh-cream-2); border-radius:12px; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; transition:.14s; }
.tm-page .tm-iconbtn:hover { background:var(--mh-cream); color:var(--mh-ink); }
.tm-page .tm-iconbtn.on { background:rgba(78,124,114,.14); color:var(--mh-green-d); }
.tm-page .tm-iconbtn svg { width:19px; height:19px; }
.tm-page .tm-close:hover { background:rgba(176,70,60,.12); color:var(--mh-danger,#B0463C); }

/* ---- message wrap + own-message edit/delete actions (preserved) ---- */
.tm-page .tm-mwrap { display:flex; flex-direction:column; gap:3px; max-width:76%; }
.tm-page .tm-mwrap.me { align-self:flex-end; align-items:flex-end; }
.tm-page .tm-mwrap.them { align-self:flex-start; align-items:flex-start; }
.tm-page .tm-mwrap .tm-msg { max-width:100%; }
.tm-page .tm-edited { opacity:.7; font-style:italic; }
.tm-page .tm-msg.tomb { background:var(--mh-cream-2); border:1px dashed var(--mh-line-cool); color:var(--mh-muted); font-style:italic; box-shadow:none; }
.tm-page .tm-actions { display:flex; align-items:center; gap:4px; opacity:0; transition:.12s; height:22px; }
.tm-page .tm-mwrap:hover .tm-actions { opacity:1; }
.tm-page .tm-actions button { border:none; background:none; padding:3px; border-radius:7px; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-actions button svg { width:15px; height:15px; }
.tm-page .tm-actions button:hover { background:var(--mh-cream-2); color:var(--mh-ink); }
.tm-page .tm-actions.confirm { opacity:1; font-size:12px; font-weight:700; color:var(--mh-muted); gap:6px; }
.tm-page .tm-actions.confirm .yes { color:var(--mh-danger,#C0492F); font-weight:800; }
.tm-page .tm-actions.confirm .no { color:var(--mh-green-d); font-weight:800; }

/* edit-in-place box */
/* EDIT-IN-PLACE BOX (CEO, Aug 5 2026: "the field is so small, make it wider, standard").
   IT WAS width:min(76%,420px) AND THAT PERCENTAGE WAS THE BUG. The editor sits inside
   .tm-mwrap, which is a shrink-to-fit flex item (align-self:flex-end, width:auto) - it
   sizes itself TO ITS CHILD. A percentage width against a parent that has no definite
   width of its own is circular, so the browser drops it during intrinsic sizing and the
   <textarea> falls back to its default ~20-character column. That is the tiny box: not a
   styling choice, a percentage that could never resolve.
   Fixed with a DEFINITE width. --mh-vw, never bare vw, because of the root
   Display-resolution zoom ([[mh-display-resolution]]). min-width means it can never
   collapse to the intrinsic default again, whatever the container does. */
.tm-page .tm-editbox {
  width: min(460px, calc(62 * var(--mh-vw)));
  min-width: min(320px, calc(56 * var(--mh-vw)));
  max-width: 100%;
}
/* The bubble column is capped at 70/76% for READING - comfortable line length. While
   EDITING that cap is just a smaller box, so let the row give the editor its room back. */
.tm-page .tm-mwrap:has(.tm-editbox),
.tm-page .tm-msgs.dmflow .tm-mwrap:has(.tm-editbox) { max-width: 94%; }
.tm-page .tm-mwrap.dm:has(.tm-editbox) .tm-bcol { max-width: 100%; }
.tm-page .tm-editbox textarea { width:100%; resize:vertical; border:1.5px solid var(--mh-green); border-radius:16px; background:var(--mh-surface); padding:11px 14px; font:inherit; font-size:14px; line-height:1.45; color:var(--mh-ink); outline:none; min-height:76px; max-height:240px; box-sizing:border-box; }
.tm-page .tm-edithint { font-size:10.5px; color:var(--mh-muted); margin-top:3px; padding-left:4px; }

/* ---- our emoji picker (KEPT untouched; trigger + popover restyled) ---- */
.tm-page .tm-emojiwrap { position:relative; flex:none; }
.tm-page .tm-emojibtn { width:44px; height:44px; border:none; background:none; border-radius:50%; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; transition:background .14s; }
.tm-page .tm-emojibtn:hover { background:rgba(216,155,61,.18); color:#C49A33; }
.tm-page .tm-emojibtn svg { width:22px; height:22px; }
.tm-page .tm-emojiback { position:fixed; inset:0; z-index:40; border:none; background:transparent; cursor:default; }
.tm-page .tm-emojipop { position:absolute; bottom:54px; left:0; z-index:50; width:328px; height:320px; display:flex; flex-direction:column; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:18px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:hidden; }
/* KICKOFF 08 C - the SAME picker opening DOWNWARD for the status note (which sits at
   the top of the sidebar); width kept within the 360px list so overflow never clips it. */
.tm-page .tm-emojipop.down { top:calc(100% + 8px); bottom:auto; left:-4px; width:300px; }
.tm-page .tm-me-statusedit .tm-emojiwrap { position:relative; flex:none; display:grid; place-items:center; }
.tm-page .tm-statusemoji { width:24px; height:24px; border:none; background:none; padding:0; color:#D89B3D; cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-statusemoji:hover { color:#C49A33; }
.tm-page .tm-statusemoji svg { width:16px; height:16px; }
.tm-page .tm-emojisearch { padding:10px 10px 8px; border-bottom:1px solid var(--mh-line-cool); }
.tm-page .tm-emojisearch input { width:100%; height:34px; border:1px solid var(--mh-line-cool); border-radius:10px; background:var(--mh-cream-2); padding:0 11px; font:inherit; font-size:13px; color:var(--mh-ink); outline:none; }
.tm-page .tm-emojisearch input:focus { border-color:var(--mh-green); }
.tm-page .tm-emojitabs { display:flex; gap:2px; padding:6px 8px; border-bottom:1px solid var(--mh-line-cool); overflow-x:auto; }
.tm-page .tm-emojitabs button { flex:none; width:30px; height:30px; border:none; background:none; border-radius:8px; font-size:17px; line-height:1; cursor:pointer; }
.tm-page .tm-emojitabs button:hover { background:var(--mh-cream-2); }
.tm-page .tm-emojitabs button.on { background:rgba(78,124,114,.14); }
.tm-page .tm-emojigrid { flex:1; overflow-y:auto; padding:8px 10px 12px; }
.tm-page .tm-emojigl { font-size:10.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--mh-muted); padding:4px 2px 6px; }
.tm-page .tm-emojirow { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; }
.tm-page .tm-emojirow button { aspect-ratio:1; border:none; background:none; border-radius:8px; font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-emojirow button:hover { background:var(--mh-cream-2); }
.tm-page .tm-emojinone { color:var(--mh-muted); font-size:13px; text-align:center; padding:24px 8px; }

/* ---- groups: body (messages + members panel) ---- */
/* ---- P3: GroupDetails drawer (group "!" -> WhatsApp-style panel; folds the
   existing add/remove/leave management; replaces the old inline members panel) ---- */
.tm-page .tm-gdscrim { position:absolute; inset:0; z-index:30; background:rgba(31,41,38,.30); display:flex; justify-content:flex-end; animation:tmGdFade .18s ease-out; }
@keyframes tmGdFade { from{ opacity:0; } to{ opacity:1; } }
.tm-page .tm-gd { width:340px; max-width:100%; height:100%; background:var(--mh-surface); box-shadow:-14px 0 44px rgba(31,41,38,.20); display:flex; flex-direction:column; animation:tmGdSlide .26s cubic-bezier(.2,.8,.3,1); }
@keyframes tmGdSlide { from{ transform:translateX(100%); } to{ transform:none; } }
.tm-page .tm-gdtop { display:flex; align-items:center; padding:16px 18px; border-bottom:1px solid var(--mh-line-cool); flex:none; }
.tm-page .tm-gdtop h3 { flex:1; font-family:var(--mh-font-head); font-size:17px; font-weight:700; color:var(--mh-ink); }
.tm-page .tm-gdbody { flex:1; overflow-y:auto; }
.tm-page .tm-gdhero { display:flex; flex-direction:column; align-items:center; text-align:center; padding:24px 22px 20px; border-bottom:1px solid var(--mh-line-cool); }
.tm-page .tm-gav.xl { width:78px; height:78px; border-radius:24px; margin-bottom:13px; }
.tm-page .tm-gav.xl svg { width:34px; height:34px; }
.tm-page .tm-gdname { font-family:var(--mh-font-head); font-size:22px; font-weight:700; color:var(--mh-ink); letter-spacing:-0.02em; }
.tm-page .tm-gdmeta { font-size:13px; color:var(--mh-muted); margin-top:5px; }
.tm-page .tm-gdsec { padding:16px 20px; border-bottom:1px solid var(--mh-line-cool); }
.tm-page .tm-gdsec h4 { font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mh-muted); font-weight:700; margin-bottom:11px; }
.tm-page .tm-gdsechead { display:flex; align-items:center; }
.tm-page .tm-gdsechead h4 { flex:1; margin-bottom:0; }
.tm-page .tm-gdabout { font-size:14px; color:var(--mh-slate); line-height:1.55; }
.tm-page .tm-gdmlist { display:flex; flex-direction:column; gap:2px; margin-top:2px; }
.tm-page .tm-gdmem { display:flex; align-items:center; gap:11px; padding:8px; border-radius:12px; }
.tm-page .tm-gdmem:hover { background:var(--mh-cream-2); }
.tm-page .tm-gdmem .tm-meta { flex:1; min-width:0; display:flex; align-items:center; gap:7px; }
.tm-page .tm-gdmem:hover .tm-memx { opacity:.7; }
.tm-page .tm-gdleave { display:flex; align-items:center; justify-content:center; gap:8px; margin:16px 20px 22px; width:calc(100% - 40px); height:46px; border-radius:13px; border:1.5px solid rgba(176,70,60,.32); color:var(--mh-danger,#B0463C); font:inherit; font-size:14px; font-weight:700; background:none; cursor:pointer; transition:.14s; }
.tm-page .tm-gdleave:hover { background:rgba(176,70,60,.08); }
.tm-page .tm-gdleave svg { width:16px; height:16px; }
/* KICKOFF 21: creator/admin "Delete group" + two-step confirm. Filled-danger Delete
   (heavier than the outlined Leave) so the destructive action reads distinctly. */
.tm-page .tm-gddelete { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 20px 22px; width:calc(100% - 40px); height:46px; border-radius:13px; border:none; color:#fff; font:inherit; font-size:14px; font-weight:700; background:var(--mh-danger,#B0463C); cursor:pointer; transition:.14s; }
.tm-page .tm-gddelete:hover { filter:brightness(1.05); }
.tm-page .tm-gddelete:disabled { opacity:.6; cursor:default; filter:none; }
.tm-page .tm-gddelete svg { width:16px; height:16px; }
.tm-page .tm-gdconfirm { margin:0 20px 22px; padding:14px 15px; border-radius:13px; border:1.5px solid rgba(176,70,60,.32); background:rgba(176,70,60,.06); }
.tm-page .tm-gdconfirm p { font-size:13px; font-weight:600; color:var(--mh-ink); margin:0 0 12px; line-height:1.45; }
.tm-page .tm-gdconfirm-acts { display:flex; gap:9px; }
.tm-page .tm-gdconfirm-acts .tm-gdcancel { flex:1; height:40px; border-radius:11px; border:1px solid var(--mh-line); background:var(--mh-ctrl-fill); color:var(--mh-ink); font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.14s; }
.tm-page .tm-gdconfirm-acts .tm-gdcancel:hover { background:var(--mh-surface); }
.tm-page .tm-gdconfirm-acts .tm-gddelete { flex:1; margin:0; width:auto; height:40px; }
/* reused member-item bits */
.tm-page .tm-addmem { width:28px; height:28px; border:none; background:var(--mh-cream-2); border-radius:9px; color:var(--mh-green-d); cursor:pointer; display:grid; place-items:center; }
.tm-page .tm-addmem:hover { background:rgba(78,124,114,.16); }
.tm-page .tm-addmem svg { width:15px; height:15px; }
.tm-page .tm-leadtag { font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--mh-green-d); background:rgba(78,124,114,.14); border-radius:999px; padding:2px 7px; }
.tm-page .tm-memx { flex:none; width:24px; height:24px; border:none; background:none; border-radius:7px; color:var(--mh-muted); cursor:pointer; opacity:0; transition:.12s; display:grid; place-items:center; }
.tm-page .tm-memx:hover { background:var(--mh-cream-2); color:var(--mh-danger,#C0492F); opacity:1; }
.tm-page .tm-memx svg { width:14px; height:14px; }

/* group message sender header (avatar + name) */
.tm-page .tm-sender { display:flex; align-items:center; gap:7px; margin:2px 0 1px 2px; cursor:pointer; }
.tm-page .tm-sendernm { font-size:11.5px; font-weight:700; color:var(--mh-green-d); }

/* ---- pointer cursor on clickable users (P3 surfaces hovercards) ---- */
.tm-page .tm-userclick, .tm-page .tm-mwrap.dm .tm-bava, .tm-page .tm-sender .tm-av { cursor:pointer; }

/* ---- New Group / Add Member modal (unchanged this phase; re-skin is P2) ---- */
.tm-page ~ .tm-modalback, .tm-modalback { position:fixed; inset:0; z-index:120; background:rgba(31,41,38,.42); }
.tm-modal { position:fixed; z-index:121; top:50%; left:50%; transform:translate(-50%,-50%); width:min(460px,calc(94 * var(--mh-vw))); max-height:calc(90 * var(--mh-vh)); display:flex; flex-direction:column; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:18px; box-shadow:0 24px 60px rgba(31,41,38,.34); overflow:hidden; }
body.dark .tm-modal { background:var(--mh-surface); }
.tm-modalhead { display:flex; align-items:center; padding:18px 20px 14px; border-bottom:1px solid var(--mh-line-cool); }
.tm-modalhead h3 { flex:1; font-family:var(--mh-font-head); font-size:19px; color:var(--mh-ink); }
.tm-x { width:32px; height:32px; border:none; background:none; border-radius:9px; color:var(--mh-muted); cursor:pointer; display:grid; place-items:center; }
.tm-x:hover { background:var(--mh-cream-2); }
.tm-x svg { width:18px; height:18px; }
.tm-modalbody { padding:16px 20px; overflow-y:auto; }
.tm-fld { display:block; margin-bottom:16px; }
.tm-fld > span { display:block; font-size:12px; font-weight:700; color:var(--mh-muted); margin-bottom:7px; }
.tm-fld input { width:100%; height:40px; border:1px solid var(--mh-line-cool); border-radius:11px; background:var(--mh-cream-2); padding:0 13px; font:inherit; font-size:14px; color:var(--mh-ink); outline:none; }
.tm-fld input:focus { border-color:var(--mh-green); }
.tm-swatches { display:flex; gap:8px; }
.tm-swatch { width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; }
.tm-swatch.on { border-color:var(--mh-ink); box-shadow:0 0 0 2px var(--mh-surface) inset; }
.tm-pickersearch { margin-bottom:8px; }
.tm-picker { max-height:230px; overflow-y:auto; border:1px solid var(--mh-line-cool); border-radius:12px; padding:6px; }
.tm-pickrow { display:flex; align-items:center; gap:10px; width:100%; padding:7px 8px; border:none; background:none; border-radius:9px; cursor:pointer; text-align:left; }
.tm-pickrow:hover { background:var(--mh-cream-2); }
.tm-pickrow.on { background:rgba(78,124,114,.12); }
.tm-pickrow .tm-nm { flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--mh-ink); }
.tm-check { flex:none; width:22px; height:22px; display:grid; place-items:center; color:var(--mh-green-d); }
.tm-check svg { width:16px; height:16px; }
.tm-check.add { color:var(--mh-muted); }
.tm-modalfoot { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid var(--mh-line-cool); }
.tm-btn { padding:9px 18px; border-radius:11px; font:inherit; font-size:14px; font-weight:700; cursor:pointer; border:1px solid var(--mh-line-cool); }
.tm-btn.ghost { background:none; color:var(--mh-ink); }
.tm-btn.ghost:hover { background:var(--mh-cream-2); }
.tm-btn.primary { background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d)); color:#fff; border-color:transparent; }
.tm-btn.primary:hover { filter:brightness(1.07); }
.tm-btn.primary:disabled { opacity:.45; cursor:default; filter:none; }

/* modal-scoped primitives (modals render OUTSIDE .tm-page, so the .tm-page avatar/
   search rules do not reach them) */
.tm-modal .tm-av { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:14px; flex:none; position:relative; background-size:cover; background-position:center; }
.tm-modal .tm-av.sm { width:38px; height:38px; font-size:13px; }
.tm-modal .tm-search { display:flex; align-items:center; gap:11px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); border-radius:23px; padding:0 16px; height:46px; transition:border-color .14s, box-shadow .14s; }
.tm-modal .tm-search:focus-within { border-color:var(--mh-green); box-shadow:0 0 0 3px rgba(78,124,114,.12); }
.tm-modal .tm-search svg { width:17px; height:17px; color:var(--mh-muted); }
.tm-modal .tm-search input { flex:1; border:none; background:none; outline:none; font:inherit; font-size:14px; color:var(--mh-ink); }
.tm-modal .tm-roster-empty { padding:22px 14px; color:var(--mh-muted); font-size:13px; text-align:center; }

/* Editorial modal skin (.m3): rounded, eyebrow, live preview, pill inputs */
.tm-modal.tm-modal-m3 { border-radius:26px; width:min(560px,calc(94 * var(--mh-vw))); }
.tm-modal-m3 .tm-modalhead { align-items:flex-start; padding:26px 28px 4px; border-bottom:none; }
.tm-modal-m3 .tm-modalhead > div { flex:1; min-width:0; }
.tm-modal-m3 .tm-eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mh-green-d); font-weight:700; }
.tm-modal-m3 .tm-modalhead h3 { font-size:26px; margin-top:7px; }
.tm-modal-m3 .tm-x { width:38px; height:38px; border-radius:50%; background:var(--mh-cream-2); flex:none; }
.tm-modal-m3 .tm-preview { display:flex; align-items:center; gap:15px; margin:18px 28px 0; padding:16px; border-radius:18px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); }
.tm-modal-m3 .tm-pav { width:56px; height:56px; border-radius:18px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:18px; flex:none; }
.tm-modal-m3 .tm-pnm { font-size:16px; font-weight:700; color:var(--mh-ink); }
.tm-modal-m3 .tm-pmeta { font-size:13px; color:var(--mh-muted); margin-top:3px; }
.tm-modal-m3 .tm-modalbody { padding:20px 28px; }
.tm-modal-m3 .tm-fld input { height:48px; border-radius:24px; padding:0 18px; }
.tm-modal-m3 .tm-pickersearch { margin-bottom:10px; }
.tm-modal-m3 .tm-picker { border-radius:18px; padding:6px; }
.tm-modal-m3 .tm-pickrow { border-radius:14px; padding:9px 11px; }
.tm-modal-m3 .tm-modalfoot { padding:18px 28px 22px; }
.tm-modal-m3 .tm-btn { height:48px; border-radius:24px; padding:0 24px; }

/* ===========================================================================
   KICKOFF 07 - SINGLE-BOX inputs across every Teams field.
   For the icon fields the WRAPPER (.tm-search / .tm-me-statusedit) is the ONLY
   visible box; the <input> draws nothing of its own. This out-specifies the
   global .mh-app control base (mh-theme.css :is(input...) ) AND its :focus ring,
   which otherwise gave each input its own border/background/radius + a thick
   teal focus ring nested inside the wrapper ("a field inside a field"). Focus
   lives ONLY on the wrapper via :focus-within - one subtle cool->pine shift,
   identical on every field. Specificity: .mh-app + 2 classes + element (+ :focus)
   beats the global :is() base (0,2,1) and its :focus rule (0,3,1). */
.mh-app .tm-page .tm-search input,
.mh-app .tm-page .tm-me-statusedit input,
.mh-app .tm-modal .tm-search input,
.mh-app .tm-page .tm-search input:focus,
.mh-app .tm-page .tm-me-statusedit input:focus,
.mh-app .tm-modal .tm-search input:focus {
  width:100%; padding:0; margin:0;
  border:none; outline:none; box-shadow:none; background:transparent; border-radius:0;
}

/* Group name has no icon wrapper, so the <input> itself is the single tidy box:
   one cool border, the m3 radius/height kept, and the SAME subtle focus as every
   wrapper above (never the thick global teal ring). Direct child only (>) so the
   nested member-search input inside the same .tm-fld stays boxless (its wrapper
   is the box, handled by the reset above). */
.mh-app .tm-modal .tm-fld > input {
  border:1px solid var(--mh-line-cool); background:var(--mh-cream-2);
  outline:none; box-shadow:none; transition:border-color .14s, box-shadow .14s;
}
.mh-app .tm-modal .tm-fld > input:focus {
  border-color:var(--mh-green); background:var(--mh-cream-2);
  box-shadow:0 0 0 3px rgba(78,124,114,.12);
}

/* ---- DM bubble side-avatar (messenger layout) ---- */
.tm-page .tm-mwrap.dm { flex-direction:row; align-items:flex-end; gap:8px; max-width:76%; }
.tm-page .tm-mwrap.dm.me { flex-direction:row-reverse; }
.tm-page .tm-mwrap.dm .tm-bava { flex:none; align-self:flex-end; margin-bottom:1px; }
.tm-page .tm-mwrap.dm .tm-bcol { display:flex; flex-direction:column; gap:3px; min-width:0; max-width:calc(100% - 42px); }
.tm-page .tm-mwrap.dm.me .tm-bcol { align-items:flex-end; }
.tm-page .tm-mwrap.dm.them .tm-bcol { align-items:flex-start; }

/* ---- Messenger-style DM grouping (dmflow) ----------------------------------
   One avatar per consecutive same-sender run (at the BOTTOM of the run); own
   messages have no avatar. Tight spacing WITHIN a run, clear separation BETWEEN
   runs; connected (stacked) inner corners. Scoped to the DM list so the group
   view is untouched. */
.tm-page .tm-msgs.dmflow { gap:3px; }
/* dynamic bubble cap: sizes to content up to ~70% of the chat column */
.tm-page .tm-msgs.dmflow .tm-mwrap { max-width:70%; }
.tm-page .tm-msgs.dmflow .tm-mwrap.dm { max-width:70%; }
/* The other-person bubble sits inside a shrink-to-fit avatar ROW, so a PERCENTAGE
   max-width there resolves against an indefinite width and collapses a short bubble
   below its own word. Reset the column to hug content and cap the bubble with a
   DEFINITE value (ch/vw) so short words never split; long text still wraps at word
   boundaries within the cap. (The own-side bubble already works via .tm-msg fit-content.) */
.tm-page .tm-msgs.dmflow .tm-mwrap.dm .tm-bcol { flex:0 1 auto; width:auto; min-width:0; max-width:100%; }
.tm-page .tm-msgs.dmflow .tm-mwrap.dm.them .tm-msg { max-width:min(calc(70 * var(--mh-vw)), 62ch); }
.tm-page .tm-msgs.dmflow .tm-mwrap.grpstart { margin-top:12px; }
.tm-page .tm-msgs.dmflow .tm-daysep { margin-top:10px; }
/* avatar-width placeholder so bubbles above the avatar stay aligned (xs = 30px) */
.tm-page .tm-mwrap.dm .tm-bava-spacer { flex:none; width:30px; height:1px; align-self:flex-end; }
/* stacked corners: square the side where a bubble connects to its run neighbour */
.tm-page .tm-msgs.dmflow .tm-mwrap.them:not(.grpstart) .tm-msg.them { border-top-left-radius:7px; }
.tm-page .tm-msgs.dmflow .tm-mwrap.them:not(.grpend) .tm-msg.them { border-bottom-left-radius:7px; }
.tm-page .tm-msgs.dmflow .tm-mwrap.me:not(.grpstart) .tm-msg.me { border-top-right-radius:7px; }
.tm-page .tm-msgs.dmflow .tm-mwrap.me:not(.grpend) .tm-msg.me { border-bottom-right-radius:7px; }
/* Messenger polish: the just-arrived peer message's grouped avatar SLIDES DOWN into its
   new bottom-of-run spot (keyframe plays once on render; only the marked avatar carries
   this class, so nothing animates on initial load). Fixed ~34px slide (approx one row). */
@keyframes tm-bava-drop {
  from { transform:translateY(-34px); opacity:.35; }
  to   { transform:translateY(0);     opacity:1;   }
}
.tm-page .tm-mwrap.dm.them .tm-bava.tm-bava-drop { animation:tm-bava-drop .28s ease-out both; }

/* ---- date/time chip + scheduled badge (preserved) ---- */
.tm-page .tm-datechip { cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; font-weight:600; border-radius:4px; padding:0 2px; }
.tm-page .tm-msg.them .tm-datechip { color:var(--mh-green-d); background:rgba(78,124,114,.10); }
.tm-page .tm-msg.them .tm-datechip:hover { background:rgba(78,124,114,.22); }
.tm-page .tm-msg.me .tm-datechip { color:#fff; background:rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))); }
.tm-page .tm-msg.me .tm-datechip:hover { background:rgba(var(--tg-rgb,255,255,255),calc(.32*var(--tg-k,1))); }
.tm-page .tm-schedbadge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--mh-green-d); background:rgba(78,124,114,.12); border:1px solid var(--mh-line-cool); border-radius:999px; padding:3px 9px; margin-top:2px; }
.tm-page .tm-schedbadge svg { width:12px; height:12px; }

/* ---- READ RECEIPTS (CEO, Aug 14 2026) -------------------------------------------
   "below our message the delivered and read message must be present like WhatsApp".

   Sits UNDER my own bubble, inside .tm-bcol, which is already a flex column with
   align-items:flex-end on my side - so it lands under the right-hand edge of the
   bubble with no positioning of its own.

   THE THREE STATES MUST BE TELLABLE APART AT A GLANCE, and colour alone is not
   enough to do that - roughly one man in twelve cannot separate a grey tick from a
   green one reliably, and this is a work tool. So each state differs in SHAPE as
   well as colour: one tick for Sent, two for Delivered and Read, and Read is the
   only one that is filled with the brand pine and weighted. The newest message also
   carries the word, and every one of them carries a title tooltip.
   ---------------------------------------------------------------------------------- */
.tm-page .tm-rcpt {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 1px; padding: 0 2px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  line-height: 1; user-select: none; cursor: default;
}
.tm-page .tm-rcpt-t { width: 13px; height: 13px; flex: none; }
/* The two-tick mark carries a wider viewBox (29 vs 24) so the pair is not squeezed.
   THE GAP IS DELIBERATELY HAIRLINE - about half a pixel. Three settings were tried
   against the CEO's eye: overlapping (the original, which fused into ONE thick tick
   at this size), 1.6px (his verdict: "you add more space now it's not looks good"),
   and this. The mark has to read as two ticks without reading as two separate
   symbols, which is exactly the balance WhatsApp strikes. */
.tm-page .tm-rcpt-t2 { width: 16px; }

/* Sent - one tick, quiet. It is in the database and waiting for them. */
.tm-page .tm-rcpt.sent { color: var(--mh-muted, #8A8B83); }

/* Delivered - two ticks, still quiet. Their session has been live since it was sent. */
.tm-page .tm-rcpt.delivered { color: var(--mh-muted, #8A8B83); }

/* Read - two ticks in brand pine, and the only state that is weighted. This is the
   one people look for, so it is the one that reads from across a desk. */
.tm-page .tm-rcpt.read { color: var(--mh-green-d, #3D655D); }
.tm-page .tm-rcpt.read .tm-rcpt-t { stroke-width: 3; }
.tm-page .tm-rcpt.read .tm-rcpt-w { font-weight: 800; }

/* Dark mode: the muted token already flips, but pine on a dark ground needs the
   lighter brand step to keep its contrast. */
body.dark .tm-page .tm-rcpt.read { color: var(--mh-green, #4E7C72); filter: brightness(1.35); }

/* ---- Phase 5: @mention pill (theme via CSS vars -> light + dark both work). Toned for
   each bubble: pine on an incoming bubble, translucent white on the author's green one. ---- */
.tm-page .mh-mention { font-weight:700; border-radius:5px; padding:0 4px; white-space:nowrap; }
.tm-page .tm-msg.them .mh-mention { color:var(--mh-green-d); background:rgba(78,124,114,.14); }
.tm-page .tm-msg.me .mh-mention { color:#fff; background:rgba(var(--tg-rgb,255,255,255),calc(.22*var(--tg-k,1))); }

/* ---- Phase 5: @mention picker, floated above the composer (absolute -> stays out of the
   composer flex row). Mouse-down is prevented in markup so a click never blurs the input. ---- */
.tm-page .tm-compose { position:relative; }
/* Width fits the WIDEST name (max-content up to a cap), left-anchored to the composer.
   Vertical side is chosen by JS (MHmentions.place): .mh-pop-above / .mh-pop-below; the
   default here (above) covers the common bottom-of-page composer before JS runs. The tail
   pseudo-elements sit OUTSIDE the box, so the pop is overflow:visible and the SCROLL lives on
   an inner wrapper (.tm-mentionscroll) - otherwise overflow:auto would clip the tail. */
.tm-page .tm-mentionpop { position:absolute; left:12px; width:max-content; min-width:168px; max-width:min(340px,calc(78 * var(--mh-vw))); top:auto; bottom:calc(100% + 11px); z-index:60; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:14px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:visible; }
.tm-page .tm-mentionpop.mh-pop-above { top:auto; bottom:calc(100% + 11px); }
.tm-page .tm-mentionpop.mh-pop-below { bottom:auto; top:calc(100% + 11px); }
.tm-page .tm-mentionscroll { max-height:258px; overflow-y:auto; padding:6px; }
.tm-page .tm-mentionopt { display:flex; align-items:center; justify-content:flex-start; gap:10px; width:100%; padding:7px 9px; border:none; border-radius:11px; background:none; cursor:pointer; text-align:left; color:var(--mh-ink); font:inherit; }
.tm-page .tm-mentionopt:hover, .tm-page .tm-mentionopt.on { background:rgba(78,124,114,.12); }
.tm-page .tm-mentionav { width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700; font-size:12px; background-size:cover; background-position:center; }
.tm-page .tm-mentionnm { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Tail: points DOWN when the menu is above the composer, UP when below (social-style). */
.tm-page .tm-mentionpop.mh-pop-above::before, .tm-page .tm-mentionpop.mh-pop-below::before { content:""; position:absolute; left:21px; width:0; height:0; border:9px solid transparent; }
.tm-page .tm-mentionpop.mh-pop-above::after, .tm-page .tm-mentionpop.mh-pop-below::after { content:""; position:absolute; left:22px; width:0; height:0; border:8px solid transparent; }
.tm-page .tm-mentionpop.mh-pop-above::before { top:100%; border-bottom:0; border-top-color:var(--mh-line-cool); }
.tm-page .tm-mentionpop.mh-pop-above::after { top:100%; border-bottom:0; border-top-color:var(--mh-surface); }
.tm-page .tm-mentionpop.mh-pop-below::before { bottom:100%; border-top:0; border-bottom-color:var(--mh-line-cool); }
.tm-page .tm-mentionpop.mh-pop-below::after { bottom:100%; border-top:0; border-bottom-color:var(--mh-surface); }

/* ---- P3: user info card (minimal hovercard / compact profile card). Positioned at
   the click via MHchat.placeCard; Esc + outside-click close. ---- */
.tm-cardback { position:fixed; inset:0; z-index:130; border:none; background:transparent; cursor:default; }
.tm-uprof { position:fixed; z-index:131; left:0; top:0; width:286px; background:var(--mh-surface); border:1px solid var(--mh-line-cool); border-radius:18px; box-shadow:var(--mh-shadow-lg,0 24px 60px rgba(52,69,77,.16)); overflow:hidden; animation:tmUpPop .15s cubic-bezier(.2,.9,.3,1.1); }
@keyframes tmUpPop { from{ opacity:0; transform:scale(.96) translateY(5px); } to{ opacity:1; transform:none; } }
.tm-uprof .tm-upcover { height:56px; width:100%; }
.tm-uprof .tm-upav { position:absolute; top:30px; left:18px; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:800; font-size:18px; border:3px solid var(--mh-surface); background-size:cover; background-position:center; }
.tm-uprof .tm-updot { position:absolute; right:0; bottom:1px; width:14px; height:14px; border-radius:50%; border:2.5px solid var(--mh-surface); }
.tm-uprof .tm-uphead { padding:14px 18px 0; margin-top:16px; }
.tm-uprof .tm-upname { font-family:var(--mh-font-head); font-size:18px; font-weight:700; color:var(--mh-ink); letter-spacing:-0.01em; }
.tm-uprof .tm-upstatus { display:inline-flex; align-items:center; gap:7px; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--mh-slate); background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); padding:4px 11px; border-radius:20px; }
.tm-uprof .tm-upstatus .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.tm-uprof .tm-upstatus.na { color:var(--mh-muted); }
.tm-uprof .tm-upnote { display:flex; align-items:flex-start; gap:9px; margin:13px 18px 0; padding:11px 13px; background:var(--mh-cream-2); border:1px solid var(--mh-line-cool); border-radius:13px; font-size:13.5px; color:var(--mh-ink); font-weight:500; line-height:1.4; }
.tm-uprof .tm-upnote .si { color:#D89B3D; flex:none; display:grid; place-items:center; margin-top:1px; }
.tm-uprof .tm-upnote .si svg { width:16px; height:16px; }
.tm-uprof.mini .tm-upnote { margin-bottom:16px; }
.tm-uprof.full .tm-upnote { margin-bottom:0; }
.tm-uprof.mini { padding-bottom:16px; }
.tm-uprof .tm-upmeta { padding:14px 18px 18px; display:flex; flex-direction:column; gap:11px; }
.tm-uprof .tm-uprow { display:flex; align-items:center; gap:11px; font-size:13.5px; color:var(--mh-slate); }
.tm-uprof .tm-uprow .ic { width:30px; height:30px; border-radius:9px; background:var(--mh-cream-2); color:var(--mh-green-d); display:grid; place-items:center; flex:none; }
.tm-uprof .tm-uprow .ic svg { width:16px; height:16px; }

@media(max-width:900px){
  .tm-page { flex-direction:column; height:auto; }
  .tm-page .tm-list { width:100%; }
  .tm-page .tm-chat { min-height:480px; }
  .tm-page .tm-gd { width:100%; }
}

/* STEP 1d: event-draft resume pill in the roster header (appears only when a draft exists). */

/* ---------------------------------------------------------------------------
   T1 (CEO, Aug 5 2026) - THE PHOTO IS A LAYER, NOT THE BACKGROUND.
   The avatar used to BE the photo (background-image + color:transparent) and the
   initials were rendered only when there was no photo on file. A CSS background
   has no error event and is never retried, so one failed fetch left a blank
   tinted circle with nothing underneath - and only re-creating the element (a tab
   switch) ever tried again. That is exactly the bug that was reported.
   Now: the tint + initials are always there, and this <img> sits on top. If the
   bytes are missing its onerror removes it and the initials show through.
   It covers the whole circle and inherits the radius, so every size variant
   (.sm / .xs / .bb / .tm-upav / .tm-mentionav / .tm-modal .tm-av) is handled by
   this one rule - they differ only in width/height/radius, which it inherits.
   z-index 0 keeps it UNDER the presence dot, which is z-index 1 below.
   --------------------------------------------------------------------------- */
.mh-app .tm-avimg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:inherit; display:block;
  z-index:0; pointer-events:none; user-select:none;
}
/* The dot is meaning, not decoration - it stays above the photo. */
.mh-app .tm-av .tm-dot, .mh-app .tm-uprof .tm-updot { z-index:1; }
/* .tm-av, .tm-upav and .tm-modal .tm-av already declare position:relative, and
   .bb is already position:absolute (the ring spots place it), so all of those
   anchor an inset:0 child on their own. .tm-mentionav declares neither. */
.mh-app .tm-page .tm-mentionav { position:relative; }

/* T2 (Aug 5 2026): "last seen" under the status line on the profile card. Quiet by
   design - it is context, not the headline; the status pill above is the headline.
   Rendered only when the person is OFFLINE and we have actually seen them. */
.mh-app .tm-uprof .tm-upseen {
  margin-top:6px; font-size:12px; font-weight:500; color:var(--mh-muted);
  letter-spacing:.005em;
}

/* T4 (Aug 5 2026): the profile-card portrait is the photo-zoom target. Cursor + a small
   lift so it reads as clickable; the transform is on the AVATAR, which is a leaf here
   (the dot is its only child and rides with it), so it traps nothing - unlike the wizard
   photo-menu case where a hover transform buried the popup inside it. */
.mh-app .tm-uprof .tm-upav-zoom { cursor:zoom-in; transition:transform .12s ease, box-shadow .12s ease; }
.mh-app .tm-uprof .tm-upav-zoom:hover { transform:scale(1.04); box-shadow:0 6px 18px rgba(40,60,80,.28); }
.mh-app .tm-uprof .tm-upav-zoom:focus-visible { outline:2px solid var(--mh-green); outline-offset:3px; }
/* Initials sit UNDER the zoomed photo in the lightbox, same rule as the small avatars:
   if the bytes are missing the img hides itself and these show through. */
.mh-app .plb-circle .tm-lbinitials { position:absolute; inset:0; display:grid; place-items:center;
  font-size:130px; font-weight:800; letter-spacing:3px; line-height:1; color:#fff; }

/* =============================================================================
   T5 (CEO, Aug 5 2026) - TEAMS ONTO THE STANDARD FIELD KIT.
   "Teams still uses OLD controls." It did: its fields were cream pills with a
   pine focus ring, from before the app adopted the Inset Cool Field Kit
   ([[mh-inset-cool-field-kit]] / [[mh-default-field-standard]]). Every other
   surface now RECESSES a control into the canvas at rest and LIFTS IT TO WHITE
   on focus. These rules bring Teams to that standard.

   BLAST RADIUS - what else moves, stated before the change (shared-component law):
     * .tm-search is used in FOUR places: the sidebar search AND the three modal
       pickers (New Group members / Add Member / Message Someone), which share
       byte-identical .tm-search.tm-pickersearch markup. All four restyle. Intended.
     * Everything here is scoped to .tm-page or .tm-modal. NOTHING outside the
       Teams page or its modals is touched - no other screen shares these classes.
     * The KICKOFF 07/08 "single box" resets stay exactly as they are: the visible
       box must remain the WRAPPER only, never wrapper + the input's own box.

   Tokens are declared locally rather than imported, matching how detail-view.css
   and enroll-wizard.css each declare their own - same VALUES, so the recess, the
   lift and the dark variants are identical to every other field in the app.
   ============================================================================= */
.mh-app .tm-page, .mh-app .tm-modal {
  --f-rest-bg:#DFE4EA; --f-rest-bd:rgba(40,60,80,.10); --f-rest-sh:inset 0 1px 2px rgba(40,60,80,.10);
  --f-hover-bg:#E6EAEF;
  --f-focus-bg:#FFFFFF; --f-focus-bd:rgba(40,60,80,.16); --f-focus-sh:0 10px 28px rgba(40,60,80,.14);
  --f-t:.16s ease;
}
[data-theme="dark"] .mh-app .tm-page, [data-theme="dark"] .mh-app .tm-modal,
.mh-app.dark .tm-page, .mh-app.dark .tm-modal {
  --f-rest-bg:#121A20; --f-rest-bd:rgba(180,210,235,.10); --f-rest-sh:inset 0 1px 2px rgba(0,0,0,.4);
  --f-hover-bg:#172128;
  --f-focus-bg:#222E38; --f-focus-bd:rgba(150,190,225,.28); --f-focus-sh:0 12px 30px rgba(0,0,0,.5);
}

/* ---- the recessed shell, applied to every Teams field ---- */
.mh-app .tm-page .tm-searchrow .tm-search,
.mh-app .tm-page .tm-me-statusadd,
.mh-app .tm-page .tm-me-statusshow,
.mh-app .tm-page .tm-me-statusedit,
.mh-app .tm-page .tm-compose,
.mh-app .tm-modal .tm-search,
.mh-app .tm-modal .tm-fld > input {
  background:var(--f-rest-bg);
  border:1px solid var(--f-rest-bd);
  box-shadow:var(--f-rest-sh);
  transition:background var(--f-t), border-color var(--f-t), box-shadow var(--f-t);
}
/* Hover only when NOT focused - a focused field is already lifted, and re-tinting
   it on hover reads as the focus being lost. */
.mh-app .tm-page .tm-searchrow .tm-search:hover:not(:focus-within),
.mh-app .tm-page .tm-me-statusedit:hover:not(:focus-within),
.mh-app .tm-page .tm-compose:hover:not(:focus-within),
.mh-app .tm-modal .tm-search:hover:not(:focus-within),
.mh-app .tm-modal .tm-fld > input:hover:not(:focus) { background:var(--f-hover-bg); }
.mh-app .tm-page .tm-me-statusadd:hover,
.mh-app .tm-page .tm-me-statusshow:hover { background:var(--f-hover-bg); border-color:var(--f-rest-bd); }

/* LIFT TO WHITE. This replaces the old pine ring
   (border-color:var(--mh-green) + 0 0 0 3px rgba(78,124,114,.12)) everywhere. */
.mh-app .tm-page .tm-searchrow .tm-search:focus-within,
.mh-app .tm-page .tm-me-statusedit:focus-within,
.mh-app .tm-page .tm-compose:focus-within,
.mh-app .tm-modal .tm-search:focus-within,
.mh-app .tm-modal .tm-fld > input:focus {
  background:var(--f-focus-bg);
  border-color:var(--f-focus-bd);
  box-shadow:var(--f-focus-sh);
}

/* The status dropdown is a CONTROL, not a chip - same recess, and .open counts as
   focus because the menu is what the user is looking at. */
.mh-app .tm-page .tm-me-status {
  background:var(--f-rest-bg); border-color:var(--f-rest-bd); box-shadow:var(--f-rest-sh);
  transition:background var(--f-t), border-color var(--f-t), box-shadow var(--f-t);
}
.mh-app .tm-page .tm-me-status:hover { background:var(--f-hover-bg); border-color:var(--f-rest-bd); color:var(--mh-ink); }
.mh-app .tm-page .tm-me-status.open {
  background:var(--f-focus-bg); border-color:var(--f-focus-bd); box-shadow:var(--f-focus-sh); color:var(--mh-ink);
}
/* Keyboard parity - a control reachable by Tab must show it, and :focus-visible
   never fires on a mouse click, so this costs the mouse user nothing. */
.mh-app .tm-page .tm-me-status:focus-visible,
.mh-app .tm-page .tm-me-statusadd:focus-visible,
.mh-app .tm-page .tm-me-statusshow:focus-visible {
  background:var(--f-focus-bg); border-color:var(--f-focus-bd); box-shadow:var(--f-focus-sh); outline:none;
}

/* ERROR PARITY. The kit requires a visible error face; Teams had none because it
   had no failing field yet. Declared now so the first one that needs it inherits
   the standard instead of inventing a red of its own. */
.mh-app .tm-page .tm-search.is-error,
.mh-app .tm-page .tm-compose.is-error,
.mh-app .tm-modal .tm-fld > input.is-error {
  border-color:#B0463C; box-shadow:0 0 0 3px rgba(176,70,60,.14);
}
/* LOCKED / read-only parity: recessed, dimmed, and it does not lift. */
.mh-app .tm-page .tm-search.is-locked,
.mh-app .tm-modal .tm-fld > input[readonly],
.mh-app .tm-modal .tm-fld > input:disabled {
  background:var(--f-rest-bg); opacity:.75; cursor:default; box-shadow:var(--f-rest-sh);
}
.mh-app .tm-modal .tm-fld > input[readonly]:focus,
.mh-app .tm-modal .tm-fld > input:disabled:focus { background:var(--f-rest-bg); box-shadow:var(--f-rest-sh); }


/* =====================================================================================================================
   TMFIELD01 - THE TEAMS POP-UPS ON THE STANDARD FIELD.  1 October 2026.
   His words: "the search the name fields there still getting our old interface fields ... turn it to our new standard
   looks fields". Create a Group, Add Members and Message someone drew the old grey pill input (.tm-fld / .tm-search).
   "Our new standard fields" = THE CLIENT RECORD'S MINT TILE (detail-view.css + client-detail-view.css, #mhDetail
   .mint-w / .mint-w.ed). These values are THAT tile's, rule for rule - the modal is not inside #mhDetail, so the Mint
   rules cannot reach it and the host tokens (--mint-lift, --mint-lift-sm) are declared here.
     TILE   glass .72, 16px corners, 12/16/14/30 padding, the pine dot at 14/17, small-caps label INSIDE the tile.
     EMPTY  dashed, .4 glass, hollow dot.        HOVER .85.
     FOCUS  solid white, pine border .55 + 3px ring, lifts 2px.
     INPUT  16px / 650 / 24px line, no box of its own - the tile IS the field. The app-wide .mh-app input rule paints a
            fill, border, focus ring and 12px corners on every input; it is stripped here for EVERY state (the "ghost").
   ===================================================================================================================== */
.tm-modal{
  --mint-lift:0 4px 10px -6px rgba(30,55,48,.16), 0 18px 38px -18px rgba(30,55,48,.30);
  --mint-lift-sm:0 3px 7px -4px rgba(30,55,48,.18), 0 10px 20px -10px rgba(30,55,48,.26);
}
body.dark .tm-modal{
  --mint-lift:0 4px 10px -6px rgba(0,0,0,.4), 0 18px 38px -18px rgba(0,0,0,.55);
  --mint-lift-sm:0 3px 7px -4px rgba(0,0,0,.5), 0 10px 20px -10px rgba(0,0,0,.6);
}
.tm-modal .tm-tiles{display:flex;flex-direction:column;gap:12px}
.tm-modal .tm-memblock{display:flex;flex-direction:column;gap:10px}

.tm-modal .mint-w{
  position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;margin:0;
  padding:12px 16px 14px 30px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.72*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);
  border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
  transition:transform .18s ease,box-shadow .18s ease,background .15s ease,border-color .15s ease;
  cursor:text;
}
.tm-modal .mint-w::before{
  content:"";position:absolute;left:14px;top:17px;width:7px;height:7px;border-radius:50%;
  background:#2F6B57;box-shadow:0 0 0 3px rgba(47,107,87,.16);
}
.tm-modal .mint-lb{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7A8A84;line-height:1.5}
.tm-modal .mint-w .mint-req{color:#C0473F;font-weight:800;margin-left:3px}
.tm-modal .mint-w.ed:hover{background:rgba(var(--tg-rgb,255,255,255),.85)}
.tm-modal .mint-w.ed.empty{
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));border-style:dashed;border-color:rgba(30,55,48,.18);box-shadow:none;
}
.tm-modal .mint-w.ed.empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(30,55,48,.22)}
.tm-modal .mint-w.ed:focus-within{
  background:rgb(var(--tg-rgb,255,255,255));border-style:solid;border-color:rgba(47,107,87,.55);
  box-shadow:0 0 0 3px rgba(47,107,87,.13), var(--mint-lift-sm);transform:translateY(-2px);
}
/* the value - and NO GHOST: every state of the app-wide input rule is stripped */
.tm-modal .mint-w.ed .mint-in,
.tm-modal .mint-w.ed .mint-in:hover,
.tm-modal .mint-w.ed .mint-in:focus,
.tm-modal .mint-w.ed .mint-in:focus-visible{
  display:block;width:100%;min-width:0;height:24px;
  padding:0;border:0;background:transparent;box-shadow:none;outline:0;border-radius:0;
  font-family:var(--font-sans,inherit);font-size:16px;font-weight:650;line-height:24px;letter-spacing:normal;color:#1C2A25;
  -webkit-appearance:none;appearance:none;
}
.tm-modal .mint-w.ed .mint-in::placeholder{color:#8A9A94;font-weight:650;opacity:1}

/* the colour tile holds the swatches as its value; the label stays the standard one */
.tm-modal .tm-colortile{cursor:default}
.tm-modal .tm-colortile .tm-swatches{padding-top:4px}

/* the list under a search tile: the same glass, a quiet scrollbar (no arrow buttons), and rows that lift like the
   option rows of a Mint dropdown (the tighter pair - a scroll box clips its own children; 6px padding holds it) */
.tm-modal .tm-picker,
.tm-modal.tm-modal-m3 .tm-picker{
  padding:6px;border-radius:16px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.55*var(--tg-k,1)));
  border:1px solid rgba(255,255,255,.85);border-right-color:var(--tg-edge-r,rgba(255,255,255,.85));border-bottom-color:var(--tg-edge-b,rgba(255,255,255,.85));
  box-shadow:0 6px 16px -12px rgba(30,55,48,.35);
}
/* a slim rounded scrollbar with NO arrow buttons (measured: "thin" still drew the Windows arrows in Chrome) */
.tm-modal .tm-picker::-webkit-scrollbar{width:10px}
.tm-modal .tm-picker::-webkit-scrollbar-button{display:none;width:0;height:0}
.tm-modal .tm-picker::-webkit-scrollbar-track{background:transparent;margin:10px 0}
.tm-modal .tm-picker::-webkit-scrollbar-thumb{background:rgba(30,55,48,.22);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
.tm-modal .tm-picker::-webkit-scrollbar-thumb:hover{background-color:rgba(30,55,48,.36)}
body.dark .tm-modal .tm-picker::-webkit-scrollbar-thumb{background-color:rgba(180,210,235,.25)}
.tm-modal .tm-pickrow{position:relative;border-radius:12px;transition:transform .18s ease,box-shadow .18s ease,background .15s ease}
.tm-modal .tm-pickrow:hover{
  z-index:1;background:rgba(var(--tg-rgb,255,255,255),.95);transform:translateY(-2px);
  box-shadow:0 2px 6px -3px rgba(30,55,48,.20),0 6px 12px -6px rgba(30,55,48,.28),inset 0 0 0 1px rgba(255,255,255,.9);
}
.tm-modal .tm-pickrow.on,
.tm-modal .tm-pickrow.on:hover{background:rgba(47,107,87,.14)}
.tm-modal .tm-pickrow:active{transform:translateY(0);box-shadow:0 1px 3px -2px rgba(30,55,48,.22),inset 0 0 0 1px rgba(255,255,255,.7)}

/* DARK - the Mint tile's own dark values */
body.dark .tm-modal .mint-w{background:rgba(var(--tg-rgb,255,255,255),calc(.06*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:0 6px 16px -12px rgba(0,0,0,.55)}
body.dark .tm-modal .mint-w::before{background:#5FCFA4;box-shadow:0 0 0 3px rgba(95,207,164,.18)}
body.dark .tm-modal .mint-lb{color:#8C9AA5}
body.dark .tm-modal .mint-w.ed:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.1*var(--tg-k,1)))}
body.dark .tm-modal .mint-w.ed.empty{background:rgba(var(--tg-rgb,255,255,255),calc(.025*var(--tg-k,1)));border-color:rgba(180,210,235,.16)}
body.dark .tm-modal .mint-w.ed.empty::before{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(180,210,235,.3)}
body.dark .tm-modal .mint-w.ed:focus-within{background:rgba(var(--tg-rgb,255,255,255),calc(.14*var(--tg-k,1)));border-color:rgba(143,187,165,.6);box-shadow:0 0 0 3px rgba(143,187,165,.16), var(--mint-lift-sm)}
body.dark .tm-modal .mint-w.ed .mint-in,
body.dark .tm-modal .mint-w.ed .mint-in:focus{color:#EAF0F4}
body.dark .tm-modal .mint-w.ed .mint-in::placeholder{color:#6E7E88}
body.dark .tm-modal .tm-picker{background:rgba(var(--tg-rgb,255,255,255),calc(.04*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:none}
body.dark .tm-modal .tm-pickrow:hover{background:rgba(var(--tg-rgb,255,255,255),calc(.12*var(--tg-k,1)));box-shadow:0 2px 6px -3px rgba(0,0,0,.5),0 6px 12px -6px rgba(0,0,0,.6),inset 0 0 0 1px rgba(180,210,235,.16)}
body.dark .tm-modal .tm-pickrow.on,
body.dark .tm-modal .tm-pickrow.on:hover{background:rgba(143,187,165,.16)}
@media (prefers-reduced-motion: reduce){ .tm-modal .mint-w.ed:focus-within, .tm-modal .tm-pickrow:hover, .tm-modal .tm-pavw:hover .tm-pav{transform:none} }


/* =====================================================================================================================
   GRPPHOTO01 / GRPCOLOR01 - THE TEAMS WINDOWS ON THE NEW LOOK.  1 October 2026.
   His words: "the new group background still getting the old style please turn it to new look", "turn the Group
   profile color or picture to circle same as our photo studio", "the search fields must be ... same as the global
   search", "add the color picker ... like photoshop".
     WINDOW   the theme wallpaper (--mh-canvas + --mh-canvas-img), as every record and wizard pane (mh-themeglass 2d),
              with a white rim; header and footer clear on it. Dark keeps the dark surface (2d is light-only too).
     CARD     the preview is a Mint glass card (--mint-glass .4, blur 24, rim .72, the two-layer float).
     CIRCLE   the group's picture or colour, 64px ROUND, with the photo studio's clay camera badge.
     SEARCH   .bigbar.b14 at the global search's own size (42 / 0 16 / gap 12 / 22px icon / 14px) and its own glass,
              pine ring and placeholder (mh-weather.css TRIAL rule), the search icon where the global one has the logo.
     FOOTER   the record footer pair, value for value (48px, 12px, 14.5/700): glass secondary, Mint gradient primary.
   ===================================================================================================================== */
body:not(.dark) .tm-modal.tm-glass{
  background-color:var(--mh-canvas,#E1E6EB);
  background-image:var(--mh-canvas-img,none);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 30px 80px -24px rgba(20,40,34,.45),0 8px 22px -12px rgba(20,40,34,.25);
}
.tm-modal.tm-glass .tm-modalhead{background:transparent}
.tm-modal.tm-glass .tm-modalfoot{background:transparent;border-top:1px solid rgba(255,255,255,.55)}
body.dark .tm-modal.tm-glass .tm-modalfoot{border-top-color:rgba(180,210,235,.12)}
.tm-modal.tm-glass .tm-x{
  background:rgba(var(--tg-rgb,255,255,255),calc(.58*var(--tg-k,1)));border:1px solid rgba(255,255,255,.72);
  box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26);
  transition:transform .18s ease,box-shadow .18s ease,background .15s ease;
}
.tm-modal.tm-glass .tm-x:hover{background:rgba(255,255,255,.85);transform:translateY(-2px)}
body.dark .tm-modal.tm-glass .tm-x{background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)));border-color:rgba(180,210,235,.14)}

/* ---- the preview: a Mint glass card ---- */
.tm-modal.tm-glass .tm-preview{
  gap:16px;padding:16px 18px;border-radius:20px;
  background:rgba(var(--tg-rgb,255,255,255),calc(.4*var(--tg-k,1)));
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26);
  position:relative;z-index:3;   /* its photo menu must paint over the tiles below */
}
body.dark .tm-modal.tm-glass .tm-preview{background:rgba(var(--tg-rgb,255,255,255),calc(.05*var(--tg-k,1)));border-color:rgba(180,210,235,.14);box-shadow:none}
.tm-modal .tm-pwho{min-width:0}
.tm-modal .tm-phint{margin-top:5px;font-size:11.5px;font-weight:600;color:#7A8A84}

/* ---- the circle: picture or colour, round, the studio's camera badge ---- */
.tm-modal .tm-pavw{position:relative;flex:none;width:64px;height:64px;border-radius:50%;cursor:pointer;outline:none}
.tm-modal .tm-pavw:focus-visible{box-shadow:0 0 0 3px rgba(47,107,87,.35)}
.tm-modal.tm-modal-m3 .tm-pav{
  width:64px;height:64px;border-radius:50%;overflow:hidden;position:relative;
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;letter-spacing:.02em;
  box-shadow:0 0 0 3px rgba(255,255,255,.85),0 8px 18px -10px rgba(30,55,48,.55);
  transition:transform .18s ease,box-shadow .18s ease,background .12s linear;
}
.tm-modal .tm-pav svg{width:28px;height:28px}
.tm-modal .tm-pav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.tm-modal .tm-pavw:hover .tm-pav{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(255,255,255,.95),0 14px 26px -12px rgba(30,55,48,.55)}
.tm-modal .tm-pcam{
  position:absolute;right:-3px;bottom:-3px;width:26px;height:26px;border-radius:50%;
  background:var(--mh-clay,#C97B5A);color:#fff;display:grid;place-items:center;
  box-shadow:0 0 0 2.5px #2F4F46;pointer-events:none;
}
.tm-modal .tm-pcam svg{width:12px;height:12px}
/* the studio's menu, dropped under the circle */
.tm-modal .tm-pavw .cd-photomenu{z-index:30}

/* ---- the group circle everywhere in Teams: ROUND, picture over the colour ---- */
.tm-page .tm-gav{border-radius:50%;position:relative;overflow:hidden}
.tm-page .tm-gav.xl{border-radius:50%}
.tm-page .tm-gav .tm-gavimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}

/* ---- colour: the six house colours + "any colour" ---- */
.tm-modal .tm-swatches{flex-wrap:wrap;align-items:center}
.tm-modal .tm-swatch{transition:transform .15s ease,box-shadow .15s ease}
.tm-modal .tm-swatch:hover{transform:translateY(-2px)}
.tm-modal .tm-swmore{
  display:grid;place-items:center;color:#fff;border-color:transparent;
  background:conic-gradient(from 0deg,#FF4040,#FFB020,#E8E030,#40C060,#30B0C8,#4060E0,#A050D8,#FF4090,#FF4040);
}
.tm-modal .tm-swmore svg{width:14px;height:14px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45))}
.tm-modal .tm-swmore.open{box-shadow:0 0 0 2px #fff,0 0 0 4px #2F6B57}
.tm-modal .tm-colortile.cpopen{cursor:default}

/* ---- the Photoshop picker: square + hue bar + new / current + hex ---- */
.tm-modal .tm-cp{
  --cp-hue:#FF0000;--cp-new:#4E7C72;
  display:grid;grid-template-columns:minmax(0,1fr) 20px 108px;grid-template-rows:auto auto;gap:12px 14px;
  margin-top:12px;padding-top:12px;border-top:1px solid rgba(30,55,48,.10);cursor:default;
}
.tm-modal .tm-cp-sv{
  position:relative;height:176px;border-radius:12px;cursor:crosshair;touch-action:none;
  background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,var(--cp-hue));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.tm-modal .tm-cp-svk{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.35);
  background:var(--cp-new);outline:none;
}
.tm-modal .tm-cp-svk:focus-visible{box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 0 4px rgba(47,107,87,.45)}
.tm-modal .tm-cp-hue{
  position:relative;height:176px;border-radius:10px;cursor:ns-resize;touch-action:none;
  background:linear-gradient(to bottom,#F00 0%,#FF0 16.66%,#0F0 33.33%,#0FF 50%,#00F 66.66%,#F0F 83.33%,#F00 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.tm-modal .tm-cp-huek{
  position:absolute;left:-4px;right:-4px;height:8px;margin-top:-4px;border-radius:5px;
  background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.3);outline:none;
}
.tm-modal .tm-cp-huek:focus-visible{box-shadow:0 0 0 1px rgba(0,0,0,.35),0 0 0 4px rgba(47,107,87,.45)}
.tm-modal .tm-cp-side{display:flex;flex-direction:column;align-items:center;gap:6px}
.tm-modal .tm-cp-cap{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7A8A84}
.tm-modal .tm-cp-swatch{display:flex;flex-direction:column;width:74px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 6px 14px -8px rgba(30,55,48,.45)}
.tm-modal .tm-cp-new{height:40px;background:var(--cp-new)}
.tm-modal .tm-cp-cur{height:40px}
.tm-modal .tm-cp-hex{
  display:flex;align-items:center;gap:4px;width:100%;margin-top:8px;height:38px;padding:0 10px;border-radius:12px;
  background:rgb(var(--tg-rgb,255,255,255));border:1px solid rgba(47,107,87,.30);cursor:text;
  font-size:14px;font-weight:700;color:#7A8A84;
}
.tm-modal .tm-cp-hex:focus-within{border-color:rgba(47,107,87,.55);box-shadow:0 0 0 3px rgba(47,107,87,.13)}
.tm-modal .tm-cp.bad .tm-cp-hex{border-color:rgba(192,71,63,.6);box-shadow:0 0 0 3px rgba(192,71,63,.12)}
.tm-modal .tm-cp-hex .tm-cp-hexin,
.tm-modal .tm-cp-hex .tm-cp-hexin:hover,
.tm-modal .tm-cp-hex .tm-cp-hexin:focus,
.tm-modal .tm-cp-hex .tm-cp-hexin:focus-visible{
  flex:1;min-width:0;width:100%;height:24px;padding:0;border:0;background:transparent;box-shadow:none;outline:0;border-radius:0;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#1C2A25;-webkit-appearance:none;appearance:none;
}
.tm-modal .tm-cp-acts{grid-column:1 / -1;display:flex;justify-content:flex-end;gap:10px}
body.dark .tm-modal .tm-cp{border-top-color:rgba(180,210,235,.12)}
body.dark .tm-modal .tm-cp-hex{background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)));border-color:rgba(143,187,165,.3)}
body.dark .tm-modal .tm-cp-hex .tm-cp-hexin{color:#EAF0F4}

/* ---- the members section label (the Mint label, outside a tile) ---- */
.tm-modal .tm-seclb{padding:2px 4px 0;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7A8A84}
body.dark .tm-modal .tm-seclb{color:#8C9AA5}

/* ---- SEARCH = THE GLOBAL SEARCH BAR ---- */
.tm-modal .bigbar.tm-bigsearch{
  width:100%;max-width:none;margin:0;display:flex;align-items:center;
  height:42px;padding:0 16px;gap:12px;border-radius:999px;cursor:text;
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(47,107,87,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.06),0 6px 18px -10px rgba(30,55,48,.35);
  transition:box-shadow .2s cubic-bezier(.2,.7,.25,1),border-color .2s cubic-bezier(.2,.7,.25,1),background .2s cubic-bezier(.2,.7,.25,1);
}
.tm-modal .bigbar.tm-bigsearch:hover{
  border-color:rgba(47,107,87,.42);
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.40*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.18*var(--tg-k,1))) 100%);
}
.tm-modal .bigbar.tm-bigsearch:focus-within{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.48*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.26*var(--tg-k,1))) 100%);
  border-color:rgba(47,107,87,.55);
  box-shadow:0 0 0 3px rgba(47,107,87,.14),0 10px 26px -12px rgba(30,55,48,.35);
}
.tm-modal .bigbar.tm-bigsearch .search-ic{width:22px;height:22px;flex:none;display:grid;place-items:center;color:var(--mh-ico-brand,#2F6B57)}
.tm-modal .bigbar.tm-bigsearch .search-ic svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.tm-modal .bigbar.tm-bigsearch .divider{width:1px;height:22px;flex:none;background:rgba(47,107,87,.22)}
.tm-modal .bigbar.tm-bigsearch input,
.tm-modal .bigbar.tm-bigsearch input:hover,
.tm-modal .bigbar.tm-bigsearch input:focus,
.tm-modal .bigbar.tm-bigsearch input:focus-visible{
  flex:1;min-width:0;height:auto;padding:0;border:0;background:none;box-shadow:none;outline:0;border-radius:0;
  font-family:'Hanken Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:14px;font-weight:500;color:#1C2733;
  -webkit-appearance:none;appearance:none;
}
.tm-modal .bigbar.tm-bigsearch input::placeholder{color:#6F7D89;font-weight:400}
body.dark .tm-modal .bigbar.tm-bigsearch{background:var(--mh-ctrl-fill);border-color:var(--mh-line);box-shadow:inset 0 1px 2px rgba(0,0,0,.22);-webkit-backdrop-filter:none;backdrop-filter:none}
body.dark .tm-modal .bigbar.tm-bigsearch:focus-within{background:var(--mh-surface);border-color:var(--mh-ctrl-focus-border);box-shadow:var(--mh-ctrl-focus-ring)}
body.dark .tm-modal .bigbar.tm-bigsearch input{color:var(--mh-ink)}
body.dark .tm-modal .bigbar.tm-bigsearch .divider{background:rgba(180,210,235,.18)}

/* ---- the footer pair (and the picker's pair) = the record footer, value for value ---- */
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;
  height:48px;padding:0 22px;border-radius:12px;white-space:nowrap;
  font-family:inherit;font-size:14.5px;line-height:21.75px;font-weight:700;letter-spacing:normal;
  border:1px solid transparent;cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .2s cubic-bezier(.2,.7,.25,1),border-color .2s cubic-bezier(.2,.7,.25,1),filter .18s;
}
.tm-modal .tm-cp-acts .ui-btn{height:40px;padding:0 18px;font-size:13.5px}
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn.secondary{
  background:rgba(246,249,253,.58);border-color:rgba(255,255,255,.72);color:#375A50;
  -webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);
  box-shadow:0 3px 8px -5px rgba(30,55,48,.14),0 16px 34px -18px rgba(30,55,48,.26);
}
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn.secondary:hover:not(:disabled){background:rgba(255,255,255,.72);color:#1C2733;transform:translateY(-2px)}
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn.primary{
  color:#fff;
  background:radial-gradient(120% 55% at 90% 3%,rgba(255,255,255,.18),rgba(255,255,255,0) 42%),linear-gradient(162deg,#42856E 0%,#2F6B57 60%,#2A5749 100%);
  box-shadow:0 4px 12px -2px rgba(47,107,87,.42);
}
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px -4px rgba(47,107,87,.5)}
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn:active:not(:disabled){transform:translateY(0)}
.tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
body.dark .tm-modal :is(.tm-modalfoot,.tm-cp-acts) .ui-btn.secondary{background:rgba(var(--tg-rgb,255,255,255),calc(.08*var(--tg-k,1)));border-color:rgba(180,210,235,.16);color:#D6E2DD}

/* the error line under the form (only if the create fails) */
.tm-modal .tm-ngerr{padding:10px 14px;border-radius:12px;background:rgba(192,71,63,.10);border:1px solid rgba(192,71,63,.35);color:#9B3A33;font-size:13px;font-weight:700}

/* ---- SWATCH01 (1 Oct 2026) - THE "ANY COLOUR" SWATCH. Owner: "fix the color picker icon too and zoom it a little
        bit". The white "+" sat straight on the rainbow, so it blurred into the yellow and read as a smudge. It is now
        a colour WELL: the rainbow is a ring, a white centre holds a pine eyedropper (the picker's own glyph), and the
        whole swatch is 34px (the house swatches stay 30, centred on the same line). ---- */
.tm-modal .tm-swatch.tm-swmore{
  position:relative;width:34px;height:34px;border:0;padding:0;
  background:conic-gradient(from 0deg,#FF4040,#FFB020,#E8E030,#40C060,#30B0C8,#4060E0,#A050D8,#FF4090,#FF4040);
  box-shadow:0 3px 8px -4px rgba(30,55,48,.45);
}
.tm-modal .tm-swatch.tm-swmore::before{
  content:"";position:absolute;inset:4px;border-radius:50%;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(30,55,48,.08);
}
.tm-modal .tm-swatch.tm-swmore svg{position:relative;z-index:1;width:15px;height:15px;color:#2F6B57;filter:none}
.tm-modal .tm-swatch.tm-swmore:hover{transform:translateY(-2px) scale(1.04)}
.tm-modal .tm-swatch.tm-swmore.open{box-shadow:0 0 0 2px #fff,0 0 0 4px #2F6B57}
body.dark .tm-modal .tm-swatch.tm-swmore::before{background:#1d2421;box-shadow:inset 0 0 0 1px rgba(180,210,235,.14)}
body.dark .tm-modal .tm-swatch.tm-swmore svg{color:#8FBBA5}

/* ---- STAFFQA01 (1 Oct 2026) - the people search IS the global search bar. The older Teams glass
        (mh-canvas TEAMSWX18, body:not(.dark) .mh-app .tm-page :is(.tm-search,...) = 0,4,1) and the 44px/22px
        size above outrank the kit's .mint-kit .bigbar.mint-search (0,3,0), so the kit values are restated
        here, value for value (mh-mintkit.css THE SEARCH = THE GLOBAL SEARCH BAR). ---- */
.tm-page .tm-searchrow .tm-search.bigbar.mint-search{height:42px;border-radius:999px;padding:0 16px;gap:12px}
body:not(.dark) .mh-app .tm-page .tm-search.bigbar.mint-search{
  background:linear-gradient(180deg,rgba(var(--tg-rgb,255,255,255),calc(.30*var(--tg-k,1))) 0%,rgba(var(--tg-rgb,255,255,255),calc(.10*var(--tg-k,1))) 100%);
  border:1px solid rgba(47,107,87,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(47,107,87,.06),0 6px 18px -10px rgba(30,55,48,.35);
}
body:not(.dark) .mh-app .tm-page .tm-search.bigbar.mint-search:hover{border-color:rgba(47,107,87,.42)}
body:not(.dark) .mh-app .tm-page .tm-search.bigbar.mint-search:focus-within{
  border-color:rgba(47,107,87,.55);box-shadow:0 0 0 3px rgba(47,107,87,.14),0 10px 26px -12px rgba(30,55,48,.35);
}