/* STRIDE kit: the ONE shared implementation of each web component family
   (docs/brand/stride-components.md). Load order: stride-tokens → index
   <style> → stride-operating → legacy-tokens → workspace → **kit** →
   stride-content (per-surface content layer). Same-specificity ties are won
   here by source order.

   Fold-ins: a legacy one-off class listed in a family's selector group IS
   that component now. Its old per-surface rule may still exist upstream but
   is shadowed for every property declared here; new markup uses the kit
   class directly (.btn, .seg, .switch, .avatar, .list-row, .call-ctl …).

   Specificity lift: where a family must beat a legacy per-id stack (the call
   dock carries 2-id selectors on every seat) the kit rule adds
   `:not(#k):not(#k)…` — each :not(#id) adds one id of specificity and never
   matches anything away (no element has id "k"). Delete the lift when the
   legacy stack is gone. */

/* ========================================================================
   1. Buttons — the lobby Join pill is the canon.
   Pill, 36 visual on a fine pointer / 44 on touch, 16/500, borderless,
   press 0.98, no hover grow, 120ms token ease.
   ======================================================================== */
.btn,
:is(.room-empty__join, .lobby__submit, .lobby__formcancel, .lobby__new,
    .lobby-pop__mint, .lobby-pop__cancel, .invite-pop__action,
    .login-signin, .login-passkey, .tray__btn, .approval__btn,
    .card-draft__accept, .card-draft__dismiss, .drive-detail__action,
    .meeting-record__action, .chat-channel-create__go,
    .chat-convo-members__add-go, .project-correction-dialog__action,
    .room-transfer__cancel, .home-refresh-retry, .key-date-add,
    .card-detail-edit-button, .scout-chat-research__action,
    .scout-chat-work-record__action, .multi-device-chip__action,
    .room-work-activity__open, .update-banner__action, .pip-return,
    .chat-deck__btn, .deck-editor__btn, .settings-inline-save,
    .scout-chat-history-control__button, .scout-chat-msg__expand,
    .scout-chat-reply-state__retry, .chat-convo-head__tool, .drive-new,
    .drive-heading__action) {
  align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; height: auto; min-width: 0;
  padding: 0 16px;
  border: 0; border-radius: var(--r-full);
  box-shadow: none;
  font: var(--type-button); letter-spacing: 0; text-transform: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
@media (pointer: coarse) {
  .btn,
  :is(.room-empty__join, .lobby__submit, .lobby__formcancel, .lobby__new,
      .lobby-pop__mint, .lobby-pop__cancel, .invite-pop__action,
      .login-signin, .login-passkey, .tray__btn, .approval__btn,
      .card-draft__accept, .card-draft__dismiss, .drive-detail__action,
      .meeting-record__action, .chat-channel-create__go,
      .chat-convo-members__add-go, .project-correction-dialog__action,
      .room-transfer__cancel, .home-refresh-retry, .key-date-add,
      .card-detail-edit-button, .scout-chat-research__action,
      .scout-chat-work-record__action, .multi-device-chip__action,
      .room-work-activity__open, .update-banner__action, .pip-return,
      .chat-deck__btn, .deck-editor__btn, .settings-inline-save,
      .scout-chat-history-control__button, .scout-chat-msg__expand,
      .scout-chat-reply-state__retry, .chat-convo-head__tool, .drive-new,
      .drive-heading__action) { min-height: 44px; }
}
/* display is declared at zero specificity so a surface rule that hides a
   folded-in button (phone-only, state-only) still wins */
:where(.btn,
.room-empty__join, .lobby__submit, .lobby__formcancel, .lobby__new,
    .lobby-pop__mint, .lobby-pop__cancel, .invite-pop__action,
    .login-signin, .login-passkey, .tray__btn, .approval__btn,
    .card-draft__accept, .card-draft__dismiss, .drive-detail__action,
    .meeting-record__action, .chat-channel-create__go,
    .chat-convo-members__add-go, .project-correction-dialog__action,
    .room-transfer__cancel, .home-refresh-retry, .key-date-add,
    .card-detail-edit-button, .scout-chat-research__action,
    .scout-chat-work-record__action, .multi-device-chip__action,
    .room-work-activity__open, .update-banner__action, .pip-return,
    .chat-deck__btn, .deck-editor__btn, .settings-inline-save,
    .scout-chat-history-control__button, .scout-chat-msg__expand,
    .scout-chat-reply-state__retry, .chat-convo-head__tool, .drive-new,
    .drive-heading__action) { display: inline-flex; }
:where(.btn)[hidden] { display: none; }

/* the Settings "Done" sits in an id-scoped actions row */
.settings-actions #settingsDone { border-radius: var(--r-full); min-height: 36px; padding: 0 16px; font: var(--type-button); }
#filesTool :is(.drive-new, .drive-heading__action) { border: 0; border-radius: var(--r-full); box-shadow: none; }
#filesTool .drive-heading__action { background: transparent; color: var(--text-1); min-height: 32px; padding: 0 12px; font: 500 14px/1.2 var(--font-sans); }
#filesTool .drive-heading__action:hover { background: color-mix(in srgb, var(--text-1) 6%, transparent); }
/* never put an id inside a kit :is() list — it lifts the whole group to id
   specificity; id-scoped fold-ins get their own line like these */

/* no hover grow, no hover lift — anywhere a button lives */
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not([disabled]),
  :is(.room-empty__join, .lobby__submit, .lobby-pop__mint, .login-signin,
      .login-passkey, .card-draft__accept, .pip-return, .drive-new,
      .chat-deck__btn, .deck-editor__btn):hover:not([disabled]) { transform: none; box-shadow: none; filter: none; }
}
.btn:active:not([disabled]):not([aria-disabled="true"]),
:is(.room-empty__join, .lobby__submit, .lobby__formcancel, .lobby__new,
    .lobby-pop__mint, .lobby-pop__cancel, .invite-pop__action,
    .login-signin, .login-passkey, .tray__btn, .approval__btn,
    .card-draft__accept, .card-draft__dismiss, .drive-detail__action,
    .meeting-record__action, .chat-channel-create__go,
    .chat-convo-members__add-go, .project-correction-dialog__action,
    .room-transfer__cancel, .home-refresh-retry, .key-date-add,
    .card-detail-edit-button, .scout-chat-research__action,
    .scout-chat-work-record__action, .multi-device-chip__action,
    .room-work-activity__open, .update-banner__action, .pip-return,
    .chat-deck__btn, .deck-editor__btn, .settings-inline-save,
    .scout-chat-history-control__button, .scout-chat-msg__expand,
    .scout-chat-reply-state__retry, .chat-convo-head__tool, .drive-new,
    .drive-heading__action):active:not([disabled]) { transform: scale(var(--press-scale)); }
.btn:is([disabled], [aria-disabled="true"]) { opacity: .4; cursor: not-allowed; transform: none; }

/* Primary: action / on-action (dark white on near-black, light ember on white) */
.btn--primary,
:is(.room-empty__join, .lobby__submit, .lobby-pop__mint, .login-signin,
    .card-draft__accept, .scout-chat-work-record__action, .pip-return,
    .update-banner__action, .chat-deck__btn--primary, .deck-editor__btn--primary,
    .project-correction-dialog__action[data-primary="true"], .drive-new) {
  background: var(--accent); color: var(--on-accent);
}
.btn--primary:hover:not([disabled]),
:is(.room-empty__join, .lobby__submit, .lobby-pop__mint, .login-signin,
    .card-draft__accept, .scout-chat-work-record__action, .pip-return,
    .update-banner__action, .chat-deck__btn--primary, .deck-editor__btn--primary,
    .project-correction-dialog__action[data-primary="true"], .drive-new):hover:not([disabled]) {
  background: var(--accent-hover); color: var(--on-accent);
}
.btn--primary:active:not([disabled]),
:is(.room-empty__join, .lobby__submit, .lobby-pop__mint, .login-signin,
    .card-draft__accept, .scout-chat-work-record__action, .pip-return,
    .update-banner__action, .chat-deck__btn--primary, .deck-editor__btn--primary,
    .project-correction-dialog__action[data-primary="true"], .drive-new):active:not([disabled]) {
  background: var(--accent-press);
}
.settings-actions #settingsDone, #filesTool .drive-new { background: var(--accent); color: var(--on-accent); }
.settings-actions #settingsDone:hover, #filesTool .drive-new:hover { background: var(--accent-hover); color: var(--on-accent); }
/* one primary per surface: when the open section carries its own primary
   (Calendar "Reconnect"), Done steps down to the secondary fill */
.settings-panel:has(section[data-settings-section]:not([hidden]) .btn--primary) .settings-actions #settingsDone { background: var(--btn-secondary); color: var(--text-1); }
.settings-panel:has(section[data-settings-section]:not([hidden]) .btn--primary) .settings-actions #settingsDone:hover { background: var(--btn-secondary-hover); color: var(--text-1); }

/* Secondary: filled, never outlined. The fill is a text wash that equals
   surfaceInset on the canvas and still reads on a surfaceInset-coloured float. */
:root {
  --btn-secondary: color-mix(in srgb, var(--text-1) 8%, transparent);
  --btn-secondary-hover: color-mix(in srgb, var(--text-1) 13%, transparent);
}
.btn--secondary,
:is(.lobby__formcancel, .lobby-pop__cancel, .invite-pop__action, .login-passkey,
    .tray__btn, .approval__btn, .card-draft__dismiss, .drive-detail__action,
    .meeting-record__action, .chat-channel-create__go, .chat-convo-members__add-go,
    .project-correction-dialog__action:not([data-primary="true"]), .home-refresh-retry,
    .key-date-add, .card-detail-edit-button, .scout-chat-research__action,
    .multi-device-chip__action, .room-work-activity__open,
    .chat-deck__btn:not(.chat-deck__btn--primary), .settings-inline-save,
    .scout-chat-history-control__button, .scout-chat-msg__expand,
    .scout-chat-reply-state__retry, .chat-convo-head__tool) {
  background: var(--btn-secondary); color: var(--text-1);
}
.btn--secondary:hover:not([disabled]),
:is(.lobby__formcancel, .lobby-pop__cancel, .invite-pop__action, .login-passkey,
    .tray__btn, .approval__btn, .card-draft__dismiss, .drive-detail__action,
    .meeting-record__action, .chat-channel-create__go, .chat-convo-members__add-go,
    .project-correction-dialog__action:not([data-primary="true"]), .home-refresh-retry,
    .key-date-add, .card-detail-edit-button, .scout-chat-research__action,
    .multi-device-chip__action, .room-work-activity__open,
    .chat-deck__btn:not(.chat-deck__btn--primary), .settings-inline-save,
    .scout-chat-history-control__button, .scout-chat-msg__expand,
    .scout-chat-reply-state__retry, .chat-convo-head__tool):hover:not([disabled]) {
  background: var(--btn-secondary-hover); color: var(--text-1);
}
#chatTool .chat-channel-create__go { border: 0; border-radius: var(--r-full); box-shadow: none; background: var(--btn-secondary); color: var(--text-1); }
#chatTool .chat-channel-create__go:not(:disabled):hover { background: var(--btn-secondary-hover); }

/* Ghost: transparent, the universal 6% hover overlay */
.btn--ghost,
:is(.lobby__new, .room-transfer__cancel, .deck-editor__btn:not(.deck-editor__btn--primary), .drive-heading__action) {
  background: transparent; color: var(--text-1);
}
.btn--ghost:hover:not([disabled]),
:is(.lobby__new, .room-transfer__cancel, .deck-editor__btn:not(.deck-editor__btn--primary), .drive-heading__action):hover:not([disabled]) {
  background: color-mix(in srgb, var(--text-1) 6%, transparent); color: var(--text-1);
}
/* selected / pressed toolbar toggles are neutral, never ember */
:is(.deck-editor__btn, .btn--ghost)[aria-pressed="true"],
.document-editor__toolbar .deck-editor__btn[aria-pressed="true"],
.document-editor__image-align .deck-editor__btn[aria-pressed="true"] {
  background: var(--selection); color: var(--text-1); box-shadow: none;
}

/* Destructive (confirm only) and destructive quiet (settings rows) */
.btn--destructive { background: var(--danger-text); color: var(--bg-app); }
.btn--danger-quiet { background: var(--danger-soft); color: var(--danger-text); }

/* Text: an inline link-button */
.btn--text, .text-link { min-height: 36px; padding: 0 8px; border-radius: var(--r-full); font: 500 14px/1.2 var(--font-sans); background: transparent; }

/* Sizes. Compact = the small row/toolbar size (14/500, 32 visual, 44 on touch). */
.btn--sm,
:is(.tray__btn, .approval__btn, .card-draft__accept, .card-draft__dismiss,
    .chat-convo-members__add-go, .scout-chat-history-control__button,
    .scout-chat-msg__expand, .scout-chat-reply-state__retry, .key-date-add,
    .card-detail-edit-button, .scout-chat-research__action,
    .multi-device-chip__action, .invite-pop__action, .drive-heading__action,
    .chat-convo-head__tool, .chat-channel-create__go,
    .meeting-record__action) {
  min-height: 32px; padding: 0 12px; font: 500 14px/1.2 var(--font-sans);
}
.btn--lg, .room-empty__join { min-height: 48px; padding: 0 24px; font: var(--type-button); }
.room-empty .room-empty__join { min-height: 48px; border-radius: var(--r-full); font-weight: 500; transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.lobby__center > .room-empty__join, .room-empty .room-empty__join { width: 100%; }
@media (pointer: coarse) {
  .btn--sm,
  :is(.tray__btn, .approval__btn, .card-draft__accept, .card-draft__dismiss,
      .chat-convo-members__add-go, .scout-chat-history-control__button,
      .scout-chat-msg__expand, .scout-chat-reply-state__retry, .key-date-add,
      .card-detail-edit-button, .scout-chat-research__action,
      .multi-device-chip__action, .invite-pop__action, .drive-heading__action,
      .chat-convo-head__tool, .chat-channel-create__go,
      .meeting-record__action) { min-height: 44px; }
}
/* deck presenter / download actions keep their 40 hit */
.chat-deck__btn { min-height: 40px; }
@media (pointer: coarse) { .chat-deck__btn { min-height: 44px; } }

/* the deck / document editor toolbar keeps a 40 hit on a fine pointer
   (dense editing chrome, test-pinned) at the compact 14/500 label */
.deck-editor__btn { min-height: 40px; padding: 0 14px; font: 500 14px/1.2 var(--font-sans); }
@media (pointer: coarse) { .deck-editor__btn { min-height: 44px; } }

/* Icon-only button: a circle, 36 visual / 44 touch, glyph 20 */
.btn--icon,
:is(.deck-editor__btn--icon, .chat-convo-head__tool--icon) {
  width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; border-radius: 50%;
}
.deck-editor__btn--icon { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
@media (pointer: coarse) {
  .btn--icon, :is(.deck-editor__btn--icon, .chat-convo-head__tool--icon) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}
.chat-convo-head__tool--icon { background: transparent; }
.chat-convo-head__tool--icon:hover:not([disabled]) { background: color-mix(in srgb, var(--text-1) 6%, transparent); }

/* ========================================================================
   1b. Glass circle — floating back / close / bell over content.
   One reusable class. The legacy id list in workspace.css carries the same
   recipe for markup that predates the class.
   ======================================================================== */
/* display at zero specificity: any surface rule that hides the button wins */
:where(.glass-btn) { display: inline-grid; }
.glass-btn {
  position: relative; place-items: center; flex: none;
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 50%; outline: 0;
  background: color-mix(in srgb, var(--text-1) 8%, transparent); color: var(--text-1);
  box-shadow: none;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.glass-btn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.glass-btn:hover { background: color-mix(in srgb, var(--text-1) 14%, transparent); }
.glass-btn:active { transform: scale(.92); }
.glass-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.glass-btn[hidden] { display: none; }
.glass-btn svg { width: 20px; height: 20px; }
@media (prefers-reduced-transparency: reduce) {
  .glass-btn { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-3); }
}

/* ========================================================================
   2. Segmented control — pill track, raised neutral thumb, 14/500.
   Replaces 7 segmented impls + 3 tab controls.
   ======================================================================== */
.seg,
:is(.room-meeting-tabs, .memory-views, .intel-seg, .files-seg, .drive-seg,
    .stage-segmented, .settings-sheet-theme, .deck-editor__tabs) {
  align-items: center; gap: 2px;
  padding: 2px; min-height: 36px;
  border: 0; border-radius: var(--r-full);
  background: var(--chip-fill, color-mix(in srgb, var(--text-1) 7%, transparent)); box-shadow: none;
}
.seg__btn,
:is(.room-meeting-tab, .memory-views__tab, .intel-seg__btn, .files-seg__btn,
    .drive-seg__btn, .stage-segmented button, .settings-sheet-theme button,
    .deck-editor__tab) {
  flex: 1 1 0; align-items: center; justify-content: center; gap: 6px;
  min-width: 64px; min-height: 32px; height: auto; padding: 0 14px;
  border: 0; border-radius: var(--r-full);
  background: transparent; color: var(--text-2); box-shadow: none;
  font: 500 14px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none;
  cursor: pointer;
  transition: background-color var(--dur-med) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
}
:is(.seg__btn,
    .room-meeting-tab, .memory-views__tab, .intel-seg__btn, .files-seg__btn,
    .drive-seg__btn, .stage-segmented button, .settings-sheet-theme button,
    .deck-editor__tab):hover:not([disabled]):not([aria-selected="true"]):not([aria-pressed="true"]):not([aria-checked="true"]):not(.is-active):not(.is-selected) {
  background: transparent; color: var(--text-1);
}
:is(.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"], .seg__btn.is-active,
    .room-meeting-tab.is-selected, .memory-views__tab.is-active, .intel-seg__btn[aria-pressed="true"],
    .files-seg__btn.is-active, .drive-seg__btn[aria-checked="true"], .stage-segmented button[aria-pressed="true"],
    .settings-sheet-theme button[aria-pressed="true"], .deck-editor__tab[aria-selected="true"]) {
  background: var(--surface-1); color: var(--text-1); box-shadow: var(--shadow-1);
}
html[data-theme="dark"] :is(.seg__btn[aria-selected="true"], .seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"], .seg__btn.is-active,
    .room-meeting-tab.is-selected, .memory-views__tab.is-active, .intel-seg__btn[aria-pressed="true"],
    .files-seg__btn.is-active, .drive-seg__btn[aria-checked="true"], .stage-segmented button[aria-pressed="true"],
    .settings-sheet-theme button[aria-pressed="true"], .deck-editor__tab[aria-selected="true"]) {
  background: var(--bubble-own);
}
:is(.seg__btn, .room-meeting-tab, .memory-views__tab, .intel-seg__btn, .files-seg__btn,
    .drive-seg__btn, .stage-segmented button, .settings-sheet-theme button, .deck-editor__tab):focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
:is(.seg__btn, .drive-seg__btn)[disabled] { opacity: .4; cursor: default; }
@media (pointer: coarse) {
  .seg, :is(.room-meeting-tabs, .memory-views, .intel-seg, .files-seg, .drive-seg,
      .stage-segmented, .settings-sheet-theme, .deck-editor__tabs) { min-height: 44px; }
  .seg__btn, :is(.room-meeting-tab, .memory-views__tab, .intel-seg__btn, .files-seg__btn,
      .drive-seg__btn, .stage-segmented button, .settings-sheet-theme button, .deck-editor__tab) { min-height: 44px; }
}
:where(.seg, .seg__btn) { display: inline-flex; }
/* id-scoped legacy stacks the segmented thumb must still win over */
#appShell[data-tool="room"] #roomChatPanel .room-meeting-tab { border-radius: var(--r-full); font: 500 14px/1.2 var(--font-sans); min-height: 32px; }
#appShell[data-tool="room"] #roomChatPanel .room-meeting-tabs { border-radius: var(--r-full); }
#filesTool .files-seg { border: 0; border-radius: var(--r-full); background: var(--chip-fill); height: auto; }

/* Tabs / single-choice chips on the same neutral selection (no ember).
   Chip fills are text washes so they read on the canvas AND on a float whose
   glass is the surfaceInset colour (⌘K, menus). */
:root {
  --chip-fill: color-mix(in srgb, var(--text-1) 7%, transparent);
  --chip-hover: color-mix(in srgb, var(--text-1) 11%, transparent);
  --chip-selected: color-mix(in srgb, var(--text-1) 18%, transparent);
}
:is(.global-search__scope, .drive-scope-strip__item, .os-assistant__mode,
    .memory-inspector__filter, .lobby__chip, .video-look-chip) {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-full);
  background: var(--chip-fill); color: var(--text-2); box-shadow: none;
  font: 500 14px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none;
}
:is(.global-search__scope, .drive-scope-strip__item, .os-assistant__mode,
    .memory-inspector__filter, .lobby__chip, .video-look-chip):hover:not([disabled]) {
  background: var(--chip-hover); color: var(--text-1);
}
:is(.global-search__scope[aria-pressed="true"], .drive-scope-strip__item.is-active,
    .os-assistant__mode[aria-pressed="true"], .memory-inspector__filter[data-active="true"],
    .lobby__chip[aria-checked="true"], .lobby__chip[aria-pressed="true"], .video-look-chip.is-selected) {
  background: var(--chip-selected); color: var(--text-1); font-weight: 600; box-shadow: none;
}
#globalSearchRail .global-search__scope { border: 0; border-radius: var(--r-full); background: var(--chip-fill); color: var(--text-2); box-shadow: none; }
#globalSearchRail .global-search__scope:hover { background: var(--chip-hover); color: var(--text-1); }
#globalSearchRail .global-search__scope[aria-pressed="true"] { background: var(--chip-selected); color: var(--text-1); font-weight: 600; box-shadow: none; }
@media (pointer: coarse) {
  :is(.global-search__scope, .drive-scope-strip__item, .os-assistant__mode,
      .memory-inspector__filter, .lobby__chip, .video-look-chip) { min-height: 44px; }
}

/* ========================================================================
   3. Switch — one track, never ember. 44×26, knob 20, 120ms.
   `.switch` on an <input type=checkbox>; the span-built lobby / green-room
   switches and the Settings toggles share the same recipe.
   ======================================================================== */
input.switch,
.settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 44px; height: 26px; margin: 0; border: 0; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-1) 18%, transparent);
  cursor: pointer; transition: background-color var(--dur-fast) var(--ease);
}
input.switch::before,
.settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-1); box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
input.switch:checked,
.settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]:checked { background: var(--text-1); }
input.switch:checked::before,
.settings-body :is(.push-setting, .wake-word-setting) input[type="checkbox"]:checked::before { transform: translateX(18px); background: var(--bg-app); }
input.switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
input.switch:disabled { opacity: .4; cursor: default; }
/* span-built switches: the real <input> stays visually hidden on top */
:is(.greenroom__switch, .lobby__switch) :is(.greenroom__switch-track, .lobby__switch-track) {
  position: relative; display: inline-block; flex: none;
  width: 44px; height: 26px; border: 0; border-radius: var(--r-full);
  background: color-mix(in srgb, var(--text-1) 18%, transparent);
  transition: background-color var(--dur-fast) var(--ease);
}
:is(.greenroom__switch, .lobby__switch) :is(.greenroom__switch-thumb, .lobby__switch-thumb) {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface-1); box-shadow: var(--shadow-1);
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
:is(.greenroom__switch, .lobby__switch) input:checked ~ :is(.greenroom__switch-track, .lobby__switch-track) { background: var(--text-1); }
:is(.greenroom__switch, .lobby__switch) input:checked ~ :is(.greenroom__switch-track, .lobby__switch-track) :is(.greenroom__switch-thumb, .lobby__switch-thumb) { transform: translateX(18px); background: var(--bg-app); }
:is(.greenroom__switch, .lobby__switch) input:focus-visible ~ :is(.greenroom__switch-track, .lobby__switch-track) { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  input.switch::before, :is(.greenroom__switch-thumb, .lobby__switch-thumb) { transition: none; }
}

/* ========================================================================
   4. Hearth glow grain — a static, masked noise layer that breaks the
   8-bit banding of the warm radial on dark displays. No animation; one
   160px tile (SVG feTurbulence, decoded once).
   ======================================================================== */
#appShell.is-authed::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0; transition: opacity 400ms var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0  1 0 0 0 0  1 0 0 0 0  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(120% 60% at 50% 100%, #000 0%, transparent 78%);
  mask-image: radial-gradient(120% 60% at 50% 100%, #000 0%, transparent 78%);
}
/* grain amplitude ≈ ±1–2 levels over the glow: enough to dither the bands,
   never visible as texture at 100% zoom */
#appShell.is-authed:is([data-tool="office"], [data-tool="room"]:not(.is-in-room))::after { opacity: calc(var(--hearth-glow, 0) * .22); }
html[data-theme="dark"] #appShell.is-authed:is([data-tool="office"], [data-tool="room"]:not(.is-in-room))::after { opacity: calc(var(--hearth-glow, 0) * .35); mix-blend-mode: overlay; }

/* ========================================================================
   5. List row — conversation rows: the unread dot trails line 2 under the
   time, so it never crowds the title.
   ======================================================================== */
.chat-thread-item__line2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-thread-item__line2 > .chat-thread-item__preview { flex: 1 1 auto; min-width: 0; }
.chat-thread-item__line2 > .chat-thread-item__unread-dot { flex: none; margin-left: auto; width: 8px; height: 8px; }

/* glyphs inside any kit button never shrink (a flex item otherwise squeezes
   an icon to its stroke) */
:is(.btn, .glass-btn, .deck-editor__btn, .chat-convo-head__tool, .chat-deck__btn) > svg { flex: none; }
:is(.btn--icon, .deck-editor__btn--icon, .chat-convo-head__tool--icon) > svg { width: 20px; height: 20px; }

/* ========================================================================
   6. Call control — ONE class for every control that floats over video:
   dock seats, mini-call (PiP) controls, green-room / guest-gate circles,
   tile-corner buttons. Calls are always dark (TM media glass in both
   themes): pill, 44 hit minimum, glyph 20, neutral off / selected, press
   0.92 (glass circle), 120ms token ease. Leave = solid destructive red.
   Lifted (3 ids) over the legacy per-id dock stack; see file header.
   ======================================================================== */
:root {
  /* white-on-media overlays (proposed tokens; identical in both themes
     because calls always sit on the dark stage) */
  --call-ctl-fg: #F5F5F7;
  --call-ctl-hover: rgb(255 255 255 / .10);
  --call-ctl-press: rgb(255 255 255 / .16);
  --call-ctl-off: rgb(255 255 255 / .14);
  --call-ctl-selected: rgb(255 255 255 / .20);
}
.call-ctl:not(#k):not(#k):not(#k) {
  place-items: center; place-content: center; flex: none;
  width: 48px; min-width: 48px; height: 48px; min-height: 48px; padding: 0;
  border: 0; border-radius: var(--r-full); outline: 0;
  background: transparent; color: var(--call-ctl-fg);
  box-shadow: none; filter: none;
  font: 500 12px/1 var(--font-sans); letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
/* seats own their box; tile-corner (xs) buttons keep their absolute corner
   placement and hover-reveal opacity from the tile rules */
.call-ctl:not(.call-ctl--xs):not(#k):not(#k):not(#k) { position: relative; }
.call-ctl:not(#k):not(#k):not(#k) svg { width: 20px; height: 20px; flex: none; opacity: 1; stroke-width: 1.75; }
@media (hover: hover) and (pointer: fine) {
  .call-ctl:not(#k):not(#k):not(#k):hover:not(:disabled) { background: var(--call-ctl-hover); transform: none; filter: none; }
}
.call-ctl:not(#k):not(#k):not(#k):active:not(:disabled) { background: var(--call-ctl-press); transform: scale(.92); }
.call-ctl:not(#k):not(#k):not(#k):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.call-ctl:not(#k):not(#k):not(#k):disabled { opacity: .45; cursor: default; transform: none; }
.call-ctl:not(#k):not(#k):not(#k)[hidden] { display: none; }
/* off (mic muted, camera off): neutral lit glass + the slashed glyph — never
   a red or ember wash. The dock marks off with aria-pressed=true ("Unmute"),
   the green room with aria-pressed=false ("mic is off"), the mini call .is-off */
:is(#muteMic, #toggleCamera).call-ctl:not(#k):not(#k):not(#k)[aria-pressed="true"],
.greenroom__ctl.call-ctl:not(#k):not(#k):not(#k)[aria-pressed="false"],
.pip-control.call-ctl:not(#k):not(#k):not(#k).is-off {
  background: var(--call-ctl-off); color: var(--call-ctl-fg); box-shadow: none;
}
/* selected / engaged (sharing, chat open, More open, pinned): neutral */
:is(#screenShare, #roomChatToggle, #roomRecordToggle).call-ctl:not(#k):not(#k):not(#k)[aria-pressed="true"],
.call-ctl:not(#k):not(#k):not(#k)[aria-expanded="true"],
.pin-speaker.call-ctl:not(#k):not(#k):not(#k)[aria-pressed="true"] {
  background: var(--call-ctl-selected); color: var(--call-ctl-fg); box-shadow: none;
}
/* Leave: the only solid red in the room */
.call-ctl--leave:not(#k):not(#k):not(#k) { width: 60px; min-width: 60px; background: var(--call-leave-solid); color: var(--on-call-leave); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .call-ctl--leave:not(#k):not(#k):not(#k):hover:not(:disabled) { background: var(--call-leave-fill-hover); }
}
.call-ctl--leave:not(#k):not(#k):not(#k):active:not(:disabled) { background: var(--call-leave-fill-press); transform: scale(.98); }
#leave.call-ctl svg { transform: rotate(135deg); }
/* Floating: a circle that sits directly on video (green room, tile corners) */
.call-ctl--float:not(#k):not(#k):not(#k) {
  background: var(--glass-media);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
@media (hover: hover) and (pointer: fine) {
  .call-ctl--float:not(#k):not(#k):not(#k):hover:not(:disabled) { background: linear-gradient(var(--call-ctl-hover), var(--call-ctl-hover)), var(--glass-media); }
}
.greenroom__ctl.call-ctl--float:not(#k):not(#k):not(#k)[aria-pressed="false"] { background: linear-gradient(var(--call-ctl-off), var(--call-ctl-off)), var(--glass-media); }
.pin-speaker.call-ctl--float:not(#k):not(#k):not(#k)[aria-pressed="true"] { background: linear-gradient(var(--call-ctl-selected), var(--call-ctl-selected)), var(--glass-media); }
@media (prefers-reduced-transparency: reduce) {
  .call-ctl--float:not(#k):not(#k):not(#k) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--stride-constant-stage-chrome, #1C1C20); }
}
/* Sizes: sm = mini call (44 exact), xs = tile corner (36 on a fine pointer,
   44 on touch) */
.call-ctl--sm:not(#k):not(#k):not(#k) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.call-ctl--sm.call-ctl--leave:not(#k):not(#k):not(#k) { width: 52px; min-width: 52px; }
.call-ctl--xs:not(#k):not(#k):not(#k) { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
.call-ctl--xs:not(#k):not(#k):not(#k) svg { width: 18px; height: 18px; }
.call-ctl--xs:not(#k):not(#k):not(#k)::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
@media (pointer: coarse) {
  .call-ctl--xs:not(#k):not(#k):not(#k) { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .call-ctl:not(#k):not(#k):not(#k), .call-ctl:not(#k):not(#k):not(#k):active { transition: none; transform: none; }
}

/* The dock capsule and the mini call ride TM media glass in BOTH themes
   (the light putty capsule over dark video was drift). Hairline only in the
   Reduce Transparency fallback. */
#appShell.is-in-room[data-tool="room"] .meeting-bar .controls:not(#k) {
  background: var(--glass-media);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--call-glass-shadow); border: 0; opacity: 1;
  padding: 8px; gap: 8px;
}
#appShell.is-in-room[data-tool="room"] .meeting-bar .controls:not(#k) .controls__divider { background: rgb(255 255 255 / .16); }
/* one capsule: the bar that holds it is never a second glass panel */
#appShell.is-in-room[data-tool="room"] .meeting-bar:not(#k) { background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pip-meeting:not(#k) {
  background: var(--glass-media); color: var(--call-ctl-fg);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow-3); border: 0; border-radius: var(--r-xl);
}
.pip-meeting:not(#k) :is(.pip-meeting__title, #pipTitle) { color: var(--call-ctl-fg); }
.pip-meeting:not(#k) :is(.pip-meeting__status, #pipStatus) { color: rgb(245 245 247 / .72); font: 500 12px/1.2 var(--font-sans); }
.pip-meeting:not(#k) .pip-return { min-height: 44px; border-radius: var(--r-full); font: var(--type-button); background: var(--call-ctl-fg); color: #0B0B0D; }
@media (prefers-reduced-transparency: reduce) {
  #appShell.is-in-room[data-tool="room"] .meeting-bar .controls:not(#k), .pip-meeting:not(#k) {
    -webkit-backdrop-filter: none; backdrop-filter: none; background: #1C1C20; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), var(--call-glass-shadow);
  }
}

/* Pre-join preview tile (lobby + guest gate share it): the sheet radius,
   the stage tile fill (not pure black), no border, no ember hover ring. */
#appShell .greenroom__tile:not(#k),
.greenroom--gate .greenroom__tile:not(#k),
.greenroom--gate .greenroom__tile:not(#k):hover {
  border: 0; border-radius: var(--r-xl); box-shadow: none; background: var(--tile-fill);
}
.greenroom--gate .greenroom__ctl:not(#k):not(#k):not(#k):not(#k) { border: 0; }
.greenroom__micbadge:not(#k) { background: var(--glass-media); color: var(--call-ctl-fg); }

/* ========================================================================
   7. Avatar — one circle, neutral monogram (surfaceInset + text, initials
   at 40% of the diameter), no ring or border, never an ember fill.
   Documented sizes: 20 (chips, stack) · 24 (thread faces, owner chip) ·
   32 (small: author, rail account, mention row, face stack) · 40 (default:
   rows, menus, notifications) · 64 (pre-join). Set with --avatar-size or
   .avatar--20/24/32/40/64. Replaces 16 per-surface avatar classes.
   Lifted one id over the legacy per-surface fills.
   Fill: a 10% text wash, which reads as surfaceInset on the canvas AND
   stays visible on a surfaceInset-coloured float (menus, notifications).
   ======================================================================== */
:root { --avatar-fill: color-mix(in srgb, var(--text-1) 10%, transparent); }
.avatar:not(#k),
:is(.topbar__avatar, .account-menu__avatar, .settings-sheet-avatar,
    .chat-member-avatar, .chat-channel-activity-popover__avatar,
    .scout-mention-popover__disc, .research-agent__avatar, .card-owner-chip,
    .home-door__face, .notification-item__identity, .greenroom__avatar):not(#k) {
  --avatar-size: 40px;
  place-items: center; place-content: center; flex: none; overflow: hidden;
  width: var(--avatar-size); min-width: var(--avatar-size); height: var(--avatar-size); min-height: 0;
  padding: 0; border: 0; border-radius: 50%; box-shadow: none;
  background: var(--avatar-fill); color: var(--text-1);
  font: 600 calc(var(--avatar-size) * .4)/1 var(--font-sans); letter-spacing: 0; text-transform: uppercase;
}
:is(.avatar, .topbar__avatar, .account-menu__avatar, .settings-sheet-avatar, .notification-item__identity) img:not([hidden]) {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.avatar--20:not(#k), .chat-member-avatar:not(#k) { --avatar-size: 20px; }
.avatar--24:not(#k), .card-owner-chip:not(#k) { --avatar-size: 24px; }
.avatar--32:not(#k),
:is(.topbar__avatar, .chat-channel-activity-popover__avatar, .scout-mention-popover__disc,
    .research-agent__avatar, .home-door__face):not(#k) { --avatar-size: 32px; }
.avatar--40:not(#k),
:is(.account-menu__avatar, .settings-sheet-avatar, .notification-item__identity):not(#k) { --avatar-size: 40px; }
.avatar--64:not(#k), .greenroom__avatar:not(#k) { --avatar-size: 64px; }
/* the rail account avatar was a 26px accent (ember / white) disc */
#appShell.is-authed .tool-rail__account-button .topbar__avatar:not(#k) {
  --avatar-size: 32px; width: 32px; min-width: 32px; height: 32px;
  background: var(--avatar-fill); color: var(--text-1); border: 0; box-shadow: none;
  font: 600 13px/1 var(--font-sans);
}
:root[data-theme="dark"] .notification-item__identity:not(#k) { background: var(--avatar-fill); color: var(--text-1); box-shadow: none; }
/* call pre-join: the stage monogram tokens (calls are always dark) */
.greenroom__avatar:not(#k) { background: var(--tile-monogram-fill); color: var(--tile-monogram-text); }
/* face stacks: overlap −25% with a 2px knock-out ring in the ground colour */
.avatar-stack { display: inline-flex; align-items: center; }
/* display at zero specificity (a surface may hide an avatar / option) */
:where(.avatar, .topbar__avatar, .account-menu__avatar, .settings-sheet-avatar,
    .chat-member-avatar, .chat-channel-activity-popover__avatar,
    .scout-mention-popover__disc, .research-agent__avatar, .card-owner-chip,
    .home-door__face, .notification-item__identity, .greenroom__avatar) { display: inline-grid; }
:where(.picker-list__option, .popover .bf-menu__item) { display: flex; }
.avatar-stack > .avatar:not(#k),
.home-door__face:not(#k), .chat-member-avatar:not(#k) { box-shadow: 0 0 0 2px var(--bg-app); }
.avatar-stack > .avatar + .avatar { margin-left: calc(var(--avatar-size) * -.25); }
.card-owner-chip.is-unassigned:not(#k) { background: transparent; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }

/* ========================================================================
   8. List row — one row for conversations, notifications, ⌘K results,
   in-rail message search, files, Drive nav, Settings nav and meetings.
   Transparent at rest, 6% hover overlay, neutral Selected fill (never
   ember, never a border or a card lift), radius 12 (nav rows: pill),
   120ms. Lifted one id over the per-surface stacks (#chatTool, #filesTool).
   ======================================================================== */
.list-row:not(#k),
:is(.chat-thread-item, .notification-item, .global-search__row, .chat-search-result,
    .files-row, .memory-log__row):not(#k) {
  border: 0; border-radius: var(--r-lg); box-shadow: none; outline-offset: -2px;
  background: transparent;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
:is(.drive-nav__item, .settings-nav__item, .list-row--nav):not(#k) {
  border: 0; border-radius: var(--r-full); box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
@media (hover: hover) {
  .list-row:not(#k):hover,
  :is(.chat-thread-item, .notification-item, .global-search__row, .chat-search-result,
      .files-row, .memory-log__row, .drive-nav__item, .settings-nav__item):not(#k):hover {
    background: color-mix(in srgb, var(--text-1) 6%, transparent); box-shadow: none; border-color: transparent;
  }
}
.notification-item:not(#k):focus-within { background: color-mix(in srgb, var(--text-1) 6%, transparent); box-shadow: none; }
/* selected: the neutral Selected role, text 600 */
:is(.list-row.is-selected, .list-row[aria-selected="true"], .list-row[aria-current="page"], .list-row[aria-current="true"],
    .chat-thread-item[aria-pressed="true"], .chat-thread-item.is-active,
    .global-search__row.is-active, .chat-search-result.is-active,
    .drive-nav__item.is-active, .settings-nav__item[aria-current="true"]):not(#k),
:is(.list-row.is-selected, .chat-thread-item[aria-pressed="true"], .global-search__row.is-active,
    .chat-search-result.is-active, .drive-nav__item.is-active, .settings-nav__item[aria-current="true"]):not(#k):hover {
  background: var(--selection); color: var(--text-1); box-shadow: none; border-color: transparent;
}
:is(.drive-nav__item.is-active, .settings-nav__item[aria-current="true"]):not(#k) { font-weight: 600; }
:is(.list-row, .chat-thread-item, .global-search__row, .chat-search-result, .drive-nav__item, .settings-nav__item):not(#k):active { transform: scale(var(--press-scale)); }
:is(.list-row, .chat-thread-item, .global-search__row, .chat-search-result, .files-row,
    .drive-nav__item, .settings-nav__item):not(#k):focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  :is(.list-row, .chat-thread-item, .global-search__row, .chat-search-result, .drive-nav__item, .settings-nav__item):not(#k):active { transform: none; }
}

/* notification row anatomy: avatar 40 · actor/time/text · trailing controls;
   the unread dot is an 8px signal dot (it may sit on the avatar edge) */
.notification-item:not(#k) { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 10px 12px; min-height: 64px; }
.notification-item__identity:not(#k) { overflow: visible; }
.notification-item__dot:not(#k) { width: 8px; height: 8px; background: var(--unread); box-shadow: 0 0 0 2px var(--popover-glass-fill, var(--surface-1)); }
.notification-item__author:not(#k) { font: 600 14px/1.3 var(--font-sans); }
.notification-item__control:not(#k) { border-radius: 50%; }
.notification-item__control:not(#k) svg { width: 20px; height: 20px; }

/* ========================================================================
   9. Picker list — ONE list for @-mentions (composer, room chat, thread
   reply, documents), the member / attendee picker and the <select>
   enhancer (.stride-select). T2 float: popover glass + blur, popover
   shadow, radius 12, padding 4, no border. Options: 36 (44 on touch),
   radius 8 inset, 14/500, neutral highlight for hover / keyboard / active.
   ======================================================================== */
.picker-list:not(#k) {
  border: 0; border-radius: var(--r-lg); padding: 4px;
  background: var(--popover-glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--popover-shadow);
  color: var(--text-1);
}
@media (prefers-reduced-transparency: reduce) {
  .picker-list:not(#k) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--popover-shadow); }
}
.picker-list__option:not(#k) {
  align-items: center; gap: 12px; width: 100%;
  min-height: 36px; height: auto; padding: 4px 12px;
  border: 0; border-radius: var(--r-md); box-shadow: none;
  background: transparent; color: var(--text-1);
  font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
@media (pointer: coarse) { .picker-list__option:not(#k) { min-height: 44px; } }
.picker-list__option:not(#k):is(:hover, .is-active, [aria-selected="true"], :focus-visible) {
  background: var(--chip-selected, color-mix(in srgb, var(--text-1) 12%, transparent)); color: var(--text-1); outline: none;
}
.picker-list__option:not(#k)[aria-disabled="true"], .picker-list__option:not(#k):disabled { opacity: .4; cursor: default; }
.picker-list__option:not(#k) svg { width: 20px; height: 20px; flex: none; color: var(--text-2); }
/* the select enhancer's check trails the row, 16, text colour */
.picker-list__option:not(#k) .stride-select__check { margin-left: auto; width: 16px; height: 16px; color: var(--text-1); }
/* document mention label row: the section header (label 12/500 text3) */
.picker-list:not(#k) .document-mention-popover__label { padding: 8px 12px 4px; color: var(--text-3); font: 500 12px/1.2 var(--font-sans); }

/* ========================================================================
   10. Popover — the shared anchored panel (T2 float): popover glass +
   blur, popover shadow, radius 12, no border; enters 220ms scale .96 +
   fade from the trigger. The lobby ⋯ (`.lobby-pop`) is its first adopter:
   a real menu at the top level (bf-menu items), a dialog for its panels.
   ======================================================================== */
.popover:not(#k) {
  border: 0; border-radius: var(--r-lg); padding: 4px;
  background: var(--popover-glass-fill); color: var(--text-1);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--popover-shadow);
  transform-origin: top right;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
@starting-style { .popover:not(#k) { opacity: 0; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) { .popover:not(#k) { transition: opacity var(--dur-fast) linear; } }
@media (prefers-reduced-transparency: reduce) {
  .popover:not(#k) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-1), var(--popover-shadow); }
}
.popover:not(#k) .bf-menu__item {
  align-items: center; justify-content: flex-start; gap: 12px; width: 100%;
  min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--text-1);
  font: 500 14px/1.3 var(--font-sans); letter-spacing: 0; text-align: left;
}
@media (pointer: coarse) { .popover:not(#k) .bf-menu__item { min-height: 44px; } }
.popover:not(#k) .bf-menu__item:is(:hover, :focus-visible) { background: var(--chip-selected); color: var(--text-1); outline: none; }
.popover:not(#k) .bf-menu__item:is(.lobby-pop__item--danger, [data-danger="true"]) { color: var(--danger-text); }
.popover:not(#k) .bf-menu__item:is(.lobby-pop__item--danger, [data-danger="true"]):is(:hover, :focus-visible) { background: var(--danger-soft); }
/* groups are separated by a gap, never a rule line */
.popover:not(#k) .bf-menu__separator { display: block; height: 0; margin: 4px 0; background: none; border: 0; }
/* the lobby panels: theme tokens (the white literals are the in-call
   invite-pop's, which always sits on dark media glass) */
.lobby-pop:not(#k) :is(.lobby-pop__consent, .lobby-pop__minted) { padding: 12px; gap: 12px; }
.lobby-pop:not(#k) .lobby-pop__consent-copy { border-radius: var(--r-md); padding: 10px 12px; font: 500 14px/1.45 var(--font-sans); }
.lobby-pop:not(#k) :is(.lobby-pop__caption, .lobby-pop__note, .lobby-pop__linkmeta) { color: var(--text-3); font: 500 12px/1.35 var(--font-sans); letter-spacing: 0; }
.lobby-pop:not(#k) .lobby-pop__linklabel { color: var(--text-1); font: 600 14px/1.3 var(--font-sans); }
.lobby-pop:not(#k) .lobby-pop__linkrow { border-top: 0; padding: 8px 12px; }
.lobby-pop:not(#k) .lobby-pop__linkout { height: 36px; border: 0; border-radius: var(--r-md); background: var(--btn-secondary); color: var(--text-1); font: 500 12px/1 var(--font-mono); }
.lobby-pop:not(#k) .lobby-pop__revoke { min-height: 36px; padding: 0 8px; color: var(--text-2); font: 500 14px/1.2 var(--font-sans); }
.lobby-pop:not(#k) .lobby-pop__revoke:hover { color: var(--text-1); }
.lobby-pop:not(#k) .lobby-pop__actions { gap: 8px; padding: 4px 0 0; }
.lobby-pop:not(#k) .lobby-pop__actions > * { flex: 1 1 0; }

/* ========================================================================
   11. Composer shell — ONE shell for Home, conversation, room chat and the
   thread reply: T1 glass (glassPanel + blur 24), radius 20, borderless
   (the hairline only in the Reduce Transparency fallback), --shadow-1;
   focus shows as a quiet 2px ring. Send is the 44 primary circle.
   ======================================================================== */
:root {
  --composer-fill: color-mix(in srgb, var(--surface-1) 93%, transparent);
  /* the floating lift; light needs a touch more than --shadow-1 to lift a
     white shell off the Daybreak ground */
  --composer-shadow: 0 1px 2px rgb(90 45 15 / .06), 0 6px 20px rgb(90 45 15 / .09);
}
html[data-theme="dark"] { --composer-shadow: var(--shadow-1); }
:is(#chatTool .scout-chat-form, #roomChatPanel .scout-chat-form):not(#k),
.chat-context-reply__composer:not(#k),
.stride-operating-home .home-scout-composer:not(#k) {
  border: 0; border-radius: var(--r-xl);
  background: var(--composer-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--composer-shadow);
  transition: box-shadow var(--dur-fast) var(--ease);
}
:is(#chatTool .scout-chat-form, #roomChatPanel .scout-chat-form):not(#k):focus-within,
.chat-context-reply__composer:not(#k):focus-within,
.stride-operating-home .home-scout-composer:not(#k):focus-within {
  outline: 0; box-shadow: var(--composer-shadow), 0 0 0 1.5px color-mix(in srgb, var(--text-1) 22%, transparent);
}
@media (prefers-reduced-transparency: reduce) {
  :is(#chatTool .scout-chat-form, #roomChatPanel .scout-chat-form):not(#k),
  .chat-context-reply__composer:not(#k),
  .stride-operating-home .home-scout-composer:not(#k) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-1); }
}
/* the one send: a 44 primary circle, glyph 20 */
:is(#chatTool .scout-chat-send, #roomChatPanel .scout-chat-send, #chatContextReplySend, .home-scout-composer__send):not(#k) {
  flex: none; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 0; border-radius: 50%; box-shadow: none;
  place-items: center; place-content: center;
  background: var(--accent); color: var(--on-accent);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
:is(#chatTool .scout-chat-send, #roomChatPanel .scout-chat-send, #chatContextReplySend, .home-scout-composer__send):not(#k) svg { width: 20px; height: 20px; }
@media (hover: hover) {
  :is(#chatTool .scout-chat-send, #roomChatPanel .scout-chat-send, #chatContextReplySend, .home-scout-composer__send):not(#k):hover:not(:disabled) { background: var(--accent-hover); transform: none; }
}
:is(#chatTool .scout-chat-send, #roomChatPanel .scout-chat-send, #chatContextReplySend, .home-scout-composer__send):not(#k):active:not(:disabled) { transform: scale(.92); }
/* Stop (while Scout streams): same circle, secondary fill, square glyph */
:is(#chatTool, #roomChatPanel) .scout-chat-send[data-mode="stop"]:not(#k) { background: var(--btn-secondary); color: var(--text-1); }

/* ========================================================================
   12. Skeleton — one shape vocabulary, matched to the final layout:
   .skeleton--line (12 high pill bars), .skeleton--circle (avatar slots).
   Fill surfaceInset (a text wash so it reads on any surface); a soft
   opacity pulse (1.4s, token ease); static under Reduce Motion.
   ======================================================================== */
.skeleton {
  display: block; flex: none;
  background: color-mix(in srgb, var(--text-1) 8%, transparent);
  border-radius: var(--r-full);
  animation: stride-skeleton 1.4s var(--ease) infinite alternate;
}
.skeleton--line { height: 12px; }
.skeleton--circle { width: 32px; height: 32px; border-radius: 50%; }
@keyframes stride-skeleton { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
/* thread-list skeleton = the real row (58 tall, 32 glyph, two bars) */
.chat-thread-skeleton:not(#k) { min-height: 58px; background: transparent; pointer-events: none; }
.chat-thread-skeleton__icon.skeleton { width: 32px; height: 32px; border-radius: 50%; animation-name: stride-skeleton; animation-duration: 1.4s; }
.chat-thread-skeleton__line.skeleton { height: 10px; animation-name: stride-skeleton; animation-duration: 1.4s; }
/* conversation skeleton = the flat attributed timeline */
.scout-chat-loading { gap: 24px; }
.scout-chat-loading__msg { display: grid; gap: 8px; }
.scout-chat-loading__id { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.scout-chat-loading__disc.skeleton { width: 24px; height: 24px; }
.scout-chat-loading__name.skeleton { width: 88px; height: 12px; }
.scout-chat-loading__line.skeleton { height: 12px; max-width: 100%; }

/* ========================================================================
   13. Empty state — one quiet pattern: optional 40 glyph (text3, no tile),
   an optional title, one line of body (16 text2), at most one secondary
   action. Sentence case; no uppercase eyebrow, no boxes.
   ======================================================================== */
.empty-state { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--text-2); }
.empty-state__glyph { width: 40px; height: 40px; color: var(--text-3); }
.empty-state__title { margin: 0; color: var(--text-1); font: 600 17px/1.3 var(--font-sans); }
.empty-state__body { margin: 0; color: var(--text-2); font: 400 16px/1.45 var(--font-sans); text-wrap: balance; }
.empty-state__action { margin-top: 8px; }
/* adopters */
.scout-chat-empty__eyebrow:not(#k) { color: var(--text-3); font: 500 12px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; }
.scout-chat-empty__body:not(#k) { color: var(--text-2); font: 400 16px/1.45 var(--font-sans); }
.scout-chat-empty__action:not(#k) {
  min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--r-full);
  background: var(--btn-secondary); color: var(--text-1); box-shadow: none; font: var(--type-button);
}
.scout-chat-empty__action:not(#k):hover { background: var(--btn-secondary-hover); }
@media (pointer: coarse) { .scout-chat-empty__action:not(#k) { min-height: 44px; } }
.notification-panel__empty:not(#k) { display: grid; justify-items: center; gap: 8px; padding: 32px 16px; }
.notification-panel__empty-mark:not(#k) { width: 40px; height: 40px; margin: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text-3); }
.notification-panel__empty-mark:not(#k) svg { width: 24px; height: 24px; }
.notification-panel__empty-title:not(#k) { color: var(--text-2); font: 500 14px/1.35 var(--font-sans); }
.notification-panel__empty:not(#k)[hidden] { display: none; }

/* ========================================================================
   14. Upload progress — a determinate 3px bar along the bottom of the
   pending attachment chip, filled with text (never ember); the chip dims
   its remove button's urgency while the bytes go up.
   ======================================================================== */
.scout-chat-pending-file.is-uploading { position: relative; overflow: hidden; }
.upload-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: color-mix(in srgb, var(--text-1) 10%, transparent);
  pointer-events: none;
}
.upload-progress::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--upload-progress, 0%);
  background: var(--text-1); border-radius: 0 var(--r-full) var(--r-full) 0;
  transition: width var(--dur-fast) linear;
}
@media (prefers-reduced-motion: reduce) { .upload-progress::after { transition: none; } }

/* Leftover one-off floating cards, moved onto the shared popover recipe
   (radius 12, borderless; over video they keep TM media glass). */
.chat-channel-activity-popover:not(#k) {
  border: 0; border-radius: var(--r-lg);
  background: var(--popover-glass-fill);
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: var(--popover-shadow);
}
.invite-pop:not(#k) {
  border: 0; border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
}
.invite-pop:not(#k) .invite-pop__row { border-radius: var(--r-md); }
.greenroom__filters:not(#k) { border: 0; border-radius: var(--r-lg); }
/* in-call More menu: radius 12, rows radius 8, checked is neutral (a check,
   not an ember icon + accent dot) */
#appShell.is-in-room[data-tool="room"] .room-more__menu:not(#k) { border-radius: var(--r-lg); padding: 4px; }
#appShell.is-in-room[data-tool="room"] .room-more__action:not(#k) { border-radius: var(--r-md); font: 500 14px/1.3 var(--font-sans); }
#appShell.is-in-room[data-tool="room"] .room-more__action:not(#k)[aria-checked="true"] > svg { color: var(--call-ctl-fg); }
#appShell.is-in-room[data-tool="room"] .room-more__action:not(#k)[aria-checked="true"]::after {
  width: 16px; height: 16px; border-radius: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.room-more__reaction:not(#k) { height: 44px; border-radius: var(--r-md); }
/* the pending attachment chip itself: borderless well (no 1px frame) */
.scout-chat-pending-file:not(#k) { border: 0; background: var(--btn-secondary); box-shadow: none; }
/* the More menu floats over video: TM media glass in both themes */
#appShell.is-in-room[data-tool="room"] .room-more__menu:not(#k) {
  background: var(--glass-media); color: var(--call-ctl-fg);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--call-glass-shadow); border: 0;
}
#appShell.is-in-room[data-tool="room"] .room-more__menu:not(#k) :is(.room-more__action, .room-more__label) { color: var(--call-ctl-fg); }
#appShell.is-in-room[data-tool="room"] .room-more__menu:not(#k) .room-more__action > svg { color: rgb(245 245 247 / .72); }
#appShell.is-in-room[data-tool="room"] .room-more__menu:not(#k) :is(.room-more__action, .room-more__reaction):is(:hover, :focus-visible) { background: var(--call-ctl-hover); }
#appShell.is-in-room[data-tool="room"] .room-more__menu:not(#k) :is(.room-more__reactions, .room-more__group + .room-more__group) { border-color: rgb(255 255 255 / .12); }