/* YDO Connect demo: the team member's phone (a09-team, round two b5-team). It fills #dc-phone: 402 x 874 device px inside
   the stage's iOS frame (scaled by --ph-scale), or the whole Team pane edge to edge on a phone, under a 28px status row.
   Lock screen, Slack (channel + thread), Messages and Mail, drawn in their own apps' looks: iOS's system font on the lock
   screen, Messages and Mail; Slack's own Lato in Slack. Hover and focus move colour and border only (120-160 ms); the
   only motion is opacity and transform (a notification dropping in, a reply rising, a screen fading in, the send arrow's
   spring). Every card holds one fixed size, so a new note never moves the ones already on screen. Spacing on a 4px grid.
   Third-party skins (Slack, iOS, the alert email's own inline styles) are the local custom properties directly below:
   the only raw hex in this file (spec section 2). Everything else is a token from tokens.css. */
.dc-tm {
  --tm-slack: #4A154B; --tm-slack-deep: #3F0E40; --tm-slack-ink: #1D1C1D; --tm-slack-meta: #616061; --tm-slack-line: #DDDDDD;
  --tm-slack-go: #007A5A; --tm-slack-go-hover: #148567; --tm-slack-stop: #E01E5A; --tm-slack-stop-hover: #C21B50;
  --tm-slack-code: #E01E5A; --tm-slack-badge: #EBEAEB; --tm-slack-react: #EDF4FA; --tm-slack-react-line: #1D9BD1; --tm-slack-link: #1264A3;
  --tm-ios-ink: #000000; --tm-ios-meta: #8E8E93; --tm-ios-line: #C6C6C8; --tm-ios-bg: #FFFFFF; --tm-ios-group: #F2F2F7;
  --tm-ios-blue: #007AFF; --tm-ios-green: #34C759; --tm-ios-bubble: #E9E9EB; --tm-ios-mail: #1B8BF5; --tm-ios-sub: rgba(60,60,67,.6);
  --tm-platter: rgba(246,246,248,.9); --tm-platter-read: rgba(246,246,248,.68); --tm-platter-hover: rgba(255,255,255,.97);
  --tm-peek-1: rgba(246,246,248,.5); --tm-peek-2: rgba(246,246,248,.28); --tm-lockbtn: rgba(255,255,255,.14);
  --tm-mail-h: #333333; --tm-mail-h3: #555555; --tm-mail-cell: #F8F9FA; --tm-mail-edge: #EEEEEE; --tm-mail-foot: #999999; --tm-mail-dim: #666666; --tm-mail-link: #1A0DAB;
  --tm-sys: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --tm-r-note: 20px; --tm-r-icon: 9px; --tm-r-bubble: 18px;
  --tm-status-h: 56px;
  position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; container: dc-tm / size;
  background: var(--navy); color: var(--tm-ios-ink); font-family: var(--ff); font-size: 15px; line-height: 1.45; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.dc-tm [hidden] { display: none !important; }
.dc-tm button { margin: 0; font-family: inherit; cursor: pointer; }
.dc-tm h2, .dc-tm h3, .dc-tm h4, .dc-tm p { margin: 0; }
.dc-tm button:focus-visible, .dc-tm input:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
/* a heading focused for a screen reader after a screen change carries no ring (it is not a control) */
.dc-tm [tabindex="-1"]:focus { outline: none; }
/* ...unless the visitor came by keyboard: then where they are is shown (i2: focus sat invisibly on the channel name) */
.dc-tm [tabindex="-1"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.dc-tm-logo { display: block; width: 60%; height: 60%; }

/* 44px targets at every phone scale: a small control grows an invisible hit area to 60 device px, plus --ph-hit (the
   director's layout(): ceil((44 / scale - 56) / 2)), so the area is at least 44px ON SCREEN at any scale (#107, as Sign;
   measured at 0.564, 0.62 and 0.815). 44px controls grow 8px a side, 36px ones 12px. Controls at the screen's edge are
   built wide enough that the edge clipping their area still leaves 44px (the back chevrons are 64 wide, left-aligned;
   the send arrow sits inside the field's reserved end). The field grows the same way and hands a press to its input. */
.dc-tm-back, .dc-tm-inbox, .dc-tm-btn, .dc-tm-field, .dc-tm-replyln, .dc-tm-replies { position: relative; }
.dc-tm-back::before, .dc-tm-inbox::before { content: ''; position: absolute; inset: calc(-8px - var(--ph-hit, 0px)); }
.dc-tm-btn::before, .dc-tm-send::before { content: ''; position: absolute; inset: calc(-12px - var(--ph-hit, 0px)); }
/* the reply line sits 16px over End Chat, whose own area wins the overlap: the line's area grows upward over passive text */
.dc-tm-replyln::before { content: ''; position: absolute; left: -8px; right: -8px; top: calc(-40px - var(--ph-hit, 0px)); bottom: calc(-8px - var(--ph-hit, 0px)); }
.dc-tm-replies::before { content: ''; position: absolute; left: calc(-12px - var(--ph-hit, 0px)); right: calc(-12px - var(--ph-hit, 0px)); top: calc(-16px - var(--ph-hit, 0px)); bottom: calc(-16px - var(--ph-hit, 0px)); }
.dc-tm-field::before { content: ''; position: absolute; left: 0; right: 0; top: calc(-8px - var(--ph-hit, 0px)); bottom: calc(-8px - var(--ph-hit, 0px)); }
.dc-tm-input { position: relative; }

/* ---------- the status row: the time in an app; on the lock screen the network instead (the big clock is below) ---------- */
.dc-tm-status { position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: var(--tm-status-h); padding-top: 4px; display: flex; align-items: center; color: var(--surface); font-family: var(--tm-sys); pointer-events: none; transition: background-color var(--t-fade) linear, color var(--t-fade) linear; }
.dc-tm-half { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; }
.dc-tm-gap { flex: none; width: 128px; }
/* the right ear ends on the battery wherever it stands (centred in an app: (137 - 69) / 2 = 34), so the battery never
   moves when the lock screen's network icons step aside */
.dc-tm-sr { justify-content: flex-end; padding-right: 34px; }
.dc-tm-time { font-size: 16px; font-weight: 600; letter-spacing: .2px; }
.dc-tm-carrier { display: none; align-items: center; gap: 5px; }
.dc-tm-net { font-size: 14px; font-weight: 600; letter-spacing: .2px; }
.dc-tm-g { display: block; flex: none; }
.dc-tm[data-screen="lock"] .dc-tm-time, .dc-tm[data-screen="lock"] .dc-tm-sr .dc-tm-g-bars, .dc-tm[data-screen="lock"] .dc-tm-g-wifi { display: none; }
.dc-tm[data-screen="lock"] .dc-tm-carrier { display: inline-flex; }
/* iOS keeps the signal, the network and the battery together on the right (c4r2-6): on the lock screen the bars and
   5G sit just left of the battery, whose end never moves; the left ear stays empty (no carrier name) */
.dc-tm { --tm-batt-end: 34px; --tm-batt-w: 26px; }
.dc-tm[data-screen="lock"] .dc-tm-carrier { position: absolute; top: 4px; bottom: 0; right: calc(var(--tm-batt-end) + var(--tm-batt-w) + 6px); align-items: center; }
.dc-tm[data-screen="slack"] .dc-tm-status { background: var(--tm-slack-deep); }
.dc-tm[data-screen="sms"] .dc-tm-status, .dc-tm[data-screen="mail"] .dc-tm-status { background: var(--tm-ios-bg); color: var(--tm-ios-ink); }
.dc-tm[data-screen="sms"] .dc-tm-status { background: var(--tm-ios-group); }
.dc-tm-home { position: absolute; left: 50%; bottom: 8px; z-index: 21; width: 136px; height: 4px; margin-left: -68px; border-radius: var(--r-bar); background: var(--tm-ios-ink); pointer-events: none; }
.dc-tm[data-screen="lock"] .dc-tm-home { background: var(--surface); }

/* ---------- screens ---------- */
.dc-tm-view { position: absolute; inset: 0; }
.dc-tm-scr { position: absolute; left: 0; right: 0; top: var(--tm-status-h); bottom: 0; display: flex; flex-direction: column; min-height: 0; }
.dc-tm-enter { opacity: 0; }
.dc-tm-enter.dc-tm-on { opacity: 1; transition: opacity var(--t-fade) var(--ease-std); }
.dc-ph-scroll { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ---------- the lock screen: padlock, date and time, the stack low on the screen, torch and camera ---------- */
.dc-tm-lock { top: 0; background: radial-gradient(120% 55% at 50% 0%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%), linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%); color: var(--surface); font-family: var(--tm-sys); }
.dc-tm-padlock { position: absolute; top: 62px; left: 50%; width: 14px; height: 18px; margin-left: -7px; color: rgba(255,255,255,.9); }
.dc-tm-padlock svg { display: block; }
.dc-tm-lhead { flex: none; padding-top: 92px; text-align: center; }
.dc-tm-ldate { font-size: 20px; line-height: 24px; font-weight: 600; color: rgba(255,255,255,.9); }
.dc-tm-ltime { font-size: 96px; line-height: 100px; font-weight: 600; letter-spacing: -2.5px; }
/* the stack's own box fills the screen under the clock and its cards sit at its foot: a note landing never moves the
   box (a box that grows upward counts as a layout shift), and the cards already there stay put */
.dc-tm-stack { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; margin: 0 10px 124px; }
.dc-tm-lbtn { position: absolute; bottom: 48px; width: 50px; height: 50px; border-radius: 50%; background: var(--tm-lockbtn); color: var(--surface); display: flex; align-items: center; justify-content: center; }
.dc-tm-torch { left: 46px; }
.dc-tm-cam { right: 46px; }

/* one card per app; older notes of the same app peek under it (their space is held from the start: nothing moves) */
.dc-tm-group { position: relative; flex: none; padding-bottom: 12px; }
.dc-tm-note, .dc-tm-banner { display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 10px; align-items: start; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--tm-r-note); background: var(--tm-platter); color: var(--tm-ios-ink); font-family: var(--tm-sys); text-align: left; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.dc-tm-note { position: relative; z-index: 2; height: 82px; overflow: hidden; }
.dc-tm-note[data-app="mail"] { height: 101px; }
.dc-tm-note.is-read { background: var(--tm-platter-read); }
.dc-tm-peek { position: absolute; border-radius: 0 0 14px 14px; }
.dc-tm-peek-1 { left: 12px; right: 12px; bottom: 4px; height: 8px; background: var(--tm-peek-1); }
.dc-tm-peek-2 { left: 26px; right: 26px; bottom: 0; height: 4px; background: var(--tm-peek-2); }
.dc-tm-note.dc-tm-arrive, .dc-tm-banner.dc-tm-arrive { opacity: 0; transform: translateY(-20px) scale(.96); }
.dc-tm-note.dc-tm-arrive.dc-tm-on, .dc-tm-banner.dc-tm-arrive.dc-tm-on { opacity: 1; transform: none; transition: opacity var(--t-notif) var(--ease-out), transform 420ms var(--ease-spring); }
.dc-tm-nicon { position: relative; flex: none; width: 38px; height: 38px; border-radius: var(--tm-r-icon); display: flex; align-items: center; justify-content: center; color: var(--surface); }
.dc-tm-ic-slack { background: var(--tm-slack); }
.dc-tm-ic-sms { background: var(--tm-ios-green); }
.dc-tm-ic-mail { background: var(--tm-ios-mail); }
/* Slack and Messages: the sender's photo (the business's mark on its pale sun) with the app's badge */
.dc-tm-nphoto { border-radius: 50%; background: var(--sun-tint); }
.dc-tm-nbadge { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--surface); box-shadow: 0 0 0 1.5px var(--tm-platter); }
.dc-tm-nbadge svg { width: 11px; height: 11px; }
.dc-tm-nbody { min-width: 0; display: flex; flex-direction: column; }
.dc-tm-nrow { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dc-tm-ntitle { flex: 1; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-ntime { flex: none; font-size: 13px; line-height: 20px; color: var(--tm-ios-sub); }
.dc-tm-nsub { display: block; font-size: 15px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-ntext { font-size: 15px; line-height: 19px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* a hot lead's Slack and text notes read four lines (iOS gives the body room), so the score and the first reasons show;
   its email keeps the mail card (subject and a two-line intro). One fixed height per kind, and they land on an empty
   lock screen, so nothing under them moves (c8 R2-4) */
.dc-tm-note[data-kind="hot"]:not([data-app="mail"]) { height: 120px; }
.dc-tm-note[data-kind="hot"]:not([data-app="mail"]) .dc-tm-ntext { -webkit-line-clamp: 4; }
/* a notification over an open app */
.dc-tm-banner { position: absolute; left: 8px; right: 8px; top: 58px; z-index: 25; width: auto; min-height: 82px; background: var(--tm-platter-hover); box-shadow: var(--sh-float); }

/* ---------- Slack: the channel (bottom-anchored over its history) or the thread; the composer ---------- */
.dc-tm-slack { background: var(--tm-ios-bg); color: var(--tm-slack-ink); font-family: var(--ff); }
.dc-tm-shead { flex: none; height: 52px; display: flex; align-items: center; gap: 0; padding: 0 4px 0 0; background: var(--tm-slack-deep); color: var(--surface); }
.dc-tm-back { flex: none; width: 64px; height: 44px; padding: 0 0 0 16px; border: 0; border-radius: var(--r-control); background: transparent; color: inherit; display: flex; align-items: center; justify-content: flex-start; transition: background-color var(--t-hover) ease; }
.dc-tm-chan { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dc-tm-chname { display: flex; align-items: center; gap: 4px; font-size: 17px; line-height: 22px; font-weight: 900; white-space: nowrap; }
.dc-tm-chn-ch { display: inline-flex; align-items: center; gap: 4px; }
.dc-tm-ws, .dc-tm-thsub { font-size: 12px; line-height: 16px; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-hico { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.82); }
.dc-tm-sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 0 12px; }
.dc-tm-feed { flex: none; margin-top: auto; }
.dc-tm-slack[data-view="thread"] .dc-tm-feed { margin-top: 0; }
.dc-tm-day { position: relative; display: flex; justify-content: center; height: 26px; margin: 12px 0 4px; }
.dc-tm-day::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; border-top: 1px solid var(--tm-slack-line); }
.dc-tm-day span { position: relative; padding: 0 12px; border: 1px solid var(--tm-slack-line); border-radius: var(--r-pill); background: var(--tm-ios-bg); font-size: 13px; line-height: 24px; font-weight: 700; color: var(--tm-slack-ink); }
.dc-tm-msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 8px 16px; }
/* an earlier day's card: static and quieter, so today's reads first */
.dc-tm-old .dc-tm-mcol, .dc-tm-old .dc-tm-av { opacity: .72; }
.dc-tm-av { width: 36px; height: 36px; border-radius: var(--r-control); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--surface); }
.dc-tm-av-app { background: var(--sun-tint); box-shadow: inset 0 0 0 1px var(--sun-tint-line); }
.dc-tm-sun { width: 14px; height: 14px; border-radius: 50%; background: var(--sun); }
.dc-tm-av-person { background: var(--navy-ctl); }
.dc-tm-mcol { min-width: 0; }
.dc-tm-mhead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dc-tm-who { font-size: 15px; line-height: 20px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-appbadge { flex: none; padding: 0 4px; border-radius: var(--r-bar); background: var(--tm-slack-badge); color: var(--tm-slack-meta); font-size: 10px; line-height: 16px; font-weight: 700; }
.dc-tm-mtime { flex: none; font-size: 12px; line-height: 16px; color: var(--tm-slack-meta); }
.dc-tm-blk, .dc-tm-text { margin-top: 4px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.dc-tm-ln { min-height: 22px; }
.dc-tm-blk strong, .dc-tm-text strong, .dc-tm-sec strong { font-weight: 900; }
.dc-tm-ln-sess { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; }
.dc-tm-code { min-width: 0; padding: 0 4px; border: 1px solid rgba(29,28,29,.13); border-radius: var(--r-bar); background: rgba(29,28,29,.04); color: var(--tm-slack-code); font-family: Menlo, Consolas, monospace; font-size: 12px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-replyln { display: inline-block; padding: 0; border: 0; border-radius: var(--r-bar); background: transparent; color: inherit; font: inherit; font-weight: 900; text-align: left; transition: color var(--t-hover) ease; }
.dc-tm .dc-tm-replies { display: inline-flex; align-items: center; height: 28px; margin: 0 16px 4px 64px; padding: 0; border: 0; background: transparent; color: var(--tm-slack-link); font-size: 13px; font-weight: 700; transition: color var(--t-hover) ease; }
.dc-tm-acts { margin-top: 8px; display: flex; }
.dc-tm-btn { height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-bar); font-size: 15px; font-weight: 900; line-height: 34px; color: var(--surface); white-space: nowrap; text-align: center; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
/* one fixed width each: the counting label never moves the button */
.dc-tm-go { width: 264px; background: var(--tm-slack-go); }
.dc-tm-stop { width: 200px; background: var(--tm-slack-stop); }
.dc-tm-dead { display: inline-block; width: auto; cursor: default; }
.dc-tm-btn.dc-pressed { --dc-press-ink: rgba(0,0,0,.18); }
/* the hot-lead post: Block Kit's header block, sections and the context line */
.dc-tm-bkhead { margin-top: 4px; font-size: 18px; line-height: 24px; font-weight: 900; overflow-wrap: anywhere; }
.dc-tm-sec { margin-top: 8px; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.dc-tm-sec-pre { white-space: pre-wrap; }
.dc-tm-ctx { margin-top: 8px; font-size: 12px; line-height: 18px; color: var(--tm-slack-meta); }
.dc-tm-tsep { display: flex; align-items: center; gap: 12px; margin: 8px 16px; font-size: 13px; line-height: 20px; color: var(--tm-slack-meta); }
.dc-tm-tsep::after { content: ''; flex: 1; height: 1px; background: var(--tm-slack-line); }
.dc-tm-react { display: inline-flex; align-items: center; gap: 4px; height: 24px; margin-top: 4px; padding: 0 8px; border: 1px solid var(--tm-slack-react-line); border-radius: var(--r-pill); background: var(--tm-slack-react); color: var(--tm-slack-go); font-size: 12px; font-weight: 700; }
.dc-tm-react .dc-num { color: var(--tm-slack-ink); }
.dc-tm-ccomp { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 32px; border-top: 1px solid var(--tm-slack-line); background: var(--tm-ios-bg); }
.dc-tm-cplus { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--tm-slack-badge); color: var(--tm-slack-meta); display: flex; align-items: center; justify-content: center; }
.dc-tm-cfield { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--tm-slack-line); border-radius: var(--r-control); color: var(--tm-slack-meta); font-size: 15px; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-comp { flex: none; padding: 8px 16px 32px; border-top: 1px solid var(--tm-slack-line); background: var(--tm-ios-bg); }
.dc-tm-field { height: 44px; }
.dc-tm-input { display: block; width: 100%; height: 44px; padding: 0 72px 0 12px; border: 1px solid var(--tm-slack-line); border-radius: var(--r-control); background: var(--tm-ios-bg); color: var(--tm-slack-ink); font-family: var(--ff); font-size: 16px; transition: border-color var(--t-hover) ease; }
.dc-tm-input::placeholder { color: var(--tm-slack-meta); }
.dc-tm-input:focus { outline: none; border-color: var(--tm-slack-meta); }
.dc-tm-input:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.dc-tm-send { position: absolute; right: 4px; top: 4px; z-index: 1; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-control); background: var(--tm-slack-go); color: var(--surface); display: flex; align-items: center; justify-content: center; transition: background-color var(--t-hover) ease; }
.dc-tm-send.dc-pressed { --dc-press-ink: rgba(0,0,0,.18); }

/* ---------- Messages: earlier alert texts, then today's ---------- */
.dc-tm-sms { background: var(--tm-ios-bg); font-family: var(--tm-sys); }
.dc-tm-ihead { flex: none; position: relative; height: 92px; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; border-bottom: 1px solid var(--tm-ios-line); background: var(--tm-ios-group); }
.dc-tm-ihead .dc-tm-back { position: absolute; left: 0; top: 4px; color: var(--tm-ios-blue); }
.dc-tm-icontact { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 280px; }
.dc-tm-iav { width: 52px; height: 52px; border-radius: 50%; background: var(--sun-tint); display: flex; align-items: center; justify-content: center; }
.dc-tm-iname { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--tm-ios-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dc-tm-ibody { flex: 1; min-height: 0; padding: 12px 16px; }
.dc-tm-imeta, .dc-tm-istamp { text-align: center; font-size: 12px; line-height: 16px; color: var(--tm-ios-meta); }
.dc-tm-imeta { font-weight: 600; }
.dc-tm-istamp { margin: 12px 0 8px; }
.dc-tm-irow { display: flex; flex-direction: column; align-items: flex-start; margin-top: 4px; }
.dc-tm-icomp { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px 32px; background: var(--tm-ios-bg); }
.dc-tm-iplus { width: 34px; height: 34px; background: var(--tm-ios-group); }
.dc-tm-ifield { flex: 1; min-width: 0; height: 36px; padding: 0 14px; border: 1px solid var(--tm-ios-line); border-radius: var(--tm-r-bubble); color: var(--tm-ios-meta); font-size: 16px; line-height: 34px; white-space: nowrap; overflow: hidden; }
.dc-tm-bub { max-width: 80%; padding: 8px 12px; border-radius: var(--tm-r-bubble) var(--tm-r-bubble) var(--tm-r-bubble) 6px; background: var(--tm-ios-bubble); color: var(--tm-ios-ink); font-size: 16px; line-height: 22px; overflow-wrap: anywhere; }

/* ---------- Mail: the inbox and the alert email (notificationService's own inline styles, on the grid) ---------- */
.dc-tm-mail { background: var(--tm-ios-bg); font-family: var(--tm-sys); }
.dc-tm-box, .dc-tm-msg-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dc-tm-mnav { flex: none; height: 44px; display: flex; align-items: center; padding: 0; }
.dc-tm-mnav .dc-tm-back { color: var(--tm-ios-blue); }
.dc-tm-boxtitle { flex: none; padding: 0 16px 8px; font-size: 32px; line-height: 40px; font-weight: 700; color: var(--tm-ios-ink); }
.dc-tm-mlist { flex: 1; min-height: 0; border-top: 1px solid var(--tm-ios-line); padding-bottom: 40px; }
.dc-tm-mrow { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 88px; padding: 12px 16px 12px 28px; border: 0; border-bottom: 1px solid var(--tm-ios-line); background: var(--tm-ios-bg); color: var(--tm-ios-ink); text-align: left; transition: background-color var(--t-hover) ease; }
.dc-tm-mdot { position: absolute; left: 10px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: transparent; transition: background-color var(--t-hover) ease; }
.dc-tm-mrow.is-unread .dc-tm-mdot { background: var(--tm-ios-blue); }
.dc-tm-rtop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; line-height: 22px; }
.dc-tm-rtop b { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-rtime { flex: none; font-size: 14px; color: var(--tm-ios-meta); }
.dc-tm-rsubj { font-size: 15px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-tm-rprev { font-size: 15px; line-height: 20px; color: var(--tm-ios-meta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-tm-inbox { display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px 0 16px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--tm-ios-blue); font-size: 17px; transition: background-color var(--t-hover) ease; }
.dc-tm-mscroll { flex: 1; min-height: 0; padding: 4px 16px 40px; }
.dc-tm-msubj { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--tm-ios-ink); overflow-wrap: anywhere; }
.dc-tm-mfrom { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tm-ios-line); }
.dc-tm-mav { flex: none; width: 40px; height: 40px; }
.dc-tm-mwho { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; line-height: 20px; color: var(--tm-ios-meta); }
.dc-tm-mwho b { color: var(--tm-ios-ink); font-size: 15px; font-weight: 600; }
.dc-tm-mwhen { flex: none; font-size: 14px; color: var(--tm-ios-meta); }
.dc-tm-email { padding-top: 16px; color: var(--tm-ios-ink); font-size: 15px; line-height: 22px; }
.dc-tm-eh { margin-bottom: 8px; font-size: 22px; line-height: 28px; font-weight: 700; color: var(--tm-mail-h); }
.dc-tm-etab { margin: 16px 0; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.dc-tm-etab td { padding: 8px 12px; border: 1px solid var(--tm-mail-edge); vertical-align: top; overflow-wrap: anywhere; }
.dc-tm-ek { font-weight: 700; background: var(--tm-mail-cell); white-space: nowrap; }
.dc-tm-enone { color: var(--tm-mail-dim); }
.dc-tm-elink { color: var(--tm-mail-link); text-decoration: underline; }
.dc-tm-eh3 { margin-top: 20px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--tm-mail-h3); }
.dc-tm-escore { font-weight: 400; color: var(--tm-mail-foot); }
.dc-tm-elist { margin: 8px 0 0; padding: 12px 14px 12px 30px; border-radius: var(--r-control); background: var(--tm-mail-cell); line-height: 1.5; }
.dc-tm-elist li { margin: 4px 0; }
.dc-tm-esum { margin-top: 8px; padding: 12px 16px; border-radius: var(--r-control); background: var(--tm-mail-cell); line-height: 1.5; }
.dc-tm-efast { margin-top: 20px; font-weight: 700; }
.dc-tm-efoot { margin-top: 24px; font-size: 12px; line-height: 16px; color: var(--tm-mail-foot); }

/* ---------- phones: the visitor holds the device, so the frame goes; a 28px status row stays above every screen,
   on the screen's own ground (navy on the lock screen, aubergine in Slack, white in Messages and Mail) ---------- */
@media (max-width: 700px), (max-width: 899.98px) and (pointer: coarse) and (max-height: 500px) {
  .dc-tm { --tm-status-h: 28px; --tm-batt-end: 20px; }
  .dc-tm[data-screen="lock"] .dc-tm-carrier { top: 0; }
  .dc-tm .dc-tm-chrome { display: none !important; }
  .dc-tm-status { padding: 0 20px; }
  .dc-tm-half { flex: 1; justify-content: flex-start; }
  .dc-tm-sr { justify-content: flex-end; padding-right: 0; }
  .dc-tm-gap { width: 16px; }
  .dc-tm-padlock { top: 34px; }
  .dc-tm-lhead { padding-top: 60px; }
  .dc-tm-ltime { font-size: 80px; line-height: 84px; letter-spacing: -2px; }
  .dc-tm-stack { margin-bottom: 92px; }
  .dc-tm-lbtn { bottom: 24px; }
  .dc-tm-banner { top: 32px; }
  .dc-tm-comp, .dc-tm-ccomp, .dc-tm-icomp { padding-bottom: 12px; }
  .dc-tm-ibody, .dc-tm-mlist, .dc-tm-mscroll { padding-bottom: 16px; }
}
@media (max-width: 899.98px) {
  .dc-tm .dc-ph-scroll { overscroll-behavior: auto; }
}
/* a short Team pane (a phone held in landscape, a small phone): the lock screen keeps the whole stack in view, the
   time a little smaller; below 560px the torch and camera give way to the notes. The framed phone is always 874 tall. */
@container dc-tm (max-height: 640px) {
  .dc-tm-lhead { padding-top: calc(var(--tm-status-h) + 28px); }
  .dc-tm-padlock { top: calc(var(--tm-status-h) + 4px); }
  .dc-tm-ldate { font-size: 16px; line-height: 20px; }
  .dc-tm-ltime { font-size: 60px; line-height: 64px; letter-spacing: -1.5px; }
  .dc-tm-stack { margin-bottom: 80px; }
  .dc-tm-note[data-kind="hot"]:not([data-app="mail"]) { height: 101px; }
  .dc-tm-note[data-kind="hot"]:not([data-app="mail"]) .dc-tm-ntext { -webkit-line-clamp: 3; }
  .dc-tm-lbtn { width: 44px; height: 44px; bottom: 18px; }
}
@container dc-tm (max-height: 560px) {
  .dc-tm-padlock, .dc-tm-lbtn { display: none; }
  .dc-tm-lhead { padding-top: calc(var(--tm-status-h) + 8px); }
  .dc-tm-stack { margin-bottom: 12px; }
}
/* 320: the bot's name, its APP badge and the time share one 240px line; a point smaller keeps the name whole */
@media (max-width: 359.98px) {
  .dc-tm-mhead { gap: 6px; }
  .dc-tm-who { font-size: 14px; }
}

/* ---------- pointer hover: colour and border only ---------- */
@media (hover: hover) {
  .dc-tm-note:hover, .dc-tm-banner:hover { background: var(--tm-platter-hover); }
  .dc-tm-shead .dc-tm-back:hover { background: rgba(255,255,255,.12); }
  .dc-tm-ihead .dc-tm-back:hover, .dc-tm-mnav .dc-tm-back:hover, .dc-tm-inbox:hover { background: rgba(0,122,255,.08); }
  .dc-tm-go:hover { background: var(--tm-slack-go-hover); }
  .dc-tm-stop:hover { background: var(--tm-slack-stop-hover); }
  .dc-tm-dead:hover { background: var(--tm-slack-stop); }
  .dc-tm-send:hover { background: var(--tm-slack-go-hover); }
  .dc-tm-input:hover { border-color: var(--tm-slack-meta); }
  .dc-tm-replyln:hover, .dc-tm-replies:hover { color: var(--tm-slack-link); }
  .dc-tm-mrow:hover { background: var(--tm-ios-group); }
}