/* STRIDE web unification layer (critic round 1, 2026-09-24).
   Loads LAST. One rule per decision, each naming the critic item it closes.
   Specificity lifts use :not(#k) (matches nothing, adds one id) so these
   win over the per-id legacy stacks without !important. */

/* #10 Bonfire Chat is a normal pinned row: no filled "selected" card on the
   phone list (nothing is open there), the Stride mark on its tile. */
@media (max-width: 640px) {
  #chatTool[data-chat-view="threads"] .chat-thread-item[aria-pressed="true"]:not(#k):not(#k):not(#k) { background: transparent; box-shadow: none; }
  #chatTool[data-chat-view="threads"] .chat-thread-item[aria-pressed="true"]:not(#k):not(#k):not(#k) .chat-thread-item__title { font-weight: 400; }
}

/* #11 group avatars: a 2-up face stack at 20px (side by side, overlapping
   by 6px, a canvas ring between), readable at a glance; rail badges clear it */
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__cluster:not(#k) { position: relative; display: block; width: 34px; height: 24px; }
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__cluster:not(#k) > * {
  position: absolute; top: 2px; width: 20px; height: 20px; inset: auto; margin: 0;
  display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  font: 600 10px/1 var(--font-sans, system-ui); letter-spacing: 0;
  box-shadow: 0 0 0 2px var(--stride-color-surface, #141417);
}
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__cluster:not(#k) > :first-child { left: 0; top: 2px; }
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__cluster:not(#k) > :nth-child(2) { left: 14px; top: 2px; }
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__cluster:not(#k) > :only-child { left: 2px; width: 20px; height: 20px; }
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__cluster:not(#k) > :nth-child(n+3) { display: none; }
:is(.stride-sidebar__list, #chatTool .chat-threads) .chat-thread-item__icon--cluster:not(#k) { width: 34px; }
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item__cluster:not(#k) { width: 34px; height: 24px; }
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item__cluster:not(#k) > * { width: 20px; height: 20px; }
/* rail: a channel reads by its initial on a quiet tile; the count badge
   sits on the row's corner, clear of the glyph */
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item__icon[data-initial]:not([data-initial=""]):not(#k) {
  border-radius: 8px; background: var(--st-inset, var(--stride-color-surface-inset)); color: var(--text-2);
}
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item__icon[data-initial]:not([data-initial=""]):not(#k) svg { display: none; }
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item__icon[data-initial]:not([data-initial=""]):not(#k)::after {
  content: attr(data-initial); font: 600 13px/1 var(--font-sans, system-ui);
}
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item.is-unread .chat-thread-item__icon[data-initial]:not(#k) { color: var(--text-1); }
html #appShell.is-authed[data-sb="rail"] .stride-sidebar__list .chat-thread-item__unread-dot.is-count:not(#k) { top: -2px; right: -4px; transform: scale(.82); transform-origin: top right; }

/* #12 Settings: spacing, not hairlines; one theme control on phones (the
   Theme section), a real selected state on the phone section tabs, and a
   neutral Sign out (destructive-in-intent, not an alarm) */
.settings-panel .settings-layout:not(#k) { border-top: 0; }
.settings-panel .settings-nav:not(#k) { border-right: 0; }
.settings-panel .settings-header:not(#k) { border-bottom: 0; }
.settings-panel .settings-sheet-row:has(.settings-sheet-theme):not(#k) { display: none; }
.settings-panel .settings-sheet-signout:not(#k),
.settings-actions .settings-sheet-signout:not(#k) { color: var(--stride-color-text-secondary, #B3B5BC); }
@media (max-width: 640px) {
  .settings-panel .settings-nav__item:not(#k) { border-radius: 999px; padding-inline: 14px; }
  .settings-panel .settings-nav__item[aria-current="true"]:not(#k) { background: var(--stride-color-selection, #232428); color: var(--stride-color-text, #F5F5F7); font-weight: 600; }
}

/* #5 Drive: one Upload, the empty state IS the drop target, icon view
   toggles, no zero-facts, and one toolbar row on phones */
#filesTool .files-seg__btn:not(#k) { display: inline-grid; place-items: center; width: 36px; min-width: 36px; padding: 0; }
#filesTool .files-seg__btn svg { width: 16px; height: 16px; }
#filesTool #filesUploadButton.files-upload:not(#k) {
  min-height: 240px; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: transparent; border: 0; box-shadow: none; border-radius: 20px;
  outline: 1.5px dashed color-mix(in srgb, var(--text-1, #F5F5F7) 14%, transparent); outline-offset: -1.5px;
  color: var(--text-2, #B3B5BC); text-align: center;
}
#filesTool #filesUploadButton.files-upload:not(#k):hover,
#filesTool #filesUploadButton.files-upload.is-dragover:not(#k) { background: color-mix(in srgb, var(--text-1, #F5F5F7) 4%, transparent); outline-color: color-mix(in srgb, var(--text-1, #F5F5F7) 28%, transparent); }
#filesTool #filesUploadButton .files-upload__text:not(#k) { display: flex; flex-direction: column; align-items: center; }
#filesTool #filesUploadButton .files-upload__text b:not(#k) { font: 500 16px/1.4 var(--font-sans, system-ui); color: var(--text-1, #F5F5F7); }
#filesTool .drive-heading__more:not(#k) { display: none; }
@media (max-width: 860px) {
  #filesTool .drive-heading:not(#k) { flex-wrap: nowrap; gap: 8px; }
  #filesTool .drive-heading .workspace-files-search:not(#k) { flex: 1 1 auto; min-width: 0; max-width: none; }
  #filesTool .drive-heading__actions:not(#k) { flex: 0 0 auto; width: auto; flex-wrap: nowrap; gap: 4px; }
  #filesTool .drive-heading__actions :is(#filesUploadVisibility, #filesNewFolderButton):not(#k) { display: none; }
  #filesTool .drive-heading__actions :is(#filesUploadAction, .drive-heading__more):not(#k) {
    display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 50%;
  }
  #filesTool #filesUploadAction .drive-heading__action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #filesTool #filesUploadButton.files-upload:not(#k) { min-height: 200px; }
  /* the scope strip fades out instead of cutting a word in half */
  #filesTool .drive-scope-strip:not(#k) { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
}
@media (min-width: 861px) { #filesTool #filesUploadAction:not(#k) { display: none; } }
#filesTool #filesUploadButton .files-upload__icon:not(#k) { background: none; box-shadow: none; width: auto; height: auto; color: var(--text-3, #8E919A); }
#filesTool #filesUploadButton .files-upload__icon svg { width: 22px; height: 22px; }

/* #6 Meetings pre-join: the stage top-aligns with the Home rhythm (no void
   above it), a single room's row is its settings door (no second title), and
   the Daybreak camera-off preview is warm, not a near-black slab */
@media (min-width: 1024px) {
  #appShell .room-empty:not(#k) { justify-content: flex-start; padding-top: 40px; }
  #appShell .room-empty .lobby__panel:not(#k) { grid-template-rows: 0 repeat(6, auto) 1fr; }
  #appShell .room-empty .greenroom:not(#k) { align-self: start; }
}
#appShell .room-empty .lobby__list.is-single .lobby__row:not(#k) { background: transparent; box-shadow: none; }
#appShell .room-empty .lobby__list.is-single .lobby__dot:not(#k) { display: none; }
#appShell .room-empty .lobby__list.is-single .lobby__name:not(#k) { font-weight: 500; color: var(--text-2, #B3B5BC); }
html:not([data-theme="dark"]) #appShell .room-empty .greenroom__tile:not(#k) { background: var(--stride-constant-stage-chrome, #261D18); }

/* #17 one page-title rule: on desktop the sidebar carries location (no 16px
   tool label floating top-left on Meetings/Drive); on phones every top-level
   page opens with the same 24/600 title Conversations already uses */
@media (min-width: 1024px) {
  html #appShell.is-authed[data-sb]:is([data-tool="room"], [data-tool="files"]):not(.is-in-room) #topbarToolTitle:not(#k) { visibility: hidden; }
}
@media (max-width: 640px) {
  html #appShell.is-authed[data-tool="files"] #filesTool .drive-main::before,
  html #appShell.is-authed[data-tool="room"]:not(.is-in-room) .room-empty .lobby__panel::before {
    display: block; align-self: stretch; text-align: left; padding: 18px 2px 12px; font: 600 24px/1.3 var(--font-sans, system-ui); letter-spacing: -0.6px; color: var(--text-1, #F5F5F7);
  }
  html #appShell.is-authed[data-tool="files"] #filesTool .drive-main::before { content: "Drive"; }
  html #appShell.is-authed[data-tool="room"]:not(.is-in-room) .room-empty .lobby__panel::before { content: "Meetings"; }
}

/* #20 Home: catch-up follows content (no 1fr band pinning it low), and below
   1180 the right-column doors stack under the composer so recents keep
   their words */
@media (min-width: 1024px) {
  #officeTool .office-launch.stride-operating-home:not(#k) { grid-template-rows: auto auto auto; }
  #officeTool .office-launch.stride-operating-home > #homeCatchUp:not(#k) { grid-column: 1; grid-row: 3; margin-top: 40px; }
}
@media (min-width: 1024px) and (max-width: 1179px) {
  #officeTool .office-launch.stride-operating-home:not(#k) { grid-template-columns: minmax(0, 1fr); }
  #officeTool .office-launch.stride-operating-home > .office-launch__wrap:not(#k) { grid-row: 1; }
  #officeTool .office-launch.stride-operating-home > .home-doors:not(#k) { grid-column: 1; grid-row: 2; flex-direction: row; margin-top: 20px; }
  #officeTool .office-launch.stride-operating-home > .home-doors > .home-door:not(#k) { flex: 1 1 0; min-width: 0; }
  #officeTool .office-launch.stride-operating-home > .home-recent:not(#k) { grid-row: 3; }
  #officeTool .office-launch.stride-operating-home > #homeCatchUp:not(#k) { grid-row: 4; }
}

/* #21 same-titled Scout threads carry their day */
.chat-thread-item__disambig { color: var(--text-3, #8E919A); font-weight: 400; }
@media (max-width: 640px) {
  /* the Theme section is the one theme control: its tab is back in the strip */
  .settings-panel .settings-nav__item[data-settings-section="appearance"]:not(#k) { display: inline-flex; }
}

/* #10 the Bonfire Chat door wears the Stride mark at full ink */
#homeChatDoor .home-door__icon:not(#k) { color: var(--text-1, #F5F5F7); }
#homeChatDoor .home-door__icon svg:not(#k) { fill: currentColor; stroke: none; }

/* AJ 2026-09-24 sign-in face picker: ONE row, never an orphan second line.
   Up to 8 faces share the card width (52–56 discs); more, or a narrow card,
   and the row snap-scrolls, left-aligned, fading only the edge that hides
   faces. Names stay one line under each disc. Each face has its own tint. */
.login-card .login-people__row:not(#k) {
  display: flex; flex-wrap: nowrap; justify-content: center; gap: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: 0; padding: 6px 2px;
  -webkit-mask-image: none; mask-image: none;
}
.login-card .login-people__row::-webkit-scrollbar { display: none; }
.login-card .login-people__row.is-scrolling:not(#k) { justify-content: flex-start; }
.login-card .login-people__row.is-scrolling[data-fade-end="true"]:not(#k) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.login-card .login-people__row.is-scrolling[data-fade-start="true"]:not(#k) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); }
.login-card .login-people__row.is-scrolling[data-fade-start="true"][data-fade-end="true"]:not(#k) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.login-card .login-people__row .login-people__person:not(#k) { flex: 0 0 max(60px, calc(100% / 8)); width: auto; min-width: 60px; max-width: 76px; scroll-snap-align: center; }
.login-card .login-people__row .login-people__face:not(#k) {
  width: 52px; height: 52px; font-size: 18px; color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--login-face-tint, #7A86A8) 78%, #fff), var(--login-face-tint, #7A86A8));
}
html[data-theme="dark"] .login-card .login-people__row .login-people__face:not(#k) {
  background: linear-gradient(135deg, var(--login-face-tint, #7A86A8), color-mix(in srgb, var(--login-face-tint, #7A86A8) 62%, #000));
}
.login-card .login-people__row .login-people__name:not(#k) { max-width: calc(100% - 4px); }
@media (max-width: 640px) {
  .login-card .login-people__row .login-people__face:not(#k) { width: 48px; height: 48px; font-size: 17px; }
}
.login-card .login-people__who .login-people__face:not(#k) { color: #fff; background: linear-gradient(135deg, var(--login-face-tint, #7A86A8), color-mix(in srgb, var(--login-face-tint, #7A86A8) 62%, #000)); }
/* the card grows just enough for eight 52 discs in one row (desktop/tablet);
   phones keep the full-width card and the row scrolls */
@media (min-width: 641px) {
  #appShell:not(.is-authed):not(.is-guest) .access-panel:has(.login-people__row):not(#k) { width: min(488px, calc(100vw - 48px)); }
}
.login-card .login-people__row .login-people__person:not(#k) { flex: 0 0 max(54px, calc(100% / 8)); min-width: 54px; }
.login-card .login-people__row .login-people__face:not(#k) { width: min(52px, calc(100% - 2px)); height: auto; aspect-ratio: 1; }

/* #1 Scout's sparkle is neutral ink on every width and theme (ember is
   earned, never Scout's identity) */
#chatTool .scout-chat-msg--scout .scout-chat-msg__idbadge:not(#k):not(#k) { color: var(--text-1, #F5F5F7); }
/* #14 recap and alert cards own the whole message column on phones */
@media (max-width: 640px) {
  #chatTool :is(.scout-chat-msg--recap, .scout-chat-msg--brain) .scout-chat-msg__stack:not(#k):not(#k) { max-width: 100%; width: 100%; }
  #chatTool :is(.scout-chat-msg--recap, .scout-chat-msg--brain) .scout-chat-text.bp-host:not(#k):not(#k) { max-width: 100%; width: 100%; }
}
@media (max-width: 640px) {
  /* r2 R3: the message row itself was capped at min(480px, 85%) */
  #chatTool .scout-chat-msg:is(.scout-chat-msg--recap, .scout-chat-msg--brain):not(#k):not(#k) { max-width: 100%; width: 100%; }
}

/* r2 R2: on phones the Notifications panel is an opaque sheet over a dim
   backdrop, and a row title may take two lines instead of truncating */
@media (max-width: 640px) {
  #notificationPanel.notification-panel:not([hidden]):not(#k) {
    background: var(--stride-color-surface, #141417);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 100vmax var(--stride-color-scrim, #000000A3), var(--shadow-float, 0 16px 40px #0000008C);
  }
  #notificationPanel .notification-item__author:not(#k) {
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  #notificationPanel .notification-item__headline:not(#k) { align-items: flex-start; }
}

/* r2 R5: the two Home doors keep their own heights when they share a row */
@media (min-width: 1024px) and (max-width: 1179px) {
  #officeTool .office-launch.stride-operating-home > .home-doors:not(#k) { align-items: flex-start; }
}
@media (min-width: 721px) and (max-width: 1023px) { #officeTool .home-doors:not(#k) { align-items: start; } }
.global-search__row-icon svg[viewBox="205 225 614 574"] { fill: currentColor; stroke: none; }
/* r2 R7: on narrow phones the scrolling picker reads as a scroller — smaller
   faces, and a wide fade on whichever edge hides more people */
@media (max-width: 420px) {
  .login-card .login-people__row .login-people__person:not(#k) { flex-basis: 52px; min-width: 52px; }
  .login-card .login-people__row .login-people__face:not(#k) { width: 44px; font-size: 16px; }
  .login-card .login-people__row.is-scrolling[data-fade-end="true"]:not(#k) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 64px), transparent); }
  .login-card .login-people__row.is-scrolling[data-fade-start="true"]:not(#k) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px); mask-image: linear-gradient(90deg, transparent, #000 64px); }
  .login-card .login-people__row.is-scrolling[data-fade-start="true"][data-fade-end="true"]:not(#k) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
}

/* r2 R1: on phones the pre-join preview is capped so the room title and the
   one primary action ("Join the office") always clear the tab-bar dock */
@media (max-width: 640px) {
  html #appShell.is-authed[data-tool="room"]:not(.is-in-room) .room-empty .greenroom__tile:not(#k):not(#k) {
    aspect-ratio: auto; width: 100%; height: clamp(160px, calc(100dvh - 448px), 380px); max-height: none;
  }
  html #appShell.is-authed[data-tool="room"]:not(.is-in-room) .room-empty:not(#k) { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
}
/* r2 R10: the lone room row is a quiet "Manage the office" action */
#appShell .room-empty .lobby__list.is-single .lobby__more:not(#k) { display: none; }
#appShell .room-empty .lobby__list.is-single .lobby__row:not(#k) { min-height: 36px; padding: 0; }
/* the label lines up with the title and Join column; the hover pill bleeds into the gutter */
#appShell .room-empty .lobby__list.is-single .lobby__pick:not(#k) { padding: 0 12px; margin-inline-start: -12px; min-height: 36px; border-radius: 999px; width: auto; }
#appShell .room-empty .lobby__list.is-single .lobby__pick:hover:not(#k) { background: color-mix(in srgb, var(--text-1, #F5F5F7) 6%, transparent); }
#appShell .room-empty .lobby__list.is-single .lobby__name:not(#k) { font: 500 15px/1 var(--font-sans, system-ui); color: var(--text-2, #B3B5BC); }

/* r2 R14: a hidden header control stays hidden on phones (the Ask Scout
   sparkle was forced visible inside Scout's own threads) */
#chatTool .chat-convo-head :is(.chat-convo-head__pill, .chat-convo-head__tool, .chat-convo-head__riff)[hidden]:not(#k):not(#k):not(#k) { display: none; }

/* critic r3 P3: your own bubble never repeats the day divider's time or names
   you; only a "via Scout" provenance line stays beneath it (every width) */
html #appShell.is-authed #chatTool .scout-chat-msg--user .scout-chat-msg__meta:not(:has(.scout-chat-msg__via)):not(#k) { display: none; }

/* critic r4: Stop is a secondary fill with a text glyph (components §Stop),
   never the primary send fill; it wins over every width's send rule */
html #appShell.is-authed #chatTool #scoutChatForm .scout-chat-send[data-mode="stop"]:not(#k),
html #appShell.is-authed #roomChatPanel .scout-chat-send[data-mode="stop"]:not(#k) { background: var(--btn-secondary); color: var(--text-1); }
html #appShell.is-authed #chatTool #scoutChatForm .scout-chat-send[data-mode="stop"]:hover:not(:disabled):not(#k),
html #appShell.is-authed #roomChatPanel .scout-chat-send[data-mode="stop"]:hover:not(:disabled):not(#k) { background: var(--btn-secondary-hover); }

/* critic r4: on phones ⌘K is an opaque sheet like Notifications — nothing
   behind it reads through the glass, in either theme */
@media (max-width: 640px) {
  html #appShell #globalSearchRail.global-search:not([hidden]):not(#k) {
    background: var(--stride-color-surface, #141417);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 100vmax var(--stride-color-scrim, #000000A3), var(--shadow-float, 0 16px 40px #0000008C);
  }
  html #appShell #globalSearchRail.global-search:not(#k)::before,
  html #appShell #globalSearchRail.global-search:not(#k)::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}